【干货知识】最全面的交互设计原则和理论汇总(下)

【点击上方蓝字↑↑↑关注「艺恋优梦」获得每晚推送】防错原则:防错原则认为大部分的意外都是由设计的疏忽,而不是人为操作疏忽。通过改变设计可以把过失降到最低。该原则最初是用于工业管理的,但在交互设计也十分适用。如在硬件设计上的 USB 插槽;而在界面交互设计中也是可以经常看到,如当使用条件没有满足时,常常通过使功能失效来表示(一般按钮会变为灰色无法点击),以避免勿按。如上图所示极客公园的评论功能快,在留言框没有内容或邮箱格式不正确的时候是无...

文章目录[隐藏]

【点击上方蓝字↑↑↑关注「艺恋优梦」获得每晚推送】



防错原则:

【干货知识】最全面的交互设计原则和理论汇总(下)

防错原则认为大部分的意外都是由设计的疏忽,而不是人为操作疏忽。通过改变设计可以把过失降到最低。该原则最初是用于工业管理的,但在交互设计也十分适用。如在硬件设计上的 USB 插槽;而在界面交互设计中也是可以经常看到,如当使用条件没有满足时,常常通过使功能失效来表示(一般按钮会变为灰色无法点击),以避免勿按。

如上图所示极客公园的评论功能快,在留言框没有内容或邮箱格式不正确的时候是无法获取验证码的,只有两者都满足了才可以。

Occam’s Razor 奥卡姆剃刀原理(简单有效原理)

这个原理被称为“如无必要,勿增实体”,即如有两个功能相等的设计,那么选择最简单的。在极客公开课・走进 UC 中 UC 浏览器产品经理苏剑南在“UC 浏览器 For Android 产品设计思考”演讲中也有讲到该原理的应用,“如果 UC 手机浏览器要发布第一个版本 UC 1.0,你会选择哪五个功能?”

【干货知识】最全面的交互设计原则和理论汇总(下)

功能可见性

1.在视觉感知上,某些元素适用于某些功能,这些元素便符合功能可见性。

2.如果设计中的元素的功能可见性与人们的感官预期相符,那这种设计会有很高的接纳率和使用率,也被认为容易操作。所以在设计时,需要尽可能的符合人们的心理预期,界面设计要模拟人们熟悉的物品或环境,暗示提醒使用者的新系统中的各部件的使用方法和功能。

3.应用例子:生活中门和门把手功能抵触,有推的标语,就不要设计有门把手。可以去掉文字提示,需要推的一面,设置无把手,需要拉的一面设置有把手,这样,用户在进行“推或拉”的动作,根据门把手的功能可见性,就可以准确的操作。再比如电脑屏幕的按钮设计,电脑桌面的垃圾桶图标、文件夹等等,都是模拟生活中的物品设计的,符合用户在生活中的认知,用来提示使用者,这些图标在软件中的功能。

图示:这些图标设计符合生活中的相关事物,能够使软件功能明显~

【干货知识】最全面的交互设计原则和理论汇总(下)

无障碍使用

1.好的设计不需要特别调整或修改就能很好的服务各种需要的人,此法则适用于所有大众。四大要素:易读性,易操作、简易性、包容性。

(1)易读性:不论感官功能差异,都可以理解的设计。

提升易读性方法:a.多种标注方式呈现信息,文字图像触觉等;b.辅助性感官设计  c.合理合适的方式呈现操控装置和操控信息。

(2)易操作:不论身体状况如何都可以使用。

提升易操作方法:a.最大限度减少使用者重复操作和不必要的体力消耗  b.运用完善和简单的功能指导准则,使操作装置容易使用。 c.辅助人体活动,提供方便的操作环境(残疾人专用道) d.合理合适的方式呈现操控装置和操控信息。

(3)简易性:不论经验背景、文化程度、注意力等,都易操控。

