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

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

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



文章包括:格式塔心理学原则、尼尔森可用性原则、尼尔森F视觉模型、Heuristic Evaluation十原则、费茨定律、席克定律、7+2法则、2秒原理、2/8法则、3次点击法则、界面黄金8法则、jakob nielson原则、KANO模型、0123简单法则、MVP法则、婴儿鸭综合症、包豪斯理念、泰思勒定律、防错原则、奥卡姆剃刀原理、maya法则、信噪比法则、序列效应、功能可见性原则、成本效益、古腾堡图表法、交互易用性五大法则、马斯洛需求层次理论…

部分理论可能意思相近或重复。

格式塔原则

格式塔心理学诞生于1912年,是由德国心理学家组成的研究小组试图解释人类视觉的工作原理。他们观察了许多重要的视觉现象并对它们编订了目录。其中最基础的发现是人类视觉是整体的,我们的视觉系统自动对视觉输入构建结构,并在神经系统层面上感知形状、图形和物体,而不是只看到互不相连的边、线和区域。“形状”和“图形”在德语中是Gestalt,因此这些理论也称做视觉感知的格式塔原理。

格式塔原则的原理主要有七种:

接近性原理;相似性原理;连续性原理;封闭性原理;对称性原理;主体/背景原理;共同命运原理。

接近性原理:

物体之间的相对距离会影响我们感知它是否以及如何组织在一起。互相靠近(相对于其它物体)的物体看起来属于一组,而那些距离较远的则自动划为组外。

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

相似性原理:

如果其它因素相同,那么相似的物体看起来归属于一组。

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

连续性原理:

视觉倾向于感知连续的形式而不是离散的碎片

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

封闭性原理:

视觉系统自动尝试将敞开的图形关闭起来,从而将其感知为完整的物体而不是分散的碎片。

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

对称性原理:

我们倾向于分解复杂的场景来降低复杂度。

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

主体/背景原理:

我们的大脑将视觉区域分为主体和背景。主体包括一个场景中占据我们主要注意力的所有元素,其余则是背景。

当物体重叠时我们习惯把小的那个看成是背景之上的主体。

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

共同命运:与接近性、相似永生原理相关,都影响我们感知的物体是否成组。指出一起运动的物体被感知为属于一组或者是彼此相关的。

下面的数十个五边形中,如果其中的7个同步的前后摆动,那么虽然它们的距离较远,还是会被感知为一组

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

同样间距大小颜色的图形,那么视觉上会把一起动的图形分为一组。文件夹拖动时同时选中的文件夹出现的反白背景及运动轨迹是共同命运原理最直观的解释。

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

尼尔森可用性原则

尼尔森的十大可用性原则是产品设计与用户体验设计的重要参考标准,值得深入研究与运用。

1.状态可见原则

用户在网页上的任何操作,不论是单击、滚动还是按下键盘,页面应即时给出反馈。“即时”是指,页面响应时间小于用户能忍受的等待时间。

2.环境贴切原则

网页的一切表现和表述,应该尽可能贴近用户所在的环境(年龄、学历、文化、时代背景),而不要使用第二世界的语言。《iPhone人机交互指南》里提到的隐喻与拟物化是很好的实践。此外,还应该使用易懂和约定俗成的表达。

3.撤销重做原则

为了避免用户的误用和误击,网页应提供撤销和重做功能。

4.一致性原则

同一用语、功能、操作保持一致。

5.防错原则

通过网页的设计、重组或特别安排,防止用户出错。

6.易取原则

好记性不如烂笔头。尽可能减少用户回忆负担,把需要记忆的内容摆上台面。

7.灵活高效原则

中级用户的数量远高于初级和高级用户数。为大多数用户设计,不要低估,也不可轻视,保持灵活高效。

8.易扫原则

互联网用户浏览网页的动作不是读,不是看,而是扫。易扫,意味着突出重点,弱化和剔除无关信息。

9.容错原则

帮助用户从错误中恢复,将损失降到最低。如果无法自动挽回,则提供详尽的说明文字和指导方向,而非代码,比如404。

10.人性化帮助原则

帮助性提示最好的方式是:1、无需提示;2、一次性提示;3、常驻提示;4;帮助文档。

尼尔森F型视觉模型

