作者都是各自领域经过审查的专家,并撰写他们有经验的主题. 我们所有的内容都经过同行评审,并由同一领域的Toptal专家验证.
克里斯汀·埃索尔多的头像

克里斯汀Esoldo

Christine是一名专门从事数据管理的UX/UI设计师, 健康的产品, 以及为大型组织扩展用户体验团队. 她是CrowdStrike的用户体验和产品设计总监,并与戴尔等公司合作, 劳氏, 和好时公司.

以前的角色

高级用户体验经理

工作经验

18

以前在

戴尔
分享

移动可用性不仅仅是缩小网站以适应各种设备. 这是关于关注人们使用移动设备的方式,并理解移动体验与用户一样独特.

可用性 移动设备设计 是关于它的方式吗 感觉 因为它的外观和行为. 人们用手指——或者更具体地说,更频繁地用手指, 他们的拇指——与屏幕互动, 而不是鼠标和键盘的传统桌面代理. 这意味着手机设计比桌面设计更具有触觉体验. 用户感受到的和看到的一样多.

不管是好是坏, 桌面代理的屏障消失了, 手机设计师也面临着一套全新的用户体验 设计原则 的可用性.

然而,对于移动可用性来说,没有放之四海而皆准的标准, 原因很简单,因为屏幕和手指都有各种各样的尺寸, 以下可用性原则将使事情朝着正确的方向发展:

  1. 了解你的用户
  2. 理解上下文
  3. 遵循经验法则
  4. 内容优先
  5. 别偏离目标
  6. 用手势模仿现实世界
  7. 使用渐进披露

我们将在这篇文章中更详细地探讨这些问题, 但首先, 让我们来讨论移动友好设计的一些关键点,以及该领域杰出设计师的研究成果和建议.

超越像素-移动设计满足工业设计

因为手机设计是如此的触感,它超越了视觉设计和屏幕上的像素. 手机可用性要求设计师考虑以下元素 工业设计人为因素; that is, design for real, physical objects. 而移动用户体验设计师实际上并不是在设计物理产品本身, 手机界面设计师仍然应该了解用户是如何体验应用的.

触摸屏要求 用户体验设计师 要考虑的 人体工程学就像实体产品的设计师所做的一样. 因为人们与移动设备进行身体上的互动,所以舒适度很重要. 同样,没有人愿意坐在不舒服的椅子上, 没有人想要使用一款会带来痛苦或不适的应用程序,或者只是觉得操作起来很尴尬.

就像工业设计师花费大量时间研究和观察用户一样, 移动UI设计师 是否应该不断地观察、理解和建立同理心来真正认识 如何 在直接设计屏幕之前,人们会先使用移动设备.

理解人们如何使用电子设备包括两个方面——字面意思, 他们持有它们的物理方式以及他们使用它们的环境. 这两件事对 可用性 手机体验的关键在于屏幕设计本身.

可用性研究——人们如何使用移动设备

移动研究的关键人物之一是 史蒂文Hoober, UX设计师和 4 ourth移动. In 2013, 他对人们如何持有和使用手机进行了广泛的研究,并在文章中写下了他的发现, 用户如何真正持有移动设备?

但他并没有就此止步. 他的研究还在继续, 随着这个领域越来越成熟, 他也开始提取其他移动研究数据.

2017年,他写道 三部分系列 更新他最初的发现, 指出新的关键知识, 并强烈呼吁设计师们不要再引用他最老的作品作为标准. 他特别提到了一个例子(如下所示), 继续成为用户手持手机的标准, 但它作为唯一的标准是不正确的.

移动设备上的拇指滑动区会影响移动设备的可用性
经常被引用但不正确的关于用户如何拿手机的观点 用户体验很重要).

事实上,在他2017年的文章中,用户拿手机有六种不同的方式 75%的人只用拇指 只有不到50%的人用一只手拿着手机(手指、触摸和人的设计,第一部分).

用户持有手机的方式会影响手机的可用性
人们拿手机的常见方式有六种 用户体验很重要).

有了这些发现,很明显,传统的桌面 F-shape模式 在这种情况下,用户在屏幕上进行两次水平的眼球运动,然后在屏幕左侧进行一次垂直的眼球运动, 与手机设计不同步.

显示可用性研究f模式的热图
尼尔森诺曼集团的f型热图来自于眼球追踪研究(来自 尼尔森诺曼集团).

虽然大多数 用户体验设计师 熟悉桌面设计中阅读网页内容的f形模式吗, 这种模式并不适合移动设备.

在移动设备中缺少f形模式也是避免使用汉堡包菜单折叠主导航或隐藏重要内容的原因之一, 以及为什么移动设计应该与桌面设计不同.

如果不是f型,那又是什么?

