从零开始学交互

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

0
登录或者登记去做吧。

作者: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上通常通过自然的上拉行为,加载更多的数据,加载过程根据产品定位变形给类的动画,以降低用户等待过程中的焦虑感,提高用户对产品的体验认知。

如下图:

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

如果加载信息模块底部会有其他模块展示,处理“查看更多”的行为时,最好的解决方案是在产品列表的结尾处有一个单一的大的“加载更多”按钮,让用户选择是否在当前界面展开并加载更多数据。基于移动端的屏幕小的问题,我建议在显示“加载更多”按钮之前,在移动设备上加载15到30条数据为最佳。

“多”并不是困难的来源,在产品设计过程中,能把“多”的内容管理好,把复杂的内容处理好,是可以完善用户体验的。心理学生来说,复杂的事物更容易理解,简单的事物反倒令人困惑。适当的把复杂的东西,让用户操作,也是一种简单化的产品设计方式。

往期回顾:

谷歌设计师万字长文详解Chrome浏览器重设计经验

习以为常的交互界面背后,隐藏了多少设计思考?

iOS10 交互设计启示

后台交互设计中,控件使用场景与规范总结(附案例)
交互设计新人必看:怎样让你的线框图发挥出真正价值?