作者都是各自领域经过审查的专家,并撰写他们有经验的主题. 我们所有的内容都经过同行评审,并由同一领域的Toptal专家验证.
米克罗斯飞利浦的头像

米克罗斯飞利浦

Miklos是一位设计领导者, 作者, 在设计领域拥有超过18年经验的演讲者.

专业知识

以前在

金融时报》
分享

在有效的交互和不可用的交互之间有一条细微的界限. 交互设计原则有助于弥合这一鸿沟.

执行良好的交互设计在实现出色的用户体验中起着巨大的作用, 毫无疑问,它是用户体验的基础之一 设计原则.

“不可用”的意思是“我要向前看了。,无论视觉设计有多“好看”——动画有多花哨——如果搞砸了交互设计的原则,你的用户体验就会失败. 如果做对了,你就能获得更好的用户体验,即使美学效果不够好. 这个产品成功的机会会大得多, 这反过来又对底线有贡献.

交互设计(IxD)是由 交互设计协会 (IxDA)作为“交互系统的结构和行为”. 交互设计师 努力在人们和他们使用的产品和服务之间建立有意义的关系, 从电脑到移动设备再到家电等等.”

经验是至关重要的,因为它决定了人们对互动的记忆有多深. ——唐·诺曼 日常事物的设计.

下面的交互设计原则对 优秀的交互设计,这反过来又有助于体验.

移动应用交互设计和用户体验

今天所有的设备和技术都有可能在一夜之间被完全不同的东西所取代, 然而,由于其持久的原则, 伟大的交互设计仍然是可以实现的. 这些不变的原则是关于什么能激励人们,他们的行为,以及他们如何思考.

想象一下,如果每扇门的门把手都不一样. 首先你得先推一下 the door then down; for another you’d have to 拉起 而不是按下去,然后再按下去 拉两次 然后下降——完全是灾难. 事实上,“转动门把手”这个短语假设只有一种方法可以做到.

没有人喜欢被喊着“遵守规则”的人打得头破血流,但真正优秀的交互设计依赖于一套标准, 最佳实践, 约定, 经验法则(启发式). 这不是模棱两可的科学, 但它们构成了IxD的基石,使交互以最小的摩擦成为可能. 接口标准 不要扼杀创造力-它们不是硬性规定, 但是,帮助设计师建立“可用和熟悉的设计”基础的基本指导方针,可以在此基础上进行创新.

交互设计原则和最佳实践

交互设计属于人机交互(人机交互)的范畴。, 一个多学科的研究领域,专注于计算机技术和设计, 特别是, 人(用户)和计算机之间的交互.”–as 由交互设计基金会定义.

优秀的UI设计实现了纯粹 用户喜爱 通过结合 基本UI设计原则 目标驱动的交互设计.

  • 成功的交互设计采用简单, 明确的目标, 强烈的目的, 直观的用户界面.
  • 在努力保持交互简单和容易,目标驱动 交互设计 为了让用户完成任务,在用户面前只提供绝对最低限度的必要内容.

让我们深入探讨一些最重要的原则(无论如何都不是一个详尽的清单):

可发现性

基本上,如果用户找不到它,它就不存在. 例如,我们必须清楚地知道UI中哪些动作在一微秒内是可能的, 标记图标是一种最佳实践. 未标记的图标无异于在用户的路径上设置路障,因为他们必须停下来解读含义. 你打断了“心流”.“令人震惊的是,他们对学习你的UI不感兴趣.

Linkedin和Facebook UI标签图标交互设计最佳实践

极大的可能性

与可发现性密切相关的是,能指的有效使用确保了这一点 -对一个对象的操作的可能性-在UI中清楚地指出. 能指像信号或路标一样提供强有力的线索. 指示可用的交互, 当用户大喊大叫时,它们会闪烁绿灯, “我在这里。, 您可以轻按(单击), 刷卡, 等.) me!“一个功能可能存在于UI中, 但可能会隐藏起来,因为它缺少能指, 它仍然是不可见的. 一个例子可能是“隐藏的手势交互”,它不会显示自己,除非用户不小心向左或向右滑动(删除某些内容), 例如).

功能支持定义了哪些操作是可能的. 能指指明了人们如何发现这些可能性:能指就是符号, 可以做什么的可感知信号. 对设计师来说,能指比可视性重要得多. ——唐·诺曼(诺曼,2013)

Apple Mail违反了交互设计原则,因为它没有能指,所以具有隐藏的功能

