移动信息和容器组件

设计移动界面的主要挑战之一是找到正确的 UI 元素，例如移动信息和容器组件，以便在不破坏层次结构或造成额外障碍的情况下收集和传递信息。

有限的屏幕空间是主要挑战之一，但移动设计师还应牢记许多其他事项。例如，用户经常在旅途中与他们的移动设备交互，通常只有一只手空闲。这对设计师说了什么？界面应该易于扫描，不包含令人分心的杂乱，并且可以舒适地使用拇指进行交互。

严酷的现实是，当移动应用程序在第一次会议期间未能展示满足其需求的能力时，用户将毫不留情。如果您的应用程序没有给人留下用户友好、直观、实用且令人愉悦的产品印象，那么它最终将成为仅使用过一次的应用程序的 25%。

图标

图标是想法、对象或动作的隐喻、图形表示，几乎是移动应用程序设计的标准部分。用户在导航菜单、表单、按钮、输入中遇到它们——你可以说它。然而，它们的审美作用是次要的。

除了使界面更具视觉吸引力之外，图标还具有其他作用：

• 帮助用户更快地识别动作和完成任务，

• 尽量减少屏幕上的混乱（尤其是与移动界面相关），

• 消除语言障碍，

• 提升品牌辨识度。

许多设计师希望为他们的产品创建独特的图标集。但是，如果人们不能一眼识别图标的含义，他们在完成任务时就会放慢速度并感到沮丧。

坚持使用公认的、熟悉的图标，避免过度设计。细节越少，用户识别符号并继续前进的速度就越快。

附上带有标签的图标，以防止不熟悉该符号的用户混淆。

推送通知

推送通知 是出现在移动屏幕上的弹出消息，用于宣布应该与用户相关的事件。它们可能是您早上睁开眼睛拿起手机后首先看到的东西。

推送通知是旨在吸引用户并提高应用打开率的主要移动属性之一。此外，他们的主要目标是吸引用户的注意力并让他们想要回到应用程序。

平均而言，美国公民的手机上安装了 20 多个应用程序，这会导致数十条通知。如果它们不吸引人、不个性化且不及时，用户会忽略它们或完全关闭它们而不眨眼。

什么可以使推送通知有意义？

促进更新、销售和新内容

诸如“免费”、“新”、“销售”、“最后机会”、“成为第一个”等词会触发用户的注意力并鼓励他们查看为他们提供价值的通知。

避免营销语言

不要使用营销术语，想象你正在和朋友交谈，并坚持轻松、诙谐的语言。如果适合您的目标受众，可以使用笑话。

使用位置

如果用户允许应用程序跟踪他们的位置，请巧妙地使用它并根据用户的当前位置发送通知。例如，当用户在一个新的城镇或国家或在相关的商店或餐厅附近行走时，让他们知道探索新地方的机会。

不要过度

用户阻止来自应用程序的所有通知的最常见原因是他们的频率。每天推送通知的数量因行业而异，没有通用限制。了解用户可以处理的适当频率的最佳方法是探索他们的需求。您甚至可以在他们授予应用程序发送通知的权限后立即询问他们。

时机很重要

您的用户可能生活在不同的时区，并且不想在他们睡着时收到通知。仅在它们真正重要并需要立即关注时才发送紧急通知。在大多数情况下，应用程序应牢记用户的时区。

应用内消息

人们经常将应用内消息 与推送通知混淆 。与推送通知一样，它们可以通知用户有关更新、销售、折扣和紧急新闻的信息。但是当用户没有积极使用该应用程序时会出现推送通知，并且如果它们变得过于打扰，可以将其静音。当用户在应用程序中时，应用程序内消息会出现，并且通常没有关闭它们的选项。

此外，设计师在创建应用内消息时拥有更多自由。他们可以添加媒体、使用品牌颜色或使用字体。它有助于提升品牌形象并提高用户参与度。

当应用内消息针对特定用户群时，它们看起来更相关，并让用户有更多的理由回来。您可以根据应用内活动、购买活动、位置、语言、跨渠道数据等不同类型的数据来划分受众。

应用内消息也可以作为引导用户通过应用导航和常用路径的一部分。他们可以推广新功能或庆祝用户的里程碑（例如，获得奖金、在游戏中达到特定级别或成为 Pro 用户）。

对话框

用户可以在界面中遇到两种类型的 对话框 ——模态的和非模态的。非模态对话框的出现不会禁用内容，用户可以在对话框保持打开状态时继续他们的流程（有时，他们甚至可以移动或最小化窗口）。

相反，模态对话框就像饥饿的新生婴儿——它们让你停止做你正在做的任何事情，并立即要求你全神贯注。模态对话框出现在主要内容的顶部，在用户关闭、确认或采取所需操作之前将其阻止。

