每个UI设计师都应该考虑的移动 UX 最佳实践

每天,越来越多的产品都是以移动为先设计的。原因很简单:我们生活在一个手机几乎随处移动的世界里。这并不总是常态。

如今,设计师们面临着在更小的屏幕上安装显示器通常显示的大量信息的挑战。最重要的是,设计师必须跟上市场上不断出现的许多不同的移动设备结构(即弯曲的屏幕、档次显示器等)。

不过,不要让这愚弄你以为为移动设计是不可能的。我已经做了研究,所以你不必这样做。通过我的经验和研究,我想出了一个简单的技巧和技术列表,以帮助您完成移动设计的下一个大项目。让我们直接跳进去:

保持主要操作的可访问性

确保主要操作的可访问性可以让尽可能多的人使用你的产品。保持“Design for Everyone”的理念,重要的是要考虑人们手持移动设备的不同方式。

人们手持移动设备的三种主要方式(如下图所示),设计师的目标就是据此设计主要动作,使它们位于用户手指的操作区域内。

考虑可读性

与PC端相比,移动设备的屏幕更小,因此在小型移动用户界面上容纳大量信息可能具有挑战性。只有良好的可读性与其他设计元素相结合,才能提供了出色的用户体验。

避免长滚动问题

在阅读大段文字时,长滚动是让用户集中注意力的好方法。然而研究表明,在其他情况下(例如:当提示用户完成任务时),用户滚动得越多,就越容易失去兴趣或感到沮丧。

在这种情况下,建议使用具有“点击展开”功能的卡片对复杂内容进行收纳,或通过将任务分解为几个屏幕,并使屏幕尽可能短。

字体类型和大小

不同的字体可以唤起用户不同的情感,同时提供易读性。字体选择不当也会破坏设计,这就是大多数设计师会在选择正确的字体上花费很多时间的原因。在谈到字体时,请记住以下几个重要提示:

1)字体选择一种适合多种尺寸和权重的字体,以保证每种尺寸的可读性和可用性。

2)字体大小:使用清晰的字体大小。苹果和谷歌推荐至少使用11号字体,这样用户可以在不缩放的情况下以正常的观看距离阅读。

3)颜色对比度:使用对比度检查来预防字体和背景之间产生的颜色问题。另外,应用60-30-10规则,该规则是保持颜色平衡的理想比例。

留出足够的间距和填充

小屏幕设计并不一定意味着你只能使用更小的文本或更少的空间。尽量不要让文本或其他元素重叠,通过增加行高或元素间距来提高易读性。

另外,还要记住,新技术每天都在涌现,作为一个设计师,紧跟潮流是很重要的。例如,弯曲的手机屏幕意味着将填充增加几个像素的内边距,以避免不必要的接触(建议设备使用大约16pt的最小填充)。

设计友好的触摸按钮

由于手机触摸控制很小,经常会发生意外的点击。为了避免这种痛点,需要创建至少10-12毫米(40px)的控件,这样用户就可以用手指精确地点击它们了。

为了帮助你理解这条建议的重要性,不妨想想你在手机中看到的广告。在广告中,按钮通常很小,不容易被发现,并且很难触及。当然,这些CTA的目的是防止我们都讨厌的意外接触。

保持标签栏干净清晰

标签栏是每个应用程序的一部分,这意味着你在设计它们的时候应该非常小心。现在不是发挥创造力的时候!

使用常见的导航条

尝试对导航菜单使用标准组件,如iOS选项卡栏或Android导航抽屉。不要试图重新发明一些新的导航条。用户熟悉这些常见模式,因此你的应用程序对他们来说将会更加直观。这也适用于在这些平台上设计其他不同的元素。

移动应用设计的最佳实践

一个屏幕,一个任务 减少用户使用成本

每一屏只做一个有价值的动作,为了唯一一件事情。切记不要超过一次行为动作。这样设计可以让APP更容易学习,更易于使用,并更容易添加或在必要时进行构建。

隐形用户界面 内容即为界面

专注于内容,删除不支持用户任务的元素。用户不再分散注意力,能更快的找到想要的内容。内容即为界面。

呼吸空间 使用留白来凸显重要内容

留白或者『负空间』指设计或页面布局的元素之间的空白空间,经常被忽略轻视。尽管很多设计师认为这是屏幕空间的浪费,但留白是移动应用设计的基本元素。

简化导览 使导览不言自明

帮助用户导览应该是每个移动应用的最高优先级。移动应用导览必须是可发现的,可访问的,占用屏幕空间少的。然而,移动应用的可访问属性是不容易做到的,由于小屏幕的限制和优先级的安排。

单手操作 使您的设计符合更大的屏幕

研究发现85%的被观察用户单手操作手机。下面的热成像图显示了在不同尺寸的IPhone上的大拇指的活动区域。我们能看到显示屏越大,可访问区域越小。

让应用快速出现 别让用户等待内容

竭尽可能的让APP快速反应。在后台做预处理,这样会看起来响应很快。后台操作有两个好处——对用户不可见,并且在用户实际请求之前发生。一个很好的例子是在Instagram上传照片,只要用户选好了照片,在分享之前就开始上传了。

后记

请记住,每次你完成设计时,无论你遵循了什么规则,或者它在你的眼中有多好,都应该执行可用性测试。希望本篇文章能够为大家带来一定的帮助,一定要将这些技巧应用实践,否则你很快就会忘记它们!

来源:(dribbble.com)

本页面最后更新于 2021年07月21日 10:35