Feedback

在能指之后,下一个最重要的用户交流是Feedback. Feedback方式: 关于行动影响的明确信息. 它还意味着系统状态的持续可见性.e.,系统应确保:

  • 用户可以随时了解正在发生的事情.
  • 有关于他们行动的结果和产品(系统)当前状态的连续信息。.
  • 对于产品的状态,用户不会感到困惑.e.、处理、加载、搜索、上传等.,或者其他状态变化.
  • 在执行了一个操作之后,很容易确定新的状态.

文件上传动画Feedback交互设计原则

概念模型和心智模型

优秀的交互设计会向用户提供创建系统概念模型所需的所有信息, 从而导致他们的理解和控制感. 在使用系统时,概念模型增强了结果的可发现性和评估性.

心智模式——或认知地图——是用户脑海中的图像,告诉他们对某种交互的期望,以及在现实世界中事物是如何工作的. 认知地图是我们物理环境的内部表征, 尤其是与空间关系有关的. 通过有效地利用用户的心智模型, 交互设计师 可以创建“感觉”直观的交互设计系统吗.

汽车座椅调整心理模型交互设计原则

设计师发明了一个概念模型——设计模型, 这就是设计者想让设备或软件工作的方式. 将此模型传达给用户的唯一方法是通过UI实现它. 然后,用户与概念模型进行交互,并创建他们自己的心智模型.

设计师不能 告诉 用户希望应用程序如何工作,他们需要设计一个适当的UI,以便清楚地传达其目的. 换句话说,要使界面易于理解和使用. 糟糕的交互设计可能会给用户带来错误的心理模型. 这将导致用户的困惑和错误,因为他们试图以一种设计师不希望的方式操作应用程序.

招聘美国全职自由用户体验设计师

映射

映射是控件和它们在世界中的效果之间的关系. 的原则 Feedback 它是映射的近亲,因为这两个原则一起工作以创造无缝的体验. 几乎所有的工件都需要控件和效果之间的某种映射——在界面设计的情况下, 它是控件与其结果函数之间的关系.

汽车仪表盘屏幕与视觉Feedback演示交互设计原则

自然映射——利用物理类比和文化标准——可以直接理解. 例如,设计师可以在UI中使用空间类比:

  • 要使用滑块组件增加某个值,请向右滑动滑块,
  • 要减小它,向左滑动.

有些自然映射是生物性的, 就像在普遍的标准中,一个上升的水平代表更多, 逐渐减少的水平, 少.

自然映射交互设计原理与物理类比的例子

Constraints

Constraints的设计概念是一种确定如何限制在给定时刻可能发生的用户交互类型的方法. 交互设计Constraints通过为用户提供“导轨”来帮助有效的交互——几乎就像一只引导手引导交互 可以 发生.

设计Constraints 确保只启用特定的东西, 甚至是可见的, 以便引导用户进行特定的交互. 它考虑大小, 规模, 比例, 强调, 和国家, 这些是如何, 和谐合作, 帮助创建层次结构,从而影响用户. 正确设置Constraints还有助于减少用户出错的机会.

Constraints的对立面是向用户提供所有选项, 让他们很难决定下一步该做什么. 这是原则 选择. 更多的选择, 选择其中任何一个越困难,我们就会被所有的可能性所淹没.

伟大的 交互设计 没有把所有可用的选项都放在界面上, 而是把它限制在特定时刻最重要的事情上.

Foursquare在交互设计中使用设计Constraints来限制可用的交互

一致性、标准和启发式

这些都是亲兄弟 模式 (下面),如果你愿意的话. 防止用户出错,使应用程序易于学习, 交互模型必须是一致的. 一致性提高 UX一般可用性,以及用户使用数字产品的效率.

一致性意味着使用相似的元素来完成相似的任务, 具有相似的功能和行为——一致的界面是遵循规则的界面, 例如使用相同的操作来做某事.

Apple News iPad App分享菜单是很棒的交互设计

力求高可用性的产品遵循完善的用户体验设计惯例, 标准, 最佳做法和 可用性启发式 (宽泛的经验法则,而不是具体的可用性指南).

符合 公约 例如,可能是页面布局的方式. 网络用户花69%的时间浏览页面的左半部分,30%的时间浏览页面的右半部分. 因此,遵循传统布局的网站更有可能盈利.

A 标准 可能是面包屑路径(一种可以立即识别的方向和导航设备), 控件上的全局导航菜单 BCC网站.

