如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
项目背景：为了配合世界杯做的H5活动，主题是DIY你的世界杯时刻
玩法：选择自己看世界杯的场景，可以在画面当中添加食物和自定义的小元素，另外根据场景的变换人物的腿也可以选择哦
项目周期大概半个月，和团队的小伙伴一起完成的，感谢@珊，@暖暖，@明明
使用工具包括sketch、ps、手绘板
ps：做H5真的是很累，工作量大，画的手疼，不过也积累了很多的经验，上线了好开心!
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
Material Design（以下简称MD）是谷歌设计的一套视觉语言设计规范，主要应用于安卓类应用。
iOS Human Interface Guidelines（以下简称iOS）是苹果公司针对 iOS设计的一套人机交互指南，目的是为了使运行在 iOS 上的应用都能遵从一套特定的视觉以及交互特性，从而能够在风格上进行统一。
相对来说，我们对于 iOS 的设计规范更加熟悉——因为考虑到成本，设计师进行产品设计的时候只会出一套 iOS 的设计稿，然后去适配安卓机型。
很少会针对安卓机型再出一套 MD风格的方案，这种现象虽然存在但是并不合理。不同的系统/平台采用了不同的设计语言，不同的设计语言会培养出不同的操作习惯。
例如使用安卓手机的用户平时见到的都是 MD风格的界面，突然下了一个 iOS风格的应用，那么操作起来就会很不习惯，增加了学习成本。
为了让产品可以适用不同平台用户的操作习惯，提供 MD 和 iOS 两套设计稿是非常有必要的。当然 MD 和 iOS 的差异不是一篇文章就能说清楚的，这里我就从阴影、导航和配色这三个方面来简单分析一下 MD 和 iOS 的差异。
对于不太熟悉 MD 的设计师来说，MD 意味着大色块+阴影。
为什么 MD 如此痴迷于阴影？
从它的名字就可以看出来——Material Design，这里的 material 指的是纸张；因为来源于现实生活，所以 MD 非常喜欢使用真实世界元素的物理规律与空间关系来表现组件之间的层级关系，而阴影就是最常见的表现形式：
同样的账户注册，安卓界面中按钮带有阴影而 iOS 界面中按钮没有阴影。
FAB（Floating Action Button），带有阴影的浮动操作按钮甚至成为了 MD 的一大招牌。相比较而言iOS更加扁平化。
产品导航体系主要由菜单栏构成，而根据位置以及交互方式可以分为顶部栏菜单、底部栏菜单和侧边栏菜单。iOS 的导航体系主要由底部栏菜单构成，而 MD 大量使用了顶部栏菜单和侧边栏菜单。
下面我们来看几个例子：
网易云音乐在 iOS 中采用的是底部栏菜单导航，而在安卓机型上导航栏被移到界面顶部，「账号」被收到侧边栏中。
b站在 iOS 中有底部栏菜单有5个标签，而在安卓机型中只有4个标签，「我的」同样被侧边栏收起来。
推特在 iOS 中使用的底部栏菜单导航，在安卓机型中导航栏被移到了顶部。
而 Apple Music 做的更彻底，在安卓机型上直接舍弃了底部菜单栏，采用了侧边栏作为主导航模式。
我们发现前两款国产应用在安卓机型上都保留了底部栏菜单，而后两款国外应用直接砍掉底部栏菜单。不只是 Apple music 和推特，很多国外的安卓类应用都没有使用底部栏菜单。而国内的应用因为考虑到 iOS，即使 MD 化也是阉割版的，属于 iOS 和 MD 的混血儿。甚至很多安卓应用在设计风格上往 iOS 靠拢，以b站为例，其5.11之前的安卓版本中都是没有底部栏菜单的。
当然这里并不是去评价 MD 和 iOS 哪个导航体系更好用，我说下自己的观点：
底部栏菜单的使用非常方便用户在单手握持情况下的操作，但是对于大屏手机来说，单手操作会显得很吃力。如果用户改由双手握持手机，那么从易用性上来说底部栏菜单没有任何优势。
MD 的方案更加注重对界面空间的利用，侧边栏菜单就不说了。以底部栏菜单为例，在安卓机型中用户滑动的时候底部栏菜单会隐藏，方便的用户可以看下知乎，安卓版的底部栏用户滑动的时候会隐藏，而 iOS 则是固定不动的。
侧边栏的优势还体现在可以提供更多的标签，底部栏菜单最多可以放5个。但是侧边栏菜单需要用户点击才能调出来，比较隐蔽，而底部栏和顶部栏相对来说就会显得一目了然，总之各有千秋。
至于为什么 MD 会抛弃底部栏菜单，我个人的理解是设备原因。因为安卓机型底部有三个物理按键，如果采用底部栏菜单作为主导航模式，容易造成用户误点击。
类似的还有 web 类应用，因为浏览器的控件栏也在底部，所以如果采用了底部栏菜单同样会造成用户的误操作。
MD 提倡使用高饱和度的对比色来提升产品的视觉表现力，也就是我在上面提到的大色块。同样的一个功能，从底部栏背景色、插画到按钮，我们可以发现 iOS 在色彩的使用上比较克制。
知乎之前的安卓版本使用了大面积的蓝色，后来改成跟 iOS 一样的白色。这样的调整褒贬不一，有的用户反馈这完全照搬了 iOS，要改回 MD。
产品界面设计中对比效果主要由配色、尺寸、间距和阴影来完成。MD 在配色和阴影上做的比较出彩，所以 MD风格的产品在视觉表现上更有冲击力。而 iOS 则显得比较小清新，追求扁平和简洁。所以我们无法去评判这两款设计规范的孰好孰坏，因为其各自的出发点就是不一样的。
当然前面也提到了 MD 和 iOS 的差异不仅仅体现在以上说的这三点，还有一些小细节也非常值得我们思考。我们都知道在 iOS系统中，用户向右滑动的时候会返回上一级页面。因为苹果手机没有物理返回按键，所以这种机制非常受欢迎，但是在一些特定场景的时候就会有问题。例如如果我想复制微博里的「一曲肝肠断，天涯何处觅知音」，选中光标从左向右滑动，这时就会返回上一级页面，特别不方便。所以我只能从右向左进行复制，我后来试了一下微信和 QQ，发现默认复制的是整条动态，这也算是一个折衷的方案。
这篇文章并不是去评判 iOS 和 MD 两种设计风格孰好孰坏，也不是让我们现在就去为自己的产品做出两套设计稿，这个目前来说也不太现实。很多国民类应用都只采用了一套设计稿，大家都这么做，整个大环境就是这样。
但是还是那句话：存在不一定合理。出两套设计稿虽然现在看起来不现实，但是我们也要做好准备，要有危机感。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
每当提到设计方法论时，总难免会给人一种比较虚空偏理论，或者说比较难应用到设计实战中的感觉；但是这一次，经过了自己的实践之后，我觉得确实有一个比较靠谱的视觉推进方法可以分享给大家，所以才有了这篇总结。
先直接概括一下这个方法，极限推敲法：遇到难题时，先把问题拆解成一个或者几个维度，选取某个维度，往两个极端进行尝试，随后逐渐中和极端方案，逐步找到自己想要的预期点，明确该维度的方向。
例一：雄狮的logo设计
期望比较简洁的同时，又不能丢了狮子的辨识度，比较纠结的是，这个度该如何把握？
按照极限推敲法来，我们先确立「极简」和「写实」作为关键维度，然后优先尝试两端比较极限的方案；了解清楚两种极限的可能性之后，继续尝试，加减细节，寻找一个符合预期的图形状态；最后的定稿，既保持了鲜明的特征和辨识度，同时也不失简洁。
（推进过程中出方案的顺序在图中用数字标出，「1」即为第一次尝试，以此类推；具体推敲过程不在此赘述。）
例二：网易邮箱大师Tab icon改版设计
在网易邮箱大师5.0改版中，常驻底部的 Tab icon 是单独进行推敲优化的。在之前的版本中，图标的样式相对比较的刻板，偏向纯表意，表现力不强；在5.0视觉改版的策略中，我们是以「优雅」作为一个关键方向进行优化的，所以轴的两端就定为「刻板」和「优雅」，虽然并不是完全对立的两个方向，同时也包含了一些「表意」等其他层面的因素，但是其中有部分感受是存在对立面的，我们就以此作为关键点进行推敲。
可以从图中看出，在不影响表意的前提下，各方案间的图标改动非常微小，在有限的空间内去做一些变化；几经尝试之后，还是选择了更常规更偏表意优先，但是也适当加入曲线因素体现「优雅」的方案作为最终方向。
例三：内容信息流列表设计
期望内容列表的展示能给人以精品的感觉，但又不失去过多的阅读效率。
首先确立以信息量的多少作为关键维度，在形成了初步的样式之后，继续调整在一屏内条目的疏密以及排版来感知信息量的多少；在尝试之后，最终讨论决定，在初期内容源还不够「精」的情况下，还是最右侧方案的信息呈现更为合适，并以此做了最终调整。
很多时候，极端情况是很难想象或者预判出来的，只有尝试之后，才能更清楚的了解到实际会出来什么效果，达到怎样的预期；在多次推敲之后，就能更好的了解期望的状态到底应该在哪个「位置」，让模糊的概念逐渐变得清晰；该方法最大的好处在于，让尝试变的更有目标，而不是胡乱尝试，让每一次尝试都更有意义。
这个方法也算是视觉标准可量化的一次探索，我称之为「伪量化」，因为最后的决策仍然是依靠感官去衡量判断的；把错综复杂的感官拆解成一些更具体单一的关键维度也是非常关键的一个步骤，是开始「伪量化」的前提。
在以上所举的例子中，有 logo设计，icon设计和界面设计（所用到的例子都是实战，均为过往项目）；其实对象可以是各种各样的设计，只要存在某种程度把握上的纠结，无法预判或者不明确方向的情况，都可以通过这个方法有效的推进并找到当下的最优解。在实战中，假如没有那么多的时间和精力去细化，可以仅选取关键维度，然后在关键维度内尝试方向探索性的方案（粗略的尝试），只要能感受到差异，即是有效的方案；当然如果有充足的时间，那完全可以精细化出方案，这样方案所传达的感受也会更加精准细致。
要注意的是，这个方法并不是一种妥协的方式，也不是一种择中方案；我们所要寻找的是在一个维度中感受符合预期的位置，如果适合，也可以是非常激进的方案。
这个方法只是提供了一种思路，如何更有效的尝试方案来推进视觉产出的思路；其中最主要的环节还是靠自己去摸索出方案的实践部分，去实打实的尝试；在这其中投入精力的多少，也受其他客观因素的影响，例如项目截止时间等等；不过我认为个人的主观能动性才是主导，一定不能懒，要作图，要动起来，仅靠凭空想象方案在脑中「出图」，一来说服不了别人，二来自己也底气不足。只要图形图像语言一直存在，那么我觉得对视觉设计师来说有一句话就是永远的真理：没图说个XX。
本文主要从需求类型、表现形式、如何做正确设计来分析，设计师应如何洞察需求本质？如何做正确的设计？
有这样两种情况在设计师工作中经常会遇到：业务方改来改去，经过几十遍的修改最终选了第一稿；一群非专业的人或领导在设计师身边指来指去，出发点都是「我觉得」主观感受，没一个能提出有点含金量的意见。
实际工作里我们经常遇到业务方一直在针对几个问题要求设计师在不停修改 ：颜色、大小、氛围等。但是却很少看到设计师跟业务方沟通设计结果出现的场景？是为了达到什么目标？导致设计师一直处于不停「改改改」的苦逼状态。
本篇文章内容为：设计师如何洞察需求本质？如何做正确的设计？
设计师在工作中接触到的需求一般分为三类：业务需求、用户需求、产品功能需求。
业务需求是指产品和公司为了实现商业目标产生的需求。不以结婚为目的的谈恋爱就是耍流氓，不以赚钱为目的的产品也是耍流氓，说来说去最终目的都是为了实现商业价值。
业务需求多数来源老板、公司战略、运营策略等，一般围绕如何提升公司销售额度、如何提升用户量、如何提升利润、如何提升用户转化、如何推广运营等等。
用户需求是指通过调研或客服投诉搜集到的用户反馈，一般来源于用户在使用产品过程中的需求。在 kano模型中对用户需求一般分为：基本需求、期望需求、魅力需求、无差异需求、逆向需求。针对这些需求公司都会结合发展战略与优先级去分析，可分为必做、应做、可做、不做。
基于业务和用户价值进行需求分析的结果，为满足业务和用户提出的一组产品功能列表，功能需求构成了一个完整的产品抽象模型，是团队之间进行产品设计研发的基础。
这有个万能的公式：销售额=流量x客单价x转化率
拿某某购物中心举个例子：销售额就是我们听到的某某购物中心在五一期间卖了xxx亿的额度，流量就是五一期间有多少顾客进来了这个购物中心，客单价就是额度除以购买人数，转化率是订单除以访客。在同等访客量的情况下订单越低，转化率越低。
这个公式换到互联网产品中也一样，多少用户进入 app，有多少人产生购买行为，以及每个人购买的单价，这些因素都是决定这个产品最终的销售额。
业务需求是流量增长
在产品发展初期，面临的第一个问题就是访问量，也就是产品的曝光率，用户到达率。我们在生活中会经常看到一些公司请一些自带流量的网红、明星来做宣传为公司带来一些流量。在互联网产品中常见的一些流量增长的策划为拉新奖励、高流量为低流量导流、免费效应等。
拉新奖励：推荐有奖、注册有奖。
导流：高流量为低流量导流。
免费：0元购、秒杀等。
业务需求是活跃度
产品活跃度是指用户每天开启 app 的频次，每天停留的时间。不同属性的产品活跃度的规律也不一定，比如：新闻类、理财类、工具类的产品，针对不同用户、不同属性的产品提升活跃度的方式不一样。
比较常见的提升活跃度的策略是：奖励刺激、有价值的内容吸引、通过成长等级来引起用户参与。
奖励：补贴、答题奖励、分享得积分、返现金、签到、打卡奖励。
内容：推送激活、话题讨论、焦点&热点内容。
荣誉感：排行榜、等级。
业务需求是用户留存
经过运营渠道推广流量提升后，倒入一些新用户，用户经过一段时间体验后是否留存关键在于：用户需求被满足、以及体验流程流畅决定的。当用户发现产品对自己没有价值、体验没有好感就会选择离开。
比较常见的留存策略是：翻倍奖励、产品体验迭代优化、评分、用户成长体系等。
业务需求是品牌感知
用户对同类产品的选择很大程度取决于产品品牌的影响力，业务方在推广中也会有针对品牌提升感知力。
比较常见的有：h5的情感推广、公益活动等。
网易的h5活动在2017年经常刷爆全屏，他们主打的是情感系列，深入人心，不仅提升主品牌影响，也提升了用户对网易哒哒的产品感知。
小结：业务需求设计要点
对于用户提出的一些功能的需求，设计师不能盲目听从，需要真正去识别有用的用户、有价值的需求。我们可以通过一些调研、观察，分析用户的特征、习惯、场景和行为，以及期望得到什么效果，挖掘用户的内在动机和原因，只有搞明白了用户需求的本质，才有可能做出用户满意的产品。
KANO模型定义了五类需求，我主要针对下面3类经常遇见的说下，也可以分为3个步骤去做：基本需求 — 期望需求 — 魅力需求。
用户基本需求
指用户认为产品必须要有的属性或者功能，比如：购买流程的完整体验、完整注册流程，这些基本需求一般来源产品初期迭代中的优化完善。
用户期望需求
用户在主流程体验过程中增加一些利于自己快捷、便利的需求，这些功能并不影响主流程体验，比如：购买过程中对收藏、历史价格对比、搜索等，这些期望需求可以转化成一些潜在的竞争优势。
例如：下图用户需求搜集中用户集中在对历史价位走势、提醒等功能的一些期望需求上。
△ 根据用户期望需求调整的设计构思
用户兴奋魅力需求
魅力需求是每一个产品追寻的方向，给用户带来一些超越他们预期的体验。可以理解为在满足用户的基本需求、期望需求的基础上给用户创造附加价值体验，属于创新设计思维范围，可以提升好感及忠诚度。比如：京东推出vr口红试妆体验，天猫推出试装直播等。
小结：对用户需求设计要点
注册流程简化
大量注册资料让用户失去耐心，流程简化提升新用户流量。
漏斗数据下的流程转化
在公司xx流程里，我们看到每个页面的流失漏斗，发现用户在购买决策「结果分析」那一步流失特别多，决定砍掉了介绍步骤，把之前5步改成三步决策。
这是一个非常妙的设计：对用户来说，直接触达决策前的结果分析，用户对结果的强感知转化下一步操作，从数据来看这一步转化率提高不少。
△ 公司实际创新项目不做露出具体页面
留存
新用户进入 app 后，一般分为3个时期：振荡期间、选择期、稳定期。震荡期用户流失较多，经过一些市场对比后选择留下的用户会进入一个稳定期。一个用户在产品内留存越久，带来的商业价值越高。
在产品体验流程中根据不同需求，策略也有不同。举一个 ofo 退押金例子：ofo 在不久前遭遇了资金问题，我在退押金这一流程体验中误操作了多次，最主要问题就是信息引导。
△ 主流程中对用户再三挽留
△ 主流程操作中弱化强需求信息
小结：对功能需求设计要点
在需求发起到设计目标会经过这样几个过程：罗列与信息搜集➝深入挖掘➝聚焦核心➝创新发散➝实现与落地。
这五步的节奏是：先发散 – 聚拢 – 再发散 – 聚拢。
罗列与信息搜集
深入挖掘
5w：what、when、wher、who、why这五步定位法，是让设计师清楚需求的本质与动机。
聚焦核心：滤 — 炼 — 导
结合用研结果、数据结果、定位结果去除不重要、不必要的信息、提炼有价值的信息、导出核心关键。
创新发散
我们发现前三步是基于一些基础方法论，让设计师具备一些观察用户、分析用户行为、洞悉本质、同理心的训练，目的是让我们把思维聚焦在核心的关键点上，而真正超越预期体验的来源于第4步创新设计思维。
实现与落地
对于设计师，解决问题能力远高于单纯作图能力，而了解需求本质是解决问题的前提条件，在没有明确需求的动机和目的，设计方向是迷茫的。洞察、分析是设计师的基本能力，勤于思考分析，做正确有价值的设计。
如今心理学和行为学已经是UX和产品设计领域当中诸多理论的来源和实践的依据，它们是UI/UX设计师和产品设计师的必修课。
系统的心理学和行为学的知识，对于设计工作其实有着极为深刻的影响。用户体验设计很大程度上是在心理学和行为学的研究基础上逐渐进化和发展起来的，对于想要深耕这一领域的设计而言，心理学和行为学是绕不开的必修课。
心理学和行为学早已并非是单独存在的学科，它们和许多不同领域的知识交汇融合，围绕着人性进行多维度全方位的探讨。如今我们所熟知的许多优秀的产品，也大多从这些领域技汲取营养，不少四两拨千斤借力逆袭的成功案例，也往往借助的是这些深深植根于人性的杠杆。
这两个宏大的命题并非简单几段话说得清楚，但是这当中有许多有意思的现象，非常具有启发性。许多植根于人性本能中的非理性心理和行为，在日常生活中主导着我们作出决策，有的是一些不易觉察的心理效应，有的仅仅是不算太显著的认知偏差，但是在设计和实际产品当中运用，则常常呈现出极为惊艳的效果。
对于这些心理学效应和认知偏差，设计人员需要在自身进行决策时候尽量回避，避之不及确实会面临车毁人亡的局面；在设计过程中，可以巧妙地将这些因素纳入到考虑当中来，因为它们同样可以影响用户，成为撬动产品打开局面的重要的契机。
幸存者偏差（Survivorship bias）虽然被称为认知偏差，但是实际上，它更接近于是一种逻辑谬误下产生的一种错误认知。幸存者偏差指的是人往往会注意到某种经过筛选之后所产生的结果，同时忽略了这个筛选的过程，而被忽略的过程往往包含着关键性的信息。
读书无用论是一种最常见的幸存者偏差。读书无用论中最多的说法是XX并没有好好上学但是照样挣大钱了，而XX努力读书反而混得并不好。
这些个案并不涉及到具体数据，从数据角度上来说，也不难解释这种“主观感受”的成因。根据第六次全国人口普查，大专及以上学历的人口仅占总人口的8.7%，高学历者落魄更容易受到媒体的关注，而低学历中的成功者也常常能够吸引普通人的目光，即使低学历人口中涌现的成功者的比例远低于高学历者，由于基数差异，这个数值对比也是相当可观的。正是因为忽略了数据中沉默的大多数，读书无用论这种错误的观点才“得以成立”。
枪击案中的幸存者大多伤的是手和脚，那么是否要加强手脚的保护呢？实际的情况上，在躯干和头部中枪的人，大都没有挺过来，相反更加需要保护是躯干和头部。就像能活着回来的战斗机中弹的通常都是翅膀和机身，因为引擎中弹的大都已经牺牲了。这个案例也许能够帮你更好地理解幸存者偏差。
对于事件发展过程中筛选机制的忽视，容易让人产生错误的结论，从而导向错误的方向，在设计决策过程中，出现这样的过程中，极有可能是致命的。
在需求分析和调研过程中，如果忽视了幸存者偏差，很有可能搜集到的数据，体现的仅仅知识少部分用户的需求和想法，最终将伪需求和小众需求当作主要需求来作为设计易于，则可能让产品从一开始就走向万劫不复。
在搜集产品的用户反馈信息的时候，也很容易遭遇幸存者偏差。绝大多数的用户在正常使用产品的时候，如果没有合理的触发机制，或者产品没有特别突出的特点的情况下，很少会主动“好评”，相反，遭遇问题的用户则更倾向于主动吐槽并分享糟糕的体验和问题，这也很容易造成“这个产品哪哪儿都是问题”的错觉。
基本归因偏差这个名词同样源自于心理学，比较学术表述是“对他人行为进行归因的时候，往往会倾向于把别人的行为归因为其内在因素，而低估了情境因素的影响，而对于自身的行为归因的时候，则倾向于把自己的行为归因为外在因素，而忽略自身因素的影响”，基本归因偏差的含义表述可能有点拗口，但是并不难理解。
基本归因偏差是一种重要的人类心理防御机制，是人类进化过程中所产生的一种局限性的思维定势。和复杂多样的环境因素相比，行为者本身的问题是更容易被发现的，所以观察者在观察行为者的时候，诸如社会环境、社会角色、情景压力等外部因素更难以引起注意，将问题更多归因于行为者本身的行为举动和个人内因。比如，当看到某个人生活拮据的时候，会简单归因于他不够勤奋等等。类似的，在面对生活中的诸多不顺的时候，直接归因于“水逆”而很少会仔细思考是否有自身的原因。当事人和观察者对于事件的归因不同，争议和问题往往因此而起。
对于UX设计师而言，基本归因偏差是矛盾和问题的常见的来源，而且这种认知偏差存在于用户也同样存在于设计师本身。无论是面对设计问题，还是做调研，进行测试，涉及到多方面影响因素的时候，基本归因偏差都会对设计方案、设计决策产生影响。
这需要设计师能够清楚地分辨“我的观点”和“我的行为”，能够真正将自己从自己所处的立场、角色、职能上抽离出来，复盘整个局面，首先接纳全部的状况和现实，包括他人的想法、观点，先不去判断对错，而是先接纳所有的状况和全部的元素，明白事物的动态变化过程，不再单一地去判断，任何一个视角必然会存在一个立场，它们是当前事物诸多层面中的一方面而已。
面对复杂多变，但是因果清晰、逐步成长变化的事物，用动态而全面的思维方式来看待，才能真正看清楚事物变化的轨迹，更有针对性地设计，作出合理的决策。
后视偏见（Hindsight Bias）则是另外一种常见的认知偏差，它指的是人在事情发生以后觉得自己在事情发生之前就已经预测到结果了，实际上，他们并不如自己想象的那样能够准确的进行预测。这种行为在观察者眼中常常会被称为“马后炮”。
后视偏见在很多人身上都存在，人的主观性和记忆本身会造成这种偏差。对于设计工作者而言，厚实偏差的存在无疑是会带来负面影响的。后视偏见会让人沉迷于“我早就预料到了”这种感受当中，相应的无法真正从事件中真正汲取到有用的经验，也难于使用公平的眼光来评判客观事物和他人，主观上也很容易选择性忽略许多客观条件和事实。
后视偏见确实会给人带来快感，相应的，会在工作中影响决策的正确性和公平性，从而带来潜在风险。纠正后视偏见的方法并不复杂，在确知事情结果之前，记录下自己的想法，事后做验证，并统计成功与失败的数据。
事件的结果并非是最好的判断因素。在调整好认知之后，对于事件和情况的过程和相关因素进行相对全面的衡量，尽可能少的掺杂主观情绪来进行分析，这样的决策的有效性会更强。
曝光效应（the exposure effect）也被称为多看效应（和多看这款应用并没有关系），接触效应。曝光效应本身的描述也不复杂：人会更加偏好自己熟悉的事物。在社会心理学领域，曝光效应的另外一个称谓是“熟悉定律”，这可能更好理解。
自己总倾向于购买自己熟悉的品牌的产品，谈恋爱的时候总会有绕不开的老同学和老朋友，这些都是曝光效应之下的人类认知偏差。我们常常说的“一旦接受了这个设定还挺带感的”就是对于这一效应的真实侧写。
曝光效应在广告行业、产品营销和社交媒体有着天然的亲和力，对于营销人员、运营人员、品牌设计师和UX设计师而言，这一效应的活学活用是非常有必要的。
不过曝光效应本身并非是无条件的，相反它和产品属性、品牌设计、企业形象以及运营策略有着极为紧密的关联。
曝光效应在许多不同的社会实验当中呈现出一种不稳定性，可能是因为相关的影响因素多而复杂。有的研究表明，即使产品和服务曝光过程中绝大多数的内容是正面的，公司和企业本身的名气高低和品牌形象，同样会影响曝光效应的高低。
曝光效应在发挥的过程中，即使曝光的内容全部是正面的，对于用户的影响也会逐步呈现出一种矛盾性，也就是用户会对产品或者服务产生正面联想的同时，还会产生不利的、负面的感受。
曝光效应发挥效果最好的时段，始终是绝大多数用户对于产品认知不足的阶段，这个时候曝光效应会最大化的对用户产生影响。
值得特别注意的是，一开始就让人觉得厌恶和不适的产品是无法产生正面的曝光效应的，如果一开始存在冲突，曝光效应只会加深误会和冲突。过量的曝光一定会带来厌恶，由于复杂而大量不可控的影响因素，甚至会导致失控式的崩盘。
对于UX设计师和产品的策划和运营者而言，在合适时机加大产品的正面曝光是有效度最高的策略。深入了解曝光效应，才会明白何时放，而何时收。
可得性偏差（Availability Heuristic）也是一种常见的认知偏差，它是启发式偏差的一种，人们往往会根据自己认知上的易得性来判断事情的可能性，甚至于会根据自己看到和听到的只言片语来做决策，而不是根据统计学数据和系统化的知识来做判断。
可得性偏差同样是一种广泛存在的认知偏差，用户认为自己熟悉的、更容易获得的信息在复杂的系统中发挥着更大的作用，主观上忽略其他的部分。可得性偏差和熟悉定律（也就是曝光效应）有些许共通的地方。
可得性偏差在金融领域有着巨大的影响，许多准备上市的企业会在上市前夕吸引大量的新闻报道，让投资者在信息的狂轰滥炸之下不知不觉地去关心，无意识地去了解，并最终购买这支股票拉高股价。这种策略就是借助投资者的可得性偏差来实现的。下面是谷歌搜索关键词阿里巴巴的频率和阿里巴巴的股价变化情况，两者呈现出一种明显的关联性。
可得性偏差的广泛存在，使得设计师甚至可以在自己的产品中借助有有意识的设计，来引导用户的行为。作为设计师本身而言，可得性偏差同样是会影响到设计决策，因为可得性偏差同样会影响产品设计中的设计决策的走向。消除可得性偏差的方法也不难，需要设计者不要被已知的信息和容易想起来的信息所左右，而是尽量深入地从多个角度来考虑问题，跳出固有的思维定势，多角度看待问题，作出合理的决策。
锚定效应也被称为沉锚效应，它一样是一个听起来高大上但是含义并不复杂的概念，它指的是人们对某人某事作出判断的时候，容易受到第一印象或者第一信息的影响和支配。这种现象就像船只被锚固定在特定位置而无法移动，因此而得名。
人们在做判断的时候，往往会受到第一印象和首个接收到的信息的影响。就像鸟类会将第一个看到的生物视之为自己的母亲一样，人们往往会借助第一印象来作为后续判断一个事物的参考标准，甚至在人际交往中都是金科玉律。即使是没有刻意地去参考第一信息，人们也会在潜意识当中，重视第一次获得的数据。
锚定效应的另外一个层面是对比，当拥有了锚定的参考之后，用户在后续会以此为基准进行对比。对比并不存在绝对意义上的好坏，但是在不同的基准之下，或者说参考的基点不同的情况下，发挥的作用其实是截然不同的。
举个简单的例子，粥铺的服务员问客人“加一个鸡蛋还是加两个鸡蛋”比“要不要加鸡蛋”所产生的销售额高出不少，因为前者会人的心理基点是“要加蛋”，而后一种问法，则让客人先思考“要不加蛋”，前者的转化率自然更高。
正是因为先入为主这种心理现象大量影响着用户的决策，使得市场竞争中，许多企业和产品都不得不去力图争个第一，赢得主导权。
iPhone X的刘海屏对于手机市场有多大影响想必大家有目共睹。而后续的蓝绿两厂的升降式摄像头设计和“真·全面屏”也因为其突出性和强大的“第一印象”的构建，而赢得了无数赞誉。
但是静下心来想想，开机解锁还要等待摄像头升起，好像还是一个蛮奇怪的事情。可是最早的“真·全面屏”确实够惊艳。
优惠促销是各种产品销售中最常用到的一种策略，而在花样迭出的促销手段当中，有为数不多的集中手段，呈现出令人惊艳的效果。
免费的赠品和满额减免就是这其中的典型。购买产品A，赠送一款B，这种赠品策略的玩法可以说是效果极佳，早年间阿芙精油声名鹊起的阶段，其中最令用户欲罢不能的，就是他们的“赠品”。用户每一次购买精油产品的时候，阿芙的团队会随之一起发出精油的入门口袋书以及多达五六种精心挑选的精油试用装，这种体贴且让人觉得“狠赚一笔”的心理感受，使得许多新用户迅速转为稳定客户。
置于满多少减多少，则同样是一种成功的促销策略。各种电商平台和购物节都会采用花样繁多的满减服务，相应的，用户在这种服务之下，总忍不住“凑单”。平心而论，真实的情况是，用户购买了自己真正需要的商品，以及一系列为了凑单而同时购买的非必须商品，对于商家和平台而言，这种策略很好的拉高了销量，也减少了许多商品的库存，而用户也感觉自己赚到了，皆大欢喜。
至于“包邮”，我就不赘述了。这个效果同样非常突出。
相比之下，打折促销所产生的效果，好像就没有那么显著和“暴力”了。归根结底，问题是出在“免费”的认知偏差之上。对于用户而言，无论是赠品、满减还是包邮，本质上都会让用户迅速地在大脑中形成一种“免费获得某种东西”的感觉，赠品对应的是免费的物品，满减对应的是免费的现金回馈，包邮则是免费的邮寄服务。
心理学家和行为学家通过大量的实验验证了免费确实和折扣等其他的促销策略有着本质的差别，它所带来的非理性行为要明显太多，免费的吸引力无与伦比，说是认知偏差毫不为过。
你一定特别想点击上面的图片免费下载素材。不好意思它只是个图片。
人类本能地惧怕损失，选择免费的赠品不会有损失，而相比之下选额其他则会让人在潜意识中产生风险感，可能会蒙受损失。这样一来，免费的赠品在人心中的价值就开始高于实际价值，随之而来的就是非理性消费。
在设计的过程中，想要让免费的认知偏差发挥效果，让人快速地感知到这种“免费获得”的感受，应当是明显的，否则很难快速地触发非理性的反馈。
人类先天的生物性无处不在，我们自诩的理智在现实生活中发挥的作用并没有我们想象中那么多，无处不在的各种认知偏差主导了太多的
端午节到了，阿里巴巴TXD的小伙伴们准备送你只'口味粽'，祝大家假期玩的开开心心，点击图片识别二维码便可生成你专属的‘口味粽’。
01
—
项目背景
阿里对待中秋节会更加的浓重，每年中秋节所有的员工都会收到精美的月饼和祝福。相比之下我们的端午节就过得比较平淡了，于是咱们团队的小伙伴们准备做一个H5，用我们的自己的方式送大家以及自己一枚口味粽。
整个项目的初衷有两个，一个是代表TXD送给大家端午节的祝福，另一个就是用团队协作的方式在极短的时间里面设计一款H5。
02
—
项目思路
对于我们来说最大的挑战是时间。距离端午假期仅剩一周不到的时间，而大家都有自己的业务工作，难道放弃？既然已经立下了flag，怎么也得完成。我们制定了项目的节点，并且通过多枚成员分工协作去完成它。
大部分项目是需要协作完成的，一旦协作不好，项目进度则事倍功半。所以最考验大家的是怎么进行更的协作。通过有效的决策，我们让协作变得顺利。
我们通过小组会议确定玩法后，分配人员进行文案和交互设计。由主设计师定下设计风格，其他设计根据风格绘制UI以及其他场景素材。所有素材实时同步在项目群里，确保保持统一的风格。
03
—
项目介绍
首先我们的粽子不是一般的粽子≧ω≦，我们粽子的馅儿都采用各种珍稀的食材。
这些“珍稀”食材通过我们神秘的构造机做成不同的神奇粽子！
更多不一样的粽子，通过我们的机器定制属于自己的神奇粽子。
本次的项目属于我们的团队成员通过空闲时间在短时间里面完成的。只是想送给端午节的童鞋们一个小小的祝福。
今天聊些设计基础部分。
设计工作中，我们总会接到不同场景、不同目标用户的业务需求，需要不同风格的设计方案支持，但无论是什么风格的设计，用户都会有一个共同诉求——「品质感」。
所谓品质感其实就是产品给人的一种严谨、专心对待的态度。同样一本书的封面，粗糙纸的封面和细心打磨的小羊皮封面就是不同的概念。
例如无印良品和爱马仕，两者都会传达给用户一种「品质感」，虽设计方向不同，但他们有一个共同的特性——对细节的深度打磨。其实品质感就是来源于产品对细节的深度考究与打磨。
一款有品质感的设计，随之带来的是用户使用中的舒适度、好感度、信赖感。
界面设计也是一样，也会带给用户一种品质感，其同样是源于设计师对界面的每处细节的深度考究。
界面的品质感主要来源于界面四个维度、界面中的结构、界面中的图形、界面中的颜色和界面中的动态，今天说如何通过结构提升界面品质感。
界面的结构在用户体验中起着重要作用，其相当于界面设计中的「骨」，界面结构中的细节更是会直接影响到整体设计的品质感。那么具体结构中的细节体现在哪里？
信息关系包含界面中的组合、层级、分割等。
组合
「物以类聚」，界面内需明确传达各元素间的关系。
辅助信息服务于主体信息：辅助信息为主体内容的延续说明或补充操作，作用为服务于主体内容。同一组合内，信息间需有明确的关系与合理的顺序，且辅助信息不能抢镜。例如朋友圈，清晰传达关系的同时，以内容为主的阅读方式不会被头像内容干扰。
关系越紧密的内容距离应越近：形式不变的基础上，元素之间的距离越近，越易被视为同一组合。距离相同时，横向排列的内容接近度相对更高。
层级
界面的层级关系主要体现在主次、优先级、层数。
主次分明、避免层级混乱：清晰的层级结构，能让用户更快的获取重要内容，同一组合下其信息一定有主要展示和次要展示。可以通过位置、面积、颜色三个维度建立主次层级的对比度。
同一组合下，有且仅能有一个最重要的内容：当所有的内容都重要，也就等于所有内容都不重要，信息的优先级不取决于主要信息是否够大，而是主要信息和次要信息的对比度。
同一页面，信息层级不宜过多：过多的信息层级会让页面变得复杂，增加用户的理解成本。冗余的信息展示会让界面变的凌乱琐碎，一定程度上干扰用户使用体验。一般情况下界面应控制在3层信息以内。
主次分明、优先级明确、层级适当会让界面的信息传达更清晰明确，进而增加用户的使用中的舒适度。
分割
分割是用于区分不同信息的方法，大概可以分为距离分割、线性分割、面性分割（背景色分割）、颜色分割。
距离分割：增大两模块的距离达到内容分割内容作用，元素间的距离越远，越不易被视为同一组合。其好处是可以省去分割元素，减少视觉层级，让界面更干净、明快。
线性分割：线性分割是目前界面中最常用的分割方式，其优势是线自身「较轻」，不易干扰用户。值得注意的是线本身不重要，不宜过度强调，应点到为止，所以线的颜色不宜过重。
面性分割/背景色分割：当处理多层级、信息复杂的场景，在单个模块里已经用了线性分割的情况下。可能需要更强一点的分割方式来表明模块与模块间的关系，这时我们可能需要面性分割方式。这种方式像是灰色的背景上，罗列着多张卡片，能更明确的表达两组内容的分割感，但其缺点是会较明显的增多界面层级。
颜色分割：当信息的表现形式重复性较高，容易被看混的情况下，颜色分割是更为合适的选择。
能起到分割作用的前提下，分割方式越轻，越不会干扰阅读、界面越干净。
以上可以总结为
文字字体是界面结构中重要组成部分，文字也是多数场景下信息传达最为准确的方法。合理的字体能够增加用户的阅读体验，提升用户在产品使用中的舒适度。合理的字体包含字体的可读性、对比度、间距。
可读性：可读性是字体在界面中需考虑的基础因素，也是首要因素。字体的信息传达需精准、明确。字形选择包括其场景适应和字形的适度性。
字形的场景适应：由于不同的字形会带给用户不同的感觉。由于场景需要，我们一定情况下会选择自定义字体。当我们选择不同的字体时，需要考虑字体在产品内不同模块下是否易于阅读。
字形的适度性：字体本身不宜抢镜。随意的、抢眼的字体一定场景下上能够带来足够的氛围感，但是长期使用会出现「视觉疲劳」，其原因是字体本身的设计抢走了用户正常在该场景下阅读或使用的内容和信息。
对比度
字号：用于区分不同层级的信息内容，为保证信息的快速传达，不同层级的字体需有一定的优先级顺序。
界面内的主文案/一级文案应精简明确。假设用户只会在这个界面停留3、4秒，能够吸引用户继续浏览界面的就是一级信息。当一级信息文案字数过多，会增加用户刚进入页面时的阅读成本，进而降低阅读体验。
另外，移动端小于24px的字号应慎重使用，虽然小的字号会让版式更加的精致，但当同一场景下，小于24px的文案字数偏多时，会影响用户的正常阅读。但可用于弱化的文字链、标签等字数少的场景。
加粗：字号相同，字体加粗也是区分不同层级信息的一种方法，当两信息区分度不大、界面层级过多需要减少层级的场景下，可以选择加粗部分内容建立轻度对比。
字色：我们画画的时候，时常会听到老师说「要注意画面的黑白灰」。在界面设计中，也是一样，我们需注意各层级字体间的黑白灰关系。明确的画面黑白灰关系会让界面变得更干净清晰。另外，当不同明度切换时应保持色相/饱和度不变。
间距：在界面设计中，字间距和行间距会直接影响用户阅读效率。过于紧密的间距会让字体间失去「透气性」，根据我们正常的阅读顺序来讲，字间距要小于行间距以便于每一行更易被视为一组，进而给用户带来更好的阅读体验。我们可根据文案长短，字号大小制定更适合阅读的间距。
字体的可读性是字体的基础，明确的字体对比度能够让信息层级更加清晰干净，而合理的字间距能够无形的提升用户的阅读体验。
对齐是界面结构中的一部分，合理的对齐方式能够使界面内的信息变得更规整，内容传达更明确。让元素间的关系更具节奏感。
联系性
同一组合内的不同元素间需有明确的对齐关系，其关系能够清晰表达不同元素间的亲密性。
元素间的居左对齐：当文案的字数偏多一些的场景下，居左对齐更符合用户的阅读习惯。
元素间的居中对齐：当内容信息较少、或由于对齐元素形状等因素，居中对齐可能会带来意外的收获与效果。
元素间的居右对齐：界面内一般不会用居右对齐的方式来建立两元素间的关系，但是界面内会存在和屏幕建立右对齐关系的元素，与屏幕右对齐的元素一般为主体的解释说明以及辅助操作等。一般情境下，当用户阅读完主要内容信息后才会对操作类的功能有需求，如查看购买、关注、查看更多、进入下一页面等。
统一性
另外，不同组件间也需要合理的建立对齐关系，同时为保持界面的简洁性，同一界面内建立的对齐模式不要过多。
界面的结构是提升界面品质感的关键，而合理的信息关系、字体、对齐方式能够让界面的结构更加完整，精致。也希望每个设计师的作品都更加的美而精致。
喜马拉雅主播等级体系算是喜马各业务线中资历比较老的一员了，主要服务于主播用户查看自身等级，以及特权享受，这次整理了近期关于主播等级线现存问题的改版。
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 最重要的差别在于：
前三项相信大部分设计师已经开始意识到了，而第四项，也是最重要的一项，很容易成为设计师的软肋。因为设计师太习惯于追求完美、「憋大招」了，他们很少考虑如何用较小的成本创造更大的价值。实际上，设计师缜密的思维、优质的创意如果能和精益思维、增长思维结合起来，将产生惊人的效果！
当然说来容易做来难，我们在长期的实践过程中经历了很多失败和挫折，感谢公司的无限包容，使得我们最终能够沉淀出一套严谨的「增长体系」作为理论支撑，并不断带给业务方惊喜。
蓝蓝设计的小编 http://www.lanlanwork.com