用好的交互设计来管理复杂

作者：Mandy权，一名快乐的产品经理！～

微信公众号：Q产品

复杂是可以被管理的，但要做到这一点，我们都必须做好自己该做的那部分工作。

筛选器

Tesler’s Law/泰思勒定律（复杂性守恒定律），这个定律告诉我们：每个应用程序都有固有的不可简化的复杂性，问题需要是由用户还是设计者去处理需要产品经理用心思考。有时复杂仅仅来源于那些应该经过过滤的大量信息。我们必须按照人们的行为方式来设计，而不是按照我们希望他们应有的行为来设计。

正如诺曼所说 "复杂是世界的一部分，但它不应该令人困惑 " 好的设计能够帮助我们驯服复杂，不是让事物变得简单（如果复杂是符合需求的），而是去管理复杂。产品经理需要保持“设计者—产品—用户”的合作关系，让设计与复杂共生，使得复杂的内容变得简单易用且交互清晰。在诸多展示大量信息的功能中，“分类筛选”就是一个典型的Feature。今天我们就来分析几类“筛选器”的交互设计，并剖析下他们的优劣。

第一类：分层级筛选

下拉菜单，浮层模式 （目前较为常见的模式）

这类展示模式更适合筛选内容分类较少，且分类层级不超过两层，通常情况下标签筛选内容不多于10个，同时能在2-3排展示完全。

常见App类型：云盘类、购物类、健身类、打车类等，如图所示：

当筛选内容足够具体化，能高度的概括为耦合度较低的信息分类的情况下，建议使用本类筛选交互模式。因为这类模式的信息展示足够直接明显，用户操作步骤较少而且清晰。

全新浮层，全屏展示

这类筛选器，一般来讲会囊括关键词筛选，同类信息排序两种内容。与其分散展现，不如聚合在一个整页做选择。这类交互模式更偏向筛选的关键词足够简洁易懂，同时有一定的定制思维在里面。通常情况下，关键词的覆盖内容更加贴合产品的核心表现，或者产品经理需要突出展示某类信息。

另外筛选的类型仅为一种，或者需要定制化。譬如地理位置、定位城市、O2O的不同模式及优势，与此同时，展示的信息需要不断扩充，或者有计划增加、修改的情况。如上的情况下选用新增一页的模式，扩展性更强，同时对版本交互稳定性会更高。

常见App类型：游记类、垂直电商类，如图所示：

第二类：综合性筛选

底部Bar，抽屉模式

用户习惯性的浏览方式，一般来讲是 “F” 的形状，即自左向右，自上而下。当这些关键区域被头条，副题，热点以及重要文章之类的核心入口占据时，

“筛选”这类重置页面内容的功能放置底部位置，就显得更加干净，且不喧兵夺主。同时基于用户操作习惯的考虑，抽屉式的页面弹出，扩展性会更强，内容聚合度会更高。

常见App类型：旅行类

由于对内容筛选的要求较多，因此需要高度整合的筛选器，同时展示的区域普遍要求较大，信息承载较多，在选择筛选器设计交互形式的时候，通常会使用底部Bar，抽屉式的展示方式。

当需要筛选的内容为多种类型，且多层级，譬如：“国家-省份-城市”这类层层嵌套的模式，就建议使用底部Bar的展示方式。相对于“大众点评”及其他O2O的应用，选择自上而下的抽屉模式筛选器来说，更建议使用底部Bar的模式，因为底部Bar的筛选，当刷新数据时会更直接的看到内容的展示，而自上而下的抽屉模式会遮盖底部的内容展示，相对而言，信息筛选的及时性就降低了。

新开界面，复合嵌套

当品类多，且分类细的时候，通常需要把类别做第一层框架的分类，然后在第一层框架中再进行一次分类，表现形式可以是Tab或者抽屉收起。

