UI 在拿到产品原型时该如何思考？如何着手设计界面？最近跟一些设计师朋友交流 UI 设计方案，总结了一下在方案优化的思考过程，在这里分享给大家。

一、两道思维

很多 UI 拿到一个页面原型的时候，就立马打开各大设计网站找参考，然后照着参考页面上的效果，生搬硬套到原型上，这只是达到了单纯美化页面的效果。
那么拿到原型后应该带着怎样的思维来进行思考呢？

第一道思维：交互思维

先了解页面实现什么功能，功能的交互操作流程是怎样的，也就是说用户操作这个页面上的功能时，用户的行为路径是怎样的。

第二道思维：视觉思维

了解完功能、交互后，提取原型中视觉组成元素，细分归类，每一类应用统一性原则进行设计。

然后交互与视觉一同结合来设计界面。

二、思维应用

结合案例我们来看下两道思维是如何进行的。

第一道思维：交互思维

了解功能交互流程。

根据实例原型分析出用户行为路径：

用户行为路径：

注意点：

• 用户行为路径的获取，一定要跟产品经理、交互设计师进行沟通确认清楚。
• 用户行为路径某些步骤中，也有先后之分，比如第1步中，用户输入了账户地址后，才会有账户的相关数据显示。
• 用户行为路径可以支撑信息内容进行归类分组。

第二道思维：视觉思维

提取视觉组成元素。

视觉元素：

注意点：

• 提取视觉组件元素尽量详细归类。
• 如有视觉规范，视觉组件元素风格应用请遵循视觉规范。
• 如无视觉规范，同类视觉组件元素应用统一性原则进行设计。

三、检验方案

我们带着两道思维来检验一下这位设计师输出的方案：

问题1：交互层级

问题所在：

数据显示在前，输入在后，交互操作层级有点混乱。

问题截图：

问题解决：

用户行为路径中，第1步有个先后顺序，先输入地址，后显示数据，在进行信息内容布局设计的时候同样需要有先后顺序，所以交互操作层级一定程度上影响着布局排版。

问题2：步骤关联

问题所在：

「批量转账」按钮归类到了第1步的信息模块中，交互操作逻辑有点不通畅。

问题截图：

解决方案：

用户行为路径中，用户核心费用信息后，最有可能的行为就是点击「批量转账」按钮，所以「批量转账」按钮与转账费用信息的操作关联性比较大，应该在同一模块里会更符合交互操作逻辑。

问题3：颜色应用

问题所在：

主色、点缀色、辅助色各自的应用范围没有规则，颜色应用混乱。

问题截图：

问题解决：

一个页面或者项目中，各种颜色的应用范围需要有一定规范，文字使用什么颜色、按钮使用什么颜色、输入组件使用什么颜色、背景使用什么颜色都需要有对应的使用规则。

问题4：输入控件

问题所在：

输入类组件样式存在多样性，同样是输入框，有多种样式，会造成用户交互操作上的认知有误。

问题截图：

问题解决：

一个页面或者项目中，输入类组件样式应用统一性原则，保持视觉风格一致，从而减少用户操作认知偏差。

问题5：按钮样式

问题所在：

按钮样式应用到不具备按钮点击属性的对象上，用户会认为也是可点击，会造成用户交互操作上的认知有误。

问题截图：

问题解决：

一个页面或者项目中，不具备按钮点击属性的元素尽量不要套用按钮样式，减少用户操作认知偏差。

举个例子：人形的稻草套上人的衣服，成功了欺骗了人们，造成了认知偏差。

问题6：信息展示

问题所在：

同类信息内容的展示存在多样式，传达过程中加重了用户的认知负担。

问题截图：

问题解决：

一个页面或者项目中，同类信息内容的展示应用相似性原则保持视觉风格一致，因为相似性的布局可以更加地传达信息。

举个例子：电商页面，金额信息展示；理财页面，收益信息的展示；都是应用相似性的布局，即统一又地传达信息。

问题7：图标风格

问题所在：

图标风格不一致，图形反白风格，立体风格，线性风格。

问题截图：

问题解决：

根据产品的特性，建议统一的图标风格，选择线性、面性、渐变、立体等风格。

问题八：对齐间隔

问题所在：

页面元素的对齐、间隔没有规律，整体视觉显得松散，不严谨。

问题截图：

问题解决：

可以利用栅格系统，把页面信息内容规整起来。

四、优化方案

根据发现的问题，我们来看一下优化后的设计方案：

优化1：交互路径

