缺省页指页面的信息内容为空或信息响应异常的状态；设计缺省状态的作用不仅是引导用户在异常边界状态的操作提示，同时也是安抚用户体验情绪的重要场景；更重要的是为边界场景营造出良好用户体验。通过分析缺省状态产生的原理，从而更为准确地把握交互缺省页的设计原则。
谈到缺省页面可能是设计师最容易忽略输出的范围，可能直到对接的开发同学提出来，「这个页面，如果没有数据的时候，该怎么显示啊？」。为了更好地把控设计缺省页交互状态，首先要了解缺省页出现的原理。App 页面内容（包括图片、文字、数据字段等等）都是请求服务器数据，顺利返回后，正常显示到客户端页面。在了解清楚基础实现逻辑后，就可以开始梳理、整理缺省状态的设计思路。
△ 图1 缺省状态的场景梳理图
缺省状态包括：系统层、信息层、空白层。
系统层：指当用户请求服务器时，返回提示请求提交失败，并检测到失败原因时呈现的页面；例如：加载失败、服务器异常、无网络等；页面一般会有重新请求的快捷按钮。文案上可做失败原因的细分描述，也可节约成本使用网络异常的统一文案。
信息层：请求服务器数据成功，但返回的数据异常的页面；例如：内容已删除、内容已下架、内容不存在；文案内容以提示数据类型的缺失为主。显示形式除了常有的全屏缺省图，还会出现在数据列表下单一内容缺失的缺省模块化的情况，例如：单一作品在书架上显示已下架。
空白层：请求服务器数据成功，但显示无数据；内容页在无数据时需要缺省状态进行表达；例如：页面空数据、搜索无结果等。空白页面属于正常网络显示场景，所以一般会在缺省页附带有相似属性模块的用户引导，争取用户重复消费的目标，满足用户的操作的诉求。
最后根据每个不同的缺省状态，梳理产品相对应的场景。逐一根据场景特点来设计页面内容。那缺省页的设计有哪些表现形式呢？
没有用心设计的缺省页无法给用户带来良好用户体验，并可能给用户带来困扰，如下图：某小众直播平台的拉新邀请页面，无邀请记录状态下没有任何有效反馈信息，用户不能明确得知到底是网络问题还是账号同步出错，亦或者是没有一次邀请。正确的缺省页设计内容理应明确表达出符合用户心理预期的视觉场景表达（图形）；和使用易理解和语法恰当地表达当前的异常状态（标题）甚至于引导用户解决问题的文案描述。
△ 图5 缺省页的错误示范
1. 视觉图案+文案
此类缺省设计形式一般应用于表达系统性无响应或初始空白态的缺省场景。视觉图案一般使用 app 吉祥物或主色调延展出的 icon 或插画来表示缺省状态；文字：通常为「标题」或「标题+描述」结构；标题通常是表达出现缺省的原因；描述文案则说明结束缺省状态的解决办法，如「请检查网络是否顺畅」 等等。
2. 视觉图案+文案+引导
此类缺省设计形式一般运用于需要用户引导操作来达到业务目标的缺省场景。在视觉图案+文案的基础上加入引导模块，主要作用于避免用户在数据边界的状态下，会因为无法达到操作目的而提高的跳出率。引导模块的内容包括：相似属性内容，相似行为目标按钮或解决缺省状态操作按钮，加入引导，用户进行某项行为或者感知某些信息，对于功能的教学和使用频率的提升有着重要作用。引导模块的形式也是日新月异，逐渐变成新用户业务引导的作用，不仅限于页面平铺，也可以做成固定气泡微动效，例如：抖音的发布缺省页。
缺省页除了常规的提示型设计方法，还有许多其他的设计技巧，帮助用户在遇到困难，更好地安抚用户的情绪。这些设计技巧有些是替代原来的缺省内容，让用户有更多的消费空间与深度。有些是拓展缺省状态的补充内容，让用户不容易跳出页面，增加用户的消费时长。具体如下：
1. 使用推荐内容
缺省状态中的空白层非常影响边界情况的用户体验，提出一种假设，是否可以刻意推荐相同属性的内容呢？这样的界面既不会显得苍白无力又可以留住用户的注意力。相似性的内容也可以解决用户目标的迫切性。所以说，这种方法非常适合内容型产品中使用。例如：新用户在打开电商产品的购物车时候，理应是空白无消费行为的操作记录。那么平台方通过用户画像与热门排行算法推荐了一个商品流。这样可以解决用户无目标性挑选的诉求，增加消费时长。至于产品如果确定用户画像的推荐算法，可以通过获取第三方登录的个人基本数据之后，才给我推荐了数据库内相对应标签的热门商品，这样推荐的精准度也会高些。
2. 使用缓存
是否使用缓存内容代替缺省状态？根据产品特性来判断，工具类、金融类等同类型产品不适合使用缓存；因为用户交互操作的数据必须保持实时性与真实性。而内容型、电商类等类型产品适合使用缓存来代替缺省状态；理由：用户消费内容的转化路径是先消费后转化的行为特点，不存在系统操作门槛，且缓存内容可以代替产品的缺省状态，安抚用户操作失败所带来跳出率过高的风险。
3. 情感化表达
当缺省页给到用户时，通常省时省力的做法就是老老实实告诉用户当前的状态，最多配上一个具有通识性的灰色 icon。但是，秉持着以用户体验为己任的时代，我们其实可以把缺省内容表达得更加生动形象一些。在这里会加入一些情感化的表达，而不是仅仅只是做到准确的目标而已，比如加上活泼的插图故事，或者把文案写得更加拟人化、戏剧化一些。这些配图在让用户明白当前的状态的同时，往往也能引发用户会心一笑，从而弥补空白页面带来的失落感甚至可以带给用户一些正面的情感。如下图：
4. 提供新任务
通常缺省页的引导模块都着眼于解决当前任务。如果碰到没有解决方案的情况（例如：404，服务器崩溃等）可以提供给用户具有情感共情的新任务，让他们暂时忘记无法达到目标的挫败感，又有体谅的情怀。帮助建立正向积极的品牌价值观。例如：访问腾讯网时访问失败的时候，网页除了显示 404 状态之外，还会显示腾讯「宝贝回家」的公益寻人计划。将缺省页与公益内容相结合，不仅改善到用户缺省状态。也贯彻腾讯价值观「用户为本，科技向善」的输出。一个好的缺省页也可以承担社会责任，让公益传播到每个角落。
△ 图10 腾讯网404公益任务缺省页
结语：作为设计师有时会听到需求方表述「这种极少出现的情况，我们可以暂且不管它。」但是细节见真章，所有优秀的体验设计都必须照顾到方方面面的缺省情况。让每个用户的流量价值发挥到最大，产生相互信任的良好的品牌关系。这样的平台生态是良性的，这样的产品会更有流量转化的商业化价值。
文章来源：优设 作者：腾讯动漫TCD
通过一些案例进行比较与实验，探索如何将 UI 深色模式设计得更好。
iOS 作为 UI/UE 设计的风向标，一直是行业的引领者，不管你愿不愿意承不承认，他的每一次更新变化总能带动 UI 设计行业的一些大大小小的变革，并且产生更多的追随者，比如当年的 iOS7 开始的扁平化设计风格，对后续设计风格的影响直到现在已经 7 年了。
在最近半年，iOS 在 UI 设计风格上最大的变革莫过于 DarkMode（深色模式），在 DarkMode 之前，我们熟悉的 UI 界面往往都是浅白色界面为主，而从 iOS13 开始正式使用了 DarkMode，界面突然可以变深色了，苹果官方说这样设计可以让眼睛更舒服地长时间阅读，为革命保护视力，而且更加省电增长续航，具体结果我们不得而知，需要科学家们去验证了，但是对于我们设计师来说带来的挑战就是要「黑白无常」了。
其实 DarkMode 从测试版算起已经差不多推出了有半年的时间了，一些知名的 APP 产品早已经有了自己的兼容方案，同时 iOS 原生界面也给了我们很多最佳实践案例，按道理大家对于 DarkMode 的设计方式方法应该已经掌握了差不多了，但直到这几天微信正式推出了自己的 DarkMode 兼容方案，才发现对 DarkMode 的探索还需要设计师们多多努力。谨以此文表达一下自己的观点，不妥之处敬请海涵。
列表视图（TableView）是 iOS 中最常见的界面组件，一般常见于设置与栏目列表页面：
iOS 设置界面的浅色模式和深色模式看起来都非常协调。
下面我们看看微信发现页面，这个页面和 iOS 设置是很相似的。
如果单独看微信发现页面的浅色模式实际效果还是不错的。
但是直接转换到深色模式下就感觉突然差的很多了，甚至可以说是有点难看，这次微信真的做了一次黑天鹅？
到底是什么原因让微信发现页面在深色模式下视觉体验如此之差呢？
我们不妨将两个功能布局都相似的深色进行放在一起进行一下比较：
组成色彩分析：
在色彩这块在这两个页面中微信和 iOS 基本保持一致，四层灰度设计能更好的保持页面整体干净整洁且层次分明，但是在 A 背景色上，微信的背景色选择了黑色偏绿的颜色，应该是微信设计师还是想体现出产品的标志色原色。
文字的颜色也较 iOS 略微深一点，但是在整体上影响并不大。
看来在主要色彩上并没有什么问题，那么为什么微信这个界面与 iOS 界面比起来视觉上要感觉差一些呢？
下面来看一下图标
图标设计分析：
图标上的差别主要在于线宽与外框，微信采用无外框统一线宽的线形图标，iOS 采用的是有外框剪影图标。
我们我们把图标进行互换会怎么样呢？
观察到了吗？别看错了！
是的，我故意把位置做了对调，左边是 iOS，右边是微信。替换图标后的微信明显加分不少，整个界面都整齐多了，而 iOS 换了图标后明显变得不够整齐了，潦草很多。
那么结论是微信的无框线性图标在深色模式下兼容有问题？是的，的确如此。但是等一下，还有一些细节你注意到吗？换了图标的微信界面和之前的 iOS 界面比起来明显还是有点不够整齐，为什么呢 ？
我们回过头来从细节再看一下 iOS 界面。
我们按照这个思路把刚才微信替换图标界面再排序一下！
△ 界面视觉体验明显整齐了很多是不是！
疑问：
为什么细线图标和无框图标会在深色背景表现不够好，而在浅色背景下就没问题呢？
是不是所有的 UI 都会存在这样的问题呢？
我们再来看一些例子：
看来结论是一样的，线性图标在深色背景下的表现都是差强人意，反观带框图标适应性很强，浅色和深色模式下均能良好的适配，我来分析一下原因。
当年伽利略用望远镜往天上看，发现木星比金星大，换成肉眼看后金星则比木星大。他认为是眼睛的某种视觉特性造成了这种现象。
德国物理学家赫尔曼把这种错觉称为辐照错觉，就是说在黑暗背景下，亮度越高的物体看起来面积越大。
再来看一张图片
哪个圆圈看起来更大，显然是黑色背景下的白色圆形，实际上这只是一种错觉，所有圆圈是一样大。
光亮刺激会使得神经元产生非线性放大作用，导致刺激比实物本身看起来更大，白色圆形更亮，所以看起来更大一些。
线性图标是用线条勾画图案达到隐喻效果，一般线粗是 2px~6px 像素。
设计师在设计时都是以最终视觉作为参考，而设计稿本身多是浅色背景，所以在浅色背景的映衬下图标视觉会显得稍大，视觉基本是平衡的，假如设计是 4px 而呈现出的效果其实是 6px 左右。
是不是觉得哪里有点不对了？按照这个逻辑黑色背景下白色线图标不应该是视觉更大、更明显吗？
我们还需要考虑一个因素，那就是色彩，之前的几个界面案例的线性图标都是彩色的，特别是黑色背景下，不同色彩的图标放在一起，会有明显的忽大忽小的感觉，会让界面感觉非常凌乱。
是不是感觉黄色最大，红色的最小？但是其实是一样的，这还是相同形状的，要是图标形状不同感受会更明显。
看一个实际中的例子：
由于都是单色线性图标，在浅色和深色下表现还都不错的，但是单色图标略显界面单调，并不太建议这么设计。
毫无疑问，未来的 UI 场景需要适配多背景色风格，图标除了具备好看隐喻之外，更需要具备抗干扰性。
带框图标是一个不错的解决方法，大胆预测带框图标会将成为未来一段时间图标设计主流！
在这之前我得先提及一本书──《简约至上：交互式设计四策略》。这本书基本算得上是交互设计的入门必读书籍了，非常适合身处项目环节中上游的人员阅读与学习。
作者 Giles Colborne 在书中提出了四个令交互设计成果最大化的简易策略：合理删除、分层组织、适时隐藏和巧妙转移。这四个策略几乎成为我设计与优化每一个页面时的自我指导方针。
我参阅了大量的应用，想总结出它们是如何运用导航栏来给产品赋能的。竟然很巧地发现，再花式的导航栏设计也难逃「四策略」手法。
首先，导航栏作为一个独立控件，它本身就已经是「分层组织」策略的一种表现形式。接下来我们来看看，优秀的产品设计是如何运用另外三种策略来设计好导航栏的。
导航栏不能轻易删除，但凡事没有绝对。什么时候我们可以合理地删除导航栏呢？
Nike Run Club（下文简称NRC）是耐克官方出品的一款跑步记录 APP。既然做产品要站在用户角度出发，那我们就来复原一下主要功能的用户使用场景。
当你的老板要求你一天出 150 个界面设计的时候，你怕了，准备跑路，同时又不想浪费一天中任何一次记录运动的机会。于是你打开 NRC，你的目的很明确：认真地跑路，并记录运动。
点击「开始」按钮，当你一旦开始跑步，手机基本就不再使用了，直到跑步结束。
△ NRC在运动状态下的界面删除了导航栏
在用户记录跑步这样一个单一事件中，NRC 知道你会专注运动，很少存在关注其他功能、浏览其他页面的可能性。于是 NRC 可以很干脆地删掉导航栏，而返回按钮用了界面中的「结束」按钮代替。
滴滴出行在呼叫快车时也做了删除导航栏的处理。用户一旦发单，开始呼叫司机时，呼叫页面内的所有操作都只聚集在界面下方的一个视觉区域内。
△ 滴滴出行在呼叫过程中删除了导航栏
上面两个删除导航栏的示例有什么共通点呢？
第一，用户在当前页面的事件状态明确，不需要导航标题提醒用户当前在什么位置，用户也极少可能在当前页面发生其他事件操作，于是完全可以去除导航标题与内容控件。
第二，虽然删除了返回按钮，但都采用了很典型的「费茨定律」，就算用户误操作，也能便捷地撤销正在发生的事件。反而这比循规蹈矩地运用导航栏来承载返回按钮合理了许多。
△ 费茨定律简易图解
既然导航栏内所有的规范元素都有可取代方案，为什么不删除它呢？正如 Giles Colborne 在书中告诉我们的：大胆地删除，但也不要极端到盲目删除。
隐藏和删除看起来十分相似，但其实不然。我们如何区分这两个技巧呢？
隐藏最常见的情况是，当导航栏的出现会成为打扰用户沉浸体验的障碍时，我们会选择隐藏，例如看视频、浏览图片等显示全屏媒体的场景，有导航栏反而会分散用户的注意力。
△ 显示全屏媒体时需要隐藏导航栏
不知道你有没有发现到一个细节，在大多数情况下，需要沉浸体验的页面不但会隐藏导航栏，同时也会隐藏状态栏，导航栏中载有当前页面的标题、导航按钮和内容控件；状态栏中会载有时间、Wi-Fi 等系统设备信息。
iOS 在人机交互指南中提醒我们，显示全屏媒体时，请考虑暂时隐藏状态栏，但请避免永久隐藏。如果没有状态栏，当用户需要查看时间或其他设备信息时必须离开应用。设计师应该让用户可以使用简单的手势重新显示隐藏的状态栏。
△ 用户可以方便地查看时间或其他设备信息
另一种情况是当前页面非常注重一屏内容展现时，我们会隐藏导航栏。
京东在用户搜索了商品之后，头部有三个信息栏，非常冗长。分别是：
△ 京东搜索商品后屏幕头部的信息栏
用户在搜索了商品之后，向上滑动页面，京东会隐藏导航栏和全局筛选栏。
一是因为用户搜索关键词后，滑动页面大概率表示已经开始在挑选商品，这时候可以大胆地猜测用户行为，认为搜索与排序的重要级下降了，搜索结果垂直内容筛选的重要级上升了，便可以只保留下重要的操作。
二是可以让内容区域高度增加，隐藏顶部两个栏目区域可以大致增加一个商品位的提前露出，增大了商品触达用户的可能性。这不就是 UI 设计为商业目标赋能的一个案例吗？
△ 隐藏导航栏，增加了屏幕利用率
基于导航栏层级始终高于页面内容的特性，随着用户划出第一屏，许多 APP 做了重要内容或重要控件转移到导航栏的设计。
豆瓣在影评讨论区，用户上滑页面时，会将当前影片的信息转移到导航栏。其实这种转移很常见，许多内容社区 APP 都有这样的交互设计，比如浏览的公众号文章，再回到顶部试试。方便用户时刻知道自己当前所浏览的内容是关于哪一个主题的。这一类转移是单纯站在用户体验角度的考量。
△ 豆瓣在屏幕滚动后转移影片信息到导航栏
但如果你仔细观察，有一类转移却是综合了用户体验与产品目标的共同抉择。如果你再稍微了解一点该产品背后的故事，甚至可以让你洞悉到，为了巩固产品的调性和目标，PM 和 UI 们在页面设计时做了多少细枝末节的引导。
知乎在用户浏览当前问题时向上滑动页面，也会像豆瓣一样，将当前问题标题转移到导航栏上，但与此同时会将「写回答」的操作也转移到导航栏。标题转移是出于用户体验，和大多数内容社区的做法大同小异；而「写回答」的按钮转移，正符合知乎想要打造一个内容交流社区的产品调性，他们希望刺激用户进行问答互动，多输出 UGC 内容，希望用「写回答」的按钮转移进一步激发用户创作内容的可能性。
△ 知乎转移「写回答」让用户更方便地进行问答互动
京东在店铺首页上滑页面时，会将「关注」按钮转移到导航栏，方便用户在浏览的过程中可以随时收藏店铺，增加了用户对品牌店铺的关注度和复购的可能性。京东靠自营模式发家，近几年来开始慢慢重视 B2C 市场，在这个小小的关注按钮上，是不是可以算略显端倪呢？虽然我不能非常肯定，可能提高用户收藏操作只是为了辅助京东更好地进行营销权重划分，不过「关注」按钮的转移，确实能为 B2C 业务的渗透提供一份助力。
△ 京东转移「关注」让用户更方便地收藏店铺
所以我这里说到的「转移」的目的，其实和 Giles Colborne 在书中讲到的并不十分一致，Giles Colborne 是希望设计师将当前页面低频、冗杂的操作转移到另一个页面中去，而我提到的「转移」反而是产品越注重什么功能，越可以利用导航栏层级的先天优势来实现转移。
合理删除、分层组织、适时隐藏和巧妙转移已经是我做设计和分析界面常用的一个手法，它并不一定是万能的，但是它多多少少可以辅助我们做出更合理的设计。
这篇文章想要告诉大家的是，在平台规范里的导航栏是死板又相对静态的，但在四个策略的辅助下，结合用户的操作手势，也可以将它变得十分灵活，帮助页面实现更好的用户体验。不要被规范限制的太死，转换设计师的角色变成用户，你可以研究出更多好玩的操作。随便打开一个应用，去研究研究，你可能会乐在其中的。
文章来源：优设 作者：UCD耍家
如今我们的生活，到处都是大幅图像广告，纷扰喧闹的各类短视频与直播。这是一个快节奏时代，我们更倾向阅读图像。为什么我们偏爱图像视觉超过文字？从人类进化角度来看，原始时代的祖先通过五感感知着这个世界，其中通过视觉来感知判断生活，其他四感辅助之。即使后面我们发明了文字，但发展至今，对图像的本能吸引力依旧强烈。因为在我们认知的潜意识里图像相较于文字更能让我们快速轻松理解并记忆。
图像如此重要，设计作品中当然也必不可少。因为图片，它能一定程度上决定画面基调；引导视觉流程；调剂平衡多段文字信息的枯燥性，让阅读变得轻松容易。
在UI设计中，我们经常需要把设计输出物拿给产品经理或者其他有设计决断力的人看，UI设计中图片使用的好与坏，能很大程度上影响着决策者的感知，以及你的设计过稿率。
如下左图：商品视角、调性、细节，都没有右图来的统一、有质感。单看这两张图，会让用户有这样的心理感知：左图感觉像山寨盗版商城；右图则会认为是严肃官方认证商城。所以，在同样页面布局下，不同的图片使用与处理，能让UI页面的品质有较大的感知差异。
图片的使用如此重要。那么，我们在正式做UI设计前，首先需要弄清楚图片在页面的占比情况以及后续图片的支撑来源问题。
在构思UI页面阶段，首先需要了解以下两个问题：1.图片区域占比问题；2.图片来源问题。当页面图片占比多，且让用户自定义，那么需要预估到APP上线后设计可控率会降低。换句话说，实际上线效果会不尽人意。如下图：由于淘宝和网易严选平台属性不同，在图片品控上就有着不同的视觉感受。当然，不是说淘宝做的不好，而是当一个平台集纳不同的店铺，不同调性的产品类型，即使有图片规范，也难如统一品类、调性的产品来的统一。
弄清图片内容的可控性问题后，开始进入设计环节，那么我们该如何选择图片？
在不同的场合有恰当合适的场景搭配，是十分基础且重要的事情。在UI设计中，任何一个部分的设计以及元素运用都需要为产品服务。图片也不例外。如果你是厨房类APP，头图选用小清新感的图片，就显得不够合适，带有环境食材元素的图片才更让用户有共鸣。
2.是否能清晰表达产品核心内容？
图片是否主体明确？能一眼正确无误的传达核心内容？会不会因为其他元素元素抢了主体视觉，找不到视觉重点？
3.是否美观、有品质、让人想拥有？
图片是否能表达美好生活以及美好品质的向往？光影关系是否自然？图片是否高清有细节？
当明白图片如何选择后，还想和你分享一些冷门且重要的图片过稿小技巧。记下来，将大大提升你的设计过稿率。
漂亮图片有很多，如果我们都以漂亮为基准，找出来的图片也会形色各异。由于用户的实际使用场景是：浏览一个完整APP，统一风格调性比美更重要。如果商品角度不一样；饱和度高低不同；抽象与具象等，都会形成产品不统一，用户视觉不适应等问题。
有时我们为了赶时间，直接用图片填充插件，让图片区域自动填充。但我还是想要给到你这样一个建议：一个专业且成熟的设计师，即使是设计初稿，也不能随便拿张图，凑合一下。任何时候的汇报，都需要有着处女座对于事物的完美要求，过自己这关。因为任何时候你的表达与表现，都形成了你在别人心目中专不专业的看法，从而影响着后续的设计话语权问题。如下图都是商城陈列页面，右侧的图片给出上线的实际效果，更贴合产品，方便设计决策者给出建议方向，或做出决策。
我们都是视觉动物，不管你是否愿意承认：我们常常通过视觉表象，才决定是否愿意去更深入的了解某个东西。
设计就是在做产品视觉表象的表达，我们需要尽可能使用贴切的，漂亮的图片。让UI视觉看起来更加美观，让用户愿意停留，认可以及信赖平台。
转自：站酷-丘丘的设计笔记
对于以下场景，你是不是有那么一点点熟悉：
视觉A：「视觉 B，把你之前的稿子发我下，我的页面里也有组件 A」
视觉A：「稿子里的组件 A 怎么跟视觉 C 刚刚发群里的不一样啊，我以哪个为主？」
视觉B：「刚刚业务通知组件 A 得修改，这次大促有 30+ 个页面都用到，这修改量这么大咋办？」
交互A：「这个 tab 上的文字看不清」，视觉A：「我觉得挺清晰的了」
开发：「为什么每次给的设计稿，明明长得都差不多，可尺寸就差了几个像素，我又得写新的样式表进去」
以上的对话，在大型且多人合作的项目中尤为常见。
随着大促项目体量越来越大，参与人员越来越多，这些问题越发明显，直接影响了活动的视觉统一性和整体的工作效率。因此我们开展了营销组件库的设计。
组件库就是界面设计常用控件或元件的集合，「组」是设计元素的组合方式，「件」由不同的元件组成。
其工作方式和乐高原理差不多，玩家（设计师）通过小元件（设计元素）或组件（模板）的不同组合形式，层层搭建和嵌套，最终组成建筑（页面）。
△ 乐高W16搭建过程，图片来自「什么值得买」
△ 页面设计过程
1. 保证用户体验的一致性
对于大促这种含有多个子项目，涉及到 30+ 的页面同期输出的复杂项目，每个独立的子项目虽然在需求上有一定区别，但整体的用户体验需要满足基本的一致性，减少用户认知和负担，提高用户的使用效率。组件库的建立，其统一的设计语言能保持设计结果的统一性，避免多人多风格的现象。
2. 提升效率
不同行业、不同产品、不同项目的组件库因其业务特点不同，其差异会非常大。那怎样的组件库才能满足「大促营销类」的项目需求？
分析研究
行业设计：行业优秀的设计系统、组件库搭建思维，以及其源文件，是最宝贵的学习资源。
主站设计：保证全站设计的一致性的同时，也是重要的学习参考；
过往问题：对过去项目的横向和纵向对比和分析，理解业务结构以及特点，从需求出发，拆解页面表达结构和所需组件的特点。
设计方向
通过前期的分析，明确了针对营销大促类组件库的设计方向：
拆分重组的组件化思维，解决模板灵活性和一致性的诉求
在设计方法上，我以 2013 年 Brad Forst 提出的原子设计方法论作为指导。方法的本质其实就是将页面拆解为最小元素（原子），然后原子可以演变成分子，分子通过多维度的组合形式成为组织，再到模板，最终生成页面（原理如下图）。
营销需求的多变性体现在分子的组合方式各不相同，但其共用特征是最小元素（原子）基本相同，因此统一最小元素，定义其组合的规则，即可从源头把控设计的一致性。同时通过特定的组合原则，设计师结合各项目需求根据组合和应用原则（布局、文字等）进行设计，从而实现其灵活性。
原子设计理论延展阅读：
明确了设计方向和设计方法后，结合营销项目自身的特点，开始了组件库的设计实施，整体流程如下：
梳理组件库
将近几期具有典型代表的页面收集整理分析，主要是为了以下 2 个方面的内容
ps：组件库强调的是通用和复用，因此无需把所有模块都纳入整理清单，做「合适」的，而不是大而全但可能臃肿的组件库。关于这个组件库的体量应该如何选择，可以看下文末的参考文献。
设计环节
梳理完组件库，按照原子设计方法论组件嵌套的形式进行组件设计。在 Brad 的概念里，是将系统分为了 5 个层级，但针对营销业务的多变性，要满足复用性和灵活性，越往上的层级复用性越差，因此在现阶段，采用了 3 个层级「原子-分子-组织」构成营销组件库。
「全局考虑」在设计的整个过程中，需考虑每个组件后续的使用场景以及设计师的使用方法，利用 sketch 功能（symbol 嵌套、丰富的配置项、响应式设计等），可以设计出一个高通用性的组件（如下图），以此达到增强每个组件的复用性，以及精简组件库的目的。（因文章篇幅受限，详细内容可见文末参考文献）
下面为每一个层级的详细设计：
第一层：「原子」是最基本和最小颗粒度的单位，工作中常以「元素」命名，例如：颜色、文字、图标、分割线等
布局：系统布局规范，需要通过统一的设计元素和间距规范去引导使用者们使用并且能够适配不同屏幕尺寸，目的是达到一致性，可适配、可控性原则。
「网格系统」通过前期的研究，网格系统采用的是目前最常用的「8点网格」，能更好地适配不同屏幕尺寸，2 倍的变化均能更好地保持偶数，不出现小数点的情况。
「设计原则」遵循格式塔理论：建立良好的信息层级，能让用户快速获取和理解有用、感兴趣的信息，并产生下一步行为。
颜色体系：「色值标准」为保证文本可识别性，结合Web内容无障碍指南（WCAG）2.0标准，做了以下定义：
颜色对比度检测工具：https://contrast-finder.tanaguru.com/
「衍生色设定规则」规律性设定衍生色，更好地打造页面信息层级
根据以上规则设定颜色体系
文字体系：项目中字体根据实现类型分为系统字体以及图片字体
「系统字体」为了较好的用户浏览体验，设计中优先采用开发直接写的系统实现的字体类型，不会因适配而产生文字不清晰或做图时不同系统渲染效果不同导致的不统一。
「图片字体」考虑到版权，以及字体在不同系统下渲染差异化的原因，选择了免费商用的思源黑体。
基础原子：「灵活性设置」充分考虑应用场景，利用 sketch 功能提高其包容性和灵活性。
第二层：「分子」原子排列组合构成了分子，工作中多以「模板」命名，例如：品牌模板、单品模板等
「局部到整体，整体到局部」原子和分子，其实是一个系统中，相互依赖的元素。因此在分子的设计过程中，会遇到原子包容性不足的情况，因此实际设计中，是不断在原子分子之间切换设计，不断完善各自的设计。
第三层：「组织」原子、分子排列组合构成了组织，工作中多以「模块」命名，例如：商品列表、内容卡片、入口模块、瀑布流图等
「保持克制，宁缺毋滥」该层面设计时，「局部影响整体，整体影响局部」的关系体现得更为明显，会在原子/分子/组织三个层面不断切换，进一步完善各个层面的设计。但过程中需保持克制，所有的设计应是围绕「复用性」和「灵活性」进行设计的，而非组合方式越多越好，多即意味着一致性在一定程度会受到影响。因此，应是从过往项目中，预测未来可能出现的情况，穷举后提取通用的组合规则后进行设计。
过程中多尝试不同方案设计，结合实际项目测试，择取最优方案。
整理设计文件，输出设计规范文档和使用说明。除了整理设计文件，梳理设计规范外，组件库相当于一个产品，需要有一份使用说明，为用户提供基础学习，提升团队成员的使用效率。
4. 迭代设计和维护
一个优秀的组件库绝不是 30 天速成班就结束的项目，而是一款产品，需有专人长期的跟进和维护，例：优化组件包容性；补充组织的种类等，从而逐步建立起适用于团队的组件库。
1. 打造组件库的几个关键步骤
2. 项目成果
组件库在 19 年双 11 项目中的应用，统一性显著提升，对比往年节省 76 人/天，平均效率提升 30%，其中主会场提升了 50%。
3. 项目反思
4. 设计小感悟：
这里讨论的是从细节处提升表单的设计
最近一直在做公司的内部办公项目，涉及到了排版和表单的问题最多，而且大部分都是来自于网页端的改版，因此在画界面的时候，关于表单里很多小细节都不太清楚，并且界面十分的冗长，因此就想把这段时间关于表单的设计做一个简单的总结，希望能帮到大家。
我们今天换个角度来说，最近学了原子设计，所以我们从原子的角度上将表单拆开来说，让我们更全面细节的了解表单，分为以下六个模块：结构、标签、操作、帮助、验证、反馈，首先我们先了解一下表单是什么？
表单是我们在网页和APP中使用频率比较高的模块，大多是数据采集的功能，并且都是需要用户自己填写或者编辑的，因此会在很多功能模块中见到，例如12306的信息填写页，个人中心信息、评论和动态发布以及登录页等等。
我从项目当中最深切的感受就是产品太抠了，网页上的信息哪个都舍不得删，整个搬下来，导致页面使用下来用户的体验很差，虽然很多时候表单里的一些内容是无法去掉的，但是还是希望能够简化表单，如下图所示：
用户注册表单时要一并填写姓名和生日，这种与注册无关的信息填写除了增加用户的提高留时间之外，降低对产品的好感度
信息的填写最好是从用户相对无抵触的信息开始逐渐到隐私的信息，而不是一开始就让用户萌生退意，如下图所示：
自如的房东签约里的内容个人觉得门槛还是挺高的，刚选择完自己的行业，就要填写公司的名称和地址，以及学历信息，这种比较隐私的问题一开始就让用户填写，其实会让用户对这个产品萌生退意。
如果实在是信息量很大但一定要在一个界面里展示，那么就将相关的内容进行分类组合，并且通过增加一些额外的空间或者主标题来分类。如下图所示：
12306、爱彼迎以及知乎的个人信息填写都比较多，但是将信息分类以后，就增加了页面呼吸和节奏感，从而帮助用户更加轻松完成表单。
而且这里在设计的时候需要注意的一个是分割形式，上图的三个例子分别使用了背景分割和留白分割，其中留白分割在填写时使用的比较多，因为大家要注意的是在编辑状态是有很多填写提示的下划线，背景分割或者分割线分割势必会造成视觉上分割感更强，因此在编辑状态留白风格是比较好的选择办法。
但是展示的时候分割线确实比较好的选择办法，如下图所示：
在表单中，标签问题比较多的在于标签的位置放在那里，我们经常看到的有左对齐、右对齐、顶部对齐和浮动标签。如下图所示：
浮动标签和顶部对齐目前来说是使用的比较少的情况，这种位置符合自然视线，能够快速帮助用户完成表单，但是却用的不是很多，因为关于表单的填写，产品还是希望用户能够慢下来的，通过左右阅读，让用户仔细阅读标签，如下图所示：
目前手机端使用较多的是右对齐为主，毕竟用户理解和填写速度都属于适中。
在操作的设计问题上，我们一般拿不准的就是不知道按钮要放在界面右上角还是下方，我们先说第一种：
这是目前不管是设计还是使用，都是界面中出现频次比较高的一种方式，如下图所示：
这种形式适用于界面信息内容不多，并且用户的可控性比较强，在UGC的产品中较多出现。
优势：按钮的视觉层级不是很高，方便用户更专注于当前页面的填写
缺点：按钮在右上角，不太方便用户一只手操作。
用主题色作为按钮的主色，并且固定在界面底部位置，如下图所示：
优点：位于屏幕下方，方便用户点击，同时视觉层级高能够吸引用户的注意力
缺点：会遮挡表单，导致用户会错过一些信息，因此这样的按钮大部分都是会放在信息不重要或者不用完全都填写的表单界面上。
这里的底部与第二种不同，第二种是固定在界面的底部，但是这种是固定在表单的底部，如下图所示：
优点：符合用户的阅读习惯，同时能够引导用户将表单信息看完，因此这种比较适合用在表单有必填项目的表单中使用。
缺点：如果表单内容比较少，在视觉上就会显得拥挤
帮助提示大多出现在产品的登录页和隐私信息的填写界面，不同的步骤需要考虑不同的情况。
未填写时给与用户的提示，这种情况是最常见的表单形式，如下图所示：
将需要用户填写的表单信息给予的一定的提示和解释，安抚用户在面对大量需要填写信息时的情绪。
填写验证后出现报错或者不符合要求时，需要作出反馈，可以有下图几种情况：
上图中两种不同的情况，针对性的报错和局部的报错，都分别代表了不同的场景，个人认为针对性的报错在登录页的报错上也能够极大的提高用户的体验。
在用户未对当前页面有操作时，按钮需有不同的表现形式，让用户对操作的行为及结果有预先的心理感知，如下图所示：
很多操作前的按钮都会置灰，显示不可点击的状态，除了给用户提示之外，也是为了避免误操作，当然现在还有一种方法就是如果误触页面会有提示
点击按钮后给页面增加一些微动效，提起用户的兴趣，同时提升表单的转化率。
转自；站酷-潘团子
本文分享国际化司机端首页改版完整思考过程，化繁为简提升司机使用效率，提升产品用户体验。
随着滴滴国际化业务脚步不断加快，司机端始终是作为承载全球化业务运力的基础保障。
同时，在移动通信技术高速发展的背景下，不同国家间的传输速度与硬件设备差距正在不断缩小，用户对应用产品的期望由基础的可接受、可使用、功能齐全，向更易用、简约、更为专注的产品使用体验上转变。
在新阶段下，「为全球司机用户提供一个「克制」「可依赖」的产品使用体验」、「为业务拓展提供有力的体验支撑」是体验设计团队在新的阶段下提出的目标。
2018 年 9 月我们与产品同学深入拉美当地对司机侧进行为期 2 周的产品体验调研。虽然在当地的时间较为短暂，但是我们依旧感受到了拉美国家的习俗文化和人文特点。
相比中国人的含蓄内敛，巴西与墨西哥人显然更加热情随和。
在巴西，这个世界上假期最多的国家，处处体现着人们对生活的享受才是自始至终的追求。无论是世界杯一个月狂欢长假，还是周末下午两点开门的商区，总会让人羡慕的同时刷新你对享受生活的认知。
而娱乐至上的墨西哥人，热情友好，能歌善舞，我们常说的放飞自我在这里几乎成为墨西哥人每天的生活常态。他们喜欢享受当下，后天下之忧而忧。他们觉得工作赚钱就是为了更好的休息，大多数人每天都是开朗乐观的处世态度。
同样，落后的基础建设、糟糕的交通状况、教育水平低下、价格昂贵的电子产品以及相对不太稳定的社会环境，也是它们共同存在的问题。
在当地，我们通过实地调研与用户访谈等方式，针对产品体验的问题与司机进行面对面沟通。收集了很多宝贵的用研资料与司机诉求，如司机希望平台为他们推荐订单引导，司机希望获得更多的实时动态讯息和司机每天都可以查看自己的收入状况等，集中体现在效率、感知、体验这三大方面。
其次，伴随着业务的不断增长，越来越多的功能使得我们的产品变的更加复杂，旧版的框架布局早已是不堪重负，无论是现存的体验优化问题，还是未来业务功能的拓展问题，旧的框架体系都是难以为继，无法再通过简单的修补来满足用户和业务未来的诉求。
改版升级对产品本身来说是一件非常重要的事情，需要对多方因素进行慎重考虑。经过多次的沟通讨论，权衡改版对产品可能产生的利弊关系，采用小步快跑，快速试错，分阶段分模块的方式进行。
首页既作为承载核心功能（发车）的载体又是其他重要板块的分发的入口，在内容呈现与用户感知上都存在很大的体验提升空间；我们通过拆解业务中长远需求规划得知，大多数重点需求依赖于首页框架布局，而现存首页框架无法满足业务诉求；在竞品的改版中首页的变化最大，并在司机群体中取得比较正向的反馈；通过上述分析，决定率先对首页进行优化改造。
首先我们与产品、运营侧进行深入讨论，结合用户访谈整理的用户诉求，对此次首页改版的目标达成一致。
在旧版的框架体系中，大量信息在首页呈现，功能层级复杂，重点功能难以突破和查找，关联较弱的信息架构严重影响和分散了司机的关注点。随着业务模式不断扩展，首页新需求类型逐渐增多，一套更加具备灵活的拓展能力和管理能力的首页框架尤为重要。
首先我们将旧版的首页布局打破重建，对现有模块进行整理。功能相似、定义模糊、司机操作相对低频的模块进行合并、删减。
对司机高频操作模板进行场景划分，将相关信息进行聚合处理，通过对入口的强化，来明确司机对不同模块的认知。
出车管理
将与出车相关信息进行组织聚合，结合司机不同的使用场景，将功能与模块进行结合，加强认知，减少司机多余的思考与判断，快速响应，提升工作效率，同样也为业务在有关出车功能方面提供灵活可拓展的组件框架。
收入管理
通过显示司机最关注的今日收入信息，为司机提供方便快捷的查看功能，使司机更专注于工作本身。同时对收入管理入口起到了强化认知作用。
信息管理
对关于个人相关的信息通知及功能操作进行聚合，方便司机对个人信息进行快速查看，提高查看效率。
通过对框架模块的标准化定义，后续的业务需求便可以进行归类管理，根据不同需求的不同属性，结合功能使用场景，选择合适的模块进行展示，提高司机使用效率同时增加首页的业务框架扩展能力。
通过对框架的重构，有效的解决了首页信息承载压力过大，功能层级复杂的问题，同时地图的面积相比旧版首页也大幅增加，信息呈现更加简洁、轻量。
出车操作作为首页的核心功能，通过调研得知，司机普遍反映在旧版首页中存在出车操作感知弱、收出车状态区分不明显的问题，对司机的操作体验和感知体验造成了比较大困惑。
在首页改版过程中我们着重对出车操作进行了设计分析，基于对业务的了解和竞品的分析，得出以下三个结论：
通过「两强一弱」，减少司机困惑提升发单效率的同时，间接的延长司机的在线时长。
完成页面设计后我们发现，操作按钮通过静态视觉角度去表达收出车空间位置关系是十分困难的，仅通过 Toast 提示会造成用户理解的断层，于是提出使用动效去进行「搭线」串联，搭线发车前按钮的点击和收纳后的位置提醒进行视觉体验上的串联，从而达成感知增强，解决视觉体验层面不容易解决的问题。
丰富的订单奖励活动是我们与竞品相比重要的竞争优势，司机在完成定量订单的同时提供了更多的额外收入。查看每日奖励活动，已成大多数司机每日上线必做的事情。
与旧版相比，在新版首页中通过提升奖励入口层级，缩短了查看奖励活动操作路径，从而方便司机快速查看。
通过首页透传的奖励卡片，司机在首页即可获取到推送的奖励相关信息，及时获取到奖励预告和进度，提升了司机工作效率的同时加强了司机对奖励活动的感知。
在经历了快速奔跑的粗放阶段，我们也在思考司机端产品究竟以怎样的品牌气质传递给海外的司机群体。
在当地，我们在司机心目中更像是合作伙伴，凭借真诚互利的态度赢得了当地司机的用户。
真诚、热情与融合我想这就是我们想要传达的核心品牌情感，而克制、可依赖将作为产品体验的设计原则贯穿始终。
颜色系统
司机端颜色系统在基于现有品牌色基础上，结合不同国家颜色文化的理解，新增加符合本地化的辅助色系，以提升产品的亲和力，传递品牌情感。
文字系统
针对司机用户的操作使用场景，对文字字号梯度进行提升，通过文字粗细、颜色、大小加强信息对比度，使司机在更多复杂场景下可快速获取重要信息，提升阅读体验。
在此次改版中新引入 Barlow 与 DIN Alternate 字族作为模式数字展示字体，两款字体分别为 Android 及 iOS 系统下默认包含字体，相比 Roboto 与 SF Pro text 两款字族，在数字展示上更为明确、识别性更强，同时因为自身「纤瘦」的特性，在屏幕横向面积上节省更多空间。
业务在不同的阶段有不同的侧重方向及打法，设计侧根据业务所处阶段应及时的调整自身的目标定位，快速响应，积极探索设计的机会和突破点，在不同的阶段发挥自身价值，助力业务达成共同目标，为用户创造更便捷的产品使用体验。
首页改版从立项到设计再到研发，多部门同学紧密配合，在有限的时间内最大化的完成预期上线效果。
全量上线后，通过问卷对首页改版进行满意度收集，司机对新版首页的满意度平均值高达 93%。取得的成绩离不开每一位参与改版的同学支持，也得益于国际化团队自始至终对产品体验的重视与认同。
作为司机端体验升级的第一步，首页改版只是一个开始，希望通过不断的打磨优化，秉持初心，为全球司机提供更克制、可依赖的出行平台。
文章来源：优设
运营类活动是在某一段时间内进行的，有明确业务目标（业务转化、品牌传播）及营销群体，依赖游戏化手段带来优秀用户体验，从而获得成功的一类活动。
1. 生命周期短
运营类活动生命周期较短，常在某一段时间（可能是周期性的），一般跟随时节热点或者运营节奏来进行。较短的生命周期给设计、开发、数据等带来较大挑战，设计程式化提供基本设计思路，组件化降低设计成本。
2. 业务目标明确
运营类活动一般以产品营销、品牌运营为目标，发放各类优惠券大众目标用户，从而带来业务转化，或者营销企业品牌，比如常见的年底 h5。
3. 有一定故事场景及氛围
运营类活动需要较强的故事场景。良好的场景设计、氛围营造可以带来沉浸式的用户体验，与用户建立情感共鸣。从而提升用户参与度、带来好的业务转化。
故事场景结合时节热点，同时考虑活动需要营造的体感氛围。
4. 人群细分
运营类活动的特征在发起之初就有特殊的运营目的和特定特征的用户群体。为实现最优的业务转化，需要在设计之初明确活动覆盖的用户人群。同时在各个环节都能考虑到特定用户群体的不同需求，尤其是在业务转化的过程中，好的人群细分往往带来事半功倍的效果。
5. 游戏化
引入游戏机制及游戏元素。
运营类活动结合时节热点，通过富有故事性的视觉传达（插图、动效、声音等设计元素）带给用户沉浸式的体验，与用户建立情感共鸣，从而有效的鼓励用户行为。
沉浸体验的营造对设计师提出了更高要求，可以从活动设计的故事感、用户代入感、产品互动感、主体差异感几个方面来思考入手。
运营类活动中广泛应用了游戏化机制和元素，它们是活动成功的有效保障。设计时综合考虑业务及用户需求，从用户动机激励、行为引导的角度出发，将运营活动游戏化。可以在活动参与深度的各个阶段引导用户操作，从而达成活动目标。以下列举了运营活动中常见的用户动机，后续我会从用户参与路径出发，尽可能详细的描述在用户参与的每一个阶段起作用的为动机，以及实现的手段。
大奖带来的诱因效应
动辄百万的大奖奖励几乎已经成为运营活动的标配，在动机理论中，用户行为的产生来源于需要，需要导致内驱力，引发行为，从而推动用户实现特定的目标。当目标的诱惑力很大时，即使没有内部驱动也能激发行为。这也是众多运营类活动大奖存在的理由。
占便宜的心理
爱占便宜是人的本性，从心理学角度讲，占便宜就像是额外得到的惊喜和奖赏，可以让人产生满足感！用户在这种心理作用下，会为了小利益去做出设计预设的行为，将业务需求设置在‘占便宜’的路径中可有效提高参与、转化率。比如在设计中用中奖动态弹幕来强化用户参与的动机，提高参与率。
有趣和好奇心
人天生具有好奇心，它帮助我们适应不断变化的环境、发现新的资源，是一种「无法抗拒」的行为动机。在运营活动中，用户会被有趣的活动页面，未知的规则设计所吸引，从而开始主动「探索」。这也是用户参与的动机之一，设计中精致的 UI、有效的页面信息传达保证了用户好奇的有效性。
即时反馈及阶段性成就
「即时反馈」是沉迷现象发生的原因。学习之所以痛苦正是因为其反馈链路太长，你只有在考试或者应用到所学知识时才能获得反馈，还有可能是负面的。在活动设计中，每一次用户操作都会有及时、细腻的反应，可以给用户带来精神愉悦，同时设计的阶段性成就又给用户带来成就感，用户会不知不觉中在活动中越走越远。
随机奖励的多巴胺效应
人类的本能热衷于冒险，随机的、不确定的奖励能够刺激大脑分泌多巴胺，带来愉悦感，从而刺激用户行为的重复。在活动设计中，常用到这一理论，比如抽奖机制。
所有权与拥有感
当用户感到他们拥有或控制某样东西时，会自然而然的强化它的属性、发挥其价值。尤其是通过适当的付出和自身努力，用户还可能不合理的高估其价值。在活动设计中，常使用户通过易实现的行为获得权益，通过「幸苦操作」强化了拥有感，提升其心理价值，从而促进用户对权益的使用。
稀缺性与用户渴望
稀缺性的心理学原理在于人们想要获得某样东西的原因仅仅是它太罕见，或者无法立刻获得。它破灭了人们对情况的控制感，人们会为了重获控制而采取行动。设计时，可以利用这种心理鼓励用户做出期望的行为。常见的有时间限制、权利限制等。
使命感/社交影响/损失规避……
运营类活动中数据和策略思维是保证活动效果最大化的有效手段。活动需求提出时，即考虑可能的参与用户细分；活动开始时，考虑引流途径和引流方式、物料的差异化；活动进行时，根据用户细分策略化任务推送，根据埋点数据监测积极调整相关设计元素。事无巨细才能确保活动成功。
文章来源：优设
目录：
一、键盘与命令类型
二、设计要点
三、有意思的键盘交互
毕竟该处是表单输入的交互终点，用‘前往（Go）、登录（Join）’这些命令词是不是更准确些呢？
文章来源：UI中国
设计并不只是为了区分市场定位，在视觉上对产品做一些修修补补。设计需要从品牌自身出发，设计出来的产品才能与用户产生情感交流、为品牌而发声，这样的设计才能真正为品牌创造长尾的价值。
前阵子和朋友去看车，我们去的第一家店是沃尔沃，沃尔沃主打的品牌理念是「安全」「可靠」，当时我在沃尔沃店里看的每一辆车的外形就像从金属盒子进化来的，棱角分明、线条硬朗，同时每个部件都相当厚实，当时我坐在车里的时候，感觉自己像是坐进了一个大保险箱，里三层外三层把我包裹起来，坐在里面特别有安全感。
我们去的另一家店是宝马，宝马的品牌概念主打的是「时尚」「运动」，所以宝马车给人的感觉和沃尔沃又完全不同了。它的流线感非常明显，而且这种流线型设计一直延伸到车内的每一个部件。印象特别深的是，车里座椅的荔枝皮纹和我们常见的品皮质特别相似，让我感觉自己像是坐进一个时尚的爱马仕箱包里。
其实无论是工业设计，还是我们的用户界面设计，好的设计给用户的感受与品牌理念是相契合的。设计中的每一个细节都是围绕品牌自身而展开，设计出来的产品才能够成为品牌的具象化延伸，与用户产生情感交流的同时也会让用户更加忠诚于我们的品牌。具体怎么做？这需要我们运用统一的设计语言来完成。
什么是设计语言？从设计的层面理解，当你看到一组功能与形式相互融合，向你诉说其特色与优点的产品，从而唤起你的情感反应时，你正在体验的就是设计语言。简单讲，当你的品牌运用设计语言的时候，你的产品会跟人说话：会告诉人们它能做什么，怎么做，以及你的品牌是个什么样的品牌。而这个设计语言也将会从前期的风格设定到后期的设计执行，始终贯穿在我们整个产品设计的流程当中。
首先从一开始的风格设定，比如每次我们设计师接到一个 brief 都会先做视觉推导。但是我之前的视觉推导是这样的：比如现在为一个类似拼多多的产品做设计，然后搜集了一圈竞品的界面，发现拼多多、聚划算、淘宝特价都是这种线框的、扁平的设计风格，所以最后推导的结论就是——因为我们拼购面向的用户群体是低消费人群，而竞品的设计风格是 xxxx 的，所以我们的用户偏爱这种 xxxx 设计风格，所以我们需要用这种风格去设计我们的页面。
搜狐总监总结的竞品分析方法：
其实这是一种循环论证，并不能推导出真正有价值的内容。就像你问一个胖子「你为什么这么胖呀」，胖子说「因为我吃得多」，你又问「为什么要吃这么多呀」，胖子又说「因为我胖，所以需要吃多点」。
竞品分析虽说也是一种前期设计调研的方法，但如果我们的设计只依赖于参考其他人怎么做，最后我们设计出来的产品不仅没办法向人们表达一个完整的品牌理念，而且我们的设计跟其他竞品看起来很相似，失去了自己的特点与优势。
所以，在我们设定产品的设计风格的时候就需要运用统一的设计语言，产出能够表达我们品牌特质的设计。那具体怎么做？这里涉及 2 个关键点，一个是如何找到你的品牌特质，另一个是如何针对这个品牌特质找到对应的设计语言。
首先，想要找到我们的品牌特质，我们可以从一个很有意思的原型中得到启发。如果想让我们的品牌真正能够影响用户，让用户为我们的品牌买单，我们的品牌就需要基于用户内心最深层次的需求，明白用户买单的动机在哪里。这时候我们再对应这些深层次的动机和需求做出设计，效果自然会事半功倍。那么如何能把品牌和用户的动机需求连接起来呢？我们可以借助心理学家荣格的原型理论来一一对应。
荣格的原型连接了人们最深层次的动机和感觉体验，表达了人们的基本需求，最重要的是他将这些需求都具像化为一个个角色。所以我们可以从中找到自己品牌的角色，并且在往后的发展中根据这个角色设定我们的品牌特质和设计语言，进而与用户建立根深蒂固的联系（相当于为我们的品牌打造一个「人设」）。我们先看看荣格的原型具体有哪些：
1. 开拓者
我们也有称之为探求者、朝圣者，它是敢于冒险的、首创的、独立的、不墨守成规的，更多的寻求自我实现和改变，拥有自由的价值观、自给自足的。开拓者通常会在未知的领域，开创新的路径。同时是个驱动力很强的非常有个性的人，能够忍受探索新路上形单影只的孤独。属于这种角色设定的品牌比如有星巴克、路虎都是。
2. 守护者
守护者通常是说无私的、有同情心的、仁慈的人，给弱势群体提供帮助和支持的，同时具有慷慨大方、自我奉献的精神。守护者更多立志于他人的安危和福利，像这种角色的品牌稍微少点，通常是一些救济会、慈善组织等等。
3. 爱人
爱人相关的特点像热情的、美丽的、感性的寻求真爱和愉悦，追求爱的价值观和亲密关系。爱人通常是通过给予和获得爱的强烈愿望所驱动的，这个不局限于爱情，友谊也包含在内，主要是意味着情感，所以一般是香水或者化妆品品牌都是运用这个原型角色。就像 dior，当然还有巧克力费列罗等等。
4. 魔术师
我们知道魔术师的形象通常是爱恶作剧的、滑稽的，有时候能够跨界，打破禁忌，并且自身带有乐趣，善于改变的。魔术师通常渴望乐趣，从单调的生活中解脱出来，敢于打破禁忌，质疑不可能的事物。这种角色设定的品牌我们可以很快想到那个爱玩有趣、经常跨界合作的百事可乐。
5. 创造者
创造者更强调艺术感、想象力、创新性，以及自我表现的价值观和美感上的愉悦性。创造者通过精心制作用来表现自我的事物，让人们耳目一新从而得到认可。像这种强调创造力的品牌比如乐高，用有限的积木组合、创造出无限种可能。
6. 反叛者
反叛者也可以说是不法之徒、外来者，这种角色通常是具有变革性的、反常的、打破常规的，表达一种价值观的解放。反叛者通常存在于社会边缘的，被大部分社会群体看成局外人甚至异类的角色，我们也可以看成是亚文化的一种转变。像这种主打标新立异、反常规的品牌，最著名的就是哈雷。
7. 魔法师
前面我们提到了魔术师，那么魔法师相对于魔术师而言，会带有更多的非现实的想象，精神上的超凡魅力，带来转变的、形而上的意识的扩张。通俗地说，是带有更多迷信元素的。但是最重要的是，魔法师趋向于驾驭各种能量和环境，进而给人们带来身体上以及精神上的转变。同样，像这种强调 magic 的品牌我们第一个可以想到迪士尼，典型的魔法世界。
8. 智者
我们也可以称之为「圣人」，智者通常是一种富有哲理性的、知识渊博的形象，忠于追求真理、乐于分享知识，也是智慧的代名词。智者经常被当成真理的捍卫者以及智慧的来源，为人们指明方向，帮助大家前进的代表。这种角色设定适用于一些知识输出的品牌，比如哈佛大学、金融时报等等。
9. 天真
这是 11 个原型中唯一一个形容词而不是角色名词，它代表着信任、纯洁、健康乐观，有希望的、诚实善良并且拥有简单的快乐。天真代表着乐观主义，不管处境如何都能保持希望和信仰，更像是纷杂世俗中的一片净土或者是一个乌托邦世界。而像这种原型设定一样传达乐观、希望、天真的品牌有麦当劳、可口可乐等等。
10. 统治者
统治者象征着权威、控制、至高无上，同时也有承担、效率、和谐的属性。统治者被得到和控制权利的欲望所驱动，通过对事物的掌控来防治混乱发生。同时也是一种责任承担的表现，以有组织的的方式来完成义务。属于这种角色设定的品牌比如有 IBM、花旗银行等等。
11. 英雄
每个人心目中的英雄不尽相似，但是他们的共性都是勇敢的、有原则的，勇于克服障碍，同时敢于接受挑战、伸张正义，面对逆境的时候坚韧不拔。这种角色设定的品牌比如强调挑战、正义、勇敢的耐克、联邦快递等等。
总而言之，原型是将我们用户内心最深层次的需求，具象化成一个角色，我们的品牌对应上这些角色，相当于对应上了我们用户最深层次的需求，为我们品牌和用户产生情感交流打下基础。同时，它可以为我们设计师想为品牌找到对应的设计风格的时候，提供更多维度的灵感。而这之后的过程，就涉及到刚才提到的第二个关键点，如何为我们的品牌找到对应的设计语言？
我们从前面的心理原型中了解到品牌的角色设定之后，围绕这个角色将会有一系列的关键词去描绘这个角色的特质。我们将这些抽象的、描绘品牌特质的关键词具像化，则可以得到描绘品牌自身的设计元素。具体我们可以借助一个图形四象限来完成：
我们将图形的基本构成（点、线、面）作为我们的坐标延伸——宽窄曲直，用这四个属性我们可以组合出非常多不同形态的图形元素。比如说，我们用「宽+曲」组合出来的图形可以是：实心的圆形、波浪曲线等等；再比如说我们用「窄+直」可以组合出：细直线、带有直角边的矩形等等。
同时，在图形属性的坐标上，我们还需要延展出一些带有这种属性的事物或印象。比如，生活中带有曲线的事物，像有花瓣、棉絮等等，这些事物给人的印象是柔和、温暖的表现；而直线的事物，我们联想一下生活中的带有直角的事物，比如像玻璃、霓虹灯管等等，这些表现前卫、锋芒毕露的事物。
像上面绿色部分的认知印象，针对每一个维度可以联想出很多关键词与事物，那么在我们延展出更加详细的四象限之后，这时候可以再次拿出，我们前面说到的，原型角色的关键词，再和刚才的图形四象限进行比对，利用象限中的图形基本属性，来组合出属于我们品牌的设计元素。具体怎么做，我举一个京东直播改版的案例。
首先基于京东品牌特质（原型设定是英雄），围绕英雄这一个原型我们会有很多关键词去形容它，比如敢于挑战、坚韧不拔等等。不过，京东直播作为京东 App 的主要栏目，更希望吸引更多的年轻人以及女性群体的参与，所以在京东直播里，我们表现的是更加年轻、女性向的英雄——惊奇队长，一位自信、勇敢挑战的女英雄形象。因为像人在不同场合下都会有不同的表现，对于品牌来说也是如此，我们设计师也需要根据不同的场景或者子产品的需求，基于原型的核心理念再做出适应性的设计，让我们设计的品牌更像一个生命体，而不是一成不变的事物。
那么我们围绕年轻、女性、自信这个主题再脑暴出更多相关的关键词。比如具象的可以代表女性的事物：口红、高跟鞋；比如一些抽象的内容，我们可以把他们具像化，比如年轻的「活力」，我们可以用泡泡、花朵来表现，女性的「优雅」可以用香水、丝带表现，英雄的「自信勇敢」用笑容表现。
不过，我们知道用户界面设计相对于平面设计的海报、插画而言，更重要的是对产品信息功能的辅助，所以这里的设计元素运用会更加克制，这意味着需要我们回归到更基础的层面。所以我们需要从刚才的具象事物（比如花朵、笑容）中提取出他们的基础属性，比如花瓣是圆弧形的、片状的，笑容是向上的曲线。同时借助图形四象限，用「宽+曲」的手法来表达我们的设计元素（年轻、女性向在第二象限，对应的宽+曲属性）。在后期设计过程中，融入这几个元素再作出界面设计。
当然，在整个设计流程中，设计语言的设定并不单单包含元素这一部分，还包括颜色、框架、布局等，各个方面的考量缺一不可。
为什么是相对统一而非绝对一致？因为人们对大部分颜色的认知其实是来自于自身的行为，受到心理、环境、文化等背景因素的影响，更多是一种个体的主观感受。比如同样的红色，在中国是吉祥喜庆的代表，在国外普遍认为危险警告的颜色。比如黑色，在大部分年轻人眼里会认为是酷的时尚的颜色，而相对年长传统的人则更多会觉得是邪恶、忌讳的颜色。所以我们并不需要过分强调建立绝对一致的色彩规则，这样也能使我们设计的品牌更像是一个有灵性的生物，而不仅仅是一个僵硬的组织。
比如今年的京东 618 项目，时间跨度长达 30 天，活动页面覆盖上千个，设计师不可能一个个去指定颜色规范、或者让同一个颜色适用于所有页面，所以需要设定的只有色彩感觉和表现手法，这种统一的大方向。所以我们可以看到这些在 618 期间的设计，虽然不尽相同但能让人清楚的感知到，这是来自同一个生态下的主题，并不会因为颜色不同就无法识别。
虽然人们对大部分颜色的认知来自于心理的主观感受，但还有对另一部分的颜色的认知是来自于人们的生理反应。而这一部分，才是我们在设计的时候需要注意的，关于造成人们「感知过强」和「感知过弱」的问题。
1. 感知过强 —— 颜色对抗通道
简单讲，就是相当于我们设计常说的——对比色，虽然我们知道对比色可以给用户带来视觉刺激，但是并不建议在设计中大面积的、长期的使用（红绿或黄蓝对比色），为什么呢？
因为我们所说的颜色，其实是人眼对频率、光的波长的感知，就像我们耳朵听的音高或一个音符时所感知的声音的原理一样。下图是人们视网膜三类视锥细胞对光的敏感度，以及人造红、绿、蓝色光感受器对光的敏感度。我们可以看到，低频视锥（红线）信号是红色和黄色，中频视锥信号是绿色，高频则对应蓝色。而我们设计中常说的对比色，其实就是通过这些视锥细胞的低、中、高频信号的极值相减，才得来的颜色对抗组。所以这种通过对视锥细胞两极的强烈刺激才得到的对比色，长期使用下会让人产生疲劳甚至烦躁的情绪，而在这种不稳定的情绪下，用户非常容易产生误操作，甚至最终迁怒于你的产品不再使用。
所以我们作为设计师可以运用一些方法来尽量控制对人眼的最极端的刺激，比如通过减少对抗色的面积，或者通过将对抗色组中的一个颜色用它的近色替换，等等。
2. 感知过弱 —— 色域跨度
除了以上，让我们感知过强的颜色对抗通道，另一个需要注意的颜色问题就是，让人们感知过弱的色域跨度。我们有时候会遇到一个问题就是，按钮上的文字和按钮的颜色融在一起，导致按钮文字看不清。
这个问题其实就是两个颜色的色域跨度过小导致的，首先我们用 H（色相）S（饱和度）B（明度）的数值来划分色域（如下图）。在统一H（色相）值的情况下，规定了 10 个标准的S（饱和度）、B（亮度）值，以 10 为单位作为一个跨度。两种颜色在这个色域中，至少要相差 5个跨度，用户才能有效感知到两种颜色的差异。
比如下图中的蓝色背景色值是 60，那么放置在这个背景中的文字 A，至少要跟这个 60 的位置相差 5 个跨度，也就是 10 这个位置。如果文字A 的色值只有 30，与背景色的 60 跨度小于 5，那么文字 A 在这个背景上会难以识别。以此类推，深色模式中（如下图）这个背景色值 100，那么在这个背景上的文字 A 色值，最多不能超过 50。
以上关于颜色对抗通道和色域跨度的问题，就是我们需要了解的一些颜色运用中的边界，并在这个边界以内让设计保持最大的灵活度。所以对于颜色，我们需要强调的是相对统一的边界极值，而不是绝对一致的色值。
如果我们把前面说的设计元素和颜色看作品牌的皮肤，那么视觉框架则是品牌的骨骼。如果想让我们的品牌成为一个能够真正影响用户的存在，不仅要有好看的皮囊——在设计元素和颜色上延续品牌基因，还要有强大的内心——视觉框架要能足够支撑起我们品牌的身躯。
视觉框架包括了层级和布局，我们需要在设计的过程中，加入对产品阶段和品牌价值的思考。因为就像人一样，处于不同阶段的人追求的东西会有所差异。同样的对于品牌也是如此，处于不同产品阶段会有不同的需求，相应的品牌价值点也会有所差别。所以如果想让设计的视觉框架能够足以撑起品牌，在这其中将会涉及 2 个关键点：如何定位产品阶段和品牌价值，以及如何围绕产品阶段与品牌价值点设计对应的视觉框架。
首先是定位我们的产品阶段和品牌价值，我们可以通过对照经济价值系统（如下图）：产品的阶段分为初级产品、产品、服务和体验这 4 个阶段。
拿京东举个例子，如果我们位于初级产品阶段，我们的平台就是这样的（如下图）：展示出所有商品信息，用户需要根据信息联系商品的供应商，去和供应商进行交易。那么在这个阶段的时候，品牌的核心价值在于对商品信息展现的完整性、全面性，只要这个平台能够覆盖足够多的商品，并展示完整的商品信息，这个阶段的目标就达到了；
如果我们位于产品阶段，我们会对商品进行分类，并在平台上提供统一的购买渠道。相应的，这个是以后的品牌价值在于，平台能够对商品进行精准分类或者实现统一的购买渠道功能，让用户能够在平台上买到商品；
而当我们位于服务阶段，我们的平台不仅可以购买商品，我们还会提供售前售后的服务，对应不同的客户群体推荐不同的商品，或者提供定制化的服务等等。平台除了实现交易功能，需要提高品牌的竞争力，在竞品之间形成差异化，为人们提供一系列附加价值的服务，吸引更多用户在我们平台上下单才是目标；
而如果我们位于体验阶段，我们可以从视、听、味、嗅、触觉给用户带来一系列的情感反应，为每个个体营造不同的回忆与感受。让用户与品牌产生情感上的互动，在更深层次上影响用户认知并形成坚固的情感纽带，让用户忠于我们的品牌才是这个阶段的目标。
正因为不同的产品阶段，对应的品牌价值与目标不同，我们才需要针对产品阶段，为品牌设计合适的视觉框架，到后期设计出来的产品才能更贴合地为品牌发声。像今年京东 app 改版项目，在接到这个 brief 之后，首先当然会先看看当时版本存在的问题，下图为当时京东 7.0 版本。
当时团队逐一列出了 7.0 版本存在的几个主要问题：
1. 品牌识别度低
我们可以发现在这个界面里很难发现京东的品牌元素，就算现在换一个品牌同样这个界面也适用；
2. 业务分发局限
这个版本里的商品坑位是固定的，业务展现的数量和形式是局限的；
3. 运营维护成本高
banner 模块采用通栏而且上下渐变的样式，这需要商家制作运营图片的时候，将主要内容严格控制在我们的限制区域内，这同时也增加了我们运营审核的工作量；
4. 楼层过长、转化率低
在 7.0 版本中，中间的楼层频道长达 7 屏，同质化的内容导致平台商品的转化率不高；
5. 促销信息干扰
界面的促销信息让用户眼花缭乱，难以让用户快速找到自己想要的商品；
6. 个性化感知不足
电商平台内容形式趋向单一化，没有太多创新的表现。
有了这些具体的问题项，设计师们开始进行针对性地视觉框架设计。比如，针对个性化感知不足的问题，我们希望重新设计百宝箱区域，打破常见的圆底 icon 的样式，每个图标的边框都是不规则的，让整个区域更有表现力，同时与其他电商平台的界面形成差异化。再比如，针对促销信息干扰的问题，我们希望简化原本频道入口的信息，将原本好几个 sku 信息对应同 1 个入口，优化为单个 sku 与单个入口一一对应，让用户保持专注力快速找到自己想要的频道入口。
诸如此类，当时我们为这几个问题延展出许多设计上的解决方案，输出了不少有创新性的视觉稿。但是随着设计工作越往后进行，我们发现手中的设计并不能很好地解决，品牌在当前阶段中面临的实际问题。
因为在前期框架设计的整个过程中，我们没有把品牌定位这一因素考虑进去，我们发现旧版本的问题，埋着头只想把这些问题都解决了，却忘记抬起头看看我们的品牌现在在哪。我们前面说过，对照经济价值系统，京东目前主要处于服务阶段，还在逐渐迈向体验阶段的进程中。
而处于这个阶段的京东，外部环境是电商平台的逐渐趋同化；内部环境是业务体量庞大，同时产品仍有上升空间。所以我们的阶段目标就是需要加深用户对品牌的认知，业务内容需要更加具备兼容性、延展性，同时需要提高产品的业务分发能力。
结合这个阶段性目标，我们可以从旧版本存在的问题中，发现这 4 个问题才是当前优先级最高的、需要在当前阶段中解决的内容。所以基于筛选后的 4 个问题，我们开始将设计往回收，从视觉框架上更多聚焦于这 4 个问题的优化。
比如针对业务分发局限性的问题，对首页下拉区域的布局进行优化：下拉刷新除了常规的刷新状态外，在营销活动期间用户可下拉跳转至活动页面。我们将下拉路径缩短 30%，共享元素空间兼容更多的业务内容，充分利用首焦区域丰富业务的展现形式。
比如针对品牌识别度的问题，将首页头部区域的层级进行优化：在京东品牌形象 Joy 中提炼出微笑曲线，将微笑弧度应用在头部的背景轮廓上，并且在整个页面中统一植入品牌色京东红，同时在当前我们的品牌尚未成熟的阶段，直接使用京东 logo 强化用户对品牌的感知度和记忆点。
比如针对运营维护成本高的问题，还记得前面说的我们一开始做的百宝箱的设计么，虽然那种设计是更具有差异化和创新性，但是目前产品量级大、业务入口多，而且这一区域涉及合作商家自己提供的素材露出，如果没有统一的外框与规范的内容，运营维护成本是相当高的。所以我们保留了 icon 外框，同时规范每个框中只居中展示一个对应的图形，不能包含文字等其他元素。
最终我们可以看到，改版后的京东 app 无论是在品牌、业务层面，还是在多种复杂的运营场景中，都能实现作为平台的兼容性和延展性。所以，在视觉框架的时候需要预先考虑产品阶段，针对不同阶段需求作出相应的设计侧重，让设计出来的产品能够更加贴合品牌本身。
经过刚才的推导和框架设定，我们对眼前要做的产品设计风格、视觉框架已经确定的七七八八，界面的形态也初具雏形了。接下来要做的设计执行阶段就是我们设计师的魔法时刻，相信每位设计师都有自己的方式和能力让我们的产品变得更优美，所以关于这部分的内容暂不在此赘述。
通过以上章节我们了解到，只有从品牌自身出发，设计出来的产品才能在每一个方面都延续品牌基因、展现出设计的整体性。一方面满足品牌价值需求为品牌发声，另一方面将用户的所闻、所见、所感打造成一个特别的情感反应，让用户更长久的忠于我们的品牌。
不过，如果我们想要创造出能深化品牌基因的产品，我们在用户方面也要投入和品牌方面同样多的关注。因为不仅要看产品的外观界面，还要看产品给用户的感觉、使用方式和效果。比如用户因为什么才被你的产品吸引，用户会从中得到什么，你的产品能带给用户什么感受，用户如何才能为你的产品发生实际行动，等等。正因为我们所做的一切，都应该对品牌产生支撑作用。所以不仅仅是品牌能够识别和定义我们的产品，用户的认知体验也应该成为我们设计考量的一部分。究竟怎样做，才能让我们的设计能够有效的影响用户、让用户为我们的品牌买单呢？
文章来源：优设
蓝蓝设计的小编 http://www.lanlanwork.com