本文将从网格系统的基本概念介绍出发，逐步探寻构建网格系统的必要性、网格系统的实际运用方法、以及使用网格系统可能遇到的坑。

什么是网格系统？

（1）网格系统的定义

网格系统是利用一系列垂直和水平的参考线，将页面分割成若干个有规律的列或格子，再以这些格子为基准，控制页面元素之间的对齐和比例关系，从而搭建出一个具有高度秩序性的页面框架。例如：谷歌的Material Design中，将整个页面看做是一个网格，所有页面元素都与网格线对齐，并且将这一规则贯穿于整个产品的设计中。

（2）网格系统的由来

早在20世纪初，德国、荷兰、瑞士等国的平面设计师们就开始提倡用客观的设计原理进行文字的编排，二战后这种理念在瑞士得到了良好的发展，直到20世纪40年代后期，第一次出现了使用网格进行辅助设计的印刷作品。由瑞士设计师大师 约瑟夫·米勒-布罗克曼 所著的《平面设计中的网格系统》一书，自1961年出版以来畅销至今，对设计界有着深远的影响。

目前，网格系统已经广泛地运用在杂志、平面设计、网页设计、移动端界面设计之中。

为什么要学习网格系统？

1.  提高团队协作设计效率

当多名设计师共同设计一款APP的时候，一个经过深思熟虑的网格系统就变得尤为重要。每个设计师都有一套自己的设计方法和习惯，如果没有一个统一的框架去约束的话，有可能在设计类似的组件或页面时，不同设计师会给出不同的设计解法，这样的话整个APP内的页面都会比较混乱。

例如下图，设计师A和B都各自遵循一套尺寸规范去搭建页面，但是设计结果给人的感觉却完全不一样。

因此，拥有一套统一的网格系统，就能保证设计师们的产出具有高度的一致性、规律性，合作起来更加地高效。

2.  更加理性的做设计

不同于纯感性创作出来的艺术品，UI设计也是需要理性的、客观的、具有数学逻辑美感的。熟练运用网格系统能够让你的设计更有秩序和节奏感，页面信息的展现更加清晰，提高阅读效率，从而提供给用户舒适的使用体验。

3.  减少做决定的时间

作为强迫症高发人群，很多设计师在处理页面细节的时候，经常会为了一个更好的视觉效果反复推敲，甚至为了一个图标到底应该使用20px好还是24px好而发愁，这样十分影响设计效率。即便几个页面的设计都达到了自己满意的视觉效果，也很有可能因为使用了不同的尺寸规则，而让设计缺乏了统一性。

制定完善的网格系统，能让设计师在页面布局和细节处理上更明确、自信、高效，一切设计行为都是有据可循的，减少因为一些细节推敲而造成的不必要的时间成本，拒绝拍脑袋做设计。

网格系统的基本构成要素

1.  单元格

前面我们介绍了网格系统是由水平和垂直的线，将页面划分成一个个细小的正方形格子，那么这个正方形的格子，就是网格系统里面最基本的元素“单元格”，即图中黄颜色的区域。

作为接受过九年义务教育的好青年，想必大家在中学的时候都接触过化学的基础知识，物质的最小单位是原子，原子组成分子，分子组成有机物……我们可以把这个单元格看做是一个原子，那么图标、按钮就是分子，整个页面就是由无数原子组成的有机物。

2.  外边距

在APP页面中，所有内容都会显示在中间的内容区域里，那么内容区域与屏幕的左右两端所留出的空间，就被称为外边距。

外边距数值越大，页面显得越宽松，数值越小越显得比较“满”，因此需要根据自己实际的情况去确定具体数值。例如：Airbnb的产品调性就是简约大气，整体布局比较宽松，因此在外边距的数值上选择的是48px。再例如：网易云音乐，页面中以专辑、歌单等的封面为主，侧重于表现图片的视觉冲击力。因此页面内容区域比例会比较大，外边距的数值选择了12px。

3.  列和水槽

页面的内容区域由N个列和（N-1）个水槽组成。在WEB端设计中，N的数值一般会采用12、16、24，但是在移动端设计中，列的数量不宜过多，因为手机屏幕宽度有限，列的数量越多，页面就会被分割的越“碎”，在页面设计时就会越难把控。

水槽宽度数值对页面的影响，与外边距大体类似，即数值越大页面越宽松，反之亦然。例如：Airbnb选择的是24px，而网易云音乐则是6px。

4.  横向间距

在杂志的设计排版中，会经常使用到基线系统，即水平方向会分布着一条条间距相同的参考线，用以规范文字和图片在水平方向的节奏关系。然而平面排版中尺寸相对固定，移动端的屏幕宽度和元素组件高度确都具有不确定性，因此这套基线系统不能直接照搬过来，需要视情况使用。

在文本段落中，横向间距就可以使用基线系统，用以规范水平方向上文字的节奏关系，这种情况多出现于阅读类产品的正文页。基线的间距数值，则根据自身产品实际情况而定。例如下图中基线的间距设定为4px，则字号和行间距均使用4px的整数倍，因此每一行字都会准确压在基线上，保证了视觉节奏的一致性。

而组件与组件之间的横向间距，就和纵向间距的使用规律保持一致，即选用最小单元格整数倍的一系列数值，来规范组件在水平方向上的节奏关系。例如下图中的最小单元格设置为8px，那么横向间距的数值就会选用8px、16px、24px、32px等。

如何在APP设计中运用网格系统？

第1步：定义最小单元格

最小单元格的数值，大多数APP会选择4-10这个范围内一个偶数。那么选用哪个值最为合适呢？

这需要从两方面考虑：

• 一方面是该数值是否能被大多数手机屏幕的宽度整除，即广泛的适用性；
• 另一方面是在具体使用时是否具有一定的灵活性。

在适用性方面，4、6、8、10这四个数值都是基本可以满足的，在灵活性方面，4px表现最佳，但是页面就会被分割的非常细碎，在设计时比较难于把控。

因此我们需要根据APP的实际情况选择合适的数值，4px或6px单元格比较适合页面内容信息较多，布局排版比较复杂的产品，例如：淘宝、考拉等电商类APP；而8px单元格对一般的设计场景都可以很好的满足，比较适合大多数的APP产品，因此是比较推荐使用的。

第2步：确定组件间距的增量关系

既然确定了最小单元格的数值，那么页面里所有的间距（包括水槽、外边距、横向间距等）、组件尺寸等都需要是最小单位的整数倍，以达到统一视觉节奏的目的。例如单元格选择为8px，那么所有用到的间距尺寸将会是8px、16px、24px、32px、40px……

第3步：确定列的数量

我们在设计APP页面时，用到的最多的布局方式就是等分布局，即页面内容区域被N等分，每一份的宽度则根据屏幕宽度自适应调整。那么就从这个角度出发，思考一下页面的网格应该设置为多少列，才能最大程度的满足各种等分布局的需要。

以下列举了几种典型情况（4列、10列、16列等大家有兴趣的话可以自己尝试一下，这里就不一一列举了），我们发现12列和24列除了5等分外，其他情况都可以满足，6列相对稍微差了一点，即结果为：12列=24列>6列>8列。不过其中24列显然将有限的手机屏幕分割的太碎了，因此在实际使用中还是以12列和6列为主。

第4步：sketch布局设置

利用sketch的布局设置功能，即可快速搭建出网格系统的参考布局，在平时做设计的过程中，可以经常使用Ctrl+L快捷键切换布局的显示，提高设计效率。

另外有几点需要注意：

1. 总宽=屏幕总宽度-外边距x2；
2. 偏移=外边距；
3. 3“装订线在外部”不要勾选。

第5步：实际设计运用

这里我们以网易漫画APP的首页为例，利用8px、12列网格系统来一次设计实战。

在首页设计的初期，还没有运用完整的网格系统进行规范，组件之间的间距规律基本以10px、20px、30px为主，各个布局模块之间没有形成内在关联的位置关系，视觉的节奏感不流畅，样式不统一。

下面两个页面中，大部分元素都没有与网格贴合，布局无规律，没有一个客观的参考。

现在我们开始统一使用8px、12列网格系统，对首页进行一次布局优化。在下面三张图中我们看到，无论是顶部图标、入口图标、竖版封面还是横版封面，都由网格系统整体串联起来了，不再是凌乱独立的个体，阅读起来更顺畅。横向的间距也都开始使用8px的整数倍，给用户带来更有节奏的浏览体验。

网格系统在使用中需要注意哪些问题？

1.  网格系统不要生搬硬套

并不是每个元素都必须要与网格对齐的，要根据自己的实际需要而定，如果硬套进去的话，页面就会显得很怪异。图中左面的页面的三个tab标题想要在网格上与封面对齐，但是标题之间距离太大，看起来很不舒服。

这里三个tab标题的间距是固定值，不需要根据屏幕宽度去适配，因此要把三个tab标题看做是一个整体，即一个tab组件，组件左端与网格贴合即可。

2.  网格不能被整除怎么办？

还是以这张图为例，大家在做设计稿的时候，最常用的画布尺寸也许就是iPhone6/7/8的750*1334px了，有些同学会发现，在这个尺寸下如果以8px为最小单元格时，画布是无法被整除的——即750px宽度下除去所有外边距和水槽后，每一个红色的列宽实际为42.5px。

那么大家就会产生疑问：这样的话，网格系统是不是就意味着不能用了？

其实这属于正常现象，因为没有哪一套网格系统，在任何屏幕分辨率下都能完美整除的。并且同样是8px单元格，在750px手机上无法被整除，而在720px手机上就完全没有问题。

例如下图的尺寸中，代表外边距和水槽的蓝色数值，是我们需要提供给研发的固定值，而红色的数值是根据屏幕实际宽度计算得来的。因此我们只需要保证提供给研发的数值遵循网格系统规律即可，至于页面中计算得来的数值，那0.5px的偏差肉眼是感觉不出来的。

总结

网格系统是视觉设计师强有力的辅助工具，它能指导我们用更科学的方式打造APP界面，从而让页面布局规范有序、节奏统一，让设计师效率翻倍。

然而正如文中所说，网格参数种类繁多，因此需要根据自身需要，构建一个适合自己、符合产品调性的网格系统。

作者：贺玉华，网易UEDC视觉设计师，目前主要负责网易漫画的视觉设计工作，喜欢打篮球、看漫画，希望成为一个能给产品带来业务价值提升的设计师。

本文来源于人人都是产品经理合作媒体@网易UEDC，作者@贺玉华

影响配色方案的因素

正如同我们所熟知的，配色方案的最终确定受到多方面因素的影响，它不仅涉及到用户，而且还受到业务目标，市场条件和当前设计趋势的影响。让我们简单回顾一下在这个问题上必须考虑的基本因素吧。

可读性和易读性

这两个概念都和文本内容的感知直接相关。可读性指的是人们是否可以轻松阅读单词、短语和内容块的高低，而易读性则指的是用户能否便捷快速地识别特定字体中字母的度量。

在进行配色的时候，应该将这些因素纳入到考虑当中来，特别是涉及到需要填充大量文本的界面的时候。配色方案对于界面中文本的感知有效度有着至关重要的影响。在白色或者浅色的背景上，显示黑色的文本，比起在黑色的背景上显示白色的文本，看起来要更显著、清晰度也更大一些。较差的可读性将会直接带来更差的用户体验，用户无法快速扫视数据，甚至会在视觉上产生莫名其妙的混乱，甚至导致用户错过关键信息。

