移动布局

为什么移动和桌面的布局不同？有几个原因。最明显的当然是尺寸。在大屏幕上看起来不错的东西在小屏幕上通常不会以相同的方式进行转换。

另一个原因是人们使用设备的方式，这在桌面设备和移动设备之间存在很大差异。大多数人在室内使用台式机并进行更长时间的交互。另一方面，智能手机无处不在，而且经常在旅途中使用。移动用户也更喜欢快速会话。设置闹钟、检查电子邮件或回复消息等任务通常不会超过几秒钟。

最后，输入机制不同。使用触摸屏时，人们会使用手指和拇指——它们比光标占用更多的空间，而且内容模糊不清。

这三个因素决定了移动布局设计的关键原则。

尽量减少杂乱

最大限度地减少移动界面中的混乱 ，使用户可以专注于完成他们正在处理的任务。通过立即为用户提供他们想要的东西来证明您的应用程序的价值。避免用不必要的按钮、图像或文本分散他们的注意力。

一个简单的经验法则是 每个屏幕使用一个主要操作。您为应用程序设计的每个屏幕都应支持对使用它的人具有实际价值的单一操作。

例如，Airbnb 知道其用户的目标是预订住宿。带有搜索字段的主屏幕会询问用户：“你要去哪里？” 不会用其他元素分散他们的注意力。体验或灵感等附加功能位于首屏下方，而标签栏提供导航选项

保持导航简单明了

好的导航是简单、清晰、直接的。这在移动设备上至关重要，用户希望在尽可能短的时间内完成他们的任务。

什么可以改善导航？

• 遵循 3-click 规则。这意味着用户应该能够通过少于 3 次点击访问您应用的任何部分。这样一来，他们就可以轻松地在您的应用程序中保留一份心智地图。

• 显示当前页面的名称。为了成功导航，用户应该始终能够回答“我在哪里？”这个问题。

• 将大任务分解为简单的步骤，以最大程度地减少认知负担。例如，与其提供冗长的结帐表格，不如要求用户在多个屏幕上填写信息：他们的送货地址、账单信息和订单确认信息都可以在不同的屏幕上。

• 强调重要信息。您可以通过增加字体大小、添加空白空间并确保元素的颜色与背景颜色形成鲜明对比来做到这一点。

使导航清晰可预测

直观导航的关键在于其 可预测性。你怎么能做到这一点？

• 使用常见的导航模式。例如，用户知道图像左右的箭头和下方的指示符表示可滑动的轮播，而带有放大镜图标的输入通常是搜索栏。

• 避免编造自己的语言或改变常用符号的功能。用户希望屏幕右上角的 X 关闭窗口——不要将 X 用作任何其他操作的符号。

• 确保全局导航控件始终位于应用程序每个部分的同一区域。

确保文本可读性 

移动排版的关键是可读性。如果用户无法阅读您的内容，那么首先提供内容是没有意义的。力求在可读性和节省空间之间取得平衡。

什么可以提高可读性？

• 将正文文本大小设置为至少 16 像素（或 11 磅），以便在不缩放的典型观看距离下清晰易读。较小的文本将更难阅读，而较大的字体将导致尴尬的中断和连字符，从而增加用户的认知负担。

• 当谈到移动设备上的行长时，目标是每行 30-40 个字符。

• 增加行高或字母间距。它不仅会增加可读性，还会使您的界面更具吸引力。

• 避免使用显示字体，因为它们很难以小尺寸阅读。

使用更高的对比度

创建 足够的色彩对比 在移动设计中至关重要。与台式机不同，智能手机和平板电脑更常在户外或光线不足的情况下使用：例如在飞机、火车或公共汽车上。作为设计师，我们应该确保 UI 在所有这些设置中都具有清晰的可见性。

虽然 Web 内容可访问性指南主要是针对台式机编写的，但它们的颜色对比建议仍然适用于移动设备。他们建议小文本的对比度至少为 4.5:1，大文本的对比度为 3:1。

对于图标，对比度应为 3:1 或更高。详细参考 WCAG 颜色对比建议。

考虑手的位置

在创建移动布局时，我们应该考虑用户如何与他们的设备交互——尤其是他们的手的位置。人们在旅途中使用智能手机——走路、站立、运输等时。

研究表明，人们拿着手机的方式有很多种，同时也经常移动。但是，他们更喜欢查看和触摸屏幕中心。另一个事实是手不是透明的——它们会遮挡界面。

这在布局方面意味着什么？

将主要内容放置在屏幕中央，将次要操作放置在顶部和底部边缘，并将第三功能隐藏在菜单后面。

允许用户将内容滚动到视口的中间。您可以通过在页面底部提供额外空间来做到这一点。

角落的触摸目标应大于屏幕中心的触摸目标。瞄准中心触摸目标至少 7 毫米，角目标至少 12 毫米。

使可选项目足够大，以清楚地指示成功点击。人们应该能够看到他们正在点击什么。

创造合理的利润。大多数用户在一边做手势以滚动，同时避免遮挡内容。

最小化输入

在移动设备上打字是一个缓慢且容易出错的过程。它通常需要两只手——数据显示，41% 的用户用双手握住手机，并在打字时用拇指轻敲。

我们可以做些什么来尽量减少在移动设备上手动输入的需要？

• 通过删除不必要的字段或保持它们是可选的，使表单保持简短和简单。

• 在适当的情况下使用自动完成和个性化数据。例如，要求用户分享他们的位置而不是输入位置。

• 使用手机的功能自动填写字段。例如，允许用户通过将信用卡放在相机前来添加支付信息。

• 添加“记住我”选项以供将来使用。

• 让用户在注册之前试用您的应用。仅在关键时才要求注册并提供信用卡信息。

• 提供最近的搜索历史。

• 显示每种数据类型的最佳键盘变体。例如，为电话号码提供数字小键盘。

保持与桌面版本一致

虽然移动和桌面布局会有所不同，但它们应该感觉是同一个产品。这将有助于定位用户并创造无缝体验。

保持跨设备的导航和视觉元素一致。按钮、输入字段和其他应用程序元素应基于您的品牌形象。不要更改调色板或其他基本功能以避免混淆。

确保您的用户可以在大多数情况下预测您的应用程序的工作方式和外观。移动用户没有悬停和使用光标来帮助他们猜测行为结果的优势。精心设计所有元素，以帮助用户认识到他们的目的。

以上内容为转载