用好的交互设计来管理复杂-“筛选器”

我们必须按照人们的行为方式来设计,而不是按照我们希望他们应有的行为来设计。


我们必须按照人们的行为方式来设计,而不是按照我们希望他们应有的行为来设计。

用好的交互设计来管理复杂-“筛选器”

好的设计不是让事情变得简单(如果复杂是符合需求的),而是去管理复杂。在《在做交互设计时,你需要知道这几大定律》中我们总结了Tesler’s >Law/泰思勒定律(复杂性守恒定律),这个定律告诉我们:每个应用程序都有固有的不可简化的复杂性,问题需要是由用户还是设计者去处理需要产品经理用心思考。有时复杂仅仅来源于那些应该经过过滤的大量信息。我们必须按照人们的行为方式来设计,而不是按照我们希望他们应有的行为来设计。

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

第一类:分层级筛选

下拉菜单,浮层模式 (目前较为常见的模式)

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

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

用好的交互设计来管理复杂-“筛选器”

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

全新浮层,全屏展示:

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

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

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

用好的交互设计来管理复杂-“筛选器”

第二类:综合性筛选

底部Bar,抽屉模式:

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

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

常见App类型:旅行类

用好的交互设计来管理复杂-“筛选器”

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

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

新开界面,复合嵌套:

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

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

常见App类型:百货类

用好的交互设计来管理复杂-“筛选器”

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

 

作者:权莉,微信昵称:Mandy权。一名快乐的产品经理!

本文由 @权莉 原创发布于人人都是产品经理。未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/27839/

(0)
CatherineCatherine
上一篇 2017-05-19 11:46
下一篇 2017-05-19 13:39

相关推荐

  • 在网页设计中帮助用户实现目标

    预测用户的意图,让他们尽可能接近目标。△ 筛选出或跳至用户正在搜索的条目

    2017-05-24
  • 【IXD案例】国际第一时尚品牌VOGUE-iPhone端案例高保真原型-抽屉效果案例

    本次分享给大家展现依然是高保真效果的原型,上一次展现的是iPad版本的,这次是iPhone端版本的原型,和上次一样,我们依然以国际第一时尚品牌VOGUE为例:iPhone端的效果比iPad更复杂,难度更高,我们要做的是抽屉效…

    2016-02-26
  • 7个设计技巧,让内容和用户体验无缝地配合起来

    好的设计往往需要好的内容作为基础支撑。无论是内容还是设计,想要让两者最大化的搭配,往往是需要进行调整和优化才行。“不要总是玩弄算法,创造用户想看的内容才是正途。”

    2017-08-04
  • 有用户体验落地方法,才能让销售额增长

    图片设计 | 宗宗;编辑 | 海悦如果你觉得本期学霸有链接价值,请在【学霸十三妹】微信公众号后台回复"黄胜山"即可获取学霸联系方式。在物品富足时代,如何吸引用户的青睐,抓住用户的眼球,是很多商家不得不探索的课题。今天,在上海洽客in,学霸十三妹请来了学霸黄胜山,专注研究用户体验十年的老司机,带你揭秘用户体验那点事!黄胜山:唐硕体验创新咨询 管理合伙人,浙江大学心理学硕士,上海交大MBA和混沌商学院,14年用户体验咨询和设计经验,服务客户...

    2018-03-21
  • AI 交互设计怎么做?谷歌详解自家 AI 相机设计思路

    文 | 何忞来自雷锋网(leiphone-sz)的报道雷锋网按:日前谷歌在其官网发布博文,文中详细介绍了 AI 相机 Google Clips 的一些设计思路。雷锋网将其编译如下正如过去曾经发生过的移动革命以及再之前的网络革命一样,机器学习正在让我们反思、重构、重新审视我们生活中已经拥有的一切。在 Google 用户体验(UX)社区中,我们开始了一项名为“以人为本的机器学习(HCML)”工作项目,来指导和帮助我们重构世界。站在这样的视角...

    2018-02-03
  • 怎样绘制用户体验地图

    内容来自梁宁老师的《产品思维30讲》,这里是第17讲的笔记。怎么画用户体验地图1.完整的用户角色:需要对「第一只羊」有完整地了解。 (「第一只羊」的话题留在下次介绍)2.清晰的目标和预期:清晰描述用户的目标和预期,他为什么来到你的草地上?他要什么?比如,用户买钻孔机,但是他的目标不是拥有钻孔机,而是需要在墙上打个洞。比如吃饭,用户目标是吃饱?还是想要营造气氛?还是想获得一次交流机会?搞清楚用户的目标和预期到底是什么。3.服务触点:用户从...

    2018-04-01
  • iOS 9人机界面指南(二):设计策略

    译者注:本文译自苹果官方人机界面指南 iOS Human Interface Guidelines (2015年10 月21日),由腾讯ISUX设计师翻译整理,非发文者一人之作。译文首发于ISUX博客,如在阅读过程中发现错误与疏漏之处,欢迎不吝指出。后续章节会陆续更新,敬请期待。

    2017-06-01
  • 电视交互设计的一些事 | 设计基础15

    两年前,我总结过《Apple Watch交互的一些事》,简单的分享了下手表小屏幕的交互设计。而在过去一年多的时间里,我有幸参与了电视端大屏幕的项目,在不断的尝试、探索和设计中,也收获了一些关于电视端的设计经验,因此将这些“电视交互设计的一些事”分享出来,共同探讨电视端的设计。✨硬件+远距离操控——基本交互基于桌面资料研究以及设计经验,总结了基本交互主要包含以下几个关键内容:遥控器输入、导航和菜单、信息展现、控件摆放和焦点状态。一、 遥控...

    2018-01-30
  • 交互设计趋势

    这两天在一个QQ群里看到了很多询问:交互实际是需要什么技能?要不要会设计界面等等的问题?我想做产品经理,需不需要会......? 我在之前所阐述了交互与视觉相统一的概念。交互设计在于对内容的整个、提取以及规划…

    2016-08-02
  • 如何改版一个3亿用户的神奇网站

     #交互学堂#十年后的今天,随着58的业务越来越壮大以及一些创新产品的加入,单纯的形式越来越难以承载业务含义,统一的样式也越来越难很好地满足用户的需求。  为什么要改版 58同城自2005年创立以来在APP、M、PC主…

    2016-11-03