提高简易性方法:a.减不必要的复杂装饰  b.采用清楚明了,持续统一的提示符号和操作信息。 c.循序渐进展开说明、标注相关信息和操作装置。d.所有指令应该提供清楚的提示和反馈,确保信息简单易懂,适合不同文化程度的使用者。

(4)包容性:操作错误及导致后果最小化。

提高包容性方法:a.利用健全的功能可见性和可操作性(只标注正确的使用方法)预防错误。  b.利用确认与警告预防错误(删除时:确认是否删除)。  c.加入设计自正性的操作功能和安全网(自我调整与修正),减轻避免因错误造成的后果。

2.应用例子:大型电梯比小型电梯功能健全,两套操作板适用站着与坐着的人,操作板多种符号(数字图像盲点)。

成本效益

1.设计中,用来评估新功能/新元素出现的新增成本的最后财务回收状况。 如果与设计的互动成本>收益,则是不良设计,反之是优秀设计。

2.成本效益可以衡量设计的品质。如:网页下载的时间常见说法不超过十秒,但是,接受下载时间的长短,更多与网页提供的效益有关,如果网页具有合理效益,其实可以抵消超过十秒的下载成本。所以,可以通过改进设计品质来降低互动成本(设计能够提供效益)。

3.让产品继续进行应该效益>=成本,让产品更好,应该让效益尽可能的大于成本。应该从效益与成本两个方面工作:成本限制 或者 效益增加。所以不能仅仅考虑成本限制范围,也应该考虑互动效益成本。

4.应用例子:loading页设计:用成本效益来考虑,为什么loading页设计多样,不只是因为“有趣”这么简单的理由,有趣只是用户的直观感受。这种设计的应用实质可以用成本效益解释,等待的时间可以当做是成本,在技术无法缩短合理的等待时间时,成本就相当于无法降低,那么想要产品更好,需要从效益入手,设计可以带来效益,那么就需要改进等待页的设计。所以现在的loading页、进度条、错误页等等设计都体现能带来效益的创意互动。

图示:

【干货知识】最全面的交互设计原则和理论汇总(下)

8020法则

1.定义:在所有大系统中,高达80%的效果是由仅占20%的关键因素决定,在实际操作中发现,关键变量占10-30%不等。适用范围普遍,适用互不相关的事物影响。

2.8020法则有助于资源整合,可以帮助提升设计最大化。比如:客户用80%的时间集中于产品20%的功能时,那设计与检测应该集中于那20%,剩余80%应该重新评估,确认他们的价值。设计师可以利用此法则,对设计中的所有元素进行重新评估,划定重新设计与优化的范围,有效决定优势资源进行再设计,80%非关键能减则减,时间与资源有限时,不要试图改进与优化那80%。

3.应用例子:图形用户界面把大部分功能隐藏在功能菜单(降低视觉复杂性),常用功能难以找到(增加操作复杂性),所以应把20%关键功能放在功能菜单中(工具条的使用)。

图示:在印象笔记这个软件里,上层是功能菜单,在主页面上方设有常用功能的工具条,这就是把20%的关键功能摆设出来,没有隐藏掉。

【干货知识】最全面的交互设计原则和理论汇总(下)

前卫与亲近(MAYA法则)

1.成功的设计可以从很多方面界定:功能、美学角度、适用性等,如果我们从商业绩效也就是销售量来定义设计的成功,可以从两个变量取得平衡:亲切熟悉+独一无二。MAYA法则就是帮助我们找到这两个变量的平衡契合点,所以一个设计如果可以结合让人感到熟悉+新奇的感受,就能够提升设计的成功。此法则应用于:面向大众对象的产品,用户是大众,而非专业设计师和艺术家。

2.用户喜欢熟悉的东西(曝光效应:物品或环境的吸引力会随着曝光次数的增加而增加),也喜欢新奇的设计。人们对新奇的关注与记忆大于典型性。此法则认为最理想的做法是:兼顾熟悉性和新奇性。 对用户来讲:最新奇但依旧可辨识的物品或环境,最富美学吸引力。

