设计思考模式:“删除、组织、隐藏、附加”

Giles Colborne简约四策略是“删除、组织、隐藏、转移”,由于“转移”在实际设计过程中比较少运用到,所以我根据elya的知乎回答把四策略定义为“删除、组织、隐藏、附加”,elya没有解释她的理解,所以我根据自己理解重新定义。“删除每个页面上一半的文字,然后把剩下的文字再去掉一半。”(《Don’t make me think》中Krug可用性第三定律)“点击多少次都没关系,只要每次点击都是无须思考,明确无误的选择。”(《Don’t make me think》中Krug可用性第二定律》)


Giles Colborne简约四策略是“删除、组织、隐藏、转移”,由于“转移”在实际设计过程中比较少运用到,所以我根据elya的知乎回答把四策略定义为“删除、组织、隐藏、附加”,elya没有解释她的理解,所以我根据自己理解重新定义。

简约的定义

解释“四策略”之前首先需要明确什么是简约,“真正的简约远不止删繁就简,而是在纷繁中建立秩序。”这是苹果设计师乔纳森•伊夫在IOS7发布的时候对于简约的解释。

为什么我们喜欢简约

人喜欢简单的东西是因为简单的东西可以减少认知上的负担,因为我们的大脑喜欢简单而有秩序的东西。可以从人的记忆、思考和注意力三个机制去解释认知负担这个问题,从更深的层次来总结原因就是,人的大脑活动的资源是稀缺的。

第一,记忆。短期记忆是有限的。简单的东西使得我们的感官输入少,容易集中注意力。

短期记忆和集中注意力的程度以及感官输入量相关。(1)短期记忆取决于集中注意力的能力,越能集中注意力,短期记忆的内容能留存得越多;(2)短期记忆与感官输入量是负相关,感官输入量越多,受感官刺激越多,越难集中注意力,短期记忆的内容越少。

我们的大脑一次只能记住4项事物。我们都听过“神奇的7±2”原则,但心理学家Alan Baddeley质疑了7±2的规则,通过对人类记忆和信息处理的大量研究后表明4项才是我们记忆的最佳数量。也就是说如果人集中注意力,不受干扰,那么短期记忆中能保存3-4项事物。尽管我们通常通过“组块记忆”的方式延伸我们的短期记忆,但是如果每个类别中只有1-3条信息,那么人们也能够轻松的记忆。

第二,思考。大脑一次能处理的信息量是有限的。简单的东西使我们接触的信息量较少并且信息是关键有效的,减少认知负荷。

我们的大脑有230亿个神经元,但是一次只能处理少量的信息。人每秒约处理400亿条信息,其中只有40条是有意识知觉的,而且对40个事物产生意识知觉并不代表对40条信息进行有意识的加工。复杂的信息和界面使得大脑需要思考、记忆、辨别以及操作大量的内容,这会带来各种不同的大脑负荷。

其中,认知负荷是最占用脑力资源的负荷。人机工程学理论上有三种负荷:认知负荷、视觉负荷和动作负荷。认知负荷是指思考、记忆和心算,视觉负荷包括浏览和寻找想要的信息,动作负荷包括点击、操作鼠标、打字等。此外,不同的负荷占用脑力资源不相同,认知负荷占用最多,其次是视觉和动作负荷。

第三,注意力。集中注意力处理一项任务的时间和精力是有限的。简单的东西让人容易集中注意力在目标上。

过多的信息干扰我们对任务的执行,使我们难以集中注意力,能记住的东西并不多。大脑的注意力机制会做出以下两点来“保护”我们:(1)选择性注意和主动过滤无关信息:简单的东西无须关注目标以外的干扰事物,可以做到只关注一件事;(2)心智游移:30%时间人会走神,而且心智游移是非常常见的,人集中处理一项任务的时间是有限的,所以我们需要假设人们经常走神,因此简单的东西能让人更容易集中。

简约四策略