模态对话会带来额外的认知负担，会在用户的任务中打断他们。人们可以忘记他们以前在做什么。移动模式可以以弹出窗口、仅部分遮挡屏幕的覆盖或全屏对话框的形式出现。

尽管矛盾且具有侵入性，但模态通常是解决问题和预防灾难的唯一方法。当用户可能会丢失他们的工作或操作可能会产生破坏性的、不可逆转的后果时，它们在传递一些关键信息方面可能会非常有帮助。

或者，您可以考虑使用侵入性较小的 UI 组件来通知用户不太紧迫的事情。例如，Snackbars 自动消失，而横幅会一直保留，直到用户将其关闭，或者如果出现的原因得到解决，横幅将自动消失。

当模态对话框是唯一的解决方案时，请确保其操作按钮位于拇指区域内并且易于触及。

客户服务聊天

客户服务聊天提供了一种在网站上联系客户服务的快速替代方式。虽然有些人可能认为这是多余的细节，但聊天有一些关键优势：

• 聊天不如电话那么私人化，并且需要更少的情感参与。

• 有些人（尤其是非母语人士）以书面形式更好地表达他们的问题。聊天允许他们在发送消息之前查看和编辑消息。

• 人们可以在聊天时进行多任务处理，并在等待聊天代表响应时执行其他活动。

• 聊天不那么紧急。用户可以花时间考虑信息并更彻底地回复。

• 聊天消息通常会保存并通过电子邮件发送给用户，以便他们稍后可以在需要时参考。

不幸的是，设计师经常低估聊天的重要性。在移动设备上设计聊天时可能遇到的挑战之一是它们的位置。

聊天链接或按钮应放置在用户期望的位置。页面右下角的浮动按钮非常引人注目，但它们通常会阻止基本内容，例如搜索结果、过滤器，或者更糟糕的是电子商务网站上的结帐按钮。因此，我们建议避免在移动设备上使用浮动聊天按钮。

相反，您可以将它们放在页脚、设置页面底部、联系我们页面或汉堡菜单下的导航菜单内。确保标签清晰明了，这样用户就无需猜测此链接是否会将他们带到支持聊天室。

在聊天中包含消息“经理/代理正在输入...”以安抚用户并帮助他们在等待回复时更加耐心。

启动画面

应用程序 启动屏幕 是用户在应用程序在后台加载时看到的介绍性屏幕。它们通常包含公司徽标，并可能伴随一些文本或更多图像，以增强用户的第一印象。

如果现代移动应用程序通常加载速度很快，您可能想知道为什么应用程序需要启动画面。这里有几个原因：

欢迎用户

启动画面为应用程序提供了向其用户打招呼并鼓励他们探索应用程序的机会。

营造合适的心情

品牌颜色、公司徽标和排版有助于营造积极的第一印象，并为应用程序的使用营造合适的氛围。

介绍品牌

启动画面是用户在打开应用程序时首先看到的内容。这是一个很好的机会，通过添加一个简短的动画或活泼、诙谐的文字来增强品牌的价值来介绍品牌的身份。

理想情况下，启动画面会持续几秒钟，因此请避免使用用户无法快速掌握的过多文本或详细图像。

折叠面板

Accordions 是 UI 组件，其中包含折叠的内容块堆栈，当您单击它们时会显示隐藏的内容。它们是 渐进式披露 技术的经典示例，允许设计师逐步揭示复杂信息并减少认知负担。因此，一个好的界面首先会显示最基本和最常见的功能或选项，然后如果用户请求它们，则提供更大的一组更高级和复杂的选项。

帮助中心和常见问题页面通常包含手风琴 - 显示多个部分的完美解决方案，其中包含可能仅与特定用户组相关的信息。

Accordions 似乎是移动设备节省空间、减少页面混乱并简要告知用户页面内容的完美解决方案。但是，它们也可能导致迷失方向并需要过多的滚动。

在为移动设备设计手风琴时，请考虑用户将如何回到之前的状态。例如，您可以通过向下推其他类别来修复手风琴标题并扩展过滤器。因此，用户的眼睛不会跳跃，他们会看到自己在哪里。它还允许他们通过单击粘性标题来关闭手风琴。

卡片

卡片 是 UI 组件，旨在对不同但相关的内容进行分组，以节省空间并减少页面上的视觉混乱。虽然每张卡片都包含不同的元素，但它们都与一个概念相关联。

卡片可能包含也可能不包含：

• 缩略图，

• 标题，

• 次要文字，

• 标签，

• 号召性用语按钮，

• 其他重要信息。

卡片布局缺乏层次结构，这意味着页面上的所有卡片都是平等的。它使它们成为为浏览内容而不是搜索而定制的界面的完美布局。当用户搜索时，他们假设列表顶部的项目是最相关的。

