提升UX的移动设计技术

在过去五年中,智能手机的使用量已经翻了一番,今年估计有38亿用户,这已经不是什么秘密了。这清楚地告诉我们人们的注意力在哪里以及移动Web设计师对改善用户体验的重要性。

近年来,各种规模的公司都采用了大量的Web设计实验。这些变化包括趋势如臭名昭著的视差滚动,非传统的布局,以及与暗模式改进的可接近性。但是,如果我们愿意突破趋势,仍然有许多途径需要探索。

为了使这些创意源源不断,让我们看一些与导航和确认对话框,等待体验和滑动动画有关的隐藏设计瑰宝。尽管这些解决方案大多是非常规的,但重点并不是要为自己着想。设计解决方案必须以可访问性和可用性支柱来构建,但是可以根据您最终的用户交互和体验目标来完善设计解决方案。

因此,让我们将这些优雅的,另辟蹊径的设计解决方案引起关注。

重新思考导航

重新思考导航

将导航菜单固定在底部的更改已成为手持设备的游戏规则改变者,因为它允许更自然的拇指控制导航。但是随着智能手机的屏幕越来越宽,拇指的触角也越来越受到限制。因此,我们早就该采用新的移动设计解决方案了,该解决方案仅需拇指即可轻松访问。

解决此问题的一些创新方法结合了优雅的设计和功能。让我们看几个例子。

自然百科全书

《自然百科全书》对于年轻人和成年人都是很好的学习资源。它具有交互式的信息图表和即时的插图,但这并不是抓住我们好奇心的部分。

1

除了我们已经在其他移动应用中习惯的所有刷卡功能之外,还有一个很漂亮的功能,可让您通过滚动滚轮来更改显示的信息。您还可以通过简单地滚动其他方式来访问先前显示的信息。

尽管实现了操作轮以简化对信息的访问,但也可以将其用于在屏幕之间进行导航。由于您现在可以轻松地向左或向右滑动以进行导航,因此这可能会解决拇指触及屏幕左右边缘的限制。

V for Wiki

您已经可以在手机的浏览器中访问Wikipedia。但是,V for Wiki通过呈现内容的优雅风格使其变得更加易于访问。它具有精美的世界地图,可立即弹出与您正在浏览的区域有关的信息。

73477

尽管交互式地图使浏览变得更加有趣,但这并不是我们最先注意到的功能。

如果您查看导航,则在指南的顶部将看到到各种地标的交互线,并且可以在位置之间水平滚动。这是一种设计精美的备用菜单导航方式,因为您可以毫不费力地使用拇指。

这种方法可以作为滚动导航菜单的灵感来源,在该菜单中,客户可以通过滚动滚轮将最左边或最右边的菜单项拉近。

艾达

Ada是初创公司Ada Health的应用程序,该应用程序旨在通过现代解决方案(例如AI,视频通话和交互式设计)彻底改变我们与医生接洽的方式。我们所有人都经历过在Google上寻找症状建议的棘手问题,因此直接获得可靠的信息真是天赐之物。

1

除了应用程序的外观简洁外,从一开始就很清楚,它的设计目的是不费吹灰之力,因为导航按钮位于右下角,并在右侧的侧栏中打开菜单。此外,所有可操作的元素都在拇指可及的范围内,因此用户通常只需要单击底部或右侧边栏即可到达他们想要去的地方。

那么,Ada从一开始就是内置在应用程序概念中的固体导航的另一个示例。导航应用程序的体验让人感到自然且可访问。

大修确认对话框

由于人们用一只手握住智能手机,因此确认对话框面临着与导航菜单相同的挑战。这些选项通常是二进制的,一个在左边,另一个在右边。随着手持设备的扩展,由于拇指移动范围有限,访问两个对话框选项之一变得很复杂。

让我们看一下难以到达的确认对话框的一些非常规解决方案。

反之亦然

反之亦然是二进制选项的对角UI模式。它考虑了拇指的自然运动并承认异常运动的局限性。在小屏幕上,您可以用拇指伸到另一侧,但这会产生紧张感,并且使您感到不舒服。

1

所述反之亦然图案副通过解决该问题对角线划分屏幕两个,从而允许仅使用拇指进行二进制选项。这不仅使拇指更容易达到这两个选项,而且还通过为用户提供更大的触摸面积来解决精度问题。

虽然该概念旨在使表决机制易于访问,但是您可以使此交互式设计适应各种二进制选项。

该模式的明显缺点之一是,它已针对右手使用进行了大量优化。解决此问题的方法是,客户可以摇动手机,并且方向会改变。好的解决方案?我们不知道,但肯定是确认对话框的有趣替代方法。

全方位刷卡