这是否意味着浅色背景的可读性更强呢？并不一定。著名的UX设计大师 Jacob Nielsen 曾经提到过：“文字和背景之间应该采用高对比度的色彩。白色背景上的黑色文字（正文本）和黑色背景上的白色文字（负文本），在对比度和易读性上几乎是完全一样，但是后者和日常的阅读习惯并不一致，这种倒置的配色方案会让人在阅读速度上更慢。当文本比纯黑更浅一些，而背景并非纯白的时候，易读性会相应的变得更弱一些。”如果设计师对于不同的配色和字体特性上有足够的了解和探索，很多配色方案都可以具备良好的易读性和可读性。

不过，在上世纪80年代的一系列科学研究表明，对于大量的文本而言，浅色背景是更多用户的选择。为了研究广告背后的运作机制，D.Bauer 和 C.R.Cavonius 在他们的文章《Improving the legibility of visual display units through contrast reversal》中分享了他们的探索结果。文中特别提到一点，相比于深色背景和浅色文本，他们发现参与调研的用户在白色背景深色文本上的阅读正确率高出了26%。

为什么会这样？来自 Sensory Perception and Interaction Research Group 的 Jason Harrison 是这样解释这一现象的：双眼有散光（根据调研大概50%的人会出现这样的状况）的用户会更难以感知黑纸白字中的文本内容。在感知屏幕内容的时候，如果是白底黑字，双眼虹膜会有更多的部分会选择闭合，晶状体的形变相对较少。在黑底白字的情况下，虹膜会有更多的部分会选择开合，提高对光线的吸收，晶状体的形变会更大，相应的结果是眼睛更容易模糊失焦。因此，如果界面中包含大量的文本内容，使用的浅色背景和深色文本对于用户会更加友好。

可访问性

可访问性通常指的是 Web 页面或者 APP 能否尽可能多地贴合更为广泛的用户需求，让普通用户和有障碍的用户都能顺畅地使用。因此，「用还是不用」是取决于用户的需求和偏好，而不是用户的能力。配色方案对于产品的可访问性的影响并不小。在选择配色的时候，设计师需要考虑不同的年龄，特殊的需求和有障碍的用户的需求。这些用户也应当可以决定背景和布局元素的配色选择。用户调研将会为 UX设计师提供数据，让配色方案更加贴近用户的真实需求。

清晰度

清晰度是用来界定屏幕或者界面上的所有核心细节的清晰程度。在UI界面中，导航是否简单直观和清晰度就有着直接的关系：用户能否快速扫描布局并且找到关键的信息区域和交互元素，用户是否需要花费很多精力才能找到他们想要的信息。如果这方面没有得到正确的测试，信息和视觉层级可能设计上就是一团糟。对比度在这个环节起到了相当重要的作用，而配色方案的好坏直接影响着这个部分的效果。想要确保界面清晰、对比充足，可以通过「模糊效果」来对整个布局进行检验，看看是否重要的内容都更容易被注意到。

响应

用户使用任何设备是否都能正常使用网页或者 APP 的功能，这就涉及到整个设计的响应性了。有的设计在高分辨率的显示器下看起来非常不错，在小屏幕上却显得捉襟见肘。这就涉及到配色方案本身的适应性和响应性了，有些配色可能在日常的使用或者某些状况下失去美感。配色本身会涉及到色彩、形状和内容的感知，所以在最终设计完成之前，要尽量多在不同的设备上进行测试。

环境

在目标用户确定的情况下，Web 和移动端的使用场景其实是可以预见到的。比如在自然光下，移动端设备上，深色背景很容易产生良好的反光效果，特别是在平板和手机上。而相反，在光线不好的环境下，深色的背景可读性并不好。色彩的组合，对比度和色调在不同的环境下会产生截然不同的效果，这一点值得注意。

配色方案的选取注意事项

考虑到上面的一系列因素，下面我将提供一个简短的步骤清单，帮你为网页和移动端设备挑选合理的配色方案。

• 明确界面设计的目标。确定界面的主要组成和核心的功能点之后，你才可以更加合理地选择配色方案。如果 UI 界面是文本驱动型的（博客、新闻、电子阅读器等），浅色背景往往是更合理有效的选择。浅色的背景会使得整个屏幕显得宽敞而又大气，让用户更专注于其中的内容。另一方面，如果界面是视觉驱动型的，并且是以图片为主的话，使用深色背景搭配明亮的色彩，可能是更好的解决方案，因为这样会让图片等视觉内容更加突出，并且让整个布局显得更为时尚。
• 分析你的目标受众。通过界定和分析目标受众往往能够让设计师更清楚要先做什么后做什么。了解潜在用户，了解他们想从你的网站或者 APP 中获得什么，这样才能为可用、有用且有吸引力的界面奠定坚实的基础。中年人和老年人会更加喜欢浅色为主的配色方案，这样的界面对他们而言更加直观，也更加易于导航。年轻人更加喜欢原创和时尚的深色背景。青少年和儿童更喜欢明亮的背景色彩和有趣的细节。以目标受众为中心来设计，可以让设计决策更加明晰。
• 研究竞争对手。要记住一件事情，你的产品所面对的通常都不是蓝海，而是竞争激烈的红海。配色方案的选取将会直接影响到你的产品在竞争中看起来是否足够突出，会影响用户初次使用的时候，是否愿意与之互动。花费时间在探索已有的产品上，能够帮你节省时间和精力。
• 测试。基于用户群体、可用性、吸引力等不同因素对配色方案的大概方向确定之后，每个设计方案都应该在不同的分辨率，不同的屏幕以及不同条件下进行适当的测试。在产品投放市场之前，之前不间断的测试会揭示出配色方案的强弱，如果设计方案的效率低下，可能会给用户留下不好的第一印象。

妥协的解决方案

有时候，最终的解决方案并没有办法完全遵循计划中的方案，妥协往往是不可避免的。

深色界面，白色标签和文本

正如同我们在之前的设计趋势的文章当中所提到的，在深色系背景之下，使用白色的标签和区块来承载文本，这可以确保文本的可读性。在设计的时候，核心的信息文本会搭配一个浅色的区块背景，和深色背景隔离开来，这种处理方式实用且优雅。

将配色的权利交给用户

另外一种方法是让用户来选择配色方案，而我们在设计 Upper 这个应用的时候就是这么做的，这个待办事项应用当中，用户有选择配色方案的权利。一方面，这种方式对于用户更加友好，并且根据不同的可用性问题以及用户的审美偏好，提供个性化的方案。另一方面，设计师和开发人员需要额外的时间来创建更多可选的配色方案。

来源：优设

图标的可用性测试，测的是什么？

以下有4个指标，用于判断图标是否可用。

• 可查找性（Find-ability）：用户是否能在某页面上找到该图标。
• 可识性（Recognition）：用户是否能够理解图标所代表的意思。
• 预测性（Information scent）：用户能否猜到点击图标会发生什么。
• 吸引力（Attractiveness）：图标是否美观。

以上这些都是关乎设计是否成功的关键方面，在思考如何改进一个图标的时候，必须分别考虑。

如何进行图标的可用性测试？

图标的可用性测试的方法，可以主要分为2个类别：脱离情境的测试（out-of-context testing）和情境之中的测试（in-context testing ）。选择哪种类别，取决于测试时，图标是单独呈现给用户，还是在真实完整的界面之中呈现给用户，前者是脱离情境的测试，而后者则是情境之中的测试。

1. 可查找性（Find-ability）测试

图标需要被展示在完整的真实界面中。

因此，需要采用情境之中的测试，它可以帮助你明确，是否存在多个过于相似的图标，使得被访者需要花较长的时间去区分它们；是否图标被隐藏在相似背景色之中，或者广告很多的地方，使得被访者忽视了图标。

其中，定位所需的时间测试（time-to-locate tests）为最佳方式。

测试中，被访者需要按任务点击图标，你需要计算被访者成功找到目标图标的操作时间，首次点击的正确率。

首次点击的正确率，指的是用户第一次点击即选中目标图标的频率，错误的选择暗示着图标之间的差异不够明显。

2. 可识性（Recognition）测试

用户需要猜出他看到的图标代表了什么，有什么作用。

因此，选择脱离情境的测试，它让图标在没有文本标签，或者其他界面元素的情况下，被单独展示。

从用户的描述中，获得他对于图标的理解。如果用户的理解与图标想要表达的意义不符，就意味着需要重新设计图标。

不推荐的方式：如果图标将伴随着文本（文案）标签，在测试的时候，给用户呈现文本标签，然后让他在几种可能的图标中选择最能代表标签意思的图标。

不推荐的理由：在现实情境中，有的用户会忽略文字标签，只看图标。

3. 预测性（Information scent）的测试

图标的可用性测试目的，不仅是测出用户理解出这个图标的意义，还需要测出用户推断这个图标所代表的功能。

因此，选择脱离情境的测试，询问用户当他点击图标后，将会发生什么。

4. 吸引力（Attractiveness）的测试

增加视觉的吸引力，是使用图标的一个常见原因。

最简单的测试方式：让用户给每一个图标打分，最高分7分，最低分1分.

如果你对同一个图标有多套设计方案，可以让用户从中选择一个最有吸引力的图标，并对喜欢或者不喜欢某个图标给出原因。接着，让用户选择最喜欢的一套方案和最不喜欢的一套方案。

这样一来，能够避免出现如下状况。你的图标大部分是不错的，但离一套最适合的产品图标方案差一点，因为其中存在个别需要修改的图标。

作为一篇「科普文」，上面介绍的内容，都是一些通用性的方法，细节没有照顾得很周到，比如图标的可识性测试中，可能需要结合目标用户的文化背景来分析等。在具体项目中，还需要团队成员发挥主观能动性。

欢迎关注滴滴创意设计中心：

UX写作是什么

这个词汇可能比较新，但是UX写作的这种设计流程，在实际的设计应用当中，其实已经存在很长时间了。UX写作，实质上指的是，为了更好地引导用户，并且帮助用户在实际交互中更好地运用产品，而合理地打磨出拥有更好用户体验的文案的过程。UX写作，主要的目标是解决用户和数字产品之间沟通的过程。

UX设计师在进行UX写作过程中所产生的文案，通常也被称为微文案（Microcopy），指所以有这个称谓，是因为这些文案是为了服务用户，提供引导和提示而存在，以区别于其他的目的性更强的普通文案。更具体的说，微文案主要存在于按钮和菜单这类UI控件当中，还涵盖了错误提示、安全说明、服务条款以及其他用于提示和引导的产品界面中的控件。

为何需要UX写作？

微文案是APP和网站不可或缺的组成部分。为什么会将写微文案的过程表述为UX写作呢？

UX写作能成为现在这样一个相对独立的分支，原因之一是UI中的文案得到了越来越多的重视。营销和设计领域的专家认为界面中文案对于用户的影响越来越大。错误的文案表述可能会毁掉优秀的UI设计，而通过用户测试，我们发现它直接影响着整个UI的信息架构和导航体系，重要性不言而喻。

如果我们从用户的角度来看待产品，我们会发现这些微文案和小提醒对于整个交互行为，作用是如此的巨大。当用户第一次打开某个应用的时候，设计优秀的简短文字提示会让整个新生流程快速而有效。专业的微文案，会让整个导航体系清晰而直观。

考虑到微文案对于用户体验的积极影响，UX写作这个新领域就逐步建立了起来。从这一刻开始，我们可以有意识地通过文案这一微小的元素开始着手强化APP和网站的用户体验设计。