尼尔森F型视觉模型由 Jakob Nielsen于2006年提出

他指出,我们在第一次观看页面时,视线会呈 F的形状关注页面

  1. 先从顶部开始从左到右水平移动

  2. 目光再下移开始从左到右观察但是长度会相对短些

  3. 以较短的长度向下扫视,形成一个 F形状,此时我们的阅读速度较慢,更为系统和条理性

具体如图:

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

根据尼尔森F模型,我们可以得出几个心理暗示:

  • 用户快速扫视时,具体的文字并不重要

  • 多用小标题、短句引起阅读者注意

  • 将重要的内容放在最上边

NN Group最经典的Heuristic Evaluation的十原则

1.Visibility of system status

可视性原则:系统状态有反馈,等待时间要合适。

e.g. 键盘大写的时候会有小绿灯告诉你哦!

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

2.Match between system and the real world

不要脱离现实 :使用用户语言而不是开发者语言,贴近生活实际而不是学术概念

e.g. 惹人厌的404错误,根本不明白什么意思好吗!

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

3.User Control and Freedom

用户有自由控制权:操作失误可回退

e.g. 啊不小心发错了,求撤回!

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

4.Consistency and Standards

一致性原则:同一事物和同类操作的表示用语要各处保持一致

e.g. 熟悉了一个Adobe产品,其他的我就都会啦!

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

5.Error prevention

有预防用户出错的措施:关键操作有确认提示,及早消除误操作

e.g. 哎妈差点删除错了!

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

6.Recognition rather than recall

要在第一时间让用户看到:识别胜于回忆,提供必要的信息提示(可视&易取),减少记忆负担

e.g. 我对什么感兴趣来着?哦哦有选项啊,那就方便多啦,我对旅行、艺术都很感兴趣哦!(pinterest在用户注册后询问用户preference的时候直接提供选项,避免强迫用户回忆。)

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

7.Flexibility and efficiency of use

使用起来灵活且高效:为新手和专家设计定制化的操作方式,快捷操作可调整。

e.g. 我用CAD已经是一把好手啦,才懒得去菜单栏里找insert rectangle呢,我就用快捷键就行啦!

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

8.Aesthetics and minimalist design

易读性:减少无关信息,体现简洁美感

e.g. 我用Cash这个应用就是为了打钱的,不要看到其他信息,我只在乎金额!(很多交互设计的初学者都会容易有一个误区,就是想把页面填满。实际上,你页面上放什么,什么信息要突出,取决于你的用户需求。避免为了“填满”界面而放入无关信息。)

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

9.Help users recognize, diagnose and recover from errors

给用户明确的错误信息,并协助用户方便的从错误中恢复工作

e.g. 哎肿么进不去了?哦哦还好,有人可以帮我/方法可以解决。

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

10.Help and documentation

必要的帮助提示与说明文档:无需文档就能流畅应用当然更好,一般地文档很必要,而且也提供便利的检索功能,面向用户任务描述,列出具体实现步骤,并且不要太冗长。

e.g. 哎怎么从web page导入PDF啊?搜索一下!哇一步一步的help documentation好清楚啊!

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

Fitts’ Law / 菲茨定律(费茨法则)

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

定律内容:从一个起始位置移动到一个最终目标所需的时间由两个参数来决定,到目标的距离和目标的大小(上图中的 D与 W),用数学公式表达为时间 T = a + b log2(D/W+1)。

它是 1954 年保罗.菲茨首先提出来的,用来预测从任意一点到目标中心位置所需时间的数学模型,在人机交互(HCI)和设计领域的影响却最为广泛和深远。 新的 Windows 8 中由开始菜单到开始屏幕的转变背后也可以看作是该定律的应用。

菲茨定律的启示:

按钮等可点击对象需要合理的大小尺寸。

屏幕的边和角很适合放置像菜单栏和按钮这样的元素,因为边角是巨大的目标,它们无限高或无限宽,你不可能用鼠标超过它们。即不管你移动了多远,鼠标最终会停在屏幕的边缘,并定位到按钮或菜单的上面。

出现在用户正在操作的对象旁边的控制菜单(右键菜单)比下拉菜单或工具栏可以被打开得更快,因为不需要移动到屏幕的其他位置。