模式和易学性

一个新用户能多容易学会浏览一个界面? 没有人愿意学习一种新的做事方式,除非它比之前的方法有显著的好处——然而我们总是被未经测试的方法所淹没, 非传统的交互.

公共组件或模式提供了即时学习性. 一旦你学会了如何使用勺子,你就永远知道如何使用勺子了. 骑自行车也是一样, 同样的构造也适用于我们每天使用的UI组件:按钮, 文本字段, 下拉菜单, 复选框, 单选按钮, 纺纱, 滑块, 图标, 手风琴, 搜索框, 等.

交互设计模式构成了交互设计原则的基础

最好的交互设计不会试图重新发明轮子, 但是要以一种新的方式高效地使用模式.

模式不仅鼓励易学性, 但也要提供一致性(另一个原则), (如上所述),并使其符合用户对事物应该如何工作的期望.

视觉层次和重点

在他们与网站或应用程序的交互过程中, 人们正在寻找与他们的搜索最相关的信息. 视觉层次关系到元素以暗示重要性的方式排列. 设计中的视觉层次 影响人眼感知所见事物的顺序. Not everything is given equal “weight”; order is created by visual contrast between objects in a field of perception. 视觉对比强调可以通过大小来实现, 接近, color, 不透明度, 元素之间的实际色调对比.

手机UI设计利用视觉层次是交互设计的原则之一

不要低估视觉层次的力量. 千百年来,它一直被有效地应用于各种设计中, 在建筑和工业设计以及印刷设计. 来看看 伟大的海报设计. 在交互设计中很好地使用这种技术, 正确的事情似乎在正确的时间以正确的方式出现.

伟大的 交互设计师 使用强调的力量成功实现“精益和平均” 界面设计看起来就像魔术一样.

费茨定律

信不信由你, 这一定律来自于早期对人类肌肉运动的研究,以及针对电报操作员和生产线任务表现的研究, 后来被适应了 人机交互 (人机交互). 它基本上是说:“捕获目标的时间是与目标的距离和大小的函数.”

简单来说, 关键是目标有多远,有多大, 以及它与其他目标的距离. 更短的鼠标移动或点击效果更好——如果目标更接近你的起始位置,点击或滑动目标总是更快. 相关的任务也应该彼此靠近,这样用户就不必在屏幕上跑来跑去与UI交互.

费茨定律 能否准确预测移动到目标并选择目标所需的时间. 目标可以是按钮、下拉菜单或屏幕上的其他交互元素. 如果太远的话, 太小了, 或者如果可点击的元素靠得太近, 大大降低了用户界面的效率和可用性.

Fitts定律用户界面的例子使用了UX和交互设计原则之一

古腾堡图,Z型和f型布局

根据内容的不同,这些模式适用于不同的情况, 而且大多被西方观众使用. 古腾堡图描述了眼睛在均匀分布时移动的一般模式, 同质信息——主要是文本较多的网站,如博客或新闻网站. 古腾堡图显示,强休耕区和弱休耕区都在阅读重力路径之外, 除非以某种方式在视觉上强调,否则很少受到关注.

古腾堡图

Z型图案遵循字母Z的形状. 在某些情况下,这种模式也被称为z - zag模式. 与古腾堡图的主要区别在于,z型图表明观众将穿过两个休耕区. 否则它们仍然在相同的地方开始和结束,并且仍然从中间经过. 就像古腾堡一样,设计师会把最重要的信息放在z形图案的路径上.

交互设计的z模式阅读示例

F代表快速,指的是用户阅读内容的方式. f型是由an推广的 NNGroup 眼球追踪研究记录了200多名用户在网上阅读内容. 研究发现,人们的浏览模式在许多不同类型的网站上都是相当一致的.

眼球追踪研究f模式扫描和阅读网站上的内容是众多交互设计原则之一

为什么这很重要?? 例如,在电子商务网站上, 最大化扫描, 您可能希望按照f型模式排列最重要的内容.

识别而不是回忆

识别指的是我们“识别”熟悉的事件或信息的能力, 而回忆更多的是一种“认知负担”,涉及从记忆中提取相关细节. 向用户展示他们能识别的东西 提高可用性 不需要从头开始召回物品.

用户界面中的图标很容易识别——这是很棒的交互设计

