腾讯设计团队出品干货!UI设计师必备高效率工具合集(xshow屏幕不显示)

今天，负责腾讯社交网络相关产品的用户体验设计与研究的腾讯核心设计团队，腾讯社交用户体验设计ISUX (Internet Social User Experience)，更新了一系列针对UI设计师的效率神器合集。

在文中ISUX强调了“全链路UI设计师”这一概念，认为这个概念与传统UI设计的区别体现了UI设计师这一角色职责的变化。

比如对于设计师来说，上下游之间的协作越来越紧密，介入阶段越来越往前，需要更深入的产品思考、用户洞察，以及更高效的沟通合作和细致的质量把控等等。

针对如何成为更全能的UI设计师，ISUX以日常工作流程为路径，为大家整理了一波实用小技巧和小工具，让我们一起来看看吧。

01

设计积累工具/DESIGN

WhatFont

当你想知道一个网站使用了什么字体时，可以安装一款叫做 WhatFont 的浏览器插件。

开启时鼠标 hover 到文字上即可快速识别出字体、字号、字重、行高和颜色，非常简单实用。

UXArchive

该网站收集了来自世界一流的科技公司的产品用户体验流程。例如，你正在设计“用户登录”体验，需要参考时通常都是打开不同的 App 一个一个体验和截图。而通过这个网站，你可以根据场景快速浏览其他公司的示例，对比不同的解决方案。

Eagle

素材管理产品Eagle 应该是很多设计师耳熟能详的了，它支持图片和视频等基础格式，有丰富的标签系统和智能分类功能。此外还支持可视的字体管理，也能够预览 PSD 格式。

02

调研分析工具/DESIGN

七麦

如果你的产品是一个成熟的上架了各大应用商店的 App，可以通过一些第三方平台看到各应用商店的评分评论汇总，构成和趋势，也可以将自己的 App 和竞品放到一起对比。

微博

商店评分和用户反馈通常的内容通常比较有针对性，大部分都是围绕已有的功能。

如果想要看到用户在生活中如何使用我们的产品，则可以去社交平台上搜索产品的关键词，常常会有些很有趣的发现。

03

设计精进工具/DESIGN

Mesh Gradient 网格渐变工具

一款 Figma 插件，Illustrator 里强大的 Mesh 功能在 Figma 里也能用了。做好的渐变还可以保存下来多次复用。

Runner Pro

如果你主力使用 Sketch，那么 Runner Pro 将会是一个很好的 Sketch 助手。它的使用方式就像在 Mac 中使用系统聚焦搜索，通过一个搜索框即可快速完成组件插入，指令运行，插件安装，以及快速前往某个画板。

Runner 的组件搜索支持中文，但对于多个关键词的模糊搜索还是对英文支持比较完整。

Blush 插画插件

一个由 Pablo Stanley 设计的免费可商用的手绘风格的插图库。任务造型有数十种选项可供选择，可以自定义角色的头发、裤子、肤色等等，无需打开 Illustrator 即可创建具特色的的插图。适合用来做运营插画，拼用户故事版，PPT配图等。

地址：

https://blush.design/zh-CN

动画曲线预览

细腻的动画能够让体验更有温度，这个网站提供了五种简单的网页版式和最基础的三组动画曲线，你可以选择最适合你的 demo，体验不同动画曲线在实际页面上的感受。底部还可以调整具体参数来达到想要的效果。

地址：

https://easings.co/

04

输出还原工具/DESIGN

Design Project Template

这是由 Dropbox 团队整理的设计项目模板，可以从 Figma Community 中复制一份使用。每份设计稿都包含基础的项目信息，责任人，进度等概览信息，尤其对于直接和开发、产品经理共享 Figma 稿件的团队而言很好地保留了相关的上下文信息，提升项目沟通效率。

设计协作工具 XSHOW

XSHOW是一款由 ISUX 研发的高效设计协作平台，通过其官方 Sketch 插件，你可一键将设计稿上传到云端，XSHOW 会保留完整的版本记录和成员操作。上传到云端后分享给开发人员即可在线查看标注，多端预览。除此之外 XSHOW 的团队管理还可以控制权限时效，这一点在敏感项目对外合作的场景下可以说非常实用了。

地址:

https://xshow.tencent.com

还原自检 Window Resizer + Zeplin

Window Resizer 是一款 Chrome 插件，正如其名就是可以把浏览器窗口固定到指定尺寸，可用于检查网页的自适应策略，或截特定尺寸的图。

我们常常配合标注工具 Zeplin 的叠图功能使用。将浏览器设置为和设计稿相同的尺寸，再将半透明设计稿叠上去即可一眼看出网页是否还原到位，还有哪些地方需要调整。一图胜千言，再也不怕开发哥哥说“看不出来”了，显著提升了沟通效率和团队和谐气氛。

图片压缩工具

如果仍采用非在线的较为传统的交付方式，通常需要导出为图片发给对方。有时输出网页设计或者完整流程交互稿的尺寸较大，可以多做一步压缩工作。一来同步方案的时候合作方更容易打开，另外需要导出多个版本时占用我们自己电脑空间也比较少。

如果图片在 5M 以内或者需要批量处理，可以用 ImageOptim 或者 Tinypng 应用来进行无损压缩，通常可以减少 60-90% 左右。但如果图片尺寸超过 5M ，使用以上两个应用耗时较长而且容易失败，此时可以试试在线压缩网站 https://compresspng.com/，即使是超过 20M 的大图也可以稳定压缩。

Rotato 动态 Mockup

Rotato 提供了很多常见的动态 Mockup 效果，只要将你的设计稿放进去（图片或视频皆可），即可快速实现高端大气的展示效果，支持非常完备的苹果设备以及部分主流安卓设备，效果包括界面的反转，拉近，滚动展示等。

地址：
https://www.rotato.app/mockups

05

数据验证工具/DESIGN

AB 测试用户样本计算小工具

AB 测试，也称为分桶测试或分批测试。AB测试本质上就是把平台的流量分为为几个不同的组进行实验，然后观察不同组的用户数据指标，例如：点击率、次日留存、人均观看时长等等核心指标，最终选择一个更有效的实验组上线。

在开始设计实验之前，需要明确实验的目标。基于假设方案中的元素个数，AB 测试可以分为单一变量测试和多变量测试。这里以单一变量为例来进行简单的说明，如何进行流量分桶。我们推荐这个免费的小工具，来进行流量分配：
https://www.evanmiller.org/ab-testing/sample-size.html，根据实验的预期结果，大盘用户量，来确定实验所需最小流量。