网页设计之漂亮有效的移动表单设计示例

由于屏幕尺寸限制和缺少光标,移动设备的设计表单可能会令人头疼。

因此,设计人员必须通过实现卓越的可访问性,易于使用和有效利用有限的高度和宽度来精确地思考这些表单如何提供最佳的用户体验。移动形式设计中的主要考虑因素之一是用户如何通过触摸与表单进行最佳交互。

奥多

Oddo对移动形式的用户体验给了很多想法。由于高度限制和大型排版的使用,每个列表项的描述元素被设计为仅在选择时显示。

这也有助于将视觉噪音和混乱降至最低 – 选项很短,清晰可见,并没有太多的选择。

网站设计

网站设计

在整个表单设计中使用动画有助于以两种主要方式帮助用户体验。第一个是通过交替选项的加载时间,以便在用选项被轰击之前给用户时间首先关注手头上的问题。第二个是禁用和隐藏主按钮动作,直到进行选择。这样可以使界面尽可能干净和简单,并让用户知道该特定步骤是强制性的。

总体而言,Oddo是一个干净,高度完善的移动表单设计的例子,具有很大的对比度,可读性和整体的优秀用户体验。

贝宝

PayPal是移动表单设计的另一个很棒的例子。作为一个依赖于填写表格作为应用程序的主要功能的公司,特别重要的是它们容易和快速填写。

他们采取了一些步骤来实现这一点。第一个是实现容易点击和填充的大字段。类型大而与深蓝色背景形成鲜明对比。此外,PayPal还引入了一种滚动效果,可确保当前表单元素始终位于主要查看区域。

除此之外,他们还实现了一个功能,可以减少相邻场景的不透明度,从而进一步将焦点放在目前的填补领域。这样可以减少不必要的视觉噪音,使得形式感觉更不容易,更容易填充在。

网站设计

网站设计

在表单设计中也是一些其他更为标准的考量。有明确的字段标题是大的和间隔的,并在每个字段下面的描述有助于提供额外的帮助,如果用户需要任何。

这些保持小而不引人注意,因为不能使形状高度过长。最后一个元素是以刻度图标的形式进行视觉确认。用户被通知,他们已经做出了有效的输入并且可以继续。

iGooods

iGooods是另一个简单但非常有效的设计。事实上,这个特定的形式是不同的,它只有两个字段,允许空间以动画的形式进行更多的创意输入。

包含这个功能可以使用户对表单的目的进行教育,同时增加趣味感和品牌延续。表格标题和描述保持简短,位置良好,位于输入字段的正上方。

网站设计

网站设计

这种形式设计的一个特别令人印象深刻的元素是应用于现场的交互式设计。形状标签 – 以前大而突出 – 向上移动并变小,在轻敲时均能顺利运动。他们可以选择将其完全隐藏起来,而是选择一种独特的解决方案,使用户如果需要,仍然可以参考表单标签。

这些形式是移动表单设计的一个很好的例子,并突出了在您的下一个移动设计工作时可以使用的一些关键注意事项和解决方案。

原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/259070.html

(0)
上一篇 2022年5月21日
下一篇 2022年5月21日

相关推荐

发表回复

登录后才能评论