3.应用例子:设计的演变虽然一直有创意新奇的设计,但是都在从前被大众接受的设计渐渐演变而来,而非完全脱离重新创造,因此新奇的设计+过去设计的熟悉感,会使得用户具有吸引力和接受能力。图标、界面的演变。

图示:IOS不同版本的设计元素的对比,可以看出,虽然新版具有新奇性,但是仍然可以找到以前版本的熟悉感受。

【干货知识】最全面的交互设计原则和理论汇总(下)

区域对齐

1.该对齐适用于:元素形状不一,不对称时,元素可为图形或文字元素,如果是元素形式简单对称,就采用边线对齐的方式。

2.对齐方法:将要对齐的元素顺着中轴线摆放,让中轴线两边的视觉重心或者面积相等。区域对齐方法无法使边线对齐,如果想同时边线对齐,只能令元素边线在边线内或边线外。

图示:可以明显感受到右边对齐效果更好。

信噪比(常用于信息设计)

1.同一显示中,相关信息与无关信息的比例就是信噪比。在信息的创造、传达、接收过程中,信息的形式会递减,无关信息会增加。如何使得信噪比高,从而达到优秀的设计目标?可从两方面看:信号最大化或噪音最小化。

2.信号最大化:清楚的传达信息,高效率的呈现信息可以使得信号最大化。简单的设计可以带来极小的效能负荷,让用户专注于资料的意义。比如,没有用正确的图表呈现特定资料数据,基本会扭曲资料原意,所以正确的设计决策非常重要,必要时应进行测试。 还有一种方法,及时强调信息的关键方面,也可以减少信号递减的现象。比如:强调或备援识别,凸显产品的重要性。

3.噪音最小化:去除或减少不必要的元素,每一个不必要的数据项目、图标、线条、图案,都会让用户从重要元素上分心。每个设计元素的使用应该适当,一旦过多就是噪音。

4.应用:图表、表格设计的演变。

图示:左侧的图表无关信息元素比较多,图示的图案多样,表格的边框又粗又重,这会使得“噪音”增加。右侧是优化后的图表,减去了无关信息,用清楚明了的图示表示资料内容。

【干货知识】最全面的交互设计原则和理论汇总(下)

序列效应

1.在列举信息时,排在最前和最后的元素,比排在中间的更容易让人记住。

2.对排在开头的信息产生加强的回想效果,称为:初始效应,人们有时候会把最前面的信息储存在长期记忆中。排在结尾的信息产生加强的回想效果,称为:时近效应。时近效应适用于听觉刺激。初始效应适用于视觉刺激。

3.在列举信息元素时,如果列举信息属于视觉性,那么把重要的信息放在最前面;如果是听觉性,就放在最后面。如果是用户必须做决定,并且是最后一项出现后马上做决定,那么就将想要用户做决定的信息放置最后,以便增加获选概率,否则放在最前面。

4. 应用例子:比如在很多app产品设计时,个人账户与设置基本放在页面的最前面和最后面,这体现着产品信息的序列关系,重要次序,所以在进行设计时,可以在信息排序上遵循序列效应。 当然还有一些产品想对用户进行引导操作,也可以利用这个法则,将信息放置最前或最后。

图示:

【干货知识】最全面的交互设计原则和理论汇总(下)

古腾堡图表法

古腾堡图表法又称 Diagonal Balance(对角线平衡的和谐状态),设计理念缘自 Johannes Gutenburg(欧洲活字印刷术的发明者)应用于印刷的古腾堡图表。它指出:

人们在浏览页面或布局时视线趋于从左上角移动到右下角,具体如图

【干货知识】最全面的交互设计原则和理论汇总(下)

古腾堡图表法说明我们观看页面的视线并不是镜面对称的,我们需要在设计中避免出现此类错误但绝不是墨守成规,将页面的 Logo放置在左上角而主体向右下角延伸,左下和右上作为视觉的盲点可以添加辅助元素

其它一些简易法则:

2秒钟法则——用户在使用某类系统时的等待反映不应该超过2秒。

