目录

    内容简介

    作者简介

    推荐序

    前言

    第1章 移动端组件的认识与运用

    01 搜索

    02 加载

    03 金刚区

    04 表单

    05 评论区

    06 提示框

    07 产品列表布局

    08 按钮

    09 标签

    10 聊天气泡框常见问题

    11 图片比例

    12 关于卡片圆角的思考第2章 能力效率提升

    01 一套图标的诞生

    02 手把手教你制作设计规范

    03 关于适配这件小事的前世今生

    04 如何高效地进行验收

    05 组件的理性选择

    06 倾囊相授Sketch使用的小技巧

    07 那些你不知道的好用软件

    第3章 设计理论与实践

    01 情感化设计理论

    02 格式塔原理

    03 巴甫洛夫反应

    04 费茨定律

    05 五大交互心理学

    06 尼尔森十大可用性原则

    07 拟人形法则

    08 黄金比例

    第4章 工作困惑

    01 为什么你的App不耐看02 三招教你学会优化信息层级

    03 四步教你提升表单设计的用户体验

    04 怎么样的临摹才最有效

    05 设计稿如何自查

    06 如何准备一份合格的作品集

    07 如何输出一份完整的测试题

    致谢内容简介

    本书通过理论讲解和案例分析，详细介绍了初级UI设计师必须掌握的基础知

    识，分享了作者在工作中的实践经验。第1章“移动端组件的认识与运用”主要介绍

    常用组件的特性及使用场景；第2章“能力效率提升”主要针对日常工作、学习中遇

    到的问题和瓶颈，分享相关的解决方案；第3章“设计理论与实践”主要介绍一些设

    计领域内实用的理论知识，帮助大家理解优秀设计的内部规律；第4章“工作困

    惑”针对UI设计师在不同工作阶段遇到的困惑，提出具体可操作的建议。

    本书适合UI设计领域从业者、爱好者阅读，也适合平面设计、网页设计等相关

    专业的学生阅读。

    作者简介

    海盐社

    海盐社的成员来自于全国各地，分布在各种规模的企业中。成员E有从业5-8深

    设i师，也有刚刚毕业的新人。成员的多样性，让相互促进成为可能。大家会定期分

    享和讨论彼此的收获，取长补短。团队自2016年成立至今，一直坚持“分享就是学

    习”的理念，鼓励成员在设计平台发表自己的收获，为UI行业的发展贡献一份力

    量。我们精选了过去三年的优质内容汇聚成了这本书，希望本书可以帮你开拓思

    路、夯实方法论。吴萌(橙子的橙子)

    UI中国推荐设计师，广告专业出身，先后独立负责过网页端、移动端的界面设

    计，目前就职于一家独角兽公司。

    付铂理(小溜)

    UI中国推荐设计师，从事UI设计行业5年，曾负责PC端、网页端等多平台设计

    工作，目前主要负责移动端UI设计，经常在设计平台分享自身的经验，帮助大家共

    同提升。

    姜正

    UI中国推荐设计师，OW潜水员。广告设计出身，入行早年间曾经在一家创业公

    司单打独斗，独自度过了新人期，深知UI从业新人的迷茫和痛点。刘芳(风筝KK)

    UI中国推荐设计师，拥有6年丰富的UI设计实战经验和理论知识，发表过多篇专

    业文章，并被多个平台推荐和转发。

    推荐序

    当你正式踏上用户体验设计这条路的时候，你面前就会有两大障碍：一，面对

    产品经理给的原型图，无从下手，彻彻底底地变成一个美化工作者，导致工作质量

    和效率一直无法提升，在团队面前没有任何话语权；二，面对各种各样的理论、原

    则、规范，疑惑到底哪个才是最重要的？应该如何去把它们跟实践结合起来？如何

    去一个个攻破它们？以往设计知识匮乏，但现在的设计环境已经变了，面对铺天盖

    地的经验和教程，哪些才是真正能够对新手设计师有帮助的呢？

    海盐社是由一群在UI中国非常活跃且非常优秀的设计师组成的团队。他们从新

    手设计师逐渐成长为高级设计师，一步一个脚印，基于自己的工作经验积累和外文

    基础，发布了大量的原创和自译文章，收到了几十万会员的点赞和收藏。

    而这本书，就是他们在实践中逐步提炼出来的经验总结。

    我相信，他们是一群最了解新手设计师成长经历的人。我也希望，这本书能够

    给新手设计师带来更多的价值，帮助新手设计师快速提升自我!

    董景博

    UI中国用户体验设计平台创始人、CEO前言

    我们的初衷

    随着移动端的变革，UI设计行业已经从新兴期逐步进入成熟期，UI设计师已经

    不再是稀缺性人才，行业门槛也变得越来越高。有幸的是，2016年我们在“海盐

    社”相遇。初期我们只是想提升自己对知识的巩固和整理能力，坚持着每周一篇文

    章的分享交流。然而我们惊喜地发现，我们的分享被越来越多的人关注、转发、点

    赞。这让我们可以很好地解答每个读者的问题，同时也使我们自身对知识的了解更

    加深入，对我们来说这是意外的提升。通过不断收集读者反馈我们发现，我们的文

    章可以帮助到一些刚入行的UI设计师。将自我提升的分享优化为可以帮助新设计师

    的经验总结，便有了现在的这本书。

    我们的亮点

    对于出书，我们初期也是犹豫再三，因为市面上的设计类书籍以大厂出品居

    多，书中的内容也十分优秀，可它们对于部分初级的设计师来说，实践时会存在很

    多的阻碍。所以我们觉得，应该有一本让更多初级设计师可以用到的书。我们并非

    来自大厂，相反都是在创业公司中混迹的设计师。为了让自己不断提升，我们努力

    沉淀着经验；为了让初级设计师少走弯路，我们把曾经碰到的问题逐个道来，由浅

    入深地和大家讲讲UI设计那些事儿。

    本书的结构

    第1章“移动端组件的认识与运用”，主要是对入行不久的设计师做一个基础知

    识的普及，带你深入理解常用组件的特性及使用场景，快速降低错误使用的概率。

    第2章“能力效率提升”，主要介绍当我们在日常工作、学习中遇到问题和瓶颈

    时，可以通过哪些方法来解决。而为什么相同的方法，不同的人使用起来却相差甚

    远，我们也会对这个问题的根源进行剖析。

    第3章“设计理论与实践”，主要介绍设计领域实用的理论知识，帮助大家理解

    优秀设计的内部规律，让你在展示方案时更具说服力。第4章“工作困惑”，针对设计师在不同工作阶段遇到的困惑，我们分享了自己

    的建议。对照我们的建议，结合自身的经历去思考、运用，相信你能有进一步的收

    获。

    参与本书编写的作者有吴萌、付铂璎、姜正、刘芳。这是我们四位设计师第一

    次写书，我们基于公众号中的精选文章加以精修，无论文字还是案例都会是全新的

    体验，希望可以真正帮助大家在设计工作中解决更多的困难。

    第1章 移动端组件的认识与运用

    01 搜索

    文付铂璎

    目前，搜索是每个应用产品不可缺少的一部分，同时也是用户经常使用的功

    能。一个好的搜索设计能够提高转化率，提升用户体验。下面来看看搜索设计的一

    些套路。

    搜索入口的设计样式

    搜索入口的设计与搜索功能在产品中的位置密切相关，不同的应用场景所使用

    的搜索入口样式也是不同的，下面介绍四种常用的搜索入口样式。

    1. 底部标签栏入口

    把搜索功能作为底部标签栏中的一个功能模块，适合将搜索作为重要流量入口

    的App，同时也可以与其他的功能模块入口相结合，如下图所示：“布卡漫画”就是把搜索和其他小的功能模块入口相结合，如热榜、VIP专区

    等。底部搜索入口本身并没有搜索功能，因此常常会与搜索框样式相结合使用。

    2. 搜索框导航入口

    这是常见的展示形式之一，将搜索入口以输入框的形式放置在导航栏中或者导

    航栏下方，有些应用即便界面向上滑动时，搜索框仍会吸顶显示，方便用户随时操

    作(是否吸顶显示要根据搜索功能在应用中的权重而定)，如下图所示：搜索框导航入口除了必须要有的输入框外，还需要一个搜索图标给予用户提

    示。目前很多应用也会利用搜索框内的区域显示预设文案，作为提示用户的关键

    词，也可以作为运营的入口来展示。

    3. 搜索图标入口

    这同样也是常用的搜索方式，常见形式是将一个放大镜的图标放在导航栏的右

    侧。相对上面提到的搜索框，它在视觉引导上略逊一筹，但节省了导航栏的空间，让导航栏可以为用户提供更多的功能，适用于搜索权重不高的应用中。当然也有特

    别的搜索图标方式，例如自如，同样是搜索图标，由于不同的位置和层级变化，入

    口变得更加突出，如下图所示：4. 隐藏的搜索入口

    为了让用户更多地使用桌面提供的快速入口，一些设计中的初始界面将搜索功

    能隐藏，滑动界面时才会出现搜索功能。例如iPhone手机解锁后的界面是各个应用

    入口，当向右滑动时，隐藏的搜索入口才会出现，如下图所示：搜索方式

    搜索方式就是我们通常会用哪些方法去搜索要找的东西，下面介绍三种常用的

    搜索方式。

    1. 文字搜索

    文字搜索是主要且常用的搜索方法，通过在输入框中输入关键字进行精准搜

    索。当前几名，能给用户带来极大的成就感，激励着他继续使用这个

    产品。但是这种方式有一个弊端，当自己回复别人的帖子后，按照点赞数排序的话，自己的评论会被掩盖在热门评论下，很难找到自己评论的内容，会让用户以为操作

    没有成功。

    2. 按照评论时间正序排列

    这种方式比较符合正常人的思维逻辑以及视觉流程，从上到下，先来的先显

    示，后来的后显示。但是却不太适合移动端的体验，当用户一打开最先看到的是时

    间最久的评论时，会觉得这个App信息更新得太不及时，跟不上潮流。而且一些优质

    的评论会因为发布时间晚排在很下面，从而被用户忽视。3. 按照评论时间倒序排列

    这种方式下，用户自己回复的内容立马就能看得到，操作有反馈，体验较好，但相应的优质评论容易被时间淹没。

    这几种排序方式还可以组合起来使用，例如网易云音乐就结合了点赞数和时间倒序这两种方式，在最上方显示十几条精彩评论，按点赞数排序；下方按照时间倒

    序排序，在一定程度上满足了用户既想看到热门的评论内容，又想实时看到自己发

    布的内容的心理。

    不过这种方式仍有弊端，热门评论较多，十几条评论需要划过好几屏，对我这

    种很少听歌的用户来说，听到好歌难得去评论一下，结果半天没找到自己的评论在

    哪里。试了好几次，划了好几屏才看到自己的回复内容安静地躺在最新评论里。

    微博则单独进行了分类，用户可以根据自己需要选择评论排列方式，默认是按

    热度，也就是点赞数。画重点当你的产品评论时效性较强的时候，评论排序方式可以选择时间倒序，最新的

    评论显示在最上方。如视频类App，回复内容大多类似，所以按照时间来排序最好不

    过了；当你的产品是希望用内容来吸引用户，那你可以选择按点赞数排序，点赞最

    多的显示在最上方，如新闻类App。

    至于回复别人评论的时候怎么显示，可以根据自己产品的调性而定，当前期产

    品活跃度不够，评论较少的时候，可以采取每条回复都带上原帖，这样会显得评论

    区的内容多，氛围活跃一些；当产品评论数量多的时候，可以把针对一条评论的所

    有回复内容放置到一个新的页面，这样用户在看别人的评论以及回复的时候有针对

    性，也有前因后果，能够知道谁回复了谁，谁又评论了谁。

    06 提示框

    文吴萌

    在日常工作中我们经常会看到各种类型的提示框，在官方的规范里，它们都有

    各自的叫法以及用法，什么场景下用什么样的提示框，也早已有了定义。只是有些

    提示框类型极其相似，难免有人会在工作中将其归错类别。

    提示框的作用

    在细分提示框的种类之前，先说一下它的作用。提示框作为界面中一个必不可

    少的组件，有它存在的独特的意义，主要的作用有三个:

    1. 提醒用户

    在用户操作时给予提醒，特别是一些操作会影响到用户利益的时候，通过提示

    框去提醒他们做二次确认，减少因为误操作而带来的损失。

    2. 选择权

    用户进行重要的操作，例如删除所有订单且删除后不可复原时，通过提示框把

    选择权给用户自己，让他们自己决定当前的操作是否进行下去。

    3. 知情权告知用户当前所发生的事情，让他们对当前状态有一个预估，让用户有知情

    权。

    提示框的种类

    按照不同的维度划分的话，提示框的种类特别多。本文以最简单的维度——模

    态和非模态进行划分。模态框指的是当它出现的时候，用户必须对其进行操作(确

    定或者取消)，才能关闭它，进行下一步。而非模态框则指的是不需要用户进行操

    作，它自己会在设定的时间内自动消失，用户只能等待它自己默默消失。

    1. 模态对话框——Dialog

    关于Dialog，Material Design是这样说的：“Dialog用于提示用户做一些

    决定，或者是完成某个任务时需要一些其他额外的信息。Dialog可以是“取消确

    定”的简单应答模式，也可以是自定义布局的复杂模式，例如说一些文本设置或者

    是文本输入。”

    简单来说，Dialog主要是去提示用户当前页面需要去做选择，而用户必须对提

    示框的内容进行响应，才能进行其他的操作。

    Dialog一般包含标题、内容区域、操作区域。操作区域一般有两个功能按钮，通常一个是肯定的一个是否定的(与肯定的事

    件对立)。一般积极的、肯定的或者说产品希望用户做的选择，会放在右边。肯定

    的事件也可以是具有破坏性的，例如“删除、放弃”等。

    肯定事件和否定事件除了可以使用“确认”“取消”外，也可以用其他一些动

    词或者是动词短语来代替，例如“升级、点错了”等。1)延展——自定义提示框

    当然也有只包含一个功能按钮的情况，这个时候需要注意的是弹出的消息是否

    重要到非要用户点击确认，如果是，那就用Dialog，如下图微信中的提示框，就是

    默认只有一个功能按钮的Dialog。如果不是，可以考虑用其他的，例如Toast。由于Dialog强制要求用户进行操作，用户体验不是很好，因此后续延展出了其

    他的样式。这种提示框也有操作按钮，它和Dialog最大的区别就是点击操作按钮或者提示框外的任何位置，都可以关闭该提示框，降低了操作难度。但它不算严格意

    义上的Dialog。

    这类提示框现在较多用在自定义的提示框上，例如一些运营活动，自定义的提

    示框能更好地传达内容，从而吸引用户点击。

    2)特殊情况

    如果Dialog出现三个或以上的功能框，会增加用户的选择负担，而且横向显示

    的话在视觉上也显得拥挤，所以就有了一个由Dialog延伸出来的Actionbar，它比

    Dialog拥有更多的功能按钮，能够给用户提供更多的功能选择。Actionbar一般都有一个默认的“取消”功能按钮(当然也可以没有)点击该

    按钮后关闭弹框。用户点击弹窗以外的区域也相当于点击了“取消”按钮，会关闭

    弹框。

    当功能按钮数量过多时，不适合用文字列表的形式展示，可以用图形加文字的

    形式来展示。

    2. 非模态对话框——Snackbar

    关于Snackbar，Material Design是这样说的：“Snackbar是一种针对操作

    的轻量级反馈机制，常以一个小的弹出框的形式出现在手机屏幕下方或者桌面左下方。它们出现在屏幕所有层的最上方，包括浮动操作按钮。

    它们会在超时或者用户触摸屏幕其他地方之后自动消失。Snackbar也可以在屏

    幕上滑动关闭。当它们出现时，不会阻碍用户在屏幕上的操作，并且也不支持输

    入。屏幕上同时最多只能显示一个Snackbar”。

    简单来说，Snackbar是介于Dialog和Toast两者之间的一种轻量级反馈机制，以文本形式存在，可以包含0～1个操作，不能是取消按钮。

    当只以文本形式出现的时候，形式和Toast一样，不需要用户进行操作，等默认

    时长结束后会自动消失；不过它比Toast多的一点是，用户可以在屏幕上滑动将它关

    闭。

    需要注意的是Snackbar不应该持续存在或相互堆叠，也不要阻挡浮动操作按

    钮。延展——引导浮层

    由于Snackbar太受限制，不能有图标只能以文本形式存在，在现在的App里用

    得越来越少，少到都找不到什么例子。而现实中又需要一种介于Toast和Dialog之

    间的轻量级的操作提示。所以就延伸出了另外一种样式，暂且将它归为“引导浮

    层”吧。

    引导浮层和Snackbar最大的区别是，它可以有图标、图片，甚至还可以引导用

    户去新的页面，这也是它更受有欢迎的原因所在。

    3. 非模态对话框——Toast

    关于Toast，Material Design是这样说的：“Toast同Snackbar非常相似，但是Toast并不包含操作也不能从屏幕上滑动关闭。”简单来说Toast主要的作用是对用户当前的操作给予反馈，用户不需要对弹出的

    内容进行响应，相对地也无法对它们做出控制，只能等设置的默认时长结束后自动

    消失。它可以出现在页面的任何位置，可以是纯文本的，也可以是图形结合文本

    的。特别说明

    提示框的作用是用来提示信息的，但不是所有的提示信息都需要用到提示框，因为提示框或多或少都会“打扰”到用户的操作，所以能有别的解决方式的时候，优先考虑别的方式。

    同理，提示框存在的另一个原因就是在用户犯错之前及时制止他，所以如果有

    其他的方式能够在提示框出现之前就规避错误，那要优先使用。以京东登录页面为

    例，密码那一行有一个小眼睛的图标，点击之后显示密码。当用户认为自己没有输

    错密码，但却提醒密码错误时，与其多次尝试来找到错误所在，不如直接点击显示

    密码的图标体验来得好。再例如像支付宝这样把提示信息放置在按钮上，就能避免提示框的出现打扰到

    用户的操作，而且信息放置在按钮上更加明显，也不会被用户忽略。画重点

    1. 提示框的三个作用

    (1)提醒用户，在他们犯错之前及时制止；

    (2)给用户选择权，让他们自己决定当前的操作是否进行；

    (3)告知用户当前所发生的事情，让他们对当前状态有一个预估，让用户有知

    情权。2. 提示框的类型以及区别

    Dialog——模态对话框，需要用户对当前内容进行操作，不会自动消失，会打

    断用户之前的操作流程；

    Snackbar——非模态对话框，用户可以对当前内容进行操作，也可以等它自动

    消失，不会打断用户的当前操作；

    Toast——非模态对话框，用户无法对当前内容进行操作，只能等它自动消

    失。参考资料

    Snackbars与Toasts http:t.cnEf5LFlB

    提示框(Dialogs) http:t.cnEf5yqFr

    07 产品列表布局

    文刘芳

    在设计产品列表时，经常会遇到不知道如何选择布局样式的问题。最后大家的

    解决方案大多是参考竞品，觉得样式不错就用到自己的产品中，它是否合适并不清

    楚。本文归纳了常见的六大布局样式，即列表、大图网格、两列网格、两列瀑布

    流、拼图、三列网格布局，通过对它们优缺点和使用场景的分析，掌握在什么情况

    下采用何种布局方式。

    列表布局

    列表布局也就是我们常见的图片列表，主要由商品缩略图和多个文字信息组合

    而成，列表布局重在文本内容，对于图片的质量要求不高，图片主要为了起到视觉

    引导的作用。优点是，遵循自上而下的阅读方式，有利于信息的快速扫视和对比；空间占比

    小，一屏可展示更多的商品；拓展性好，可展示更多促销信息。

    缺点是，图片尺寸小质量差，细节展示不丰富；样式单一、趣味性差；由于信

    息量过大，长时间浏览会引起视觉疲劳。大众点评和淘票票都可以算团购类App，用户在购买时不会看商品图片是否好

    看，决定用户购买的关键是这个商品是否是用户需要的，因此在列表布局中，标

    题、产品参数、促销信息是用户比较关心的点。

    什么时候使用？

    当你的产品图片质量不高，产品数量较多，需要通过优惠信息、价格参数等来

    进行对比，对界面效果要求较低时，可以采用列表布局。

    大图网格布局大图网格布局一行只展示一张图片，由于图片占比较大，因此一屏只能展示1～

    2张；在设计上它可以分为通栏和非通栏设计，通栏可展示更多的信息；非通栏也就

    是卡片风格，其视觉表现力更强，多用于以图片浏览为主的产品。

    优点是，图片占比大，可以展示更多的商品细节和丰富界面效果；同时自上而

    下的浏览顺序，有利于信息有效传达。

    缺点是，页面空间的消耗大，一屏可展示的内容少，不利于信息的查找和对

    比。蚂蚁短租和懒人周末分别是短租和生活类App，其共同点是用户在使用时主要通

    过图片决定是否购买，采用大图布局可展示更多的细节，帮助用户浏览，提升整体

    的界面效果。

    什么时候使用？

    当你的产品数量较少，图片有专人维护，需要突出品牌感时，就可以采用大图

    展示。大图展示往往视觉效果好，多用于图片类、租房类、商品推荐等列表中。

    两列网格布局两列网格布局也就是将屏幕一分为二，图片和文字进行上下展示，类似一个网

    格，浏览次序类似Z字，因此产品都能均衡地被用户看到。该布局图片占比较大，对

    图片质量要求较高，适用于图片对比为主的商品，如下图所示：

    优点是，利于图片类商品的对比选择；页面空间消耗小，一屏可展示4～6条信

    息；视觉效果较好。

    缺点是，文字信息展示空间少，只能展示商品标题、价格、标签等参数，当文

    字信息过多时界面会显得凌乱。Keep-商城和严选App中虽然产品有所不同，但都是需要用户通过图片对比进行

    选择，从产品细节展示来说比列表布局更丰富，从产品信息对比来说比大图更便

    捷，因此这类App中两列网格布局应用较为广泛。

    什么时候使用？

    如果你的产品是以图片对比为主，同时又不需要大图展示时，可采用该布局进

    行设计。两列网格布局往往和列表布局会一起使用。

    两列瀑布流布局两列瀑布流布局也就是将屏幕一分为二，和常规布局类似，其中图片的宽固

    定，高随图片的尺寸变化而变化。相比于两列网格布局，瀑布流布局更加不规则，适用于产品数量较多，用户目标不明确的情况下使用，如下图所示：

    优点是，可根据图片比例自适应高度，图片的细节表达更有力；产品展示数量

    多，用户在使用时可以无限下滑。

    缺点是，采用预加载的实现方式，因而不能预估产品多少的数量；在浏览时产

    品图片大小不一，大图很容易被记住，而小图很容易被忽略。在汇总时笔者发现现在很多App列表都采用了瀑布流的形式，例如小红书和淘

    宝，它们均是以图片展示为主，同时图片多为第三方上传，图片质量不统一，产品

    数量较多，故采用瀑布流提升了界面的趣味性，避免用户视觉疲劳。

    什么时候使用？

    两列瀑布流布局和两列网格布局的使用场景类似，唯一区别就是两列网格布局

    在产品数量少或用户目标明确时采用；而瀑布流多用于用户目标不明确，同时产品

    数量多，可以无限下滑的时候。

    拼图布局拼图布局中，头部常以一张大banner的形式出现，下面是由几张图片以各种拼

    图形式呈现。一般来说下面展示的信息都是和头部图相关的商品，适合平台主动推

    荐的商品列表，如下图所示：

    优点是，采用杂志式排版，样式上更活泼美观；产品主次表达更清晰，通过图

    片占比大小就可以确定主要和次要信息。

    缺点是，图片一般有大有小，小的也很容易被忽略；另外该样式编辑成本高，往往需要单独推荐。小红书的推荐页面可看成是专题页，采用拼图的形式展现，将重要信息放到大

    图上，次要信息放到小图上，引导用户购买。

    什么时候使用？

    两列拼图布局在列表中使用较少，因为不规则的拼图会导致维护成本过高，同

    时小图片很容易被忽略，因此多用于推荐页面中，图片由编辑经过处理之后再进行

    上传。

    三列网格布局三列网格布局是将屏幕一分为三进行展示，也可以叫宫格布局。由于模块比较

    小，因此主要以图片展示为主，文字信息一般只有简单的标题，适合用在用户需求

    不明确的页面，如下图所示：

    优点是，排版的界面利用率高，一屏可展示的产品数量最多，利于用户快速浏

    览选择自己感兴趣的产品。

    缺点是，图片展示尺寸小、质量低，文字信息展示简单，对比性较弱，界面的

    趣味性和新鲜感都比较差。以NOTHING-日榜和哔哩哔哩-番剧为例，用户进来主要是为了看看有没有自己

    感兴趣的内容，采用三列网格布局可以展示更多的内容，帮助用户快速浏览。

    什么时候使用？

    如果你的产品只是为了展示更多的信息，不需要通过图片进行对比时，可采用

    三列网格布局。

    画重点

    (1)当用户需求明确时，需要选择适合高效对比的布局方式，推荐使用列表布

    局、两列网格布局、两列瀑布流布局；其中列表布局适合以文字对比为主的商品；

    两列网格布局和瀑布流布局适合以图片为主的商品。

    (2)当用户需求不明确时，就需要根据产品的目标进行选择。产品目标是体现

    品牌性或推荐商品，使用大图网格布局和拼图布局；当产品目标是想快速促成交

    易，方便用户对比，推荐使用两列瀑布流布局；当产品目标只是展示界面，推荐使

    用三列网格布局。

    (3)当产品数量较少时，推荐使用两列网格布局、大图网格布局。其中大图网格布局适合图片质量高，有专门编辑进行维护的产品；两列网格布局要求相对少很

    多。反之，当产品数量较多时，推荐使用两列瀑布流布局、三列网格布局。

    参考资料

    无线工坊.方寸指间[M].北京：电子工业出版社，2014

    08 按钮

    文刘芳

    按钮设计看似简单，只需要画个矩形框然后填色即可，但其实按钮的功能不

    同，设计方式也有差异。另外，按钮的一些设计细节很容易被忽略。本文主要从按

    钮功能类型和设计要点两个方面入手，对按钮设计进行全面的解析。

    按钮功能类型

    按钮主要包括行为召唤按钮、悬浮按钮、标签按钮、表格按钮、开关按钮，其

    功能不同设计方式也不同。

    1. 行为召唤按钮

    行为召唤(Call To action，CTA)按钮的目的是通过设计诱导或激励用户点

    击，从而实现产品的诉求。主要包括诱导购买、订阅关注、利益诱导、文字诱导四

    种。

    1)诱导购买

    当行为召唤的目的是诱导购买时，按钮的设计在颜色、形状、样式上都需要突

    出。要让按钮看上去可点击，让用户进来第一眼就能知道该按钮的用途，如下图所

    示：美团外卖的结算按钮颜色采用黑黄对比、形状采用具有亲和力的圆角，在样式

    上加入投影的同时加入送餐员的元素，配上小红点，再加上价格诱导，让用户可以

    直观看到优惠了多少钱，促使用户进一步操作。

    淘宝详情的“加入购物车”和“马上抢”是一个组合按钮，作为行为召唤按钮

    可以明确地看到，其从颜色、形状、样式都能够让用户快速注意到。

    2)订阅关注

    当行为召唤的目的是订阅关注时，其重要程度相比诱导购买低很多，但是在设

    计时仍然需要考虑一个问题：用户关注更重要还是用户阅读内容更重要。当内容重

    要时，按钮的设计需要弱化处理，例如优酷视频；当点击关注重要时，按钮的设计

    需要强化处理，例如土豆视频，如下图所示：

    优酷视频星球页面的目的主要是引导用户去阅读内容，感兴趣你就关注，因此在设计时对关注按钮进行了弱化处理，让按钮和界面融合。

    土豆视频关注界面的目的主要是引导用户关注。因此按钮设计较为明显，采用

    黄色填充加图标引导，在视觉上和产品内容形成强烈对比。

    3)利益诱导

    当行为召唤的目的是利益诱导时，可以考虑在颜色、形状、图标、诱导文字等

    方面设计，引导用户点击，如下图所示：

    大众点评领奖按钮明显比赚积分的层级高，因此为了突出领奖按钮，采用了色

    块设计的样式，同时赚积分按钮采用描边设计进行弱化处理。

    腾讯doki打榜页面冲榜的重要层级最高，因此在设计时不仅采用了色块、加入

    了动效图标，同时还加入了诱导文字，让按钮更明显，诱导用户点击，其他按钮则

    采用描边样式弱化处理。

    4)文字诱导

    文字诱导简单来说就是通过文字，诱导用户进行下一步操作，多用于空页面、活动页面中，因此在设计时采用简单的色块填充即可。如果该页面为活动页面，也

    可增加渐变或投影样式，让按钮更有空间感，进而突出按钮，如下图所示：得到的“学习计划”界面为空时，为了促进用户进行下一步操作，它的按钮文

    字“开始制定学习计划”直接诱导用户制定，同时其按钮采用重要程度较高的色块

    加投影的方式，诱导用户点击。

    大众点评“我的攻略”界面为空时，为了让用户创建攻略，它的按钮文字“我

    也要创建攻略”直接诱导用户创建，同时其按钮采用渐变填充的方式，诱导用户点

    击。

    2. 悬浮按钮

    悬浮按钮是Android应用中最常见的一个控件。不过随着Android和iOS规范的不断融合，在iOS中也经常会看到各种各样的悬浮按钮。在设计上悬浮按钮应该采用

    显眼的颜色，以抓住用户的注意力，同时它应该是积极正向的交互，例如创建、分

    享、探索等，如下图所示：

    UC浏览器的悬浮按钮采用蓝色背景和白色添加图标，具有很强的提示作用，点

    击按钮即可呼出对应的发布图文或者视频的功能。

    3. 标签按钮

    标签按钮往往呈多个出现，在使用时可以看成一种筛选条件，采用该设计方式

    可减少用户操作步骤，提高操作效率。不过标签的重要程度仍然较低，在设计时需

    要弱化处理，如下图所示：支付宝投保页面，为了帮助用户快速做出选择，采用了标签的设计方式。由于

    其重要程度不及“我要投保”高，因此在设计时默认用描边处理，选中后采用较浅

    的色块填充。

    转转产品列表页，筛选条件下方也采用了标签设计，由于用户主要目的还是浏

    览商品，因此标签按钮样式默认采用浅灰色，选中效果为较浅的色块加描边。

    4. 表格按钮

    表格按钮是由一个白色网格加文字组成，从视觉上看和页面融为一体，特别不

    突出。因此多在个人中心设置页面想要弱化按钮的情况使用，如下图所示：

    微信设置界面的“切换账号”和“退出登录”由于不是核心操作按钮，同时为了和界面表格协调，设计时采用表格按钮将其弱化处理。

    淘票票影院介绍页面底部设置了“给影院提建议”和“信息纠错”，很明显不

    需要引导用户操作，设计时采用表格按钮将其弱化处理。

    5. 开关按钮

    开关按钮是两种相互对立状态间的切换，多用于功能的开启和关闭。当按钮开

    启后可能还会带来其他的相应操作。开关按钮多用在设置界面，但是也有很多App将

    其用到其他界面中，如下图所示：

    美团外卖提交订单界面中的“号码保护”就采用了开关按钮，相比其他滑动选

    择的交互状态来说，开关按钮无疑可以减少操作步骤，提高操作效率。

    小猪短租提交订单界面中的“需要发票”也采用了开关按钮，当开启按钮会展

    开提示你去填写信息，当关闭按钮提示信息隐藏，相比于其他选择控件，这里用开

    关按钮更为合适。

    按钮设计要点

    上面总结了五大功能按钮的表现形式和使用场景，此外，要设计出一个引导性

    好的按钮，还需要重视一些细节，例如颜色、形状、状态、位置等。

    1. 颜色颜色是最容易感知到的对比方式，不同的颜色会给用户不一样的心理预期。在

    设计时，按钮颜色主要有主题色、强调色、辅助色。主题色多用于需要强调的行为

    召唤按钮、悬浮按钮、开关按钮中；强调色多用于需要拉开主次关系的按钮组中，一般采用主题色的对比色彩或者邻近色；辅助色多用于默认状态或不可点击的状态

    中，如下图所示：

    Keep首页的“查看我的训练计划”按钮直接采用主题色，不仅可以起到很好的

    强调作用，同时和界面风格也比较协调；UC浏览器小视频的“我来拍”按钮采用邻

    近色绿色渐变来强调，引导用户拍摄小视频；天猫选择尺码标签时，按钮的默认状

    态采用辅助色灰色来突出选中状态。

    2. 形状

    在设计按钮时，需要根据整个界面风格设计合适的形状，主要有直角、小圆

    角、全圆角、异形四种样式。直角的含义：严谨、力量、高端。适用于金融类、奢侈品类产品中，让产品给

    人严谨、安全、高端的感觉，例如寺库的按钮设计。

    小圆角的含义：稳定、中性。适用于用户跨度较大的常规类产品中，例如微信

    的按钮设计。

    全圆角的含义：活泼、年轻、安全。适用于儿童类、年轻类、娱乐类、购物类

    的产品中，提升亲和力，拉近用户的距离，例如土豆的按钮设计。

    异形按钮的含义：不稳定、活泼、另类。适用于需要用户做出选择的场景中，例如招商银行“话题PK”的按钮设计。寺库是奢侈品类电商，它的按钮采用直角设计，刚好可体现奢侈品的高端性；

    微信的用户群体上到七八十岁，下到几岁，其年龄范围广，因此采用稳重的小圆角

    较为稳妥；土豆短视频用户群体年轻活泼，因此采用全圆角较为适合；招商银行话

    题PK采用异形的设计，会给用户不稳定和另类的感觉，从而引导用户参与。

    3. 状态

    在部分界面设计中需要考虑按钮的状态设计，从而提高用户操作的流畅度。移

    动端完整的系统按钮可以分为正常状态、按压状态、禁用状态。其中，正常状态(包括加载状态)展示的是App的主色；按压状态在正常状态的

    基础上叠加15%的黑色；禁用状态一般是灰色或者将正常状态的透明度降低至45%，该状态多用于提交表单按钮，例如登录、注册、转账等，如下图所示：京东金融转账页面，当未输入转账金额时，按钮禁用为灰色；当输入金额时按

    钮为正常状态。在操作中可以发现京东金融没有按压状态，这是因为随着网络的发

    展，宽带速度越来越高，按压状态显得没有必要。

    4. 位置

    位置往往对主操作按钮较为重要，在设计时需要以引导用户、方便用户点击为

    目的。主操作按钮的位置主要有三种，即固定在底部、页面跟随、将希望用户操作

    的按钮置于按钮组右侧。根据费茨定律可知，按钮位置越近用户所需的时间就越短，因此Keep的开通会

    员按钮置于底部，方便用户快速操作。

    饿了么的新增地址界面中，按钮跟随在信息后面，用户看完信息即可点击保

    存。需要注意，当表单信息较多时，也推荐采用固定到底部的方式减短用户操作成

    本。

    小米商城详情页的“加入购物车”按钮置于界面右侧，其一是为了视觉平衡，其二是符合人先点右侧按钮的使用习惯。

    画重点

    (1)当行为召唤的目的是诱导购买时，按钮的设计不管从颜色、形状还是样式

    都需要突出。让按钮看上去可点击，让用户进来第一眼就能知道该按钮的用途。

    (2)当行为召唤的目的是点击按钮时，按钮需要强化处理，例如采用主题色、强调色、添加图标等方式；当目的是浏览内容时，按钮可弱化处理，例如按钮采用

    浅色、灰色。

    (3)提交表单按钮可分别设计正常、禁用状态，避免用户错误操作。(4)当需要用户快速操作时，将主操作按钮固定在界面的底部；按钮组中希望

    用户点击的按钮则置于右侧。

    参考资料

    学习按钮设计，看这篇就够了! http:t.cnRn86MOJ

    7个按钮设计基本规则 http:t.cnEq6mG8R

    09 标签

    文姜正

    标签是日常设计中使用频率最高的组件之一，它功能强大、使用场景多样化，从而深受设计师们的喜爱。优秀的标签设计能够帮助产品传递准确的信息，完成当

    前的业务目标。

    标签的定义

    标签是事物抽象出来的定义，方便用户标记和机器识别。这里需要理解标签在

    用户行为层面的使用，用户最终通过标签进行信息传递和交互操作。

    标签的特征

    标签的主要特征有：

    开放性，即所有用户可见。

    轻量化，主要以关键词的形式呈现。? 参与性，即标签可以由用户主动生成。

    标签的作用

    标签主要有两个作用：一是信息传递；二是交互操作。

    1. 信息传递

    信息传递是标签设计的关键，无论是图形标签还是文字信息标签，首要的任务

    都是正确地传递信息，只有这样才能让用户产生正确的联想，进而执行下一步操

    作。

    可以这样理解，标签信息是为了满足用户的隐性需求，当用户在犹豫是否要进

    行下一步操作的时候，标签信息可以加强用户的需求欲望，促进完成下一步操作。

    结合上述标签轻量化的特征，标签都是由提取的关键词或图形组成。根据产品

    属性和业务的不同，关键词的维度也有所不同。例如，偏向内容的平台一般都会从

    内容中提取关键词，来达到为其他同属性内容引流的目的。

    而电商快销类平台则是为了达到业务目标，尽量突出与用户利益相关的优惠活

    动。例如将热销、精选、满减等目的性特别强的词语作为关键词。2. 交互操作

    标签设计的最终目的其实是帮助用户完成交互操作，其主要形式分为可点击交

    互和不可点击交互两种。

    可点击交互的标签一般多用于产品内部流量分发、为其他同属性内容导流，点

    击标签进入其他页面；不可点击交互的标签则是辅助业务模块，通过关键词信息刺

    激用户点击业务模块。如果用户对于是否点击该业务模块还心存犹豫，这个时候就

    需要标签设计作为助力剂，正确地传递关键信息，刺激用户点击。

    标签的使用场景

    标签的使用场景较为广泛，这里归纳总结了几种常见于现有App的使用场景。

    1. 产品展示和运营活动

    产品展示和运营活动是标签最经常出现的两个场景，因为这两个场景都具有很

    强的目的性。

    产品展示的目的是为了提高用户的点击购买率，所以除了商品基本信息之外，需要添加更加符合用户利益的关键词标签来吸引用户，辅助其完成点击跳转的任

    务。这种使用场景在电商平台中十分常见，这里以小红书为例，如下图所示：小红书的商品展示模块会将“折扣信息”和“自营”等标签放在底部，一方面

    刺激用户直接点击购买，另一方面方便用户根据关键词去判断选择哪种购买的方式

    会更加实惠。运营活动则更多是为了激发用户的参与感，需要从多方面赢得用户的信任。一

    般情况下会通过关键词加强与用户之间的情感和利益联系，从而促使用户在短时间

    之内做出决定。这里以下厨房为例：下厨房的活动区通过添加“夏秋特辑”的标签，来满足用户潜在对夏秋养生的

    需求；通过底部添加的“专栏”标签来提高活动的专业度，赢得用户的信任。下厨

    房从潜在需求和专业的角度促进了用户点击参与的欲望。

    2. 模糊推荐

    用户进入一个新的场景的时候，还没有明确的目的，这个时候需要提供“兴趣

    标签”来引导用户根据平时自己的兴趣爱好选择标签，产品再基于用户选择的标签

    来推荐用户可能感兴趣的内容，避免用户因为内容不符合喜好而直接关掉页面。最

    常见的使用场景就是兴趣标签页，以虎扑为例：在进入虎扑首页时，通过“兴趣标签”流的形式引导部分目的不明确的用户来

    选择自己感兴趣的标签，进入自己感兴趣的话题当中，满足了用户的潜在需求。

    3. 内容导流

    为平台内其他内容进行导流也是标签重要的功能之一，常见内容导流的方式有

    两种：一种是文末出现关联性标签，另一种则是搜索时出现关联推荐。

    当用户浏览完当前的内容后，会有浏览其他相关联内容的潜在需求，这个时候

    可以通过从文中提取“关键词”标签来满足用户这一需求。一般关联标签会出现在

    文末的底部，用户在阅读完文章之后根据自己的需求进行选择点击。我们以简书为

    例：简书通过从内容中提取相关的“关键词”标签，满足用户浏览同属性内容的潜

    在需求，同时达到了为平台内其他内容引流的目的。

    搜索时出现关联性推荐是产品为内容进行导流的重要方式之一。App会根据用户日常浏览的数据和近期的热点进行关键词推荐。这种场景下，通常会弱化标签的视

    觉冲击力，这样做既不影响用户的主观性搜索，同时又为用户提供了推荐选择。我

    们以转转为例：转转的搜索界面会显示“推荐搜索”和“历史搜索”，以标签的形式来展示平

    台内的热门商品，从而达到为其他商品导流的目的，促使平台内部的流量分发平

    衡。

    4. 筛选分类

    通过标签进行筛选分类能帮助用户更加精准地选择所需要的内容。这样用户可

    以自主地在一定范围内浏览自己感兴趣的内容，避免耗费大量的精力和时间去浏览

    无关信息，提高了用户的阅读效率。以淘宝的评论区域为例：

    淘宝的评论区域通过算法将评论的内容分为几个不同的维度，再通过标签的形

    式展现，用户可以根据自己的实际需求进行筛选，浏览自己感兴趣的评论。这样帮

    助用户提高了浏览的效率，减少了用户在时间、精力上的消耗，节约了成本。

    5. 填写评论传统的评论区域需要用户填写大量的文字，对于工具类型的App而言这是一项高

    成本的操作，但是我们可以根据用户常用的评论数据，预设成可点击的标签形式，用户可以根据实际的情况进行选择关键词标签，代替手动录入评论。这样减少了用

    户操作的交互路径，极大地节约了用户的时间、精力投入。

    例如，日常生活中我们使用工具类型的App完成某项操作任务之后，App会主动

    提示我们进行评价，这时我们就可以通过选择标签的形式进行评论。这里以滴滴出

    行为例：滴滴在完成行程和支付环节之后，会自动弹出评价页面，而这个时候用户通常

    是没有过多的精力去处理这些事情的。为了提高用户的评价数量，滴滴将常用的评

    价提炼成关键词，用户可以通过点击预设的评价标签来完成评论任务，这样能有效

    减少用户所要消耗的精力，优化用户体验，提高信息采集率。

    画重点(1)标签是事物抽象出来的定义，方便用户标记和机器识别；它的主要特征是

    开放性、轻量化、参与性。

    (2)标签的主要作用是信息传递和交互操作。标签通过提炼的图形或者关键词

    进行信息的传递，用户再根据信息结合自己的实际需求进行交互操作。

    (3)标签的使用场景较为广泛，主要出现的场景有：产品展示和运营活动、模

    糊推荐、内容导流、筛选分类、填写评论。

    参考资料

    关于标签以及推荐的设计？ https:dwz.cn6t0nzi1r

    标签设计、理查德塞勒和Dark Pattern https:dwz.cnWKL5SOBa

    10 聊天气泡框常见问题

    文刘芳

    聊天界面看似比较简单，但是新人往往会忘记给聊天气泡框做适配，最后导致

    落地效果参差不齐，增加开发和验收成本。本文主要和大家分享聊天气泡框的常见

    问题和对应的解决方案。

    新手常见问题

    平时我们知道聊天气泡框会随文字多少变化，宽高也会随之变化，但是标注时

    就容易忽略掉了这个前提，将其标成固定尺寸或者不标注让技术自己去写。不管是

    哪种情况，都会导致后期频繁的沟通调试，增加开发的时间。因此掌握正确可落地

    的适配方法非常重要，下面结合实例分别看看主要有哪些问题。

    1. 文字气泡框直接标注具体尺寸

    这是新手设计师常见的标注方法，采用该标注方式会导致小屏手机展示不完

    全，大屏手机展示又太空的问题，如下图所示：

    以之前做的医生问诊界面来说，我直接将气泡框标注为固定尺寸520px，最后验收时才发现在iPhone 5 640px的屏幕显示时气泡框已经超出屏幕；而在iPhone 8

    Plus 828px的屏幕显示时留白又太多，导致各机型展示效果不统一。

    2. 不同比例图片，气泡缩略图均展示方图

    在发送图片时会涉及不同比例的图片，如果都采用方形展示，那么多余的部分就会被隐藏掉，采用该适配方式的问题是不能将图片信息最大化展现，占用屏幕空

    间，如下图所示：

    还是以咨询医生这个界面为例，分别上传了横图和竖图，从图可以看到最终的

    缩略图效果都是方图，这样的展示方式对于用户量小的版本使用尚可，但是如果你

    的App用户量大，同时聊天界面使用率高，就需要考虑信息最大化展现了。

    如何解决以上两个问题都是我第一次做聊天界面时遇到的，通过查找资料、对各平台对

    比、和技术沟通、咨询设计前辈等方式，我总结了较为落地的适配方案。

    1. 文字部分——采用百分比标注

    由于气泡框的宽度随着屏幕宽度变化，因此采用百分比的标注方法，可以很好

    地解决多设备下不统一的问题。

    计算方式：气泡框的最大宽度(A)屏幕宽度(W)=70%。根据该公式，我们

    也能够根据屏幕宽度得到较为适合的气泡框的设计尺寸，如下图所示：采用百分比标注后，适配到iPhone 5 640×1136分辨率的屏幕和iPhone 8

    Plus 1242×2208分辨率的屏幕中就都不会出现显示不完全或者留白太多的问题

    了。注意：在设计时百分比不是固定的，大家可适当调整。例如你的App留白比较

    多，那么这个数值可设置为65%；留白少可设置为80%，常规可设置为70%，然后再

    取8的倍数即可。以750×1334分辨率为例进行设计，气泡框按照常规比例设置为

    70%，那么气泡框的最大宽度(a)=750×70%=525px，最后取8的倍数为520px。

    2. 图片部分——设置图片比例的阈值

    聊天气泡框中的图片一般有正方形图、横图、竖图，为了最大化地保留图片长

    宽比样式，保证超长图信息的可识别性，首先需要确定图片适配规则和设置图片比

    例的阈值。

    1)设置缩略图尺寸范围，以单边进行缩放

    这是目前体验较好的方案，可满足各比例图片信息最大化的展示。因此，大家

    在设计时首先需要确定缩略图尺寸范围。以问医生的项目为例，在2倍图下我将其分

    辨率设置为300×300(该数值在保证展示效果的情况下，一屏可展示更多的图

    片)。

    设置好缩略图尺寸范围后，图片如何适配呢？可以通过将图片最长边适配到缩

    略图中，然后再等比例缩放即可。我分别做了方图、横图、竖图的适配效果，如下

    图所示：2)设定图片适配的阈值比例

    在实际场景中，往往会遇到特殊比例图片(如超长图)，将其适配之后就会发

    现图片所占面积极小，不仅展示效果不佳，同时识别性也极低，如下图所示：因此在适配时我们还需要设置阈值，什么是阈值呢？阈的意思是界限，故阈值

    又叫临界值，也就是当图片的比例超过阈值时，其缩略图展示效果和阈值一致。考

    虑到图片的展示效果和识别性，将3:1作为阈值较为合适。

    当图片比例小于等于3:1时，将图片等比缩放，最长边为缩略图的最大尺寸

    300px，如下图所示：当图片比例大于3:1时，仍采用3:1的缩略图展示尺寸，多余部分进行隐藏，从

    而让图片更有识别性。以上就是利用阈值设置缩略图最大尺寸，以单边进行缩放的方法。需要注意的

    是，当图片分辨率不足300×300时，需按照适配规则等比例放大到300×300后展

    示，这样当图片过小时，可以最大化展示图片信息，如下图所示：

    画重点文字部分：在聊天界面中，文字气泡框适配最好采用百分比的方式进行标注，这样能保证各个机型展示效果统一，保证项目顺利落地。

    图片部分：图片气泡框适配首先要设置好缩略图的取值范围，为了最大化地保

    留图片长宽比样式，图片适配采用设置两边边长的取值范围，以单边进行缩放，并

    设定好图片适配的阈值比例。

    参考资料

    聊天缩略图背后的故事：你不曾注意的那些细节 http:t.cnR0H1273

    聊天产品的设计策略——缩略图 http:t.cnE5PlsoG

    11 图片比例

    文刘芳

    在设计时，我们会注意界面的排版、文字的对比、图标图片的美观，但是图片

    比例却很容易被忽略。一些设计师会通过参考优秀App的尺寸来设定，一些设计师直

    接凭感觉取个数值即可，并无规范可言。其实图片在设计时需要遵循一定的比例，这样会更符合产品定位以及方便后期维护。本文总结了五种UI中常见的图片比例。

    图片比例3:2

    3:2这个尺寸其实源于135胶卷的比例，采用它并不是因为黄金比例，而是由相

    机的像场大小决定的。早期徕卡镜头的成像圈直径大约为44mm，而胶卷的宽是24mm，因此如果在直径

    44mm的圆上截取一块宽为24mm的长方形，那么边长正好为36mm，也就是3:2的比

    例。同时由于徕卡相机的用户群巨大，因此其他相机厂商也逐渐将尺寸统一为3:2。

    早期图片大多使用3:2的尺寸，但是随着移动设备的发展，手机很大程度上替代

    单反成为主流拍照设备，4:3和16:9的图片数量占比追上了传统摄影的3:2，几乎与

    其半分天下。目前我们看到一些租房、旅游类App仍然采用该比例，例如爱彼迎和携

    程。爱彼迎和携程的图片大多采用专业设备3:2的比例进行拍摄，因此采用该比例可

    以最大化地展示图片信息，便于后期的维护。

    图片比例4:3

    4:3是随着小型相机(例如微单)的出现而诞生的。受限于当时的传感器技术，大家要想把相机做得更小，就需要尽可能地在小体积上实现更高的像素，因此大家

    采用的方法就是把比例做得更方。所有几何图形中，对角线距离越相近，图形越接

    近圆形，图片占比面积也就越大。相比于3:2的图像来说，这种比例可展示的信息更多，目前一些美食和图片类

    App多采用4:3的比例，例如厨房故事、in。在设定图片比例时，大家可能会纠结是选择4:3还是3:2呢？这里我有一个简单

    的方法，那就是看产品目标是以内容为主还是以图片主，例如Nice和厨房故事。由于Nice的产品目标是以展示内容为主，因此它的图片采用3:2的方式，其优

    势就是在同样的横屏大小中，可露出更多的图片。而厨房故事的产品目标是以美食

    类的图片为主，因此它的图片采用4:3的比例，其优势是单张图片面积占比大，可展

    示更多的信息。

    图片比例1:1

    1:1是传统的120胶片画幅，也叫中画幅，因为相机结构和其他一些原因，导致

    了胶片是方形的，一般为60mm×60mm，利用该比例可以将构图归整得简单，突出主

    被摄体的存在感。因此该比例多用于需要突出主体的图片，例如电商类以图片促进销售的App，以

    及推荐类的图片列表中，例如严选、网易云音乐。严选等电商类的App由于图片直接决定了用户的点击量，因此往往会采用1:1的

    比例突出商品主体从而促进销售。网易云音乐的首页推荐也是采用该比例，其优势

    是可以展示更多的产品。

    图片比例16:9

    根据人体工程学的研究，发现人两只眼睛的视野范围是16:9的长方形，所以电

    视、显示器行业都根据该比例来设计产品，iPhone 5是首款屏幕比例为16:9的手

    机。在设计时，图片的尺寸设定和这些拍摄器材有很大的关系，因此在视频类的App

    中大多用16:9的比例，例如App Store、腾讯视频。App Store的快照页在4.7英寸的手机(iPhone 6、7、8)上均是采用16:9的

    比例，这是由于它们的分辨率是750x1334，刚好是9:16；腾讯视频的列表图片也是

    采用该比例，这主要是因为电影、电视都是采用该比例。

    图片比例3:1

    3:1是聊天气泡框中图片适配的阈值比例，也就是当你发送的图片长宽比大于

    3:1时，其缩略图的展示范围仍然是3:1，多余部分进行隐藏，从而让图片更有识别

    性。

    如下图所示，我分别上传了4:1的横图和竖图，它们的缩略图展示范围均和3:1

    一致，采用该阈值比例可以保证超长图适配之后具有好的识别性。微信在适配时就采用这一比例。下图是我分别发送3:2、2:1、3:1、4:1、8:1

    几个尺寸时的显示情况，可以看到从第三张图开始，后面的几个比例展示效果均是

    3:1，这样可以避免直接适配出现一条极细图片的尴尬。画重点

    大家在设计时需要记住，图片比例在设定时最好有一定规律，不要随意地设置

    尺寸。同时一个App中图片的比例不宜过多，最好不要超过3种，类似功能的图片采

    用同一比例。

    另外在确定采用哪种图片比例时，先确定产品类型和产品目的。如果项目是电

    商类产品，主要目的是为了卖货，那么我们就选择1:1的比例可以突出商品主体；如

    果你是做视频类的App，那么你的产品展示列表就可以采用16:9的比例。总之，在

    选择时需要做到符合产品定位、考虑维护成本，做到有理有据。

    参考资料

    既然16:9这么有大片范，过去为什么用3:2？ http:h5ip.cniLEA

    12 关于卡片圆角的思考

    文姜正

    我们最熟悉的苹果公司使用圆角卡片的最早历史可以追溯到1981年，当时苹果

    公司的天才程序员Bill Atkinson正向团队展示他是如何用一种聪明的方法在当时

    仅有68000处理器的Lisa和Macintosh机器上快速画出圆和椭圆。Steve Jobs看了

    之后有另外的想法，他说：“圆和椭圆都不错，但是能画出带圆角的四边形吗？我

    们现在也能画出吗？”Bill Atkinson回答说很难做到，而且他认为并不真正需要

    圆角四边形。Steve Jobs就立刻强烈回应了：“到处都是圆角四边形!看看这个房

    间周围就知道了!”并且他还带着Bill Atkinson出去转看可以碰到多少圆角四边

    形。最后Bill Atkinson被说服，第二天下午就拿出了满意的结果。

    手机工业设计趋势

    正如Steve Jobs所说，到处都是圆角四边形。纵观2018年各大厂商发布的旗舰

    手机，在工业设计上基本都采用了更加柔和的圆角设计，例如iPhone、SAMSUNG、小米、VIVO等。屏幕设计同样选择了圆角设计，在细节之处也保持了高度的统一，例如iPhone

    在摄像头位置的连接处同样采用了圆角弧度作为过渡。可见圆角设计已经在工业设

    计中成为非常重要的设计语言。

    手机系统UI设计趋势

    不止是手机的工业硬件设计上采用了大量的圆角，各大厂商手机系统的UI也是

    大量采用了圆角设计。

    大家最熟悉的可能就是iOS系统里的圆角设计，自2007年iOS 7发布，Apple将iOS上标志性的圆角标轮廓做了更新，将工业设计中的曲线连续概念应用到了视觉设

    计上，并一直延续至今，在iOS 12中得到全面应用。

    除了iOS系统，Android系统的各大厂商也纷纷使用圆角作为设计语言，例如

    SAMSUNG的ONE UI以及国内的MIUI 10的系统界面。人眼处理圆角更加容易

    相对于其他图形，人类的眼睛在识别圆角弧形的时候更加容易。因为人眼生理

    构造上的中央凹(是视网膜中视觉最敏锐的区域)在处理圆形时最快，而处理矩形

    边缘时则需要涉及大脑中更多的“神经影像工具”。所以，人眼处理圆角矩形更加

    容易，因为它们看起来比普通矩形更接近于圆。例如，App Store中的Today页面，每天推送的内容通过圆角的卡片设计呈现给

    用户，让用户可以快速识别当前模块。但如果换成直角的话，我们发现相对于圆角

    卡片它的识别成本明显增加。在实际线上的大多数产品中，打开App弹出的运营活动弹窗多为圆角矩形，因为

    用户识别圆角矩形更加容易，如果换成直角的话则会提升识别成本，且显得生硬。在巴罗的神经学研究所完成的关于“角”的科学研究发现，角的凸显性感知与

    角的度数呈线性变化，锐角比钝角会产生更强的虚幻的凸显性。换句话说，角越锐

    利，看起来越明显，视觉冲击力越强，对周边环境产生影响越大。而圆角弧形则看

    起来更加柔和，易于处理，不会对环境造成过多的影响，如下图所示：

    例如西瓜视频在改版中，将“锐角”的播放按钮改成了“圆角”的播放按钮，减少了锐角对用户的视觉影响，使页面整体更加统一。

    圆角更加安全

    圆角自身的图形属性更加柔和、舒适，给人一种安全感和亲密感。而尖角则给人一种尖锐、具有攻击性的感觉。我们可以回忆一下日常比较尖锐的物体，例如剪

    刀、镊子、警示牌等，都会给人带来伤害或者警示他人的意向。

    在设计玩具的时候会采用大量的圆角设计，来让家长对其放下戒备心，让家长

    觉得这是安全的，可以给孩子玩。试想哪个家长会给孩子一把刀玩？现在的少儿用户群体也在逐年增长，针对少儿用户，由于群体的特殊性，少儿

    应用App中使用了大量的圆角设计。例如ABC mouse中控件都使用了大圆角的设计，首先是提高了页面按钮的识别性，其次是圆角设计给用户带来安全可靠的感觉，让

    用户更加信赖产品。圆角使得信息更易于处理

    圆角在使用地图或图表的场景中具有的得天独厚的优势，圆角的弧度能够更加

    平滑地连续引导用户的视线，符合用户的头部与眼睛的自然运动；而锐角则会迫使

    用户的视线进行强制转折，容易造成用户的停顿。

    例如北京的地铁地图，在折线处大都采用了圆角设计，具有很强的引导性，来帮助用户快速查询各个地铁站点。假设换成了直角的转折设计，在本来就嘈杂拥挤

    的地铁环境里，乘客将付出更多的成本去查看地铁线路。

    在圆角矩形中，由于边缘圆角向内指向矩形中心的感觉更加明显，所以使用圆

    角卡片能更加凸显卡片中央的内容，如下图所示：当多个卡片并排时，带圆角的卡片具有更强的内部指向性，且相邻的两条线差

    异化较大，我们可以清楚分辨它们的边界线；而同样大小的直角矩形的内部指向性

    较弱，临近的两根“线”更加相似，分辨起来会相对困难一些。

    例如App Store页面，通过简单的修改，我们再次比较一下直角与圆角在实际

    中的应用。可以看到，在识别直角卡片的时候我们需要耗费更多的精力，而圆角卡

    片则不会耗费过多的精力，且由于圆角的内指向性，圆角卡片能够更好地衬托卡的

    内容。通栏式卡片与圆角卡片

    卡片设计已经成为最常用的设计语言之一。最后本文从空间利用率、视觉识别

    性、沉浸感三个维度来对比一下通栏式卡片和圆角卡片的区别，总结一下圆角卡片

    的优缺点。

    1. 空间利用率

    通栏式卡片比圆角卡片的空间利用率高，同等情况下通栏式卡片可承载更多内

    容。圆角卡片需要在规范好的内容区之内，卡片的内容与卡片边缘还需要一定的间隔距离，导致了内容区域的缩小，而通栏卡片则没有这样的烦恼。

    2. 视觉识别性

    圆角卡片比通栏式卡片的视觉识别性更加突出，因为人眼识别圆角矩形比识别

    直角矩形更加容易，所以需要突出内容的时候首选圆角卡片。例如，产品中穿插的

    运营Banner设计基本都会选用圆角卡片的形式，下图左侧直角卡片的识别性就相对

    较弱。3. 沉浸感

    通栏式卡片比圆角卡片的沉浸感更强，因为圆角更容易被识别，而直角则不容

    易被察觉。常用App中的Feed流几乎都是通栏式卡片，例如same和豆瓣。因为圆角希望你能够快速识别卡片上的内容，并能够与周围的元素有所区分，强调卡片内的内容，所以圆角卡片常常打断用户的沉浸感，目的性更强一些。例如

    京东和淘宝的个人页面，各模块均使用圆角卡片，能够更好地区分业务组和促进用

    户聚焦当前的业务操作。画重点

    (1)从手机的工业硬件设计到内置系统的UI界面设计，都采用了大量的圆角，佐证了圆角设计已经成为主要的设计趋势。

    (2)人眼在处理和识别圆角图形的时候更加快捷方便，而处理锐角的成本较

    高，且锐角对周边的环境影响较大；圆角给人的感觉更加安全且具有亲密性，而锐

    角则给人一种尖锐感，具有一定的攻击性。

    (3)圆角的弧度符合人眼和头部的自然运动，具有良好的引导性；在卡片中能

    够清晰区分卡片的边界；圆角具有优秀的内指向性，可以更加凸显卡片中的内容信息。

    (4)在通栏式卡片和圆角卡片的对比中我们可以发现：通栏式卡片利用空间更

    加充分，而圆角卡片的识别性更好；通栏卡片的沉浸感较强，但圆角卡片更加能够

    突出当前的内容。

    参考资料

    Material Design 2来了？比圆更圆，圆了又圆 https:dwz.cnAcFjJw0y

    从图标转角论亲和力的差异【含图标教程】 https:dwz.cnBYdmeGc3

    无框界面 https:dwz.cnW7RGIbC5

    浅析圆角特征在产品设计中的应用 http:www.doc88.comp-

    9592118891884.html

    从圆角到圆角 https:dwz.cnEvHt3SLG

    西瓜视频3.0改版总结 https:dwz.cndb7KXKMH

    第2章 能力效率提升

    01 一套图标的诞生

    文付铂璎

    图标一直都是移动端界面中的亮点之一，图标风格的准确性，取决于我们对产

    品属性的认知。产品中好的图标不是独树一帜，而是要融入整体，给用户舒服的感

    觉。

    多数人的误区

    目前很多设计师走进一个误区，莫名觉得自己不会画图标(动手能力不足)，其实是思维束缚了自己。图标的难点不在于动手画，而是在于画图标的思路和总结的过程。要学会挑选不同的参考，揉碎之后融合到你自己的图标中，这样才能做出

    有创意的新图标。

    图标设计流程

    第一步 找参考风格

    根据产品定位去素材库或者各大设计网站选择合适的参考图标。如下图所示，最终选中了两种粗线型的图标风格作为这次图标的原型参考。

    第二步 总结设计规范

    整理每组参考图标的设计规范，这一步很关键。我们需要罗列出两组图标的属

    性。第一组：线宽为9像素，直角，内部加有不同的元素，每个图标一种颜色，线条

    与线条连接，实色。

    第二组：线宽为12像素，圆角，内部无其他无素，每个图标含多种颜色，线条

    与线条重叠，半透明色。

    第三步 确定产品属性

    通过跟踪目标用户以及产品属性确定图标风格。以下图为例，总结的产品风格

    为游戏性、可爱、圆角为主、色彩丰富。在多数情况下拿到原型图时就已经明确了

    产品的风格走向，所以第三步的确定产品属性和第一步的找参考风格可以同步进

    行。第四步 提炼

    根据自身的产品属性，挑选上面两组图标的特点作为自己的图标的设计属性，选择思路如下：

    (1)由于界面本身以圆角为主，所以毫不犹豫地也选择了第二组的圆角；

    (2)第一组颜色过于单一，游戏风格不够强烈；第二组颜色过多，放在原本颜

    色丰富的界面中会显得凌乱。最终融合了两组的颜色特点，确定图标为两种颜色，且两种颜色为近似色，这样图标既不会过于单调，又不会太花；

    (3)选择图标细节、线宽，我选择了第一组。考虑到图标内部会加入一些其他

    元素，不会像第二组图标内部没有其他元素，线太粗会影响里面细节的展示；(4)选择特性，我很喜欢第二组图标的重叠感，增加了图标的细节，所以我选

    择它作为我的图标特色。

    第五步 图标的基本原型

    一个常常被忽略的重点就是找原型参考。举个例子，我们要做第一组的第一个

    单机图标，怎么找呢？我通常会去阿里巴巴的矢量图标库搜索相关的图标原型，选

    出至少5个好看的图标作为原型参考。

    因为是单机游戏，所以要找到符合单机游戏特点的样式。最终我选择了“参考

    2”为我的基本图标造型。找图标的原型参考时一定要拓宽思路，很多读者总是想着

    做线性图标就找线性的，其他风格的完全不看，这样会损失很多好的图标造型。

    第六步 融合

    最后一步融合也是最简单的事情，完全就是熟能生巧的软件运用了。只要平时

    多练习画图标，这一步就非常简单，下图是结合的过程。得到了最终融合后的样式，就算是大功告成了。如果还想让自己的图标和原型

    相差多些的话，可以改变一些细节的处理。最后放上五个图标的完成品。

    画重点

    (1)多数人的误区：觉得图标难画。但其实难点在画图标的思路和总结的过

    程。

    (2)图标设计流程：第一步，根据产品定位找参考；第二步，总结并确定参考

    的设计规范；第三步，确定产品的属性；第四步，提炼参考图标中的特点；第五

    步，查找图标的基本原型(与第一步有所区别的是所找参考为基本图形，不需要过

    多的创新)；第六步，将上面所总结的特点与最后选定的原型图标相融合。

    无论是图标还是界面，做设计的过程中，我们需要不断地收集素材进行总结，寻找灵感和创意。对他人作品的优点给予关注，仔细揣摩作者的思维方式、创作理

    念，而不是照着原作品去努力使自己的作品达到同样的效果。加入自己的思考和尝

    试，才会有更好的效果。

    02 手把手教你制作设计规范文吴萌

    互联网时代产品迭代速度日益提高，设计师再也不像之前那样，可以单打独斗

    地去完成一个项目，更多的是需要团队的配合。而不同的人做同一个项目的时候，就需要有一个基本规范，这样才能把控最终输出的结果。本文要讲的就是如何制作

    一份高效且能真正落地的视觉规范。

    新手的困惑

    记得刚开始工作的时候，负责过一个全新的项目。由于团队也只有我一个设计

    师，经常出现这样的情况：开发者要改一个参数的时候，总是习惯性地直接问我这

    个地方是什么颜色、主色调是什么、图标是多大、分割线的颜色是什么……

    那时候潜意识就觉得这些东西是需要有个规范文档的，把一些常用的内容，例

    如色值、字号、按钮、图标、间距等都放在一起，团队成员在有需要的时候能够快

    速找到。

    于是就上网搜了很多别人做的设计规范，自己依葫芦画瓢做了一份，满心欢喜

    地给到开发者的时候，却被告知很多东西都派不上用场。例如字体规范里写的“一

    级标题”，每个人所认为的一级标题是不一样的，所以光写一级标题的话，别人也

    不知道具体指的是哪里。

    再例如图片区域，规范得太死了，根本没留适配的空间，就像个标注，但其实现在看来作为标注也是不合格的。

    结局就是，花了很长时间做的规范只是自嗨，实际上对于团队来说一点作用都

    没有。事后我一直在想什么样的规范是适合小公司的呢？什么样的规范又能够真正

    节省团队时间、提高工作效率呢？

    而现在工作了几年之后，对这些有了更多的理解，所以就想把这些都总结记录

    一下，就算写给刚工作时候的自己。当然也希望在写给自己的同时也能够帮助更多

    读者，节省一些踩坑的时间。

    关于设计规范在说具体怎么做规范之前，我想先就规范本身的意义来进行说明，讲一下为什

    么需要做规范，以及什么样的规范才是好的，知其然知其所以然。

    1. 为什么要做规范

    很多在小公司的设计师都觉得，整个公司只有自己一个设计师，所有的设计稿

    都是自己一个人做的，风格肯定都是统一的，所以没必要花那么长时间去做一个没

    有用的东西。

    但其实规范本身并不是只给设计师用的，它更大的作用是服务于整个团队，例

    如方便和开发者之间的沟通，帮助他们制作统一的组件，以后用到的时候直接调

    用。

    而对于设计师来说，也不用重复作图、重复标注，改动一个模块的时候就能同

    步改动所有，大大提高了工作效率。

    而且有时候就算设计稿是同一个人的，也很难保证前后界面的参数是一致的，毕竟人的精力有限，事情多的时候，很容易出现记忆偏差。可能你在前面颜色、图标、模块间距做的是这样的，到后面相同模块的时候，就会做成另外一个样子。这种小问题到后面再去修改不但浪费时间，还容易遗漏，而前期花时间定义好规则，整理好规范，能够有效避免这个问题，磨刀不误砍柴

    工。

    2. 什么样的规范才是好的

    一个好的规范，首先得有人愿意用，否则你做得再好也都白费了。来换位思考

    一下，如果你是使用者，你希望看到一个什么样的规范文档？对于我而言，最重要的不是它做得多么细致、多么完美，而是我看得懂，我能

    够在30秒内找到自己想要的东西，并且能够对当前的工作有帮助。所以说规范要简

    单易懂且有指导意义。

    3. 需要注意的地方

    (1)规范最好是当主要界面的设计完成之后，再来制作，切记不要一开始就着

    手制作规范，这样很容易出现前期制定的规范在后续的页面上沿用不了的情况。我

    一般是把每个Tab的一级页面再加上几个二级、三级页面都做好之后再开始；

    (2)不要因为规范而限制了自己的思维，当发现规范有问题的时候，要及时去

    修正，而不是做了一次之后，一直沿用，永不修改；

    (3)规范要“因地制宜”，切实可行，不要流于形式。

    哪些规范需要优先确定

    1. 设计图尺寸

    虽说现在大多数人都是以750像素(2倍率)为设计稿，但也还是有人在用720

    像素(2倍率)的尺寸，或是375像素(1倍率)的尺寸。所以设计之初要定一个统一

    的设计尺寸，特别是多个设计师合作的时候，千万不要想当然地以为别人都和你一

    样。2. 间距大小

    间距包括页边距、模块与模块的间距，这种全局的间距大小必须要一致。页边

    距的大小很好定，基本上以20px、24px、32px居多，根据产品特性定一个统一的就

    好。如果不知道怎么定，可以多去看看大厂或者同类型产品的规范，尽量不要凭感

    觉定。而模块与模块的间距就相对复杂一点，在定之前需要先确定模块之间的分割方

    式，是用线、面还是留白，然后再确定间距。确定好模块与模块的分割方式后，还需要确定模块内部的分割方式，确定之后

    就要严格执行。例如规范定的模块与模块用线，模块内部用留白，那后续所有页面

    都需要按照这个规则来(特殊情况可不受此限制)。

    3. 颜色

    颜色包括基础标准色(主色)、基础文字色，还包括全局标准色(背景色、分

    割线色值等)，这些都需要标好色值以及使用的场景。当颜色是渐变的时候，也需要标清楚渐变的颜色。

    4. 字体

    不需要把页面所有的字号都放到规范里，只需要把常用的字号及其所使用的场

    景写清楚就好。需要注意的是，使用场景要写一些带有明确指向的描述文字，例如

    顶导航标题字号、Feed流正文、详情页标题等。

    还有一点也不能忘记，那就是行间距，不管是一行文字还是多行文字，我们都

    需要标清行间距，也就是行高，如果是段落的话还需要标注段落间距。为了避免团队的其他成员忽略了文字的行间距，我们需要在做规范的时候标

    明，所有文字必须注明行间距。

    5. 图标

    项目紧急而人员又不足的时候，可能没有那么多时间去把所有图标都画得精细，那这个时候我们可以先定尺寸。当然这里说的“定尺寸”不是让你把页面内所

    有图标的尺寸都定好，而是说优先定几个大模块的尺寸，例如顶导航、底导航、个

    人中心等。

    等后续空闲的时候我们再去细化这些图标，开发者也只需要换张图，不影响其

    他。建议图标尺寸尽量不要过多，例如32px、36px、40px、48px都有，这样会显得

    凌乱无序，而且这些完全可以统一成两个标准，例如32px、48px的，因为图标是可

    以有留白区域的，也就说图标本身大小可以是40px，但是切图尺寸是48px。

    这样做的好处就是图标大小种类较少，方便记忆也显得专业，毕竟谁也不希望

    最后整理出来的规范里有32px的图标2个、36px的图标2个、40px的图标2个，这样

    并没有提高效率，所以建议图标尺寸不要太多。

    6. 按钮

    按钮规范包括它的大小、色值、圆角度以及默认状态、点击状态、禁用状态。前期在制定规范的时候，我们可以先定大、中、小三个尺寸的按钮样式，后期

    再根据实际情况做修改。

    如果你的App内很多按钮都是文字+图标的，那么图标的大小以及它和文字之间

    的距离也是需要规范的。

    7. 图片

    图片包括App内出现的所有图，一般情况下都是产品图和头像。需要注意在制定

    规范之前，要先把图片比例定好，常见的比例有1:1、2:1、4:3、16:9等。然后再

    把每个模块所用的图片大小以及它的比例标清楚，如果图片有圆角的话也需要注明。

    头像的尺寸可以定三个，大中小各一个，基本体量小的App都够用了。建议App

    内的图片比例有2～3个就好，因为这涉及后台上传，比例不一样的话，要么就需要

    开发者对图片进行裁剪，要么就需要留不同的接口，后期分别上传。无论哪一种，都是需要额外的人力成本。

    8. 导航

    1)顶导航

    规范内容包括高度、字体大小、颜色，以及有没有分割线，有的话也要标明分

    割线色值；带不带图标、多个图标的间距等。2)底导航

    规范内容基本同顶导航类似。要区分文字默认和选中两种状态的色值。

    3)二级导航

    主要是一些筛选类Tab，需要标明文字大小、色值、选中后的横线大小，这里横

    线的样式目前常见的有两种，一种是固定的短线，不管上面文字多少，都是显示一

    样的短线；还有一种是和文字一样长的，无论哪一种，事先都需要定义一下。9. 卡片相关

    卡片包括很多模块，例如卡片标题、卡片列表、卡片基础样式，建议以高度为

    划分，如果内容差不多的话，就统一高度。例如都是图标+文字，一个高度是

    72px，一个是80px，就可以统一成一个。

    产品列表等一些可复用的卡片样式都可以做到规范里，统一样式，后期修改起

    来也比较方便。

    哪些规范可暂定，日后再调整

    前期因为各种各样的原因，例如时间不够、无法预知后面的情况等，没有办法把所有的规范都定好，这时候我们可以对一些后期改动成本小的模块暂时确定一下

    规范，后期需要修改的时候再统一调整。

    1. 图标风格

    在规范图标的时候，必须做的是把图标大小确定，对于图标本身的样式、风

    格、粗细等可暂时做几个示意的样式，等所有界面完成后，再来统一绘制。

    2. 弹窗样式

    很多时候我们并不清楚界面内都需要什么样的弹窗样式，文字最多有多少个，所以我们可以先定几个最常用的，例如双向操作(含确定、取消)弹窗、单向操作

    (只有一个操作按钮)弹窗。哪些规范先不做

    空白页插画、缺省页、占位图等，这些可以先不用急着做，等项目都完成后，再来做就可以了。前期项目紧急的时候，不要把时间都花费在这些小的页面里。加分项

    1. 目录

    目录相当于一个索引，方便看的人对整个规范有一个大致了解，而且能帮助团

    队成员快速找到自己需要的内容。2. 版式统一

    规范文档既然是统一页面布局、方便团队协作的，那么它本身就应该统一，例

    如每页格式、标题大小、正文字号及颜色等都需要保持一致，这样才更能让别人相

    信这是一个经过深思熟虑做出来的规范文档。

    再例如文档里所有间距用绿色表示、元素用紫色表示、高度用红色表示等，让

    每个颜色的存在都变得有规律可循。

    画重点

    规范本身的作用是为了提高团队的工作效率，不要顾此失彼。小公司的产品不

    像大公司体量那么大，规范不需要完全照搬大公司的，而是要根据自己公司的实际

    情况，制作出一个适合自己的、扁平快的规范文档，让规范能真正发挥它的作用。

    制定规范的时候不要想着一次性全部都定好，要有主次，前期优先定一些重要

    的，例如设计图尺寸、页边距、颜色、字号、图标大小、按钮、图片比例等；等后

    期页面做得差不多的时候，再去细化图标、空白页面等。

    记住最重要的一句话：规范要能真正落地，能给团队其他成员带来切实的作用。不要流于形式，否则再好的规范没有人用也是枉然。

    参考资料

    如何用临摹来提升你的设计能力 http:t.cnRim0S81

    03 关于适配这件小事的前世今生

    文吴萌

    很多人刚做UI的时候，根本不知道做完界面还需要适配，以为把设计图做好就

    行了，其他的事情跟自己没有半点关系，实际踩坑之后才发现问题所在。而这样的

    试错成本未免太高，不如最开始准备得充分一点。

    错误做法

    正是由于部分设计师对适配了解不够透彻，以至于实际项目中需要把750px的设

    计稿适配到640px、720px、1242px的屏幕时，都选择把设计稿直接等比拉伸至对应

    的尺寸，然后再重新标注。殊不知此方法不仅增加了几倍工作量，还会导致最终的

    效果不如人意。

    下面以QQ首页为例，左图是750px(iPhone 6)的设计稿(临摹)直接拉伸至

    1242px(iPhone 6 Plus)的效果，右图是实际线上1242px的界面。相信大家也看出差别了，750px直接拉伸后的界面元素整体都比实际线上

    1242px的大。

    之所以说这样的方法是错的，有两个原因：一个是按照此方法，750px和1242px所显示的内容是一样多的，但实际上1242px的屏幕要比750px的长一些，显

    示的内容更多一些才对。如下图京东金融所示。1242px是3倍率下的大小，要和

    750px做对比，就需要换算到2倍率下的828px做对比。

    另一个原因就跟数学有关了，750px的页面要放大到1242px的大小，需要放大

    1.65倍，但实际上750是2倍率下的界面，1242是3倍率下的界面，它们的比例实际

    上是1:1.5，而不是1:1.65。也就是说，由750px直接拉升到1242px的稿子在开发者实现的时候会出现这样

    的情况：图标是1.5倍的大小(图标实现的时候用的是3倍率切图文件)，而文字、间距、图片却是1.65倍的大小，标注稿也是按照1.65倍来标注的。这样就会影响到

    开发布局，导致出现一系列误差。

    由下图可见，当我们直接在拉伸的设计稿中标注间距、图标大小时，实际开发

    的图标尺寸会比我们标注得要小，相差15px，这个时候如果开发者完全按照标注稿

    来布局，就会导致有图标的区域间距明显和其他地方不一样，相差太大时甚至会出

    现图标变形的情况。既然直接拉伸设计稿的方法不可行，那么难道只能为每个屏幕尺寸都重新做一

    套设计吗？当然不是，这样的开发成本太大，而且也没有必要。

    为什么不能一稿适配所有

    大多数人对于750px适配到1242px都表示能理解，但对于750px适配到720px就

    理解不了，持反对意见，觉得这属于iOS和Android两个不同的端，标签栏和导航栏

    高度都不一样，不单独输出设计稿的话，图标、图片会变形，间距会太窄等。

    那下面就来一一解释下大家对于750px适配到720px存在疑惑的点。

    1. 图标变形

    开发者在做的时候都是用的2倍率、3倍率的切图，哪个屏幕尺寸用哪套图是根

    据倍率来选择的，同一个倍率下的图标大小、间距、字号都是一样的。

    2. 图片变形

    图片都是按照比例来设置的，只要标注的时候只标注比例，而不是把宽高都限

    制死，适配不统一的问题是可以避免的。3. iOS和Android的平台差异

    有一些人总认为这两个平台存在差异性，例如它们的导航栏、标签栏、时间栏

    不一样大，怎么能统一适配呢？其实头部的导航栏、时间栏和底部的标签栏这些平

    台的基础控件，与界面内的元素不在一个z轴上，它们属于界面最上层，界面的尺寸

    也不受它们的影响。

    如下图所示，哔哩哔哩在Android和iOS平台下的基础控件不一样，但是并不会

    影响到导航栏下方的Tab栏的高度。所以事实证明，适配跟平台并没有太大的关系。掌握正确的适配规则

    1. 倍率相同

    适配需要在同一倍率下，如果不是则需要换算到相同倍率，再进行适配。既然

    要做比较，当然要在同一水平线上，总不能让姚明跟林丹去比羽毛球吧。

    知道手机的屏幕分辨率和倍率之后，就可以算出在其他倍率下，屏幕分辨率是

    多少。例如iPhone 6的分辨率是750×1334(2倍率下)，乘以1.5之后就可以算出3

    倍率下的大小。同理可得其他手机的屏幕分辨率在不同倍率下的大小，红框处表示正常的分辨

    率大小。

    适配只跟倍率相关，同一倍率下，界面上的间距、文字大小、图标大小是一样

    的，不同的只是屏幕显示内容的宽度和高度不同，所以说在2倍率下，720px、750px、640px、828px页面上的元素大小相同；在3倍率下，960px、1080px、1125px、1242px页面上的元素大小相同。

    下面以虾米音乐为例，分别对比640px、720px、750px页面上的元素大小，证

    实界面上的间距、文字大小、图标大小都是一样的。2. 适配三原则

    在适配的时候通常会遵循三个原则：等比缩放、弹性控件、文字流自适应。1)等比缩放

    等比缩放指的是该元素的尺寸大小并不是固定的，是会跟随着屏幕的大小(一

    般是宽度)变化而变化。如下图App Store的搜索结果页，单个预览图的比例是

    16:9，不管屏幕分辨率如何变化，图片比例并不会发生变化。标注的时候，我们也只需要标注好页边距、图片比例、图片间距就好，开发者

    就可以把适配规则写成随屏幕宽度变化而变化。2)弹性控件

    弹性控件指的是元素尺寸不变，间距随着屏幕的宽度自适应，屏幕越宽，间距

    越大。3)文字流自适应

    一行能显示的文字数量和屏幕宽度成正比，屏幕越宽，一行能显示的文字数量

    也就越多。3. 适配跟平台基础控件无关

    其实并不是界面的所有元素都需要进行适配，我们只需要适配中间那一块区域

    即可。而上下导航栏的高度不固定，每个平台的高度不一样。例如iOS的导航栏是

    88px，Android有112px、104px等。但是不管高度如何，只需要做到让元素居中即

    可。

    4. 实际案例说了那么多，是时候来分析一个实际的案例了。适配其实总结起来就三个步

    骤：先换算至同一个倍率，再去调整界面元素，最后将调整好的界面按照倍率还原

    到最开始需要适配的尺寸。

    以750px(iPhone 6)适配至1242px首先适配需要在同一个倍率下，750×1334是2倍率下的，1242×2208是3倍率下的，根据倍率换算后者的2倍率大小

    是828×1472。

    所以要想将750×1334适配至1242×2208，就需要先把750×1334适配至

    828×1472，然后再将调整好的界面×1.5到1242×2208。其他的例如750px如何适配至720px、640px，原理是一样的，它们的倍率是一

    样的，就省了头尾的那两步，只需要根据适配三原则调整界面元素即可。

    需要注意的点

    1. 小屏幕适配

    我们的设计尺寸基本都是用750px的居多，这就会涉及小屏幕的适配问题，当一

    个元素在750px上显示效果很完美，到640px上可能就放不下了。所以在作图的时

    候，设计师需要用动态的眼光去考虑问题。下面就来讲述几个最常出现的问题。

    1)弹窗

    如下图弹窗的样式，在设计尺寸为750px上显示很完美，但是不做任何调整，直

    接适应到640px的屏幕上，就放不下了。所以这个时候，我们就需要定义一些适配规则，例如在小屏幕缩小字号、缩小间距等。

    2)文字截断距离

    屏幕的大小会直接影响到每行显示的字数，当一行文字的右侧有元素的时候，就涉及文字和元素之间的安全截断距离，也就是文字最多能显示的区域。很多时候

    设计师在做设计稿的时候，没有考虑到文字的极端情况，这就导致在小屏幕的时

    候，文字和元素产生重叠现象。

    例如下图爱奇艺“我的”页面，在750px的界面上昵称显示得很完整，但是到

    640px上就显示不全，这就需要我们定义一下文字可显示的区域，当文字长度超过这

    个区域的时候，部分文字省略，用“...”代替。2. 平台差异

    iOS和Android两端的系统级别的控件样式不同，所以我们可以为两端单独做几

    个样式，这个成本不大，效果却很好。例如iOS平台的搜索是矩形框，而Android平

    台的搜索是下画线。3. 单屏页面

    大部分的界面适配都是考虑屏幕宽度居多，高度只会影响一屏内显示内容的多

    少，屏幕高显示的内容就长一点。对于瀑布流布局来说，高度根本不需要进行适

    配。但总是有一些特殊的单屏页面，例如：空白页面、音乐播放页面等需要在所有

    屏幕上显示一样多的内容。

    1)空白页面

    类似下图“我的看单”这种比较简单的页面，如果固定上方间距，那么在大屏

    幕上就会显得内容偏上。这个时候要想让所有屏幕显示的内容都一样，可以将上方和下方的空白区设置一个尺寸比例，这样不管在什么屏幕上，内容相较于整个屏幕

    来说，位置都是一样的。

    具体计算方法：屏幕高度减去上下导航，再减去内容区域的高度，剩下的区域

    按照比例来分配。图中是上方占37，下方占47。

    2)音乐播放页面

    这个页面相较于空白页面来说，要复杂一些，但是原理是一样的。把能够按照

    基础适配规则的地方固定下来，留一些自适应的部分。例如下图网易音乐，同样是2

    倍率下的界面，播放操作区域的高度都是一样的按照基础适配规则来的，而光盘区

    域则是固定左右间距得出。需要根据屏幕高度自适应的只有绿色矩形区域，其实读者有没有发现，把这个

    图简化后，就和上面讲的空白页面的适配方法一样了。不过需要注意的是自适应的

    部分不要超过两处，超过两处之后，界面变数太大，不利于计算，也没太大必要。设计稿尺寸

    设计稿尺寸在我看来并没有特别本质的区别。从原理上来看，你可以用任何想

    用的设计尺寸；只不过从适配的角度来说，750px(2倍率)、720px(2倍率)、375px(1倍率)这三个尺寸相对更合适些。

    我自己之前用过750px，也用过720px，那时候就想不明白为什么还有人用1倍

    率作图，现在市面上都没1倍率的手机了，用1倍率作图导出2倍率、3倍率图标不都

    虚边了吗？但后来换了一个新工作，同事都是用375px(1倍率)作图，习惯了之后发现两者并没有太大的区别。

    只是有些图标不是整数的时候，需要手动导出2倍率、3倍率版本，但其实就算

    用750(2倍率)作图怕图标虚边，也还是要手动导出3倍率的，所以都一样。用1倍

    率的好处是，很多国外的资源都是用1倍率做的，就可以直接倍率了。

    不过需要注意的是，当在1倍率下做分割线的时候，需要改成0.5px，这样导出

    2倍率图后才会是1px。建议分割线用内阴影做，而不要直接用0.5px的线。

    小技巧

    作图的时候如果想要知道当前页面的元素在小屏幕上是否放得下，总不能每次

    都把当前页面拖动到小屏幕上看看实际效果，这样成本太大。其实有一个非常简便

    的方法可以解决这个问题。

    750px和640px的界面相差110px(2倍率下)，我们只需要在750px的界面上减

    去110px，看是否能放得下界面元素，如果放得下，就表示在小屏幕上也能全显示。

    如果想要知道字数是否能放得下，也可以通过计算的方式得出结论。用110px除

    以字号大小，就可以得出小屏幕的比设计稿少显示几个字。例如字号是30px，在

    750px的屏幕上能显示30个字，那么在小屏幕上就只能显示26个字了。

    画重点适配这个概念很特殊，它看起来很简单，简单到大多数人都觉得自己会了，不

    用再去研究了，但其实只懂了皮毛，并不清楚原理。例如很多人都说自己会PS，但

    跟那些专业的人员比起来，你自己所知道的不过是冰山一角。所以我们要时刻保持

    一颗求知的心，不要限于已有的知识。

    最后总结一下全文最重要的几点，帮助大家加深印象。

    (1)等比拉伸界面去适配的方法是错误的，也是极其浪费人力成本的；

    (2)适配跟平台无关，只跟倍率相关，750px和720px的尺寸从适配的角度来

    看，都是一样的，只是界面尺寸相差了30px；

    (3)适配三原则：等比缩放、弹性控件、文字流自适应；

    (4)适配尺寸不要标死，要用动态的眼光去看。做的时候需要考虑极端情况，最常见的例如小屏幕适配问题等。

    04 如何高效地进行验收

    文吴萌

    一直以来，设计验收都不太受重视，设计师总是习惯于把时间用在雕琢设计稿

    上，而忽略掉后期的设计验收。这就导致程序员在修改Bug的时候，常常需要多次修

    改才能还原设计稿的效果，重复返工，极其影响效率。但其实很多时候只要设计师

    在验收的时候做一点点改变，多花费几分钟，就能大大提高Bug的修改效率。

    关于设计验收

    之所以验收不受重视，我觉得主要有两个原因：一个是对自己和合作的程序员

    极其自信，认为对方能领会自己所有的点，会完全按照设计稿来；另一个是设计师

    没有意识到验收的重要性，潜意识里认为最后开发的效果不好是开发人员的责任，跟自己没有关系。

    1. 错误的做法1)口头说明

    在实际工作中很多设计师发现问题后，只是口头告诉开发者哪里要改，这种方

    式很容易出现你说了10个，但开发者只记得6个，最终只改对了4个的情况。重复返

    工以及沟通的时间太长，效率不高。当然在这种口头说明的方法之下还产生了一个

    进阶版，就是搬个小板凳坐到开发者面前指哪改哪，但这个也仅限于对接开发人员

    少的时候，当你同时对接三五个开发者的时候，是没有时间、精力这么做的，而且

    工作效率也很低。

    2)让开发者去找之前的标注稿

    验收的时候发现有问题，让开发者自己去找之前的标注稿，对照着修改，这样

    的做法很容易出现改了但是没改到位，重复返工。例如，设计稿的元素大小是

    20px，第一次开发者做的是27px，一轮验收后他自己回去对照标注稿修改，改成了

    18px。这就意味着你在二轮验收的时候还得去提这个问题，时间成本浪费较大。

    作为设计师，我们每天都是跟像素打交道，间距、字号差个几像素，我们一眼

    就能看出来。但是作为每天跟代码打交道的开发者来说，差了几像素在他们眼里是

    没区别的，所以我们需要明确地告诉他这里移动几像素，那里字号改大几像素。

    这就跟谈恋爱一样，男生和女生的思维很不一样；同理，设计师和开发者的思

    维也是不一样的。我们在验收的时候，可以稍微改变一下方式，多站在开发者的角

    度考虑问题，前期多花几分钟，就能有效减少双方后续的沟通时间。2. 正确的做法

    1)截图验收

    验收的时候，我们需要对开发实现后的效果进行截图，与设计稿做对比。当然

    不是所有的图都需要截，可以先体验一下，看看哪里有问题，不太对劲，然后再截

    图对比。不过当我们经验不足的时候，可以都截图去做对比，确保万无一失。

    原则上，主流的各个尺寸的机型都需要去验收，但在实际中因为各种原因限

    制，很难验收所有的机型，一般主要去验收iPhone的大、中、小屏幕，Android的

    大、小屏幕，其他的屏幕大致看一些效果，如果是特殊的屏幕就根据用户使用量来

    决定是否要进行验收。

    2)和设计稿做对比

    截图完毕之后，就需要和设计稿做对比了。我们可以直接把截图放在设计图上

    方，降低透明度，大致比对下，就知道哪里有出入，然后再具体标注参数。

    这其中也有几个小技巧。当图标切图错误的时候，直接注明该图标需要更换，图片比例不对的时候也一样。总之，原则就是写得简洁明了，让人一眼就能看懂。

    举个例子，设计稿做的间距是40px，开发实现后的效果是52px，这个时候我们可以

    直接标明间距缩小12px，因为这样程序员就只需要在原来设置的参数上减12px，而

    不用再去算参数了。验收需要注意的问题

    1. 分割线

    在验收的时候要特别注意分割线的问题，分割线在所有屏幕上都是1px，但是很

    多程序员没有注意这个，或者说设计师在开发前没有特别说明，程序员就写成了

    1pt。因为pt是1倍率下的单位，px是实际单位，所以在做分割线的时候，单位需要

    是px，这样才能保证每个屏幕的分割线都是1像素。2. 文字截断范围

    当文字左右两边有留白的时候，我们需要标明文字可显示的范围；当文字字数

    超过范围时，需标明是折行还是显示“...”。3. 小屏适配问题

    设计师普遍用的设计尺寸都是750px(1倍率为375px)，一些排版也是基于这

    个尺寸的，那么对于640px的手机来说，某些地方就会出现排不下的情况。这个时候

    需要设计师在做设计稿的时候就考虑这一点，并给出适配规则。在后期验收的时候

    也特别需要去注意这个问题。

    4. 沟通不到位导致的问题

    有一些页面有很多种实现方式，如果前期没有跟开发者沟通清楚，就会导致最

    终实现的效果存在误差。如果页面前期单给一张静态图，开发者根本不知道设计师想要的实现方式是什么，是固定间距还是控制左右距离或中间自适应。最后很大可

    能就会按照自己的理解去做了，导致出现重复返工的现象。

    验收文档

    当验收页面较少时，可以直接把修改意见发给对应的开发者；但是如果同一批

    次验收的图较多时，这一方式就不太适合了，开发者容易漏看某一张图，导致没有

    修改。此时建议整理一个文档，把修改意见统一放到一个文档里，推荐使用石墨文

    档或者其他在线协同软件。

    在验收文档里，需要包含以下几个元素：问题描述、当前问题出现在哪个位

    置、问题页面截图、设计稿截图、PM开发者回复、修改进度、复查等，具体需要放

    哪些视情况而定。

    整理了一个表格之后，开发者可以一条一条地修改，不至于遗漏；设计师也能

    直观地看到开发者的修改进度，以及哪些地方改不了，是什么原因导致的，沟通起

    来更顺畅也更高效。

    画重点

    在后期视觉验收的时候，我们可以换位思考，把自己当作开发者，站在他们的

    角度去思考什么样的验收方式会更方便修改。例如设计之前就针对分割线、小屏幕适配等问题想好解决方案，并同步到开发者；在一轮验收时把修改意见标注清楚，整理成验收文档。

    前期多花费一点时间，能有效帮助开发者提高工作效率，反过来也能为自己减

    少二次验收的时间成本。

    05 组件的理性选择

    文付铂璎

    在设计界面时，同样的功能可以用不同的样式展示，我们需要知道如何利用用

    户的使用场景来选择最合适的设计样式。

    警告框与操作表

    1. 定义

    1)警告框

    警告框是一种操作上的确认，只有当用户点击按钮后才算真正完成，才可以有

    其他操作。它的主要作用是警告或提示用户，由三部分组成：标题、正文、按钮。

    有些简单的警告或提示只有正文和按钮即可，如下图所示：

    2)操作表

    操作表是从屏幕底部边缘向上滑出的一个面板，可提供2个以上的选择。它呈现

    给用户的是简单、清晰、无须解释的一组操作，没有描述内容(大部分)。另外，重要的功能操作也会用红色文字展示，如下图所示：2. 如何选用

    1)文字内容重要性

    选择警示框和操作表时，要考虑的是弹窗文字内容对于用户的重要程度。如果

    内容极为重要则选用警示框，如果内容不重要甚至不需要描述，就应该选择操作

    表，如下图所示：淘宝登录密码错误时，由于警示框可以更突出地体现文字内容，帮助用户找到

    问题所在，所以选用警示框。再看QQ邮箱的垃圾箱，点击全部清空时，由于信息本

    身就在垃圾箱内，不需要对用户进行过多文字提示，用户直接操作即可，所以最后

    选用操作表。

    2)用户操作流畅性

    当我们需要让用户停止操作并必须点击当前界面的按钮时，选择警示框。警示

    框对用户操作上的流畅性有着很严重的影响，如果提示不需要太过强硬，我们就选

    用在屏幕中任意位置点击就会消失的操作表，如下图所示：阿里巴巴拍照功能中，为了避免用户有其他操作而影响当前需要解决的问题，会使用警示框来阻止用户。而在支付宝中，点击退出登录时，为了避免用户误操作

    而退出，则使用了操作表，用户可以通过点击空白区域关闭操作表。

    3)按钮数量

    这是最容易区分样式的因素，当弹窗中的按钮数量超过2个时，我们一定选用操

    作表，因为警示框的按钮数量不可以超过2个。如果数量一样，可以根据上面两点择

    优使用，如下图所示：在得到App中点击开通“推送通知”时，因为操作按钮只有一个，所以选择警示

    框。而点击微博中的“更多”按钮，用的则是操作表，因为操作按钮有三个。

    标签栏与工具栏

    1. 定义

    1)标签栏

    标签栏位于屏幕底部，它是悬浮在当前页面之上的，并且会一直存在，只有当

    用户点击跳转到二级菜单后才会消失，如下图所示：用户可以在不同的子任务、视图和模式中进行切换，并且切换按钮间都属于不

    同的内容。当用户选中某个标签时，该标签呈现适当的高亮状态。标签的数量也有

    限制，不能超过5个，如果存在5个以上的标签，可以将最后一个标签设计成“更

    多”标签。

    2)工具栏

    工具栏同样位于屏幕底部，悬浮在当前页面之上，只是当用户不需要使用的时

    候，可以隐藏它。例如向上滑动界面时，工具栏会自动隐藏。工具栏的内容主要是

    与当前页面相关的操作按钮。

    2. 如何选用

    1)切换状态

    当我们需要同级别界面切换时，应该选择标签栏，同时标签栏的切换通常为一级导航。工具栏的功能仅针对当前界面内容的相关操作，如下图所示：

    微信读书底部栏是关于同级别的界面切换，所以选择标签栏，同时标签栏也是

    该产品的一级导航。而Safari浏览器底部的内容是针对当前界面的操作功能，所以

    使用了工具栏。

    2)位置状态

    当底部导航始终在界面最上方，上下滑动都不会消失，则选择标签栏；如果底

    部导航上滑随之消失则选择工具栏(也有少数的工具栏是怎么滑动都不会消失

    的)，如下图所示：在百度的App中，当向上滑动界面时，底部导航的位置是不会消失的，所以使用

    了标签栏。再看Safari浏览器，因为上滑时底部栏会被隐藏，所以选用了工具栏。

    3)选中状态

    当用户选中底部某一项时，如果需要高亮显示，且显示的内容是不同子任务的

    视图，则使用标签栏；而当选择后，出现操作表等与当前界面相关的操作时，应该

    选择工具栏，如下图所示：在百度App中，当点击底部的选项时，切换界面的同时当前选中的“好看视

    频”需要变成选中的样式，来告知用户当前选中的是哪个界面，所以使用了标签

    栏。再看Safari浏览器，点击底部按钮后出现操作表，且当前选中的按钮也不会变

    高亮，也不会切换当前界面，所以选择了工具栏。

    Tabs与分段控件

    1. 定义

    1)TabsTabs来自MD规范，早在Android 2.0时代，官方的通讯录App就使用顶部Tabs

    导航，可以滑动切换不同视图。Tabs里的Tab呈现的内容可以有很大的差别，而且

    数量没有限制，其不能作为表单的单选组件。

    2)分段控件

    分段控件是iOS原生控件之一，每个分段作用是互斥的。在分段控件里，所有的

    分段选项框在长度上要保持一致，iOS规范中规定对于分段控件的分段选项不得超过

    5个，每个分段选项可以是文字或者图片。

    2. 如何运用1)来源不同

    分段控件来自iOS规范，而Tabs来源于MD规范，如下图所示：

    我们来看网易云音乐“我的消息”界面，iPhone中因为是iOS系统配置的应

    用，所以界面中切换样式用的是分段控件，而反观安卓系统则用的是Tabs切换。

    2)内容不同

    分段控件主要起到分割和筛选同类数据的作用，而Tabs则没有这样的限制，Tabs栏里的每一项所呈现的内容可以有很大的差别。另外，分段控件更多是以单选

    功能出现在表单的使用中，而Tab则不能作为表单的单选组件，如下图所示：鲨鱼记账的图表页中，支出、收入为整个界面的展示项目，为了让用户查看起

    来更加方便，把数据分割为周、月、年的不同数据展示，因为是同类数据切换，所

    以选择了分段控件。反观36氪首页的Tabs栏，每一项内容的差别都很大。

    3)操作方式不同

    分段控件需要点击操作，而Tabs除了点击外还可以通过左右滑动切换不同视

    图，如下图所示：京东金融App某产品近七日年化的表单是极为近似的趋势图，不易让用户侧滑屏

    幕切换，需要让用户更精准地点击选择，所以使用了只能点击的分段控件。而小红

    书的切换页变化都比较明显，很容易区分，所以选择了可以侧滑屏幕切换的Tabs。

    4)数量

    分段控件数量不能超过5个，而Tabs没有数量限制。例如，网易云音乐中的消息

    界面因为分类的数量未超过五个(不是所有未超过五个的就要用分段控件，同时也

    要根据以上说的其他三种情况判断，这里只针对数量阐述而已)，所以可以使用分

    段控件；而网易云音乐视频界面中因为分类数量过多且内容上有区别，所以选择了

    Tabs。Toast与Snackbar

    1. 定义

    1)Toast

    Toast通常出现在顶部和中部，浮于页面上方，无法对其操作，出现一段时间后

    便会消失，并且在此期间不影响其他正常操作，如下图所示：

    2)Snackbar

    Snackbar出自安卓系统，是安卓系统的特色弹窗之一。根据官方定义它是不存在图片的，但随着产品功能的不断优化，现在产品中也存在带有图片的Snackbar。

    它是由一段信息和一个按钮组成，它们会在超时或者用户触碰屏幕其他地方后自动

    消失。Snackbar也可以在屏幕上滑动关闭，不会妨碍用户对产品的其他操作，如下

    图所示：

    2. 如何选用

    1)操作不同

    Toast弹窗没有任何操作键，而Snackbar是有操作键的，如下图所示：马蜂窝App中的文章点赞功能只需要告知用户点赞已成功即可，不需要其他操

    作，所以选用Toast弹窗；而小红书中当进入发现界面点击收藏时，会出现引导用户

    到专辑分类中去的浮层。

    2)消失状态不同

    Toast弹窗完全是通过超时后自动消失，不存在任何操作；而Snackbar可以超

    时消失也可以让用户主动上滑关闭，如下图所示：豆瓣App广播界面中，当点击刷新后，更新的内容会自动出现在最前面，用户不

    需要任何操作就可以看到内容，所以选用无操作必须等待超时后才会消失的Toast弹

    窗。而携程App中的酒店界面，因为更多精彩的内容在下面，并没有展示出来，为了

    不让用户在滑动浏览时造成视觉障碍，所以选择了Snackbar，除了超时后自动关闭

    外，也可以通过滑动界面让弹窗主动关闭。

    3)组成元素不同

    Toast弹窗主要是由文字和背景组成，也可以额外附加图标。而Snackbar除文

    字、背景、图标外还有操作键，如下图所示：得到App中只需要提示即可，所以选用Toast，组成元素为背景、文字、图标，而小红书App需要加入操作键，所以选择了Snackbar。

    画重点

    (1)警告栏与操作表：警告栏是一种操作上的确认，只有当用户点击按钮后才

    算真的完成，才可以有其他操作。主要作用是警告或提示用户。而操作表是常会从

    屏幕底部边缘向上滑出的一个面板，可提供2个以上的选择。

    (2)标签栏与工具栏：标签栏位于屏幕底部，悬浮在当前页面之上，并且会一

    直存在，只有当用户点击跳转到二级菜单后才会消失。而工具栏同样位于屏幕底部，悬浮在当前页面之上，当用户不需要使用的时候，可以隐藏。

    (3)Tabs来自MD规范，早在Android 2.0时代，官方的通讯录App就使用顶部

    Tabs导航，可以滑动切换不同视图。而分段控件是iOS原生控件之一，每个分段作

    用是互斥的，在分段控件里，所有的分段选项框在长度上要保持一致，选项不得超

    过5个，可以是文字或者图片。

    (4)Toast通常出现在顶部和中部，浮于页面上方，无法对其操作，出现一段

    时间后便会消失，并且在此期间不影响其他正常操作。而Snackbar出自安卓系统，是安卓系统的特色弹窗之一，它是由一段信息和一个按钮组成，它们会在超时或者

    用户在屏幕其他地方触碰后自动消失。Snackbar可以在屏幕上滑动关闭。

    往往看似相同的组件，其使用场景是千差万别的。每个组件都有不可替代的作

    用。

    参考资料

    iOS和Android规范解析——标签导航和分段控件 http:t.cnEfi6F7h

    正确使用控件-警告框 http:t.cnEfiXazl

    iOS 9人机界面指南(四)UI元素 http:t.cnRGllkVF

    App设计中，6组常见组件的区别与用法 http:t.cnRTia2tu

    这个控件叫：Segment Control分段控件(附录与Tabs的区别)

    http:t.cnEfii1PR

    警告框和操作表(Action Sheet) http:t.cnEfiaMfC

    06 倾囊相授Sketch使用的小技巧

    文吴萌

    现在越来越多的人选择用Sketch来做UI界面，它相比PS来说，功能更高效，可

    以说是“专为界面设计而生”。如果把做界面比作削苹果，那么PS是一把斧头，Sketch则是水果刀，斧头能做很多事情，但是对于削苹果这件事情来说，却很麻

    烦，不如水果刀好用。

    而且Sketch学习成本很低，基本一两天就能上手，加上它非常开放，支持第三

    方插件，这就催生了很多各式各样的插件，方便设计师使用，提高了设计师的工作

    效率。下面从两个方面介绍一些工作中会用到的Sketch小技巧：

    (1)软件自带功能：

    新建画板、加减乘除、不透明度、快速查看间距、移动微调、图层重命名、打

    组解组、快速选择、智能选择、旋转复制、画板自适应、画板折叠、设置快捷

    键、文本样式、图层样式、图片导出、Symbols。

    (2)第三方插件：

    Sketch measure、Font-Packer-master。

    软件自带功能

    很多人只知道Sketch有很多插件，却不知道它有很多自带的功能也非常好用，不亚于那些插件。

    1. 新建画板

    当你刚打开软件的时候，想要新建一个画板，可以按字母A，鼠标指针就会变成

    一个“+”号，可以自己随意框选画板的尺寸；也可以直接用界面右侧提供的常用设

    备的尺寸，如iPhone 8、iPhone XS等。不过直接在右侧选择预设的尺寸时，画板的位置是固定的，没办法把画板新建

    到指定的地方。这个时候我们可以用鼠标直接框选画板，然后再在右侧调整画板大

    小。

    2. 加减乘除

    做界面的时候经常会出现这样的情况：要把一个图形三等分、四等分，或者说

    加上30px、40px，这时候如果手动去计算，然后再输入，很浪费时间成本，而且对

    于数学不好的人来说，还容易算错。

    其实Sketch就自带一些快捷方法，在右侧尺寸大小的面板处，可以直接在尺寸

    后输入“+”“-”“”“”，后面跟上数字，输完之后确定，就可以得到想要的计算结果了。

    3. 不透明度

    当要改变一个元素的不透明度时，可以直接按数字键来调整。例如，你想把不

    透明度改到65%，那么选中这个元素后，直接按数字65；当不透明度是整数的时候，只需要直接输入数字6，就可以将不透明度调整到60%。

    4. 快速查看间距

    都说做UI是在跟像素打交道，界面中各个地方的参数大小都不能有误差。有时

    候我们就需要快速查看两个元素之间的间距大小，看看是不是统一。选择其中一个

    元素，按住Option不放，鼠标指针移到另一个元素上，就可以看到两者之间的间距

    了。

    5. 移动微调

    大多数人只知道按住Shift不放，选择“上”“下”“左”“右”可以向各个方

    向快速移动10px，但其实10px这个是可以更改的。对于移动端来说，普遍都会把参

    数设成8的倍数，那么微移10px来说显然不是那么合适，微移完了之后还得再调整一

    下。可以选择Sketch-Preferences-Canvas，把移动对象的数值由10px改成8px，或者任意你想要的参数。6. 图层重命名

    双击图层或者按住快捷键Command+R，可以为图层重命名。

    7. 打组解组

    按下快捷键Command+GCommand Shift+G，可实现打组解组。

    8. 快速选择

    当我们把很多元素都打组之后，想要快速选择组内的元素时，常用的方法是双

    击元素，但如果组嵌套得特别多的话，就很难选中了。这个时候可以用快捷键帮助

    我们快速选择：按住Command不放，同时单击该元素。

    9. 智能选择

    当很多元素混在一起的时候，如果只想选中其中的几个，一下子框选会很容易

    选到不想选中的，这时候智能选择就派上用场了，按住Option不放，同时用鼠标框

    选元素，最终只有全部被框选的元素才会被选中。

    10. 旋转复制

    记得刚开始用Sketch的时候，一直都不知道怎么旋转复制，都是在Ai里做好导

    入进来，后来才发现Sketch是有这个功能的。11. 画板自适应

    设计稿的尺寸超过一屏的时候，它的高度是根据内容变化的，没有一个固定

    值，所以做的时候一般都是先把元素排好，然后再手动调整画板的大小。但很多时

    候容易出现几像素的误差，这时候就可以用软件自带的功能来调整尺寸大小：

    Layer-Artboard-Resize to Fit Content。其实可以把常用的功能设置成快捷

    键，后面会具体说到。

    12. 画板折叠

    想要折叠左侧画板的时候，可以选择View-Layer List-Collapse All

    Groups。

    13. 设置快捷键

    Sketch里有些自带的功能有快捷键，但是很多常用的功能却没有，例如上面说

    到的画板自适应、画板折叠，我们可以自己设置：系统偏好设置-键盘-快捷键-添

    加-选择应用程序、输入菜单标题、设置键盘快捷键-添加。这里所写的菜单标题对

    应Sketch里的功能命名，必须要完全一样，这样设置的快捷键才会生效。14. 文本样式

    这个就相当于一个全局统一的样式，仅针对字体。当我们定义好产品内所用的

    字号(例如一级标题、二级标题、正文的字号)之后，就可以把它做成文本样式，后续其他页面需要用到时直接调用即可。这样可以防止其他页面的参数出错，和之

    前的不统一。

    当要修改的时候，可以只修改一处，单击刷新，就可以同步修改所有用到这个

    样式的字体。

    15. 图层样式这个和文本样式是一样的，不过它针对的是图层。

    16. 图片导出

    当我们用2倍率作图的时候，最后导出切图会发现切图的后缀名不对，导出1倍

    率才是实际的2倍率图，导出1.5倍率才是实际的3倍率图，但是它的后缀却是@1x、@2x，容易让人误解。这个时候，只需要做一点小小的改变就可以避免这个情况了。

    在软件界面的右下角选择Edit Presets(编辑预设)，把默认里的导出参数的

    后缀名改一下，1倍率图的后缀名改成@2x，1.5倍率图的后缀名改成@3x。

    17. Symbols

    众所周知，Sketch最高效的功能就是组件化界面中所使用的元素，设计师可以

    把同一个界面出现的相同内容都做成组件，方便后期直接调用(自带功能，不是插

    件)。

    下面以App底部标签栏为例，详细说明下Symbols的用法：

    首先，把红框处每一个内容都单独做成组件(选中元素，创建组件即可)。再把整个标签栏做成Symbols，当后期需要改变状态时，只需要在右边更换即

    可。

    不过需要注意的是，元素想要切换成其他元素时，必须保证这两个元素的大小

    完全一致；其次，修改文字时，也要考虑文字显示的宽度，需要把默认显示范围设置成最大显示范围。

    第三方插件

    1. Sketch measure

    1)字体

    Sketch measure是非常好用的一款切图标注插件。很多人在标注字体的时候，可能会出现这种情况：文字密密麻麻的，所有的参数都出现了，但其实仔细看会发

    现很多参数都不需要，还占地方。

    刚开始遇到这种情况，我都是手动把不需要的删除，直到后来才发现有快捷

    键。我们只需要在标注的时候按住Alt键，再单击标注(红框处)就会出现调整参数

    的界面，可以选择需要标注的种类，以及标注信息所显示的方位。2)自动导出

    如果每个页面都手动标注的话，人力成本太大，所以可以用自动导出与手动标

    注相结合的方式，把重要的、容易忽略的信息手动标注一下(如小屏幕怎么适配

    等)那些重复性的工作都可以交给自动导出。2. Font-Packer-master

    工作中经常会遇到这种情况：当你把文件发给其他人的时候，对方收到后弹出

    各种没有字体的提示，然后软件还会自动替换成其他的字体。而现在有了Font-

    Packer-master插件就能避免这个问题了，我们可以把页面所用的字体一起打包发

    给其他人。画重点

    以上就是我在用Sketch时总结的一些小技巧。最后我想要说明的一点是，虽然

    Sketch的插件很多，琳琅满目，但是我们要学会从中找到适合自己的，在不影响最

    终界面效果的前提下，提高工作效率。当一个插件对界面效果以及工作效率没有太

    大帮助的时候，那它就并不适合自己。

    说一句老生常谈的话：要想做出好作品，关键不在于工具，而在于想法。

    07 那些你不知道的好用软件

    文吴萌

    选择对了工具，就成功了一半。可是很多人并没有意识到这一点，还是习惯于

    用自己最顺手的工具，不愿意去改变。换个角度想想，互联网发展得这么快，很多

    跟不上时代发展的东西都会被淘汰，在没有Sketch之前，大家用PS做UI；有了

    Sketch之后，工作效率提升很多。既然迟早都会改变，那为什么我们不做最早吃螃

    蟹的那一拨人呢？下面就从不同方面来分别介绍一些好用的软件，这些都是实际工作中会常用

    的：

    在线协同——石墨文档

    图片管理——Eagle

    云存储——坚果云

    高保真交互原型——Protopie

    动效制作及输出——AE+Lottie

    在线协同——石墨文档

    石墨文档是一款轻便、简洁的在线协作文档工具，PC端和移动端全覆盖，支持

    多人同时对文档编辑和评论，让你与他人轻松完成协作撰稿、方案讨论、会议记录

    和资料共享等工作。PC端支持macOS和Windows系统，移动端支持iOS、Android及

    微信小程序。

    石墨文档可以把自己的文件分享给其他人，当需要协作的是文件夹时，没有分

    享功能，只能为当前文件夹添加协作者。添加后文件夹的所有者可以设置他人的权

    限，协作者删除文件只会退出文件共享，对原文件没有任何影响。后续文件夹内新

    增内容，也会直接同步给所有该文件的协作者。图片管理——Eagle

    Eagle是一款图片收集软件，相当于本地的花瓣。安装浏览器扩展插件后，无需

    下载图片，只需要简单地下拉、拖曳就可以完成图片的收集。加上图片是保存在本

    地，所以即使没有网络的时候也能查看。可配合坚果云使用，让两台计算机之间的

    文件实时同步。支持macOS和Windows系统。

    1. 导入花瓣画板

    该工具可以一键导入花瓣里的图片。不过需要注意的是，花瓣地址必须写单个

    画板的地址，不然会显示网址无效。此外，不只是可以导入自己的单个画板，还可

    以导入别人的画板。要是看到哪个花瓣用户的图片特别好，可以直接将其导入。

    2. 整理素材库

    采集好的图片可以按照文件夹的形式进行整理，下图是我自己所列的文件夹目

    录。Eagle还可以为文件夹选择不一样的颜色，且支持多重条件筛选图片。云存储——坚果云

    坚果云是一款云盘同步软件，堪比百度云盘的升级版。它可以同步计算机任何

    位置的文件夹，不用像icloud一样，要把文件夹拖到制定地方才能同步。而且还支

    持协作，你可以和其他人共同维护一个文件夹，实时同步修改内容。它支持macOS和

    Windows系统，移动端支持iOS和Android系统。

    1. 两台计算机文件实时同步

    安装坚果云后，计算机内的任何一个文件夹右键都会出现坚果云的选项，单击

    同步到个人空间，等待同步完成，就可以在客户端内看到该文件夹。当想要把客户端的文件同步到另外一台计算机的时候，可单击客户端的对应文

    件夹后面的设置，选择一下同步到本地的路径(红框处)。这样文件里的内容被一

    个设备修改，也会实时同步到另一个设备上。

    2. 历史版本

    当误删文件需要找回的时候，可以通过坚果云的历史版本去恢复，坚果云会为

    我们保留3个月内的历史文件。3. Eagle、坚果云配合

    可以把Eagle的本地文件夹放到坚果云里同步，然后在另外一台计算机上把

    Eagle的文件夹同步下来，这样Eagle素材库也能实现云同步了。

    高保真交互原型——Protopie

    Protopie可以让你的原型自己说话，无须输代码就可以实现几乎所有交互效

    果。操作原理是交互＝对象+触发动作+反应动作，非常适合做用于设计稿演示的

    高保真原型，且支持传感交互，例如麦克风、3D Touch等。支持macOS和Windows

    系统，移动端支持iOS、Android系统。

    1. 操作原理

    先选择触发动作的对象，也就是说对页面上的哪个元素进行操作，会发生交互

    行为；然后再选择触发交互行为的动作，如单击或者下拉等。最后再选择发生交互行为后的参数以及图层，例如放大至500px，x轴移动至

    281px等。

    2. 手机实时预览

    手机下载客户端之后，可直接预览制作的效果，百分百模拟开发者实现后的效

    果。

    动效制作及输出——AE+Lottie

    Adobe After Effects简称AE，是Adobe公司推出的一款图形视频处理软件。

    虽说其特长在于制作视频动画，对于UI动效来说有点大材小用，有些烦琐且没有交

    互行为；但它配合Airbnb的Lottie使用，可以将动效直接导出json文件，供开发者

    直接调用，能有效减少动效输出的成本以及开发的成本。

    1. 前期准备

    安装好AE客户端以及插件bodymovin.zxp和ZXP Installer之后，单击AE

    的“窗口-扩展”会新增一个bodymovin，如果没有就表示没有安装成功。确定插件安装成功后，打开AE“编辑-首选项-常规-界面”，选中允许脚本写入

    文件和访问网络(否则 ......