根据用户行为路径，将相关联的信息归类到一个模块，每个步骤划分到一个模块，相关联的步骤合并到一个模块，模块内完成各自的操作展示任务，模块之间信息内容互不干扰，但从结构布局又能够形成符合交互操作逻辑。

优化2：颜色规范

规范颜色，配色的方法在这里不做深入讨论，这里方法的是基于品牌色通过饱和度、亮度、透明度的变化来得出文字各层级的颜色、边框的颜色。

优化3：输入控件

对输入类控件的样式进行了统一，让用户从视觉上就能够清楚地分辨出哪些是可以进行输入操作的，从而减少用户对交互操作上的认知成本，提高信息输入效率。

输入控件进行交互时，要有交互状态反馈，默认状态、选中状态、错误状态。视情况而定，可以增加鼠标移上状态和不可输入状态。

状态变化时的颜色应用，可以通过变换色相的透明度来保持色彩的一致性。

优化4：按钮规范

对按钮进行了分类，分为常规按钮、图标按钮、文字按钮；对按钮样式用颜色进行了统一；按钮要有交互状态反馈，不可点击状态、可点击状态、鼠标移上状态、鼠标按下。

状态变化时的颜色应用，可以通过变换色相的饱和度、亮度、透明度来保持色彩的一致性。

优化5：信息展示

对信息内容应用相似性原则进行了排版的统一处理，每个小类信息的标题与内容采用统一排版格式，然后重复应用，有助于提高信息获取效率。

优化6：图标风格

这里的图标应用于功能性图标，统一采用线性圆角风格。功能性图标需要注意图标的形状要能够正确有效地传达出功能的含义。

优化7：对齐间隔

应用栅格系统对视觉元素之间的对齐、间隔进行调整，使页面视觉更加严谨，页面信息更容易阅读。

五、总结

交互思维

了解页面中的功能交互流程，梳理用户操作行为路径，可以对行为步骤中的信息内容进行归类分组提供依据，最终有助于页面信息内容的排版布局。

视觉思维

提取视觉组成元素，对颜色、文字、控件、图标等每一类应用统一性原则进行规范设计，再通过视觉元素本身相互组合，最终应用回信息内容上，建立规范的视觉感。

设计一个页面，交互思维和视觉思维是互相配合的，缺一不可，最终都是为了共同去构造符合交互操作逻辑、满足视觉美感的界面。

我是如何从零搭建起一款健身O2O产品的？

本文作者讲述的是他如何从零搭建起一款健身O2O产品的？一起来文中看看~

我在年初参与到“SHAPE”这款健身产品的研发中，也算是第一次以产品经理的身份，从0开始负责一个产品的建立。

产品是一款O2O的智能健身连锁店，目前产品已经上线3个月，线下店铺也已经扩展到第5家，正是回顾梳理的好时机～

一、项目/竞品调研

目前在线健身产品做的比较大的是超级猩猩和乐刻，以下的数据分析也都是针对这两家产品的。

1. 竞品体验

（由本人亲自到店体验课程得出的一些观点和结论）

2. 竞品用户反馈

我在微博和appstore还有应用宝都浏览了一些信息，反馈量不大，有价值的就更少了。后来开阔了一下思路，在大众点评上找到了更多的高质量的评论。

关于反馈的整理和分析之前写过一篇更完整的分析文章，有兴趣的童鞋可以去看看

3. 竞品分析结论

基于线上产品和线下店铺体验两个方面，去借鉴竞品的优点和补足其短板。

（1）产品优化

1. 将“约课”和“我的”作为主要的两个tab做，产品结构清晰，操作流程简短明了。
2. 对用户位置和约课习惯进行记录，优化课程的推荐算法。
3. 将课程特色明确标出，减少用户选课困惑。
4. 沉淀用户运动数据，一方面可以通过用户习惯和完成度推荐用户更合适的课程，另一方面可以打造荣誉体系，将数据转换为成就，甚至价值。
5. 用户数据变化报告，完成度/运动量/排名，增加用户专属感觉。
6. 优秀用户图片的应用(墙面装饰/推送)，让用户有自豪感，归属感。
7. 增加评价体系，让用户有话语权，也从另一方面对教练，场馆和课程加强管理。

（2）实际体验优化

1. 场馆的管理，包括装修/质感/空气质量，也包括卫生情况和器材的清洁度。
2. 课程和教练的管理，教练需要更专注，更关注学员，能尽量给出适当的指导，能在高阶课程中随机应变给出降阶动作。

二、明确产品方向

课程上的创新和智能设备的应用会成为我们与竞品之间最大的区别，以此为基础，我们会为会员提供更好的运动监测，不仅为用户提供可视化的实时运动状态，还会将用户数据沉淀下来，让用户更好地计划运动频率和强度。

