文章出自>>pixbots

今天为大家介绍一款浏览器插件—CSS Peeper ,有了这款chrome 插件,设计师可以不再需要挖掘代码,因为CSS Peeper可以非常方便的查看网页中的css样式。总结一句话就是让设计师专注于设计,并在代码中花费尽可能少的时间。
前段时间我们团队创建了名为CSS Peeper的 Chrome扩展程序,让设计师在工作中更加轻松。曾经我们时常想知道网站上的行高,字体或按钮大小是多少,现在我们为您提供满足您设计好奇心的终极工具。

下面你会看到一个关于这个工具是如何开发的简短故事,以及我们通过Chrome扩展程序为您提供有哪些功能。



背景故事

想象一下,您正在重新设计数字产品而没有风格指南可供参考。您可能要做的第一件事就是去产品网站检查设计系统和品牌的本质:颜色,排版,间距以及寻找特定的图像或图标。
你可能想要检查一些现有的CSS样式,获取调色板或下载一些可能有用的素材。问题是:如果不深入浏览器的代码检查器,您如何获得这些?
作为Chrome用户,我去寻找一个基本上可以为我解决这些问题的扩展。我发现了很多不同的插件:设计很差,只解决小问题,都不是以用户为中心。他们中的许多设计都没有注重细节和可用性问题。
事实上,这些插件都没有完全解决我的问题,也没有完美的解决方案。
基本上我无法找到符合我所有需求的Chrome扩展程序。我决定问其他设计师他们是否曾经找到类似的工具。令人惊讶的是,他们会用到非常多的扩展程序去解决当前的问题,这对设计师而言势必是很麻烦的一件事。

我一直希望为每位设计师提供类似瑞士军刀的扩展。这就是我们决定创建CSS Peeper的原因

经过几个小时的搜索,我决定从零开始创造新的扩展工具。这个想法变成了一个名为CSS Peeper的项目。我已经向我的朋友JędrzejDadowski提出了这个设计概念,他是一位出色的前端开发人员,一切就绪,马上开工!


认识CSS Peeper

我们追求的目标很简单,它必须是一个不太复杂而方便的代码检查器,并且它能给我展示所有必要的样式。在这些需求的推动下,我为这款工具定义了需求清单:

  • 检查Web上可用的样式,而无需切换插件。
  • 快速浏览网站上使用的排版(字体系列,大小,行高等)。
  • 能够在不检查网站的情况下查看网站上的所有颜色。
  • 检查单个元素以获得大小,填充和样式效果,如阴影,悬停状态等。
  • 只需点击一下即可下载素材(pngs,svgs,jpgs等)。
  • 最佳用户体验的UI设计。
  • 以简单,组织良好和美观的方式提供所有信息。

就是这样子,上面所列的需求被转换为第一版CSS Peeper的所有功能。

满足设计师的期望

我想到的第一件事就是UI的简洁和美观。其实为设计师设计一款工具是一件非常困难的事情。我们必须要看到其他人没有看到的要素,并且界面留给别人的第一印象一定要深刻,使用起来非常愉悦而又完美无瑕。

选择要检查的项目

我们扩展工具的核心功能:当您启动它时,您可以单击网站上的不同对象,如按钮,标题,背景和您要检查的任何内容。

因此,您将获得所选对象的完整信息,并提供一些便于在Sketch或Photoshop中使用的参数属性。

调色板

CSS Peeper允许您检查网站上使用的所有颜色。您可以通过在几秒钟内就可以找到你所需要的颜色参数。

我们计划添加快速复制选项,并可以在不同的颜色值(如HSL或RGB)之间切换。如果您在使用过程看到更多改进的空间,请告诉我们,我们将实现这一目标!

下载素材

如果您曾尝试从代码中最深的嵌套中提取某些资源(如图像,svg图标等),那你一定会非常喜欢我们开发的下载资源功能。

CSS Peeper为您简化了繁琐的工作,您无需深入挖掘代码。因为我们提供逐个下载资源或将它们全部打包为.zip文件的功能。

到目前为止发生了什么

我们真的很高兴地宣布,自CSS Peeper推出以来,我们目前拥有超过16,000名用户!太棒了!除了这个数字,我们收集了数百条积极意见,并从我们的用户那里获得了一些非常有价值的反馈。下面你可以找到那段时间的一些有趣的图表。

2016年12月19日至2017年1月2日期间收集的数据

2016年12月19日至2017年1月2日期间收集的数据

发布后差不多三天,关于CSS Peeper的消息传开了,我们在最受欢迎的设计博客中被推荐:

我们受到了来自世界各地的数百名设计师的热烈欢迎。这是一种激励,并使我们有能力开发CSS Peeper……

我们需要您的意见!

目前我们已经提供了可以免费下载并使用产品,我们希望扩展工具可以满足用户需求。我们对这个小产品有自己的看法,但我们也想直接听取您的意见!

现在免费获取!

或者直接下载

我们真的很想从设计师自己那里听到更多,并了解他们对使用CSS Peeper的感受,以便我们可以设计以用户为中心的工具。您的所有建议和想法对我们来说都是非常宝贵的!
如果您有任何问题,建议或只是想表达您的支持 – 我们建议您发表评论或在TwitterFacebook上找到我们。
如果你喜欢你所读的内容,别忘了点亮下面的小心!