谁来执行UX写作的任务？

UX写作的范围和界定都已经明确了，那么这个环节要谁来执行呢？

毫无疑问，UX写作所输出的微文案对于产品是巨大的，理论上UX写作这一任务背后应该有专家坐镇。实际上，我们发现现在许多公司已经开始开辟出类似的职位，让专人负责UI中微文案的写作。他们的职责是通过微文案来提升产品体验的愉悦感，并且创造更加优秀的导航体系。

UX写作是一个有前景的职业方向，而优秀的微文案往往能让营销人员和文案设计师的工作更好开展。在UX写作这一概念出来之前，这些负责微文案的UX设计师/文案设计师就已经开始了微文案的创作，而现在，它变成了正式的职业，并且从隐性的要求演变称为了具体的工作。

不过，并不是只有专门的文案能够创建UX微文案。设计师也常常会参与到UX写作的创作过程，虽然他们可能无法在文案处理上媲美专职文案，但是他们对于产品设计、信息架构和导航系统有着无与伦比的了解。基于UI/UX设计师的职业本能和专精领域，他们了解用户如何感知视觉信息。

专职文案和设计人员可以共同参与到UX写作当中来，这两个职位的协同能够带来良好的微文案和用户体验。如果专职负责信息架构的人员也能参与进来，能够让产品导航嗯好地引导用户。如果公司旗下有许多不同的产品线，那么有必要雇佣专人来负责UX写作了，这样能够最大程度提升团队的生产力和效率。

高效UX写作的秘诀

很多人认为，UX写作是一件并不耗时的事情，因为在界面的很多地方，它都只是以小段话，甚至几个单词。但是，真正想创造出强有力的CTA元素，往往需要花费远超预期的时间和精力。

微文案通常可以是一个单词也可以是一个短句，这些内容一般会具备一定的功能性。牵涉到用户体验的每一个词语都是重要的，它们一定不能模棱两可。但是在功能上，它应该是多重的：一方面它要微用户提供明确无误的指引性，另一方面，它也需要传递出情绪，促使用户去点击。在每个CTA按钮背后，通常都会有商业目标，而这个因素也是UX写作者需要考虑的。

UX微文案应该足够清晰，在宏观上还得是足够一致的。用户要能够一目了然地明白微文案所表达的意思，而无需琢磨。它的指向性得足够明显，确保交互的顺畅无误。如果用户没有感到刻意的被引导，那么这个微文案就是成功的。另外，微文案应该是基于上下文环境和目标受众来设计的。

之所以说微文案是一种设计元素，是因为它高度依赖于视觉呈现。UX写作者要让它看起来符合整个设计体系，这样就不会显得貌合神离。而这也微文案设计的难点和限制之一。

关于UX写作的实用建议

现如今，相关的专家们仍然在探索有效的UX写作技巧和方法。不过就目前而言，虽然系统的策略还没有，但是已经有一些相对分散的UX写作技巧可供分享。

1、站在用户的视角。如果你想要创造真正对用户有用的文案，最好是要站在用户的角度来看待问题，了解什么样表达才能帮到他们。用户调研有助于了解目标受众。

2、不要使用复杂的词汇。正如同我们在前面所说的，有效的UX写作所输出的内容应该是清晰而简单的，微文案应该易于理解，这也是为什么进阶的词汇很多时候不可行。

3、文案要尽可能短。微文案之所以被成为微文案，是因为这些文案必须短小精悍，这才能对应上“微”这个字。它应该表情达意，同时不会引起太多的注意。

4、面向不同的用户测试这些文案。通过测试的文案才能更加经得起考验。如果你没有和目标受众匹配的测试用户，那么你最好可以拿你的朋友和同事来测试，了解他们的感受。

5、保持创意。微文案通常只会使用简短直白的语句，但是并不意味着让它无聊。试着去创造一些积极有趣的内容，例如在报错信息当中加入一个真正能够触动用户的笑话，打破出错的紧张感，然后帮助用户解决问题。当然，你的创新尽量不要太过于特立独行，过度的设计可能会让用户抵触。

6、搭配图片。在出现错误或者需要对用户进行引导的时候，可以搭配漂亮的图片和指引性的插画，帮助用户理解。

7、突出品牌特征。不要忘记，产品所有的文案和内容通常都会被视作品牌的组成部分，因此，在设计微文案之前，你要对品牌的特色有足够的了解，以便最终的微文案能够和品牌形象保持一致。

结语

微文案，或者是UX写作是一个充满潜力的新方向。UX从业者应该将微文案视作为用户和产品交互的一个重要组成部分，在这样的语境下进行UX写作，能够提升产品的满意度。

来源：优设

在设计iOS版和Android版的APP过程中会涉及到很多组件。不同的场景使用的组件也不一样。这篇文章讲述六组常见的相似组件的区别和用法。

• 警示框（alert）和底部操作列表（action sheet）
• 标签栏（tab bar)和工具栏（tool bar）
• 底部动作条（bottom sheets）和菜单（menus）
• 选择器（selector）和底部操作列表（action sheet）
• 下拉菜单（drop-down menu）、底部操作列表（action sheet）及活动视图控制器（activity view controller）
• snackbar和toast

一. 警示框（Alert）和底部操作列表（Action Sheet）

警示框是传达应用或设备某些状态的信息，并且常常需要用户来点击操作。

底部操作列表展示了与用户触发的操作直接相关的一系列选项，包含两个或以上的按钮。

一般含有三种以上操作使用底部操作列表，一种或者两种操作使用警示框或底部操作列表。

例如：iOS原生邮箱，点击「更多」出现底部操作列表，展示四种操作选项。推特的退出登录需要二次确认，使用的是警示框。

对于警示框（alert）和底部操作列表（action sheet）的困惑多用于二次确认上，例如微信的退出登录使用的是底部操作列表，而qq用的是警示框。

警示框（alert）和底部操作列表（action sheet）的区别于用法：

• 警示框侧重提示文字，进而表示提示文字的内容优先级较高；
• 底部操作列表侧重选择按钮，进而表示选择按钮的功能优先级较高；
• 按钮为0-2个时，建议使用警示框；
• 按钮为2-n个时，建议使用底部操作列表；
• 当然有的场景需要强阻断操作，例如提示没有网络，版本升级，这种情况需要使用警示框；
• 具体情况可根据产品对待。例如微信退出登录用的是底部操作列表，阻断性不强，对用户的打扰程度较低。

二. 标签栏（Tab bar)和工具栏（Tool bar）

标签栏：让用户在不同的子任务、视图和模式中进行切换。

工具栏：放置着用于操作当前屏幕中各对象的组件，在iPhone上，工具栏始终位于屏幕底部，而在iPad上则有可能出现在顶部。

例如：app store中底部的标签栏和iOS原生邮件详情的底部工具栏。

标签栏（tab bar)和工具栏（tool bar）的区别：

• 标签栏让用户在不同视图切换，例如app store 点击游戏tab，进入游戏内容的界面，所以涉及到视图切换是标签栏。
• 工具栏是对当前界面内容的操作，例如iOS原生邮件点击工具栏中的删除，则删除当前邮件。所以涉及到对当前页面的操作是工具栏。

三. 底部动作条（Bottom sheets）和菜单（Menus）

底部动作条：一个从屏幕底部边缘向上滑出的一个面板，使用这种方式向用户呈现一组功能。底部动作条提供三个或三个以上的操作需要提供给用户选择，并且不需要对操作有额外解释的情景。

底部动作条可以是列表样式的，也可以是宫格样式。

菜单：菜单是临时的一张纸（paper），由按钮（button）、动作（action）、点（pointer）或者包含至少两个菜单项的其他控件触发。

每一个菜单项是一个离散的选项或者动作，并且能够影响到应用、视图或者视图中选中的按钮。

例如：微信公众号点击「更多」，出现底部动作条；微信对话列表长按出现菜单，点击退出出现的菜单。

底部动作条（bottom sheet）和菜单（menu）的区别：

• 如果只有两个或者更少的操作，或者需要详加描述的，可以考虑使用菜单(Menu)或者提示框替代。
• 长按操作，多数情况使用菜单（menu）。

四. 选择器和底部操作列表

对于互斥的单项选择而言，要使用选择器。选择器的好处是可以来回切换确定，同时由于选择器里面的内容滚动，所以可以容纳非常多的选项。

例如猎聘app早期版本，选择当前状态，使用的是底部操作列表。这样做是错误的，底部操作列表是对选项进行操作而不是选择。猎聘现版本已经改为了选择器。

五. 下拉菜单（Drop-down menu）、底部操作列表（Action sheet）及活动视图控制器（Activity view controller）

下拉菜单：常见适用于提供快捷入口，导流用户去做其他操作任务。

底部操作列表：展示了与用户触发的操作直接相关的一系列选项，包含两个或以上的按钮。

活动视图控制器：是一个临时视图，当中罗列了一系列可以针对页面特定内容的系统服务和定制服务。

例如在支付宝中，点击「更多」出现下拉菜单。微信公众号主页点击「更多」出现底部操作列表。公众号历史文章中点击「更多」出现视图控制器。

下拉菜单、底部操作列表及活动视图控制器的区别：

• 操作选项是提供下一个操作任务入口，则使用下拉菜单。
• 对当前操作的分享，则使用活动视图控制器。
• 对当前页面内容的操作，则使用底部操作列表。

六. Snackbar和Toast

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

它们会在超时或者用户在屏幕其他地方触摸之后自动消失。Snackbar 可以在屏幕其他区域滑动关闭。当它们出现时，不会阻碍用户在屏幕上的输入，并且也不支持输入。

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

Toast主要用于提示系统消息。Toast 同 Snackbar 非常相似，但是 Toast 并不包含操作也不能从屏幕其他区域上滑动关闭，文本内容左对齐。

文章讨论的toast和snackbar主要是针对Android端，当然iOS设计规范中使用taost很多，使用snackbar我也仅仅在gmail中看见过。

snackbar和toast的区别：

• toast作为信息的反馈提示，可以承载更多的提示语。提示语很长的时候建议用taost，snackbar 文案必须要求很短。
• 如果在提示信息里面嵌入操作，使用snackbar 。例如微信收藏，可在snackbar中加入操作按钮进行收藏标签分类。
• toast相对于snackbar而言，提示强度稍低一些。

欢迎关注作者的微信公众号：「UEDC」

尤其是“自驱力”，决定着我们在设计道路上，能走多远、做多深。它也是从工作以来，对我个人成长影响最大的一个因素。

所以跟大家分享下，我运用自驱力的成长方式和培养自驱力的方法，希望对你们有所帮助。

1. 什么是自驱力？

我尝试着把它定义为：做某件事情时，不受外界因素影响，不局限于眼前利益，而为了自己长期目标和获得成就感，而自我驱动完成的方式。

2. 我的自驱成长路径

为了对不同阶段的同学都有所帮助，下面分为三个阶段，以自己亲身经历，来分享如何在不同环境下，利用自驱力得到成长的。分别是：a.创业团队，b.中型公司，c.大的平台。

a.创业团队

这是大家经常碰到的问题，包括公众号后台，也好多人跟我留言抱怨。