公众号主要是用户约课的载体，这是它的第一功能，因此需要突出课程预约，减短订单查看路径。另外，也需要展示和沉淀用户的数据，以及作为后期产品运营的工具。

另一方面，为使得线上线下产品配合流畅，我对O2O业务逻辑进行了梳理。

1. 用户行为基本阶段

2. 线下流程梳理

“公众号了解/预约课程-到店体验课程-线下心率监测系统-公众号报告和数据沉淀”，由此完成一个用户体验闭环，为用户提供流畅的健身体验。

另一方面，也是为用户积累数据，将后来能将身体数据变化通过可视化的形式更加直观的展现给用户，也为将后来的用户荣誉体系打好基础。

三、产品原型绘制/修正

（用户端/线下APP/教练端产品架构图）

绘制完成产品架构图后，进入具体的原型绘制和制作。

原型绘制阶段把主要的两个产品端制作成可操作的原型，提供给了技术和业务团队去试用，不断沟通，反复验证业务流程和模块。

（不方便放原型链接，将就看下～）

作为 Sketch 重度使用粉，必须要说 Sketch 越来越牛了，现在可以直接链接模块和页面，在 preview 的时候完成跳转，完美助攻前期简单检查页面逻辑。

1. 原型的修正

2. 订单调整

• 【原稿】：订单简单按照课程时间从近到远依次排列。
• 【问题】：有取消和完成的订单混排在所有订单中，影响用户寻找可操作的订单。
• 当用户预约多次课程，需要即时操作的其实是离现在最近的课程。
• 【修正】：取消和完成的订单，折叠到“历史订单”中。排序根据上课时间距离现在时间，从近到远排列。未完成的订单，显示层级最高，根据上课时间距离现在，从近到远排列。

3. 分享名额流程

• 【原稿】：公众号支持一个用户购买多个名额，但由于心率监测设备绑定和报告定向推送，需要将名额对应到具体用户。因此需要购买多名额的用户将名额分享给他其他来上课的朋友。
• 【问题】：分享名额的入口不明显，提示不强，用户容易忽略。文案不清晰，用户没有理解必须将名额分享给朋友才可以。
• 【修正】：修改文案，强调必须分享名额给用户才可以让朋友体验完整的上课内容。

购买多名额的用户，购买完成后，增加分享提示弹框，强提示需要分享名额。名额未发放完的订单，用户进入订单详情中时，分享提示弹框还会重复弹出继续提示用户。

4. 其他不一一列举

1. 原课程列表图片为课程封面，线下同事反馈图片并不能说明课程内容，且很多学员非常在乎上课教练，因此将图片替换为上课教练的头像。
2. 课程类型原分类为自研课程和合作课程，然而这并不是站在用户角度的分类。为了便于用户理解课程类型，将所有课程重新根据功能性修正为“综合训练/私教小班/舞蹈/身心”。
3. 原订用户到店后通过扫码进入签到和绑定心率设备页面，但实际线下前台二维码比较多，进门和购买饮品都是二维码，二维码过多影响用户体验。另外多名用户同时到店的时候，不好扫码。因此在订单列表中，增加了一个“可签到”状态，（介于未开始和已签到之间）。该状态可点击，进入绑定页面。

任何人都抵挡不了时间的力量，你可以斥责它的无情，也可以赞美它的给予，在这个成长的历程中，我们寻找的不是时间给我们带来了什么，而是这个过程中我经历了什么。后者，才是我们需要深思并感恩的。

与「用户体验」一样，许多人会评判一个产品用户体验的好与差。但是「好」与「差」只是整体上的一种结论，普通人可以说这两个字。但作为设计师，必须懂得在体验过程中，知晓哪里好与哪里差，更要知道为什么好为什么差。

就好像评书似的，真正读过某本书的人，不会单纯的说：「这本书太好/烂了」。他一定会有一种感悟，哪怕只是一句话。

既然是为了提升「用户体验」，就得与用户一起进行体验的走查，才能有根据的进行优化。

一般我们会建立一种用户体验路径，其目的是为了了解用户的动机、关注点和需求点。所以为了提升用户体验，就必须邀请用户参与体验路径的设计过程。

用户在使用一款产品时，他们中的大多数只是为了完成某个任务，所以在这个过程中，也许用户只使用了部分功能，也可能使用了所有功能。

因此，不要将体验路径的设计限制在特定的产品或功能服务上，要理解完整的用户体验路径，针对性的进行走查，与用户一起提升产品易用性。

一、让用户参与产品设计流程