手机用户倾向于先看屏幕的中心. 在大多数智能手机上,这个中心也是他们最容易用拇指触摸的地方. 当用户触摸屏幕的最外角落时,触摸精度会降低.

瞄准屏幕中心的主要观看区域可以提高移动设备的可用性
用户查看和触摸屏幕中心的频率最高(从) 用户体验很重要).

当然,移动并不仅仅局限于手机. 用户在拿着平板电脑时仍然倾向于使用拇指,但是, 通常, 他们拿着设备的方式和拿着手机的方式不同. 而不是, 他们倾向于从侧面拿起平板电脑, 用双手, 用拇指触摸屏幕.

移动设备——用户手持平板电脑的典型方式
用户倾向于从侧面拿着平板电脑, 无论是纵向模式还是横向模式, 并使用两个拇指触摸屏幕(从 为触摸设计).

移动设备的7个指导原则

因为移动设备的大小和人们使用它们的方式不同, 没有一个“放之四海而皆准”的设计标准. 而, 这是设计师应该理解的一系列原则和概念,以提高手机可用性.

以下原则可以帮助设计师考虑触摸和人体工程学,使移动体验更加愉快和友好:

1. 了解你的用户

设计师在手机设计中可能犯的第一个错误是假设每个人都以相同的方式使用设备或使用相同的设备. 尽量避免这种假设.

下一个错误是假设所有现有的数据都来自先前的研究, 无论是二手资料还是先前进行的主要研究, 对用户来说是永远正确的吗. 用户改变, 技术变化, 用户的行为可以有很大的不同, 因此,持续的研究是跟上时代的关键.

在他的研究, 史蒂文Hoober提出了用户手持智能手机的六种方式, 但你的目标用户可能主要用一种不太常见的方式拿手机. 例如, 一款专为老年人记录药物信息的应用程序可能会有一些独特的要求. 这一特定人群可能会经历可能影响他们持有(和观看)移动设备方式的障碍——作为设计师,理解这一点很重要.

有几种获取用户信息的方法. 从网络分析开始是个不错的选择, 如果有的话, 并找出用户正在使用的设备. 另一个选择是调查用户的设备以及他们使用设备的活动. 体验抽样是在设定时间点捕捉用户的另一种选择. 最有力的研究是:观察用户在野外实际使用他们的设备.

关键结论:研究和观察用户的移动设备,以真正了解如何为他们设计.

2. 了解使用环境

这与…密切相关 了解你的用户,但它值得一提,因为它太重要了. 移动 字面意思是“能够自由移动”.“大多数人在使用手机应用程序时,不会坐着不动,也不会百分之百地专注于自己的设备. 他们经常在做其他事情——逛商店, 看电视, 锻炼, 坐在餐馆里, 或者开车.

在哪里 人们使用他们的设备和他们如何使用它们一样重要,这可能会影响 总体设计 和经验. 例如,跑步应用程序可能与银行应用程序有非常不同的用例.

了解用户在哪里以及如何与手机设计互动,以及他们在使用设备时还在做什么,都会有所帮助 设计师 创建适合用户的应用程序.

关键结论:用户在使用移动设备时可以做各种各样的事情,可能不会一心一意地关注一款应用.

3. 遵循经验法则

因为用户大多用拇指来浏览移动设备, 手机设计应该为拇指而不是鼠标点击而设计. 这意味着用户需要在屏幕上访问的所有内容都应该在拇指触手可及的范围内,而不需要他们不自然地伸展或扭曲双手.

这就是为什么响应式设计如此重要,为什么手机上的单列布局比多列布局更可取的原因之一. 使用多列会自动缩小屏幕空间,并将一些重要内容移出拇指区, 让用户更难访问.

响应式设计在手机可用性中扮演着重要角色
单列布局比多列布局更便于用户用拇指导航.

关键要点:确保关键内容和导航在拇指容易触及的范围内.

4. 内容优先

这一点显然植根于工业设计. 正如乔什·克拉克在 为触摸设计, 工业设计的一个主要原则是内容应该总是出现在控件之上,这样用户的手就不会挡住他们的视线.

在传统网页设计中, 导航首先出现在屏幕的顶部,而内容则位于其下方, 但是工业设计是相反的,手机设计也应该效仿.

因为用户查看和触摸屏幕的方式, 最重要的内容应该在屏幕的中央,其他关键的导航控件在底部.

在平板电脑市场, 这个建议有一点变化, 但它仍然专注于让用户通过用拇指触摸来导航,并防止手指挡住内容. 重要的内容和导航控件现在应该移动到屏幕的两侧.

关键要点:将最重要的内容放在屏幕中央,并将主要导航控件放在最适合设备的位置,并且手指不会遮挡内容的视图.

5. 待在目标上

无论什么设备,移动设备都需要为触摸设计. 但是触摸是不精确的. 没有两个用户的拇指大小完全相同,这也不像计算鼠标点击那么简单.

