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

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

相关推荐

  • AR与用户体验简析

    说道AR想必大家都不陌生,所谓AR就是增强现实技术,现在普遍的应用是在移动端,通过相机拍摄现实场景,并通过AR技术在屏幕上生成想要的图案,使能够栩栩如生的浮现在屏幕上,好似实物就在眼前一样。首先我们值得注意的是个人电脑和智能手机是所有人都想要拥有和使用的产品,一旦产品价格进入消费者能够承受的价位,爆发是完全没有问题的;其次,两者的核心技术其实都集中在CPU、显示屏等电子元件相关领域,这些产品的发展基本上都遵循摩尔定律,即18-24月性能...

    2018-02-27
  • 交互体验大升级 云视听极光3.0最新版本体验评测

    作为腾讯视频官方的电视端应用版本——云视听极光迎来了第三个大版本的更新:云视听极光3.0。在我之前的国内4大电视端视频应用软件的对比评测中我对云视听极光的老版本在交互体验上的感受只能用一般般来形容。这次的大更新官方声称对交互界面体验上针对用户需求和建议做了较大的改进,我也立马升级了软件进行了一番体验。让我们来看看云视听极光3.0在体验上到底如何吧。UI交互体验:界面设计进入软件就可以看到3.0版本的大变化,相比老版本,3.0的频道分类栏...

    2018-01-30
  • 产品经理如何有效学习产品课程?

    很多想要成为或者刚刚成为互联网产品经理的人会自己学习一些大牛分享的课程,阅读一些推荐书籍,但是学完之后经常会有好像很有收获但是却又不知道收获了什么的感觉,产品经理如何有效学习产品课程呢?以下是我自己在进行产品学习时的一些经验。1、多体验产品一个好的产品经理首先自己一定是一个好的用户,只有多体验产品,多思考产品背后的设计理念和价值,自己才能设计出优秀的产品。我们公司有个资深产品经理,他设计的产品日活已经上亿,公司当时还奖励公司员工每日一盒...

    微信热点 2018-03-06
  • 《用户体验可视化指南》视频讲书(4)

    这是《用户体验可视化指南》书中第一章的最后一个视频了。继续上个视频继续介绍几种共线图,这次横向比较各种共线图的差异,使用它们的原则和好处。点击视频观看(大约14分钟,推荐室内安静、有wifi环境下播放)兰静同学听后分享这节内容是第一章的精华,一定一定一定要边听边看书本,最好多看几遍。主要分为2个部分:在这节视频中,结合书本第3个大模块中的内容,详细讲解了这5类常见共线图的差异和各自的特色。闭上眼睛想一想,要是还想不起来服务蓝图、体验地图...

    2018-04-07
  • 提升用户体验 抢占用户心智

    马云提出的新营销是连接线上线下的全新核心载体,超越单纯线上或者线下的全网营销概念。但华帝李洋认为,线上和线下只是连接用户的媒介,核心仍然是用户体验。抢占用户的心智,提升用户认知,是“新零售”的前提。打造新型厂商关系 构建全新服务体系在产品端,最初的模式是线上采用完全与线下独立的产品线,无论价格、卖点、功能配置都与线下产品区隔,线上和线下营销团队完全独立,各说各话。但随着时间的推移和互联网的蓬勃发展,这种割裂式的操作手法已经成为过去式。企...

    2018-03-29
  • 马化腾:用户体验,比一切事情都大

    企业快速成长中,第一个大问题就是战略。/演讲|马化腾来源|笔记侠(ID:Notesman)我非常希望也很高兴在这个平等氛围中,以创业者的身份跟大家进行这样一场交流。在座的创业者,很多拿到A轮、B轮,有些在走向C轮。企业快速成长中,第一个大问题就是战略。创业最难的就是选准创业的点,你会面对很多机会、很多诱惑,需要不断做出选择。自腾讯初创开始的六七年,是我们变化最快的时期,我想把这个时期包括战略选择等方面的经验跟大家分享。一、关注痛点你出来...

    2018-02-16
  • 2017新零售用户体验观察

    互动新零售专为互联网人打造的新零售智库。关注过去的2017年被誉为“新零售元年”,从早前颜艳春的《第三次零售革命》到阿里的“五新”战略,再到京东的“新零售革命”等等,一系列关于“新零售”的概念被正式提出。而行动上,无论是互联网电商巨头,还是传统线下零售企业均在紧锣密鼓地展开此次零售变革的布局。此次“新零售”变革概念从中国提出之时,从全球范围来看,和传统零售形态不太一样的商业形态和消费者体验已经在世界各地慢慢的生长起来。这一年中各式各样关...

    2018-02-08
  • 清华美院交互设计考研相关问答

    分享考研资料集:你的问题我来答!一考研资料福利贴这是新蕾北京公众号第001篇资料帖今天分享的是清美交互设计考研相关资料汇总针对此专业考研相关问题我们一一作出解答01进入通道报考清华大学美术学院交互设计研究生,可以报考两个方向,一个是信息艺术系的交叉学科硕士的交互设计方向,另外一个是信息艺术设计系的信息艺术设计的普通硕士,但是他们的考试内容有较大差异,进校后都可以学习交互设计,导师组基本相同,由于近年来大部分招生名额倾向于交叉学科,本文重...

    2018-04-28
  • 使用Axure制作出信息化风格的精美简历(提供模板源文件下载)

    最近又到了每年“金三银四”的求职旺季,相信这段时间很多同行朋友们也正在找工作。在求职的过程中简历是非常重要的一块敲门砖,设计精美的简历能帮助你获得更多引起招聘人员注意的机会。如果我们能花点时间从设计感方面来包装一下自己的简历,这样既能体现自己的求职态度,又能展示出自己的专业细节,相信能让大家的简历增色不少,所以今天这篇分享我将教大家如何使用Axure制作出信息化风格的精美简历。从正式分享之前我需要先说明为何要使用Axure来设计简历,而...

    2018-03-24
  • 叶云燕:不懂用户体验,没有互联网思维的代理人,迟早会被淘汰!

    第1937期|编发/保险论坛互联网时代,到处都在谈如何用互联网思维做生意。有人用互联网思维卖奶茶,销售额翻倍;有人用互联网思维开理发店,已获得数千万融资;有人用互联网思维卖衣服,年利润过亿;而当我第一次提出要用互联网思维卖保险时,很多人都感到茫然,认为这不过是赶时髦,蹭热点。保险代理人的新机遇事实上,互联网时代的到来,对保险代理人来说是一个前所未有的机遇,它让代理人的品牌形象更加丰满,展业渠道更加多样化。更重要的是,互联网思维的核心是以...

    2018-04-25