简约四策略“删除、组织、隐藏、转移”是使设计更贴近简约的有效途径。

设计思考模式:“删除、组织、隐藏、附加”

1.删除

关键是删什么,留下什么。关于删掉什么可以从两个层面来总结,功能结构和页面表达。

第一,功能结构层面。

删除不必要的功能。那么什么是必要的功能?那些关系到用户日常使用体验的功能,以及那些能消除他们挫折感的功能。影响用户核心体验的功能决定了这个产品能不能用以及能不能与别的产品形成差异,消除挫折感的功能能够辅助核心功能让用户愉快。

如何确定核心的功能呢?排定功能优先级。(一)确定用户的目标是什么,并排定优先次序,寻找完全满足优先级最高的用户需求的解决方案。比如,大部分的网民(不是专家型的程序员用户)使用浏览器的目标是快速便捷地了解获知某方面的东西(知识、新闻等),日常的行为是访问、浏览和搜索网页。因此,对于浏览器而言,优先级最高的是访问和浏览网页,前进和返回功能是实现核心功能必不可少的功能,其次就是一些辅助的例如书签和收藏网页功能等。(二)确定用户在使用过程中最常见的干扰行为。比如在使用浏览器访问网页时,不小心关闭了正在看的网页,那么查看和恢复历史访问就是把用户挫折感降低的功能。

第二,页面表达层面。

正如前文提到的,我们大脑活动的资源是稀缺的,记忆、处理信息以及注意力都是有限的,所以每一个界面的小细节都有可能增加用户的负担。

(一)内容上,(1)文字:删除欢迎词,删除不必要的说明,删除繁琐的解释。(2)句子:精简句子,目标是简洁、清晰、有说服力。(3)选择和选项:。选择过多会导致选择困难症,让用户无所适从。

“删除每个页面上一半的文字,然后把剩下的文字再去掉一半。”(《Don’t make me think》中Krug可用性第三定律)

(二)样式上,(1)链接和广告;(2)大小、形状和颜色;(3)布局和层次

删除页面混乱元素一个非常好的方法就是先删除再拿回来,也就是先假设页面上所有的元素都是无用的,再想想为什么需要这些元素,对用户实现目标的作用是什么,如果没有这些元素就会影响体验,再把他们拿回来。

可以发现,删除页面表达层面的元素时更多讨论的问题是如何优化,而在最初设计一个产品时,应该更加关注功能结构方面的内容,从一开始便聚焦于用户的核心需求,那么才不至于在删除功能时导致用户的反对和抵抗。

2.组织

在删除了那些不必要的、无法实现的的功能之后,需要对保留下来的核心功能和辅助功能进行组织。

第一,围绕行为进行组织。通过划分用户群体,对不同的用户群体的行为进行分解。这里可能需要一点用户角色建模和场景分析的能力。

第二,确定清晰的分类标准——时间顺序、结构顺序或者重要性顺序。

第三,根据逻辑和层次结构进行分块。还记得前面所说的我们的大脑一次只能记住4项事物吗,所以尽量把分块的数量控制在4项以内。

第四,利用“亲密性、对齐、重复、对比”四大设计基本原则进行布局。

(1)亲密性:彼此相关的项应该靠近(格式塔原则),归为一组,如果多个项相互之间存在很紧的亲密性,它们就会成为一个视觉单元,而不是多个孤立的元素。这有利于组织信息,减少混乱。

(2)对齐:任何东西都不能在页面上随意安放,每个元素都应该与页面上的另一个元素有着某种视觉联系。这样可以建立一种清晰、精巧而且清爽的外观。

(3)重复:让设计中的视觉要素在整个作品中重复出现,可以重复颜色、形状、空间关系、线宽、字体、大小和图片等等。这样可以增加条理性和统一性。

(4)对比:避免页面上的元素太过相似,如果页面元素不相同,就让他们截然不同。

3.隐藏

