如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
生活需要筛选，App页面也一样。本文通过案例分析，从筛选组件的样式、使用场景等方面来解析筛选组件在手机端场景的设计。
筛选组件概述
筛选组件的作用是帮助人们在面对大量信息时，通过更的筛选方式提升决策效率。广义的筛选组件还包括搜索栏及Tab栏，本文暂不分析。
组件包括筛选按钮与筛选器，筛选器包含类别及各类别下的筛选项。使用频次高低、筛选条件的数量都是决定筛选组件样式的因素。
01
位于 Tab 栏的筛选组件
组件样式
筛选按钮位置：一般位于Tab栏最右侧视觉薄弱区域。
筛选器形式：点击按钮，筛选器以抽屉形式从Tab栏底部向下展开筛选条件，或以浮层形式从屏幕最右侧向左滑出筛选条件。
样式分析
当界面使用Tab栏时，已为内容做了第一层筛选，多数情况下已满足用户对内容的筛选需求。
当筛选类别较多且复杂时，就需要在Tab栏增加筛选组件来提供更详细的筛选能力。而这里的筛选组件较于Tab栏其他条件优先级较低，屏幕右侧为视觉薄弱区域，这也解释了为什么大多数Tab栏的筛选组件都位于最右侧。
案例一
案例来源于美团App
此页是对美食品类的选择，这里的筛选组件在Tab中是最常见的样式。对于用户而言，选择商家店铺优先考虑地域、美食类别、价格及综合评价，而用餐人数与餐厅服务等只是辅助选择条件。
筛选器使用了抽屉形式，如要选择此样式，建议在筛选条件不多且不超过一屏的场景使用。
案例二
案例来源于淘宝App
当用户从首页全局搜索后，出现此页。筛选按钮位于二级Tab栏。点击筛选按钮后，由于筛选条件较多，很难一页展示完，用户往往需要上下滑动屏幕查看全部，因此使用右侧浮层展开的形式较适合。
案例三
案例来源于哔哩哔哩App
全局搜索后，Tab栏默认展开综合tab内容，用户对排序、时长、分区的筛选需求较高，因此直接把筛选类别放在了二级Tab栏，相比通过点击筛选按钮再展开类别的交互方式更简单直白。
点击筛选类别后，筛选器使用抽屉式。此种筛选组件样式一般用于筛选类别较少（不超过4项），筛选项数量不多的场景。
02
底部按钮型筛选组件
组件样式
筛选按钮位置：以按钮或浮层形式固定在界面底部，便于用户操作。
筛选器形式：点击按钮，筛选器以抽屉形式从按钮底部向上展开筛选条件，或以界面浮层形式从底部向上展开筛选条件。
样式分析
使用底部筛选按钮的界面，内容区类别相对单一，通过筛选组件就能满足筛选需求，并对筛选的需求较大。而底部按钮作为常见的按钮形式，用户点击更方便，因此承载筛选组件较合适。
若使用此样式，点击筛选按钮后，筛选器的出现优先考虑从底部向上出现的抽屉式浮层。
案例一
案例来源于旅游类App Expedia
输入旅游目的地后进入此列表页，用户目的性明确，就是要查看结果。底部的筛选按钮是为了帮助用户更快的筛选结果，方便用户触达。并且筛选条件较多，无法一页展示完，使用了界面浮层的形式。
这里还有2个细节：
1、由于筛选类别较多，手动清除单个筛选条件太过繁琐，于是筛选器底部增加了清除按钮，操作更简便。但底部按钮一般为“确定”操作，“清除”放在底部样式上没有做误操作提示，可能会增加误操作机率。
2、筛选后，筛选按钮处会显示已选择的筛选类别数量，给用户带来良好的使用反馈。
案例二
案例来源于dribbble
当前页为地点搜索。需要先进行筛选操作，内容区再出现结果。筛选按钮位于底部浮层，筛选类别代替筛选按钮平铺展现，筛选器使用抽屉式从浮层底部向上展开。
此样式一般适合筛选类别较少，并且每个类别的筛选项不多的场景。优点是减少操作步骤，提高用户操作效率。并且可以学习一些体验细节：在筛选器中选择一个选项后，在其筛选类别处同步修改为该选项；筛选项与筛选类别选中状态一致，增加关联度。
03
浮层按钮型筛选组件
组件样式
筛选按钮位置：以浮层按钮的形式位于界面右下方，占用空间较少。
筛选器形式：点击按钮，筛选器以浮层形式为主，或在筛选按钮下方展开筛选条件。
样式分析
浮层型筛选按钮的优点是增大内容区的纵向空间，比底部按钮型筛选组件的层级要弱一些。但当用户需要操作时，它的位置也便于用户点击。
设计时按钮用色需要区别于内容区，内容形式尽量精简直观。若使用案例3中的扇形筛选器，则要求筛选类别为1-2类，筛选项数量少切文案精简。
案例一
案例来源于dribbble
筛选按钮位于界面右下方紧贴于右侧屏边，浮于被筛选内容上层，滑动屏幕时消失。点击筛选按钮后，从屏幕右侧展开筛选浮层，原筛选按钮变为确认按钮。
此按钮形式最大限度的让出空间留给内容区，且右下角为用户关注薄弱区，这样的位置关系可让用户按需操作。关于筛选器使用右侧浮层前面的案例也提到过，适用于筛选条件较多的场景。并且使用侧边栏形式的浮层与筛选按钮关联性较高，相对符合用户认知。体验细节上可学习的点还有按钮功能的改变，使得体验更便捷。
案例二
案例来源于dribbble
筛选按钮位于界面右下方但没有贴屏边，筛选器以底部分层形式从底部向上展开。这里的筛选条件不多，因此使用了底部分层形式。
案例三
案例来源于dribbble
筛选按钮形式与上一案例相似，不同的是筛选按钮处直接显示筛选条件，可得知此内容区目前被筛选维度为“30M”。此样式适用于筛选条件为同一维度的场景。
点击按钮后，从按钮下层展开扇形筛选器，滑动选择筛选条件。此种筛选器样式使用场景较局限，多为选择时长或数量，并且单选居多。因此筛选器不需要“确定按钮”，只需放“关闭按钮”即可。这里的筛选器也可根据不同的场景选择其他的形式。
04
举一反三
接下来我们拿个案例练练手。
下图界面中内容区为概览与各监控数据图表，需要设计一个筛选组件对内容区进行不同时段的筛选。
在设计之前需要确定几个需求：筛选组件的使用频次、筛选类别的数量、筛选项的数量，单复选关系、筛选条件之间的优先级。
进一步明确需求
筛选类别只有时间段1项，筛选数量不固定，为多项，单选关系。当用户进入此页，根据用户使用需求判断“1小时”基本满足用户查看数据的需求，默认展示“1小时”的筛选。因此筛选组件此场景使用“1小时”时段基本满足用户查看数据的需求，可判断用户使用筛选组件的频次不高。
方案解析
方案一，Tab栏形式
Tab是对整页的筛选，多为不同维度，而这里只有时段一个维度。
Tab所处位置为视觉热点区域附近，但用户对筛选组件的需求并不高，放在此位置占用了概览区空间。
方案二，底部按钮形式
底部按钮位于用户的习惯操作区，放这里使用层级略高，并且会使内容区的整体高度减少。
方案三，浮层按钮形式
位于右下角的浮层按钮在页面中属于视觉薄弱区域，可以使用户浏览时不受按钮影响；但按钮拥有强对比色，在有筛选需求时满足使用需求。
筛选器以时间选择器形式出现，可满足筛选项数量较多的场景。
05
小结
以上内容是我对常见筛选组件的思考，每一种样式都有其优缺点。但我们设计筛选组件的最终目的是帮助用户筛选信息，决策。这就需要设计师根据筛选需求、用户习惯等设计符合用户使用场景的操作体验。
本文作者：TXD技术体验团队-喻杰（阿里巴巴视觉设计师）
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
iPhone 诞生之后，世界发生的变化是翻天覆地的。以电容触摸屏为交互中心的智能手机以难以想象的速度，成为了人类生活中不可分割的部分，人与人之间的连接因此而更加紧密，同时也更加疏远。从某种意义上来说，iPhone 的创造是开创性的，也是不可替代的。而我们也不约而同地发现，以iPhone 为标竿而创造的智能手机和数字化的交互界面，让我们处于一个时刻都会被分心的境地。
令人上瘾的数字内容，让我们一刻都离不开智能手机，从某种意义上，它彻底改变了我们的生活，工作，甚至思考的方式。现如今，越来越多的人开始尝试戒除令人上瘾的智能手机，寻找更加健康自由的人机关系。根据今天的调研，过度使用智能手机，确实会有一定机率带来心理健康的问题。从 iPhone 诞生之初，直到10年后的现在，在数字产品上瘾和用户注意力的控制这件事情上，开发团队本身就没有放松过。这次，Fast Company 专访了前苹果设计师 Imran Chaudhri。
Imran Chaudhri 早在 1995 年就加入了苹果公司，并且很快就出任了公司的人机交互界面组的设计总监，在2006年前后，他也是作为 iPhone 项目核心的6人团的一员，加入到项目当中来。
待在苹果的20多年时间里，他参与了 iPod、iPad、 Apple Watch、Apple TV 以及 iPhone 等几乎全部主要产品的用户界面的设计，直到他开始追求创造属于自己的公司和事业，才正式从苹果离职。也正是因为这样的契机，才使得 Fast Company 有机会能和他面对面地一起聊一聊他的过去，以及他留给苹果的那些遗产。
和许多设计师一样，他们对于产品的想法和企业的定位或多或少有一些错位。和苹果产品相关的很多信息，他现在依然还不能透露，但是他依然提到了很重要的事情：即使是在iPhone的原型设计阶段，他就已经意识到了，这款产品最大的缺陷之一，就是它注定会分散甚至垄断用户的注意力。而与此同时，苹果也有意识的没有给予用户，对于iPhone 完全的控制权。下面，是访谈中能够对外公布的几个重要的内容摘录：
「我认为，从某种意义上来说，真正洞悉设计的设计师，大都能够预见到手机对于注意力的影响。在使用手机的时候，我们总会碰到被各种各样的信息和通知打扰到。」
「早些时候，当我刚刚开始制作 iPhone 的原型之时，管束还不是那么多，我们当中有几个人还有幸把原型机带回家，这样就可以每天工作生活都使用它。那个时候我全世界各地的朋友都和我保持着联系，iPhone 几乎隔一会儿就会亮一下，显示有新消息，叮叮咚咚响个不停，于是我意识到，和我们朝夕相处的手机需要一个管控功能。所以，在很早的阶段，我就开始设计请勿打扰这个功能了。」
「其实，在苹果公司内部，想要大家都理解分心是一个影响用户生活的问题，还挺难的。乔布斯倒是很能理解的，但是公司内其他的同事，对于用户对于手机的控制权多少，其实大家还存在不少争议。我和一部分同事倡议给用户更多的掌控权，不过这个事情对产品的营销和市场运作是有影响的。所以，当时内部也有声音说，如果真的给用户太多的控制权，那么这款手机就不酷了。」
「其实直到今天，iPhone 当中绝大多数的功能都是可控的，但是其中很多功能隐藏的比较深，彻底的掌控它们是比较困难的，如果你真得想让那些整天都在轰炸你的信息彻底远离，你需要花费很长的时间来摸索，用独特的方式逐个调整或者关闭才行。因此，对于那些熟练使用iPhone 的重度用户而言，确实是可以如臂使指地掌控这台设备，但是对于更换壁纸都不太会的用户，想要搞清楚iPhone ，让它如意随心，真的是难如登天。他们没有这样的控制能力。」
「你可能会在一个下午安装十几个不同的新应用，然后你不停地会收到提醒和通知，是否要授权使用相机，是否要授权获取你的位置，是否允许它给你发送通知，每个都要做决定。稍后，你可能会发现，Facebook 一直在后台给你推送信息。再之后你就会发现你有睡眠障碍了，总会有信息大半夜地推送到你的眼前，让你无法安生地休息。实际上，借助请勿打扰的功能，你可以一早上再查看它们。这套系统足够智能，能够判断出哪些应用之前就已经获得了许可，哪些仍然在后台获取数据，哪些通知实际上你并不关心。所以，这套系统其实是会选择更加恰当的时机和正确的方式来建立用户和手机之间的对话和关系，手机会询问用户，你真的需要这些通知吗？或者是，你真的需要Facebook 使用你的电话簿的信息吗（因为你已经很久没有登录了）？等等。正确地设计了这套系统之后，提醒用户的方式也非常的多。」
「iOS 12 中内置的这套防干扰的控制系统可以更加系统地监控手机各方面的功能和用量，它实际上是从iOS 6 时代的请勿打扰的功能拓展而来的。但是它在现在被推出来真正的原因是有太多的用户为此而抱怨，而媒体和用户都发文吐槽，在呼声和压力之下，它们最终在iOS 12 中呈现了出来。这个局面之下，苹果没有选择的余地，必须对于舆论有回应。这对于每个人都是好事，因为用户和他们的孩子都因此能够获得更好的产品。但是这是否是最好的产品？当然算不上，因为现在的iOS系统是为了应对舆论和负面新闻而设计的，设计的意图并不对。如果是苹果主动作出这样的决策，才算得上是好产品。」
「对于苹果这种体量的大公司而言，产品设计其实复杂性非常的高。真的是这样。作为设计师，你需要服务于你的用户，你还得和公司的利益保持一致，同时，还需要对得起自己的底线和道德。服务于一个大型的企业，确实非常的难做抉择。对于用户而言，可以很轻松的直接怼苹果，说它没有做对的事情。但是身为其中的设计师，要平衡各方面的需求也压力，经常会进退维谷。有些用户因为iPhone 的一些功能，受到了负面的影响，有些人受到的影响比另一部分人更多。但是身为设计师，一个受到各方面制衡的设计师，即使是作出了改变，在很多时候也远远不够。至少在我看来，现在的改变还不够大。」
「我和数字设备之间的关系非常简单。我不希望被它所控制。从使用 iPhone 的第一天起，我就用着黑色的壁纸。我不会将一大堆的东西塞进手机，减少被分心的可能性。我的手机第一屏上的应用程序非常少。」
「我的意思并不是说这样做很重要，或者说我推荐这么做，对于人和手机之间的关系，每个人都不一样，处理方式也都很个人。对于如何处理自己和手机之间的关系，有人让我提一些建议，我觉得没有必要，因为我的办法并不适合所有人。一天喝多少咖啡，抽几包烟，每个人的情况都不一样，没法一概而论。不过，心理健康是一件大事，你和你的智能设备之间，应该保持着平等的关系。这至少是一个大的设计趋势，是设计师需要关注的焦点。就像可持续性发展已经成为时代的主流诉求一样，你无法忽视认知压力的存在，认知设计也势在必行。」
「我观察到，界面设计在很自然地进化和发展着，从按钮到旋钮，从点击到手势操作，从语音交互到情感化设计，均是如此。无论是考虑到用户的情感诉求，还是进入语音交互的领域，都一定会遭遇一大堆的问题。按钮和旋钮的设计是需要考虑到人体工程学的问题，点击和手势的交互则牵涉到更具体的压感和硬件上问题。任何人和机器之间的交互，都一定都会遭遇不自然的状况和问题，就这么简单。身为设计师，需要足够的预见性，才能真正领先于用户，预测到可能会遭遇的问题。」
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
很多产品设计师，在画原型或者设计 UI 的时候痴迷于工具的使用，拿到需求文档之后急于动手画图，忽略了信息架构设计对于产品的作用。
信息架构作为一个产品的骨架，是产品非常重要的一部分，它决定了一个产品
的布局和未来的发展方向以及用户对一个产品的最初印象和整体体验。毫不夸张的说，好的产品信息架构是产品成功的一半。
那么到底什么是产品的信息架构呢？该如何设计产品的信息架构？如何评判一个产品信息架构的好坏？我们接着往下看：
让我们来看一个例子：
一个饭店需要有哪些设施，如果你是饭店的老板如何合理的排布这些设施，可以让客户感觉很舒服的用餐，这个过程就是一个信息架构的过程。他可以让客户对你的饭店产生好感，从而下次用餐的时候还会想到来你这里吃饭。
在排布饭店设施的过程中我们要遵循一些规范，比如用户的习惯或者施工规范等，正是因为需要遵循这些规范，所以我们需要一个信息架构来体现这些。
比较官方的信息架构解释是这样的：信息架构设计是对信息进行结构、组织以及归类的设计，好让使用者与用户容易使用与理解的一项艺术与科学。
简单来说，信息架构设计就是让用户可以 容易地理解你的产品是怎样的。让他们在使用你产品的时候可以更顺利更自然。就像一进入饭店就会有一种感觉，门口是等餐的地方，进去就应该吃饭，如果找洗手间一定不会往门口走，而会往深处走。这就是信息架构的好处：他让用户使用同类产品时更容易上手和理解，让产品更容易被接受。
那对于线上产品来说为什么需要合理的信息架构呢？大家来看下边3组 app 的 tab栏截图。你能仅仅从 tab栏就看出这款 app 是什么类型的 app，如何使用吗？
很明显的，第一个是一款购物类 app，第二个是一款图片社交类的 app，第三个是微信的 tab，虽然首页名称是微信，但是我相信如果把名称换成「聊天」，你还是能认出这是微信的 tab栏。
从底部标签栏就可以大致看出产品是用来干嘛的，这就是信息架构的作用。一个合理的信息架构可以让产品非常容易被用户理解，可以让用户第一眼对产品有一个简单的认知，指导自己可以用产品做什么事，指导产品提供什么服务。
再看一组反例：
这三组 tab栏就让人很困惑了，看了半天你也许根本不知道这几款 app 是做什么用的，以及如何使用。如果你让用户很困惑，他会分分钟抛弃你的 app。
所以信息架构的核心目标是为用户提供更好的体验，获得更高的留存率。
一款信息架构良好的产品必然遵循以下两个标准：
我们通过这两个标准来印证下上边3个正面案例的信息架构：
相信你能很快速的识别出这款软件的用途和用法，这就给提升留存提供了基础。
那么如果信息架构像架构一个饭店一样简单，那么信息架构为何需要设计？
因为你的实际产品功能可能有这么多：
毕竟我们不是支付宝，没办法把功能像豆腐块一样堆叠起来，我们需要一些科学的设计方法。
合理的信息架构设计需要考虑5个步骤：
下面我来分步讲解一下。
首先你的产品是给到用户用，你当然要最大限度的了解你的用户，我们先来看下一个概念：「心智模型」。
心智模型是经由经验及学习，脑海中对某些事物发展的过程，所写下的剧本。人类在经历或学习某些事件之后，会对事物的发展及变化，归纳出一些结论，然后像是写剧本一样，把这些经验浓缩成一本一本的剧本，等到重复或类似的事情再度发生，我们便不自觉的应用这些先前写好的剧本，来预测事物的发展变化。心智模型是你对事物运行发展的预测。再说得清楚一点，你「希望」事物将如何发展，并不是心智模型，但你「认为」事物将如何发展，就是你的心智模型了。
假设你从没见过 iPad，而我刚递给你一台并告诉你可以用它来看书。在你打开 iPad 使用它之前，你头脑里会有一个在 iPad 上如何阅读的模型。你会假想书在 iPad 屏幕上是怎样的，你可以做什么事情，比如翻页或使用书签，以及这些事情的大致做法。即使你以前从没有使用过 iPad，你也有一个用 iPad 看书的「心智模型」。你头脑里的心智模型的样式和运作方式取决于很多因素。
用户往往带着以往使用 APP 的一些习惯来使用产品；线下做同一件事的习惯、生活习惯、心智模型等。要考虑哪些是可以创新的，哪些是用户习惯，要在不妨碍用户习惯的情况下作出更能让用户接受的创新。
你要考虑清楚4个问题：
用户通常用你的产品做什么？
用户用你的产品来做什么？用来看新闻还是用来聊天？一定要考虑清楚用户的核心流程。从核心流程中提取信息架构的基础形式。
用户用这类产品最关心什么？
用新闻app 时咨询的真实性实效性，购物类app 精准搜索和售后功能，就是你的用户关注点在哪里，这是一个很好的突破口。
用户有哪些思维定式？
和用户年龄身份相关的属性，产品体验符合相应用户的思维模式，心智模型，用户就会比较容易接受。
用户用什么类似的产品？
类似的产品也会带来一些用户习惯，迎合这些习惯也会让用户快速上手接受产品。
了解了你的用户场景和使用习惯之后你会知道如何做出符合用户心智的，容易被接受的产品，你不需要担心做的产品没有差异性或者没有竞争力，我们可以在核心流程之外做出创新点，让用户觉得你的产品又好用又有些不一样。
这里的业务包括与产品接触的内部及外部的人提出的需求，比如公司的运营，市场，销售，BD，公司的外部合作伙伴等。
这些人的需求我们也要收集，比如运营人员想更方便的管理注册用户，销售想更多的添加广告位，市场推广人员要求能统计不同渠道带来产品的下载量，注册数，活跃数，合作伙伴需要进行账号，内容互通等，总之只要与业务有关的人的意见，尽可能的在产品设计前多收集，即使做不了，也告诉他们原因，要不然产品上线后就等着被他们吐槽吧。
在做一款 app 时，我们面临了和无数竞品争抢用户的局面，这时候分析竞品就非常必要，我们需要在知己知彼的前提下，做好核心流程功能，再思考如何在差异功能上做好突破。
首先我们需要把竞品功能梳理成思维导图：
其实思维导图就是信息架构比较基础的形式了，但是光有思维导图没用，我们需要对思维导图进行分析。
我以前做过的一款人脉 app 为例，当初对比了领英、赤兔和脉脉，分析了这4款 app 的思维导图后得出的共性和差异点：
共性就是要符合用户使用习惯的地方，如果你调研的3-5个产品都这么做了，很可能这里是产生用户习惯的地方，是我们需要去遵循的，这是获得用户好感度的基础。
分析产品时你一定也会得出一些产品差异的地方，而这些差异就是你的产品竞争点，也是别人用你的 app 不用其他 app 的理由。比如人脉软件都会有社交相关的功能，但是脉脉会比较注重职场招聘、直播等互联网职场人比较关心的点，这样对应的用户群体就比较会吃你这套，会提升用户的粘性。
相信你在梳理了竞品的信息架构，总结了共性和差异点之后对产品的信息架构已经有一个比较清晰的认知了，在做自己产品信息架构的时候也会更胸有成竹。但是最后还有一件事我们可以做，就是对我们的要做的产品功能做卡片分类。
卡片分类法是我们工作中常用到的一种方法，它可以在用户侧再一次印证和检测我们的产品信息架构。
卡片分类法就是让用户对功能卡片进行分类，组织，并给相关功能的集合重新定义名称的一种自下而上的整理方法。
说直白点就是准备一堆卡片，在这些卡片上写上你所需要包含的功能名称，然后给到用户侧，让用户进行分类，让用户进行组织，来了解用户到底觉得这些功能应该怎么合并怎么归类的一种方法。它可以帮助你站在用户角度去了解用户是怎么认定这些功能的，也可以在卡片分类法的过程中更加了解用户是怎么想的。
卡片分类法大概的步骤和注意点是这样的：
卡片分类法最终会产出这样的一个树形图：
其实到这一步信息架构大概的雏形已经有了，你可以用 axure 或者类似 mindnode 的软件把信息架构梳理出来。
接下来你要对信息架构进行重要性分级，这样在产品开发的前期可以帮助梳理产品研发的优先级，集中精力解决用户的最大痛点。在产出页面时也可以更好的把控页面元素的大小层级，位置关系等。
最后你需要注意层和度的平衡：层一般不超过5层，超过操作困难。度过多会让用户认知成本增加，容易找不到想找的内容。这里的度指的是同一页面展示的信息量。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
原创： 贺红阳
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
原文链接：https://medium.com/refactoring-ui/7-practical-tips-for-cheating-at-design-40c736799886
原作者：Adam Wathan & Steve Schoger
译：贺红阳
用设计战术代替天赋，提高我们的设计能力。
在我们设计开发过程中都不可避免的遇到需要做出视觉决策的情况，除了
专业资深高级设计师外，其他非专业设计师外不管喜欢与否，又或者我们的
公司没有全职设计师，需要我们自己为新的产品实现UI。
有时候我们正在攻克一个新项目，并希望它看上去比之前的另一个网站更好。对于我们（技术人员或者非专业设计师来说）难为的说“我永远也无法让这幅画好看，因为我不是艺术家。”但事实证明，有很多技巧可以提高我们的工作水平，而不需要有平面设计背景。
这里有7个简单的方法，大家可以使用来改进我们的设计工作。
1使用字体颜色（color）和字体重量（weight）来代替字体大小（size）创建视觉结构层次
当我们设计UI，样式文本化的时候，常见的错误是过于以来字体的大小，也就是字体的字号来控制层次结构。
“这文字重要吗？那我们就让它大点儿。”
“这是次层级文字吗？那我们就让它小点儿。”
不要把所有的重担都放在字体的大小上，试着使用字体颜色和重量来完成同样的工作要求。
“这文字重要吗？那就选用一个字重大些的字体，让它变得粗些。”
“这是次层级文字吗？那我们就用一个明度高些的字体颜色。”
试着并坚持使用2-3种颜色：
用深色而不是黑做主要内容，就像一篇文章的标题。
灰色用做次层级文字内容，像一篇文章的出版日期信息。
更浅的灰用作辅助次次要内容，也许是页脚的版权声明信息。
同样的道理，对于UI工作来说两种字重通常就足够了：
就英文字体来说，对于大部分的文本，普通字重（400—500），如果想要强调的文本可以是（600—700）；就中文来讲，主要内容字体一般在常规30-34，标题和想要强调的文本中黑36-42
在ui工作中，英文字体远离字重在400以下的字体，中文字体远离16像素以下的字体。如果你考虑使用更轻的字体重量来淡化一些文字，那就使用一个更浅的颜色或者更小的字体大小代替。
关于字体重量（font weight）字体粗细的值：
normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 继承值
font-weight的属性值有3种指定方法：第1种是关键字法，关键字包括“normal”和“bold”两个；也是我们常见的；第2种是相对粗细值法，相对粗细也是由关键字定义，但是它的粗细是相对于上级元素的继承值而言的，包括“bolder”和“lighter”两个；第3种为数字法，包括从“100”到“900”的9个数字序列（注意，只能是100、200之类的整百数）。这些数字序列代表从最细（100）到最粗（900）的字体粗细程度。每一个数字定义的粗细都要比上一个等级稍微粗一些。
字体的粗和细这种描述方法本身就是一种相对描述，所谓粗和细也必须要有一个参照体。例如，在上面介绍的3类属性值之间需要有一个相互对照匹配的过程，这是一个很难界定的过程。关键字“normal”相当于“400”，“bold”相当于“700”。除了“normal”和“bold”以外的其他关键字常常会令浏览器产生误解，无法直接和数值相匹配，此时字体的粗细程度通常取决于字体本身的设置。
另外，有的字体看上去比较粗，但是它们的字体描述却是“Regular、Roman、Book（常规）”、“Medium、Semi-（半）”或者“DemiBold、Bold、Black（黑体）”等字样，这主要取决于该字体本身“normal”表示的粗细程度。
2不要在彩色背景板上使用灰色文字
在白色背景下将文本设置成浅灰色是淡化内容重要性的一个好方法。但是在彩色背景此效果就不那么好了。这是因为我们在白色上看灰色是弱化了对比关系。让文本颜色更接近背景颜色，实际上创建了信息层次结构，而不是使用更亮的灰。
在彩色背景下有两种方法降低对比度：
1减少白色文本的透明度
使用白色白色文本，降低不透明度。让背景颜色稍微渗透些，以与背景不冲突的方式淡化文本
2.基于背景，选一个颜色
当你的背景是图片或是图案；或者当降低文字的透明度太枯燥或是文字降低透明度被冲淡时，这种方法都优于降低透明度的方法。
选择一个和背景相似的颜色，调整它的饱和度和亮度直到你觉得合适为止。
3.偏移卡片的投影
不要使用大的模糊和扩展值，这样会使得卡片的阴影更明显，所以添加一个垂直偏移量。它会看上去更自然，因为它模拟了一个从上往下发光的光源，就像我们真实世界中经常看到的那样。
这种内嵌式阴影可以很好的用在输入表单上
如果你有兴趣学习更多关于阴影设计的知识， Material Design是很好的设计指南（https://material.io/design/environment/elevation.html）
4尽可能少使用分割线和描边
当你需要在两个元素之间创建分割时，试着不使用分割线。
虽然分割线是区分两个元素的好方法，但它并不是唯一的方法，使用太多分割线会让你的设计感觉很杂乱。
下次当你发现自己想要使用分割线的时候，试试下面的方法：
1使用卡片投影
卡片投影是一个非常好的区分元素的轮廓方式，就像边框分割线一样，完成同样的目标但它更巧妙而不分散注意力
2使用两种不同背景颜色
为相邻的元素添加稍微不同的背景颜色通常是在他们之间创建区别的好方法。如果你已经使用了不同的背景颜色，又使用了边框，那请试着把边框删掉，你可能不需要它。
3添加额外的空间，也就是留白。
除了简单地增加距离之外，还有什么更好的方法在元素之间创建分离呢?在空间上加大更多的距离（更多的留白）是一种好的方法，在不引入任何新的UI组件元素时来区分元素
5.不要放大本来应该很小的图标
如果你正在设计一个可以使用一些大图标的页面，像一些登录页面的“特色”部分，你可能本能的使用免费图标库里的图标，然后放大它们的尺寸直到符合你的需要。
两个超棒的免费图标库分享给大家：
1FONT AWESOME (https://fontawesome.com/icons?d=gallery)
2 Zondicons(http://www.zondicons.com/)
“它们毕竟是矢量图，所以如果你放大尺寸质量是不会受到影响的对吧？”
虽然我们增大矢量图片的尺寸它们的质量是不会下降的，但是当我们把它们放大到3倍或者4倍的时候，那些原来用16-24px绘制的图标永远不会看起来非常的专业。因为它们缺少细节，并且总是感觉不成比例的矮胖矮胖的。
如果你只有小图标，试着把它放在另一个图形里，并且给这个图形一个背景色：
这可以让你的图标尺寸更接近原始图标尺寸，同时仍就充满大的空间。如果你有足够的预算，你也可以使用高级优质图标集做设计，在大的尺寸上使用大的图标，付费图标库如Heroicons和Iconic。
1 Heroicons （http://www.heroicons.com/）
2 Iconic（https://useiconic.com/）
6.在平淡的设计中使用超重的彩色的边框
如果你不是一名平面设计师，相比其他作品里的漂亮摄影照片或者颜色丰富的插图作品，你如何在你的uI设计中添加少许的视觉天赋。
有一个简单的技巧可以让你的界面有一点不同，那就是添加超重的彩色边框在你的部分界面里，它会使得你的界面不同于其他平淡的设计。
例如，沿着警告信息的侧边加一个超重的彩色边框：
又或者是高亮显示激活的导航栏项目
甚至是在横穿整个布局的顶部：
它不需要任何的设计天赋增加一个彩色的矩形在你的UI作品里，并且它可以让你的网站像你期望的那样更具设计感。
选颜色很困难？试着从有限的颜色板中选取颜色，例如dribbble的颜色搜索，以避免被传统颜色选择器带来的无尽的可能性。
7不是每一个button按钮都需要一个背景颜色
当用户在一个页面上有多个可操作路径时，很容易陷入基于纯语义设计行为陷阱。
如Bootstrap这样的框架式网站鼓励你这样做，当你添加一个新按钮时，它会给你一个语义样式菜单供你选择。
“这是一个正面的行为吗？是，那就使用绿色。”
“这是删除数据的操作吗？如果是，那就使用红色按钮。”
语义是按钮设计的重要部分，但还有一个常常被忘记的重要的维度，那就是等级／层次结构（hierarchy）
页面上的每个按钮放在哪都基于重要性金字塔的某个位置。大部分页面仅有一个主操作按钮（primary action），几个不重要的次级操作（secondary actions），和几个很少使用的三级操作（tertiary actions）
当设计这些操作按钮时，最重要的是考虑它们在层次结构中的位置。
主要操作按钮应该是显而易见的，实心纯色的，与背景颜色是高亮度对比。
次要操作按钮应该是明确清晰但不突出。轮廓风格或者是与背景颜色低对比是很好的选择。
三级操作路径应该是可发现但不显眼。将这些操作路径设置成链接样式通常是最好的方法。
“那破坏性的行为呢，难道不应该是红色的吗？”
不一定！如果破坏性操作不是页面上的主要操作路径，那么最好对其样式按照二级或者三级按钮的形式处理。
保存大的，红色的并且加粗的设计样式，以便于当界面的主要操作路径是负面的操作路径时使用，比如在确认的对话框中：
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
原创： 云锋金融
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
傲慢（Prejudice）、嫉妒（Envy）、懒惰（Sloth）、愤怒（Wrath）、贪婪（Greed）、暴食（Gluttony）和淫欲（Lust）
——这就是天主教教义所说的人类七宗罪。
七宗罪，源于人的底层操作系统。根植于基因深处，人性的种种弱点是所有人都逃不开的囚牢。
海底捞，这个起身于蜀地简阳、得名于麻将桌的火锅品牌，用了24年做到家喻户晓，距离上市仅差临门一脚，如参考香港上市的呷哺呷哺30倍PE，则估值将超300亿元。
做餐饮的那么多，做火锅的那么多，但有且只有一家海底捞。
为什么？
海底捞的故事，正是对人性的把握在商业运营中的卓越体现。我们且从这七宗罪一一道来。
愤怒 Wrath
现代人出去聚餐，吃的那叫薛定谔的饭：在进店里前永远不知道出来时会是一个开心的你还是一个愤怒的你。毕竟“吃饭十分钟，等位一小时“这种事情太常见不过，而遇上傲娇服务员或者低效的服务，令人一顿饭不爽也是常有的事儿。
但在海底捞的店，我们很难看到一个愤怒的客人。
在这里，你不会气愤自己把有限的生命花在了无限的排队上。
海底捞的服务是从排队就开始的：客人刚一入座就有小零食和茶水，等位桌上有跳棋和充电宝，实在无聊还可以在店内做个指甲，擦个皮鞋。等餐桌布置好了，带着愉悦的心情落座，甚好。
落座后，戏很多的扯面小哥、点多了菜时的善意提醒、提供给女士的头绳、热毛巾和手机塑料套，又会让你觉得贴心又舒适。
在海底捞，消费者不仅远离愤怒，甚至会得到一丝生人间难得的温情。
“您是自己来吃火锅吗？”
“是的。”
“好的，请跟我来。”
一上桌，坐在对面的小羊正在微笑看着我，它面前还有一杯水。
图片来源：海底捞招股说明书
傲慢Prejudice
而海底捞“顺着顾客毛捋”的背后，是对顾客心理的巧妙把握。这份把握，来自它让员工们放下了“傲慢”。
服务行业的从业人员很难，餐饮服务行业的从业人员更难。高强度的工作、难缠的客户和较低的薪资待遇，很难让这个需要“笑脸迎人”的行业工作人员开心起来。“拜高踩低”、“势利眼”、“傲慢”，随便搜搜各类评价，总能或多或少看到顾客这样的抱怨。
海底捞有着大量餐厅一线员工：在它共计50299名的员工中，餐厅员工达49162人。
但在海底捞，几乎看不到傲慢的服务人员。
人性的傲慢，是如何被化解的？这离不开两个关键词：与顾客满意度挂钩的评价制度和服务自主化。
如何去衡量一个餐厅的好坏？它的装修、氛围、服务、菜品、卫生......，无论是细化KPI还是看翻台率，想要制定一个完善的硬性考核指标，困难重重而且容易被规避。最后，海底捞诉诸一个简单的规则：顾客满意度。
海底捞引入了独特的“神秘人”制度。除了顾客的评价会被纳入员工的薪酬评定之外，国内约1600名第三方神秘嘉宾会定期进行“暗访“。“暗访”是对餐厅质量和客户体验的综合评估，共有三个等级：
A级餐厅代表最高的工作质量，其员工在新店任命店长时将会得到优先选择的机会；
B级餐厅则意味着有待改进，无功无过；
C级餐厅将需要接受重新培训，且其店长将失去开设新餐厅的机会，并面临革除职位的风险。
做好了是荣誉和奖励，做不好是惩罚甚至羞辱。店长们不仅不会“傲慢”，还会卯足了劲，去服务好客户，并激励员工去服务客户。
怎么激励呢？能够提供最优质服务的员工才能赚最多的钱，得到最快的晋升。为此，海底捞做到了充分的放权。
“我们并无规定服务员服务步骤的固定服务。实际上，我们鼓励服务员自行主动判断如何为顾客提供最佳服务。”
——海底捞招股书
要不要给顾客提供免费的菜品、如何根据客人的口味提供建议、甚至包括赠送指甲油这样的小细节都可以由员工自己把握，而不超过3万元的审批也可以让店里自行决定。
比起坐在办公室里的决策层，员工既是服务的提供者，也是效果的第一反馈者。他们更能切身明白进店的消费者需要什么，也更有动力去这么做。因为客户的满意，最终都会变成他们的年终绩效。而海底捞的放权，更让他们觉得自己并不单单只是在给别人打工，工作也可以自己做主。
有了实际有效的激励和为自己工作的自由感，员工才会更有动力提供服务，彻底放下“傲慢”。
而这一方式确实是有效的。根据沙利文报告，按照营业收入计算，2017年海底捞国际在全球（包括中国）的中式餐饮市场中排名第一。2016年至2017年，海底捞收入增长率为36.2% ，而根据中国餐饮报告2018，2017年中国餐饮行业同比增长仅为10.7%。在海底捞的招股说明书中，其明确将就餐体验列为其品牌发展基础。
根据对海底捞员工的调查表明，85.1%的受访员工对海底捞的工作环境感到满意，超过80%的员工认为海底捞提供的待遇和管理架构激励了工作。
的确，海底捞的员工成本增长很快。它的平均员工成本是6.2万元，差不多是呷哺呷哺3.9万元的的1.6倍。然而，海底捞的人力成本占收入比仍在30%以下，在餐饮企业中这一比率处于中游。这恰恰说明了：放下傲慢而充分得到激励的员工，为海底捞创造了更多的价值。
海底捞近年用人成本一览
图片来源：海底捞招股说明书，云锋金融整理
嫉妒Envy
嫉妒，是人性中一个难以启齿的弱点。
做好一家火锅店不算难，难的是保证每一家都能提供同样高质量的服务。海底捞自主化和个性化的背面，是复制和规模化的难题；传承和发扬，面临着严重的激励问题。
即便家族餐饮企业，也可能陷入纠纷：例如“九头鸟”、分裂成到“九头鹰”、“九头凤”，这家湖北菜馆经历了内讧和争端，止步于区域连锁。
那么，海底捞如何激励店长师傅倾囊相授，培养出比自己更强的人、开出更赚钱的店，从而形成全国连锁呢？
答案在于师徒制。师徒制的本质，是正视人性中的嫉妒，并用机制去克服它，使得师傅从自己的利益出发，乐于传授徒弟。
每年，作为师傅的门店店长将获得以下两种选项中的较高者作为薪酬（除基本薪金）的部分。可以看出来，如果徒弟徒孙干得好，店长可能会获得比自己店经营更好的效益。老店在培养新店时，自然也会更加卖力。高质量可规模化的服务水平也将在此推动下持续下去。
|
选项A |
其管理餐厅利润的2.8% |
|
选项B |
其管理餐厅利润的0.4% |
|
其徒弟管理餐厅利润的3.1% |
|
|
其徒孙管理餐厅利润的1.5% |
资料来源：海底捞招股说明书，云锋金融整理
海底捞利用师徒关系的绑定，一方面增强了员工与店长的纽带，一方面，极大节省了培训的开支，帮助新店从老店汲取经验从而复制其增长。
图片来源：海底捞招股说明书
在海底捞，有个很特别的员工管理形式叫做“抱团小组”，通常是由一个区域内5至18家存在师徒关系的门店为主，餐厅间互帮互助，老店帮助新店进行拓展与经营，落后门店也能从中得到指导。
强店带弱店，师傅带徒弟，无形间就降低了总部的培训成本，形成稳定良好的关系。
目前，海底捞共有37个抱团小组，覆盖超过300间餐厅。在海底捞，并不存在教会徒弟，饿死师傅，反而是，教会徒弟，富了师傅。
懒惰Sloth
说罢员工管理，我们来看看海底捞是怎样抓住客户需求的。
有句话说得好，世界是由懒人推动进步的。面对日益懒惰的消费者，海底捞有两件事做得非常到位，一是会员制，二是火锅外卖。
据悉，海底捞是最早使用平板电脑为客人点餐的餐厅之一。而海底捞做这个可不是为了“时髦”，而是另有大用。
通过电子点餐注册会员的消费者，在下次进店点餐时，只要登陆，就可以根据自己上次的点餐习惯，快速选择菜品。不单单是烦恼吃什么的时间被消减，就连从牛羊肉划动到蔬菜的时间都会被省去。
通过大数据，海底捞帮助消费者节省思考和点单的力气，不光在想偷懒的顾客端讨了巧，同时也无形减少了每单顾客的用餐时间。
据招股说明书披露，2017年海底捞的翻台率达到了每天5次。比起别的火锅店在菜单上勾选讨论，海底捞的不少顾客都能发现自己原来是个“有效率”的人。
而外卖，则更是我们的懒人福音。外卖并不新鲜，然而海底捞的火锅外卖，的确发挥出了想象力，抓住了消费者的懒惰，受到了全国人民的喜爱。
懒得洗头、懒得化妆、懒得换衣服、懒得出门，高节奏高压的生活，让现代人格外珍惜自己的休闲时光。即使海底捞的等位服务再有趣，想着要浪费几十分钟排队还是让人觉得不太值当。
一个电话，快递小哥送来了整整齐齐的超大纸箱：食材和小料分门别类码放整齐，附赠超长火锅筷子和一次性餐具，甚至还有衣服除味剂。——海底捞的外卖，一如海底捞的堂食，以令人惊喜为目的。
2010年，海底捞正式开展火锅外卖服务。至今，它已经在超过40个城市有自己的外卖业务，外卖占比从2015年的1.3%提升至2.1%。
海底捞外卖业务三年营收一览
图片来源：海底捞招股说明书，云锋金融整理
海底捞通过把握人类的懒惰，布局了外卖市场这一快速增长的市场。
据统计，2017年中国外卖市场总收入达2091亿元人民币，13年至17年复合增长率45.6%。根据中国餐饮市场报告，预计2022年中国外卖市场总收入将至4770亿人民币，占中国餐饮市场的7.6%，各线城市全面开花的局面有望持续。
2017年外卖市场规模同比增长情况
图片来源：中国餐饮报告2018，云锋金融整理
当下，我国外卖业务覆盖1600个城市，马太效应明显的外卖江湖(1/4的订单来自知名品牌商家) 未来仍旧有广阔的增长空间。
海底捞2017年外卖业务增长50%，无疑是在火锅界再拔头筹。它利用人类的懒惰早早占据了先机，未来怕是还要走得更远。
贪婪 Greed
贪婪，也可以指永不满足。作为一个主打火锅的公司，海底捞在商业战略方面充分发挥想象力，将“贪婪”的特质发挥的淋漓尽致。
在过去3年，海底捞新增门店数量已超越之前20年的门店总数。2016年的176家扩张到2017年273家。甚至，海底捞计划在2018年新增180-220家门店，即每两天就要开设一家新店。
在境内开店风生水起之际，海底捞迅速扩张、走向海外。
资料来源：海底捞招股书
海底捞成立的二十余年间，在北上广等57个城市有190家直营餐厅。此外，已有台湾2家、新加坡4家、美国洛杉矶1家、韩国首尔3家和日本东京1家直营餐厅。
如果说新开分店是扩张的自然需要，整合上下游则充分显示了海底捞的“野心”和想象力。
海底捞集团业务版图
图片来源：海底捞招股书，云锋金融整理
业务线上，近几年，百亿营收的海底捞加速扩张。根据其招股说明书，募集资金的60%用于业务扩张，20%将用于技术开发，15%用于偿还贷款，而剩下的5%用于营运资金及一般用途。
短短几年，它的业务遍布上中下游，甚至包括了不搭界的装修和管理咨询。可以说，触手所及都深度扩展，把有可能变现的业务部门都拎到了大众视野里。
2016年7月，海底捞系中专攻火锅底料、蘸料的颐海国际在港交所挂牌上市。
2017年4月，冒菜品牌优鼎优在新三板上市。
对比将内部服务能力对外输出并独立上市的打法，如果海底捞仅作为餐饮门店存在，其价值会大打折扣。事实证明，海底捞帝国里，各业务板块都在业界建立了各自的知名度，不再是海底捞餐饮的附属品。例如颐海国际直接来自关联方（主要是海底捞）的收入仅占53.8%，其余来自第三方；来自第三方的收入增速惊人，经销商、电商业务等渠道，均录得100-400%的增速。
贪得无厌并不是海底捞的作风。基于对每一个环节的严格把控，如新店装修的速度、充足的储备店长，海底捞开店后通常1-3个月即可实现盈亏平衡。
海底捞的贪婪，贪而有道。
暴食Gluttony
大盘鸡、回锅肉、辣子鸡、烤鸭……，
中国人也许天生就格外喜好美食，给了餐饮市场肥沃的土壤。据统计，2017年中国餐饮行业收入超过3.9万亿元，到2020年，餐饮市场很可能有超过5万亿元规模。
中国餐饮市场规模
图片来源：中国餐饮报告2018，云锋金融整理
民以食为天的中国，并不缺乏好味道，可当今中国这个4万亿的餐饮市场，还没有出现一个麦当劳、肯德基式的千亿级别的公司。在这个讲究烹饪技法的国度，对厨师和食材的依存极高，一家餐馆可以做到远近闻名，可掌厨大师无暇顾及多家店，以至于规模化很难实现。
在这种环境下，最火热的品类正是最不讲究烹饪技术、相对可以标准化的火锅。根据中国餐饮报告2017数据，火锅占餐饮业总营业额22%，位列榜首，超过排名第二的自助餐近一倍。在“坐拥四万亿市场的中国餐饮行业，为什么出不了一家千亿龙头”一文我们提过，标准化是规模化的一个重要的前提。
我国饮食文化博大精深，即便是火锅也有诸多口味和类别，从小肥羊、澳门豆捞、重庆麻辣到老北京涮锅、潮汕牛肉等等各领风骚。
各类火锅占比
数据图片：2018中国火锅产业餐饮大数据研究
仅靠标准化，海底捞能否一招鲜吃遍天？恐怕也没有这么简单。在招股书中，海底捞也提到了，会根据地域差异对火锅口味进行调整，例如引入椰子鸡锅底等。这种差异化，对海底捞的管理，提出了更高的挑战。
挑战虽然在前，但民以食为天、且我国还在外出就餐增加的大趋势当中。这个趋势将伴随头部公司的集中。目前看来，海底捞是离千亿市值目标最近的中国餐饮公司。
淫欲Lust
在现代商业环境，lust可以引申为社交属性。脸书（facebook）的雏形，就是一个给大学女生评颜值的网站。最近风口浪尖上的滴滴，其顺风车产品意图打造的，也是社交属性。
目前，还没有看到海底捞在这方面的动作。否则，已经把握了人性如此多弱点的海底捞，岂不是让竞争者更加没有活路了？
结语
人性恐怕是这个世上最经不起考验，最脆弱的东西。
它被当作每个人的弱点、原罪，被大批特批，被试图摒弃。但同时，它也蕴藏着巨大的宝藏：任何成功的商业模式，背后都是对人性的洞悉。
那天，张勇走进一间会议室，里面坐满金融精英。他说："在座的各位想必都是世界名校毕业的吧。今天大家会坐在下面听我讲，肯定是我想过什么你们没想过的东西。是什么呢？人性。"
最好的商业模式，都是针对人性的。而海底捞的每个细节，都在体现对人性的把握。
这就是为什么，海底捞你学不会。
阅读之前，温馨提示下，文中提到的 UI设计方式不一定有对错，如果使用得当，它们都有很大的可能性。
也许你会知道这种感觉，当你打开一个新的网页，阅读到一半时，突然被一个巨大的浮层打断，要求填写电子邮箱。大多数人第一反应是关闭弹窗或关闭整个网页。
这么多网站都会使用这种方式，其用意显而易见。然而，这种方式对用户产生了非常负面的影响——中断了用户正在做的事（对用户来说重要的事）并将注意力集中在另一件事情上（对网站来说重要的事）。在你试图要求获取用户信息之前，最好等用户完成当前的事情（例如，阅读并熟悉内容）。让他们有机会选择是否做某件事情，而不是强迫他们去做。
无限滚动是指用户可以通过无限地向下滚动浏览页面大量内容。当您向下滚动页面时，它可以一直刷出新的内容。虽然听起来很好，但这种方式并不适用于所有网站，也不是 APP 的通用解决方案。
△ 图片来源：Geo Law
这种方式的缺点也是它的优势——它是没有终点的。用户访问到网页的某一个位置，他们无法记录当前浏览位置以便于稍后回到同一位置。当用户离开了网站，他们将失去之前访问的所有进度，不得不再次向下滚动页面返回到同一位置。这种方式无法确定用户的滚动位置，不仅会对用户造成烦扰或混淆，而且还会使整体用户体验变差。
2012年，Etsy 花了很多时间实现电商网站的无限滚动界面，但是却发现新界面的体验不如翻页。虽然购买数量没有什么变化，但用户参与度却下降了（人们有目的地使用搜索的次数下降）。
正如 Dmitry Fadeyev 指出：
人们会想回到搜索结果列表中查看刚才看到的内容，并与他们在列表中发现的其他内容进行比较。无限滚动不仅打破了这种对比，也使列表上下移动变得困难，尤其是当你下次回到页面，发现自己又回到了顶部，需要再次向下滚动列表并等待内容加载。在这种情况下，无限滚动界面就比翻页慢多了。
设计师在设计中加入无限滚动之前，应该权衡它的优缺点。选择取决于场景以及内容的传递方式。一般来说，无限滚动适用于像 Twitter、Instagram 这样的产品，用户在消耗无穷无尽的数据流时不会特别寻找特定的内容。
译者注：作者在《UX: Infinite Scrolling vs. Pagination》中提到无限滚动的优缺点：
1. 无限滚动的优点
用户停留的时间更长，提升用户参与度。当用户没有特定寻找的内容时，可以通过浏览海量信息找到自己喜欢的内容（如Pinterest、Facebook）。
滚动比点击操作更快更容易，分页展示每次内容更新都需要额外点击等待加载。无限滚动对于移动设备很友好，移动设备的手势控制让滚动更自然。
2. 无限滚动的缺点
影响页面性能，加载速度慢，用户无限的向下滚动，加载更多的内容，页面的性能会越来越低。
无法定位到上一次浏览的位置，需要重新不断下拉回到同一位置。
网站右侧的滚动条变得无关紧要，反映不出数据量，当你以为快要接近底部，引诱你继续向下滚动，结果更多的内容又呈现出来。
缺少页脚，用户有时候需要查看某些信息，去页脚查看发现没有。这些信息可以展示在别的地方，或者加上「加载更多」的按钮来响应用户对更多内容的需求。
结论：无限滚动适用于用户没有特定目的的原创内容网站（Twitter，Facebook）或者视觉（Pinterest，Instagram）的网站和 app，分页则适用于用户在寻找特定信息的搜索结果列表，以及用户浏览位置重要的地方。谷歌的图片用了无限滚动，相对于文本搜索，用户可以更快地浏览和操作图片，文本搜索则需要花费更长的时间。
3. 使用无限滚动的建议
您是否注意过每天从各种应用收到的通知和提醒消息的数量？其中您真正关心的通知有多少？
每天用户都会被没用的推送轰炸，分散日常活动的注意力，并感到恼火。
恼人的推送通知是人们卸载移动应用程序的首要原因（根据调查受访者的比例为71％）。
当用户开始使用 APP 时，如果推送内容足以让用户「愿意被打断」，他们就不会那么在意收到推送消息，换句话说，这意味着推送消息必须让用户觉得足够有用和有趣。因此，为用户推送有感染力并使之愉悦的定制化内容才是关键。
推送通知是一项特权，因为用户信任你，才允许你直接向他们发送消息，你不能滥用这个特权。
为用户设计有用，相关和及时的通知非常重要。推送通知可以成为企业直接与用户沟通的强大工具，并在适当的时间和地点传递正确的信息，以促进互动。
译者注：作者在《Mobile UX Design: What Makes a Good Notification?》、《How to create effective push notifications》中提到推送通知需要注意几点：
适当的时间。尊重当地的时间，不要在用户睡眠的时候发送通知，比如国际化的 APP 针对不同的地区调整推送时间。Andrew Chen 收集了一些数据显示推送打开率在下午6点后更高，当用户参与度最高的时候，在下午6-8点时发送推送通知。
△ 图片来源：Andrew Chen和 Leanplum
限制次数。设置一个合理的推送次数，一些 APP 只要触发了与你相关的信息就会提醒你，过多的推送可能会引起用户的不适。
个性化定制不同的推送内容给不同的用户，推送对用户有价值的内容。比如根据用户的浏览历史做相关用户感兴趣的推送。
发送消息之前应该确定好目标，跟踪数据，确认推送是否达到了效果。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
本文介绍在设计表单体验时，决定这两个控件之间的指导性原则和案例分享。表单提供了几个可以更轻松收集用户输入的控件。设计表单时，在正确的位置使用正确的控件是一项挑战。
复选框控件有三种状态：unselected（非勾选态）、selected（勾选态）和indeterminate（未确定态）。最后一个状态代表子选项列表在父选项下分组且子选项处于勾选态和未勾选态之间的情况。
切换开关代表允许用户打开或关闭物体的物理开关，如灯的开关。
点击切换开关需要两个操作步骤：选择和执行，但复选框只有一个选项，其执行通常需要另一个控件。
在选中复选框和切换开关控件之间时，最好关注使用的环境而不是其功能。
下面是一些在设计表单体验时决定这两个控件之间的指导性原则和案例分享。
案例1：即时回复
使用切换开关时，
1. 应用设置的立即响应是无需明确操作的。
2. 设置需要打开/关闭或显示/隐藏功能才能显示结果。
3. 用户需要执行不需要审核或确认的即时操作。
如果需要即时响应的选项最好选择使用切换开关
案例2：设置确认
使用复选框时，
1. 应用设置需要在提交之前由用户确认和审核。
2. 在显示结果前，设置定义需要执行提交、确定、下一步、等应用操作。
3. 用户必须执行其他步骤才能使更改生效。
如果需要显式操作来应用设置，则首选复选框
案例3：多项选择
使用复选框时，
1. 有多个选项可供使用，用户必须从中选择一个或多个选项。
2. 逐个单击多个切换开关，每次单击后等待查看结果是需要额外的时间。
在列表中选择多个选项，复选框能提供更好的体验
案例4：不确定状态
使用复选框时，
1. 当多个子选项在父选项下分组时，需要中间选择状态。中间状态表示在列表中选择了多个子选项（但不是全部）。
使用复选框最好地显示不确定状态
案例5：清晰的视觉状态
使用复选框时，
1. 有可能与切换开关的开/关状态混淆。有时很难理解开关是显示状态还是动作。
2. 需要提供明确的勾选状态或未勾选状态。
有时切换开关不能清晰地显示它是状态还是动作
案例6：相关项目
使用复选框时，
1. 用户必须从相关项目列表中选择选项。
用复选框显示要选择列表中的相关项
使用时切换开关时，
1. 用户切换独立的功能或行为。
独立项目可使用切换开关进行选择
案例7：单选项
使用复选框时，
1. 提供单个二进制是/否选择。
2. 只有选择或取消选择一个显而易见的选项。
单个是/否选项更适用于复选框
使用切换开关时，
1. 需要单一选择，并且您希望为开/关类型的决策提供两个选项。
使用切换开关可以最好地理解单个开/关决定
结论
重要的是在表格中的正确位置提供正确的控件使其更加用户友好。由于表单有很多很长的选项，若用户必须进行额外点击才能填写信息，对用户来说会变得枯燥乏味。提供的案例和指南会帮助你决定在表单中添加控件时选择复选框还是切换开关。
参考文献
1. Control and Patterns《控制和模式》
2. When to Use a Switch or Checkbox《何时使用开关或复选框》
3. Selection Controls《选择控制》
4. UX Design: Checkbox and Toggle in Forms《UX设计：表单中的复选框和切换》
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
蓝蓝设计的小编 http://www.lanlanwork.com