其实在我刚毕业的第一年，2013年，也是在创业团队。去了没几天带我的FC同学离职创业了。接下来，我自己独立负责移动端项目，从刚开始的一个终端，到最后同时负责4个端：iOS，安卓，TV，Pad。对于刚毕业的我来说，是个很大的挑战，只能白天工作，晚上自学。很多时候，都是晚上发现了好的设计或者有了好的想法，白天就在自己产品上尝试。

在没人带的情况下，我的自驱学习方法是：1.看；2.玩；3.练；4.读。

1.看

看，不仅要多看，还要精看。在设计初期，辨别好的设计的办法，是选择好的设计平台。比如：Dribbble、Behance、Pinterest，还有一些国内的优秀设计网站，等等。选择对的平台，吸收优秀设计，也是帮助你少走弯路的一个方式。

2.玩

这里说的“玩”，是“玩”各种APP，有目的和优先级的“玩”。

首先，“玩”自己产品的竞品。比如，你是做视频类的产品，那么，你先从传统视频软件玩起：优酷、土豆、爱奇艺、腾讯视频，再玩：YY语音，斗鱼、花椒、映客、等等偏UGC的视频软件。（有助于了解自己产品的整个市场环境，及差异化。）

其次，“玩”同一属性产品。比如，视频类产品属于娱乐类的，所以你还应该玩除了视频以外，用户用来娱乐消遣类的相关产品。（帮你发现更多同一属性产品的优秀体验和好的点子。）

最后，玩各种优秀的产品，去Appstore的各种分类里挑选自己感兴趣的产品把玩儿。（培养对优秀产品的敏感度，保持对事物的好奇心。）

有目的和优先级的玩各种APP，是一个很好的学习和积累的过程，同时，记录他们的产品、交互、视觉值得我们学习的地方。

这是我在2013年的时候对APP进行分析做的笔记：

3.练

完成前两步的“看”，“玩”之后，接下来要开始“练”。首先，可以先临摹，临摹比较好的设计作品，每个细节都需要考虑和临摹到极致（注重技法）；然后，再模仿，这个阶段需要你把看到的好设计点子提取出来，尝试运用到自己的设计上（注重思考）；最后，原创／创新，根据自己的产品，去做符合自己品牌的设计（注重创新）。

4.读

最后是“读”。阅读书籍，不局限于视觉设计。需要涉及到产品，交互，视觉。这样有助于培养宏观思考能力。同时帮助在小规模公司的你，正确的了解不同职位(产品、交互、视觉、运营、商务、用研、QA、等等)所负责的工作内容，方便合作于沟通。

下面推荐当时对我影响比较大的三本书：

以上是我在创业团队“没人带”的阶段，自学方法。

还有，当你在一家公司想要跳槽时，首先要问自己“还能利用这个平台得到什么？”。

这里说的“利用”，并不是贬义，因为一个好的平台自然会提供给员工“利用”的价值，来帮助他们成长的同时，也会给公司创造更大的价值。

那么，在创业团队，你能利用这个平台获得什么呢？

1.宏观思考

身为创业团队的设计师，不能把自己局限为一个螺丝钉，因为扁平化的管理，让你更有机会接收到一手信息、产品走向，等等。因此你应该利用这个机会提升自己宏观思考的能力、产品和交互思维，而不是天天局限在画几个小icon。

2.主导设计

创业团队，比任何平台都容易让工作年限少的设计师，去主导设计。它使你更有责任心、学会平衡利弊、处理优先级、提升沟通能力，等等的方面。认真主导一个线上产品，远比输出酷炫概念稿，更能让你得到全方位的提升。

3.创新尝试

小步快跑的创业公司，更愿意让你去尝试创新的设计。因此，在创业团队，更容易把你的创新想法、流行趋势，得到落地。

那么，如果说在创业团队的你，已经达到了以上所说的三点，同时自己也有能力挑战更好的平台，再考虑跳槽也不迟，而不要盲目的吐槽，被动的工作。

总结一句话：没有大牛带，你也可以快速成长。

b. 中型公司

在中型公司，设计师当然不只你一个。因此，在一定概率下，你会做着不核心的项目。很多同学抱怨说：“不让我做核心项目，我就应付呗，反正不重视我…”

而我的意见是，好好搞，把他当作品集。

举个例子，在2014年的时候，我刚到考拉，负责考拉电子狗的设计。当时在公司不是核心项目，但是我觉得既然去了就要好好搞一把。全当接触一个不同使用场景的产品，考虑不同用户群体，是一件很有新鲜感的事儿。大胆尝试呗，不行就当练手了。

因此，我就想推进一次大改版，下面是改版前的界面：

如何推进产品改版呢？

推进产品改版，并不是你跑到老大面前说，我很牛逼，让我改一下吧。而是你发现产品目前所存在的问题，并提出解决方案。而不是只停留在单纯的吐槽层面。

可以分为以下两步：1.问题走差；2.输出方案。

1.问题走差

从产品，交互，视觉层面逐步进行。

比如，考拉电子狗。首先，要分析我们的用户群体是哪些？使用场景基本都是车上，用户怎么才能在电子狗和音频功能里切换？目前界面体验，符合用户开车时，便捷操作么？视觉设计的配色和字体符合车内场景，及易读性么？等等。根据这些维度，依次走差每一个页面，并罗列出来。

2.输出方案

输出自己的优化后方案，并进行推进。在推进自己的设计方案时，尽量不要把所有方案摆上去让需求方选择。而是有自己主推的方案，并陈述其优缺点。如果对方有所意见或者质疑，再拿出备选方案，来告知需求方之前有考虑到他所说的想法，只是存在潜在问题。

这样才能有理有据，非常高效的推进自己的方案。

改版后的考拉电子狗：

当考拉电子狗移动端业务成功上线后，得到很好的反馈，公司又让我负责车载版的整体设计。

它是应用在车机中控台的产品，做这种属性产品的设计时，让我学会了：车载产品首先要考虑的是用户的安全性，如何才能在驾驶时更高效的操作；如何处理设备在司机视线的右前方，避免视觉盲区；如何减少用户的滑动操作，方便电阻屏的车载设备便捷操作，等等的问题。

最后，又让我负责考拉FM的主APP大改版，同时负责考拉UED团队的所有设计业务分配及质量把控。

下面是当时（2014年）考拉FM改版后的一些界面：

从刚进公司时，做着一个非核心项目，到最后负责整个UED的设计工作。可能刚开始跟大家所处的环境很相似，但是，最重要的是你对设计工作的态度和自驱力。

因此，当你负责不核心的项目，你该怎么办呢？

1.发挥空间

正因为你负责的业务不核心，没有那么多层层领导的关注，你才可以大胆的去挑战和创新，把自己好的想法都放进去，当成试验。

2.当作品集

很多同学都有这个问题：给他重要的活儿，他就认真对待；给他不重要，他就应付。其实，应该把你负责的产品，当做自己作品对待，而不是为别人去做。因为，每一个阶段对你来说都很重要。它都会成为你简历和作品集的一部分。

3.证明自己

当你满足了以上两点，说不定，你已经顺便证明了自己的能力。

c. 大的平台

“大公司，只是一个螺丝钉，没有发挥空间” 这是呆在大公司的同学，经常抱怨的。

而我来了却觉得，在大平台有充分的资源可以帮助我们进步。比如：借助用研的力量，更了解产品的用户群体，从而提升自己同理心；在更规范的专业职级系统下，有目的的提升自己的专业水平；挑战用户体量较大的产品，提升自己平衡利弊，预判风险的能力等。

我觉得，我们还是要有自己的独立判断，不要太受别人的影响，明白自己想要什么。

当你在大的平台，你如何提升自己呢？

1.深度设计

深度设计指的是，深度理解需求背后的问题所在（理解需求），跟进用户访谈或进行数据埋点（了解用户），制定产品、交互、视觉等达成一致的目标（制定目标），从而以目标为导向完成设计工作（设计实施），使每一个细节都有据可循，最终制定上线后的评估标准（证明设计价值）。

2.主动求变

大家都知道，大的平台稳。这点是可以理解的，因为用户体量较大时，每一个小的改动都会影响着甚至上亿用户的操作。但是，身为设计师的我们，还是要有创新的激情在，主动求变，争取在系统的思考的前提下，进行创新尝试。

3.沉淀方法

高级或者资深的设计师，应该在项目设计以外，更多的进行方法论的沉淀和分享。因为，自己能动手设计是一码事；然后，能够梳理成可复用的方法是一码事；其次，能让别人运用你的方法得到提升，又是另外一码事。只有自己理解了、吃透了，才能做到这一步。

以上是我工作以来的三个阶段（创业团队、中型公司、大的平台）所面临的问题，以及如何运用自驱力的处理方式去解决。

总的来说就是，有问题，就想办法解决。而不是处在小公司你抱怨没人带，大公司你吐槽没有发挥空间，有发挥空间的你怪业务不核心，核心的你自己又搞不定。其实还不都是你自己的问题。

3.如何提升你的自驱力？

自驱力并非先天就有的，它可以通过环境变化，或者自己刻意练习所提升的。我总结了三个方面可以有助于提升自驱力：

a. 兴趣

兴趣，是最好的老师。但是，很多人会说，兴趣这个东西太模糊了。我工作只是为了赚钱，怎么能对它产生兴趣。

我之前有看过一个研究，是说兴趣到底是怎么产生的。结果表明，并不是某人天生就对某件事感兴趣，而是他通过某件事，获得认可或者成就感了之后，才慢慢产生了兴趣。

就像我现在写文章这件事情，我以前特别排斥写东西，但是当我发现写了第一篇文章后，大家反馈很好，我有了成就感之后，后来发现这事儿还挺有意思的。

因此，先从自己拿手的事情做，获得成就感，得到认可后，慢慢就增加了你的兴趣。

b. 目标

目标可以分两种：长期目标，短期目标。短期目标服务于长期目标。这样的话，你每一步走的都不焦虑。

比如，你长期目标是想做一名建筑设计师，你就不能短期目标是当一个好厨师。因为这俩没任何关联性，哪怕你前期在建筑工地打杂，都是符合你长期目标的。

做设计也是一样，比如你想成为一名优秀的设计师。那么，你可以拆分成：

初期，提升技法，身为设计师的立足之本；中期，丰富理论知识，增强理论支撑，有理有据的推进自己设计；后期，形成自己的一套方法，提升工作效率和知识沉淀；最终，拥有格局或行业的大局观。

c. 导师

每个人的人生，都应该有一个自己的mentor。他/她并不是天天在你身边，帮你解决各种困惑的。他/她可以是你的领导，也可以是行业内的大牛，或者是跟你价值观相符的电影明星，等等。只要他们的状态和生活是你向往的，那么他们就可以当你的榜样。

比如，我很喜欢周迅，她对工作追求极致，对生活追求自由，评价一件事或者一个人，都是用好不好儿。我也觉得人生嘛，就应该这样好好干活儿，好好玩儿（哎呀呀…）。

所以，当你做到自己感兴趣的事儿，并制定了明确目标，同时找到一个未来想成为的一个榜样，那么你离成为一个有自驱力的人，已经不远了。

总结：

以上，是我工作以来的成长路径，和提升自驱力的方法。整体来讲，拥有自驱力可以使你，不盲目抱怨所处环境，主动寻求成长空间；不局限于眼前利益，拥有长期目标规划；不被动接受需求，敢于创新和挑战。

希望这篇文章，能帮到工作遇到瓶颈的你。

欢迎关注作者的微信公众号：

一. 通栏页面

顶部通栏

