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

简介: 以下内容由Mockplus(摹客)团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具。去年移动端用户首次在全球范围内超过桌面端用户。

以下内容由Mockplus(摹客)团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具。

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

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

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

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

有效性

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

举一些例子:

PWA是使用心理模型来提升用户效率的一个极好的例子。通过设计类似于模拟调谐器的数字调谐器,用户可以立即将这个数字版本的调谐器映射到他在现实世界的体验中。

使用匹配和已知的图标来减少认知负担。把它们和小标签结合起来,减少错误的解读。

心理模型的另一个例子就是将事物的转换看成类似于现实世界中灯光的切换。

(图片1)


img_98bc1bb8c0c51e060351dc84b307deeb.jpe

效率

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

一些例子

在界面中提供用户所在位置的视觉提示。例如显示标题,在窗体中提供进度条,突出显示当前标签。

如果界面变得太复杂了,那就设计出可分配子任务的简单类别。例如所有用户相关数据的概要,过去保存项目的集合以及新信息的检索。

(图片2)


img_d4841a93eb72277d04f39ce9aa148c1a.jpe

生产率

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

一些例子

通过提供界面核心任务的快捷方式来减少打字的需要。

避免使用误导性的标签,例如使用错误的图标。

提供错误消息,以便用户可以快速从错误中恢复。

(图片3)


img_bda83184a067d4dcecc96500fd600e3a.jpe

反馈错误信息

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

一些例子

为用户操作提供适当的反馈。

突出重要/新信息。

提供教程或提示,可以在需要时查看。

显示当前视图/任务/用户的名称。

当用户发生错误或系统未按预期工作提供反馈。例如,表单错误,无法上传/处理。

(图片4)


img_16cb332b7704f1f1e205909842811fe1.jpe

认知负荷

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

一些例子

在视图和内容切换之间提供动画,切勿粗糙的剪切和混乱的篡改内容。

使用熟悉和匹配的符号,使用户易于完成任务。

使用逻辑流程让用户快速完成一项新任务。

(图片55)


img_913c8ce2191a7cf6822df1b5d760ba89.jpe

结论

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

我设计的界面是否让用户以最简单的方式来完成任务?

界面是否遵循简单性以及利用心智模型来减少认知负荷?

该界面是否显示用户所在的位置,避免用户混淆和迷失方向?

用户是否得到了恰当的反馈意见?

界面是否考虑过可能出现的错误并提供对这些错误的反馈?

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

学习工具,但不受限于某种工具。Mockplus做原型,更快更简单,现在下载Mockplus,免费体验畅快的原型设计之旅。

原文链接:https://medium.com/swlh/principles-of-mobile-user-interfaces-94661cca7c16

原文作者:Lisi Linhart

相关文章
|
机器学习/深度学习 存储 人工智能
一文读懂云计算、大数据和AI间的关系和区别
相信大家都听说过云计算、大数据和人工智能,并且它们之间好像互相有关系:一般谈云计算的时候会提到大数据、大数据的时候会提人工智能、谈人工智能的时候会提云计算……三者之间相辅相成又不可分割,那么这三者之间到底是怎么一回事呢,今天小编就来讲讲。
5706 0
一文读懂云计算、大数据和AI间的关系和区别
|
运维 安全 Cloud Native
全方位解读服务网格(Service Mesh)的背景和概念
为了解决微服务框架的侵入性问题,我们引入服务网格。
5461 0
全方位解读服务网格(Service Mesh)的背景和概念
|
算法 Java 调度
mybatis-plus中的雪花算法
主要介绍mybatis-plus中用到的雪花算法,如有错误或未考虑完全的地方,望不吝赐教。这里默认大家对雪花算法有一定的了解哈
7284 1
mybatis-plus中的雪花算法
|
12月前
|
存储 机器学习/深度学习 人工智能
硅谷GPU单节点服务器:技术解析与应用全景
“硅谷GPU单节点服务器”代表了在单个物理机箱内集成强大计算能力,特别是GPU加速能力的高性能计算解决方案。它们并非指代某个特定品牌,而是一类为处理密集型工作负载而设计的服务器范式的统称。
|
9月前
|
监控 安全 API
企业微信协议接口开发实践与最佳路径
在企业数字化转型中,企业微信官方API存在功能限制。本文探讨通过iPad协议实现个人微信互通、消息实时监控等核心需求,解析Protobuf与MMTLS通信、长连接维护及防封策略,揭示构建高效、安全SCRM系统的最佳实践路径。
1221 7
|
11月前
|
存储 人工智能 安全
阿里云服务器购买之后如何申请发票?发票申请流程及常见问题解答
当我们完成阿里云服务器的购买后,如何顺利申请发票便成为众多企业用户关注的重点问题。特别是对于初次接触阿里云服务器的用户而言,发票申请流程可能并不熟悉。本文将为大家介绍在购买阿里云服务器后如何申请发票,以及在申请过程中可能遭遇的各类常见问题,助力大家轻松完成发票申请。
1463 6
|
应用服务中间件 Linux 网络安全
nginx安装部署ssl证书,同时支持http与https方式访问
为了使HTTP服务支持HTTPS访问,需生成并安装SSL证书,并确保Nginx支持SSL模块。首先,在`/usr/local/nginx`目录下生成RSA密钥、证书申请文件及自签名证书。接着,确认Nginx已安装SSL模块,若未安装则重新编译Nginx加入该模块。最后,编辑`nginx.conf`配置文件,启用并配置HTTPS服务器部分,指定证书路径和监听端口(如20000),保存后重启Nginx完成部署。
5662 8
idea快捷键:全局搜索文件,代码,接口,ctrl+shift+f无效?也可以点击Edit 点击Find Replace in path
idea快捷键:全局搜索文件,代码,接口,ctrl+shift+f无效?也可以点击Edit 点击Find Replace in path
|
Java 测试技术 API
高效阉割良田高拍仪JavaSDK所依赖的Eclipse SWT OLE Win32自动化组件
良田高拍仪的java依赖虽然只有一个swt win32的jar包,但这一个依赖就挺折磨人的,包体积不小,调用起来还很不方便,真正用到的地方其实也只有一点点,本文将把良田高拍仪所使用到的ole自动化组件完全抽离出swt win32这个包,这样不需要任何依赖就能调用高拍仪设备了
638 0
高效阉割良田高拍仪JavaSDK所依赖的Eclipse SWT OLE Win32自动化组件

热门文章

最新文章