3次点击法则——用户在3次点击之内如果还没有找到他们想要的信息或了解产品/网站的特色,他们就会离开。

2/8法则——80%的结果由20%的原因产生 。

界面8黄金法则:

1)努力做到连贯;

例如网站首页需要和每一个下级页面保持一致的风格,导航都要放在屏幕的左上角,具有高度一致性的界面能给人清晰整洁的感觉。

2)允许频繁使用系统的用户使用快捷方式;

快捷键表示产品使用的灵活性和有效性,想想每次我们使用搜索引擎的时候是鼠标点击的搜索还是按的回车?

3)提供信息反馈;

出现错误时要明确说出错误的含义,而且需要考虑用户能否理解,比如我们基本上都遇到过HTTP404错误,但绝大多数人能看懂么?

4)为关闭这一动作设计对话框;

要在用户完成某项任务或操作后进行提示。如果他们在做了很多操作后却得不到反馈,他们就无法知道自己是否达成目标。

5)提供简单的设计处理;

例如把某些当前不能点击的按钮设置为灰色,在系统执行时让用户在确认一下

6)应该方便用户取消某个操作;

大多数的应用软件都有撤销和恢复的功能,如果用户总是惧怕一失足成千古恨,那样的用户体验可想而知

7)用户应掌握控制权;

一般而言用户希望自己去控制系统交互,在执行任务中,用户应该可以随时中止或退出,而不是无奈的看着系统继续

8)降低短期记忆载荷;

我们应该尽可能帮助用户避免要求他们记住各种信息,例如各个菜单项之间的逻辑关联,更好的分类就会帮助用户找出哪个功能按钮在什么地方。

Jakob Nielsen的10条可用性原则:

  1. 系统状态的可见性——让用户知道系统在做什么;

  2. 系统和现实世界的匹配——系统必须使用用户的语言;

  3. 用户控制和自由——“紧急出口”来离开非预期的状态,支持撤销和重做;

  4. 一致性和标准——遵循平台规范;

  5. 错误预防——要么避免容易发生错误的情况,要么检查并在实际动作前确认选项提示用户;

  6. 识别而不是回忆——将对象、动作和选项可视化以减少用户的记忆压力;

  7. 使用的灵活性和效率——用户可以定制经常使用的动作;

  8. 美学和最小设计——对话框不能包含无关或者几乎不需要的信息;

  9. 帮助用户认识、诊断错误并恢复——错误消息必须通过普通语言表达(不包含代码)、准确指出问题并积极提示解决方法;

  10. 帮助和文档——容易搜索、关注用户任务并列出需要执行的具体步骤,而不是大而全的说明。

KANO模型:

  1. 魅力因素——提供用户想不到的需求会很大的提升用户满意度,不提供则满意度不变;

  2. 期望因素——提供期望需求则满意度会上升,不提供则会下降;

  3. 必备因素——优化此需求用户满意度不变,不优化则满意度大幅下降;

  4. 无差异因素——用户根本不在意的功能需求;

  5. 反向因素——无此需求满意度不变,有次需求则满意度下降。

包豪斯运动——形式追随功能,去除干扰和装饰。

Skeumorphic设计理念——花费很大的力气来指向或模仿真实世界的功能。

婴儿鸭综合症——用户习惯了以前的设计,对新的产品架构感到不舒服,他们必须找到自己的方式来使用产品。

自我参照效应——与我们个人观念相联系的事物要比那些和我们没有直接联系的事物记得更清楚。

0123简单法则——无需说明书,一看就会,两秒等待时间,三步以内的操作。

MVP法则(最简化可实行产品法则)——一开始就拿产品来接触用户,从很早就根据用户的回馈来改进你的产品。

麦肯锡金字塔方法——任何事情都能归纳出一个中心点,而从中心论点可以由数个一级论据支撑,而这些一级论据也可以被数个二级论据支撑,如此衍生,状如金字塔。