真实的用户体验路径需要通过不同用户的参与互动，不管是一对一的讨论或焦点小组，都需要大量的数据才能得出真实的结论。

任何没有基于研究报告的尝试、假设、数据，都将使它在很大程度上只是理论性的。所以我们一定要通过不同用户的不同体验结论，客观的进行分析路径中的哪一环可以继续优化。

与用户的交流沟通是其中的关键，在用户的帮助下，你很容易找到可提升的体验点。

因为，用户情绪的波动和心情的愉悦、满足、怀疑、失望以及懊悔的表现是无法在报告中准确反映出来的，所以设计师要重视这些用户反馈，包括这些互动的场景可以使设计师产生共鸣，通过同理心来设计并优化功能。

然而，没有任何产品或功能服务能够满足过程中的所有用户需求，所以，要深入了解每一个阶段出现的需求点，因为它们都会衍生出不同的因素，这使我们能够理解产品如何更好的服务于用户的生活。

同样，没有任何灵丹妙药能积极地改变用户体验，而是通过与用户的持续接触。也许你会说很难进行与用户直接的对话，所以你通过客服回访、用户反馈等方式收集信息也未尝不可。

可能到这里你还没有完全明白其中的道理，下面我举个例子详细说明。

二、拆解 – 用户体验之旅

让我们来举一个旅游平台的例子，这个平台是供于各种各样的人和商务旅行者使用的，其中包括了航班、酒店、出租车租赁等在内的度假套餐。

为了让各位深入了解体验路径，以及更好地了解我们的用户，让我们对旅行者的体验路径也做一个拆解。如下图：

这个路径将全面地了解用户的想法、感受和行为，因为他们会经历不同的阶段，帮助填补我们路径中的空白点，帮助我们更好的进行产品的设计。

1. 计划旅行

在计划旅行时，设计师认为用户的想法是什么？

• 目的：休息、假期、出差；
• 目的地的候选名单，检查距离和到达目的地的时间；
• 出行方式选择：飞机、火车、巴士、游轮、自驾；
• 查看酒店位置与评论好坏；
• 评估旅行成本（如航班、酒店等费用）；
• 可取消功能（如已订的航班、酒店等）。

2. 用户角度

通过与用户的走查、回访、反馈，可以帮助我们了解用户内心真实的想法，帮助我们增强以及简化用户的体验方式。

• 在条件允许的情况下，提供尽可能多的价格；
• 经常出差的人会为了飞机上的最佳座位而自愿增加费用；
• 出来旅行的家庭想要知道目的地有哪些有趣的儿童活动；
• 显示符合用户自定义预算的旅行套餐；
• 帮助用户估算旅行成本；
• 给出评价信息，可供用户评判（朋友、预订平台、Facebook等）。

3. 特殊情况

产品是否有处理特殊情况的功能？

• 由于个人原因，推迟了旅行计划；
• 目的地天气或其他情况不利。

我们是否可以帮助用户更好地应对这些情况？通过及时提供有关目的地天气状况、备选旅行计划或建议类似目的地的信息等。

那么通过第一个内容的拆解，我们就可以发现，这个点能做的功能就有很多。而且这些功能还能排列优先级，设计师能主动进行推进，提升设计师自身的价值。功能走查的重要性相信各位也看出来了。下面继续。

1. 完成预订

是时候确定目的地、日期、旅行方式和停留地点了。（依然是设计师角度）

• 设计有序、直观的预订体验；
• 安全流畅的付款流程，包括多种支付渠道的选择；
• 旅行模式的确认细节，包括驾驶方向和帮助热线电话号码；
• 酒店确认：房间详情和热线电话。

2. 用户角度

• 直接能从航空公司/酒店确认信息，这样会比旅行社确认更具价值；
• 目的地指南（视频、天气、穿着、提示、要做的事情、文化等）；
• 建议的旅行路线；
• 紧急求助热线（如果客户在预订过程中拨打电话，呼叫应该能及时取得联系）。

3. 特殊情况

• 预订未确认，付款已处理。

1. 出行与酒店

设计师考虑的用户需求。

• 舒畅的旅行体验（飞行准时等）；
• 入住酒店，快速办理手续；
• 干净，方便，光线充足的房间（特别是床，洗手间）；
• 体验当地的美食和文化；
• WiFi 覆盖；
• 干净整洁的出租车等交通工具；
• 与家人和朋友实时分享照片；
• 合理的分配时间。

2. 用户角度

• 主动跟踪用户的行程，确保一切顺利（发送提醒，与酒店确认）；
• 目的地指南（事件、当地交通、天气、衣服、提示、要做的事情等）；
• 当地餐厅/购物券/优惠等。

