移动用户体验的7个设计原则MySecretRainbow

Myexperiencewithdesigningformobile

多年来,我一直从事智能手机和平板电脑的移动端(包括Web和NativeApp)设计。作为SimpleSite设计团队的负责人,我参与了“基于浏览器的DIY网站移动设备生成器”的新版本设计。

通常,我们不会优先设计移动设备,但这个项目例外。我们整合了台式机设计经验、对移动用户的新旧认知,以及那些优秀作品中所遵循的普遍移动设计原则。

无论你从事Web还是NativeApp设计,这些原则均适用,但它们往往被模糊地理解,以至于大家忘记或忽视它们的存在。希望通过此文和其中的具体案例,帮助大家理解并应用于实践。

Principle#1:Striveforminimalism

我告诉每一个人要追求极简,当空间受限时,这是最重要的原则。将所有必要的UI元素放进界面,并保持有序和明了,或许是件棘手的事情。

对每个屏幕上的UI元素进行优先级排序时,需要非常谨慎。通常,我们容易掉入一个陷阱:将过多的信息打包进界面。试图为用户提供他们可能想要的一切,而最终只会让用户不知所措。

“完美不是无以复加,而是没有可以拿走的。”——AntoinedeSaint-Exupéry

请深刻洞察移动用户的需求。试着回答,他们最重要的任务是什么?哪些信息和功能是必不可少的?尽量保持每个界面仅有一个行动目标,可以借助过滤器、合理的默认值、高效的排序、易于访问的搜索功能以及渐进式的信息展示等解决方案来实现。

当优先级排列完成,就可以利用留白、简洁的字体以及其它视觉设计进一步简化。

可以看到,列表顶部设有搜索栏,两侧各有一个菜单,主页面没有使用常见的底部标签栏。此外,界面使用干净的单色设计。

Behance的极简设计同样值得借鉴,产品多运用留白设计,每个页面都有清晰的焦点。

Principle#2:Placeyourmostimportantelementsnearthebottomorcenter

StevenHoober[1]针对移动用户行为,做过一系列有趣的研究。当用户单手操作手机时,将最重要的UI控件放在其拇指可触及的范围内,这很关键。他还证明了用户多种握持手机的方式。([1]胡伯(StevenHoober),从事交互设计工作超过15年,其中涉及各种行业、各种用户,涉足手机界面交互设计10年,包括设计文档的处理、规划设计原则和设计模式,出版《移动应用界面设计》。)

此外,他还表明,无论是阅读或内容互动,移动用户更喜欢垂直居中的信息布局。

“我做了一项研究,让用户将屏幕中的内容移动到他们喜欢的位置。事实证明。一旦将内容放置到屏幕中央,用户就会想要选择它。”——StevenHoober

如有必要,可以考虑将一些重要的信息居中,但不要特意将页脚菜单变成底部标签栏。

“当有选择的时候,移动用户更喜欢在屏幕中央阅读和交互。”

底部标签栏常见于各类App,这样的设计是有充分理由的。除此之外,音乐播放器设计是一个很好的案例,它的主控件就位于屏幕下半部分,再比如播客、有声读物等应用。例如Audible就是很好的有声读物设计案例。

Fitbit是一款记录器产品,其主要功能是向用户展示数据信息。因此,它将核心信息放置于屏幕中心,便于用户浏览。

Principle#3:Reducetheneedfortyping

触屏键盘在许多方面都是一个很棒的发明,但无法回避的是,太长地信息输入会导致用户体验不佳,并且移动设备的按键较小,与笔记本电脑或外接键盘的机械运动相比,反馈效果也更差。

某些配件可以将笔记本电脑或台式机的优势带入移动设备。例如,在平板电脑上使用外接键盘、鼠标或者手写笔,用户的行为习惯会更接近PC端。不过,对于部分用户来说,情况可能并非如此。

这只是几个常见的设计方法,当你习惯反问“用户能否以更少的输入完成任务”时,便会发现更多的问题。

Principle#4:Increasethesizeofyourtaptargets

在笔记本电脑或台式机上,用户可以通过光标锁定屏幕上最小的目标,但在手机屏幕上要困难得多。手指不仅比光标大很多,也不够精确,点击时会覆盖住目标。

根据原则2,在理想状况下,行动点的大小取决于它在屏幕中的位置。但是,在可能的情况下,把操作区域设计的大一些是永远不会错的。遵循iOS或Android的设计指南,按钮尺寸不能小于44*44px和48*48px。

实现该原则最明显的方法是增加UI控件尺寸,并且扩大元素周围的留白空间。这样不仅可以减少误操作,还可以提升界面的简洁性。此外,留白还可以增加操作区域的视觉面积,可以应用于屏幕上的所有UI控件,尤其是不易增加面积的小控件。

你或许不希望将底部标签栏的图标和文本设计得太大,那么只需要增加元素的可点击范围(即热区,包含可见元素和不可见的点击区域,但请保持与开发的沟通)——在不干扰其他UI元素的情况下使其尽可能大。

