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

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

相关推荐

  • 未来美甲店一定赢在“用户体验” | 互联互生

    咱们来假想一个情景,你到一个新公司第一天上班,你刚到公司门口,就有一位打扮非常正式的女士专门迎接你。她领着你在公司走了一圈,介绍了各部门的情况,然后把你送到你的办公桌。你发现办公桌上挂着一个横幅,上面写着“新人在这儿!”全公司都能看见。你打开电脑,屏幕是一张代表公司理念的美丽图片。办公桌上有一份给你的礼物,是不锈钢做的一个公司产品的模型。你刚连上电子邮件,就收到 CEO 亲自写给你的信,对你各种鼓励、希望你能度过愉快的一天,也希望你在公...

    2018-04-29
  • 译文推荐:设计并非艺术

    “设计并非艺术”的观点让我有些困惑,与我一直以来的认知有些不同。我确实认同艺术是独立于现实目的而存在的创意表达方式,而另一方面,设计虽然有着明确的现实目标,但它不同样也是创意的展示形式吗?我目前很难完全认同你的观点,希望进行更多交流。

    2017-05-27
  • iOS 9人机界面指南(二):设计策略

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

    2017-06-01
  • 碉堡了-微信团队出品-Sketch插件合集Wesketch

    静电说:微信团队刚刚出品了一款针对Sketch的插件合集-Wesketch,让我们一探究竟吧。WeSketch能做什么?更高效的团队协作,如:UI Kit 同步、色板同步等。更快捷的交互设计,如:图标库、自动连线、标记注释、全局替换文字、字体、颜色。更精准的前端还原,如:补齐宽高导出图片、导出 CSS 代码(支持小程序)等。如何下载和安装?访问Github地址:https://github.com/weixin/WeSketch/blo...

    2018-03-02
  • 2018年交互设计趋势

    想必你还在对昨天HJUX视觉伙伴们给出的视觉设计趋势啧啧称赞,那么赞别停!今天团队的交互伙伴们将带来2018年交互设计趋势。选择在农历新年来临之际奉上这道历时一个月烹制的“交互趋势年夜饭”,只愿给力求打造极致用户体验的你以启发和帮助。干货阅读时间预计5分钟设计是围绕人解决问题,因此对2018年交互趋势的预测,我们将目光聚焦在细腻的情感体验打磨、达成目标的交互介质、解决问题的效率、发生交互行为的场景这几个方面,探究出了以下6大趋势:全感官...

    2018-02-02
  • APP特有的交互设计模式解析

      1、触屏滑动操作,移动APP端最基本的操作方式。 (1)屏幕之间或者页面直接的自由滑动切换 比如手机移动端的界面切换效果,可以滑动使用快速友好的切换 (2)滑动条目经行删除 横向滑动条目的操作犹如一汪清…

    交互设计 2015-08-19
  • 《设计之下》之交互总结

    作者:ManUx 拖了很久的读书笔记总结,总算稍稍总结了一下。有些内容都已经开始模糊了,每次重新再看的时候,又会发现跟之前不一样的理解。这篇读书笔记主要是对《设计之下》交互部分进行总结,书中基于搜狐新闻客…

    2015-08-18
  • 选择极简主义风格做设计,不是没有道理

    极简主义设计并非万能的。但有一件事是肯定的,界面越简约,设计目标和针对性就越明显,而设计师要投入的时间和精力也越多。你并不需要更多的空间,你所需要的是更少的东西。

    2017-08-04
  • 5个关键词看小程序和App的UI设计异同

    微信总喜欢在深夜推出一个大新闻,昨晚10点,小程序开放公测的消息一出,我公号的文章都推不出去了,一直显示系统繁忙,那得是多大的流量啊,心里暗想,能分我一点零头就好了,估计是我想多了!

    2017-05-16
  • 产品经理的末路,交互设计的穷途

    2016年上半年我跟进了几个项目,“开始众筹”、“finger”、“分答”和“袋鼠云”,“袋鼠云”是企业级服务,前面三个是toC的服务,在为这些老板提供支持的时候,问他们需要什么人才,都说需要技术大牛和运营大神,没有一个提…

    2017-08-02