作为设计师,我们总是会关注寻找新颖的技巧和工具,以帮助我们提高工作效率改善工作流程。在对常用的Chrome扩展程序进行了几个月的使用后,我推荐最出色的10个扩展程序和插件。
Window Resizer窗口适应器
如果你是设计师,那么在阅读制作网页或程序UI时,很可能会是使用27英寸的iMac,但是,我们的大多数用户都没有这么大的显示器。
为了在不同的显示器上预览输出效果,安装Window Resizer扩展程序,然后选择预设尺寸或输入自定义的数值,页面会自动在相应的尺寸像素下展示。
Loom 织机
一款令我惊叹的免费插件,可以记录动画、视频、用户流或者bugs,并能和团队共享。
我已用了好几个月了。当网页上的一些不能通过屏幕截图来记录的内容时,Loom扩展程序就派上用场了。本质是一个屏幕内容录制软件。
Toybox 玩具盒
是不是你也曾花费大量时间检查网站元素代码,截取屏幕并记录错误呢?如果是的话,除了Toybox,别无他选。用Toybox是检查CSS错误的最快的方法。
可以将其视为InVision注解和Zeplin检查,但不会修改实际代码。不仅如此哦,当进行操作时,它会自动截取屏幕,记录浏览器数据,操作系统信息,窗口大小等,从而让存在的问题显而易见。对于很多产品团队来说,这是一个非常有效的插件。
Muzli
当开始坐在电脑前边的时候,是不是需要一点灵感?Muzli的Chrome扩展程序可以提供你需要的灵感来源。每次打开新的标签页,都会看到眼前一亮的最新供稿。从大量的设计资源中汲取灵感,为你提供最新最时尚的设计灵感。
SVG Grabber SVG抓取器
有时,我们只需要网页上的一个icon或logo,而很多都是svg格式。SVG Grabber会自动读取页面上的SVG,单击扩展程序,会自动出现页面上所有的SVG文件,并可以下载。
虽然使用的频率不会很高,但是有这个扩展程序插件在,当我们遇到比较棘手的问题时,就不会捉襟见肘、枉费心思。
Page Ruler
测量页面上对象的大小尺寸其实有很多方式,可以截图放到图片工具里边测量,也可以用qq或者微信的截图工具测量。在这里推荐Rage Ruler,不需要开启qq或者微信或者Photoshop等,直接在浏览器里面即可拖动框选工具测量尺寸。
Dark Mode Dev Tools
黑暗模式,相信很多设计师都有黑暗模式开发的需要。这个工具实际上是内置在Chrome Dev Tools中的,不算是扩展程序,但是还是值得推荐。
打开Chrome的开发者工具(快捷键Ctrl+Shift+I),>单击右上角的菜单项>单击settings>Under Appearance,可以切换到黑暗模式。
ColorZilla 颜色色值识别器
使用这个插件时,只需要把鼠标悬停在要查看的元素上方,即可查看元素的十六进制或rgb颜色值。单击可以快速将数据复制到剪切板。快速,简单,高效。
Fontface Ninja 字体识别
把鼠标悬停在字体元素上,既可以查看字体的类型名称。
Custom Cursor 自定义光标
这款插件工具虽然不是设计师专用,但是前一段时间偶然遇到,感觉非常有趣。可以把默认光标更改为任意一种你喜欢的,还可以上传自定义的光标。
有趣、时髦、新鲜感,这是我的感觉。
虽然本文介绍的是Chrome的插件,其实其他的基于Chrome内核的浏览器一样适用,比如新edge、360浏览器,百度浏览器等。