人机交互五大原则:

  1. 可学习性

  2. 效率

  3. 可记忆性

  4. 不易犯错

  5. 满意度

认知心理学是一个呈现心理过程的状态

心流理论:人们全身心投入某件事中的一种心理状态、沉浸在忘我的境界中

  1. 引导用户达到目标(提示下一步,完成目标)

  2. 时刻明确当前状态(导航、转场动画、状态界面、认知心理学隐喻法)

  3. 可行性的设计(使用过程中可自主性操作、有可逆性)

  4. 防呆性设计(防止错误发生、限制操作、预见错误、跳出空白)

  5. 站在消费者心理而设计:炫耀心理;趋近心理;占便宜心态;有后悔心理;价位心理。

色彩心理

  1. 颜色常恒性

  2. 颜色的错觉

  3. 色彩的感知性

不超过三种色相的搭配

明快的颜色和明暗的色彩搭配能使画面更有层次感和朝气

主色决定了品牌方向

运用相似性来进行色彩呼应,画面更有节奏感和舒适性

运用颜色渐变穿插,让界面平衡在一个频率上

马斯洛需求层次理论:

【干货知识】最全面的交互设计原则和理论汇总(下)

【干货知识】最全面的交互设计原则和理论汇总(下)



【干货知识】最全面的交互设计原则和理论汇总(下)

原创文章,作者:交互精选,如若转载,请注明出处:https://www.iamue.com/36425/

(0)
交互精选交互精选
上一篇 2018-04-11
下一篇 2018-04-11