某些业务的一级页面多数使用了顶部通栏 banner 的效果，由于 iPhone X 在状态栏增加了24px的高度，对于现在通栏 banner 规范的内容区域会有遮挡情况。

解决方案：对于通栏页面在页面顶部增加一层高度44px的黑色适配层，整个页面往下挪44px。

这种做法虽然不符合苹果要求的设计规范，但由于短时间内更新全部 banner 的成本太高，可以先这样简单处理，后续再优化 banner 的设计展现。

底部 Tab 栏 / 操作栏

有些页面使用了底部 Tab 栏 / 操作栏，由于 iPhone X 去掉了底部 Home 键，取而代之是34px高度的 Home Indicator ，对于目前的底部 Tab 栏 / 操作栏会造成一定的阻碍。

解决方案：在页面底部增加一层高度34px的适配层，将操作栏上移34px，颜色可以自定义。

二. 非通栏页面

底部 Tab 栏 / 操作栏

原因同上，在底部有34px高度的 Home Indicator ，对于目前的底部 Tab 栏 / 操作栏会造成一定的阻碍操作。

解决方案：在页面底部增加一层高度34px的颜色块，将操作栏上移34px，颜色可以自定义。

三. 关于安全区域

这里可能有人会有疑问，为什么非通栏下的页面内容是通到底部的，而按钮却是在安全区域上方呢？

这个问题涉及到安全区域，iOS11 和先前版本的不同之处在于，webview 比较重视安全区域了。这意味着，如果给页面元素设置 top : 0，它会渲染在屏幕顶部的44px之下，也就是状态栏下面。如果给页面元素设置 bottom : 0，它会渲染在屏幕底部的34px之上，也就是底部安全区域上面。

为了解决这个尴尬的情况，苹果公司给我们提供了一个设置 Viewport的 Meta 标签的解决方案。

Viewport 可以设置的选项就是 Viewport—fit，它有三个可选值：

• Contain：The viewport should fully contain the web content. 可视窗口完全包含网页内容。
• Cover：The web content should fully cover the viewport. 网页内容完全覆盖可视窗口。
• Auto：The default value，同 Contain 的作用。

通过给页面设置Viewport—fit=cover，可以将页面的布局区域延伸到页面顶部和底部。

对于通栏页面，设置了Viewport—fit 的属性，发现会不生效，经过跟同事查看手 Q 源码后发现，终端对于 WebView 通栏的情况设置了UIScrollViewContentInsetAdjustmentNever属性，去除了上下安全区域的边距，使得安全区域的上下边距失效了。

另外提一点，经过 2 个版本的 Webview 测试，发现 WKWebview 在渲染页面的时候，底部按钮在位置表现上不一致，可能是一个还未解决的 Bug：

四. 使用 Web 方案：

根据以上的设计方案，可以这样处理：

• 修改页面 Viewport—fit 属性。
• 在 H5 页面链接一个 iphonex.CSS 来给 iPhone X 访问的页面增加对应的适配层。
• 在 H5 页面上给对应的 Dom 结构加上适配的类名。

△  iPhone X .CSS

如上，这样做的问题是，要修改的页面非常多，而且给页面带来了额外的类名，对以后的样式移除也有一定的工作量。

另外，使用样式给页面顶部增加适配层，下拉页面的时候黑色适配层会跟着一起移动：

既然使用 Web 的方式来解决这个问题不是很完美，是否可以通过终端的方式给 Webview 增加适配层，从而解决这个问题呢？

使用终端方案：

经过跟终端同学的沟通，确定是可以通过终端的方式，在原生界面初始化的时候增加适配层，这样页面就不需要样式处理了。

具体是通过链接中增加参数来进行适配:

• 参数名：_Wvx 控制 iPhone X 适配行为。
• 参数名：_WvxTclr 控制顶部适配层颜色。
• 参数名：_WvxBclr 控制底部适配层颜色。

对于顶部通栏的页面，通过加 URL 参数来增加顶部黑色适配层。

对于有底部操作栏「包括通栏和非通栏」，通过加 URL 参数来增加底部适配层以及设置颜色。

△  这里的 WVX=10 为 2 和 8 两个特性数字相加

这样，无需写一行代码，只需要给页面链接增加适配参数，就可以完美适配 iPhone X 了。

更多具体技术实现可以查看这里：https://ayogo.com/blog/ios11-viewport/。

来源 : 腾讯ISUX

对于Android 8.1系统来说，谷歌依然是优化设备续航，提升设备流畅性和易用性，同时系统还对无线设备连接做了更好的优化，毕竟抛弃3.5mm耳机接口已经是谷歌表明的态度。

现在谷歌还展示Android 8.1首个版本的一些细节，比如新系统换上了全新的名为“Product Sans”字体，这依然是他们自己设计并制作的字体，如果你想体验新字体也很容易，其已经被提取出来，并可供任何愿意安装在手机上的用户使用。

至于新字体的变化，文字字体显示边缘看起来过度更圆润，不会是以直线的方式终止，这对于阅读体验和排版都是有极大的帮助，有开发者表示，新字体调整后让系统阅读起来会更舒爽。

标题类

首先来说标题类，标题，顾名思义要让用户在短时间内了解界面的大致内容，讲究简洁明了。在app中，标题类一般有的顶部栏标题，底部栏标题，列表标题、表单标题等。

给标题类文字配色相对来说比较简单，选项比较少，我们一般只会使用深灰色或者企业色。因为标题虽然很重要，但是也不能过于抢眼。

而根据重要性程度我们可以把标题分为不同的等级，一般来说，层级越低的标题颜色越浅。深浅的搭配可以给你的界面带来意想不到的效果。

例如，微信中的好友列表和聊天界面中，用户名和聊天记录的文字颜色深浅正好是反过来的。这个其实也很好理解，好友列表中用户关注的是好友是谁，而到了聊天界面用户更关注的是好友说了什么。所以这里用深浅不同的文字来帮助用户加以区分。

我们可以看下使用同样的配色的效果，感受一下不同。

我不太建议给标题使用企业色，因为你要调整企业色的饱和度来区分不同的等级，个人觉得这样不太合理。

此外如果标题体系过于繁杂，仅从颜色深浅已经无法让用户从视觉上进行识别。我们还可以用字号来帮助完成区分，事实上现在大多数产品都是通过字号的不同来完成等级区分的。

正文类

正文类文字是给用户提供详细说明和解释的，正文类文字要比标题类要浅一些。一是因为用户对于正文都不太感兴趣，很少去读，我们没有必要在这里使用配色来吸引他们的注意力。其二，因为正文字数一般比较多，过于花哨的配色会使整个界面显得凌乱，造成主次不分。

提示类

提示类文字顾名思义就是要给用户以引导和提示。这个就意味着提示类文字要足够的显眼，如果用户都注意不到你，还怎么提示呢？

提示类文字一个主要用途就是给用户展示当前的状态。

我们来设想一个场景，你在一个理财平台上购买了一款理财产品。不同的时间段会有不同的状态。你看到这款理财产品收益率不错，投了3000元，这时的状态是“确认中”；过了几天这个产品开始起息就进入了“起息中”状态；又过了一段时间，你临时有事急需要用钱，就把产品转让给别人，又会依次进入“转让中”和“转让成功”。不同的状态我们在设计上给用户加以区分来帮助用户进行更好的识别。一般常见的方法就是使用不同的配色来进行区分，但是这个是适用于产品状态较少的情况。如果你的产品状态过多，每一个状态都配以一款颜色的话，那么整个界面就会显得很乱。

最常见的状态就是成功和失败，一般来说在用户心中都默认为绿色和红色了。当然现在把企业色作为成功也很常见。这里就会出现一个问题，如果你的产品主色调恰好是红色，这个时候就可能会引起用户混淆。

交互类

接下来，我们来谈谈交互类文字。交互类文字，简单来说就是能够让用户完成点击操作的文字。交互类文字设计的首要目标是让用户觉得你的文字是可以点击的。主要的办法有三个:

1.使用配色

目前来说用户觉得带有颜色的字体都是可以点击的，比如企业色。

当然如果你觉得界面中企业色出现的过于频繁，你还可以使用蓝色。蓝色在配色领域绝对是万金油型的，不管你的产品界面主色系是什么，用户一看到蓝色文字就会明白是可以点击的。

2.icon

文字加icon的组合也可以让用户产生点击的欲望。以知乎为例，左边的帖子用户只能看到答者和内容简介，这里的点赞和评论都是纯文字，用户无法直接进行点赞，但是点击进去以后，是icon和文字的样式，这里用户是可以直接进行点赞，评论，打赏和收藏。

ps.大家有没有注意到上面我只提到不能点赞，没说不能评论，其实是可以评论的。知乎里一个帖子的字数都是比较多的，用户只看到简介就点赞或者评论没有什么意义。后来我又去看了简书，发现简书是不支持用户在没有看完文章的情况下就支持点赞和评论的。

所以我不知道知乎这么做是出于什么考虑，反正我是没弄明白。

3.行为召唤语句

我们会遇到一些情况，不能使用配色，也不能使用icon样式。例如，登录界面中，我们希望用户的注意力在登录按钮上，所以下方的“忘记密码”和“快速注册”我们要进行弱化。弱化了还能让用户认为你是可点击的吗？当然可以，只要你的文字行为召唤一点，多使用动词就可以了。

交互类文字和按钮

其实我一直觉得设计师应该对每一个设计组件(元素)都做到充分了解。因为设计师的工作就是把那些元素以一种合理的方式放在一个界面(画布)里。所以你必须要了解他们。这里给大家推荐一个网站设计组件，里面一些基本组件都有。

回到主题上来，交互类文字和按钮其实有很多共同点。首先它们都支持点击跳转，也都可以展示状态的切换。交互类文字与按钮相比更加的轻量化，适用于极简风格设计。但是按钮也有自己的优势，按钮可以展示复杂的动效。

欢迎关注作者的微信公众号：「王M争」

回归到我们视觉设计，我们在接需求的时候，经常会听到运营及产品对页面设计的要求是品牌感，那么怎么样设计才有品牌感？下面就谈谈网易严选App，在品牌设计方面的尝试，在这之前我们先来了解下网易严选。

品牌分析

网易严选，是网易自营类家居生活品牌App，秉承严谨的态度甄选天下优品。严表示严谨的态度，选是甄选，甄选天下好物。

设计原则

网易严选的品牌理念是「好的生活，没那么贵」。可以想象以下场景，躺在懒人沙发上悠闲的看着书，坐在窗边惬意的喝着茶，抑或是靠在阳台上享受午后的阳光。他们不紧不慢，追求品质，享受宁静，所以品牌关键字是品质、生活、宁静。从品牌关键字提取到的设计语言是细节化、场景化、简约化。

细节感是指精致，比如商品的光影，产品中的对齐法则等。场景化讲究的是自然和谐统一；简约化是去除一切多余的元素，只留下素材或者产品本身。

品牌设计

了解了品牌性格，品牌关键字及品牌设计语言，我们将这些应用到具体的设计中，包括品牌logo、版式、图标、动效、图片等。

1.Logo设计

品牌Logo以形象、直观的形式向消费者传达品牌信息，以创造品牌认知、品牌联想和消费者的品牌依赖，从而给品牌带来更多价值。

严选Logo设计结合了小楷的轻重协衡，质朴平淡及刻本的一丝不苟，精雕细琢，表现出对产品的选择保持严谨的态度，对产品服务保持无限的追求。由于网易logo品牌色是红色，且从色彩心理学角度出发，红色更容易刺激购物。所以颜色继承了网易品牌的基因。

