越来越多的产品引入会员系统，如何做好一个会员系统，是当下设计师需要解答的一个命题。
会员的本质是建立用户分层，便于形成用户的差异化营销，通过这种差异化的营销达到以下四种目的：
提高用户留存率（增加用户粘性）；
提升用户价值；
得到会费收益；
建立流量桥梁；
目的：筛选出高价值用户（高留存+消费力强），精细化运营
手段：收会员费，建立用户层之间的壁垒
结果：用户自发分层，愿意掏钱的那批人成为会员用户
原则：给会员用户提供卓越的服务，给普通用户提供好用的服务（反例：某网盘限速机制，约等于强卖会员，严重伤害普通用户的使用体验）
价格优势：会员专享低价（电商产品有会员专享价、外卖产品有会员红包）
资源优势：增值内容（影视、音乐版权）
体验优势：更好的服务（更快响应、专属客服、无广告等）
心理优势：身份认同（尊贵感标识，与普通用户形成差异。对社交、游戏尤其关键）
短期价值：通过收取会员费，提高营收
长期价值：增加用户粘性、巩固并提升市场占比
体验角度：更好的服务、专属福利
心理层面：身份认同、沉没成本（已经花了会员费，越多使用越合算，不然就亏了）
UI界面设计环节，一般的会员体系会涉及到的界面、视觉元素有：
会员触点/前置曝光
会员中心
会员身份等级
所有将用户引导至会员中心页面的入口都可以算作会员触点，触点越多，用户被引入会员中心的可能性越大。但触点也不是越多越好，过多触点会引起用户反感，将触点置于合适位置，能更自然高效地提高转化率。
2.1.1 个人中心：露出会员板块，通常是视觉强调中心。
个人中心是曝光率较高的页面，其中整合了许多重要和必要功能入口。利用个人中心页面，可以很好增加会员信息的曝光。该方式也是最常见且最通用的触点形式，不局限于产品类型。
2.1.2 内容卡点：体验完免费部分之后，会员内容收费，触点卡于两者之间。
增加用户沉没成本：用户已经在早期投入大量时间和精力阅读免费内容；
利用用户好奇心：有前文做铺垫，用户行至卡点处，对剩余内容的好奇远超过一般内容；
需求明确（制造问题）：用户开会员就是为了解决剩余内容无法观看这一具体问题，用户总是倾向于解决问题而不是在原有基础上提高要求。
2.1.3 会员专区：建立专享感，将会员内容与普通内容进行区隔。
将付费内容集中在一个区块内，制造差异化，不论是内容质量或者商品价位，本质都是让用户形成会员价值很高的感觉。
2.1.4 会员频道
常见于电商产品，同样是起到区分内容，建立壁垒的作用。
2.1.5 底部提示
使用较为轻量的底部提示，引导用户关注会员信息。该视觉样式还常被用作登录提醒。
2.1.6 小banner
见缝插针式的视觉提示，占用流量最大的首页空间，此时文案的利益刺激尤其重要。
2.1.7 会员专页
使用一个底部tab的权重来承载会员相关信息，可见会员体系的重要性。
会员中心是展示会员权益，以吸引用户开通会员的页面。是用户全面了解会员相关信息的窗口，氛围营造、权益展示、行动点突出，是设计会员中心需要考虑的要点。
2.2.1 会员中心的常见页面结构
不同产品有不同的会员中心布局，有差异性也有共性。
氛围感、套餐选择（多套餐情况）、行动点、会员权益，是多数会员中心页面共有的模块，模块之间位置并不固定。
本质上越重要的模块，应该被分配越醒目的视觉表达方式。通过调整位置、面积、视觉对比度等，都可以调整不同模块之间的权重，达到产品想要呈现的优先级效果。
2.2.2 会员中心_氛围感
打造氛围感的方式多样，常见的有以下几种方式：
2.2.3 会员中心_套餐选择
部分产品不存在套餐选择，只有一种套餐，如盒马。在用户体系中，将用户分为两层，用户会员与非用户会员。部分产品在会员中又进一步分类，推出了多种会员套餐。
常见套餐以时间区分，如包月会员、季度会员、包年会员、连续包年会员等。除此之外，也有以权限范围为区分，如百度网盘的会员VIP和超级会员SVIP，超级会员享受更多特权。还有垂类会员，如视频产品中单独开辟出体育分类，对应设立专门的体育VIP卡。
上方案例中的套餐选择均以卡片的样式展示，除了该种方式，还有可以以列表形式展示。
列表形式的好处在于，套餐在垂直方向铺开，延展性强，当套餐数量改变时，不会影响展示效率，而卡片式的展示形式会造成部分套餐被挤出屏幕，用户需要左右滑动才能浏览全部，交互成本略高。同时，卡片式套餐需要点击选中套餐，再点击行动点，才能触发支付，而列表式模型，直接点击对应套餐项上的按钮即可呼出支付，交互更加简洁。
多套餐模型下，产品往往会重点突出一到两项套餐，从商业层面讲，通常希望用户选择价格更高的套餐，从体验层面讲，将附加值最高的套餐用角标突出，辅助用户决策。
2.2.4 会员中心_行动点
行动点是一个页面中最醒目的元素，往往是由按钮充当。按钮的点击数据也可以直接反映页面的设计是否合理。对于会员中心页面来说，提升关键性按钮点击，往往是改版的目标和方向。
最常见的行动点布局方式有4种：
购买按钮常驻于底部工具栏
购买按钮紧邻套餐选择模块，位于页面中部
页面同时有多个购买按钮
界面始终存在一个购买按钮
符合一般操作习惯，关键行动点常驻于页面底部，已经被普遍接受。
购买按钮紧邻套餐选择模块，从操作的角度上来说，更加合理，套餐选择完毕之后，购买按钮含义类似“确定”，两个步骤紧密相关，符合格式塔的远近亲疏原则。同时，页面中心相比于页面底部更加容易视觉聚焦，用户能更加容易注意到。这也解释了，为什么居中的对话框常用于警示，需要引起用户高度关注，而底部半弹窗往往承载不那么关键的内容，一般承载无破坏性的操作。
购买按钮意味着支付入口，头部卡片上增加支付入口，不妨通过数据观察，测试不同位置的点击效果如何。
随着页面上划，界面中第一个行动点（页面中部）被推出视图，此时底部工具栏浮出，保证页面不管在何位置，始终可见至少一个行动点，让用户随时可以进行支付。
2.2.5 会员中心_权益
会员权益是决定用户是否购买会员的重要因素。有些权益相当实在，如会员折扣、专属红包等，而有些权益的诱惑力相对较弱，不同的权益强度决定了不同的视觉呈现方式。
会员权益细节介绍
会员权益从交互上，可分为两类，可点击和不可点击。不可点击的权益往往在会员中心页面是以宫格图标的形式呈现。而可点击的权益，往往内容详实，需要更多的空间来解释和说明权益的具体内容。
从视觉形式上，也可以分为两类：
弹窗呈现
子页面呈现
除了购买会员之外，部分产品引入了“身份等级”的概念来将用户进行分层。划分的维度可以是用户的活跃度、裂变能力等，可以依此，设计一系列的会员任务。会员身份等级机制利用了用户的攀比、自我实现等心理，进一步增加用户与产品之间的粘性。
会员身份等级一般集中在4-7个之间，其中梯度理论上呈递增趋势。作为设计师，需要将低等级到高等级这种“越来越高端”的氛围烘托出来。不同类型的产品有自己的特色和局限，金融类产品在整体视觉属性上趋于稳定内敛，而娱乐性强的产品则在视觉上限制较少。
随着梯度的增加，设计难度也在增加，如何在不同等级之间拉开合适的视觉感知差距，是一个难点。如上图中的“黑金会员”和“黑金PLUS会员”在视觉上比较雷同，差异较小。当静态视觉发挥空间有限时，可以考虑加入动态元素，增加区分。
徽章系统
与会员等级的本质一样，徽章系统将用户分层，制造不同的用户群，拥有更多、更高级徽章的用户对于产品来说，自然是价值更高的用户，这类用户是产品需要重点关注的对象。他们是产品的深度体验者，他们的意见反馈相比于普通用户更加准确和反映问题。
随着产品本身的日渐成熟，越来越多的产品选择加入会员体系。会员体系无论对产品的短期或者长期利益都至关重要，从短期来讲，直接增加营收，从长期规划来讲，对于增加用户粘性、提高市场份额也有着重要意义。作为设计师，如何把用户对于会员期待的“价值感”、“尊享感”用体验的形式呈现出来，至关重要。
会员体系涉及到的相关设计细节很多，小到一个会员标签，大到一级页面，其中的设计细节更是不胜枚举。将庞大的概念不断拆解为一个个细小的可控的模块，加以分析和总结，始终是沉淀设计经验的方法之一。高大上的观念理论，需要一个个见微知著的细节支撑。
文章来源：站酷 作者：doo_W
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
工作中我们常常会听到或在撰写交互说明时提到“从底部向上出现弹层”、“出现浮层”、展示“对话框”、弹出“弹框”、“出现对话框”诸如此类的话术。我相信大家对“浮层、弹层、弹框、对话框……”等称呼常常也会感到困惑。到底什么时候应该称呼为“对话框，什么时候称呼弹框”，此类相似的组件又是如何分类的，应该如何应用、如何设计。
恰好笔者近期在设计弹出层组件，本篇文章将结合自己的实战经历，自己对弹出层组件的理解和设计经验分享给大家，希望帮助大家对弹出层组件有更清晰的认知和理解。
首先我们看一下弹出层组件的定义：当触发某项操作时，在页面上方展示的弹出层容器，容器内可展示文本、按钮、列表、标签、表单项等内容，英文名称定义为 Popup。
△ 弹出层组件的构成
根据弹出位置的不同，我们又可以将 Popup 组件细分为如下 5 种样式。
△弹出层组件的 5 种样式
看到弹出层组件的样式，想必大家已经联想到日常用的比较多的组件了，比如“Alert 确认框，picker 选择器、基于场景的筛选组件”等。弹出层组件是十分基础的组件，基于该组件我们可以开发通用性组件以及场景组件。从“形式”角度来看，“浮层、弹层、弹框、对话框……”本质上都是弹出层。
“浮层、弹层、弹框”是泛指的称呼，两大官方平台也都根据自身的规范对相关组件进行命名。Material Design 和 iOS 官方规范中的弹出层组件如下图所示，并且笔者从“功能”角度出发整理了组件之间的对应关系。后文会详述每种组件的定义及应用。
△MD 和 iOS 规范中的弹出层组件
在详述组件之前，还需要向大家传达一个概念“模态”，即平时我们常说的“模态弹框”（弹框可理解为是弹出层的一种样式）。并非有一种组件的分类被称作是“模态弹框”，而是当弹框采用了“模态”的设计手法时，我们将其简称为“模态弹窗”。
iOS 官方定义为：
“Modality is a design technique that presents content in a temporary mode that’s separate from the user’s previous current context and requires an explicit action to exit. Presenting content modally can:
Help people focus on a self-contained task or set of closely related options
Ensure that people receive and, if necessary, act on critical information”
翻译过来即：模态是一种设计手法，它使用一种临时性的模式将用户之前看到的内容与当前看到的内容进行区分，并且需要通过明确的操作才能退出该模式。模态呈现的内容可以：
帮助用户专注于一个独立的任务或一组紧密相关的选项，确保用户收到关键信息，并在必要时采取行动
由此可见，弹层是否为模态弹层可以根据具体的使用场景进行定义。在 iOS 官方中定义的模态弹层通常包括：Alerts, Activity Views ,Share sheets, and Action Sheets .iOS 13 及后续的系统中将 Fullsreen 也作为模态弹层进行使用。MD 中的 Dialogs 组件均为模态，而 sheets 组件不采用模态设计手法。
警示型弹框均采用从页面中间进行弹层的方式，MD 和 iOS 中组件的样式略有不同，但其使用场景和功能相同。都是在重要信息提示、需要用户确认的操作、以及破坏性操作之前进行提示，警示型弹窗会中断用户的任务流程，影响用户体验，因此需注意其使用频率。
△警示型弹框 Alert Dialog
使用场景：通常在系统级信息的提示，例如权限的获取、系统通知，需要明确告知用户的信息，以及破坏性操作前使用。
△警示型弹框应用
根据用户在弹层中需要完成的任务内容和任务数量，又可分为简单型和复杂型弹层。
简单型弹层
常用于在弹层中展示内容，需要用户进行选择的场景，该场景通常只需要用户完成一种任务，比如通过点击的方式，完成信息的选择或分享。在 iOS 中采用从底部向上弹层的方式，而安卓平台多使用在页面中间弹层的方式。
弹层中是否存在操作按钮可根据实际应用场景去确定。通常选择项条目较少或内容简单易于识别时，可不需要「确认」按钮。而在选择项条目较多时或需要用户作短暂的思考才能确认选项时，可增加「确认」按钮，允许用户有修改选项的机会。
△简单型任务弹层的组件样式
△简单型任务弹层的组件样式
弹层中信息的呈现方式又可分为“列表”和“网格”两种，大多种场景下，均可使用列表展示内容，更加符合用户从上到下的阅读习惯；而在分享场景下多通过网格的方式将分享渠道展示出来，增加屏显的内容，同时提高用户查看信息的效率，具体样式可参考上图。
使用场景：简单型弹层多用在信息的筛选、排序和信息确认的场景下使用。且在目前市面上的绝大多数应用中，除原生的安卓应用外，大部分应用都采用从底部向上弹层和从顶部向下弹层的方式。
△简单型任务弹层的应用
复杂型弹层
复杂型弹层中通常承载的信息量更丰富，包含多种组件，需要用户完成一系列的任务。
涉及到信息筛选时，通常采用侧边弹层组件进行展示，且弹层上的信息仅支持垂直滚动查看，不支持水平滚动查看，且通常采用“非模态”的手法，方便用户快速取消当前弹层。在 iOS 中并无“Sheets:side”组件，但是在 iOS 系统中，很多 APP 应用在复杂的筛选场景下也都采用侧边弹层的方式。
全屏弹层会将当前页面中的全部信息遮挡，更方便用户聚焦于当前需要完成的任务，避免用户的注意力被分散。通常采用模态的设计手法，仅当用户触发确认、取消或关闭操作时，弹层才会消失。一般全屏弹层中需要包含标题、操作按钮、内容区域。用户在全屏弹层中需要完成多个任务，因此内容区域中也会包含多个组件。例如“按钮、输入框、标签、开关、列表、日期选择”等。
△复杂型任务弹层的组件样式
使用场景：通常用于完成复杂任务的表单信息填写、内容筛选、搜索和内容展示。
△复杂型任务弹层的应用
需要单独说明气泡框组件
在 iOS 的官方定义中，气泡框组件应用于 iPad 应用程序，在 iPhone 应用程序中，通过以全屏模态视图而非弹出框形式显示信息，来利用所有可用的屏幕空间。但是，组件被定义后并不是一成不变的，而是随实际场景进行应用的。例如，在手机端，气泡框组件更多被用于简单信息的展示与选择。
△Popovers 气泡框的应用
小结：
笔者按照使用场景、信息的复杂度、功能的相似度等，将弹出层组件归纳为两大类“警示型和任务型”，并且枚举了常用的 MD（安卓系统遵循的规范）和 iOS 两大规范中定义的弹出层组件，方便读者对弹出层组件有更清晰的了解。需要说明的是，由于业务场景是复杂的、多样的，各位设计师也需要结合实际的业务场景和设计目标，灵活的使用组件。
△弹出层组件的类型与使用场景
1. 设计目的
首先需要理解我们为什么要设计组件，组件最终设计的目标是什么，笔者从“设计侧和技术侧”两方面谈谈自己的理解。
设计侧：规范的组件设计，对内有利于全公司的设计师对组件的使用有统一的认知，明确组件的使用场景，避免误用和错用组件，并且方便新人设计师快速学习和上手，提高设计效率。对外也有利于保证设计上线后的一致性和规范性，方便用户对本公司产品建立统一的心理认知。
技术侧：通用的基础组件，具有可复用性，能够减少重复开发，大大提高开发效率。
组件设计的最终目标可归纳为保持设计的统一性，提升用户体验，同时提高设计和开发的效率。因此，组件设计是非常有必要的，那么到底如何从 0-1 开始设计组件呢，下面我们来看组件设计的详细思路。
2. 设计思路
其实组件设计的基本思路是通用的，不仅适用于弹出层组件，还适用于其他基础组件的设计。通常我们会从组件的定义、用法、构成、种类、行为与状态五个方面进行组件的设计。
△组件设计的思路
回归到本文所讲的移动端弹出层组件，组件设计时需要考虑其“通用性和可复用性”。基于此原则，将弹出层组件进行拆解，如下图所示。它包括：
△弹出层组件的拆解
从上图中可看出，本文第一部分提出的 Popup 组件是最基本的弹出层组件，基于该组件可进行任何弹层组件的开发。因此，在弹层组件设计时将 Popup 组件抽离出来作为最基础的组件进行开发， 还可以进一步开发通用的弹层组件和高频使用的场景组件。由于上文中已讲 Popoup 组件的构成与样式，且由于该组件相对来讲比较简单，因此不过多赘述。下面以通用组件“Picker 选择器”和筛选场景下的高频组件“筛选器 Filter”为例进行说明。
1. Picker 选择器
定义：用于从一组预设数据中进行选择的控件。
用法：
构成：标题、按钮、内容（当前选项和其他选项）
△Picker 选择器组件的构成
种类：根据选项间是否存在级联关系可将其分为 2 类，普通选择和级联选择。
△Picker 选择器组件的分类
行为与状态：状态，给出单列选项和多列选项的常态页面以及选项被禁用的状态页面。行为，需要定义完整的组件交互逻辑，从入口->弹层出现->选项查看->选择目标选项->弹层消失的完整逻辑进行说明。
△Picker 选择器组件的状态
△Picker 选择器组件的交互流程与行为说明
当完成以上全部内容的撰写时，可对本组件开发出的效果进行说明。例如：
2. Filter 筛选器
Filter 组件是基于公司移动端产品均存在的高频“筛选”场景而总结的场景（业务）组件，其设计思路和上方描述的通用组件的设计思路相同，笔者此处只强调 2 个重点注意事项。
场景组件在设计时遵循“加法”逻辑，从而提升组件的复用率。组件内容分区块进行封装，从而增加组件的灵活性。
△筛选器组件
在上图所示的筛选场景中，单类目和多类目筛选若均为高频的使用场景，那么单类目和多类目筛选组件均可以抽离成组件并进行开发，且多类目筛选可基于单类目筛选组件进行开发。但是多类目筛选组件是无法覆盖单类目筛选组件的，组件开发不同于设计稿，设计稿可将多个类目删除掉只剩余单个类目，但是组件的代码逻辑不遵循此删除逻辑。在原有组件的代码上修改的开发成本要高于重新开发组件。因此，如果要修改多类目筛选组件的逻辑，不如重新开发出单类目筛选的组件。这也是需要我们牢记的，组件设计需要从“原子组件到复杂组件”，遵循由“简单到复杂”的加法逻辑。
而在组件开发时通过“goup”的形式进行封装，可使组件更加灵活。例如，当业务场景是需要通过“输入框”组件输入筛选条件，只要将 Group 中的内容改为“输入框组件”，即只需修改该 group 下的代码即可，筛选器组件的其他逻辑仍然可复用，这就提高了组件的通用性和复用率。
当然，Filter 组件还需要考虑很多设计细节，例如类目名称是否显示为当前筛选项名称、重置的逻辑是什么、确认筛选后页面信息会如何变化、筛选项支持单选还是多选等等。复杂的场景组件通常是由多个原子组件组合而成，因此组件的逻辑也更为复杂，组件设计的整体流程和交互细节也应考虑的更加全面。
文章来源：优设网 作者：土拨鼠
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
这个项目在2019年立项，在2020年完成，项目进行中又几番变动，万幸最终还是完成了！
非常感谢团队中的小伙伴给予的帮助，能够与你们一起共事非常幸运！
------------------------------------------------------------------
*本次输出非100%与最终上线稿件相同，有部分设计因开发成本与项目预算原因未能实现！
*部分商品图片来源于网络，仅作为展示与交流使用！
------------------------------------------------------------------
转自：站酷
作者：火龙果_pitaya
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
移动互联网的迅速崛起，让移动网页，移动客户端越来越重要，客户端的页面设计也是一门很大的学问。科技迅速发展的今手机屏幕的尺寸越来越放大化，但却始终 很有限，因此，在APP的界面设计中，精简是一贯的准则。这里所说的精简并不是内容上尽可能的少量，而是要注重重点的表达。在视觉上也要遵循用户的视觉逻 辑，用户看着顺眼了，才会真正的喜欢。
接下来为大家分享精美的app UI设计案例：
蓝蓝设计(北京兰亭妙微科技有限公司）是一家专注而深入的UI设计公司，公司对UI设计的追求一向很高，致力于为卓越的国内外企业提供卓越的手机 ui设计、软件界面设计、网站设计，用户研究、交互设计等服务。
--手机appUI设计--
简单地讲，分类就是按照种类、等级或性质分别归类。
某种事物无论是按什么分类，只要是属于同一种分类，就一定有一个共同的属性，而这个属性就是分类的依据。
假如手机是指“移动便携性的通讯设备”，那么小米手机、华为手机、苹果手机等，虽然系统不同、性能配置不同、外观设计不同，但是都可以归类到手机，因为它们都具备“移动便携性的通讯设备”这一共同属性。
再举个很简单的例子，苹果、梨子、芒果都可以划分为水果，因为他们具备“多汁且主要味觉为甜味和酸味，可食用”的属性（定义来自百度百科），这些属性是归属于这个分类的必要条件。基于这个分类，我们比较容易判断得出，生菜不是水果，因为虽然具备可食用性，但是不具备“多汁且主要味觉为甜味和酸味”。
分类可以把杂乱的事物变得规整，把凌乱的信息按照某些维度划分，使事物更加清晰。
前两年风风火火的垃圾分类，就是一个例子。生活中所有物品废弃后都可以成为垃圾，如果不进行垃圾分类，处理成本高且污染环境。而垃圾分类，就是将垃圾按一定规定或标准将垃圾分类储存、投放和搬运。
既然分类是按照某种方式进行组织，那我们需要明确了解，分类方式必须让用户易于理解。所以，分类本身是否合理，很大程度上取决于人们能否容易理解分类。
“简单的组织模式具有清晰的界限——是非分明。这样，用户才能明确知道到哪里去找自己想要的东西。因此，要多找一些用户，询问他们的分类标准。如果众口不一，或者根本就难以回答，你就有麻烦了。”
垃圾分类很火还有一个原因，因为用户经常不知道什么物品属于什么垃圾，这就对垃圾分类产生很大的阻力，网上一时间有了很多识别物品垃圾分类的产品功能。
我之前使用三星手机，每次想要在设置里面寻找某功能，都很让人烦躁，因为手机设置里定义的某功能的分类方式，与我们的认知并不一致，这就会造成寻找时及其低效的情况，同时也会引起强烈不满，这意味着，如果你忘了某事物的具体名称，而分类方式与心理模型所认知的分类方式不一致，你就极难找到。（不过三星很有意思的一点是，尽管在设置的分类项里找不到，但是往往能在设置项下方的推荐查找处找到相应功能，这就很魔幻。）
分类本身就是将混乱的事物进行归类，这带来一个很明显优点，就是便于用户查找，只要用户明确某事物属于哪一分类，便能相对轻松地找到。
比如我们想要寻找某款好用的修图软件，但是不知道具体名称，想要在应用商店的众多应用里，寻找某款应用，比较常用的方式就是搜索或者分类。
分类可以将应用按不同用途进行划分，比如视频、拍摄、工具、社交等。通过这些分类，可以很大程度上缩小我们的寻找范围，这就是分类的高效性。
分类还有隐藏属性，就是对比性。许多用户使用分类时，也会喜欢进行对比。
还是以修图软件为例子，你想要某款修图软件，于是你通过分类，找到了一批修图软件，而你本身并不知道什么软件好。分类将相同属性的软件聚合到一起，一定程度上可以帮助你基于某种维度进行对比，正好可以让你更轻松地对比哪款软件更适合你。
分类是否合理，还需要看分类本身是否足够全面。理论上，我们通过分类划分事物，则分类需要可以将这些食物完全囊括。如果分类本身无法囊括这些事物，就会造成用户寻找时的盲区，证明这种分类方式本身不合理。
假如用户去逛淘宝，想要找某物品，但是翻了很多分类，仍然找不到，这时大概率就不会再通过分类进行寻找了，而这种糟糕的体验，也会让用户对这个产品的分类变得很失望。
刚才说到，同一分类是围绕同一个属性的。但是，同一个事物，本身可以有很多种分类方式。而我们需要保证的是，事物在同一分类里的具有唯一性。
一首歌，如果按照语言体系维度进行划分，一般可以划分为华语、英语、日语等。还可以按照流派维度来划分，一般可以划分为电子、轻音乐、摇滚、说唱等。
我们对事物的认识方式是立体的，事物可以被按照不同维度进行不同分类也就不足为怪了。同一个事物，甚至同一个人，是可以有多种分类方式的。
说完分类的许多属性，我们聊聊在互联网产品中，用户会在什么场景下使用分类？我们又该如何设计分类功能？
首先，用户会在什么场景下使用分类？从产品层面，分类是便于人们查找某事物的一种方式，因为相对比较清晰、高效。
这里有个很关键的点，就是“查找”。也就是说，分类的使用场景，偏向于人们有相对明确的目的。用户的行为路径是有主动的查找需求。
互联网产品，查找某事物，最常见的方式是搜索，浏览，分类。而这几种方式都有不同点，分类侧重于“属性”区分。
大部分用户使用分类时，行为特点是相对主动的。此时用户未必有十分明确的目标，但大致知道想要什么。比如你想和朋友聚餐，不知道具体吃什么，这时候你打开了大众点评，你只知道要吃中餐，这时你可以在中餐的分类里去找适合你的店。
用户的目标如果十分清晰，则更适合直接搜索，因为这比起分类查找的路径更短也更高效。
总结一下，我们要设计分类功能，需要从用户的角度来观察分类这件事情。：
· 用户主要的行为模式：人找内容。
· 有目标但不够明确。
我们需要先了解分类的细分层级，分类的层级大部分不超过 4 层，但会因不同产品的定义不同而有所区别。
一般来说，第一层是颗粒度相对较大的，接下来会层层在上一层的基础上细化。
以京东的分类为例：
第一层：奢侈品，箱包，手机等；
第二层：手机包含：热门品牌、手机类型、运营商、手机配件；
第三层：热门品牌包含：苹果、华为、OPPO、VIVO、小米等；
第四层：苹果手机包含：iPhone 12、iPhone 11等；
最少的层级是两层，比如垃圾分类：
第一层：可回收垃圾、干垃圾、湿垃圾、有害垃圾；
第二层：具体的垃圾物品。
就体验层面而言，建议分类层级避免超过 3、4 层，尽管本身可能会提升细分度，便于用户查找。但由于分类方式本身必须与用户的理解相契合，如果太多层分类，用户需要思考目标内容在哪一分类。经过几层判断后，才能找到目标内容，这对于用户的理解成本是比较高的。
此外，太多层级不利于用户在不够熟悉分类方式时快速了解某分类下的具体事物。如果用户对分类的划分方式理解错误，就需要返回继续查找，效率低、使用门槛高。
当然也不能盲目追求尽可能短的分类层级。两个层级可能无法满足查找需求，因为内容量庞大，所以还需要更多的过滤，需要依据产品类型而定。
由于目前许多产品都发展到相对成熟的状态，所以设计分类功能时，一般不需要对分类方式再进行划分，主要原因是相同类型的产品，分类方式大同小异。用户的理解习惯上，对于某事物的分类也有基本的认知。现在设计分类功能，主要是对页面交互及视觉层级进行重新设计和调整。
我们会梳理常见的分类交互框架，从分类入口、页面布局等层面可以看到产品中分类功能的定位强弱。这里列举的分类形式，会根据产品的主功能进行阐述。比如电商类就是商品分类、旅游类就是地点分类等。
以京东 App 为例，京东把分类功能作为一个主要的页面模块。分类 tab 占据了 App 的第 2 个底部 tab。
使用京东的用户，购买的目的性相对较强，京东主打的就是自营正品和快递速度，商品与淘宝相比会少很多，但依然很全。用户习惯上，“逛”的属性没有淘宝那么强。首页以功能区+信息流为主，偏向于商品分发+逛信息流，而分类功能则主要满足相对明确目的用户需求。
京东分类页左侧为一级分类，右侧为二、三级分类。侧边导航将分类竖排的最大优点是能够充分利用屏幕空间，提升分类类型的展示效率。适用于分类类型多、分类层级多的场景。右侧页面信息灵活性较高，可以配置运营位，如放置运营 Banner ，且支持左右滑动 Banner 。下方一般放置二、三级分类。
右侧页面滑动时，顶部有辅助查找二、三级分类的导航分类标签，便于用户快速查找：
切换一级分类：这种框架切换分类的方式主要有两种：1、点击左侧导航栏进行切换；2、向上滑动右侧页面进行切换。用户习惯上，第 1 种方式会更高效，而第 2 种切换方式会更自然，更符合手势操作。
以【推荐分类】为例，右侧【常用分类、专场推荐、热门分类】都是归属于【推荐分类】的。为了便于用户更好区分页面分类层级，页面向上滑动时，通常会设计继续上拉切换的提示。目的是提醒用户，该部分已经滑动到底了，继续上滑会切换到下一部分，明确区分不同分类。
上滑的另外一种模式，以宜家为例，宜家聚焦于家居用品，分类类目没有大型电商 App 那么多。左侧是一级导航【灯具照明、装饰品等】，右侧分类标题与左侧导航一一对应，并且分类之间无明确的页面分隔区分，所以滑动时无需设计切换到下一部分的提示。
以上讲的，右侧页面均是二、三级分类入口，并不是具体的。分类层级或类型少的情况下，右侧可以尝试放置具体内容，比如华为应用市场的处理形式。
需要注意：
1、左侧导航占据了屏幕纵向的固定位置，从而缩减了页面宽度。
2、由于层级多，左右侧均是分类入口，用户无法在页面直接看到具体商品/内容。在电商产品上，用户容易区分不同分类类目下是什么商品。但可能在某些 App 上，用户未必清晰所要寻找的内容在哪一分类类目下，可能造成用户流失。
3、如果没有具体的内容呈现，对于内容、商品等分发效率也存在影响。
顶部导航型的优点是将多级分类与具体内容结合在一个页面，可通过点击或者滑动切换不同分类，将触达具体内容的路径尽可能减少，提升具体内容的曝光。
以掌阅 App 为例：最高层为一级分类，可滑动。第二层是二级分类，更精准分类挑选。第三层导航偏向于筛选。第四层为具体内容，用户无需通过页面跳转就能查看。这种设计特点很明显：内容曝光 > 分类效率。由于一级分类不多，可以通过左右滑动查看，避免浪费页面空间。二级分类类型多，采用折叠的形式将分类收起，点击可以展开更多二级分类。
显而易见的，多层分类在顶部排列，视觉效果并不佳。默认状态下，占用页面顶部的空间。这种结构，在设计时为了能够节省页面空间，二、三级导航会伴随用户向上滑动的手势折叠，提升内容的曝光效率。用户在滑动场景下，会更聚焦于页面具体内容而非导航，所以折叠的设计比较巧妙。
这种设计由于具体内容曝光的效率高，受到许多产品的青睐，适合于资讯类、内容类等产品。比如微博首页，微博侧重于内容的主动推荐，所以将分类弱化为一行导航栏，页面主体为具体内容推荐。用户浏览的内容有相对固定的倾向，比如会喜欢看综艺、社会、美妆等内容，并没有很强的寻找不同分类的诉求。
若用户想要设置常用的分类频道，可点击【+】展开，查看常用频道。由于频道比较多，而横滑 Tab 左右滑动的效率较低，所以微博选择了展示部分常用频道。如果用户想查看更多频道，还能在展开的页面里进行配置。这种设计为分类功能的设计带来了更多自定义性。
知乎的处理逻辑与微博一致：
淘宝的分类相比于一般电商类的产品，会比较特别，常见的电商类产品的分类模式和上面介绍的京东 App 比较相似。但淘宝已经往全面信息流化的方向发展，为了推动用户在淘宝中“逛街”，甚至连分类都已经往信息流化的方向发展。
淘宝的分类功能正在弱化，不像京东、苏宁占据着底部第 2 个 tab 的位置，而是在首屏功能区的最后一位。点击后，也不再是常规的侧边导航，而是强化商品外显。
淘宝分类页除了上方的一、二级分类，下方都是商品推荐，向上滑动就是瀑布流，增强商品而弱化分类效率。
如果用户想看其他分类，可以通过左右滑动切换。如果希望查看更多分类，需点开旁边的”更多“按钮，通过”更多“按钮进入的页面，侧重于高效展示分类。淘宝有信心这么做，一部分原因可能基于对算法推荐的信心，我发现不同手机看到的分类顺序并不一致。
以 B 站为例，B 站的分区页面的设计形式为展示番剧、国剧、放映等所有一级导航，而将细分层级隐藏到下一级页面。
这种设计方式适合一级分类类型很多，且重点在于高效呈现这些分类类型的场景。二级页面聚焦于具体的内容，可以避免将一、二级分类堆叠在一个页面，满足用户对查找分类的效率的要求，避免过载的信息量使页面变得复杂。但显而易见的，这种结构不利于用户在当前页面直接看到下一层级内容。
App store 整体逻辑与 B 站一致，区别在于排列方式为列表型排列。
vivo 应用商店也是聚焦型分类，但是会把二级分类呈现出来，与侧边导航型分类很相似，区别在于这里是整列表滑动。
前面讲到，分类是具有多种维度的。以“好好住”为例，有居室、面积、风格、预算、特色等维度。
上面“好好住”的几个维度之间，没有上下层级之分，均属于同一层级，所以层级是并列而非递进的，这种情况更适合采用筛选的处理形式。同样的，由于顶部筛选类型多，占据过多的页面空间，当页面上滑后，筛选可折叠以节省页面空间，同时更聚焦与具体内容。
设计分类功能，要先明确分类的维度，以及用户是否容易理解，避免造成与用户认知习惯相冲突从而影响功能使用的情况。
整体上，通过分类功能找目标内容的路径应该避免太长，因为这会影响到内容曝光效率及用户对分类之下的具体内容的感知。
分类本身是一种信息组织与呈现方式，设计时需要对产品信息本身有足够理解，才能有针对性地思考交互框架。分类功能的交互框架多样，每种都有优点和缺点，需要根据产品定位及诉求（优先展示分类，还是优先展示具体内容）采用适合的交互形式。
需要注意的是，有的产品的主功能甚至没有很明确的分类，比如淘票票，定位是买电影票，而人们看的电影具有很强的时效性，能不能看到电影几乎完全取决于电影何时上映，重点更侧重于向用户推荐最近的电影。
以上分析了分类功能、罗列了比较常见的分类功能设计形式，希望能帮助到各位。
文章来源：站酷 作者：热风_
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
移动互联网的迅速崛起，让移动网页，移动客户端越来越重要，客户端的页面设计也是一门很大的学问。科技迅速发展的今手机屏幕的尺寸越来越放大化，但却始终 很有限，因此，在APP的界面设计中，精简是一贯的准则。这里所说的精简并不是内容上尽可能的少量，而是要注重重点的表达。在视觉上也要遵循用户的视觉逻 辑，用户看着顺眼了，才会真正的喜欢。
接下来为大家分享六款精美的app UI设计案例：
蓝蓝设计(北京兰亭妙微科技有限公司）是一家专注而深入的UI设计公司，公司对UI设计的追求一向很高，致力于为卓越的国内外企业提供卓越的手机 ui设计、软件界面设计、网站设计，用户研究、交互设计等服务。
--手机appUI设计--
这一年，更多的是关于交互的思考。如果说界面是外表的话，那么交互就是其灵魂，只有交互合理的产品，才能够让用户更好的使用，而交互细节成熟的产品对体验上的提升则更巨大。写这篇的起源是平日在设计评审时或多或少会遇到以下的交互问题：
在思索如何能够尽量避免遗漏细节的过程中，发现状态可见性原则对于这些细节有比较重要的指导意义。这一原则想必大家都不陌生，但可能并没有引起大家的重视，且网上大部分文章对于此原则的解释都比较简短。因此在探索过程中产出了这篇比较详尽的关于状态可见性原则的深度解读。目录如下，重点已圈好～
大家可以根据上述目录来进行选择性阅读，当然全文阅读也是极好的～
我们在开头阐述了可能遇到的一些问题。而以上情况的出现，都源自于我们在设计时思考的不够全面，很多时候都忽略了某些情况下的设计，导致有些关键体验上的问题未被发现。我们可以看下微博和知乎在断网下点赞的例子。
可以看到，微博在断网下依然有点赞动作的反馈，且没有任何异常提示，这样会导致用户大多数以为此次操作是成功的。但知乎在断网情况下，点赞是不能生效的，且有消息提示“异常提醒”。这样的话其实就能够让用户明白此次操作没有成功。在这种场景下，微博的点赞就属于“不恰当的反馈”。而这些设计，都可以归因于状态可见性原则的范畴。
让我们先了解一下状态可见性原则的定义。这是尼尔森(Jakob Nielsen)-人机交互学博士，于1995年1月1日发表了「十大可用性原则」。而可用性原则位于十大可用性原则之首。
虽然只有这么一句话，但其中包含的意义比较重大。我们现在所使用的系统，都运用了状态可见性原则，如果没有，那么系统几乎会掉入不可用的现象。而系统在使用体验上的差异性，有很大一部分原因也在于可见性原则运用的好与坏。
我们来举一个生活中的例子来帮助大家理解。当你手机没电，你用充电器连接手机时，在连接的一瞬间（恰当时间），手机状态发生变化（恰当反馈）让你成功获取手机正在充电的信息（系统状态）。如果在某个环节出现问题，比如连接上手机2分钟后（不恰当时间），手机状态才发生变化。那么你肯定会认为哪里出现了问题。这就是状态可见性原则的基础运用。
那么我们如何能够深刻理解一个原则呢，最简单的做法就是将其拆分，并结合实例理解。下面通过原则拆解来进行深刻解读。
我们将拆解分为以下三个部分，下面的篇幅会更详尽地进行说明
时间在这里指的就是系统的响应时间，而合理则可以理解为时间的长短。这句话可以理解为从用户执行操作到反馈出现的间隔时间是否正常，是否有影响到用户的正常体验。
当我们在进行打字输入时，我们敲击键盘的同时，屏幕上就会出现对应的文字。而如果出现文字的反应时间过长，我们就会感觉到明显的卡顿，此时的响应时间就会变得“不合理”。
根据Robert B. Miller在他的研究《人机对话的响应时间》中以及其它相关资料，制作得出以下结论图
以上是人机交互响应时间的总览，接下来细节深化每个时间点对应的操作。
我们先看100ms以内的。我们平时使用的小组件动画，比如说按钮反馈，勾选反馈，以及其他需要瞬时反馈的操作，基本都是在100ms内完成的。
在看100ms-1s区间的，在这个期间进行的动画，用户能够很清晰的看见动画发生的过程，而又不显得迟钝。我们普通UI中应用的动画则大部分在100ms-500ms这个范围内。【为何在这个时间内呢，个人的理解是：对于发生在UI界面内的动画，100ms内的动画太快，人只能感受到开始和结束的状态，不能看见发生过程，因此一般大于100ms，而500ms是用户即时感知的最长时间，因此小于这个范围内的动画较为合理】
最后看下1s-10s这个区间的：在这个阶段，最有可能进行的就是相关页面的加载行为，或者某些小型文件的上传和预览。针对于这种情况，我们一般会在加载进行中，添加对应的加载效果，来缓解用户的焦虑和等待情绪。
最后则是10s以上的，一般用于大型文件的上传或者弱网环境的加载过久。
大约10秒钟后，用户的情绪将达到极限，内心将开始产生疑惑，超过10秒，用户往往会离开网站，而不是试图继续恢复他们一开始想要做的事情。
因此，我们在进行系统设计中，需要对超过这一时间内的行为，进行对应的反馈。比如加载超过10s的时候，我们是不是需要给用户提供离开的选项，或者提示用户重新加载这样一种行为。我们可以看下高德和美团在加载中的例子
我们可以看到，在到达10s后，美团自动给出了一个当前网络不可用的，请检查网络的提示，并终止了加载进程。而高德地图则是没有任何提示，自动结束了加载。相比之下，美团能够让用户明白为什么中断了该进程，也就拥有了更好的用户体验。
且对于一般情况下都超过10s以上的形式，我们无须让用户停在当前页面等待。比如微博或者抖音的视频上传，一般会消耗比较久的时间，因此当用户点击上传后，都只会留一个小地方来展示上传进度，用户随时可以做其他的事情，这样有效避免了用户长时间等待的问题。
以上则是常见的在合理时间内的表现，但目前也存在一些特殊场景：
比如时间延迟，图虫和微博会在用户停留几秒后增加评论区域的显示，根据用户停留时间，判断用户对当前内容感兴趣，以此来增加用户的互动。
类似的这种设计还有抖音的评论分享，当超过一定时间后，评论图标自动变为朋友圈图标。而在PC端，也有一个很典型的案例，不知道大家注意到没有，就是关于hover的延迟。我们在使用hover显示时，一般可能大家认为中的都是鼠标移动上去立刻显示，但在某些应用场景中，延迟300ms再进行hover显示，会更合理，举例如下：
大家可以看到上图，在你快速移动时，是不会显示下方的补充说明的。在停留大概300ms后，则会出现提示。其实这里对应了两种用户场景。第一种是快速移动的场景，有利于用户切换不同页签时不打扰用户；而在停留时，用户则是想要看更详细的信息。因此在这里使用hvoer延迟既能不打扰用户，也能满足用户的不同需求。
这里是之前做的一个案例，就是由于没有考虑到hover延迟，从而使得用户在快速移动时会让hover的信息产生干扰。
以上的内容都是针对于时间的详细解释。只有了解在对应的时间系统处于哪种状态，我们才能够满足状态可见性原则中“恰当的时间”这一原则。从而更好的对系统进行对应的交互设计，让用户在使用产品时获得优秀的体验。
按照目录接下来应该讲反馈了，但在反馈之前想先提及一下页面信息呈现。只有当用户理解当前页面所表达的信息后，才能够进行接下来的操作，从而得到对应的反馈。在这里主要提及两个点，一是核心信息，二是预期信息。
一个用户界面如果没有核心信息的呈现，那么给到用户的反馈是很弱的，用户第一眼都不知道从界面中能够获取什么内容。尤其是在移动端核心信息的呈现更为重要：
比如上述两个案例，在界面上只呈现了最重要的内容，移除了其他全部干扰内容，让用户更聚焦。当然平时接触到的不可能全部是这种页面，我们在页面信息呈现较多时，也需要进行重点信息的呈现。在这里放一个动态的案例让大家对比一下重点区分的形式
除了核心信息，还有预期信息的呈现，说白了其实就是元素的可交互性与不可交互性。当事情按照用户预计的方向运行时，用户会有强烈的控制感。在PC上，用户可以使用鼠标悬停来判断该元素是否可交互，但在移动设备上，用户只能通过点击来判断是否为交互元素。
这就要求我们在移动端设计时需要清晰地考虑到可交互元素与不可交互元素在外观上的区分。我们先来看一个关于微信的例子：
大家可以看一下微信的数字呈现，除了默认的黑色字体外，是不是还出现了一种浅蓝色字体。而你点击蓝色字体，则发现可以调出动作面板。而黑色字体则不会。
这就是利用颜色的区分来引导告知用户部分信息的可点击性。而目前关于移动端可交互元素如何设计，如何让评审时不再听到“你这个看着像不可点的”这句话。根据相关资料和过往项目，总结出以下几点：
首先根据目前人们的认知，基础控件类型的都是可以操作的，比如按钮，导航栏、底部标签栏等。下图为工作中做的一些基础控件：
抛开基础控件，剩余重点是文字类。文字类在不加任何提示的情况下，用户会默认为不可操作的对象。一般我们通过下列几种方式来体现其可操作性。
介绍了可交互性，那么再来讲一下不可交互性的元素。不可交互的部分有一个非常重要的点，就是应该需要让用户认识到该元素为什么是不可交互的，不对用户造成困扰。
不可交互的处理方式一般分为置灰和隐藏两种方式。我们首先来看看置灰无反馈类别的使用场景：
还会存在一种置灰有反馈类别的使用场景，而对于非按钮类状态的置灰，经过资料和相关调研，发现可以根据其使用场景来设置是否给出反馈，比如网易云音乐的音乐列表场景。
除开置灰的另一种场景就是隐藏，工具类应用对于隐藏这个操作使用得较多，比如我们平时使用得sketch和figma也基础应用了这一操作场景。
好了，说完了用户界面的相关内容，只有了解上述内容，让用户明白界面哪些是可交互，哪些不可交互。才能够让用户进入到下面的“恰当反馈“。
在这里我先讲手势操作，因为手势操作是前提，然后再讲反馈设计。
反馈的前置条件是操作，我们在加餐中已经告知了如何引导用户操作，但在移动端中可能还包含一些隐藏的手势操作，利用不同的手势可以达成不同的操作响应。我们来看一下这个案例：
这是即刻对同一个控件进行了两种手势的定义，但大部分用户可能对于第二种长按手势的功能其实是不知道的。这样的功能来说对于新手用户来说是处于不易发现的“彩蛋“功能。又比如下方的知乎双击点赞，以及最近微博更新的连续点击效果：
如果我在这里不进行事先说明，可能部分用户还不知道。但好在上述两种方式的设计前提是建立在不影响主功能使用的，用户依旧可以通过其他操作来完成。
说这些的是为了表明，我们在设计反馈时，要考虑到手势操作的用户认知程度，一些特殊的手势操作虽然能提高用户的操作效率，但用户如果都不能发现，何谈提高效率，更多的作为“隐藏彩蛋”功能出现。因此我们在产品设计中要尽量注意去使用常规手势而不是非常规手势。下列归纳了部分手势：
大部分情况下我们其实使用“点击”和“滑动”就可以完成大部分系统操作。如果我们需要加其他操作最好在用户第一次进入时加上引导。
当然，在某些情况下，我们是需要将常用的操作，转化为不常用的操作，来防止用户发生误操作，比如下方的keep在运动中停止的按钮，考虑到运动的场景，单纯的点击很容易被误触。因此keep对“结束”这一功能采用“长按+引导”的方式来防止用户误操作：
OK，接下来正式进入反馈这个环节。
反馈就是当用户对于系统进行相关的操作后，系统对应引起的一系列变化。反馈从类型上可以分为视觉反馈、听觉反馈和触觉反馈。
听觉反馈和触觉反馈在这里简单讲一下，一般在我们的设计中使用的比较少，听觉反馈目前用的最多的是语音助手和地图类工具在息屏时后的反馈，比如下方的高德地图反馈，能够让你在进行开车或骑行时，即使关掉屏幕，也能通过语音反馈知道此时正在导航中：
而震动反馈最开始是在苹果内的应用，包括你在知乎上进行点赞，appstore下载应用，都会进行对应的反馈，让你的感受“实体化”，提升使用体验。
而目前在其他app上，也逐渐开始了应用，比如大家熟知的微信“拍一拍”，在拍头像的同时会伴随着震动反馈；以及iMessage的反馈，它会在烟花绽放的那一刹那有震动反馈，给用户更真实和有趣的体验。
好了，最后来讲视觉反馈，视觉反馈是我们目前最常见的反馈，也是平日里接触最多的交互反馈。视觉反馈可以分为以下三种类型：
控件反馈举一个最常见的案例，就是我们按钮的状态变化，我们通常可以看到状态有以下几种变化：
大家对上述按钮的状态可能都比较熟悉，但在很多情况下可能会忽略一些其他控件的点击状态，比如我们看下方的一个例子：
这是点击“收藏”按钮时两个不同点，一个没有点击状态的感应，一个有。这其实也是之前我比较疑惑的一个点，从功能性上来讲，它并不影响后续的使用。但这种点击状态在官方文档上到底有没有明确说明呢，特意去查了下官方文档，在IOS中的设计原则中有这么一段描述（黑字加粗部分）
并且在IOS的原生应用中，基本都遵循这一原则：
虽然有这样一条原则说明，但并没有特别严苛的规定我们必须要这样做，因为即使没有这种反馈，也不会特别影响用户的整体操作，更多的是带来使用体验上的提升。因此大家可以在平日的使用中根据产品的设计阶段，特别是在优化体验的时候，可以考虑这一部分。接下来我们看一下页面反馈
当我们触发的可交互元素不涉及页面的跳转，那么此时的反馈多数用于当前页面本身的反馈。而一般是由alert、toast、action sheet等来构成的。我们需要利用这些控件来对用户的相关操作给出反馈，比如下面躺平和夸克的例子，当用户操作时有对应的后续反馈：
再来看一个有对比性的例子：
上图是QQ音乐和网易云音乐对于退出账号这一场景采用的不同控件，那么这两种控件哪种使用得更为合理。从用法上来说，两者都没有错误，但目前的移动端设计在这个场景逐渐倾向左侧的设计形式。因为从使用程度上来说，左侧的Action sheet 的级别会弱于右侧的Alert，对用户的打断程度会更弱，且Action sheet可以通过点击空白处来取消，而右侧的alert在移动端大部分都是模态的，只能通过操作来取消。
因此对于这两种需要根据使用场景来进行区分。一般来讲，Alert更适合用于对系统操作有一定风险或者很重要的操作【需要引起用户强烈注意】，Action sheet则相对于Alert更轻量化，对用户的打断较弱。
关于页面反馈这部分还有些控件有比较细致的区分。比如toast提示适用于更轻量化的场景反馈，因为全网弹窗相关的内容也有很多了，在这里不细讲。但大家在使用控件时需要注意下列IOS官网上的一个原则规定：
原则上尽量不去打断用户，给予轻量化的信息反馈，除非是某些需要引起特别注意的场景。关于这个的举例，我们可以看下京东和淘宝在加入购物车的例子：
淘宝是使用传统的toast来进行加入成功的反馈，而京东则是利用一个小动画来达到告知用户已加入成功的提示。相比之下京东的提示则更加有趣和轻量。因此我们除开传统的控件外，也可以利用动效来进行更为恰当的反馈。最后，我们来讲一下页面跳转反馈：
这可能是大部分设计师都一直忽略的问题。在我们的设计说明中，也一直很少涉及到页面跳转的单独说明。而开发一般会按系统默认的方式去设计。
那么在页面跳转中，一般涉及到以下几种方式，左右切换，上下切换以及联动性切换。很多设计师其实并没有太注意左右切换和上下切换的区别方式。那么在这里进行详细的说明下：
最常见的跳转就是左右切换。在大多数情况下，我们一般采用的是这类跳转方式。且该方式应用在大多数应用程序中：
这种方式也跟我们平时的视觉顺序有关，我们一般看事物都是从左到右的顺序来进行的。这种场景普遍存在于界面中，比如一般性的页面切换，功能进入等；接下来我们继续讲上下跳转：
根据资料总结上下跳转的场景应用有以下：
1.触发的新页面相对于当前页面是临时性的操作 (微信发红包，新添加群人员，新建笔记本，新建话题等)，一般用上下的跳转方式：
2.跳转前后的页面存在比较紧密的强关联性，想让两个页面的联系更紧密，可以采用这种方式。比如QQ音乐和网易云的歌曲列表和播放页之间就采用的这种方式。
大家观察一下，同样的上下跳转方式，为什么网易云的整体看上去更加自然柔和呢，除了运动节奏外，还因为在整体的运动过程中，网易云以唱片为联动点，将两个页面联系起来，从而更加地柔和，这也就是接下来要讲的第三个跳转方式：联动跳转。
这种跳转方式一般会以页面中的某个控件作为前后页面的承载点，从而让两个页面的联系非常紧凑，视觉上更加舒适美观，但同时开发难度也比较大，适用于比较固定的某些页面。除了我们熟悉的APP Store外，我们看下面两个案例：
联动页面的好处，就是能整体的页面衔接的更加柔和自然。我们也可以发现，在很多的概念设计中，用得最多的过渡动效也是这种联动设计，比如下方来自Sang Nguyen的概念设计
因为要想提升页面的整体柔顺效果，目前来看联动的方式是最为好的，但同时其实现难度也较大。
这是原则拆解的最后一个小部分，其实就是通过前面两部分的拆解，原则已经讲述得差不多了。而让用户了解，在我看来，就是我们给予用户的反馈能够让用户看懂。
首先看下这个案例：
大家可以看到文案一的整体表述，其实会让用户迷茫，到底哪个是撤回的操作，哪个是取消的操作。而文案二整体的文案和按钮都有非常清晰的指向，能够让用户清晰理解其意图，达到继续操作的目的。我们再看一下开头的知乎反馈的例子，其实设计上还可以更进一步：
通过文案二的进一步设计，能够让用户在知道操作异常的同时知其原因，帮助用户快速解决当前问题。其实文案这部分的内容，在个人看来，一是尽量少用专业术语或者含糊不清的词语来反馈给用户；二是在告知用户出错时，尽量附带简短的原因说明。这样用户更好地去理解想要表述的内容。
OK。写到最后，你会发现以上所讲的内容，其实都是在阐述一个原则——“状态可见性原则：系统应该在合理的时间内通过适当的反馈，始终让用户了解正在发生的事情。”相信大家现在已经知道什么是合理的时间，什么是恰当的反馈，以及如何让用户理解。通过这样的一个原则，我们能够更好地去考虑到交互上的细节呈现，例如一个可交互元素的不同状态，点击后的反馈等。其实原则整体与我们的很多知识相关联，这也是知识体系的一部分。
最近学到的关于知识体系的认知，就是你在学习一个新的知识的同时，能够把你的旧知识串联起来，这样你的整体知识才不会碎片化，而是体系化。通过这样的方式，你在透彻认知一个原则的同时，能够联想到各种关联场景，从而能够把整体的设计及交互做得更完善。
最后想说：经典的原则之所以经典，你会发现虽然它是很早之前提出来的，但具有时代超前性。在面对如今产品应用场景和形态都发生巨大变化的当下，它仍然适用。
文章来源：站酷 作者：进击的M
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com
