产品面试题:35条交互设计原则总结(上)

交互设计的理论公众列举的非常多,大部分的原则大家一定见到过,本文从产品框架设计,页面设计到组件设计等方向,列举了APP和网站常用到的交互设计原则,一共35条。这次统一将交互设计的方法和理论汇总,不足之处也希望各位能够提出,一起补全。列举以下的设计原则更多的是为设计做参考,结合设计原则,是提升设计说服力的有效方法。

产品面试题:35条交互设计原则总结(上)

01、框架规划类交互原理

1.用户体验五要素

最常见的交互设计原理了,适用于app和web改版的框架设计,来源经典的著作《用户体验的要素 -以用户为中心的Web设计》,用五个要素:战略层、范围层、结构层、框架层、表现层来阐述以用户为中心的设计方法。不多啰嗦了。略过…..

产品面试题:35条交互设计原则总结(上)产品面试题:35条交互设计原则总结(上)

2.卡片分类法

利用卡片的形式对app和网站的功能框架进行分类组合。

一般形式分为两种:开放式和闭合式。

开放式主要是提供类别(有时也包括说明)由用户自由分组并为其命名;

闭合式则是已经提供组别和类别,要求用户相应地归类。

产品面试题:35条交互设计原则总结(上)

现在卡片分类的方法用得比较少了:

  1. 移动端APP的设计整体比较固定、有一些约定俗成的规律:例如app里面第一个一般是【首页】,最后一个导航栏通常是【我的】。
  2. 诸如阿里云,淘宝网等导航层级较多的大型网站,仍有必要进行。

02、界面设计原理

3.交互设计四策略

以电视机的遥控器为例子做个简化:删除,组织,隐藏,转移。

产品面试题:35条交互设计原则总结(上)

删除:简化设计最明显的方式就是删除不必要的功能。

组织:将功能进行分类;最简单的分类,通常指的是重复交叉最少的分类方法。

隐藏:隐藏比组织具有一个明显的优势:用户不会因不常用的功能分散注意力。无论隐藏什么功能,都意味着你在用户和功能之间设置了一道障碍。

转移:把正确的功能放到正确的平台或者正确的系统组件中去_

4.格式塔心理学

格式塔心理学(gestalt psychology),又叫完形心理学,是西方现代心理学的主要学派之一,诞生于德国,后来在美国得到进一步发展。该学派的创始人是韦特海默,代表人物还有苛勒和考夫卡。

该学派强调经验和行为的整体性,反对美国构造主义学说和行为主义“刺激–反应”公式,认为整体不等于部分之和,意识不等于感觉元素的集合,行为不等于反射弧的循环。

格式塔理论提出:眼脑作用是一个不断组织、简化、统一的过程,正是通过这一过程,才产生出易于理解、协调的整体。

格式塔是交互设计中实际运用最多的心理学理论之一,常用的十种组织规则:

图形与背景:

尽量弱化背景,突出主题部分;

例如:Lightroom的主界面用简单的纯黑色来突出几大主功能按钮。

产品面试题:35条交互设计原则总结(上)

对称和秩序

我们的眼睛会很快发现对称和秩序,这些原则可以用来迅速有效地传达信息,用于到设计中就是我们常说的视觉平衡。

例如下方的设计:

产品面试题:35条交互设计原则总结(上)

接近性

人们习惯认为某些距离较短或互相接近的部分,容易组成整体;

产品面试题:35条交互设计原则总结(上)

连续性

连续性是指对线条的一种知觉倾向,通过找到非常微小的共性将两个物体连接成一个整体。

例如:下面app的快捷入口,虽然第二行没有填满,但是我们会认为第二行和第一行是一组。

下图中我们会认为虚线是连续的,直线是另外一组。

完整闭合倾向

任务处理是一个闭环,我们在交互设计过程中要考虑任务处理的闭合性。例如充值话费:选择金额–立即充值-选择支付方式-支付成功算是一个闭合性的操作。

转换律

相似性

人们通常把那些明显具有共同特性(如形状、运动、方向、颜色、大小等)的事物组合在一起。如果各部分的距离相等,但它的颜色有异,那么颜色相同的部分就容易组合成为一个整体。

例如:我们习惯将APP首页的快捷入口看作一个组合。

简单性

界面设计趋于简洁

同型论

比如我们看到设计中的红点系统,就会知道里面有未处理的任务,想要去消除红点。

共同方向运动

在同一方向上的元素比固定元素或者是朝不同方向移动的元素更为紧密相关。

5. 神奇7±2

1956年,美国心理学家米勒(George A. Miller)教授发表了一篇重要的论文《神奇的数字7加减2:我们加工信息能力的某些限制》,提出短时记忆的容量为7±2,即一般为7并在5~9之间波动。这就是神奇的7±2效应。

1956年乔治米勒对短时记忆能力进行了定量研究,他发现人类头脑最好的状态能记忆含有7(±2)项信息块,在记忆了 5-9 项信息后人类的头脑就开始出错。与席克定律类似,神奇数字 7±2 法则也经常被应用在移动应用交互设计上。现在一般应用于规范导航或者选项卡的数量,例如,我们网站的菜单最佳数量是多少个?

7±2法则对我们设计上的启示:

产品面试题:35条交互设计原则总结(上)

网页的导航或选项卡尽量不要超过9个,APP的主导航一般为5个以内。如果导航或选项卡内容很多,可以用一个层级结构来展示各段及其子段,并注意其深度与广度的平衡。

产品面试题:35条交互设计原则总结(上)

03、尼尔森十大可用性原则

6.状态可见原则(Visibility of system status )

用户在网页上的任何操作,不论是单击、滚动还是按下键盘,页面应即时给出反馈。“即时”是指,页面响应时间小于用户能忍受的等待时间。用户所处的位置,应该能让用户知道自己所处于的位置状态。

例如:任务处理的状态分为:开始处理-处理中-待反馈-处理完成。在每一个对应的状态都应该标明。

进度条的使用让用户明确任务处理进程,避免了用户等待过长的烦躁心情。

产品面试题:35条交互设计原则总结(上)

7.环境贴切原则(Match between system and the real world)

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

产品面试题:35条交互设计原则总结(上)

还比如京东的订单页面显示配送员快递,地图和配送员显示非常形象,模拟了快递员送快递的场景,让用户轻松知道快递员到达哪个地方了。大家看到快递员的图标会觉得特别贴切环境,不需要思考就能知道自己的快递所在位置。

产品面试题:35条交互设计原则总结(上)

8.用户可控原则(User control and freedom)

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

例如:在携程APP订酒店时,会允许用户在一定时间内免费取消订单。还有菜鸟裹裹APP我们有快递要寄出时,经常忽略了送货时间,很有可能会选错收货时间,所以一般都会有修改配送时间的功能。

微信常见的【撤回】功能:在聊天时,发出去的消息发错了人,或者觉得自己发错了话,我们可以长按消息调用【撤回】功能,然后重新编辑发送,来避免因为偶然发错消息给用户造成困扰的窘境。

产品面试题:35条交互设计原则总结(上)

业界动态

交互设计总结:如何分析用户心理?

2021-4-21 13:04:38

业界动态

下沉市场救得了奶茶店吗?

2021-4-21 13:52:58

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索