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

【点击上方蓝字↑↑↑关注「艺恋优梦」获得每晚推送】防错原则:防错原则认为大部分的意外都是由设计的疏忽,而不是人为操作疏忽。通过改变设计可以把过失降到最低。该原则最初是用于工业管理的,但在交互设计也十分适用。如在硬件设计上的 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

相关推荐

  • 大数据应用的用户体验分析

    版权所有©德塔精要,转载请注明出处用户对产品或服务的认同是由用户体验的过程所决定的,一个具备良好用户体验的IT系统对内可以提高员工工作效率,对外可以提高客户满意度和忠诚度,最终为企业带来不菲的经济效益或社会效益。因此,组织的IT战略必须实现IT与业务的融合,面向客户和关注用户体验管理。但目前用户体验管理是当前IT业务运营的弱项,也许我们能够了解IT资源的每个细节,但却不知道用户感受怎么样,不利于IT系统的优化和完善。缺乏用户体验管理以及...

    2018-03-12
  • Axure案例练习-点评打分效果

    现在,外卖也好,购物也好,打车也好,点评打分是网站常见的用户互动的功能,一般都是1~5分之间评分,分值对应几颗星或者几颗心,当用户点击确定之后打分就完成了。下面我就以大众点评网为例,制作了打分效果。做之前,我们先来分析一下,点评共涉及到6个状态:没有打分的时候、一颗星的时候、二颗星的时候、三颗星的时候、四颗星的时候、五颗星的时候。根据之前的学习,知道点评区域是一个动态面板,这个动态面板有六个状态,当鼠标分别悬停时,切换出不同的状态。我们...

    2018-04-29
  • 结合实际案例,一篇看懂用户体验五个层次

    ♝点击上方“交互设计学堂”关注我们,送电子书看过了很多描述用户体验五个层次的文章,但感觉很多都浅尝而止,今天我特地结合了十来个案例对用户体验进行了一次相对全面的阐述,希望大家在阅读时也能够同样寻找相关产品进行比照和论证,想必会更有收获。概要用户体验设计就是“以用户为中心的设计”,即创造“每件事都按照正确的方式在工作”的用户体验,让用户宾至如归,就像《Don’t make me think》里提到的“这会让用户觉得自己更聪明,更能把握全局...

    2018-04-10
  • ​ 不尊重用户体验如何“携程”丨每日时评

    高考作文干货/素材/知识/热点如果你想要作文素材、资料...加我微信:13261345736备注下你想要解决的问题点播时间(今天的歌单车是@光芒点播给大家的,如果你也想点歌,请留言:歌名+歌手~)当前浏览器不支持播放音乐或语音,请在微信或其他浏览器中播放单车陈奕迅 - Shall We Dance? Shall We Talk!作文君说昨天刚和同学们说完OTA(在线旅行社)网站搭售的问题,今天我们再来具体看看,携程在用户体验上面临的问题...

    微信热点 2018-02-10
  • 《用户体验要素》:一张图读懂用户体验五要素

    《用户体验要素》是一本讲产品的好书,作者为我们清晰地介绍了关于用户体验的五个要素,五个要素是按照产品的整个生命过程来描述的。产品设计五要素分别是:战略层、范围层、结构层、框架层、表现层。《用户体验要素》说这本书清晰,是因为五个要素很清楚,按逻辑步骤总结出来的。但,这也是这本书唯一清晰的地方了,因为,这本书在细节描述上还是很凌乱的。产品设计五要素对于读这本书而言,能够领会作者的思想就可以,不必要拘泥于具体的细节。原因有二:一是,这本书的细...

    2018-04-04
  • ​50多个网页界面的设计素材下载,提供sketch格式的源文件ui设计素材下载

    50多个网页界面的设计素材下载,提供sketch格式的源文件ui设计素材下载素材下载方法:长按识别二维码,用微信扫描或者长按识别二维码即可加入。并不是只是下载这个素材。超过200G精品素材全部任意下。素材不断更新,添加。。。有任何问题,请联系微信uisheji----------------------------------------欢迎订阅,查看更多精品UI设计素材下载,请关注公众号mobileui

    2018-04-08
  • 通过微信学习用户体验和产品迭代

    这几天一直不停的开会,讨论产品,活生生的从运营的位置跑偏到了产品,似乎可以调岗了,andy一直在聊迭代的问题,想来想去,觉得还是微信做的最牛逼,那就翻翻历史,聊一聊吧。微信是2011年1月21日才面世的,为什么能在短短六七年的时间实现9亿多用户?在QQ已经在通讯社交行业占据霸主地位时,微信又是如何脱颖而出实现反超的? 在米聊率先面世创下不俗业绩后,微信又是如何后来居上的? 微信的成功对于产品人来说有很多值得挖掘、学习的地方。初期的微信和...

    2018-05-05
  • 交互设计精髓-阅读心得1

    学习交互设计,选择第一本读的书是《交互设计精髓 About face 4》,因为这本书在交互设计领域名气很大该书一共分为3个部分,一共有21章。最近刚刚读完第一部分,有所感悟,在此记下,与尔分享之。交互设计就是站在用户的角度看问题永远为别人着想,心中装着别人,站在用户的角度看问题....读罢本书,这是关于交互设计在心中停留的第一印象。由于交互所设计的是产品与用户接触相处的整个行为过程,所以用户的感受首当其冲成为检验设计的重中之重。可是我...

    2018-04-28
  • 用户体验 | 移动网络音频传播效果研究

    作者:广东外语外贸大学新闻学院教授   郭光华广东外语外贸大学新闻学院硕士生    余思乔来源:《新闻爱好者》【摘要】在传统媒体被集体唱衰的时代背景下,移动网络音频的出现重新定义了广播行业,并在短时间内抢占了大量的音频市场份额。移动网络音频作为互动传播平台,将传统的听众身份转变为用户角色。用户主动使用这一平台,在互动中完成了内容的共构和情感的交流,从而获得了全新的体验与满足。【关键词】移动网络音频;用户体验;传播效果移动网络音频是新媒体...

    2018-04-10
  • 掌握交互设计思想,从用户视觉心理开始

    什么是交互设计师?在刚刚开始研究交互的时候,我也经常问自己:什么是交互设计师?这两年“用户体验”这个词非常火,以前在技术沟通中经常生硬的用“用户体验”这个词来说服技术,难免有些空洞。其实用户体验不止于产品的交互设计有关,还包含产品的内容和服务、表现形式,大部分情况下产品的内容和服务才是整个用户体验的核心。而我所理解的交互设计就是把表现形式、内容和用户行为相互协调的一门学问,是影响用户体验的关键因素之一。另外,按国内就业情况来看,目前交互...

    2018-04-26