3. 特殊情况

• 航班延误或取消；
• 紧急的医疗情况；
• 信用卡透支。

1. 旅程与归来

旅途中的回忆和收获。

• 在脸书/ Instagram / Twitter / WhatsApp 上共享更新和照片；
• 与家人和朋友分享经验；
• 回忆当地的美食；
• 经验与旅游前的期望不相符，过度炒作；
• 航班和酒店服务；
• 评论旅程的整体情况。

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在晚上写作时（没错就是现在）会提示你开启过滤蓝光的护眼模式等等。一个好的设计师一定是懂得交互的设计师，也应该是非常细心的设计师，也应该是懂得为用户着想的设计师。

作为用户，在很多时候会很容易判断出一个网站的用户体验是否优秀，因为主观感受是很难被欺骗的。但是作为网站的设计者和开发者，角色转换之后，所需要面对问题就复杂得多。身为构建者，要让体验尽善尽美需要花费大量的时间精力来完善整个体验的闭环。今天为你所整理的这7个 UX设计的原则，能够帮你更好地进行网站的 UX设计，并且尽可能地将整体的用户体验提升到一定高度。

1. 围绕用户体验来进行整体设计

想要创造难忘的用户体验，自然要围绕着用户体验本身来进行设计。甚至在某种意义上来说，数据和内容也应该是服务于体验的， 它们应该以什么样的体验来呈现出来，这是设计者需要反复思考和琢磨的问题。

图形、布局、文本和交互元素之间的协同工作才能创造体验，任何一个维度缺一不可，单纯的信息展示是不够的。

想让你的网页能在互联网上大量的信息中脱颖而出，体验是至关重要的。现代网页中大量的视觉和交互内容存在，是为了能通过体验直击人心，这样才能在激烈的竞争中存活。

2. 网站内容应当一目了然

如果你认为网站内容是用来读的，那就错了。现代用户的注意力集中的时间非常短，绝大多数用户在浏览信息的时候，都是快速扫视，而非逐字逐句地仔细阅读，信息的展现一定要直观、清晰，确保能够一瞥就能看明白。借助信息图表和视觉，更快地传达信息和数据。

你需要让你的内容更加吸引用户，绝大多数用户会为触动它们的信息和内容而驻足，当他们想要了解更多的时候，才会点击，了解更多。

3. 用户想要简单而清晰的内容

用户只需要半秒就能判断出网站设计和内容，你需要尽量让网站的交互和指引足够清晰，显而易见。不要让按钮难以被用户发现，在首页上放上一大堆的按钮和链接，不如通过视觉上的引导，让用户注意到最关键的那个 CTA按钮。

通过迭代和测试，不断地优化和提升网站的易用性。有的设计对于绝大多数的用户都非常有用，凸显最重要的选项，允许隐藏额外的功能，并且为用户提供显示全部的选项。

除了清晰的设计，整体的一致性也很重要。统一的配色、交互和图形能够让用户对于后续的操作有更清晰的预期，减少用户在后续操作过程中探索的力度，这是通过统一性设计提升产品易用性的一种方式。

4. 通用设计元素 vs 创造性

当某个设计元素在其他地方很常见的时候，它就已经形成了特定的 UI 模式，尽量不要去修改它，哪怕是很富有创意的方式。当你将这种约定俗成的元素修改成其他样子的时候，用户需要花费比平时更长的时间来判断它究竟是什么。这种认知负荷将会影响整个网站的使用效率和转化率。比如汉堡图标，比如网站登录入口的位置（右上角）。没有必要在这种地方重新「标准化」。

对于链接、导航、布局这样基本的元素，应该始终优先考虑其可用性，在此基础上再发挥创意。

虽然非传统的设计很酷，但是它的可用性问题同样很大。创造性的设计同样是需要控制其程度和平衡，如果非要打破常规，尽量控制好程度，并且一次最多打破一条规则，不能更多。

5. 了解你的用户

在开始创建网站和 APP 之前，你应该对于你的目标客户群体有足够清晰的了解，这样才能更好地为他们来设计界面。

一旦你清楚地了解了你的用户，就能了解他们的需求和愿望，并且设计出符合他们预期的界面和体验。这个时候，你的竞争对手能够为你提供灵感和想法。注意对方的色彩，布局，风格和功能。

尽可能使用你的受众已经熟悉的 UI 模式和 UI 元素，能够更快让他们上手。在此基础上，适当地进行差异化的设计，这样效率更高。

当你确定了受众之后，记得尽量把他们的反馈纳入到你的设计当中。