从品牌色延伸出来一些其它颜色，以便适用在不同的场景中，如活动色，成功色，会员色以及不同程度的灰色。

辅助图形是品牌不可或缺的一部分。它能更好地配合品牌logo，传递品牌价值，从设计上也起到调和的作用。当然也可以单独作为背景底纹、辅助元素等场景运用，既丰富整体内容，又起到强化品牌的作用。如图所示就是将品牌Logo进行拆分重组而成的辅助图案及应用场景。

在App个人中心中运用的辅助图形。

2.版式设计

严选App首页版面采用两栏布局进行设计，在内容的展现上做到适度克制，从而简化了内容，再配以浅色背景或者大面积的白色，把核心展示都留给了商品本身，整体给人简约，宁静的感受，不强制，不给人压迫感，相比其他电商App的四栏乃至更多的内容呈现，从视觉上做到了较强的辨识度。

3.图标设计

在界面中，icon图标是不可轻视一个品牌设计环节，也是造就品牌感较直接的方式。

底栏icon

严选底栏icon的图标设计均以家居物品为原型衍化而来，给人以场景感，真实且生活化的感受，传达了品牌价值。

为空设计

严选为空设计以生活中日常的元素为原型，并采用手绘线条断开的样式，加上块状的阴影及修饰等元素，营造场景化及画面感，为品牌设计带来了一丝情感。

4.动效设计

在App中做动效设计的优势在于生动性地传达品牌个性。

登录页动效设计

在登录页及明星商品页大面积留白空间的商品图上都加入了自然的投影，给人营造简约中带着场景感，细节感，无形之中透露着品质，生活，宁静。

Loading设计

Loading的设计创意来源于打开包裹时，商品呈现在面前的惊喜感以及生活的仪式感。所以设计的思路是随着手向下拉，箱子缓缓打开，松开手的时候弹出「好的生活，没那么贵」。这里寓意严选有你想要的商品，且品质及服务给用户带来惊喜，从而达到了品牌价值的传达。

5.图片设计

心理学研究证明，图片比文字更直观地、更优先地传达，所以在App中图片的品质直接传递着品牌的感受。

单品设计

在产品设计中，既要体现品牌的气质，体现品牌的品质，又要保证页面不平，所以在登录页及明星商品页大面积留白空间的商品图上都加入了自然的光影效果，给人营造简约中带着的场景感及细节感，无形之中透露着品质，生活，宁静。

这是运用在登录页及单品详情页的具体设计页面。

SKU规范

电商里面最难部分就是商品图的控制，需要对每个商品图拍摄，角度，色彩都控制的很好，除此之外对商品在页面的呈现也做了规范处理：

• 所有产品放置在米字格园内，分为大圆、小圆、迷你圆，分别对应偏大、常规、偏小尺寸。
• 产品角度以15度为基础变量单位。如15、30、45等。

下面是一些具体运用实例：

结束语

App视觉设计中还有很多可以进行品牌设计的地方，这里就说到这里。以上大部分案例均来自网易严选App设计项目经验，望共勉。

最后希望这次总结能对大家有所帮助，做出自己有品牌感的好作品，如有不当之处，欢迎大家来一起交流。

视错觉历史

古希腊哲学家亚里士多德的《灵魂论》里阐述了人类五感：视觉、触觉、味觉、嗅觉和听觉。我们视觉设计师暂时无法在长方形盒子（泛指各种电子设备）内设计味觉、嗅觉和听觉，而对于触觉，说到底，我们始终在与这个长方形盒子接触，但是无法通过对设计内物体的真实触摸而得到感觉，实际伸出手探寻或步行而感受到距离等，去比较大小、距离等进行认知。因为这个客观存在，也更加需要我们视觉设计师运用视觉原理与技法让用户更容易与机器进行交互。因为这样的认识， 我思考了以下这些可能性：

一. 蓬佐错觉-Line

蓬佐错觉是有关长短的视错觉。自从意大利心理学家马里奥·蓬佐(Mario Ponzo,1882~1960)发表了相关论文后，这一视错觉便被称为蓬佐错觉，但在这之前，它就早已被人们所熟知。

上图上下并列的两条横线，上面的看起来比下面的长。有一种观点认为这是因为横线外侧的斜线使大脑觉得有纵深感，认为上面的线更远一些。长度相同的线段，位于远处的应该更长一些，因此上面的横线会让人觉得比下面的短。

这一视错觉在UI运用上，第一个让我想到的就是Input、Cell或段落间的分割线。各App的长短不同，大多数App都按照iOS或Android Guideline，在各控件左右留P的距离。也有一些不走寻常路的App。

△ 1.摄影图片分享App－iOS系统；2.回家吃饭－iOS系统；3.记账软件－Android系统

△ 1.日志软件－Android系统；2、3.Uber-iOS系统

图1截取iOS与Android系统上一些App，设计师使用非常规P距离线。图2截取了各平台App左右不留间距的线。从这两张图我们可以看到使用各种长短线的都有，并没有统一标准，最主要是你想要表达什么？在这里蓬佐错觉是否能帮助到你的UI表达。

手机屏幕的边界就如蓬佐错觉中外侧斜线，分割线与边界的距离就能让人对间隔中左右信息产生或长或短的感受，易读性也成为考量的一点。在App设计中，全局规范考虑是非常重要的，满足了单个页面的视觉需要是远远不够的。前端开发害怕的是没有逻辑规则的不同，只要定义好功能规范，即使在不同界面使用不同线长短也不是大问题。

简言之，在定义Line长短时，我们可以更多思考为什么要留边距、留多少合适、为什么确定这样的长短、是否有逻辑可循、考虑过全局性了吗、是否与品牌相合、是否能传达出视觉故事等等。

二. 艾宾浩斯错觉-Space

赫尔曼·艾宾浩斯（Hermann Ebbinghaus）是著名的研究人类记忆的心理学家，出生于德国，任职波兰布雷斯劳大学教授。他主要研究人类如何进行持续性记忆的（题外话：艾宾浩斯记忆曲线非常有名）。上图是他发现的视错觉图。位于中间的两个橘黄色的圆大小相同，但是看起来右侧的明显偏大。右侧橘黄色圆的四周是小圆，所以看起来比实际的大，而左侧的橘黄色圆周围是大圆，因此它看起来比实际的要略小。

△ Representations of the (A) Ebbinghaus-Titchener size-contrast illusion and (B) Delboeuf illusion.

艾宾浩斯错觉在实际应用中非常广泛，利用我们身边的东西，进行排列组合，就可以确认发现视错觉。艾宾浩斯错觉加上德勃夫错觉（Joseph Delboeuf illusion）和万辛克（Dr.Brian Wansink）、薛尔特·梵·依特森博士（Dr.Koert van Ittersum）的研究证实，人们的进食量会被盘子的大小与颜色所影响，也就是说，我们会被这些视错觉而影响真实行为。

△ Desserts served on different coloured plates at the Institut Paul Bocuse Research Centre in the study by Piqueras-Fiszman

△ The strawberry-flavoured mousse served from square, round and triangular plates in the study by Piqueras-Fiszman

△ The balanced and unbalanced plate arrangements utilized by Zellner et al. 64. In the coloured presentations, the lines of tahini were green and the dots were red.

在食物与餐具的关系中，已经被证实的结果能否在我们UI界面中运用呢？

上图是根据Google color tool搭配出的两组配色，左右图中空间格局完全相同，但运用不同深浅，色相会给人有左边空间更狭窄，而右边更宽阔的感受。

左右图中的原点大小其实是完全一致，但在左图中感觉较小，而右图较大。艾宾浩斯错觉与德勃夫错觉能在界面空间上起到明显作用，我们可以遵循这个理论工具为我们的设计服务，更好的表达功能重点，在空间中体现结构关系。

三.卡尼莎三角–Iconography & Texture

盖塔诺·卡尼莎（Gaetano Kanizsa,1913~1993）是意大利心理学家。他在意大利的里雅斯特建立了「心理学研究所」，为意大利心理学研究做出了巨大贡献。

在卡尼莎发现的视错觉中，最有名的是发表于1955年大家所熟知的下面的「卡尼莎三角」。这个视错觉表明我们的大脑把实际上不存在的三角形轮廓线画了出来。我们把根本不存在的轮廓线称为「主观轮廓」。

上图可以看到，在图形的中心有一个实际上并不存在的白色三角形。这是因为大脑在观察的时候自发将线段连接起来形成了完整的图形，而且这个视错觉在各种类似图形上都成立。

卡尼莎不仅作为心理学家取得了巨大的成就，他也是一位活跃的画家。在她的绘画中也不乏利用视觉错创作的作品。

△ Gaetano Kanizsa,[Omenone] 1977- olio su tela. cm50x70

△ Gaetano Kanizsa,[Uovo] 1975- olio su tela. cm50x70

卡尼莎错觉其实可以在UI的Graphic中运用，当然，每个设计师都要评估这个工具是否与公司品牌与视觉语言相和。

在市面上暂未看到完全运用卡尼莎错觉的icon作品，但我们时常看到未连接完成的icon设计，但这些未连接完全的icon并不会造成我们认知上困难，这是因为大脑帮助我们自动补全。

而说到材质，我们不得不提到Google推出Material Design（之后简称为MD）后，MD在Graphic明暗交界处使用了颗粒状来表达材质，这是MD纸质表达的延续。

在Graphic中，大家也慢慢开始沿用MD的材质表达，之前某厂App升级也在Graphic的材质上做了更加大颗粒全图片材质表达。

从图形、颜色、材质本身来说没有任何问题，在手机上显示也是挺漂亮，但这个颗粒感材质是如何与全局视觉体系联系的？在仔细阅读了他们设计概念／思路中视觉打法这一段，并没有找到答案。作为同行，也没能在产品中看出些材质统一性的端倪来，现在看只是为了做材质而做材质，在整体材质上并没有贯通。

提出卡尼莎错觉可以尝试运用在icon或graphic设计中，可以更开阔思维，多做尝试，小小图片也有大大世界。

四. 冯·贝措尔德效应–Color

在太阳照射的光波中，可见光是非常狭小的，我们只能看到区间在400-700nm的波长。

在了解色彩视错觉前，我们需要知道什么是色彩。在学习什么是色彩时，有一个理论让我非常诧异——色彩是大脑的感觉。感觉？什么！我看到的花花世界都是感觉？

接着，我来转述一下为什么说色彩是大脑的感觉。光照射到苹果上，而苹果表面只反射特定波长的光，其他光会被吸收，所反射的特定波长的红光被人收入眼帘，那么感觉就是红色。

现代科学表明，由于不同对象反射光的波长不一样，人类才能感受到各种各样的色彩。而且，映入眼帘的光北视网膜细胞转换成信号，通过神经传达给大脑，至此才第一次有「是红色」的感觉。但是，有时候对相同波长的光也会有不同的色彩感觉，那就是视错觉。

也就是说，在日常生活中，如衣服上看到的色彩，并非色彩本身，而是吸收波长后再反射的色彩，染料本身的颜色未必是最终我们看到的颜色，其中的原理如同上面那个苹果的光学反应。

上图看到1.那里有一条明显的竖着的亮线，2.那里有一条明显的竖着的暗线。但是将线与其他部分相比较，并非更亮或更暗一点。从1.到2.只是慢慢变暗。这种视错觉被称为马赫带，是大脑为了清除区分明暗分界线而产生的。