Omni Swipe中提供了另一种难以到达的确认按钮(或导航)解决方案。尽管此概念旨在个性化智能手机的UI,但它也可以适用于独立的应用程序。

1

大多数导航按钮可水平或垂直打开菜单时,Omni Swipe可让用户访问拇指移动范围内的控件。这解决了为所有屏幕宽度创建确认解决方案的复杂挑战,因为无论尺寸大小,可操作的元素都将出现在用户的拇指下。

与最后探讨的仅允许二进制选项的概念不同,此解决方案实际上对可以添加到菜单的选择没有任何限制。

游戏化等待体验

Statista在2020年进行的一项研究中,美国65%的受访者表示,过去12个月内他们使用智能手机进行了在线购物。这表明电子商务UX和移动设计齐头并进。此外,如果我们看一下现代电子商务平台,我们可以看到它们几乎都突出了针对移动设备优化的主题。这两个因素共同描绘了在线零售业的发展方向。

但是,即使是最轻微的干扰也可能导致购物车被遗弃或产生负面的购物体验。对速度感知心理学的研究表明,一个人的情绪会影响他们对时间的感知方式。在轻松愉快的环境中,您会感觉到时光飞逝。但是,如果您脾气暴躁,心情不好或焦虑不安,时间似乎几乎会停滞不前。

加载屏幕,运输流程,准备阶段等都使用户等待。让我们看一下移动设计师如何解决在线食品订购和食品配送行业对速度的看法的示例。

沃尔特

我们过去常常在食堂排队等候。好吧,我们仍然这样做,但是如今,我们可以轻松地在线订购食物并将其交付给我们。但是,我们仍然需要等待快递员到达。

Wolt是使您能够购买食物并由快递员将其运送到您家门口的众多应用程序之一。如果您没有更好的事情要做,您会感觉,而不是排队等候,而是在等待快递员。

沃尔特的游戏化等待体验

沃尔特(Wolt)具有针对这种速度感知的众多精美功能。它会分阶段显示进度,完成步骤后会通知您,并显示快递员的GPS位置。还隐藏了一个聪明的小游戏,可以帮助您更快地打发时间并提高心情(如果您觉得有点竞争力的话)。在这个小游戏中,您在5秒钟内尽可能多地点击屏幕,试图击败Wolt的团队。

这是一个简单的功能,直接作用于人类心理学。即使游戏元素不能消除您的饥饿感,它也可以帮助您更快地度过时光。

使用动画进行滑动

卡屏一直以来都是设计师的最爱。客户只需轻扫和切换卡即可轻松访问应用程序的不同部分。但是,您可以将应用程序游戏化以增强用户体验,而不仅仅是应用滑动功能的UI方面。

人们对运动做出反应并被动画吸引是很常见的。让我们看一些使用游戏化原则的示例。

BOOKOTEL

Bookotel是适用于餐厅和咖啡馆的在线预订应用程序。该应用程序的设计令人震惊的是,他们在介绍卡中创建了滑动动画的创新方式。

Bookotel刷卡动画概念

整个应用程序似乎不只是切换到下一张卡片,而是移动并转换为以下图像,消息和提示。

我们看不到这种交互作用会应用到应用程序的其他部分,因此我们对它在更大范围内的外观还有一些猜测。但是,您不能否认它会吸引用户并吸引他们使用该应用程序。

值得注意的是,如果客户选择减少运动以防止出现可访问性问题,则可能需要重新调整这些运动。

拉尔卡剧院

Teatr Lalka是波兰最早的木偶剧院之一,现已有75年历史了。但是,其网站绝非古老。它的主要主题是交互性,这是您希望在与娱乐相关的网站上看到的内容。

Teatr Lalka移动动画设计

当您访问Teatr Lalka网站时看到的第一个动画是木偶。在展示节目中使用的实际木偶时,它们还具有另一个目的:游戏化。您可以在旋转木马中滑动动画的木偶,然后通过单击它们来与它们交互,从而提示智能手机发出声音和振动。木偶对倾斜也有反应。这是一个很好的示例,说明了移动网站如何从首页开始与用户互动。

您可以将相同的技术应用于其他应用程序和网站,以增强用户体验并与访问者进行有趣的互动。

非常规解决方案为未来的移动设计铺平了道路

那里有一些聪明的解决方案,可以解决看似简单的问题。有望依次改善用户体验的解决方案。尽管顺应趋势并不一定是坏事,但转向创新的边缘可以产生更有意义的结果。

随着用户体验成为我们数字生活中越来越重要的组成部分,从心理学的角度来看事物是值得的。不要害怕测试影响人们习惯,心理和便利感的尖端解决方案。这可能是值得的。

本页面最后更新于 2021年03月15日 10:35