6. 视觉层次很重要

当界面中优先放置最重要的元素，通过视觉层次来凸显它们，确保用户能够更快注意到它们。在设计中，有很多方法能够凸显内容，但是最有效的方法始终是让它们更大更醒目。

视觉层次的构建能够让网站内容更加清晰，也更加富有功能性。

7. 控制用户体验的质量

Peter Moville 在 usability.gov 这个网站上列举出了用户体验设计的关键因素，它的核心价值在于通过不同的维度更好地掌控用户体验的质量：

• 有用：内容应该是原创的且满足需求。
• 可用：网站的内容应该很容易被找到。
• 可取：设计元素应该贴合情感且具备可欣赏性。
• 可发现：内容容易被定位，被找到，并且可导航。
• 无障碍：设计要为有障碍的用户进行定制。
• 可信：网站内容应该有权威性，且值得被相信。

除了上面的维度之外，还有一些值得参考的 UX设计的质量衡量标准：

• 符合上下文：有明确的路径，符合上下文逻辑。
• 人性化：值得信赖，平易近人，透明，并不机械。
• 可发现性：用户在第一次访问的时候就能够顺畅的完成任务。
• 可学习性：确保交互足够简单，并且能够无缝地相应移动端界面，确保用户在随后的访问过程中达成目标。
• ：确保用户能够快速轻松地完成各种任务。
• 令人愉悦：确保产品能够满足用户需求，还能够和用户产生情感联系。
• 表现良好：当用户与之交互的时候表现良好。

结语

用户体验设计的目标不仅仅是让产品本身更优秀，更重要的是从情感层面上和用户产生关联。有界面而没有体验，这样的产品在今天的竞争中是活不下去的。

从用户的操作流程上来说，如果用户想使用一个功能，必然首先要发现它。如果连功能入口都找不到，后续的用户体验也无从谈起。而筛选功能可以帮助用户对功能信息进行快速的定位，缩短用户的查找时间，这篇文章我就来跟大家聊一下筛选功能。

 三种常见基本样式

首先要明确一个概念，筛选功能并不是普通的单一功能项，它和导航一样是一个体系。既然是体系，必然有最基本的组成部分。筛选功能（体系）常见的样式有以下三种：tab类，(下拉)列表类，标签类。这三种样式是筛选功能最基本的组成元素，不管你产品的筛选功能做的有多么复杂，都可以看成是这三种基本元素的不同组合形式。

Tab

Tab是最常见的筛选样式，一个tab项代表一个筛选维度，直接平铺的展示出来，用户很容易感知到。

根据方向我们可以将tab分为横向栏tab和侧向栏tab。横向栏tab可展示2-5个选项，如果超过了5个，那么就需要用户滑动才能看到。所以当筛选维度过多的时候，我们可以考虑使用侧向栏tab，京东商品分类这里用的就是典型的侧向栏tab，我数了一下总共40个选项，这里如果使用横向栏tab用户可能要侧向滑动8屏，操作成本过高。

当然当选项过多的时候，我们还有一个法子，就是使用弹框，用户点击后可以看到全部的选项。

列表式

列表式也可称之为list，其特点就是占用空间小。因为它可以将选项隐藏起来，用户需要点击才能看到所有的选项，因此在有限的空间里可以展示更多的筛选维度。碍于手机屏幕尺寸的限制，列表式筛选现在应用的越来越普遍。

列表式筛选的样式其实有很多。可以做成popover类，actionsheet类，activityview类。这些样式很难去说谁好谁坏，这里我就只是列举出来，具体用哪种样式，大家自己来判断。

标签式

对于标签式，很难进行准确的定义，我更倾向于将单选按钮，多选按钮，switch等统称为标签式，标签式只能针对单一条件进行筛选，这点和tab很类似。标签式很少单独出现，多数情况下都是与tab和列表式结伴而行。

在淘宝里用户可以点击视图icon来切换视图模式，这就是典型的标签式筛选。

当然以上三种只是最常见的筛选元素，其余的还有输入框，滑块，地区/日期选择器等主要用于信息录入的组件。 

常见的筛选体系 

了解了最基本的元素，接下来看一些比较复杂的筛选样式。上面我也提到了任何产品的筛选体系都可以看成是这三种基本元素的不同组合形式。为了让大家更好的理解，我一一举例来说明：

tab+tab:

tab之所以受到青睐，是因为其较低的学习成本。每一个tab代表一个类别，而且是直接展示给用户看的，所以很多产品的筛选功能都会优先考虑使用tab。即使功能结构复杂到无法用一层tab来完成筛选任务，设计师也会考虑使用双层tab样式（tab+tab）的样式。（PS.当然下图应该算是segment control+tab）