相关推荐

  • 2018年的用户体验状况

    这是由一位美国作者站在美国的视角写的文章,即便抛开个人因素不谈,国内外的发展进度并不完全同步。例如情感化反馈这一块也许国内稍稍落后一点、但是移动支付和AR却要快一些,有些方面即便步调差不多,举出的例子却不一样。不过看看别人的总结也挺有意思,至少可以了解一下国际风向。我将在本文概述的,除了2017年里见证到的巨大的变化之外,还有值得关注的趋势,以确保能够赶于潮流。1、更简单的导航方式导航体验是2017年的热点话题之一。为了设计出顺畅的用户...

    2018-03-19
  • 用户体验至上?也许并非如此 | 动点圆桌会

    动点科技 | ID:technode大家晚上好,我是动点君~近日,有网友反馈,微信朋友圈疑似屏蔽抖音短视频的内容,内容仅本人可见。但当晚24点之后,抖音小视频的内容分享到朋友圈又恢复了“所有人可见”。对于网友反映的这件事,微信团队已经做出了回应。腾讯公关总监张军发微博称:“朋友圈一直有防刷频机制,过了阀值就自动不可见了。过了凌晨12点自动恢复正常。屏蔽之说不存在哈。”虽然微信方面对网友的这一质疑做出了否定的回应,但是竞争平台疑似屏蔽竞品...

    2018-03-26
  • 我为什么喜欢sketch?

    数十万互联网从业者的共同关注!作者:luffy微信公众号:麒麟设计中心(ID:luffydesign)作者授权早读课发表,转载请联系作者。欢迎投稿到早读课,投稿邮箱:mm@zaodula.com文章底部可以评论留言啦,欢迎大家赞同质疑或吐槽。积极留言的同学,注意关注小编的回复,不定期送互联网畅销书以感谢你们的支持,么么哒!Adobe XD出来了,第一时间试用,感觉除了repeat grid和hotspot好像没什么亮点。笔者是一名无线U...

    2018-04-09
  • 一、Axure教程--app启动画面的翻页效果

    1、案例示例:2、参考对象:qq安全中心-启动画面3、案例描述:手指向左右滑动界面时,能够切换显示内容;切换内同时,屏幕下方的圆点标记同步切换;当切换到最后一个页面,单击进入主页的按钮时,启动画面和圆点分页标签隐藏;同时屏幕顶部状态栏改变样式。4、素材准备:见百度圆盘5、采用技术:动态面板、全局变量。6、制作难点:启动页面切换时,使用全局变量记录切换后的面板状态名称;将底部的分页标签面板同步切换到同名称的状态。7、制作过程:https:...

    2018-04-29
  • 塾乐教育-进阶提高设计思路的秘籍在这里!

    一直以来,我们始终想让知识变的更实用这5年,课程前后完善了几十个方案这篇文章,请认真阅读也许,会改变你的一生01为什么学设计一定要参加系统课程学习?01- 电商设计行业升级更新太快,如果不即时学习最新的知识。单靠自己平时工作的经验是无法满足中高端市场的需求的!通过学习,让你远远超过你的同行技术水平!02- 虽然互联网上免费知识层出不穷,但绝大部分都是挂羊头卖狗肉性质的不系统招生引流课程。给你一点甜头,再收取你高额培训费用!03- 一个人...

    2018-03-03
  • 写给产品经理和设计师的用户体验知识

    从2015年起,我陆续写了《写给产品经理和设计师的用户体验知识》系列文章,得到了大家的肯定,此篇文章是这个系列的最后一篇文章,算是给这个系列画上句号。作者:刘涵宇腾讯高级产品经理1用户场景用户场景这东西,或许每一个产品经理和设计师每天都在用,但我查了很多资料,还真的很难找到一个准确的定义。所以,我试图结合我自己的理解,自己去定义它。我认为用户场景有两层属性,分别是:「工具属性」和「思维属性」。用户场景首先是一种对过程逻辑的阐述方法,简单...

    2018-04-19
  • 【UED人物】朱锫:自然建筑

    近日,朱锫建筑事务所作品景德镇御窑博物馆荣获“2017年度The Architectural Review未来建筑奖”之“最佳文化建筑”(the Winner of the Cultural Regeneration category)。自此,又一位中国建筑师叩开了国际大奖之门。△ 景德镇御窑博物馆室内效果图“未来建筑奖”始于2002年,每年由英国知名建筑专业杂志《The Architectural Review》(建筑评论)评选并颁发...

    2018-02-07
  • 坚持梦想选择学UED设计,斩获13K月薪

    达内UI设计,中国UID课程标准制定者当你选择一家餐馆吃饭,你有没有想过是什么让你选择这家餐馆?刚进去的时候,餐馆给你的第一印象是什么?服务员够不够勤快体贴?你是否还想去这家餐馆吃?......这一系列发生在你生活中,你留意或不留意的问题, 就是一个完整的用户体验,这种用户体验设计也称作UED。小王是达内UED学员,经过四个月培训,成功成为一名UED设计师,月薪13k。四个月,她如何实现成功?我毕业后一直在一家公司做产品工作,由于一个偶...

    2018-01-31
  • 用户体验再度升级,共享租车现里程碑式进步

    近日,国内共享租车领导品牌凹凸租车发布最新APP 4.0版本,该版本通过优化匹配算法和系统功能,在业内首度实现共享租车平台零拒单,免除了用户交易后租不到车的后顾之忧。同时,新版凹凸租车上线了“精选优车”频道,全面提升用户的租车体验。零拒单,用户所租即所得在共享租车行业,用户租车后遭遇车主临时拒单或取消的现象成为一大痛点。在凹凸租车4.0新版本中,平台通过车源端优化、车辆接单标准化、智能推荐匹配算法和系统功能升级,实现了工作时段的无拒单、...

    2018-02-01
  • 用户体验的创新设计和研究

    2018年全国两会期间,全国政协委员叶友达教授向大会提交了《关于鼓励基于用户体验的设计创新,加速科技创新成果转化的提案》,建议加大对基于用户体验的设计创新的宣传力度,建立全国或区域用户体验研究机构,促进科技创新成果快速、高效落地。长期以来,用户体验的“以用户为中心设计”(User-Centered Design, UCD)的理念一直冲击着传统的“以技术驱动设计”的理念。有研究表明,美国两个世纪以来著名的53位创新者的创新过程,从电话到互...

    微信热点 2018-03-27