隐藏什么?不常用但是不能少的选项。下面总结隐藏的两种方法:

第一,渐进呈现、阶段展示、适时出现。即每次只展示用户当前需要的信息。

渐进呈现意味着需要多次点击,然而点击的次数不是影响体验的关键。一方面,前文说到的我们每秒处理约400亿条信息,但其中只有40条是有意识的,所以我们的大脑更擅长处理小块的信息。另一方面,对于我们承受的三种负荷——认知、视觉和动作中认知是占用脑力资源最多而动作是占用最少的负荷,所以我们可以通过权衡视觉、动作的负荷来减轻认知的负荷。

“点击多少次都没关系,只要每次点击都是无须思考,明确无误的选择。”(《Don’t make me think》中Krug可用性第二定律》)

渐进呈现的关键是了解谁在什么时候需要什么信息。这需要在用户角色建模时的调研结果,了解多数用户每一步需要什么信息。

第二,隐藏在常用功能之下,利用提示和线索让功能容易被找到。“设置”“更多”或者“高级选项”等。

4.附加

可能你们有点疑惑,大家都说要缩减要删除要简约,而为什么我要把“附加”作为四个策略中的一个呢?这里讲的“附加”并不是增加功能,而是附加设计的细节(可用性细节、情感化细节等),使得产品更加完整,更加好用。

最后

无论是优化已有的产品或者是新设计一个产品,积累和建立自己的设计模式都非常重要,站在巨人的肩膀上,重新整合和理解大师的设计理念和方法。我会不断在实践中完善“删除、组织、隐藏、附加”四个层次的思考模式。


参考书籍:

[1] Giles Colborne:《简约至上:交互式设计四策略》

[2] Jeff Johnson:《认知与设计:理解UI设计准则》

[3] Steve Krug:《Don’t make me think》

[4] Robin Williams:《写给大家看的设计书》

[5] Susan Weinschenk:《设计师要懂心理学》

作者:Vivian姑凉

来源:简书

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

(0)
CatherineCatherine
上一篇 2017-06-04
下一篇 2017-06-04

