喜马拉雅主播等级体系算是喜马各业务线中资历比较老的一员了，主要服务于主播用户查看自身等级，以及特权享受，这次整理了近期关于主播等级线现存问题的改版。
1. 产品层面
这次迭代的目的是：
通过沟通我们知道产品希望通过这次迭代来引起用户注意，增加主播用户和产品之间的互动，而提升页面日活以及次日留存。
2. 设计层面
设计师的基本出发点是需要设计出不低于竞品且更加精致的稿件，能够更加有效传达品牌理念和视觉延展性，进而理解产品与竞品之间的差异化，增强用户认知。
3. 用户层面
此次迭代需要考虑到主播用户的教育成本和接受程度，能否让用户感受到产品的差异性，能否让用户在第一时间看到我们希望用户关注的东西。
通过沟通我们明确了产品需求点，接下来需要针对需求进行分析，我们从竞品视觉分析、设计关键词提炼两点来进行设计决策。
1. 视觉竞品分析
针对性的通过对 VIP、等级等属性的页面进行视觉收集。
2. 设计关键词提炼
主播等级页面的服务理念是为主播用户提供更加清晰的等级提升指引。区别于喜马其他等级线，整个流程中除了满足等级查看的基本需求和特权展示的标准化流程，更多的差异是对目标用户需求的洞察和挖掘，我们从目标用户需求定义了主播等级线设计差异化的关键词。
通过与产品沟通需求点，我们了解到视觉层面需要满足或改进的内容；通过视觉竞品分析我们获取产品未来的设计趋势以及具有前瞻性的设计概念；接下来在稿件输出的过程中我们就可以打散原有页面的信息层级并进行重新分组，分析所有层级信息字段的属性，然后整理出不可变动信息、可变动信息、可增加的信息、可变的布局样式，不断尝试重组信息结构，找出合适的视觉决策点。
针对设计稿件，开展设计内部视觉评审，针对视觉稿件还邀请了产品以及交互进行意见收集，最终选择方案一作为主播等级迭代方案。
在主页面色彩偏好、功能布局定稿之后，为了在关键转化点给用户带来统一有趣的视觉体验，以主页面视觉为参考以动效、ICON、插画三个维度进行设计延展，保证与竞品的品牌差异性以及设计的统一性。
1. 特权ICON
为了达到设计稿件色彩倾向、品牌差异设计贯穿用户每一个关键转化点保持特权 ICON 视觉语言统一，并增加趣味性拉开与竞品的差异，提升用户点击转化率。
2. 插画延伸
针对产品等级攻略个性化需求的诉求点，围绕等级提升的不同要求绘制场景化插画，并保持视觉层面的输出配套，通过十字交叉分析有针对性的进行精准推送。
3. 动效延伸
围绕温暖、成就感两个关键进行延展，在用户点击等级主页入口的第一时间感受到等级提升的成就感以及统一色彩倾向带来的重视感，通过特权展示达到所见即所得的直观感受。
设计并非一念间的灵感迸发，设计师对整个业务需要有清晰的理解，明白产品定位并通过前期设计分析奠定设计理念而进行设计产出。
设计是一个逐渐崭露头角的过程，而我理解的设计师则应该是快乐的战士而不是轻言放弃的赌徒，还是那句话：每个人都有属于自己的一片森林。一点工作总结希望对大家有多裨益，同时欢迎各位大佬加入喜马拉雅FM。
UI 在拿到产品原型时该如何思考？如何着手设计界面？最近跟一些设计师朋友交流 UI 设计方案，总结了一下在方案优化的思考过程，在这里分享给大家。
很多 UI 拿到一个页面原型的时候，就立马打开各大设计网站找参考，然后照着参考页面上的效果，生搬硬套到原型上，这只是达到了单纯美化页面的效果。
那么拿到原型后应该带着怎样的思维来进行思考呢？
第一道思维：交互思维
先了解页面实现什么功能，功能的交互操作流程是怎样的，也就是说用户操作这个页面上的功能时，用户的行为路径是怎样的。
第二道思维：视觉思维
了解完功能、交互后，提取原型中视觉组成元素，细分归类，每一类应用统一性原则进行设计。
然后交互与视觉一同结合来设计界面。
结合案例我们来看下两道思维是如何进行的。
了解功能交互流程。
根据实例原型分析出用户行为路径：
用户行为路径：
注意点：
提取视觉组成元素。
视觉元素：
注意点：
我们带着两道思维来检验一下这位设计师输出的方案：
问题所在：
数据显示在前，输入在后，交互操作层级有点混乱。
问题截图：
问题解决：
用户行为路径中，第1步有个先后顺序，先输入地址，后显示数据，在进行信息内容布局设计的时候同样需要有先后顺序，所以交互操作层级一定程度上影响着布局排版。
问题所在：
「批量转账」按钮归类到了第1步的信息模块中，交互操作逻辑有点不通畅。
问题截图：
解决方案：
用户行为路径中，用户核心费用信息后，最有可能的行为就是点击「批量转账」按钮，所以「批量转账」按钮与转账费用信息的操作关联性比较大，应该在同一模块里会更符合交互操作逻辑。
问题所在：
主色、点缀色、辅助色各自的应用范围没有规则，颜色应用混乱。
问题截图：
问题解决：
一个页面或者项目中，各种颜色的应用范围需要有一定规范，文字使用什么颜色、按钮使用什么颜色、输入组件使用什么颜色、背景使用什么颜色都需要有对应的使用规则。
问题所在：
输入类组件样式存在多样性，同样是输入框，有多种样式，会造成用户交互操作上的认知有误。
问题截图：
问题解决：
一个页面或者项目中，输入类组件样式应用统一性原则，保持视觉风格一致，从而减少用户操作认知偏差。
问题所在：
按钮样式应用到不具备按钮点击属性的对象上，用户会认为也是可点击，会造成用户交互操作上的认知有误。
问题截图：
问题解决：
一个页面或者项目中，不具备按钮点击属性的元素尽量不要套用按钮样式，减少用户操作认知偏差。
举个例子：人形的稻草套上人的衣服，成功了欺骗了人们，造成了认知偏差。
问题所在：
同类信息内容的展示存在多样式，传达过程中加重了用户的认知负担。
问题截图：
问题解决：
一个页面或者项目中，同类信息内容的展示应用相似性原则保持视觉风格一致，因为相似性的布局可以更加地传达信息。
举个例子：电商页面，金额信息展示；理财页面，收益信息的展示；都是应用相似性的布局，即统一又地传达信息。
问题所在：
图标风格不一致，图形反白风格，立体风格，线性风格。
问题截图：
问题解决：
根据产品的特性，建议统一的图标风格，选择线性、面性、渐变、立体等风格。
问题所在：
页面元素的对齐、间隔没有规律，整体视觉显得松散，不严谨。
问题截图：
问题解决：
可以利用栅格系统，把页面信息内容规整起来。
根据发现的问题，我们来看一下优化后的设计方案：
优化1：交互路径
根据用户行为路径，将相关联的信息归类到一个模块，每个步骤划分到一个模块，相关联的步骤合并到一个模块，模块内完成各自的操作展示任务，模块之间信息内容互不干扰，但从结构布局又能够形成符合交互操作逻辑。
优化2：颜色规范
规范颜色，配色的方法在这里不做深入讨论，这里方法的是基于品牌色通过饱和度、亮度、透明度的变化来得出文字各层级的颜色、边框的颜色。
优化3：输入控件
对输入类控件的样式进行了统一，让用户从视觉上就能够清楚地分辨出哪些是可以进行输入操作的，从而减少用户对交互操作上的认知成本，提高信息输入效率。
输入控件进行交互时，要有交互状态反馈，默认状态、选中状态、错误状态。视情况而定，可以增加鼠标移上状态和不可输入状态。
状态变化时的颜色应用，可以通过变换色相的透明度来保持色彩的一致性。
优化4：按钮规范
对按钮进行了分类，分为常规按钮、图标按钮、文字按钮；对按钮样式用颜色进行了统一；按钮要有交互状态反馈，不可点击状态、可点击状态、鼠标移上状态、鼠标按下。
状态变化时的颜色应用，可以通过变换色相的饱和度、亮度、透明度来保持色彩的一致性。
优化5：信息展示
对信息内容应用相似性原则进行了排版的统一处理，每个小类信息的标题与内容采用统一排版格式，然后重复应用，有助于提高信息获取效率。
优化6：图标风格
这里的图标应用于功能性图标，统一采用线性圆角风格。功能性图标需要注意图标的形状要能够正确有效地传达出功能的含义。
优化7：对齐间隔
应用栅格系统对视觉元素之间的对齐、间隔进行调整，使页面视觉更加严谨，页面信息更容易阅读。
交互思维
了解页面中的功能交互流程，梳理用户操作行为路径，可以对行为步骤中的信息内容进行归类分组提供依据，最终有助于页面信息内容的排版布局。
视觉思维
提取视觉组成元素，对颜色、文字、控件、图标等每一类应用统一性原则进行规范设计，再通过视觉元素本身相互组合，最终应用回信息内容上，建立规范的视觉感。
设计一个页面，交互思维和视觉思维是互相配合的，缺一不可，最终都是为了共同去构造符合交互操作逻辑、满足视觉美感的界面。
大家都知道 UED（User Experience Design）用户体验设计团队，主张「以用户为中心的设计」，我们团队的前身就是一个典型的 UED 团队。那么什么是 UGD 呢？
UGD（User Growth Design）用户增长设计，主张「以用户为中心，以增长为导向」。
下面这个是我们团队现在的 logo，这个图形很清晰地描述了 UGD 的理念：在 UCD（以用户为中心的设计）的基础上增加一个向上的箭头（增长），变形成了 G（Growth，代表增长）。也就是我们在原先以用户为中心的基础上，还要做到帮助业务增长。
「增长」的概念对很多人来说也许还比较陌生。事实上，这个概念早在2010年就有人在美国提出了，到了2015年才引入国内，最近两年开始火爆。所以说它在国内其实也是一个比较新的概念。感兴趣的朋友可以看看《增长黑客》相关书籍。
为什么我们要从传统的 UED 进化为充满挑战和不确定性的 UGD 呢？这要从天时、地利、人和三个方面说起。
1. 天时
先说说天时，大概2016年左右吧，中国互联网逐渐进入下半场。关于下半场的话题这里不多说了，感兴趣的同学可以上网搜搜相关的文章或者看一下我的新书《破茧成蝶2》（7月出版），里面有很详细的讨论。简单的说，下半场的特点就是：人口红利、流量红利、资金红利都在逐渐萎缩。原先你可以花钱买流量；或者通过好的 idea 拉来大笔投资；再或者通过打造的体验迎来大量用户。但这种「好时代」已经一去不复返了，如果没有实质的增长，创意、体验、流量都不能保证产品可以顺利的活下去。
2017年3月底，美国又发生了一件大事：可口可乐，这家以营销著称的公司，宣布将取消设立了24年的首席营销官（CMO）一职。全球市场营销、客户及商务领导、战略被整合成一个职能，由新创立的职位 CGO（Chief Growth Officer，首席增长管）领导。第一任 CGO 将直接向可口可乐新任 CEO 汇报。
可能很多人不了解，CMO 的工作性质和 UED 其实有很多相似的地方。比如都是成本部门（当然市场部还要额外花钱）；都热衷包装创意而非对业绩的直接影响；都倾向于用定性的方式检验成果；都习惯通过经验而非试验来做决策……
很多企业主对此非常无奈，他们明明知道在营销等方面的花费存在巨大的浪费，却不知道浪费在哪里。随着大数据时代的到来（2015年左右），人们越来越重视数据的作用，越来越能够轻易的获取、存储数据，也越来越知道如何从数据中获取价值。在这种情况下，原先很多岗位的传统工作方式显然太过于低效，所以 CMO 逐渐被 CGO 取代也就不足为奇了。
从 CMO 到 CGO，揭示了四个变化趋势：
谁能肯定 CMO 的今天不会成为 UED 的明天呢？当然，我认为 UGD 只是未来的一个发展趋势之一，我想未来设计师还会有很多其它的发展方向等待我们深入探索。
2. 地利
虽然我换过几次工作，但是有一点我从来没变，就是一直在做和商业相关的产品（电商、To B、互联网金融），所以我对业务、对数据更敏感一些。和同行交流的过程中我也发现一个明显的现象：越是接触商业产品的设计师，越重视数据量化。当然现在不仅是商业产品，所有类型产品的从业人员都需要有这个意识。比如做社交产品，也需要通过活跃度等指标来检验成果。
3. 人和
设计团队的地位其实普遍是比较尴尬的，因为你很难证明对产品、对企业的价值。以前设计师还可以靠特立独行来赢得一些关注，但现在随着时代的变化，设计和业务绑定的趋势越来越明显。与此同时，大部分设计师却还没有做好相应的准备，不知道该如何帮助业务增长。
虽然支持团队很难成为核心团队，但我们依然可以通过改变自己，努力离核心部分近一点，更近一点。
看了前面的分析，可能有人会感觉迷茫：设计师到底应该服务于业务还是用户呢？
传统思维认为，设计师应该为用户、为体验负责。实际上，体验与业务并不冲突。通过一年多的试验，我们发现能带动业务数据提升的设计方案，质量都比原始方案要好。通过无数次的试验结果总结规律，设计师的进步非常快，也非常大。
所以我们团队的价值主张一直都是：以用户为中心，以增长为导向！
很多设计师认为自己不太可能帮助业务有实质性的提升。其实设计的商业潜力是巨大的，只是还尚未被充分发挥出来。通过出众的造型和外观击败竞争对手、销量大幅提升的案例不胜枚举。所以我坚信设计师在这方面的空间非常大。
当然要成为 UGD 并不是通过输出美观的产出物就可以做到。UGD 必须致力于通过设计思维及专业技能，用最小成本为产品/企业创造最大价值。我们团队在这方面已经摸索了一年多的时间，现在还在继续探索中。
和 UED 相比，我认为 UGD 最重要的差别在于：
前三项相信大部分设计师已经开始意识到了，而第四项，也是最重要的一项，很容易成为设计师的软肋。因为设计师太习惯于追求完美、「憋大招」了，他们很少考虑如何用较小的成本创造更大的价值。实际上，设计师缜密的思维、优质的创意如果能和精益思维、增长思维结合起来，将产生惊人的效果！
当然说来容易做来难，我们在长期的实践过程中经历了很多失败和挫折，感谢公司的无限包容，使得我们最终能够沉淀出一套严谨的「增长体系」作为理论支撑，并不断带给业务方惊喜。
懒洋洋是一款为多伦多华人提供服务的订餐平台用户群一般为学生、白领等对于视觉上追求简约、舒适产品流程简易而顺畅（英文是用翻译软件翻的，如有错误，那就算了吧）
图标是具有明确指代含义的计算机图形。从功能分类角度分为启动图标、应用图标、功能图标。
功能图标是具有指代意义且具有功能标识的图形，它不仅是一种图形，更是一种标识，它具有高度浓缩并快捷传达信息、便于记忆的特性。
面性图标是由一根封闭的线造成了面，面性图标同样具有大小、形状、色彩、肌理等造型元素。直面图标具有稳重、刚毅的男性化特征；曲面具有动态、柔和的女性化特征。
不透明度图标
不透明度图标是通过调节图标的部分面性结构来增加层次感，从配色角度属于同色系。
△ NO-921
光影图标
三大面五大调，通过调节面的反光和阴影来增加面性图标的纹理。在扁平时代的今天保留着微拟物风。
多彩色图标
多彩色给人很酷炫的感觉，从明度角度还是要提取深浅的颜色来代表图标的黑白灰。
△ Kyle Anthony Miller
线性图标是通过粗细一致的线条绘制，高度概括出来的图标，既能让人赏心悦目，又给用户带来创造和应用的乐趣。
圆角图标
圆角图标给人以亲和力，也有柔软，软弱的一面。在图标设计越来越精美的今天，圆角图标的应用行业已经越来越广泛。比如女性，母婴，儿童，旅游……
△ Stephen Andrew Murrill
直角图标
直角图标给人以锐利，坚强，果断，不拖泥带水的一面。让人眼前一亮的是魅族系统Flyme6 里面的图标它就是用的直角，给人明快干净的感觉。真正更好的诠释它内在含义的非京东金融里的图标了 ，投资理财的时候需要人们果断作出判断。理财有风险，投资需谨慎。直角的感觉让人当机立断，不拖泥带水，快买快出。如果用圆角就感觉柔一点，感觉做事优柔寡断。所以一下子在金融领域被做成了标杆式的功能图标。
断点图标
断点图标是点线面演化的一种产物。在最开始UI兴起的时候，设计师们不满足于单线条的功能图标，通过点线面增加形式感。最早新浪体育运用到这一风格，算是还是很不错的一种风格。很遗憾只留在了我的记忆力，网上并没有找到之前的设计。
△ Catalin Mihut
高光式图标
高光式图标是传统绘画的产物，我们在传统绘画的时候往往最后一笔都是添加高光，起到画龙点睛的效果。高光式的功能图标采用里细外粗的规律，和断点式功能图标差不多一个年代的产物。在不断扁平不断简洁的今天，也不会感觉那最后一笔也是多余的。
△ Udisk6353
不透明度图标
不透明度图标是调节图标的部分结构的不透明度来增加图标的层次。色彩上面跟双色图标是一样的，只不过从配色角度属于同色系的范畴。
△ Laura Reen
双色图标
双色图标在实际应用中非常广泛，也是很百搭的那种。一种可以有彩色跟无彩色结合，有彩色的颜色可以是企业色，可以是代表行业或者产品的颜色跟无彩色黑色相结合。一种是主体色跟点缀色组合而成的双色，但使用时要考虑到当前界面中的配色不宜过多，多了就容易花。
△ stay
线面结合图标
线面结合图标也是一种很出彩的风格，线是高度概括的图标，这时候面更多的是充当装饰点缀的作用。面的表现方式也有很多种，可以是单色的，渐变色的，也可以像 MBE风格那样提取主体结构形成的面，也可以提取图标里面有闭合路径所形成的面。这种风格应用也非常广泛。
△ Ted Kulakevich
△ Prakhar Neel Sharma
结构图标
结构图标算比较有争议性的图标，结构图标是我们学绘画的时候老师要我们起形，要开始绘画结构，对基础的三大面五大调有很好的理解。现在结构图标正好相反，比如对于一个具像图标，我们要分析出它的每一笔每一画，看清每一个结构，然后用固定的形式来表现出来。固定的形式可以像优酷图标的相交结构点，可以像上海玛娜花园一笔一个颜色，等等。
一笔画图标
一笔画图标是难度系数比较高的一种风格，也是我非常喜欢的一种风格，当才开始流行断点图标的时候，锤子设计师欧阳念念就提出了一笔画图标的概念，当时也是有争议的一种图标。当网易云音乐也出了这种图标后就更具有说服力。一般也很难驾驭，也基本都能做出来，但是视觉上看上去很舒服还是要有深厚的功底。
logo类图标
logo 类图标跟一笔画算是同等级别难度的，需要图标足够精致到可以直接拿来当应用图标，乃至于 logo。这种在app中屈指可数。最为经典的就当属网易云音乐的 logo 了，其实它也属于一笔画图标，同时又用做了 logo，它的含金量可想而知。
情感化图标
情感化图标是提取人的五官跟图标相结合具有拟人化的图标，这种拟人化的场景模仿人在真实场景的应用。QQ 的底部图标通过五官方向大小移动变化很好的表现出当前场景。QQ 开了先河，相信后续会有很多情感化图标出现，会有它的一席之地。
线性的闭合路径的图形变面性图标，闭合路径里面的线条反白，重要的关联结构线反白，让面性图标透气；线性的不闭合路径的图形变面性图标，应适当的增加线的粗度来达到视觉上的平衡。
△ Jory Raphael
△ Sebo
绘画结构＋点线面＋色彩，绘画结构可以清晰的分析出事物的主体结构，勾勒出主体轮廓，对创造新的图标风格有很大帮助。绘画结构选的角度是人很熟知的角度，比如正面，尽量不要选择带有透视角度进行设计。点线面是设计的基础，通过从点线面角度去构思会获得更多的灵感。色彩方面可以是企业色、行业色、主题色、点缀色等等。（图design by Ted-Kulakevich and Graphéine ）
大小的统一
在网页设计中图标的主流尺寸有16×16、24×24、32×3、48×48、 64×64、96×96、128×128、256×256、512×512。在移动端iOS规范中在2倍图下最适合人点击的区域大小为48*48px，iOS功能图标其他尺寸为48加或减4的倍数；安卓android 功能图标其他尺寸为48加或减8的倍数。为什么 iOS 是4的倍数，一个数除以2倍图在乘以3倍图要是偶数最小的数为4；为什么安卓android 是8的倍数，安卓开发中最小的单位是1dp,1dp=2px，同时也要满足一个数除以2倍图在乘以3倍图要是偶数最小的数为4，所以安卓要是8的倍数。在很多带有色块的图标，不仅要保证色块44*44pt的大小统一，也要保证里面色块里面的功能图标的大小统一。
风格的统一
风格上面已经归纳的很全了，直角图标和圆角图标基础上可以添加一个其他风格，如双色风格；但是剩余的其他风格最好就不要两两相加，不然就会给用户感觉很容易乱，也不够简洁，主次不明。
规范的统一
视觉的规范
为什么我们再同样的大小区域去绘制正方形、圆形、三角形，虽然符合了大小统一的特性，但是从视觉上还是不能看上去很均衡？这就需要我们规范化的去绘制图标，安卓android 规范里给出了图标的绘制方法。
圆角的规范
简洁性不单单体验在图标的简洁，还要体现在从创意到实际落地的简洁。在使用软件 ai 或者 sketch 的时候绘制基础图形不要出现小数点和基数，多用偶数。
图标具有可点击性和标识性。可点击性就会有点击前、点击时、点击后三种状态，主流底部标签栏会在点击前使用线性图标，点击时和点击后使用面性图标；也有使用颜色来区分。
图标的延展性之前在图标的风格也讲到，好的图标可以直接当应用图标或者 logo 来使用。同时好的图标还可以通过点线面动效变化做下拉加载动画。
头脑风暴看似一个不知道怎么解释的词，简单的说就是多动脑子，越用越活。头脑风暴不单单是这里用到，是所有设计师做设计之前必备工作。头脑风暴完你会觉得你的设计思路会很宽，然后就是要合理的分析每个的可行度，完成的工作量，自己当前设计的水平是否可以有效完成。其实很多设计师能有效的搜索到自己想要的东西也算是头脑风暴的一种，虽然你不会想出很多点子但还是很明确的知道自己想要什么，一定注意不要直接拿来主义，还是要通过平时的练习掌握更多的风格。为以后头脑风暴想出的很多点子能很好的实践出来。比如以旅游为主体进行头脑风暴，这个就能想到很多很多。
搜集资料的时候要很好的提取关键词，直接从 iconutopia、iconfont、iconfinder、iconmonstr 搜索获取灵感。具象的事物可以看看该事物好的品牌公司的产品，品牌公司的工业设计相对较好，对后面提取元素也会有很大的帮助。也可以通过提取好的关键词，翻译成英文，再到国外的网站追波、be搜上一搜看看。搜索到的素材和元素一定要再设计，不能拿来直接用。
提取元素又归结到绘画结构中去了，绘画好的看到具象事物，心里默默打开一个灯，三大面五大调，光影关系都有了。不是很理解的还是多练习吧。具象图标就是提取主要轮廓线，保留可要可不要的元素，到最后的时候做统一删减；抽象图标有时候确实没有一点的思路的时候可以在就 iconutopia、iconfont、iconfinder、iconmonstr 找找，找到了合适的还要进行 redesign。有想法后选择一种图标风格这样的绘制效率会很快。
上面元素提取好后，需要开始选择一种图标风格进行绘制。开始绘制的时候不要过于追求图标的风格，还是要从图标本身出发快速的绘制好。等全部绘制好了突然想换一种图标风格也是很快的，水到渠成。可能刚开始很难在规范化的框框里直接就提取元素开始绘制，那就只能先绘制要你想要创意的元素图标，全部画好后在统一的规范里面再绘制一遍。规划化的目的就是让图标统一，任何两个图标拿出来从视觉大小、风格都是一个统一的整体。
一套图标绘制好了之后还是在放在一起看一下整理的感觉，最后通过加减法适当的修修补补，对于视觉上看上去过于繁琐的图标要保留大轮廓的同时减少结构达到视觉平衡；对于确实很简单但有没办法添加任何的东西元素来增加的为它做加法的时候是否可以放大，来增加它的视觉丰满感。
任何人都抵挡不了时间的力量，你可以斥责它的无情，也可以赞美它的给予，在这个成长的历程中，我们寻找的不是时间给我们带来了什么，而是这个过程中我经历了什么。后者，才是我们需要深思并感恩的。
与「用户体验」一样，许多人会评判一个产品用户体验的好与差。但是「好」与「差」只是整体上的一种结论，普通人可以说这两个字。但作为设计师，必须懂得在体验过程中，知晓哪里好与哪里差，更要知道为什么好为什么差。
就好像评书似的，真正读过某本书的人，不会单纯的说：「这本书太好/烂了」。他一定会有一种感悟，哪怕只是一句话。
既然是为了提升「用户体验」，就得与用户一起进行体验的走查，才能有根据的进行优化。
一般我们会建立一种用户体验路径，其目的是为了了解用户的动机、关注点和需求点。所以为了提升用户体验，就必须邀请用户参与体验路径的设计过程。
用户在使用一款产品时，他们中的大多数只是为了完成某个任务，所以在这个过程中，也许用户只使用了部分功能，也可能使用了所有功能。
因此，不要将体验路径的设计限制在特定的产品或功能服务上，要理解完整的用户体验路径，针对性的进行走查，与用户一起提升产品易用性。
真实的用户体验路径需要通过不同用户的参与互动，不管是一对一的讨论或焦点小组，都需要大量的数据才能得出真实的结论。
任何没有基于研究报告的尝试、假设、数据，都将使它在很大程度上只是理论性的。所以我们一定要通过不同用户的不同体验结论，客观的进行分析路径中的哪一环可以继续优化。
与用户的交流沟通是其中的关键，在用户的帮助下，你很容易找到可提升的体验点。
因为，用户情绪的波动和心情的愉悦、满足、怀疑、失望以及懊悔的表现是无法在报告中准确反映出来的，所以设计师要重视这些用户反馈，包括这些互动的场景可以使设计师产生共鸣，通过同理心来设计并优化功能。
然而，没有任何产品或功能服务能够满足过程中的所有用户需求，所以，要深入了解每一个阶段出现的需求点，因为它们都会衍生出不同的因素，这使我们能够理解产品如何更好的服务于用户的生活。
同样，没有任何灵丹妙药能积极地改变用户体验，而是通过与用户的持续接触。也许你会说很难进行与用户直接的对话，所以你通过客服回访、用户反馈等方式收集信息也未尝不可。
可能到这里你还没有完全明白其中的道理，下面我举个例子详细说明。
让我们来举一个旅游平台的例子，这个平台是供于各种各样的人和商务旅行者使用的，其中包括了航班、酒店、出租车租赁等在内的度假套餐。
为了让各位深入了解体验路径，以及更好地了解我们的用户，让我们对旅行者的体验路径也做一个拆解。如下图：
这个路径将全面地了解用户的想法、感受和行为，因为他们会经历不同的阶段，帮助填补我们路径中的空白点，帮助我们更好的进行产品的设计。
1. 计划旅行
在计划旅行时，设计师认为用户的想法是什么？
2. 用户角度
通过与用户的走查、回访、反馈，可以帮助我们了解用户内心真实的想法，帮助我们增强以及简化用户的体验方式。
3. 特殊情况
产品是否有处理特殊情况的功能？
我们是否可以帮助用户更好地应对这些情况？通过及时提供有关目的地天气状况、备选旅行计划或建议类似目的地的信息等。
那么通过第一个内容的拆解，我们就可以发现，这个点能做的功能就有很多。而且这些功能还能排列优先级，设计师能主动进行推进，提升设计师自身的价值。功能走查的重要性相信各位也看出来了。下面继续。
1. 完成预订
是时候确定目的地、日期、旅行方式和停留地点了。（依然是设计师角度）
2. 用户角度
3. 特殊情况
1. 出行与酒店
设计师考虑的用户需求。
2. 用户角度
3. 特殊情况
1. 旅程与归来
旅途中的回忆和收获。
2. 用户角度
3. 特殊情况
通过以上的拆解说明，可见体验路径对于功能设计的重要性，各位设计师一定不要主观认为「你就是用户」，而是结合用户需求进行分析，设计出更合理的功能。
设计师要不断完善用户的体验路径模式，因为它会一直发展，将产品优化的越来越好，而不仅仅是停留在：「这个产品我做完了」的想法上。
所以为什么说用户体验是一种过程？因为它始终在不断变化，所以作为设计师也要持续的自我增值，才能跟上产品迭代、时代发展的步伐。
渐变这一视觉趋势，在最近几年里可谓如日中天。很多平平淡淡的设计，将平涂改为渐变，立刻就能增加醒目感。
今天我们就来和大家聊聊渐变这个话题，深入了解我们似乎以为自己懂了的渐变，我们将和大家一起分析渐变配色中，利用色彩不同特性之间的对比来用色，以及一些简单的操作小技巧。比如快速生成一个色轮，以及简单的利用混合工具来配出渐变配色的色彩。
渐变是在色彩上的一个相对缓慢的过渡，我们的视觉会随着这个渐变的过渡而产生一种流动感，而这种流动感全凭在色彩上发生的种种变化。是的，我们的重点来了，就是这个变化，需要我们今天深入去加以了解。
谈到变化，我们自然会想到这个变化的范围。如果拿出我们的色轮来看，我们就会发现色轮上的变化范围有大有小，当两个色彩距离较近时，我们可以说他们是邻近色，这时难以发现他们的区别，直至我们的肉眼无法分辨。这时候可以说变化范围较小。
当两个色彩距离180，在色轮上呈相对，我们可以说这时的色彩变化是最大的，于是也就产生了最强烈的对比。很多撞色的情况，也是在这种对比下发生的。我们通常会把这对颜色称为互补色。
当然，实际的情况比这要稍微复杂一点，我们一起来看下。
刚刚大家可以发现，这个色轮上的色彩的一个特点是什么？只有色相的变化。没错，我们平时也已经习惯了，只用色相来区分色彩。所以，今天要讲的第一个对比，也就是色相的对比。
色相的对比，在色轮上就能很直观的表现。例如红色和黄色这一段，截取过来以后，就变为了红 – 黄渐变。利用色环就能很轻松的实现色相的渐变。距离越远，渐变色的对比也就越大，互补色之间的对比达到了极值，比如红 – 蓝渐变的对比就大过红 – 黄渐变。
这里首先教给大家一个快速生成色轮的小技巧，这个技巧不需要利用网上的图片或工具。现做现用，很方便。
STEP 01
让我们先用这个自定义形状工具画出一个圆环。
STEP 02
然后在圆环里填充色彩，这里我们运用一个渐变叠加。
渐变叠加的叠加方式为角度渐变，渐变色这里选用「色谱」，没有找到这个渐变的小伙伴记得要追加色谱。
这时做出的色轮，在色彩上饱和度达到最大值。因此也能表现最强烈的色相对比。目前比较流行的渐变色是明度偏高，饱和度居中的渐变，也像这样的糖果色，因此这时大家可以利用调整图层「色相/饱和度」来增加明度或降低饱和度。
可能很容易被初学者忽略的是，我们在 PS 里的色彩（HSB）这个参数里看下，一般来说H-色相，S-饱和度，B-明度，这里的情况和我们在色彩学里学到的 HSB 有点小差异。
色相这里没有问题，但是饱和度和明度，尤其是饱和度上面，大家可以看到一般来说饱和度时，色彩是慢慢失去色度，也就是呈现灰色，但是在软件里把 S 这个值调到最小呈现出是白色；还有另一个属性：明度，最大的明度，应该是白色，在软件里的 B 这个参数调到最高时，并不是白色。
在 PS 里，只有把色彩放到「色相/饱和度」这个工具里，才会看到和我们书里的概念表现一致的特性。
运用色环配出的渐变色和直接利用渐变工具配出的渐变色还有差别的，最重要是体现在颜色的过渡上。如果是用渐变工具选择了左边绿色，右边紫色的渐变色，在中间出现的过渡色就表现出一种发灰的色彩。如果所选用的两端的颜色是在色环上距离有定的角度，就会出现这种灰色。这是因为两种颜色彼此混合所造成的。有些情况下，确实是需要这样过渡的，这就直接用渐变工具来做渐变。
另外一个情况就是不希望色彩发灰，这时需要用到色环，在色环上根据所需要的渐变过渡来选取不同的色彩配置。
可以看出来，尽管没有饱和度、明度的变化，色彩仍然是彼此之间所表现的特质都很独特，所以基本上利用色相对比，就能配出非常优秀的渐变作品。
一般来说，渐变本身就足够吸引人，有渐变参与的情况下，我个人的建议是色彩不要太多，尽量少元素，整体风格倾向极简，这时最能发挥渐变色这种特质的魅力。
这个案例中的渐变过渡，中间的这个红色和蓝色的渐变就是用渐变工具做出来的，两边的渐变都是取用了色环上的渐变过渡，可以看到色彩上两边的渐变中的色相更多，更饱满，饱和度和明度都没有丧失，而中间的渐变在红蓝之间的过渡出现了饱和度较低的紫灰色。
色温是什么？色温更多是色彩对人的主观的心理因素的影响。虽说是主观，但是大家的整体倾向还是比较类同。比如蓝色清凉，红色温暖。
所以，把色环上的色彩根据主观温度进行一个划分，就有了我们经常听说的暖色和冷色。冷暖色虽然无法用属性值来进行衡量，但是却在色彩中发挥不小的作用。
渐变中加入色温这个属性，这个游戏就会更好玩。一般来说，为了达到配色平衡，我们的配色中需要冷暖进行平衡，这里的平衡并非是1：1的严格配比，而是彼此渗透，双方根据位置、面积、形状等等元素的共同参与，共同实现一个版面的平衡。当然，这不是件容易的事，但这是我们配色中的方向之一。
回到我们的色温对比，要体现在渐变中，就是要有冷色和暖色的参与。一般来说，在比较简单的过渡性双色渐变里，一个冷色一个暖色是非常常见的表达方式。还是拿刚刚那个案例来看，左边两个配色就是冷暖的过渡，而右边的配色相对来说偏暖，当然相比之下，洋红色还是比橙色会更偏冷一些。
冷暖色的对比都是在同一个版面内的一个动态对比，尤其对于绿色和紫色这个范围内的色彩来说的话更是如此。比如绿色，在和蓝色搭配的时候，由于蓝色是绝对的冷色，所以绿色就表现出暖色的特质；而绿色如果和橙色搭配，橙色又是绝对的暖色，所以绿色又表现出冷色的特性。紫色也是同样的情况，和蓝色搭配它偏向暖色，而和橙色搭配时它又是偏冷的。
用起来其实也很简单，如果你的配色中发现整体感觉偏冷，就增加暖色。如果太暖，那就增加冷色调。如果整体的配色看不出哪里不对劲，但总觉得色彩有点奇怪，就先看看色温是不是实现了平衡。
再增加一个属性，渐变这个游戏又增加难度了，明度这个属性表现为颜色的明暗程度，明度引入了另一个性质：光。其实我们平时看到的色彩就是因为有了光，才有了颜色。但是一般来说我们会把光简单归属于「发光」这个行列。事实上，由于光线的折射，我们视网膜接受到光的波长，才产生了色彩。那么光线的强烈与否，就会影响这个颜色的表现。
明度的对比，是所有颜色属性当中，最容易被觉察到的。我们可以简单来看，我们的素描就是利用明暗来表现物体，黑白灰能毫不费力表现现实中光的感觉。所以在配色中，有了明暗对比，是一个很好表现色彩感染力的元素。
即使明度相同，我们的色彩明暗程度（从主观感受来说），也是不一样的。比如相同明度的黄绿色和紫色，在明暗表现上，黄绿色明显更亮，更靠前。如果让这两个色彩之间发生渐变关系，这样的表现就很像左上角有光渗入进这块平面中。如果进一步降低的紫色的明度，这时，明度的对比就更为强烈。这时很适合表现出某种立体感。
当然，我们的色彩并非一定要有立体感才能生动，有些配色大师，会刻意去弱化立体感，所以会尽量避免明暗的对比。但是，作为初学者，一定要知道明暗对比，懂得在适当的情况下拿来使用。
尤其是在同色系或者邻近色色系的渐变里，明度对比是一个增加立体表现力的方式。有些时候，平涂的方式看起来呆板单调，利用同色系渐变就能很好解决这个问题。两个色彩之间可以非常近似，即便如此，还是和平涂有差别。有了光的感觉就要随时注意受光的方向，在整个画面里保持全局光，所谓全局光，换个简单的说法就是大家都在同一光源照射下。
我们可以再和大家演示一下，例如这里有两个圆，这两个圆都是填充为紫 – 绿渐变，这时的紫和绿是同样的明度。这里注意，就算是同样明度，两个颜色在直观的感觉上，明暗程度也是有差别的，比如绿色会稍微亮一点。这时打开渐变工具，在后边的绿色这一端色彩，将它的明度调高，这时大家会发现，右边这个圆就变为了一个球体。
明度渐变还是增加作品细腻程度的一个方法，我们和大神的差距，也许真有可能就是一处小小的明暗关系的不同。别忘了，明度对比对整体效果所发生的影响是最大的，但也是我们最容易忽略的，有时候一旦有了颜色，我们的焦点都在色调和色度上。但其实所有的配色，比如我们做设计，一开始总是从黑白灰开始做起，先配置好明度，然后再开始根据明度来选择用色。
有了对明度的把握，我想我们对色彩的把握才能上升到新的层次，否则，我们在一堆色彩里，很容易迷失方向。
这里说的色度，也被叫饱和度，有的书上也叫彩度，拿我们日常用语讲就是鲜艳程度。色度对比越强，尤其是色轮上的互补色，在他们色度都达到最大时，会撞出最大的火花，产生最强烈的效果。
有时候这种高彩度的配色用在动感很强的设计中，看上去活力四射。但这种互补色之间也会发生彼此互斥的关系，造成整个版面的凌乱，所以要非常谨慎的对待色度。
色度对比最常见的就是用在空间感的塑造上，大家都知道，色度越高，在视觉上会制造一种「更近」的效果。
举例来说吧，我们这里可以画一个梯形，这个梯形用渐变来填色。如果用单色，大家一定感觉不出空间感。如果我们采用渐变，使得同一个颜色，比如紫红色，在这个梯形上，由上到下做一个渐变，这个渐变中两端的色彩，在色度上有差距。那这时就能体现出一个慢慢延伸到远方的感觉。甚至还能有种暴露在空气中，被空气弱化的视觉效果。这个也运用在插画中，也被叫做空气透视。
色彩浓度的强弱对比，和其他的色彩的属性相结合，配色就变得更复杂。但是通常来说，配色并没有标准答案。所以导致很多人在配色的时候，都是依靠一种感觉在操作。其实感觉的确是一个最直接的选色方法之一，但是并不是唯一的方式。大家如果对色彩有更深入的了解以后，就会慢慢理解感觉层面下的更有趣的东西。这个也是经验积累。
在饱和度这一环，PS 里如果觉得不是很靠谱，就像我之前和大家提过，那么大家可以进入到 AI 里，利用 AI 的混合工具来生成不同的色阶。例如我们在这里用一个高饱和度的红色和一个低饱和度的蓝色相搭配。应该说，这两端的色彩既有饱和度的对比，也有色调和明度的对比，还有色温的对比，应该说是对比是非常丰富的。所以，这一条矩形，用在背景色上，我个人感觉不是太合适。如果是做成一些特殊的效果，还是不错，比如设计字体的时候做笔画造型，或者做装饰的线条。
最后一个我们要略提一下，就是透明度的对比。尽管透明度不是标准的颜色属性中的一种，但是在我们软件操作当中，透明度是相当实用的。渐变的色彩，我们可以改变其中一个色彩的透明度，比如降低到0，那么一端的色彩消失不见，这样最容易造成一种浓雾的效果。
这个插画，是在设计我自己的个人网站时做的，其中这些背景中的立方体的某些块面，就是采用某一端降低透明度的效果。有一种在云端的感觉。
网站链接：https://www.grabient.com/
这个网站的工具很好用，我当时在群里推荐的时候，有人问我说这个和 PS 里的渐变工具有什么区别。我在刚刚其实已经和大家讲过，PS里的颜色的设置是有一些和我们的色彩理论不太符合的地方，但是这个渐变工具就完全符合我们对色彩属性的了解。所以在这里可以进行调试，再确定渐变的值，最后放到 PS 里用。
网站链接：https://webgradients.com/
这个网站，我相信大家应该不会陌生，好多地方都推荐过，这个渐变色是可以作为背景色来使用的。大家可以看到这上面大部分的渐变的明度都比较高，比较浅。过渡也非常细腻。这一点大家可以拿来当作自己配色的参考。
这两个工具以外，还有很多其他好用的工具我就不一一演示了，这是我用的比较多，而且觉得还挺实用的两个网站。
其实色彩和音乐的感觉是最接近的，每个色彩对应每个音调，那经过组合以后就能表现出一定的情感。通常你也很难说，哪一首音乐是最好听的，因为每个人喜欢的音乐风格都不一样。但是总有那么一些歌是广为流传成为经典的。
所以要学会渐变，首先应该是了解色彩。我们不可能通过一篇文章就能完成学习，肯定是希望以这篇文章作为一个启发点，大家可以从中找到自己的学习的方向。
图标是界面设计中最重要的元素之一，也是我们 UI设计师必备的技能，日常工作中我们经常会接到含有图标设计、优化的需求。但到底什么样的图标才算是优秀的？也许很多设计师并没有太完整的评判体系，只是凭感觉，这样就会造成输出效果不稳定、耗时太长等不良的后果。
所以借着这次机会我梳理了一套图标设计自检的评判体系，一共五个维度，大纲如下：
评判事物的价值在于它的用途是什么。
图标的用途是帮助用户理解信息，所以「识别性」就是图标最重要、最底层的价值，如果你设计一个图标，用户看不懂，即使视觉再美观，也是无根之木，没有任何价值可言。
识别性可以分为两个方面，一是含义识别，二是视觉识别。
先说含义识别，简单来说就是你的图标能不能被理解，当然并不是设计师自己能理解就可以了，而是需要用户来决定。这里和大家分享一个我判断图标是否易识别的方法——内部用户调研法，说白了就是随机问一些团队内部人员，最好多问几种岗位，这样得来的结果更加可靠，案例如下。
我在改版「话题」这个图标的时候，想到了微博的「#」，于是把「#」和气泡框结合到了一起，如下图：
这时我找来10个内部人员进行测试，只有3个能看懂图标的意思（这3个人都是平时经常玩微博的），在这样的数据之下，不用犹豫，这个方案一定是不可取的。
在进行调研时，最少要保证80%的人能看懂，才证明你的方案是可行的。
再来说视觉识别，顾名思义这一点已经与图标含义无关，而是视觉层面的问题，例如大小、底色等等阻碍用户识别的因素。
这里引入一个国外的测试结果，是我在一位前辈的文章中看到的，测验包括一组四种样式的图标：白底黑色实心图标，白底黑色空心图标，黑底白色实心图标，黑底白色空心图标，经过10天的时间，1260名参与者总共完成了超过25000次图标的认知测试。将得出的数据分成四组进行双向方差分析，在相同的统计条件下，选择黑底白色空心图标要比其他三种组合的时间慢0.17秒，也就是说这种图标的信息表达能力会少弱，如下图：
所以在这样的理论与数据的支撑下，我对部分图标进行了如下改版：
有底色的图标全部从线性改成面性，如改不成面性（例如时钟）需要适当加粗描边，目的就是提高视觉识别性。
切记，识别性是图标最重要的价值，尤其是在没有文字说明的情况下，一定不要让用户产生困惑，不然你就是在消耗用户体验，而不是给用户体验赋能！
试想如果一个人没有性格，那这个人就是没有灵魂的，图标也一样，没有性格即没有灵魂。
那如何打造属于自己的性格呢，我们需要从用户和品牌出发，例如腾讯动漫的用户都是动漫、cosplay爱好者，给人一种又萌又可爱的感觉，所以我们需要让图标尽量圆润一些：
像上图2号图标一样，增大圆角，使图标看起来更加圆润可爱。
基于这样的用户人群，我们还将原有一些单色图标，改成下面这样的彩色图标：
目的就是让图标可爱活泼的性格更加明显。
品牌性是我们经常提到的纬度，常用的提取品牌的基因也有很多，颜色、图形、吉祥物等等，这里举两个例子，一个是具象的品牌基因——吉祥物：
我们有自己的品牌吉祥物——黑子，所以在图标设计时可以将其运用起来，如下图就是结合黑子形象设计出来的「逗币」图标：
再举个比较抽象的例子，从 logo 当中提取品牌基因。
由于 logo 的字体笔画比较粗，整体给人一种厚重饱满的感觉：
因此我们可以在品牌logo 中提取「粗胖饱满」的品牌基因，在这样的背景下就不用再纠结图标使用2px描边还是3px的描边了：
我们可以很确定的使用3px描边，因为它既符合品牌基因又符合用户性格（肥胖圆润显得可爱）。
很多时候我们做出来的图标不够精致，其中一个很大的原因就是不够饱满。
如何判断图标是否饱满呢？我常用的衡量方法就是在图标上面加一个矩形，看图标的正形的面积是否还可以增加。
例如下图，蓝色是正形，红色是负形：
很明显蓝色的正形面积是可以增加的，例如：
这就是在增加图标的饱满度，我也是按照这个思路来改版图标饱满度的。
举个真实的例子，我们原版的续看图标是上下结构，而上面部分的图形太窄，导致左上角、右上角的空白太多（也就是绿色部分太多），没有撑满矩形，如下图：
于是我对图标的结构进行了调整，尽可能的减少绿色部分，最后达到了下图这样的效果：
最后提醒大家，对于图标的饱满度，还需要结合整套图标的视觉效果来进行调试，虽然上面这个方法可以解决大部分图标的饱满问题，但还是要具体场景具体分析，切记，我们的目标是让整套图标看起来和谐、统一、精致！
细节也包含很多方面，例如：
1. 角度是否一致或者遵循某种规律
我们定制的角度规范是30度的倍数，这样可以很大程度的提高图标统一性。
2. 描边末端的细节处理
下图就是一个错误的例子，一个描边末端是直角，一个又是圆角：
我们在处理这样的细节时，一定要保证统一性。
3. 像素对齐问题
大家会觉得只要把一个尺寸的图标做好像素对齐，导出其他倍数的图标就是ok的，其实这样的想法是不对的，因为在导出0.5或1.5倍数关系的时候，像素很容易再次产生不对齐的情况。
举个例子，我们做图标是以2倍图为基础，然后统一导出3倍图，那这时候3倍图就是2倍图的1.5倍，导出的时候就发生了下面这样的情况：
虽然2倍图是像素对齐的，但3倍图却没有对齐，如果设计师没有仔细检查切图，就会发生线上图标发虚的情况，所以我们在输出切图时，一定要仔细核查，发现错误及时调整，免得造成不良影响。
除了以上这些，还有视觉大小、圆角、描边粗细是否统一的细节，当然，这些都比较容易理解，就不一一举例说明了，大家在做图标设计的时候一定要多多注意。
本次梳理的五纬自检法可以用在图标设计的自我检查、改版优化等多个方面，或许它并不全面，但一定具有参考价值，希望能给大家带来启发和灵感，我们也会更加努力，争取做出更好的作品和教程与在设计道路上的你们分享交流。
交互设计是什么？
交互设计 Interaction Design 也被成为IXD。交互设计建立起了人与计算机便捷沟通的通道，它的目标是创造可用性和用户体验俱佳的产品。作为UI设计师，我们在工作之中经常会对接交互设计师和产品经理，他们具有丰富的交互知识和经验。那是不是我们作为UI设计师，就只需要专心做好视觉层面的工作而不需要了解交互设计了呢？当然不是，在视觉设计层面更多地考虑布局和交互原则才可以让我们的界面更友好，视觉设计师是交互设计中非常重要的角色。
用户体验
在工作中经常听到UED（用户体验设计）和UCD（以用户为中心的设计），可见互联网行业非常重视用户体验，而用户体验绝不仅仅是要样子好看。有些设计师只关注视觉层面，认为产品战略等用户体验维度和自己的设计无关，那么就会和产品经理等角色处于不同的世界了。“他们为什么要我这么改？”、“为什么这里文字要浅一点？”有时不理解对方的思考角度就会造成争执。用户体验（User Experience）是用户使用产品的心理和感受，用户体验体现了产品设计以人为本的设计精神。其实早在互联网出现之前就有“顾客先点鸡就先有鸡”、“顾客就是上帝”这种说法，并且西方很多大公司如施乐、联合利华等大公司早在互联网行业出现之前就已经开始进行研究用户体验了，可见用户体验对所有产品是多么的重要。但是让人摸不着头脑的是，用户体验有时非常地主观：因为用户体验背后影响用户的因素有人的喜好、情感、印象、心理反应等，有些人明明有摩拜却要走很远找OFO，也有人只吃肯德基而不吃麦当劳。这些选择并不是优胜劣汰，而是有背后的原因的。要想让我们的产品被人喜欢，我们需要研究用户。
Image title
用户研究七种方法
但用户可能是几百万人呢！我们面对这样抽象的群体然后告诉自己要以他们为中心设计这多么抽象啊。这么多用户甚至有时用户自己的声音也是矛盾的。我们到底怎么样了解用户的心声呢？
用户画像
根据产品的调性和用户群体，用户研究团队可以设计出一个用户的模型，这种研究的方式被称为用户画像。用户画像是由带有特征的标签组成的，通过这个标签我们可以更好地理解谁在使用我们的产品。用户画像建立后，每个功能可以完成自己的用户故事：用户在什么场景下需要这个功能。这样，我们所设计的功能就会更接近用户实际的需要。比如我们现在要设计一个女装购物应用，那么我们可以做这个用户画像：小美，在北京国贸CBD上班，21岁，收入8000，喜欢淘宝购物和电视购物。使用我们产品的目的是为了寻找正品时尚大牌服装进行网购。小美因为刚毕业所以一方面喜欢大牌一方面又资金短缺（启发：我们的产品是不是要解决这两个痛点？）小美是时尚OL，审美很高，不喜欢俗气的设计。（启发：界面设计是否考虑不要使用粉粉嫩嫩的颜色而使用大牌的黑白色？）。看，即使小美并不真实存在，但是她指引了我们的产品设计。接下来，我们还可以给小美增加一个头像，在做设计时我们想象这个人就是真实存在的用户，她会对我们的设计有什么看法。当我们完成用户画像之后，还可以接着设计用户故事：小美经常需要在工作场合穿符合工作气质的衣服，也需要在约会时有晚礼服之类的服装，可是小美的收入有限，她眼光较高但是对价格过高的服装无法承担，她使用我们的APP就是为了寻找正品且价格适中的服装。那么，小美在哪里用我们的APP呢？这就要为小美继续设计一个用户使用场景了：小美在开会时可能会打开看看、在地铁里也会浏览、在清晨打开衣柜时也会浏览。基本来说是碎片时间，而且是有着装需求时。（启发：我们是不是需要把字号调大以适应地铁里颠簸的阅读环境？我们是不是需要设计省流量模式免得刚刚毕业的小美花一笔巨大的流量资费？）
Image title
用户画像
用户访谈
邀约用户来回答产品的相关问题，并记录作出后续分析。用户访谈有三种形式：结构式访谈（根据之前写好的问题结构）、半结构式访谈（一半根据问题一半讨论）、开放式访谈（较为深入地和用户交流，双方都有主动权来探讨）。用户访谈设置时要注意：用户不可以是互联网从业的专业人员、不可以提出诱导性问题、不要使用专业术语。用户访谈适合产品开发的全部过程。
问卷调查
可分为纸质调查问卷、网络问卷调查。依据产品列出需要了解的问题，制成文档让用户回答。问卷调查是一种成本比较低的用户调查方法。问卷调查适合产品策划初期对目标人群的投放，另外注意一个问题最好收集10个问卷，也就是如果你有10个问题那么至少要收集100个问卷才是有效的。要知道不是所有人都愿意耐心地填写问卷，很可能敷衍了事的回答会扰乱我们的判断。
焦点小组
焦点小组一般有6-12人组成，由一名专业人士主持，依照访谈提纲引导小组成员各抒己见，并记录分析。并且在焦点小组的房间里会有一扇单向玻璃窗，用户是看不到里面有谁的。而在里面坐着的通常是开发团队，他们可以清晰地看到用户是如何吐槽他们的产品的，但是他们没有权利直接和用户进行解释。焦点小组需要特殊的房间和设备，主持人也需要训练有素，焦点小组特别能够分析出用户在没有我们说明的情况下如何使用我们的产品和对产品的不满。
可用性测试
通过筛选让不同用户群来对产品进行操作，同时观察人员在旁边观察并记录，可用性测试的要求是用户不可以是互联网从业者而应该是真实产品的用户群体。但是可用性测试一般要有一个可用的软件版本或者原型供人测试才可以，在软件开发的前期不适合用这个方法。
眼动测试
使用特殊的设备眼动仪来追踪用户使用产品时眼睛聚焦在哪里，盲区是哪里。比如一个网站通过眼动测试可以知道用户的视觉会自动屏蔽网站的常见广告位置，这时如果希望提高广告的点击，就需要把广告位放置于用户聚焦时间较长的位置。眼动测试的设备比较专业，通常在小公司较难开展。
用户反馈和大数据分析
根据市场提供的反馈和数据得出客观的判断和合理的推测。用户反馈也是用户研究的一个重点，用户反馈主要是用户通过产品的反馈入口主动向开发者提出的意见。
有了这些方法，我们就能更好地了解用户和接近用户了。但是要注意，用户研究也是有陷阱的。比如：填写问卷和参与调研的用户可能并不是核心用户；提交用户反馈的用户之外可能有更多沉默的用户等。总之用户研究是一个必要的手段，但是仍然需要产品团队来对产品的方向做出决断。
用户如何使用产品
使用场景
刚才我们介绍了用户使用的场景是根据产品的功能和平台决定的。电脑的使用场景是正襟危坐，手持鼠标。而移动端则是随时随地使用，我们的用户可能在地铁里、在厕所里、在吃饭时、在上课中怕老师看到把手机藏在桌洞里、在工作中领导巡视后偷偷瞄、在辗转反侧睡不着的时候没有开灯地浏览等。这时我们要为用户考虑，如果他们在使用我们产品的各种场景中有什么需要，是不是需要省流量、是不是需要调整字号、是不是需要过滤蓝光、是不是需要护眼模式、是不是不方便看视频、是不是需要缓存视频、是不是界面目前单手不太友好、是不是扫二维码时需要个手电功能、是不是需要语音提醒、是不是需要清除访问记录。一个不考虑用户使用场景的产品一定是会遭到吐槽的。很久之前我听同事在吃饭时抱怨过“大爷的，也不搞个提示，早晨在地铁里用4G看流量以为是在家用WIFI，结果看了一集《甄嬛传》花了80块钱”、“哎？你是不是早晨开会时玩游戏了？你的比分都给我们推送了哈哈哈”。
Image title
我的产品中的用户使用场景表格
操作手势
网页设计所处的电脑端目前主要还是依靠鼠标点击来操作。鼠标点击的最小单位甚至可以是一像素。而移动端不太一样，移动端设备中我们使用手指来操作界面。一般来说，手指点触区域最小尺寸为7×7 mm，拇指最小尺寸为9×9 mm。也就是在我们@2x设计中为88px（或44pt）。这个神奇地88PX在移动端应用很广泛：很多表单单项的高度是88ox、导航栏高度也是88px等等。那您可能会说，也不对吧，有些界面上的图标看上去没有88px啊。是的，但是那只是视觉，我们可以通过增加图标点击区域的方式（比如给60像素大小的图标左右增加22像素的透明区域）来让图标更好点击。千万在设计时不要把操作区域放得特别近，可以把所有点击区域用88px标记看是否有重叠的情况，避免点击一个图标时误点另一个图标。除了点击区域，移动端还可以利用各种手势来进行各种操作的设计。主要的手势有：
Image title
单点触碰（Tap）：点击用来选择一个元素，类似鼠标的左键，是最常用的手势。
拖曳（Drag）：点击某个元素然后拖拽进行移动，类似现实生活中移动物体的感觉。
快速拖曳（Flick）速度很快的拖曳操作。
滑动（Swipe）：水平或垂直方向的滑动，比如翻阅相册和电子书翻阅的手势。
双击（Double-Click）：快速点击一个物体，通常会在放大、缩小操作中使用。
捏（Pinch）：两根手指头向内捏，捏的动作会使物体变得更小，通常在缩小操作中使用。网易新闻客户端中正文页面即可通过捏的动作来缩小字号。
伸展（Stretch）：两根手指向外推，现实中这种操作会使物体向外拉伸，元素可能会变得更大，通常会在放大操作中使用。网易新闻客户端中正文页面可以通过伸展放大字号。
长按（Touch and hold）：手指点击并按住会激发另一个操作。比如朋友圈的相机图标长按可只发文字。但是注意，长按不是一个常态操作，所以一般不太建议用户进行该操作。但长按操作又是有需要的，所以会把删除、只发文字状态等操作隐藏其中。
除了用户使用场景、点击区域、手势，那么还有一个影响我们设计的使用情况，就是用户怎么拿手机很重要。用户可以：单手拿手机、双手拿手机、直向拿手机、横向拿手机。我们需要考虑这些可能发生的特征进行手势互动的规划与设计。比如OFO为了让单手（说不定是左手还是右手）操作方便，主要按钮在下方并且做的很大，左右手都可以轻松点击。而微信的很多按钮也都是大长条，方便左右手的触发。横屏使用场景一般是游戏、视频等，所以一般的APP并不支持横屏操作（微信、支付宝、微博均不支持横屏操作），
Image title
格式塔：我们如何认知？
我们发现有些用户在使用设计好的界面时找不到一些重要的功能按钮。“奇怪，分享功能不就在更多按钮里面吗？”、“用户怎么连这个也找不到啊”你也许会说。我们要来了解一下用户是如何认知我们设计好的界面的。在初高中考试的时候您一定见过完形填空这种格式吧，“格式塔”源自德语“Gestalt”，意即“整体”、“完形”的意思。格式塔心理学认为，我们在观察的时候会自动脑补出一些逻辑和含义来，会让观察对象变成一个完整的、整体的、常见的形状。
＂研表究明，汉字的序顺并不定一能影阅响读，比如当你完看这句话后之，才发这现里的字全是都乱的。＂研究格式塔心理学对我们做互联网产品和设计有什么用呢？掌握格式塔的理论我们就可以让用户按照我们安排的“剧本”来交互和操作界面了。我们可以让用户比较容易地根据固定位置找到提交按钮、我们也可以让用户不经过太多思考在杀毒软件中点击杀毒按钮等。格式塔心理学对于我们做好表现层是非常有利的。格式塔原理主要有格式塔五大律和格式塔三大记忆律两个知识点。
接近律 law of proximity
格式塔心理学认为，人们认知事物的时候，会依靠它们的距离来判断它们之间的关系。两个元素越近就说明它们之间关系更强。但是接近也是有对比的，在复杂的设计中，我们要一边考虑它们之间内部的逻辑关系一边来排版。
Image title
A组和B组因为接近律而产生不同地阅读顺序
Image title
距离更近的信息暗示了他们有内在的逻辑关系
相似律law of similarity
认知事物时，刺激要素（比如大小、色彩、形状等要素）相似的元素我们倾向于把它们联合在一起或者认为它们是一个种类。比如，我们能轻易的分辨出拨号页面中拨号键和按键群的区别。
Image title
相似的元素暗示了他们属于一个种类
Image title
类似外形的单元会被我们人脑默认为同一属类
闭合律law of closure
就算没有外形的约束，我们也会自动把图形脑补完全。比如半个形状或者有缺口的形状我们不会认为是一条线，而是一个完整的形状。闭合是指一种完形的认知规律。
Image title
左边的图中我们会认为是圆形有缺口而不是一条曲线
右边的图形中我们会认为是圆形被三条线截断了而不是四个图形
Image title
界面设计中露出一半内容，闭合律让我们感知右边还隐藏着更多内容
连续律law of continuity
在知觉过程中人们往往倾向于使知觉对象的直线继续成为直线，使曲线继续成为曲线，也就是视觉的惯性。利用连续律我们可以让用户操作界面时不经过思考就点击一个固定的位置。
Image title
深谙连续律的流氓软件
成员特性律law of membership character
如果我们有很多同样的按钮，如何让某个更重要的按钮突出但是仍然让用户感知还是按钮呢？那就要用到成员特性律了。成员特性律赋予了集体中某一个元素特殊的一些刺激元素从而突出它。
Image title
独特的外形暗示了它与别的元素有不同的功能
Image title
拨号页面中拨号键与微博发布微博图标都与其他按钮不同
记忆律：我们如何记忆？
接着格式塔五大律还有专门研究用户记忆的格式塔记忆律。格式塔心理学家沃尔夫对遗忘问题所作的经典性研究得出了格式塔的三大记忆律。沃尔夫实验时要求实验体观看样本图形并记住它们，然后在不同的时间里根据记忆把它们画出来。结果发现实验体在不同的间隔时间画出来的图像都有不同。有时再现的图画比原来的图画更简单更有规则，有时原来图画中显著的细节在再现时被更加突出了。还有的比原来的图像更像某些别的我们都很熟悉的图案了。沃尔夫把这三种记忆规律称之为格式塔三大记忆律：“水平化”、“尖锐化”、“常态化”。
Image title哪个图形才是正确的？（图片来源：网络）
水平化leveling
水平化是指在记忆中我们趋向于减少知觉图形小的不规则部分使其对称；或趋向于减少知觉图形中的具体细节。
尖锐化sharpening
尖锐化是在记忆中与水平化过程伴随而行的。尖锐化是指在记忆中，人们往往强调知觉图形的某些特征而忽视其它具体细节的过程。在有些心理学家看来，人类记忆的特征之一，就是客体中最明显的特征在再现过程中往往被夸大了。
常态化normalizing
常态化是指人们在记忆中，往往根据自己已有的记忆痕迹对知觉图形加以修改，即一般会趋向于按照自己认为它似乎应该是什么样子来加以修改的。
Image title
情感化设计是什么？
了解格式塔会让我们把界面做得符合用户的心理预期，让用户能够明显地找到他应该找到的操作。可是用户好像还是不开心，因为用户觉得界面不好看。您是不是也会陷入这样的矛盾：可用性重要还是美感更重要？怎么样能够让我们设计的界面又好用还漂亮呢？情感化设计由唐纳德·A·诺曼博士提出，指的是设计中情感在所处于的重要地位以及如何让用户把情感投射在产品上来解决可用性与美感的矛盾。情感化设计是在抓住用户注意、诱发情绪反应以提高执行行为的可能性的设计。比如红色且巨大的购买按钮能够无意识地抓住用户的注意、可爱萌萌的卡通可以缓解用户网络不好时的焦虑等等。情感化设计有三个水平，它们是递进关系，分别是：本能水平（重视设计外形）、行为水平设计（重视使用的乐趣和效率）、反思水平设计（重视自我形象、个人满意、记忆）。
Image title
本能水平
我们都是视觉动物，对外形的观察和理解是出于我们本能的。本能水平的设计就是刺激用户的感官体验，让别人注意到我们的设计。这个阶段的设计会更加关注外形的视觉效果。比如各大电商网站的专题页面设计，更加注重抓眼球和外观的刺激。
行为水平
行为水平是功能性产品需要注重的。一个产品是否达到了行为水平，要看它是否能有效地完成任务，是否是一种有乐趣的操作体验。优秀行为水平设计的四个方面：功能，易懂性，可用性和物理感觉。比如好用的记事本APP等。
反思水平
反思水平的设计与用户长期感受有关，这种水平的设计建立了品牌感和用户的情感投射。反思水平设计是产品和用户之间情感的纽带，通过互动给用户自我形象、满意度、记忆等体验，让用户形成对品牌的认知，培养对品牌的忠诚度。马洛斯理论把人的需求分成生理需求、安全需求、社交需求、尊重需求和自我实现需求五个层次。我认为反思水平的设计就是提供给用户归属感、尊重、自我实现。比如Google每逢节日就会有一些符合节日化的设计、网易严选的空状态也会有品牌感的体现等。
Image title
淘宝空状态中的情感化设计
情感化设计的表达
Image title
画面 画面是情感化设计的重点，让错误页面或者空状态都成为一幅可爱的插画。
应景 让用户在我们的产品中体验到一些和真实世界一样的氛围变化。
游戏感 没有人喜欢做任务。试着让用户完成的任务变成游戏吧。比如每次登陆加金币，有足够的金币就可以获得什么称号。
冲突 冲突非常能够勾起人的情绪，营造一个竞争或者对抗的氛围，让用户感觉自己置身在一个比赛或者格斗中一样。
讲故事 给产品和无聊的图像一些故事内容，毕竟没有人讨厌讲故事。
隐喻 用一些大家理解，随处可见的事物表达一些无趣、生涩的概念。
互动 给用户和其他用户多制造互动机会，比如排行榜、推荐等，不要让用户感觉孤独。
交互八原则
当我们了解了产品五要素（产品设计的维度问题）、格式塔心理学（用户如何认知的问题）、情感化设计（如何让用户满意的问题）后，我还要给您介绍一大堆地交互原则。这些交互原则会帮助我们设计出更好用的界面，当然也可以帮助我们讲出这样设计的原因。不拿出一些理论怎么能够让别人信服你的设计，对不对？
费茨定律（Fitts’Law）
费茨定律指的是：光标到达一个目标的时间，与当前光标所在的位置和目标位置的距离（D）和目标大小（S）有关。它的数学公式是：时间 T = a + b log2(D/S+1)。这个定律是由保罗.菲茨博士（Paul M. Fitts）提出的所以得名。菲茨定律在很多领域都得到了应用，特别是在互联网设计中尤为深远。我们利用费茨定律估算用户移动光标到链接或者按钮所需的时间，时间越短越。比如有一个按钮在左下角，我们的操作可以细分为两个阶段：第一个阶段大范围移动到左下方向，然后再做微调到达这个按钮之上。所以这个时间受按钮和链接所在位置与按钮和链接大小影响，也就是说我们在做设计时要考虑光标默认会放在哪里、我们的链接按钮是不是太小了。
Image title
费茨定律说明距离越短、目标大小越大，那么光标到达目标越快
Image title
费茨定律在网页设计中的使用
Image title
OFO和苹果音乐APP都将按钮放置手指最容易点击的区域并且按钮足够大
希克定律（Hick’s Law）
希克定律是指一个人面临的选择（n）越多，所需要作出决定的时间（T）就越长。它的数学公式是：反应时间 T=a+b log2（n）。在我们的设计中如果给用户的选择更多，那么用户所需要做出决定的时间就越长。比如我们给出用户菜单-子菜单-选项，那么用户可能会很纠结；如果我们简化成菜单-选项，就会减少用户做选择的时间。
Image title
用户反应时间和选择数量的关系
Image title
我们应该减少用户的选择
7±2法则
让我们先玩个游戏，请记忆下面的文字，一分钟后移开视线：
挣 多 久 可 猫 风 师 袅 崩 六 酒 望
现在闭上眼睛想一下刚才的文字您能回忆几个？大概是五个到九个之间。1956年美国科学家米勒对人类短时记忆能力进行了研究，他注意到年轻人的记忆广度大约为5到9个单位之间，就是7±2法则。这个法则对我们做界面设计的启迪就是如果希望用户记住导航区域的内容或者一个路径的顺序，那么数量应该控制在七个左右，比如苹果和站酷网站的导航个数。另外，移动端底部Tab区域最多也是五个，而页面中的八大金刚图标也是八个。
Image title
苹果、站酷、Dribbble等网站导航数量全部是7±2
泰思勒定律（Tesler’s Law）
这个定律是说产品固有的复杂性存在一个临界点，超过了这个点过程就不能再简化了。我们只能将这种复杂性转移。比如我们如果发现页面的功能是必须的，但当前的页面信息过载，那么就需要将次要的功能收起或者转移。
Image title
Dribbble网站导航将更多功能收起在一个表示更多的图标内
防错原则
一个表单是需要填写完毕后方可提交的。但是用户有时会漏填或者忘记填写，这是用户点击提交会怎么样？很可能有些选项会被清空（比如密码选项基于安全考虑会清空cookies）那么用户还得重新填写。这时解决办法是在用户没填写完之前把按钮设置一个看起来不能点击的样式，用户想提交时弹窗：您还有内容没有填写完哦，然后把用户定位在没填写完的项目，让那个表单高亮。（是不是真的做到以用户为中心啦？）再比如推特只允许用户填写140个字，但用户一写爽了往往会超出140个字那怎么办？解决办法是给他在旁边倒数还能写几个字。看，这些都是我们为了防止用户操作出现错误所做的努力，防错设计就是要减少错误操作所带来的灾难。错误的提示当然需要设计师的设计了。可是也许您不知道有些错误提示含糊，用户并不知道到底错的是哪里，下一步该怎么办。比如仅仅登录功能就可能会有用户名错误、密码错误、网络超时、连续三次输入密码错误、用户名为空等不同的错误，而有些产品仅仅给出“出错了”，那么用户当然会不知所措了。正向的例子比如一次我在登录Google Mail时输错了密码，它提示“密码输入错误，提示：您在1个月前改过密码”。
Image title
BOO！APP输入密码时卡通会蒙住眼睛，输错时也会有提示
奥卡姆的剃刀法则（Occam’s Razor）
奥卡姆的剃须刀法则主要就是说我们做产品时功能上不可以太繁琐，应该保证简洁和工具化。比如产品中为用户提供了收藏功能是否就不需要喜欢了？提供了喜欢是否不需要点赞了？一定保证功能上的克制。
Image title
QQ将更多功能收起到了头像和加号图标中
防呆原则
有一个著名的交互书籍叫作《Dont make me think》，翻译过来就是不要让我思考。这句话一直在我做设计时响起：不要认为用户是专家！不要认为用户是专家！有时我们会觉得，点击汉堡包图标当然就是菜单啊！这个按钮长按不就会调出XX功能了嘛。但是我们忘记了普通用户可能并不理解什么是汉堡包图标、什么是抽屉式导航、什么是长按、双指滑动。更何况普通用户并不会研究我们的APP，在他们眼中我们的产品只是众多工具中的一个，我们何德何能认为自己的产品是值得用户花时间学习的？一定要把交互和设计做得简单，并且让用户在别的地方“学习”过。每个页面强调一个重要的功能而不要让用户做选择题。这些都是有效防呆的好方法。防呆和不要让我思考都讲的是我们的设计要自然而然。
Image title
运动APP KEEP 的页面中总有一个按钮是突出的
防止不耐烦原则
用户是很容易不耐烦的，你还记得你多少次看着视频加载条骂人吗？如果我们需要用户等待载入信息，一定要给一个有情感化的设计提示，避免用户产生焦虑。 比如很多游戏（比如决战平安京、王者荣耀等）加载时都会出现主角跑步的小动画，美团等APP下拉刷新时也会有几帧的动画来安慰用户。动画要好于苹果默认提供给开发的“转菊花”，因为卡通形象更有亲和力。但是好像还不够，用户需要掌控感，“哎？它一直加载，是不是死机了？”为了防止用户没有掌控感，我们可以为用户设计加载条或者加载提示。加载状态条很遗憾很多都是假的甚至是重复的，原因是其实要判断加载了多少M的素材的代码更占资源！我们本来想安慰用户等待加载的时间竟然会变得更长，那当然不行啦。于是很多时候我们会做一个假的加载状态条来安抚用户，我想您一定看过反复加载的加载条吧！加载条下的文案其实也是可以变得非常有情感化设计感受的，比如通常是：加载场景资源、加载素材这样的文案，但是有些APP需要很长加载时间时会给出这样的文案：导演正在准备、女主角准备化妆了、摄像师打开了灯光。是不是更加好玩啦？
Image title
美团和网易严选的加载动画
总结
交互知识其实关键还要在应用和分析。一方面，我们可以在工作中积累经验，不断地思考如何和同事配合一起研究提高产品在使用时的体验；另一方面，我们也要经常积累一些产品使用时发现的交互。建议大家平时可以收集你觉得不错的情感化设计或者微交互，比如发现饿了么在下雨天送货时会有电闪雷鸣和雨滴的设计；OFO和滴滴打车在不同节日也会把地图找车里的图标换成节日相关的图标；BOO！APP在输入密码时小怪兽会捂住眼睛；WPS在晚上写作时（没错就是现在）会提示你开启过滤蓝光的护眼模式等等。一个好的设计师一定是懂得交互的设计师，也应该是非常细心的设计师，也应该是懂得为用户着想的设计师。
蓝蓝设计的小编 http://www.lanlanwork.com