如果按照上述建议进行调整,设计将成为一种错误预防,而非错误处理。当然,即使是这样误操作也不可能完全避免。请记牢这一点,确保误操作时不会产生灾难性事件。

社交AppMeetup就是很好的案例,当用户查看聚会群组时,屏幕中间有个醒目的大按钮,便于用户轻松快捷的操作。

Principle#5:Prioritizelegibility

易读性是所有平台设计的另一个重要原则。设计师需要始终遵循字号、行高、字体等通用准则。在移动设备中,字体不宜小于16pt,否则会损害一些用户的可读性。

不过,从可用性的角度来看,移动设备更具挑战的正是那些“不理想”的使用环境——用户可能是在旅途中、繁忙的街道或者强光状态下使用产品。

有时候,我和大家一样喜欢在白色背景上使用字重较轻、色值#9A9A9A的字体,这样的设计也得到了大量的支持和喜欢。但如果你想要好的用户体验,设计不能仅仅满足阳光充足的“理想条件”,还需要将易读性置于审美之上。

Principle#6:Giveimmediate—andgood(!)—feedback

Principle#7:Enableeasyerrorrecovery

即使你很好地遵循了上述原则,又或者你是一个很棒的设计师,用户错误也是必然会发生的。即使这些错误你有责任帮助用户避免,但你永远无法完全消除它们。

此外,总有一些错误风险会超出你和用户的控制,其中一些问题在移动设备上更容易发生,例如网络不佳而导致的页面无法加载。

提到“撤销”功能,你可能会想起微软的Word、Excel、PowerPoint以及谷歌的同类工具。请注意,在GoogleSheetsApp中,“撤销”始终是用户可优先访问的控件之一,并一直处于顶部菜单。

通常产品中出现列表时,都支持用户通过左右滑动来执行某些操作。Airmail电子邮件列表的操作有方向和长度差异,并且可以立即执行。这对于需要加快工作流程的高级用户来说,非常有用,但从经验上看,它也容易出错。

当删除操作是向左滑动时,“撤销移动到垃圾箱”按钮可能会派上用场。包括发送电子邮件时,也需要显示类似的撤销按钮。在各类App中,删除、保存、筛选都是很常见的功能,这些功能都能帮用户从错误中恢复。

Keytakeaways

基本的、通用的用户体验设计实践需要满足各类设备的差异化需求。不过,由于存在小屏幕、触屏交互、复杂的使用环境以及较差的网络连接等因素,一些设计原则在移动设备上尤为重要。

为移动端设计界面时,甚至比笔记本和台式机更需要遵循极简原则。将重要的元素放在界面中间,以便用户可以轻松访问,并最大限度地减少所需的文本输入。

增加操作区域,帮助用户更快地、无缝衔接地达成目标,并优先考虑易读性,以应对用户在外部坏境可能遇到的问题。

你可能需要1秒钟来加载所请求的内容或页面,但用户很快会失去耐心,并怀疑哪里出了问题。因此,要对用户执行的任何操作提供及时的、正向的反馈。

最后,当所有原则都失败时,至少要确保用户可以轻松从错误中恢复。要记得,无论如何错误都是无法避免的,帮助你的用户快速回到正轨,否则你可能会永远失去他们。