了解了我们大脑是如何认知色彩后，我们再来看一下什么是色彩同化？

上图中左右两边颜色完全一致，但中间颜色被周遭颜色影响。

当一种颜色被另一种颜色包围，或者另一种颜色作为背景的时候，那么这种颜色就会看起来很接近周围的颜色或者背景颜色，我们把这一现象称之为色彩同化。它属于一种色彩视错觉，又被称作冯·贝措尔德（Wilhelm von Bezold，德国气象学家，1837-1907）效应。

通常我们定义App色彩调性有几种常用类型：无色彩、单一主色、主次色彩搭配。色彩视错觉的色彩搭配让我想到了MD的色彩Guild-line，在不同色彩环境中无论哪种类型，都能通过周围色彩来影响主色，并让周围色帮助你表达App的情感。

所有的理论工具都是服务与你想要表达的中心思想，无论这个思想是为了推品牌，还是只想把单个页面功能做好，我们需要记得要在视觉各细节中始终让其贯彻。在此，我只是抛一些砖，一切都只是个开始，希望能帮助到大家在各自的产品上有更多的尝试。互联网视觉设计才刚刚开始，需要我们一起努力！

最后附上彩蛋，让我们一同看看在未意识到有视错觉这一概念的公元前，人们创造出的艺术作品。

在意大利首都罗马的人民广场（Piazza del Popolo）上有两座建于17世纪的双子教堂。右侧的教堂面积大于左侧的，但右侧的教堂屋顶扁为椭圆形，因此看起来保持了平衡。

生于16世纪佛兰德地区（现跨越比利时、荷兰、法国的一个区域）的画家彼得·保罗·鲁本斯（Peter Paul Rubens）的《耶稣下十字架》。右侧穿黑色衣服的人物所登的梯子，在人物的上方和下方错开了（如图）。有一种观点认为，鲁本斯注意到如果画成直线的话就会出现波跟多夫错觉（大家自己去查吧～），梯子会看起来上下错开，因此才特意将梯子上下错开画。这个观点由加拿大温尼伯大学的陶珀（D.R.Topper）发表于1984年。

红色线是下面的梯子向上的竖直延伸。原本应该按照这个线画出来的，但实际上梯子画在蓝色线位置。

欢迎关注点融设计中心DDC微信公众号：「ID：DR_DDC」

反馈就是用户做了某项操作之后，应用系统给用户的一个响应。这个响应根据场景的不同会有不同的响应形式和不同作用。

为什么反馈设计是用户体验重要的一环？

在人机交互的过程中，用户希望看到每一步都清晰，及时的显示，用户希望了解每一步的后果以及用户最关心的问题是什么。一方面，PC端和移动端产品需要保证产品有积极，及时的反馈响应以确保用户知道自己所处的状态，否则会让用户觉得反应迟钝；另一方面，我们也要避免过度的信息反馈，尤其注意不要反馈错误信息，错误的信息对用户造成的影响是巨大的。

产品的反馈直观的表现为界面的变化（少数为声音和震动），通过这种变化使的用户能够更加友好高效地与产品进行交互，更加专心地投入到任务流程当中去。

举个栗子：当用户执行完一步操作后，系统没有及时甚至没有给出相应的反馈提示，就会给用户带来疑惑（实现模型与心理模型冲突），让用户不能确定自己的操作是否被执行、执行是否成功、执行整体进度、或者是执行后会产生怎么样的影响、能在哪里查询到结果以及执行后是否可以被撤销等等。而这其中的任何一个环节都有可能影响到用户对当前任务的理解以是否执行下一步操作，从而影响到产品的用户体验。

反馈的设计应该满足以下四个原则：

• 反馈通过直观的体现，可以帮助用户理解微交互的规则，最大可能地降低用户的学习成本。
• 别让反馈给用户造成压力，通过最少的反馈传达同样的信息。
• 反馈应该由需求驱动，然后在恰当的场景下和时间下让用户知道他需要知道的事情。
• 反馈的速度尽可能的快，反馈过慢会给用户感觉产品的性能差。

对于用户而言，反馈设计的目的主要告诉用户以下几点：

• 告诉用户发什么了什么？
• 用户刚刚做了什么事？
• 哪些过程已经开始了？
• 哪些过程已经结束了？
• 哪些过程正在进行中？
• 用户不能做什么？
• 用户刚刚操作的结果是什么？

在设计过程中，涉及到反馈的情况一般分为五种类型：

1.结果反馈

告知用户的操作结果。例如操作成功或者操作失败、对操作后的一种确认。

a.以toast形式给用户反馈。例如:微信转发他人信息，出现toast,提示用户已经发送成功。

b.以浮层动画的形式给用户反馈。例如微信输入语音时，出现浮层动画提示用户的语音输入是有效的。

2.状态反馈

操作前后展示效果不一样。

当用户操作后，界面操作前的状态和操作后的状态不一致。通过这个不一致，给用户反馈我的操作得到了提交。

3.过渡反馈

有些时候程序确实不够快，缓慢的加载速度和延迟问题，这时候通过常见的过渡组件给用户反馈,过渡反馈的目的在于通过向用户反馈当前的响应进度和合理的时间消耗来让用户在等待过程中放松下来。

a.以进度指示器给用户反馈当前状态。例如浏览器在点击搜索后，页面加载的进程反馈。

b.以系统/自定义的循环动画，例如iOS的菊花Loading 和安卓的圆形Loading 。

例如：微博问答，点击立即支付然后出现的过渡动画。

例如：YouTube页面加载过渡的圆形Loading 。

4.操作反馈

对下一步操作的指引，用户点击一个操作就出现新的操作组件以此给用户的反馈。

当用户进行一个操作后，出现反馈，这个反馈通常是通过浮层弹框、调起键盘、进入下一个界面等等形式表现。

例如：iOS原生邮件，点击回复/转发出现底部浮层。

5.声音和震动的反馈

声音和震动也是反馈的一种的表现形式，通过用户的操作加以声音和震动的引导，给用户很强的心理暗示。

例如QQ邮箱，发送过程和成功后都有声音提示。这是一个很典型的通过声音反馈的例子。

如何判断你的反馈设计是有效的，非过度的反馈

上面介绍的反馈的各种类型。但是很多情况设计师们过度使用反馈。常见的情况是过度使用Toast。

例如猫眼：点击已想看爱心变灰，同时出现Toast提示。这样就存在过度的反馈。反观Instagram点击取消点赞，就没有出现Toast提示。

为什么我说猫眼的反馈过度呢？因为用户点击操作时，爱心状态已经变了，那么这个元素的变化已经暗示用户，该App进行了反馈，没必要在出现Toast提示。

如何判断你的涉及反馈是否过度？

在设计反馈时，如果已经有一组元素的变化足以暗示用户当前状态得到了反馈，那么没必要再增加多余的元素进行反馈提示（除非有特别的目的）。这样会使得用户的心理负担变重，一个反馈可能不足以影响用户体验，如果整个App都出现这种情况，那将是一场灾难。

欢迎关注作者的微信公众号：「UEDC」

阅读这篇文章你可以得到哪些？

• iOS和Material Design(简称MD)元件库下载。
• 通过源文件学习iOS和MD两大设计规范的组件控件体系。
• 如何通过Axure元件库提高效率。

作者制作的元件库基本包含了两个系统的所有常用组件控件，适用于移动端绝大部分设计场景。同时所有元件都可再修改，方便大家使用。

下载地址：https://pan.baidu.com/s/1mhPlNQw

一. 统一可复用元件库价值

统一产品的用户体验：涉及到多个交互设计师/产品经理协同时，如果各个交互设计师/PM没有使用统一的元件时，会出现同一种类型不同的组件设计。视觉设计师最终没有强行统一，那么实现稿就会出现各式各样相似的组件。

提升工作效率：有了统一的axure元件库，交互设计师/PM可以快速根据元件库搭建界面，从整体的产品设计到开发流程环节提升效率，避免重复性工作。

提升设计综合能力：由于减少了做组件重复性劳动，交互设计师/PM 可以将更多时间和精力放在讨论业务、设计方法、设计思维、定义产品等综合能力方面。从而驱动业务产品创新。

二. 如何制作统一可复用的Axure元件库

打开Axure软件，在元件库面板中，点击快捷菜单按钮，选择「创建元件库」，如下图所示：

选择了「创建元件库」后，就会弹出一个界面，你需要选择一下元件库的保存路径。注意元件库的格式为：rplib。

在元件库创建页面中，操作跟平时使用Axure没什么区别，一个页面就是一种类型的元件，不要把所有元件都创建在一个页面里。

制作一套完整的MD和iOS元件库，需要熟知MD和iOS设计规范，然后综合我们的设计经验来制作一套全面和常用的元件。以下为元件库的部分内容：

MD的菜单(Menu)

MD的底部动作条（bottom sheets）和iOS的操作列表（action sheet）

iOS的Toast和MD的Snackbar

iOS的搜索栏和MD的搜索栏