《设计心理学2》中提到：“日常的生活通常是复杂的，但并非由于某个特定活动时复杂的，而是因为有那么多表面上简单的活动，每一个都有它自己的一套特定的需求，把大量的简单活动合在一起，结果就会是复杂和令人困惑的：整体大于它各部分的总和”。所以对于大量内容及品类需要展示给用户的时候，产品设计不能过分简单，简单本身不一定是良性的，简单也不意味着更少的功能。

常见App类型：百货类

对于不同的App应用，选择合适的内容筛选模式。对产品经理在交互设计及产品框架上的理解要求是比较高的，如何把零散且重要的信息聚合整理在一个小小的筛选器中，需要我们从产品功能的具体要求出发，考虑场景化及易用性的前提下，尽量做到合理。

个人中心

抽屉式、二级导航

偏工具化的App，默认的首页通常会提供产品最核心的内容，从而使得用户每次在需要使用都感觉非常轻松，一打开APP就可以快速使用。当某件东西的运转、可选项和外观与人们的概念模型相匹配，它就会被认为是简单的。

产品设计，应该是降低用户学习成本，符合用户的使用习惯，了解用户大脑中已存在的概念模型非常重要。那么“个人中心”作为一个二级模块，被放置左上方，为核心的工具化功能做辅助，且不宣兵夺主，又可以令用户能形成感觉登记，在用户需要查看个人信息或者设置工具项时，方便打开即可。因为人们在浏览信息或布局时，视线往往趋向于从左上角移动到右下角。

古腾堡图表简单的说明了阅读产品时的习惯性轨迹。

譬如滴滴打车的核心常用功能是“打车”，多看阅读的核心常用功能就是“阅读”（书架），那么把“个人中心”用这种模式放置工具界面的导航上，就比较合适。这样的交互设计会让主界面清爽，并收拾了很多属于个人中心的复杂内容，放置二级界面，感觉主次分明，管理合理。

独立Tab，多层列表

当产品有较多的信息，需要展示在个人中心，同时个人中心是用户对比核心模块而言，并行存在的一级入口时，通常我们可以用独立的Tab来放置“我/我的”（个人中心）这个模块。对于个人中心中的分类较多，条目需要较为清晰时，建议使用多层的列表呈现内容，多层的列表会显出内容与内容之间的阶层关系。一般情况下，这类列表主要适用于文字信息为主要内容的列表，列表内容里面没有图片或者图片不是很重要的信息。

另外，除了文字外可能还会用到一些按钮，选择框等一些交互控件来辅助列表的交互。多层列表的方式，高效且具有极佳的视觉可视性，能够一眼看出整体信息架构能够同时浏览与处理多个阶层的内容。如下图所示的案例：

模块化，网格缩图

与前一个交互设计对比，把列表替换为用网格缩图的方式呈现，让用户可以使用视觉图片的方式浏览内容。这样的设计，图像比文字还容易辨识，而且更容易的区分。因为详细内容与列表呈现在同一个画面，能轻松的阅读信息。当然模块化设计有个需要注意的地方，那就是当用户需要依赖文字来寻找的内容时，就不适合使用了，因为使用者必须不断跳跃浏览。

如果你的产品的个人中心模块，众多内容中，有部分模块需要强调，那么使用网格缩图的方式，就会比多层列表方式更加容易突出优先级或者重点，譬如下图所示，当你想要突出订单模块的内容，就可以通过留白和布局，从界面设计本身就区隔化，让用户一目了然。

综合上面三类常见模式，我们可以看到，无论选择哪种方式，在设计个人中心之前，首先应该思考，本交互动作的设计是否已满足内容的需要，同时也要考虑整个产品交互的一致性以及平台的兼容性。另外，交互方式要符合用户的操作习惯。只有从根本上管理复杂，才能够设计出简单的产品。从此思考自己的产品的需求是什么，打造一款产品满足自己的需求。

Tab

标签可能看起来像一个微小、乏味的图形用户界面设计，但我们合理的运用Tab的特点，易用易理解，就能为你的用户体验加分。

最简单的界面小部件会是大模块功能的基石，是否用好用得合适对产品的体验起着重要的作用。本文谈论的就是一个经常被误用的设计元素：Tab。