tab+列表式：

当产品不断的发展，功能结构愈发的复杂，过于扁平的tab已经无法满足筛选的需求。以看电影这个场景为例，用户的需求是找到合适的影片和电影院。对于用户来说，衡量一家电影院会从地址、票价、品牌和特色服务（支持改签、IMAX厅等）这四个角度入手。这些筛选需求很难通过tab来完成，我们需要列表式的协助。

tab+列表式+标签：

当产品的功能结构进一步复杂，这也给筛选功能增加了新的难题。以boss直聘来说，这里的筛选项主要分为四个：排序方式（推荐/）、工作地点、公司规模、岗位要求。其中后三个筛选项包含大量的条件，特别工作地点，需要进一步定位到街道或地铁站。对于这种多维度，深层级的筛选需求我们可以使用tab+列表式+标签的样式。

这里我选择boss直聘的另一个原因在于它的tab数用户是可以自己增减的，每一个tab代表一条求职意向，最多可以添加3条求职意向。

筛选体系的容器

筛选体系是由众多筛选项组成的，这些筛选项需要一个“容器”来承载。上面说的boss直聘用的是下拉列表，这种样式其实还比较简单的，我们可以看一些功能更加复杂一点的产品，比如各大电商平台。这里使用的是抽屉式筛选框，说它是抽屉式，因为它跟抽屉一样，用的时候可以拉出来，不用的时候可以关起来，节省了空间。从某个角度来说，我们可以把抽屉式看成列表式的一个放大版。抽屉式筛选框可以容纳更多的筛选条件，像我在上面提到的输入框，多选按钮都可以在这里使用。

从底部弹出的动作栏也比较常见，这里使用了滑块和单选按钮。

Airbnb的筛选功能以浮层为载体，还使用比较少见的switch和stepper。

当然Airbnb筛选功能最大的亮点在于可以向用户即时反馈筛选结果的数目，用户不太可能会进入搜索结果为0的空页面，避免无效操作。

以上说的筛选体系都比较传统，大部分都是基于对现有结果进行筛选，其实我们可以对筛选功能进行前置。例如，我们可以在用户进行搜索之前就对结果进行筛选。

甚至在新用户第一次使用产品的时候，可以让用户填写一些个人信息以便进行个性化推送。

筛选功能的存在意义在于帮助用户对功能信息进行快速的定位，对筛选功能进行适度的前置可以简化用户的操作流程，同样可以达到节省用户时间的目的。

产品即场景，体验又贯穿整个产品~孰重孰轻早已分不清

产品即场景，而场景化核心要素之一的“体验”，是其中最重要的一项。

本文从体验出发，结合AARRR（用户增长）模型进行阐述，其中我认为该模型的使用必须是在产品搭建的场景下才能运作的。而其中涉及每一步的良好体验刚好又反哺场景的完善。

从获取-激活-留存-转化-传播每一个步骤中都存在内部因素和外部因素。本文只讲内部因素，产品从最开始的外部获客，转向产品内部的使用体验，再转向外部传播的这么一个过程。

文章不是教案，更不是真理。希望大家带着批判的眼光去看待每一篇文章。毕竟思辨精神才是形成独立思维的法宝。由于文章较长，我会分成上下两部分发布，进入正文：

获取（ACQUISITION）分为三个部分：

一：自然流量的获取

自然流量的获取，我们能干涉其中的体验非常少，只能打磨产品本身。但是自然流入的用户一定是基于以下几个点中的其中一个或多个。我们或许可以干涉体验前~

1.某个社会现象、热点所引发的相关功能性需求（例如前不久滴滴司机杀害空姐事件，引发多少芳龄少女的恐慌。提高了强烈的安全意识，这时候你会发现App Store里面一款app杀了出来“怕怕”（有兴趣的朋友自行下载体验），正是这个社会热点现象引发的自然流量暴增。当然也不排除产品借这个热点营销自己的产品）

2.某个痛点确确实实需要解决（当某类用户存在某个痛点时，会自己通过搜索或者同类产品对比选择一款产品进行使用，如果你的产品刚好能帮助使用者解决痛点，那么你成功吸引了用户。）

3.纯粹进行产品的体验（产品发烧友、同类竞品的体验人员、无意中下载的等）。我们称为无效流量，因为这部分用户一般是不太可能成为产品的忠实粉丝的。他没有明确的目的、没有明确要解决的痛点。

二：运营推广的获取

