移动用户界面的5个设计原则

去年移动端用户首次在全球范围内超过桌面端用户。看看来自全球的统计数据,如今超过22%屏幕的分辨率为640×360。

这种趋势不容忽视,尽管响应式和移动式开发已有一段时间了,移动界面中的交互与桌面界面中的交互却非常不同。随着React Native和Progressive Web Apps(响应式网页程序)的兴起,未来几年移动用户界面的开发也将成为Web开发的重要组成部分。

在开发移动用户界面时,简易性对于良好的用户体验至关重要。界面应保持一致,避免用户的认知超负荷和让用户感觉到混乱。

为了满足和权衡用户交互的作用,本文提到了5个可衡量的原则。这篇文章将分别对这些原则做一个简短的总结,并举例子来概述我们在创建移动界面时应该考虑的问题。

有效性

有效性可检验当用户在使用界面时候的有效性如何。用户有从其他界面和现实世界中获取的。在人机交互(HCI)中,称为用户正在创建的心理模型,以便更容易地理解复杂的概念。我们可以根据现实生活中获取的知识来提高用户的效率。有效性的目标是减少完成任务所需的操作次数。

举一些例子:

  • PWA是使用心理模型来提升用户效率的一个极好的例子。通过设计类似于模拟调谐器的数字调谐器,用户可以立即将这个数字版本的调谐器映射到他在现实世界的体验中。
  • 使用匹配和已知的图标来减少认知负担。把它们和小标签结合起来,减少错误的解读。
  • 心理模型的另一个例子就是将事物的转换看成类似于现实世界中灯光的切换。

效率

效率是指用户能够以何种方式理解应用程序的当前状态以及可以执行的操作。它以每秒动作来衡量,并描述了用户完成任务的效率。

举一些例子:

  • 在界面中提供用户所在位置的视觉提示。例如显示标题,在窗体中提供进度条,突出显示当前标签。
  • 如果界面变得太复杂了,那就设计出可分配子任务的简单类别。例如所有用户相关数据的概要,过去保存项目的集合以及新信息的检索。

生产率

生产率是指用户成功完成任务所需的时间以及用户发现和识别界面功能的容易程度。它是根据相对于时间完成任务所需的动作数量来衡量的。

举一些例子:

  • 通过提供界面核心任务的快捷方式来减少打字的需要。
  • 避免使用误导性的标签,例如使用错误的图标。
  • 提供错误消息,以便用户可以快速从错误中恢复。

反馈错误信息

给用户反馈是界面设计中最重要的部分之一。恰当的反馈可以明显减少我们的错误。我们可以通过每个任务的每个操作中提交的错误数量来衡量失误。

举一些例子:

  • 为用户操作提供适当的反馈。
  • 突出重要/新信息。
  • 提供教程或提示,可以在需要时查看。
  • 显示当前视图/任务/用户的名称。
  • 当用户发生错误或系统未按预期工作提供反馈。例如,表单错误,无法上传/处理。

认知负荷

减少用户的认知负担对于界面的友好度至关重要的。我们可以通过使用隐喻来解决晦涩的概念,并保持界面简单,以免使用户混淆。衡量认知负荷的一种方法是计算每个视图的动作。

举一些例子:

  • 在视图和内容切换之间提供动画,切勿粗糙的剪切和混乱的篡改内容。
  • 使用熟悉和匹配的符号,使用户易于完成任务。
  • 使用逻辑流程让用户快速完成一项新任务。

结论

当我们设计一个用户界面时,它的设计重点就应该是帮助用户完成他要完成的任务。那么在界面设计过程中你应该问自己一些问题:

  • 我设计的界面是否让用户以最简单的方式来完成任务?
  • 界面是否遵循简单性以及利用心智模型来减少认知负荷?
  • 该界面是否显示用户所在的位置,避免用户混淆和迷失方向?
  • 用户是否得到了恰当的反馈意见?
  • 界面是否考虑过可能出现的错误并提供对这些错误的反馈?

由于屏幕尺寸小,移动界面很受限制,因此将应用程序简单化并把重心放在用户想要完成的任务上就显得尤为重要。如果界面变得过于复杂和混乱,可能是因为它试图去满足许多不同的条件,实际上应该被拆分成不同的应用程序。通过保持界面的有效性,效率,生产率,及时反馈错误信息和减少认知负载,我们可以避免设计出一些看起来花哨,实际上并不支持用户完成任务的用户界面。

封面作者:Nicola Baldo

medium

译文地址:mockplus

原文作者:Lisi Linhart

译者:Mockplus团队

(0)

相关推荐

  • 【干货】5大移动端表单设计原则及案例赏析

    当我们在享受手机App为生活带来的巨大便利时,无形中已经经历了多种多样的移动表单设计形式.而表单设计又是移动应用设计中与用户产生最多交互的步骤,包括用户注册.订阅服务.用户反馈.问卷表单.买卖交易等等 ...

  • 优秀设计师必须知道的UI设计原则

    小编:2016年!新年快乐~祝大家开开心心,身体健康,在学UI网收获你想要的知识. tiah在Joshua Porter总结出来的优秀的UI设计原则基础上,进行了重新整理并增加图文解说,以便于酷友理解 ...

  • 关于设计原则的思考

    每个设计方案当中都包含着大大小小各种设计决策. 这个app的主界面应该以怎样的形式呈现?用户怎样在功能之间进行导航?导航栏应该用怎样的底色? 好的设计师应该有能力对这些决策进行诠释.没什么是信手拈来的 ...

  • 用户界面设计原则

    用户界面设计原则 设计绝不是简单的拼合,排列甚至编辑:设计是通过阐明,简化.明确.修饰,使之庄严,有说服性,甚至带一点趣味性,来赋予其价值及意义."--保罗·兰德(Paul Rand) 1. ...

  • 9个经典永恒的设计原则

    很多人都在寻找那些能够帮助他们快速提升设计能力的方法,但你是否想过,自己身上的哪些方面会对你的设计产生影响呢?是使用工具的技巧,对设计的理解和态度,还是你的生活习惯呢?我想说所有这些都是决定你的设计是 ...

  • 设计原则:组织信息的方式

    我们的设计必须显示展现出组织性良好的信息,这样用户才能很容易地理解所显示的内容.这是提供良好用户体验的关键.在大量显示数据的方式中,有一种经受了时间的考验,并证明即使在今天也是高效的.它被称为&quo ...

  • Design System 界面设计原则-视觉篇

    有正确的设计观作判断好坏的标准,并结合行之有效的设计原则作指引,才能制定出最优的设计方案. 前言 近年来,「设计规范」逐渐被「设计体系」或「设计语言」的概念重塑.基于一套架构严谨.规则统一的体系框架, ...

  • 以狗为本的设计原则

    随着生活水平的提高,狗狗的待遇也在提高,许多狗随着主人一起去旅行环游世界,相关的科技设备也在增多.为狗制造并设计属于它们的设备,似乎也不是梦想.一起看看NNG上如何以狗狗为核心的设计原则吧. 一  了 ...

  • 兔展H5页面制作|H5版面设计原则

    其实讲到版式设计,网上一大波的教程,H5的版面设计原则也是基于此延伸出来的,只是我们的范围缩小的一些,是针对一个固定的尺寸的图文动画结合的交流.考虑到大部分是基础用户,我们就讲些简单易懂的排版技巧. ...