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

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

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

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

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

有效性

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

举一些例子:

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

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

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

(图片1)


效率

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

一些例子

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

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

(图片2)


生产率

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

一些例子

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

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

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

(图片3)


反馈错误信息

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

一些例子

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

突出重要/新信息。

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

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

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

(图片4)


认知负荷

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

一些例子

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

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

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

(图片55)


结论

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

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

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

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

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

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

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

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

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

原文作者:Lisi Linhart

移动用户界面的5个设计原则相关推荐

  1. 基于用户体验的手机产品交互设计原则

    基于用户体验的手机产品交互设计原则 一.用户体验信息收集 在讨论手机的交互设计方法之前,需要先对手机的用户使用习惯有一些基本的了解,需要对手机的用户体验信息做一些收集整理.收集用户体验信息首先需要确定 ...

  2. window10 运行linux软件,现在你可以直接在Windows 10平台上运行带用户界面的Linux桌面软件...

    微软目前正在继续更新 Windows 10 WSL 子系统功能 , 此次更新主要带来GPU硬件加速可让用户运行桌面软件. 以往我们要想运行Linux软件肯定得使用Linux操作系统,在 WSL 发布后 ...

  3. 【交互设计】用户体验之手势交互设计原则

    转载自:老二牛车教育 » [交互设计]用户体验之手势交互设计原则 手势识别指的是计算机设备侦测并识别人类手势.近几年来,随着手势识别技术的高速发展,以及3D传感器的广泛采用,手势交互已经得到广泛的普及 ...

  4. linux3.0操作系统下载,GNOME下载3.0 正式版_新一代桌面用户界面的Linux操作系统下载...

    [基本简介] GNOME3.0适用于各类设备,采用了新一代桌面用户界面GNOME Shell,改进了GNOME开发平台,包括显示后端.新的API.搜索功能.用户消息.系统设置等诸多方面. [特色功能] ...

  5. Qt中用户界面的User Interface Compiler(uic)机制的相关说明

    uic读取由QtDesigner生成的XML格式的用户界面定义文件(.ui文件),然后生成其对应的C++头文件. 若界面文件为ZZZ.ui,则对应生成的头文件为ui_ZZZ.h.默认情况下: ①基于Q ...

  6. 计算机的设计原则和,设计原则“词典”|104个设计原则(上)

    这篇文章也是想把自己整理好的前52条设计原则与大家分享,后面的52条还在努力的整理中-希望对你有用. 前言 对于设计师而言,在设计中合理的遵行设计一些设计原则可以提高工作效率并减少设计问题和风险.而这 ...

  7. 空手撸SOLID架构设计原则,六大原则层层解析,你绝想不到

    设计原则概述 通常来说,要想构建-个好的软件系统,应该从写整洁的代码开始做起.毕竟,如果建筑所使用的砖头质量不佳,那么架构所能起到的作用也会很有限.反之亦然,如果建筑的架构设计不佳,那么其所用的砖头质 ...

  8. SOLID架构设计原则

    设计原则概述 通常来说,要想构建-个好的软件系统,应该从写整洁的代码开始做起.毕竟,如果建筑所使用的砖头质量不佳,那么架构所能起到的作用也会很有限.反之亦然,如果建筑的架构设计不佳,那么其所用的砖头质 ...

  9. 万字长文,精讲面向对象设计原则,一起练内功

    本文摘Robert C Martion <架构整洁之道> 在我们追逐互联网高并发技术时,应该提前打好基础.面向对象设计原则是成为架构的必由之路,通读此文,反复咀嚼,定会受益无穷. 通常来说 ...

最新文章

  1. 关于网站购买商品的一些感悟
  2. tomcat端口被占用
  3. mysql开发java心得_关于mysql 一些优化心得
  4. 【干货】值得收藏的 14 个 Linux 下 CPU 监控工具
  5. 实训计算机硬盘分区的心得体会,计算机实训的心得体会3篇
  6. 数据库(MySQL)
  7. aquamacs 夜间模式禁止滚动条
  8. Chrome source code map - fail - cannot debug
  9. C++查看各种数据类型所占字节和最大最小值(数据范围)
  10. vrm华为_华为-笔记本电脑如何安装FusionCompute虚拟化平台?
  11. ubuntu中mysql安装失败
  12. NHibernate 做个小项目来试一下吧 二
  13. nginx的负载均衡(centos7)
  14. Spring cloud系列六 Ribbon的功能概述、主要组件和属性文件配置
  15. [ext4]空间管理 - 分配机制
  16. 登陆注册流程和token加密
  17. c++map自动排序特性
  18. 管理经济学学习之初探
  19. 球半篮球分析,WNBA:风暴 vs 梦想
  20. 利用Visio绘制数据流图

热门文章

  1. windows_server2012搭建iis并配置http重定向 iis转发
  2. Android常见界面控件(基础入门)
  3. python有哪些函数怎么用_必须掌握的常用python函数有哪些?
  4. 最长公共子串_两个字符串的最长公共子串(后缀自动机)
  5. vue seo关键词设置_「干货」SEO常识关键词选取及设置方法
  6. python如何寻找两个相似的文件_如何计算两个文档的相似度(二)
  7. 有一个计算机在桌子上用英语怎么写,什么在桌子上的英文怎么写
  8. excel筛选排序从小到大_excel筛选怎么用教程 重复数据多个条件筛选功能教学
  9. python pytorch自定义_Pytorch 实现自定义参数层的例子
  10. c#打印乘法口诀_小学数学所有公式和顺口溜都在这里了!建议家长收藏打印!...