运营推广这个名词在互联网诞生之前就已经存在了。只是说原来传统的营销手段即产品-价格-渠道-促销开始逐渐失效。转而变为场景化的运营推广。将推广落实到具体的小场景中。

1.线上推广

其中线上推广包含线上营销活动（营销活动又分为已有话题进行营销【可以选择融入当前的热点话题类似节日、娱乐圈大事件等】&【提供话题痛点解决方案进行营销】和制造话题营销【创造业内的话题】【通过深度用户进行制造话题】、优惠活动（包括邀请好友得好礼、会员优惠、某个节日优惠等）。线上推广无非就是通过网络搭建虚拟场景，通过场景边界的不断延伸，覆盖吸引更多的用户参与进来。

2.线下推广

线下推广包含地推（地推不可避免的会带来2部分的人群：被地推活动中的奖品吸引的人；确实被产品的介绍所吸引的人）、海报&代言（同样会有2部分人群：被明星效应所吸引的人；被产品介绍所吸引的人）、门店的互相导流合作。线下推广效率远远没有线上推广来的快。但是对于需要线下场景的产品来说，这又是必不可少的。

三：社群自传播

通过单点击破，这就需要运营团队有很好的洞察能力，找到符合产品调性的社群，通过事件引爆该社群或者社区，让社群成为你产品的拥护者和传播者。

1.通过老带新的模式进行获取用户

当产品与老用户之间建立很好的纽带关系后，老用户自然会以个人为中心，向外帮你宣传产品。

2.引爆社群

通过各类社区，找到符合你产品的目标人群。通过对该社群的研究，运用社群内部语言或者表达，调动整个社群帮你发力。有点及面的扩散，称之为“气球理论（很细的一根针就能戳爆气球）”这同样是能引爆传播性特别重要的一点。

3.参与感（社会关系绑定）

当你周围的人都在转发或者都在使用的时候，如果你不了解或不使用的话，会引起个体的孤独感。也就是说“他们都在玩，我不玩就落伍了”，但是这种情况在产品推广的前期一般不太会出现。当传播势能达到一定程度的时候，才会出现刷爆朋友圈！

激活（ACTIVATION）分为二个部分：

当用户从外部导流进产品后，这时用户的去或留都跟产品&业务有关。如何让用户在进入产品后自然而然的进行使用也就是防呆原则。对，通过引导或者吸引使用者进行下一步操作。（打个比方，你去一家陌生的餐厅，进去后没任何人招呼你，没人告诉你要去选位置或者点菜，是不是有不知所措的感觉，我想你很快就会另寻他家吧）

一：进入产品后的操作引导

1.视觉引导（包括页面元素优先级、页面元素突出强弱进行视觉上的引导，很常见的就是：在你第一次使用某个产品时，会引导使用者进行第一步第二步的操作，降低用户对产品的陌生感）

2.动效引导（通过页面浮层的形式教育用户如何进行操作，这也是在产品设计中，对新用户的一种引导方式）说到底就是为了消除用户对新鲜事物的陌生感和手足无措感。

二：产品本身是否能激起用户的探索欲

当然这个问题本身是建立在是否能真正的帮助用户解决某些方面的痛点。否则再强的探索欲，也跟你产品本身没有关系。如何激起用户的探索欲？

1.产品整体视觉表现、使用流程的体验是不是够吸引人，是不是有属于产品本身吸引人的点。（当年的path效果，直接将它送上全民热潮之巅）

2.产品是否对使用者产生持续的吸引能力，产品前期只有不断的通过各种方式刺激用户。（产品体验优化、活动力度、宣传方式、让惠让利等）但需要注意的是：过度营销不等于有效刺激。

3.产品的任务流程设置是否合理，正常情况都是由简单到复杂的程度设置任务，由于用户的沉默成本，当完成一定任务后，就会沉淀下来慢慢成为产品的忠实用户。（摩拜产品是先让用户填写个人信息，最后才提示充值押金，站在使用者的角度来看，已经把个人信息都出卖给平台了，还在乎那200多块钱吗？不然你让他把流程倒过来试试，先充钱，再填信息。保证没多少人会用）。流程设置就像钩子一样，慢慢慢慢的把用户勾住。

上半部分先到这里，下半部分会从“留存”“转化”“传播”角度进行展开~

多数人能够成为很厉害的设计师，很厉害的产品经理。凡事都会有所谓的套路，当你熟知了解某个行业，或者多个行业的套路时。你会站在更高的视角看待问题，同样你会走的比人家更远更快。所谓的套路，是基于个人而言，可能你有个很好的导师能够告诉你以往的经验。但是我更认为，套路是通过一步步看似笨拙的努力不断总结不断归纳