THE END
1.我校《以用户为中心的智慧校园服务平台设计与实现》入选江苏高校...为深入推进教育数字化,建设高质量信息化,我校建立了以“体制改革、机制创新、服务引领”为核心的具有南大特色的信息化建设模式。在学校党委行政的高度重视下、在各院系部门大力支持下,经过三年多的建设,打造了以PC端网上办事服务大厅、移动端南京大学APP及南京大学微信信息门户、自助打印服务为载体的智慧南大服务平台。https://oi.nju.edu.cn/d2/0f/c21414a643599/page.htm
2.网络中心当今社会,以互联网、大数据、云计算、物联网、人工智能、5G、VR/AR、区块链等信息技术为代表的科技革命对人类生活、工作、学习等各个方面产生了巨大的影响,在教育领域数字校园已成为办学的基本条件,特别是职业院校数字校园已成为支撑教育教学、沟通校企合作、促进师生发展的必需环境。 http://www.xtzy.com/wlzx/detail.jsp?public_id=153330
3.网址导航ETU 艺土界面设计 Eico Design Isaruid 伊飒尔 UPA 中国用户体验研究中心 UEtime 咨询团队 Understand Usability 优势可用性 Apogee Human Factors International IDEO Design Semantic Dtudios The Digital Networking Agency The Usability Professionals' Association 163门户UED团队 阿里巴巴UED团队 阿里巴巴中国站UED团队 阿...https://ucdchina.com/123/
4.人类高质量产品设计师的5大基次1)设计过程 但是,我所说的这个过程是什么?有许多设计过程模型,这里有一些例子: 以用户为中心的设计 设计思考 谷歌设计冲刺 但是不要担心,在核心部分,它们是非常相似的。为了概述设计过程的核心是什么,我将研究以用户为中心的设计过程。 2)以用户为中心的设计 ...https://www.niaogebiji.com/article-465438-1.html
5.UI设计UI盒子UI盒子UI-专注UI设计,以用户体验为中心的设计,分享精彩的UI设计、交互设计、用户研究作品及相关UI理论知识。https://www.boxui.com/
6.破茧成蝶2:以产品为中心的设计革命epub高清电子书副标题: 以产品为中心的设计革命 出版年: 2018-8-1 内容简介 互联网下半场来袭,从业者需要做出怎样的变化,以应对风云突变的大环境呢?本书主要讲述“用户导向”的设计师,与“业绩导向”的产品经理,在瞬息万变的互联网新时代如何顺势转型成“以产品价值为中心”的产品设计师的过程;作者结合数年来从事互联网产品架...http://www.zuopm.com/pm/805.html
1.以用户为中心的网页设计方法论(含案例)通过站在用户角度真正理解他们为什么进行设计,达到网站建设项目团队团结一致,实现共同的目标目的;通过在整个项目中与用户一起验证概念和想法,减少了项目失败的风险;项目团队将精力集中在针对用户需求的少量关键功能上。 网页设计中以用户为中心的设计案例 上图是Carters.com,一个购买童装的网站。在网站导航位置上可通过孩...https://www.cifnews.com/article/74032/
2.B端设计基础:帮你快速掌握工作台设计作为企业级应用的重要组成部分,B端工作台设计也越来越受到关注。本文将从3个方面,为你完整解析B端工作台设计,一起来看看吧。 1. B端工作台设计原则 B端工作台设计应该满足以下几个原则: 1.1 以用户为中心 B端工作台设计应该围绕用户的需求和行为进行,尽可能减少用户的操作次数和复杂度。 Pixso资源社区的 Arco ...https://pixso.cn/designskills/b-end-workbench-design/
3.万字长文:拆解银行数智运营之困!对业务增长产生裨益的数智运营系统,也必然是遵照以用户为中心设计,能够在平台上追踪用户全生命周期的动作,实现统一化的用户运营、营销、管理,实现价值最大化。 (二) 经营思路:回到用户为中心,重构人货场 “流量困境”一直以来都是银行业务发展所困扰之处,其本质直指触客、获客、活客、留客等方面的重塑。https://www.51cto.com/article/770404.html
4.人机交互界面发展历程与未来从早期的命令行界面到现代的图形用户界面,再到未来的智能设备和物联网技术,人机交互界面在各个领域的应用不断扩展。通过认知心理学、人因工程学和以用户为中心的设计原则,HCI研究和实践为我们创造了更加直观、高效和愉快的技术体验。飞书作为一个成功的人机交互界面设计案例,展示了如何通过优化人机交互界面设计,提高...https://www.feishu.cn/content/human-computer-interaction-interface
5.“拯救”降险,麦肯锡提出这三大突围路径保险频道以风险管理为中心,构建精细化保险营运体系 风险保障能力不足是中国商业健康险面临的一大紧迫挑战。最直观的体现就是市场主流产品的“一刀切”模式,将所有带病、非标人群排除在保障范围之外。 对险企而言,加强风险管理能力建设,有效提升保险产品设计的科学性和精准性,并构建端到端精细化营运体系,是打造未来核心竞争力的...https://insurance.hexun.com/2022-06-22/206206928.html
6.「用户思维4.0」(上):4个阶段,4个新认知,用户洞察3大方法需要注意的是,大部分方法论都将「用户思维」简单带过,好像大家都知道什么是「用户思维」一样;或者直接大谈如何洞察用户需求,好像大家早已形成了「以用户为中心」的认知。 其实,都想多了,「用户思维」的「认知和认可」哪有那么简单。 今天,品牌猿带你接近「用户思维」,升级「用户思维」,还期望以「用户思维4.0」创...https://www.digitaling.com/articles/807148.html
7.十本关于用户体验设计书单推荐全书分成3篇:第1篇描述了“目标导向设计”,详细讨论了用户和设计的过程及思想;第2篇讲的是交互设计的原则,可以帮助您在较高层次上去把握设计;第3篇则介绍具体的细节方面的界面设计原则。 用户体验要素:以用户为中心的产品设计 作者:Jesse James Garrett https://www.yuwenmi.com/lizhi/shuji/291664.html
8.以用户为中心的前端设计案例剖析WEB前端设计的最终目标是打造用户喜爱的产品,属于产品设计的范畴。所以一切设计要以用户为出发点,追求最佳的用户体验。 一、banner的设计 在WEB项目设计中,我们经常会有banner设计需求,一般而言首屏Banner及其相关区域也是整个网页设计中非常重要的部分。 优化前: ...https://blog.csdn.net/weixin_30376509/article/details/94889127