设计思考模式(一):删除、组织、隐藏、附加

“删除每个页面上一半的文字,然后把剩下的文字再去掉一半。”(《Don’t make me think》中Krug可用性第三定律)“先假定所有内容都是视觉噪音,除非你证明它们不是。”(《Don’t make me think》)“点击多少次都没关系,只要每次点击都是无须思考,明确无误的选择。”(《Don’t make me think》中Krug可用性第二定律》)

设计思考模式(一):删除、组织、隐藏、附加

“真正的简约远不止删繁就简,而是在纷繁中建立秩序。”这是苹果设计师乔纳森•伊夫在IOS7发布的时候对于简约的解释,Giles Colborne在《简约至上》书中阐述了“删除、组织、隐藏、转移”四个策略,但是我觉得这不仅仅是策略,更是一种思考的模式。由于“转移”在实际设计过程中比较少运用到,所以我根据elya的知乎回答把四策略定义为“删除、组织、隐藏、附加”建立自己在设计过程中的思考模式。

删除

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

第一,功能结构层面

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

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

第二,页面表达层面

我们大脑活动的资源是稀缺的,记忆、处理信息以及注意力都是有限的,短期记忆和集中注意力的程度以及感官输入量相关。短期记忆取决于集中注意力的能力,越能集中注意力,短期记忆的内容能留存得越多;短期记忆与感官输入量是负相关,感官输入量越多,受感官刺激越多,越难集中注意力,短期记忆的内容越少。所以每一个界面的小细节都有可能增加用户的负担。

内容上

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

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

样式上

  • 链接和广告
  • 大小、形状和颜色
  • 布局和层次

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

“先假定所有内容都是视觉噪音,除非你证明它们不是。”(《Don’t make me think》)

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

组织

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

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

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

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

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

  • 亲密性:彼此相关的项应该靠近(格式塔原则),归为一组,如果多个项相互之间存在很紧的亲密性,它们就会成为一个视觉单元,而不是多个孤立的元素。这有利于组织信息,减少混乱。
  • 对齐:任何东西都不能在页面上随意安放,每个元素都应该与页面上的另一个元素有着某种视觉联系。这样可以建立一种清晰、精巧而且清爽的外观。
  • 重复:让设计中的视觉要素在整个作品中重复出现,可以重复颜色、形状、空间关系、线宽、字体、大小和图片等等。这样可以增加条理性和统一性。
  • 对比:避免页面上的元素太过相似,如果页面元素不相同,就让他们截然不同。

隐藏

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

第一,渐进呈现、阶段展示、适时出现

即每次只展示用户当前需要的信息。

渐进呈现意味着需要多次点击,然而点击的次数不是影响体验的关键。一方面,我们的大脑更擅长处理小块的信息,因为大脑每秒处理约400亿条信息,但其中只有40条是有意识的。另一方面,认知负荷是最占用脑力资源的负荷,而动作是占用最少的负荷。人机工程学理论上有三种负荷:认知负荷、视觉负荷和动作负荷。认知负荷是指思考、记忆和心算,视觉负荷包括浏览和寻找想要的信息,动作负荷包括点击、操作鼠标、打字等。

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

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

第二,隐藏在常用功能之下,利用提示和线索让功能容易被找到

“设置”“更多”或者“高级选项”等。

附加

可能你们有点疑惑,大家都说要缩减要删除要简约,而为什么我要把“附加”作为四个策略中的一个呢?这里讲的“附加”并不是增加功能,而是附加设计的细节(可用性细节、情感化细节等),如何让产品在细节层面被用户喜爱,比如微信和手机QQ在发送信息时那个细微的交互,比如那些适时出现的新手指引。

最后

无论是优化已有的产品或者是新设计一个产品,一个新人积累和建立自己的设计模式都非常重要,站在巨人的肩膀上,重新整合和理解大师的设计理念和方法。现在,在体验一个产品时都习惯用“删除、组织、隐藏、附加”的方式去思考产品的交互设计。

参考资料:

  • Giles Colborne:《简约至上:交互式设计四策略》
  • Jeff Johnson:《认知与设计:理解UI设计准则》
  • Steve Krug:《Don’t make me think》
  • Robin Williams:《写给大家看的设计书》
  • Susan Weinschenk:《设计师要懂心理学》

 

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

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

(0)
CatherineCatherine
上一篇 2017-06-03 21:03
下一篇 2017-06-04 00:01