例如, 在UI中使用图标是强大的,因为它允许对符号的即时识别. 我们的大脑处理(识别)符号的速度比阅读文本快1000倍. 如果设计器在对话框中显示标准警告标志图标, 它会立即让用户集中注意力,因为下一个动作可能是破坏性的. 但是,如果一个图标被设计成强迫用户回忆和解读意思的方式——比如一只举起来的手而不是警告图标——它会降低效率和UI的可用性.

美学与极简设计

你必须深刻理解产品的本质,这样才能去掉那些不重要的部分. jonathan Ive.

这是最具挑战性的原则之一,因为它很难. 趋势是设计师和 产品经理 添加所有可用的选项,并让用户决定他们想要采取的路径. 这确实是一种懒惰的方法,会导致产品充满不必要的杂乱.

苹果网站的美学和极简设计,一个UX和交互设计原则

界面需要清除不支持用户目标和任务的不必要的元素和内容. 设计师不应该只设计美观的ui, 但也要在用户流中优先考虑屏幕到屏幕的信息. 使用视觉层次和强调的魔力, 只有用户完成任务所需的基本和绝对最少的信息才应该呈现.

米开朗基罗这样评价他的作品:“我在大理石中看到了天使,便开始雕刻,直到让他自由.”

汉莎航空登机牌重新设计,以实现更好的交互设计

设计一个极简主义的交互, 美观, 简单要求设计师准确地理解人们使用产品的那一刻发生了什么, 然后去掉所有不必要的东西. 进行深入的用户研究和 测试 了解用户将如何使用产品通常是最好的方法.

错误的预防

用户在执行任务时经常会分心, 所以通过视觉强调来防止无意识的错误, 提供建议和使用的精心设计 Constraints 是关键. 纠错的一种形式,也被称为 防错-指故障安全机制的实施,以防止流程产生错误.

防止错误的最好方法之一是设计一个更好的心智模型. 当设计师的模型和系统如何工作的解释与用户的心智模型不匹配时,就会出现许多用户错误.

标准设计 约定 帮助(上面提到的原则之一),因为它们帮助用户理解他们可以采取什么行动. 与您的网站或应用程序交互的用户已经使用了数千个其他网站和应用程序, 并期望常见的交互元素以某种方式呈现和工作. 当您的产品偏离这些约定时,就会出现容易出错的情况.

有趣的错误

在发生错误之前发出警告,在破坏性行为之前进行确认. 比实现良好的错误消息更好的是精心设计,从一开始就防止问题发生. 尽量消除容易出错的情况,并不断检查它们.

交互设计的未来

新设备, 环境, 界面将继续发展,带来新的交互可能性. 电子游戏控制器也在不断进化, 并提供多样化的输入控制, 还有触觉Feedback. 手势界面将从支持2D和3D手势的触摸屏发展成熟, 在iOS和Android设备上使用手势-在3D空间中使用手势与虚拟现实空间进行交互, 游戏控制台, 以及让我们控制环境的物联网设备.

就像谷歌的案例一样 项目独奏曲, 我们可以对老鼠说再见了, 触摸板, 和操纵杆, 切换到更自然的手势互动,用我们的手和手指来控制设备. 在某些情况下(例如在会话ui中),输入方法可能从键盘变为语音. 不过, 以某种形式(声音)提供即时和持续Feedback的原则, 触觉和视觉)仍然是需要的.

Google 项目独奏曲手势交互界面控制交互设计

基本的交互设计原则将在未来的系统设计中始终扮演核心角色,这对于 用户体验/ UI设计人员 把它们记在心里. 它们不是硬性规定,但会带来更好、更吸引人的产品和服务. 正如成功的电影使用古老的叙事技巧,遵循一个久经考验的真理, 历史悠久的结构, 有些交互设计原则的存在是有充分理由的. 遵循这些原则将使任何产品设计师受益,因为他们可以提高产品的可用性,并推动产品被更广泛地采用.

聘请Toptal这方面的专家.
现在雇佣
米克罗斯飞利浦的头像
米克罗斯飞利浦

位于 英国伦敦

成员自 2016年5月20日

作者简介

Miklos是一位设计领导者, 作者, 在设计领域拥有超过18年经验的演讲者.

Toptal作者都是各自领域经过审查的专家,并撰写他们有经验的主题. 我们所有的内容都经过同行评审,并由同一领域的Toptal专家验证.

专业知识

以前在

金融时报》

世界级的文章,每周发一次.

订阅意味着同意我们的 隐私政策

世界级的文章,每周发一次.

订阅意味着同意我们的 隐私政策

Toptal设计师

加入总冠军® 社区.