iOS的警告对话框(Alert)和MD的对话框(Dialog）

MD的导航栏和iOS的导航栏

概要

基于微信小程序轻快的特点，我们拟定了小程序界面设计指南和建议。 设计指南建立在充分尊重用户知情权与操作权的基础之上。旨在微信生态体系内，建立友好、高效、一致的用户体验，同时最大程度适应和支持不同需求，实现用户与小程序服务方的共赢。

一.友好礼貌

为了避免用户在微信中使用小程序服务时，注意力被周围复杂环境干扰，小程序在设计时应该注意减少无关的设计元素对用户目标的干扰，礼貌地向用户展示程序提供的服务，友好地引导用户进行操作。

1.重点突出 

每个页面都应有明确的重点，以便于用户每进入一个新页面的时候都能快速地理解页面内容，在确定了重点的前提下，应尽量避免页面上出现其他干扰项影响用户的决策和操作。

反例示意

此页面的主题是查询，却添加了诸多与查询不相关的业务入口，与用户的预期不符，易造成用户的迷失。

纠正示意

去掉任何与用户目标不相关的内容，明确页面主题，在技术和页面控件允许的前提下提供有助于用户目标的帮助内容，比如最近搜索词，常用搜索词等。

反例示意

操作没有主次，让用户无从选择

纠正示意

首先要避免并列过多操作让用户选择，在不得不并列多个操作时，需区分操作主次，减轻用户的选择难度。

2.流程明确

为了让用户顺畅地使用页面，在用户进行某一个操作流程时，应避免出现用户目标流程之外的内容而打断用户。

反例示意

用户本打算进行搜索，在进入页面时却被突如其来的抽奖弹窗所打断；对于抽奖没有兴趣的用户是非常不友好的干扰； 而即便有部分用户确实被“诱人”的抽奖活动所吸引，离开主流程去抽奖之后可能就遗忘了原本的目标，进而失去了对产品真正价值的利用和认识。

二.清晰明确

一旦用户进入我们的小程序页面，我们就有责任和义务清晰明确地告知用户身在何处、又可以往何处去，确保用户在页面中游刃有余地穿梭而不迷路，这样才能为用户提供安全的愉悦的使用体验。

1.导航明确，来去自如

导航是确保用户在网页中浏览跳转时不迷路的最关键因素。导航需要告诉用户，我在哪，我可以去哪，如何回去等问题。首先在微信系统内的所有小程序的全部页面，均会自带微信提供的导航栏，统一解决我在哪，如何回去的问题。在微信层级导航保持体验一致，有助于用户在微信内形成统一的体验和交互认知，无需在各小程序和微信切换中新增学习成本或改变使用习惯。

微信导航栏

微信导航栏，直接继承于客户端，除导航栏颜色之外，开发者无需亦不可对其中的内容进行自定义。但开发者需要规定小程序各个页面的跳转关系，让导航系统能够以合理的方式工作。

微信导航栏分为导航区域、标题区域以及操作区域。其中导航区控制程序页面进程。目前导航栏分深浅两种基本配色。

导航区（iOS）

微信进入小程序的第一个页面，导航区通常只有一个操作——“返回”，即返回进入小程序前的微信页面。 进入小程序后的次级页面，导航区的操作为——“返回” 和“关闭”。 “返回”，即返回上一级小程序界面或微信界面。“关闭”，即在当前界面直接退出小程序，回到进入小程序前的微信页面。

导航区（Android）

导航区仅存在唯一操作——直接退出小程序，回到进入小程序前的微信或系统桌面，安卓手机自带的硬件返回键执行返回上一级页面的操作。

安卓导航存在一类特殊情况：当用户通过操作区的菜单将小程序添加至安卓桌面，并从安卓桌面打开小程序时，小程序的首页，不展示导航按钮。仅展示小程序标题和操作区。小程序次级页面，导航区只有返回上一级页面的操作，而点击安卓手机自带的硬件返回键也起到相同作用。

微信导航栏自定义颜色规则（iOS和Android）

小程序导航栏支持基本的背景颜色自定义功能，选择的颜色需要在满足可用性前提下，和谐搭配微信提供的两套主导航栏图标。建议参考以下选色效果：

选色方案示例

页面内导航

开发者可根据自身功能设计需要在页面内添加自有导航。并保持不同页面间导航一致。但是受限于手机屏幕尺寸的限制，小程序页面的导航应尽量简单，若仅为一般线性浏览的页面建议仅使用微信导航栏即可。

开发者可选择小程序页面添加标签分页（Tab）导航。标签分页栏可固定在页面顶部或者底部，便于用户在不同的分页间做切换。标签数量不得少于2个，最多不得超过5个，为确保点击区域，建议标签数量不超过4项。一个页面也不应出现一组以上的标签分页栏。

其中小程序首页可选择微信提供的原生底部标签分页样式，该样式仅供小程序首页使用。开发时可自定义图标样式、标签文案以及文案颜色等，具体设置项可参考开发文档。

顶部标签分页栏颜色可自定义。在自定义颜色选择中，务必注意保持分页栏标签的可用性、可视性和可操作性。

2.减少等待，反馈及时

页面的过长时间的等待会引起用户的不良情绪，使用微信小程序项目提供的技术已能很大程度缩短等待时间。即便如此，当不可避免的出现了加载和等待的时候，需要予以及时的反馈以舒缓用户等待的不良情绪。

启动页加载

小程序启动页是小程序在微信内容一定程度上展现品牌特征的页面之一。本页面将突出展示小程序品牌特征和加载状态。启动页除品牌标志（Logo）展示外，页面上的其他所有元素如加载进度指示，均由微信统一提供且不能更改，无需开发者开发。

页面下拉刷新加载

在微信小程序内，微信提供标准的页面下拉刷新加载能力和样式。

开发者可自定义需要通过下拉交互完成刷新的页面，此类交互微信将提供标准能力和样式。在样式上，刷新图标与下拉标示配色已捆绑，分为深浅两套方案，开发者在使用时，应注意头部文字、下拉标识与刷新图标的和谐统一。当用户在该类页面做出下拉交互时，出现微信小程序页面标准加载动画。开发者无需自行开发样式

页面加载反馈

开发者可在小程序里自定义页面内容的加载样式。建议不管是使用在局部还是全局加载，自定义加载样式都应该尽可能简洁，并使用简单动画告知用户加载过程。 开发者也可以使用微信提供的，统一的页面加载样式，如图中例所示。

模态加载

模态的加载样式将覆盖整个页面的，由于无法明确告知具体加载的位置或内容将可能引起用户的焦虑感，因此应谨慎使用。除了在某些全局性操作下不要使用模态的加载。

局部加载反馈

即只在触发加载的页面局部进行反馈，这样的反馈机制更加有针对性，页面改动小，是微信推荐的反馈方式。例如：

加载反馈注意事项

• 若载入时间较长,应提供取消操作,并使用进度条显示载入的进度。
• 载入过程中,应保持动画效果 ; 无动画效果的加载很容易让人产生该界面已经卡死的错觉。
• 不要在同一个页面同时使用超过1个加载动画。

结果反馈

除了在用户等待的过程中需予以及时反馈外，对操作的结果也需要予以明确反馈。根据实际情况，可选择不同的结果反馈样式。对于页面局部的操作，可在操作区域予以直接反馈，对于页面级操作结果，可使用弹出式提示（Toast）、模态对话框或结果页面展示。

页面局部操作结果反馈

对于页面局部的操作，可在操作区域予以直接反馈，例如点击多选控件前后如下图。对于常用控件，微信设计中心将提供控件库，其中的控件将提供完整操作反馈。

页面全局操作结果——弹出式提示（Toast）

弹出式提示（Toast）适用于轻量级的成功提示，1.5秒后自动消失，并不打断流程，对用户影响较小，适用于不需要强调的操作提醒，例如成功提示。特别注意该形式不适用于错误提示，因为错误提示需明确告知用户，因而不适合使用一闪而过的弹出式提示。

页面全局操作结果——模态对话框

对于需要用户明确知晓的操作结果状态可通过模态对话框来提示，并可附带下一步操作指引。

页面全局操作结果—结果页

对于操作结果已经是当前流程的终结的情况，可使用操作结果页来反馈。这种方式最为强烈和明确的告知用户操作已经完成，并可根据实际情况给出下一步操作的指引。

3.异常可控，有路可退

在设计任何的任务和流程时，异常状态和流程往往容易被忽略，而这些异常场景往往是用户最为沮丧和需要帮助的时候，因此需要格外注意异常状态的设计，在出现异常时予以用户必要的状态提示，并告知解决方案，使其有路可退。

要杜绝异常状态下，用户莫名其妙又无处可去，卡在某一个页面的情况。2.2中所提到的弹窗和结果页面都可作为异常状态的提醒方式。除此之外，在表单页面中尤其是表单项较多的页面中，还应明确指出出错项目，以便用户修改。

异常状态——表单出错

表单报错，在表单顶部告知错误原因，并标识出错误字段提示用户修改

三.便捷优雅

从PC时代的物理键盘鼠标到移动端时代手指，虽然输入设备极大精简，但是手指操作的准确性却大大不如键盘鼠标精确。为了适应这个变化，需要开发者在设计过程中充分利用手机特性，让用户便捷优雅的操控界面。

1.减少输入

由于手机键盘区域小且密集，输入困难的同时还易引起输入错误，因此在设计小程序页面时因尽量减少用户输入，利用现有接口或其他一些易于操作的选择控件来改善用户输入的体验。

例如下图中，在添加银行卡时，采用摄像头识别接口来帮助用户输入。除此之外微信团队还对外开放例如地理位置接口等多种微信小程序接口 ，充分利用这些接口将大大提高用户输入的效率和准确性，进而优化体验。

除了利用接口外，在不得不让用户进行手动输入时，应尽量让用户做选择而不是键盘输入。一方面，回忆易于记忆，让用户在有限的选项中做选择通常来说是容易于完全靠记忆输入；另一方面，仍然是考虑到手机键盘密集的单键输入极易造成输入错误。 例如图中，在用户搜索时提供搜索历史快捷选项将帮助用户快速进行搜索，而减少或避免不必要是键盘输入。

2.避免误操作

因为在手机上我们通过手指触摸屏幕来操控界面，手指的点击精确度远不如鼠标，因此在设计页面上需点击的控件时，需要充分考虑到其热区面积，避免由于可点击区域过小或过于密集而造成误操作。当简单的将原本在电脑屏幕上使用的界面不做任何适配直接移植到手机上时，往往就容易出现这样的问题。由于手机屏幕分辨率各不相同，因此最适宜点击像素尺寸也不完全一致，但换算成物理尺寸后大致是在7mm-9mm之间。在微信提供的标准组件库中，各种控件元素均已考虑到了页面点击效果以及不同屏幕的适配，因此再次推荐使用或模仿标准控件尺寸进行设计。

3.利用接口提升性能

微信设计中心已推出了一套网页标准控件库，包括sketch设计控件库和Photoshop设计控件库，后续还将完善小程序组件，这些控件都已充分考虑了移动端页面的特点，能够保证其在移动端页面上的可用性和操作性能；同时微信开发团队也在不断完善和扩充微信小程序接口，并提供微信公共库，利用这些资源不但能够为用户提供更加快捷的服务，而且对页面性能的提高有极大作用，无形之中提升了用户体验。

四.统一稳定

除了以上所提到的种种原则，建议接入微信的小程序还应该时刻注意不同页面间的统一性和延续性，在不同的页面尽量使用一致的控件和交互方式。

统一的页面体验和有延续性的界面元素都将帮助用最少的学习成本达成使用目标，减轻页面跳动所造成的不适感。正因如此，小程序可根据需要使用微信提供的标准控件，以达到统一稳定的目的。

五.视觉规范

为方便设计师进行设计，微信提供一套可供Web设计和小程序使用的基础控件库；同时提供方便开发者调用的资源。

1.字体规范

微信内字体的使用与所运行的系统字体保持一致，常用字号为20, 18, 17, 16,14 13, 11(pt)，使用场景具体如下：

字体颜色

主内容 Black 黑色，次要内容 Grey 灰色；时间戳与表单缺省值 Light 灰色；大段的说明内容而且属于主要内容用 Semi 黑；

蓝色为链接用色，绿色为完成字样色，红色为出错用色 Press与 Disable状态分别降低透明度为20%与10%；

2.列表视觉规范 

3.表单输入视觉规范

4.按钮使用原则

5.图标使用原则

6.资源下载

为方便设计师进行设计，微信提供一套可供Web设计和小程序使用的基础控件库；同时提供方便开发者调用的资源。

预览地址：https://weui.io

PSD+Sketch源文件下载地址： https://pan.baidu.com/s/1kV5k4eV  密码: ewsk

来源：UI妹儿（ID：UIfaner）
作者：U妹（本文已经获得转载授权，转载请联系原作者）

欢迎关注作者公众号：

上期回顾：《大产品小细节！5分钟了解格式塔原则》

一. 概述

首先来看看费茨定律公式：

看起来很复杂吧， 但实际上并不难，我用一张图给大家解释下费茨定律是什么。当用户需要拖动黄色点到目标区块中时：

费茨定律中的 D 就是从开始点到目标中心的距离，而 W 则是目标的宽度大小。根据公式可以看到，A和 b 都是常量，那么 MT （黄点从左移到目标中心所需的时间）的大小取决于 D 和 W 的值：

• 当 D 一定时，W 越小，MT 越大；W 越大，MT 越小。
• 当 W 一定时，D 越小，MT 越小；D 越大，MT 越大。

解释一下就是：

当距离一定时，目标越小，所花费的时间越长；目标越大，所花费的时间越短。（小而远的目标区域意味着用户需要将黄点移动较长距离，并且为了能对准目标还需要做一系列的微调，因为目标比较小嘛，所以耗费的时间自然就长了。）