此外，卡片比文本列表占用更多空间，因此需要更多滚动。当用户搜索时，频繁的滚动需要更多的脑力劳动——用户需要使用更多的短期记忆，而不是在单个视图中看到更多的项目。

Tumblr、Pinterest 和 Instagram 是卡片用于旨在娱乐观众并让他们滚动的应用程序的完美示例。

使用卡片来吸引用户点击卡片并探索更多内容。

产品页面

移动电子商务发展迅速。在早期，用户主要使用智能手机浏览而不是购买。不过，情况发生了巨大变化。统计数据显示，全球 73% 的零售电子商务销售额来自移动客户。

这意味着移动电子商务网站和应用程序应该准备好提供流畅的移动购物体验，最大限度地减少摩擦和焦虑。

精心设计的产品页面可以帮助鼓励用户将商品放入购物车并进行结账。但是什么是好的产品页面？

主要产品详细信息

产品详细信息通常可以帮助用户决定是否要购买该产品。确保产品名称、价格、尺寸选择、高质量图像、平均星级以及评论/订单数量等内容在不滚动的情况下很容易被注意到。

清晰且相关的图像

如果图像太小、太模糊或没有提供足够的上下文，那么它们可能会成为一个巨大的破坏者。高质量是必须的，但您还应该考虑启用放大产品的高分辨率细节。

二级产品详情

产品页面还应包括补充信息，例如功能、优势和成分，以帮助人们做出购买决定。

产品页面通常包含大量信息，如果没有适当的层次结构，这些信息会使用户不知所措。依靠排版（字体大小、粗细、字体）和空白来提高可读性。

确保 CTA 按钮清晰可见，无需用户滚动页面或搜索“添加到购物车”按钮。

分隔线

鉴于移动屏幕空间不足，维护层次结构并帮助用户有效地扫描页面并非易事。分隔线是设计师用来分隔不相关内容并将内容分组到单个类别中的首选工具。

传统的分隔线指的是水平线，当您需要更清晰的分隔时，它们可能是全出血的或插入的。当您需要将内容划分为子类别时，后者在组内使用。垂直线的缺点是它们会产生视觉噪音并占用空间。

分解内容的替代方法包括：

空白空间

白色空间不仅优雅地分隔元素，而且使它们脱颖而出，在它们周围创造出喘息的空间。它还有助于使界面更清洁、更易扫描和更美观。

彩色背景

不同内容组的对比背景是强调划分的另一种有效方式。确保背景和文本之间的对比度足够有效，不会给用户阅读带来麻烦。

阴影和高程

阴影和立面增加了界面的深度，使元素在页面的背景和其他部分中脱颖而出。

容器

元素周围的容器也创造了强烈的视觉分离。根据共同区域的原则，它们边界之外的元素被认为是不相关的。

轮播图

像手风琴一样， 移动设备上的轮播 具有在更小的空间中容纳大量内容的优势。同时，它们的特点是低可发现性和顺序访问。这种类型的访问意味着用户应该在轮播中一一浏览所有项目以查看最后一项。

此外，并非所有移动轮播都允许滑动，这使得与它们的交互变得复杂。设计师可以做些什么来克服这些障碍？

将轮播限制为 3-5 个项目

轮播中较少数量的项目增加了它的可发现性，因此用户在到达最后一个项目之前不会失去兴趣。

优先项目

确保最相关的元素首先吸引用户的注意力并让他们参与进来。

添加视觉指标

箭头和圆点是指示轮播并帮助用户在更短的时间内发现它的常用工具。

创造连续性的错觉

显示图像或文本的一半也表明还有更多内容需要滑动和发现。虽然点可能会被忽视，但这种类型的能指很难被忽视。

允许用户滑动

滑动是用户期望的一种非常熟悉的手势，假设有多个项目要发现。不能这样做可能会导致巨大的失望。

包括相关内容

在轮播中包含不相关的图像和文本会产生不必要的认知负担，并阻止用户预测他们看到的内容。

Snackbars

Snackbars 是在屏幕上短时间出现的非模态通知，通知用户系统状态更新或更改。与模态对话框相比，snackbars 不会中断用户流程。它们可以通过屏幕外滑动或自动消失（最少 4 到最多 10 秒后）或在其他地方的用户交互后自动消失。Snackbars 还可以包含其他操作，例如撤消或取消。

在视觉上，snackbars 代表一个矩形容器，里面有一个短文本标签和可选操作。Snackbars 应该具有足够的可读性和显着性，以便用户在需要撤消操作时不会错过它们，以免为时已晚。最好的方法是使用对比鲜明的文本和背景颜色。

此外，确保Snackbars出现在屏幕底部，并且不会阻止任何导航组件。

多个Snackbars应该彼此跟随，而不是彼此堆叠并弄乱屏幕。

以上内容为转载