扩展阅读:Windows 设计规范中的鼠标交互、菲茨定律与互联网设计、費茲定律Fitts’ Law與使用者介面設計、Google Chrome 与 Fitts Law、谈谈 Fitts 定律、费茨法则在交互设计中的应用 (Readlists)

Hick’s Law / 席克定律(希克法则)

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

定律内容:一个人面临的选择(n)越多,所需要作出决定的时间(T)就越长。用数学公式表达为反应时间 T=a+b log2(n)。在人机交互中界面中选项越多,意味着用户做出决定的时间越长。例如比起 2 个菜单,每个菜单有 5 项,用户会更快得从有 10 项的 1 个菜单中做出选择。

席克定律多应用于软件/网站界面的菜单及子菜单的设计中,在移动设备中也比较适用。

扩展阅读:席克法則、谈谈Hick定律(Readlists)

神奇数字 7±2 法则

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

1956 年乔治米勒对短时记忆能力进行了定量研究,他发现人类头脑最好的状态能记忆含有7(±2)项信息块,在记忆了 5-9 项信息后人类的头脑就开始出错。与席克定律类似,神奇数字 7±2 法则也经常被应用在移动应用交互设计上,如应用的选项卡不会超过 5 个。

The Law Of Proximity 接近法则

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

根据格式塔(Gestalt)心理学:当对象离得太近的时候,意识会认为它们是相关的。在交互设计中表现为一个提交按钮会紧挨着一个文本框,因此当相互靠近的功能块是不相关的话,就说明交互设计可能是有问题的。

Tesler’s Law 泰思勒定律(复杂性守恒定律)

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

该定律认为每一个过程都有其固有的复杂性,存在一个临界点,超过了这个点过程就不能再简化了,你只能将固有的复杂性从一个地方移动到另外一个地方。如对于邮箱的设计,收件人地址是不能再简化的,而对于发件人却可以通过客户端的集成来转移它的复杂性。

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



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

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

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