上下文替换

在相同的上下文中使用Tab来替换视图，设计的标签是平行的性质，而不是导航到不同的区域。这种Tab切换，可以直观的看到逻辑块后面的Tab内容，这样当用户选择一个给定的标签时，可以很容易地预测前后Tab的内容及关系。如果人们需要比较不同的标签后面的信息，使用这类Tab作为信息切换就比较合适。

如下图：蓝色圈出部分。

功能类导航

同理，只有当用户不需要同时从多个选项卡中查看内容时才使用Tab导航。因为使用Tab导航会增加用户短期记忆的负担，增加了认知负荷和互动成本，并降低可用性。在产品设计时，导航设计应该突出当前选定的标签。确保突出显示，这样用户就可以分辨出哪个选项被选中了。

当然，除了强调被选中的内容，你还可以标记当前页的大小，通过一个粗体标签，图标，或者通过排序来突出优先级。同时，未选中的标签应清晰易读，成为提醒用户的附加选项。如上图：绿色圈出部分。

内容类标签

将当前标签连接到内容区域，就像你正在用标签的几个物理索引卡进行移动一样。这强调了显示面板，也告诉用户选项卡被选中时，只有几个标签。将标签放在标签面板的顶部，而不是在两侧或底部，用户经常会忽略它们。

标签控制的范围从视觉设计应该是显而易见的。打个比方，使用标签就像翻阅抽屉里有一个老式的卡片目录索引卡，所以用户必须能够一眼分辨什么是“卡片”（即标签面板）。如下图案例：

总结一下：

Tab的使用应该将外观与功能功能设计的相同。“一致性”在图形用户界面控制设计是非常重要的，因为它建立了用户在界面上的感知：用户知道如何使用你的Tab，而无需进一步探索或容易出错的猜测。

这就意味着，他们可以把自己的全部时间和脑力去理解的内容和功能。大部分人会认为Tab本身没有价值，但它们的光芒会在不禁意间感染到你的用户。在我们设计功能的时候，可以通过做一个快速的A / B测试，让Tab的设计符合用户习惯。

查看更多

“查看更多”按钮像一个链接标签的拐杖，在各类网页及App中被通用，网站现在已经大量使用这个通用的标签链接。作为一个独立的标签，“查看更多”按钮，直接描述所表达的含义，用以帮助用户从下一页了解所期望的内容。

现在的很多网站及App设计，越来越弱化不太重要的信息内容。也就是说，标签及按钮描述都会选择简短精致的措辞，以保证用户易于扫描，方便消化。当用户决定他们想要更多的信息的时候，他们可以挖掘一个链接或展开抽屉页面信息，从而获得不太重要的内容。无论是点击“查看更多”还是上拉加载都是获得更多收起来信息的方式之一。

“查看更多”按钮的三类变形

变形1：使用描述链接目的地的关键字
变形2：保留了解更多的格式并添加描述性的关键字
变形3：将前面的段落转换成唯一的链接

如下图案例：

由于“查看更多”会产生不确定性，用户不知道他们会期待什么，如果他们点击，或者所得到的内容是否会是值得等待一个新的页面等等，这一系列不确定性的感觉会导致用户犹豫，不确定性和认知压力对用户体验产生了负面影响，并转变成一种认知紧张状态，有些人可能会采取常驻在页面以评估不清楚的联系。

在移动端，无论是App抑或是Wap，由于其移动屏幕要小得多，而列表项目将占用一个相对很大一部分的屏幕，那么通常只有两到三个项目被显示在列表视图布局中，所以用户将不得不在移动设备上进行交互（即滚动）或者点击。

对比网页分页处理，App的用户更加不愿等待页面重新加载，所以产品设计的时候，应该尽量避免分页。实验证明，在移动端，无限滚动是非常有效的获得更多内容展示的方式。较长的产品列表在App上通常通过自然的上拉行为，加载更多的数据，加载过程根据产品定位变形给类的动画，以降低用户等待过程中的焦虑感，提高用户对产品的体验认知。

如下图：