根据 乔什·克拉克他是UX机构的创始人 大媒介 他是《欧博体育app下载》的作者,在手机可用性中有一个数字非常重要:44.

最佳的触摸目标是7x7mm,换算成像素大约等于40. 但是为了解释不同的观看规模, 44像素是覆盖触摸区域和避免用户错误的理想空间.

触控目标尺寸对于手机可用性非常重要
底部的蓝色方块显示44像素(带有20像素的填充)作为触摸目标, 设计师应该考虑手机可用性的最低标准是什么.

让触控目标更大一点有助于覆盖用户与设备交互的上下文和环境, 通常不给予他们的全部注意力(见 了解使用环境).

关键结论:触摸是不精确和不可预测的. 扩大触摸目标区域以适应.

6. 模仿现实世界的手势和动作

让用户滑动, 翻转, 用适当的微互动来捏, 但是要注意物理定律, 或者更具体地说 运动定律. 请记住,设计的响应应该基于用户采取的行动.

例如, 如果用户只是在屏幕上刷卡, 卡片离开屏幕的运动应该看起来与施加的力成正比, 这意味着它可能不应该缓慢地爬行或飞得太快.

手机上的微互动让应用变得更有生命力,并基于触摸赋予它额外的背景. 有关改善微交互体验的更多信息, 阅读设计师Ondřej Dostál的文章, 通过微交互实现更好的用户体验.

关键要点:手势和互动让手机UI更自然, 但是不要过度.

7. 使用渐进披露

这意味着给用户正确的内容,以及权利 内容,在合适的时间,并在他们需要的时候获得更多的支持.

在实践中,这意味着 设计师 是否应该避免一次性向用户提供所有内容, 但同时, 最重要的信息不应该隐藏在导航栏后面. 确保用户的主要需求得到满足,主要内容得到展示, 然后添加控件,让用户可以更深入地挖掘.

新鲜的空气 App通过在主屏幕上只显示当前温度和降水,优雅直观地处理渐进式披露, 然后允许用户水平滚动(使用相关的手势和动作)查看每小时的天气信息.

新鲜的空气应用程序采用渐进式披露,首先向用户提供最重要的内容 新鲜的空气).


关键要点:只显示对用户最重要的内容,并在他们需要的时候给予他们找到其他内容的控制.

把它放在一起

手机设计比一个屏幕或一个设备更广泛、更复杂, 而且手机体验并不普遍. 通过遵循一些通用的可用性原则,并像工业设计师一样思考, 手机设计师可以坚持基本的人体工程学标准,使用户的移动体验舒适愉快, 不管他们用的是什么设备,也不管他们在哪里使用.

• • •

参考资料及进一步阅读

下面是本文中使用的资源列表和建议阅读,以了解更多关于提高移动可用性的信息.

Stephen Hoober在用户体验很重要上的文章涵盖了移动可用性设计背后的广泛研究和科学:

手指、触摸和人的设计(1

手指、触摸和人的设计(2

手指、触摸和人的设计(3

深入了解各种屏幕类型的移动可用性和设计, 读乔希·克拉克的书, 为触摸设计 以及他的概述 事件分离:触屏设计 演讲.

科学世界杂志 发表了一篇研究文章, 移动界面的启发式评估:一个新的检查表,其中有一份非常详细的PDF文件,是基于Jakob Nielsen的针对移动设备的指导方针 用户界面设计的10个可用性启发法.

了解基本知识

  • 手机可用性的目标是什么?

    手机可用性的设计与外观和行为方式一样重要. 人们用拇指与屏幕互动,使手机设计成为一种触觉体验. 移动设备的可用性包括用户舒适度和物理易用性,以及直观的视觉设计.

  • 触摸屏有哪些不同类型?

    在手机设计中没有放之四海而皆准的东西. 屏幕和体验因用户而异, 这使得在进入屏幕设计之前,研究和了解特定用户变得更加重要.

  • 为什么可用性如此重要?

    在手机设计中,可用性不仅仅是指界面的易用性. 手机可用性还包括用户在手持设备和使用应用程序时的身体舒适度. 使用起来不舒服、不自然的应用程序将被放弃.

聘请Toptal这方面的专家.
现在雇佣
克里斯汀·埃索尔多的头像
克里斯汀Esoldo

位于 墨尔本,维多利亚,澳大利亚

成员自 2016年3月14日

作者简介

Christine是一名专门从事数据管理的UX/UI设计师, 健康的产品, 以及为大型组织扩展用户体验团队. 她是CrowdStrike的用户体验和产品设计总监,并与戴尔等公司合作, 劳氏, 和好时公司.

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

以前的角色

高级用户体验经理

工作经验

18

以前在

戴尔

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

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

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

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

Toptal设计师

加入总冠军® 社区.