header_v1.7.39

用户体验设计必备知识之— —交互设计原则

38天前发布

原创文章 / 其他 / 资讯
芸芸众生71 原创,如需商业用途或转载请与芸芸众生71联系,谢谢配合。

用户体验设计必备知识之 交互设计原则

Why?为什么说是必备的,每位用户体验设计师都必须牢牢掌握的知识?

学习用户体验设计的基础之道莫非设计原则,就像我们小时候学习拼音一样,学好了拼音才能知道字怎么拼读,都是成长中必需好好学习的。所谓“站在巨人的肩膀上,让我们看得更远”,全面系统的学习交互设计原则,帮助我们在实战中更好的提升体验,避免大部分的出错,善于利用设计原则,一开始构思就考虑清楚,很好的体现我们的专业性。下面整理了简约版的交互设计原则整理。


下面是正文。。。

主要分为两个部分来介绍:

第一部分基础的交互设计原则,第二部分iOS10人机界面设计指南中的设计原则    

(题外话,推荐深入了解下查理.芒格介绍的100种思维模型,掌握各个学科最典型的思维模型,不仅可以运用在设计中,还可以帮我们更好的决策和更睿智的生活)


1.基础的交互设计原则

1.1尼尔森可用性原则


1.状态可见原则 Visibility of system status

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

简而言之:用户操作了就告诉他你做了什么,大概要等多久


2.环境贴切原则Match between system and the real world

网页的一切表现和表述,应该尽可能贴近用户所在的环境(年龄、学历、文化、时代背景),而不要使用第二世界的语言。多使用易懂和约定俗成的表达。

大家都懂才是真的好。


3.撤销重做原则User Control and Freedom

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

让用户有反悔的机会,毕竟生活中可反悔的机会可不多,让用户在互联网体验当上帝的满足感。


4.一致性原则Consistency and Standards

同一用语、界面风格、布局、功能、操作保持一致。


5.防错原则Error prevention

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


6.易取原则Recognition rather than recall

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

比如用户输入过的邮箱,输入第一个字就应该有关联出完整的邮箱,用户只需点击即可输入完成,从N步—2步简化操作。


7.灵活高效原则Flexibility and efficiency of use

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

为大多数中级用户设计的同时要兼顾其他用户,做到灵活高效。


8.易扫原则Aesthetics and minimalist design

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


9.容错原则Help users recognize, diagnose and recover from errors

帮助用户从错误中恢复,将损失降到最低。

如果无法自动挽回,则提供详尽的说明文字和指导方向。


10.人性化帮助原则Help and documentation

帮助性提示最好的方式是:无需提示>一次性提示>常驻提示>帮助文档


1.2格式塔原则

总的来说,就是物体间的远近或者形态的不同对我们的认知的影响。

主要是以下几个原理:接近性原理;相似性原理;连续性原理;封闭性原理;对称性原理;主体/背景原理;共同命运原理。


接近性原理

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

下面3个图,无论形状的不同或是颜色的不同,我们都会自然而然把相近的东西归为一组,可见接近性原理权重要大于相似性原理。

undefined

undefined

undefined

相似性原理

如果其它因素相同,那么相似的物体看起来归属于一组。长得像的容易被我们被归为一组。

下图可见,形状相似我们会归为一类,颜色相近的我们又会归为一类,并且颜色权重大于形状。

undefined

undefined

连续性原理

视觉倾向于感知连续的形式而不是离散的碎片。一个连续的图案,即使中件少了一段,也会被我们自己补脑出来是连续的。

undefined

封闭性原理

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

undefined

对称性原理

我们倾向于分解复杂的场景来降低复杂度。如此复杂的海报,我们自动会把它分为一个圆形和一个矩形来识别。


undefined

主体/背景原理

我们的大脑将视觉区域分为主体和背景。主体包括一个场景中占据我们主要注意力的所有元素,其余则是背景。当物体重叠时我们习惯把小的那个看成是背景之上的主体。

当我们聚焦于中心的小圆的时候,为了不影响我们的注意力,周边的其他物体会被模糊成背景。

共同命运

与接近性、相似永生原理相关,都影响我们感知的物体是否成组。指出一起运动的物体被感知为属于一组或者是彼此相关的。Path的动效,点击+弹出的功icon,会被感知为一组东西。

undefined



1.3尼尔森F型视觉模型

undefined

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

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

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

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

设计时,将重要的内容放在最左边,用户快速扫视时能第一眼看到。例如淘宝等电商APP类的商品列表,信息都是靠左对齐。

undefined



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

undefined

在文章的最后,回顾一下费茨定律给我们的启示:

做点击按钮要大点,更易于点击。反相过来,不常用按钮做小点,可降低点击率。

将按钮放在离开始点较近的地方,更容易点击到。屏幕的四角与四边是「无限可选中」位置。


1.5神奇数字 7±2 法则

人类头脑最好的状态能记忆含有7(±2)项信息块,在记忆了 5-9 项信息后人类的头脑就开始出错。与席克定律类似,神奇数字 7±2 法则也经常被应用在移动应用交互设计上,如应用的选项卡不会超过 5 个。


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

这个原理被称为“如无必要,勿增实体”,即如有两个功能相等的设计,那么选择最简单的。


1.7二八法则

例如:百分之20的功能决定产品的成败,重点要抓住那重要的20%


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

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


1.9席克定律Hick's Law(希克法则)

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

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



2.iOS10人机界面设计指南中的设计原则

三大原则


清晰Clarity

清晰易懂,突出重点,表达可交互性


遵从Deference

轻量化,突出内容


深度Depth

层次结构


其他原则

美学完整性Aesthetic Integrity

不易察觉且不引人注目的图形、标准化控件和可预知的交互行为从而让用户保持专注。


一致性(Consistency)

相同的标准和规范,应用所包含的特征和交互行为是符合用户心理预期的。


直接操作(Direct Manipulation)

能够提升用户的参与度并有助于理解。让用户获得及时可视的反馈


反馈(Feedback)

认证交互行为,呈现结果,并通知用户,临时高亮、进度指示器。动效和声音加强对结果的提示


隐喻(Metaphors)

使用来源于现实生活的用户体验,或已培养出来的习惯,能让用户快速学会使用应用


用户控制(User control)

用户主导,应用仅为用户行为提供建议,严重后果的发出警告,不提用户做决定。让用户可预知,可随时取消


遵从这些原则更好的帮助我们设计出来的产品好用易用,更加符合用户的心理预期。当然规则是死的,人是活的,如果我们有更好的解决问题的方式,能根本的解决设计中的问题,那也可以不用遵循设计原则。


注:仅做学习使用,上文部分内容来源于互联网,如有侵权请告知。



2
    Hello PM 意见反馈
    没有新消息
    密码登录
    短信登录
    微信二维码登录

    提示文案

    提示文案

    提示失败
    提示成功