相关推荐

  • 《2017中国设计行业价格报告》——交互设计

    《2017中国设计行业价格报告》——交互设计创意点亮生活设计美好人生创意设计一个有温度有格调的公众号合作、投稿:cda-zj@vip.163.com微信:13777850472微博:@浙江省创意设计协会

    2018-02-14
  • 【UXRen原创】一款金融股单APP的设计之路

    作者: 股单小分队 @ 国信证券的产品设计中心   一、交互设计的那些事 许多朋友问我:你大学学的专业不是工业设计吗?都是做产品造型的呀,现在怎么跑去证券公司做交互了? 相信许多做交互设计的朋友和都会遇到这样…

    交互专题 2017-08-07
  • 美术丨创意Game可用性微交互设计:视觉空间微交互设计

    文章导言(悄然你的特别吸引了我)有些设计看起来简洁,有些设计看起来杂乱无章;有些设计让您快速找到想要的信息,有些设计却让您置身于迷宫之中;为什么要绞尽脑汁写这些细节上的差异?用户在使用产品时是怎么样的心理活动?这将是我分享的一些个人见解。前言:致敬设计学研书籍作者们,有机会写《创意Game可用性微交互设计》总结。如题我们将进行一场有趣的游戏可用性微交互设计讨论。考虑并不是写一本书来高谈阔论,而交互又无处不在: 版面、颜色、纹理、动画、文...

    2018-02-28
  • 交互设计:补上学校不教的这一环

    作者:郦橙 锦妖链接:https://zhuanlan.zhihu.com/p/25279058不知道其他专业有多么具体和细致,我自己的专业(CMU Mii-PS)是典型地抓大放小,各种设计实操细节统统不讲,全靠自己摸索。我也曾经狂看blog,看书,…

    2017-08-02
  • 用户体验设计中的功能动画

    一位优秀的用户体验设计师能够轻松地解释设计概念中每个决策背后的逻辑。包括信息架构、页面内容结构、流程及假说。动画迟早会被融入线框图中,但在做设计决策或解释它们的时候,就会略显尴尬,因为理由基本上就是“这很酷啊!”或者“这很流行”“多有意思”,这些理由使得设计一开始就毫无说服力。在考虑设计时,我们应该更加深入地研究动画,就像解释其他设计元素那样,有依据地定义动画并解释其目的。→什么是功能动画?功能动画是一种微妙的动画,我们将它嵌入到用户界...

    2018-03-22
  • 用户体验地图为什么这么好使?来看蚂蚁金服的实战案例就知道了

    用户体验地图(experience map)作为一种常见工具能够让工作更加顺畅,用户体验地图就起到了一个很好的团队协作作用,产品、设计、开发都能够通熟易懂,便于梳理清楚产品的架构和使用流程。作者|蚂蚁金服UED源自|设计夹但是体验地图到底能解决什么问题,该怎么用呢?很多同学也许并不太了解。这次分享主要是将我们在各类渠道了解到的关于用户体验地图的各类说法做了一个总结,并结合了我们在工作中的实际运用,给有兴趣了解该方法的同学提供一点我们的见...

    2018-03-09
  • 我花了20个小时研究3个按钮

    真的……我没疯……“Andrew,我们做了几个很厉害的新功能,测试一下吧。”
    “好的,当然。”
    “嘿,你甚至会忍不住写篇文章来介绍的!”
    “呃……”真理:深入挖掘总是对的。真理:努力寻找方法衡量用户的体验真理:在展开真实的访谈之前,非常有必要做一下实验

    2017-05-04
  • 112家IT公司薪水一览表

      本文转自:人人都是产品经理 作者是西电通院2013届毕业硕士,根据今年找工作的情况以及身边同学的汇总,总结各大公司的待遇如下,吐血奉献,公司比较全。以下绝对是各大公司2013届校招的数据,少数几个是201…

    2014-10-13
  • Stack自动布局:Sketch中的Flexbox

    Skacks会彻底改变你对Sketch布局方式的理解。Sketch用户终于可以在不用CSS的情况下,直接使用Flexbox的排版技术。小提示:

    – Stacks能产生一致性。

    – 一致性使设计清晰。

    – Stacks能使设计清晰。我们Anima的使命是让设计师能掌控自己的设计。我们正在打造一款设计工具,让设计师定义和构建UI与UX设计中所有零零碎碎的元素,并且最终能自动生成本地代码,1:1还原设计。这就使设计师不依赖团队的其他部分,比如开发人员的优先关注点就与设计团队不同。

    2017-05-06
  • 腾讯X项目的交互设计小结

    最近在做腾讯内部系统X项目的交互,具体的项目内容现在还无法透露,趁热打铁,先来一段交互小结吧。 一、可视化 当系统的数据过多,数据结构繁杂时,可以将数据可视化展示。能让使用者更好的理解数据,有效提高使用…

    2016-09-19