相关推荐

  • 扫盲贴|UI动效设计原来都是这些软件做的

    随着技术的不断发展动效越来越多的被应用于实际的项目中。手机、网页等等媒介都在大范围应用,那么问题就来了,为什动效越来越吃香?它有哪些优势呢?

    2017-05-10
  • 交互设计工作坊探秘 | WTM 2018 实录

    重构购票流程的信息架构假期将至,你打开再熟悉不过的订票网页,輸入出发日期、目的地、人数,选择了最合适时段的火车票,预定、付款,整个过程不超过 3 分钟。关闭网页后,你甚至不会记得支付后的画面到底显示了什么,因为这一切流畅的就像呼吸般的自然。4 月 14 日,我们邀请到了春秋航空的高级交互设计师——程琳琳,带领一群对交互设计有热情的伙伴们,以欧洲铁路局的项目为范本,一起重现购票流程的信息架构,让大家了解这流畅的购票交互设计是通过什么方法一...

    2018-04-28
  • 【用户体验.春节特辑】一本相册(总第269期)

    亦可访问www.koushutianxia.com了解详情编家谱   修家史   留视频建祠堂   亲互动   传万代总第269期我的发小蔡廷是我们这座江南古镇的一位”达人”,这并非他有什么才气,而是他的行为举止与这座千年古镇淳朴温和的民风相违和。天气刚有点热他便剃了个秃瓢,赤裸着上身,永远穿着条军裤,再热也不换装。腹部有两条贯腹的伤疤,象两条粗大赤红的蜈蚣僵卧其上。他从不拉帮结派,依附于任何人,不欺行霸市,不欺凌老弱,但是蛮不讲理。他...

    2018-02-20
  • 交互设计思考模式:“删除、组织、隐藏、附加”

    Giles Colborne简约四策略是“删除、组织、隐藏、转移”,由于“转移”在实际设计过程中比较少运用到,所以我根据elya的知乎回答把四策略定义为“删除、组织、隐藏、附加”,elya没有解释她的理解,所以我根据自己理解重…

    交互设计 2015-08-31
  • 交互设计七大定律之The Law Of Proximity 接近法则

    最近在整理交互设计七大定律,发现了这篇老文,内容很精彩,翻译下与大家分享。 最近在整理交互设计七大定律,文章要系统的看。 目录:【交互设计七大定律】关于交互设计法则“除非有更好的选择,否则就遵从标准——交…

    2015-08-27
  • 设计原则中的5种信息组织方式

    要以用户能够轻松使用和理解的方式组织信息。用数据来回答用户的疑问。以更贴合用户目标的方式来呈现信息,就能创造出更好用的产品。“信息或许是无限的,但是……组织信息的方式是有限的,因为它们只能通过LATCH原则来组织:位置(Location)、字母表(Alphabet)、时间(Time)、分类(Category)、层次(Hierarchy)。”——Wurman, 1996“我做了太多次尝试,试图用某种其他方式来组织信息,但最终都会回归这5种之一。”——Wurman, 1996比如说,设计一套特别的服务时,我们应该考虑不同物品的位置关系,它们如何分布。超市货架的设计就是很好的例子,在物理空间中组织信息。比如字典和通讯录,无论是虚拟的还是物理的。举例:日历和会议日程、邮箱收件箱、项目计划、有趣的Facebook时间线、电商平台的订单列表、消息应用,还有许多。这种信息组织方式充斥着真实世界和虚拟世界。从购物与工业,到Pinterest上的分类和Twitter的标签。例如:从小到大,从低到高,从开心到不开心等等。给服务和产品标星打分、计分表、能效等级、尺寸等等。

    2017-08-04
  • 常用中后台交互设计控件使用场景与规范总结

    最近刚完成平台安畅云 2.0 的改版设计,平台模块很多,经常存在很多类似的页面和组件,若不制定统一的规范和控件,则会导致很多重复的工作,大大降低产品的设计效率;同时,平台的一致性也得不到保障。所以,我们视觉、交互、前端的小伙伴们针对我们踩过的坑,大家认真总结和提炼出一个符合公司定位的设计规范,统一公司项目的前端 UI 设计,规避不必要的设计差异和实现成本,实现设计和前端资源的效率最大化。

    2017-05-02
  • Sketch迎来重大更新,叫板PS爸爸?

    11月8日晚,Sketch 悄悄的更新至 Sketch 41。至此3X系列已经离我们而去,4X系列正式到来!在此次更新中,还是有不少惊喜的。今天一一做个盘点。全新 LogoSketch 拟物化黄色钻石 Logo 已经成为历史。新Logo 顺应了设计潮流,简化色彩并弱化光影关系。不过有一点令我很在意,就是新Logo的倒角处理(面与面之间的接缝)。之前的Logo倒角很锋利,有种割破手的感觉,典型的 2D 图形拼接效果;新Logo倒角光滑,做...

    2018-04-26
  • 关注 Web 设计

    相较于设计教程,这样的问答对于个人来说更有针对性,离我们日常的设计工作更近一些。我个人也有这样的体会,有时会有一两个问题长期停留在脑子里,得不到解决,偶然的碰到刚好涉及到这方面的文章,会有一下子豁然开朗的感觉。所以这样的形式也是非常有价值的。以下就是第1周的所有问题和答复,希望在设计对大家有所帮助。

    2015-01-03
  • 淘宝2017-提示信息的情感化设计

    作者:要白 明飒   开端:做一个有故事的 现如今,消费者对产品的需求从追求高性价比更多地转为高品质,虽然手机只是一个机器,但用户与产品之间当然是能有情感传递的,不然就只是一个冷冰冰的工具而已,能让用户在…

    交互专题 2017-08-07