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

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

相关推荐

  • 百度UED:运营设计那些事儿

    数十万互联网从业者的共同关注!作者:百度搜索用户体验中心 授权早读课发表,转载请注明出处。在现如今的社会中,每天都在进行着一场场没有硝烟的商战。运营设计则是至关重要的一部分。那么怎么才能做出一个好的运营设计或者一个相对比较成功的运营设计呢?我们要知道设计的目的。设计的目的是什么?设计核心在于能够让用户在有限的时间内Get最有价值的信息,找到所得,从而实现转化。知道设计的目的了,在项目中自然形成了一些思路流程。1、需求分析需求分析分为:产...

    2018-01-31
  • 如何加入AxureRP模板库会员

    点击边框调出视频工具条会员简介加入AxureRP原型库会员后可以获取社群中的全部元件库及付费原型模板(后续更新免费),节省您画原型70%的时间,聚焦业务逻辑和行业积累才是根本。通过我们的会员群能第一时间获得产品及原型设计方面的解答帮助,同时还有仅对会员开放的私有干货分享不限于产品课程、PRD文档和产品书库等诸多福利。社群服务,量化才有价值1.每两个月提供一份全新的AxureRP项目原型模板,by 三杠;2.免费下载社群中已有的所有干货资...

    2018-03-24
  • 浅谈交互设计的七大定律

    新年第一篇和小伙伴们聊聊交互设计七大定律在设计中的应用。说起法则、定律、原理一类的名词,大多时候我们会觉得有点故作高深,似乎离我们真实的工作很遥远,又或者似乎太过浅显熟悉不值得讨论。窃以为,如果不想每次聊起产品设计的时候,都是你看人家的用户体验做的多好,你看这交互做的多好,你看这动效做的多好……或许,我们可以更有趣除非有更好的选择,否则就遵从标准—Alan Cooper费茨定律(Fitts’ Law)由保罗·费茨(PaulM. Fitt...

    2018-02-06
  • 简约至上--交互设计四策略

    无所不在的产品简单设计人们喜欢简单、值得信赖、适应性强的产品。复杂的产品很难吸引人。所有不必要的功能都是要付钱的。简单并不意味着欠缺或低劣,也不意味着不注重装饰或者完全赤裸裸。而是说装饰应该紧密贴近设计本身,任何无关的要素都应该予以剔除。四个策略以DVD遥控器设计方案为例.删除:去掉所有不必要的按钮,直至减到不能再减。组织:按照有意义的标准将按钮划分成组。隐藏:把那些不是最重要的按钮安排在活动仓盖之下,避免分散用户注意力。转移:只在遥控...

    2018-02-09
  • 【干货知识】最全面的交互设计原则和理论汇总(上)

    【点击上方蓝字↑↑↑关注「艺恋优梦」获得每晚推送】文章包括:格式塔心理学原则、尼尔森可用性原则、尼尔森F视觉模型、Heuristic Evaluation十原则、费茨定律、席克定律、7+2法则、2秒原理、2/8法则、3次点击法则、界面黄金8法则、jakob nielson原则、KANO模型、0123简单法则、MVP法则、婴儿鸭综合症、包豪斯理念、泰思勒定律、防错原则、奥卡姆剃刀原理、maya法则、信噪比法则、序列效应、功能可见性原则、成...

    2018-04-16
  • 静态码限额后,微信支付还能兼顾合规和用户体验吗?

    【新朋友】点击标题下方蓝色字“经济晚报”关注【老朋友】点击右上角,转发或分享本页面内容4月1日,央行关于静态码扫码支付限额500元的新规开始正式实施了,从这天开始,大家通过静态二维码支付的时候每天限额是五百块。你感觉到了不方便吗?新规一出,很多小伙伴们都产生了疑问:以后我扫码支付消费是要被“管制”了吗?如果每天的限额用完却还有扫码支付的需求咋办?新规如何配合?微信支付上线新产品体验针对用户的这些疑问,微信支付和支付宝这两大移动支付巨头给...

    2018-04-07
  • 色彩在交互设计中的应用

    UI设计微课堂关注将获得一对一解答,设计、资源、分享😛听说很多同学都置顶了我的公众号这样就能第一时间收到我精选的UI设计精品教程感谢大家的支持!↓↓下方高能↓↓对于交互设计师来说,通常交互原型都做为黑白稿。为什么要做黑白稿呢?那是因为在前期交互设计中,交互设计师为了更专注于产品的流程、跳转,避免前期投入更多的精力在UI效果制作方面。对于很多小公司或小团队来说,通常只有一个设计师或者设计资源很少,设计师拿到需求后,直接就出高保真效果图了(...

    2018-04-24
  • 全面掌握算法交互设计,你的设计你做主

    在OF COURSE学习最纯粹的创意编程Processing生成艺术进阶课程全面掌握算法交互设计12周成为顶尖设计师👇△课程介绍《Processing&OF算法交互线上课程》你将要学习的第一部分:培养算法创造能力,学习运用高级算法模拟真实环境中的自然变化。第二部分:理解并掌握算法交互的原理。第三部分:培养软硬件结合能力,学习使用手部识别设备Leap motion、体感识别摄像头Kinect和算法的交互。第四部分:运用openCV计算机图...

    2018-04-08
  • 用户体验是一种过程,而不是结果

    任何人都抵挡不了时间的力量,你可以斥责它的无情、也可以赞美它的给予,在这个成长的历程中,我们寻找的不是时间给我们带来了什么,而是这个过程中我经历了什么。后者,才是我们需要深思并感恩的。与「用户体验」一样,许多人会评判一个产品用户体验的好与差。但是「好」与「差」只是整体上的一种结论,普通人可以说这两个字。但作为设计师,必须懂得在体验过程中,知晓哪里好与哪里差,更要知道为什么好为什么差。就好像评书似得,真正读过某本书的人,不会单纯的说:「这...

    2018-05-04
  • 用户体验和可用性之间的联系和差异,你都知道吗?

    本文转自本文由优设网作者 :Amy Smith,版权归作者所有阅读需 5 分钟Amy Smith – 最近几年来,用户体验设计逐步成为了目前设计圈中广泛认同的重要设计环节。而“可用性”这一词也作为改善用户体验设计的重要度量而发挥着无与伦比的作用。于是乎,除了“用户体验设计师”这一职位,在欧美的产品和设计团队当中还诞生了“可用性工程师”这样的专业职位。另一方面,这些相互关联,在含义和功能上有所重叠的专业词汇,让许多设计师和相关的从业者感到...

    2018-03-03