相关推荐

  • 从「重新设计火车票样式」,谈用户体验设计

    作者:无鹿森全文共 2522 字,阅读需要 6 分钟———— / BEGIN / ————“用户体验”是随着互联网的日益深化而变得越来越热的话题之一,它所代表的就是互联网产品和人性本身的相互共鸣,并且这种共鸣在今天而言,显得越来越弥足珍贵。从交互设计到视觉设计,怎么样才算是“好的用户体验”?一直以来,大部分情况下的论调都停留在主观意识层面上,这也使“用户体验”的话题本身显得更加难以拿捏和扑朔迷离。本文将从“重新设计高铁票样式”的角度来切...

    2018-05-04
  • 蔚来ES8正式上市 | 重新定义汽车用户体验

    就在刚才,首届NIO Day蔚来日在北京五棵松体育馆圆满结束。蔚来ES8也正式上市并开启预订。近万名蔚来好友相聚于此今晚,这些信息你不容错过:蔚来ES8正式上市 公布售价蔚来ES8售价公布ES8基准版补贴前售价44.8万起,限量1万辆创始版补贴前售价54.8万,用户也可以选择电池租用方案,车价比常规购买低10万,每月支付1,280元电池月费,同时可享受电池升级服务。ES8上台亮相源于赛道冠军的极致性能4秒SUV俱乐部最大功率480千瓦(...

    2018-02-02
  • 交互设计师必须知道的五大交互设计流程

    交互设计又称互动设计,从用户角度来说,交互设计是一种如何让产品易用,有效而让人愉悦的技术,它致力于了解目标用户和他们的期望,了解用户在同产品交互时彼此的行为,了解“人”本身的心理和行为特点。同时,还包括了解各种有效的交互方式,并对它们进行增强和扩充,交互设计还涉及到多个学科,以及和多领域多背景人员的沟通。其实,交互设计需要做的事情也不是一成不变的,它会随每个交互设计师的工作内容差异而不同,具体到每个项目也会有区别。下面我就在马海祥博客上...

    微信热点 2018-03-16
  • sketch 44.1+汉化插件下载

    如果你喜欢UI设计如果你喜欢高效设计如果你喜欢简洁的设计最重要的,你得有个Macbook pro !Macbook pro!Macbook pro  !不要提什么macbook air,因为你是设计师,设计师,设计师。官网地址http://www.sketchcn.com/,可免费下载体验30天。  很值得购买的软件,只需要$99为什么选择 SketchSketch 是为图标设计和界面设计而生的。它是一个有着出色 UI 的一站式应用,所...

    2018-04-22
  • 设计室开题 | 用户体验设计从入门到实战

    凯诺设计室(Canopy Design Studio)基于研究、实际项目而设立,每期6-12人、5-10周,在设计室讲师的带领下,从无到有生成完整方案,基于线上教学,打破地域限制,回归设计专业基于studio教学的本质,主题涵盖建筑、景观、城市、艺术、人机交互、用户体验设计等领域。*设计室开题请关注凯诺公众号或官网这是第38个凯诺设计室▽Chenyu SiWanderlust Inc 产品设计师加州大学圣地亚哥分校HCI学士凯诺优秀讲师...

    2018-04-07
  • 交互设计牛校排行榜 | 卡内基梅隆

    创艺典国际艺术教育之院校介绍有一位老大哥是高校里的老大哥他在艺术、工业、计算机专业非常强势除此之外它还拥有全美顶尖对顶尖的计算机学院和戏剧学院他就是Carnegie Mellon UniversityCMU卡耐基梅隆大学这些看上去毫不相干但都那么强势的学科结合在一起岂不是成了飞机中的战斗机赛车中的四驱兄弟?卡梅这位老大哥还真这么干了他们开设了一个项目那就是——人机交互交互设计中应用最广泛的学科分支卡内基梅隆的人机交互项目是全球的交互项目...

    2018-04-26
  • 用户体验的目标是做到“自然”

    不想错过精彩的荔枝话题,点击文章左上角关注“荔枝3十1”。每晚10:00点荔枝陪你说一事晚安文/励志妹图/荔枝工作室经作者授权发布用户体验的目标是做到“自然”导语“自然的体验是不需要用户去思考的。”1需要用文字来解释的交互不是好交互(1)我观察3岁的小孩用iphone很容易上手。比如,iphone的开锁,小孩甚至不用学就会用。因为触摸是人的天性,同时iphone通过箭头图标,向右滑动的文字条(小孩看不懂文字),来暗示手指触摸向右滑动来解...

    2018-04-28
  • 人工智能对用户体验的影响

    最近两年人工智能技术在金融、安全、交通、医疗、公共服务和制造业等领域逐渐落地,随着技术的成熟,人工智能将会在更多领域影响人类的生活。以人为本的人工智能设计会变得更加重要,本文会从安全性、效率、易用性、场景化、个性化五个方面阐述人工智能如何改善现有的产品和用户体验,这五个方面存在着各种联系并相互影响。安全性越接近系统底层的技术越影响用户体验,例如手机中毒或者信息被盗都会对用户产生巨大影响;如果关系到国家安全,整个社会的秩序都会被扰乱,所以...

    2018-03-26
  • 用户体验要素(上)

    我们天天挂在嘴边的用户体验为什么如此重要?到底什么才是用户体验?在繁忙的生活中,从你起床关闭闹钟到洗脸刷牙再到坐车去公司上班,在这个过程中,和你关联的东西,闹钟、牙刷、牙膏、公交车、地铁等,如果这一系列的事物都没有注重用户体验,早上起床闹钟响了没起来,急急忙忙去坐地铁到公司上班,地铁标识不清晰,你坐反了,很晚到公司,接着被领导大骂一通,灰扑扑的坐到座位上,然而你这一天才刚刚开始,这么糟心的早上让你一天都不顺利。如果没有好的用户体验,你每...

    2018-04-25
  • 在Axure中,如何用动态面板实现banner的轮播效果(附Axure教程及软件)

    axure功能太强大,动态面板可能已经搞得你头晕眼花了,更别提7.0版本的中继器了。废话不多说,还是和大家分享一下动态面板实现banner轮播的效果,对动态面板还不熟的,不妨来看看这个效果的制作过程,然后自己试着做一做,绝对增加自己的信心。就拿某宝首页banner轮播效果为例进行说明:1前期线稿图,部件准备01先画个大概的位置线框图,如下图所示,做了3张banner的轮播效果02banner位置的占位符转换为动态面板(鼠标右键,转换动态...

    2018-03-06