用灰色文本字段来拯救你的注册表单设计

摘:在设计 App 的时候,大多数设计师将精力投入在内容页的设计当中,常常忽视注册表单的设计,导致注册表单在视觉设计上看起来粗糙、陈旧,对用户缺乏吸引力。

引言

在设计 App 的时候,大多数设计师将精力投入在内容页的设计当中,常常忽视注册表单的设计,导致注册表单在视觉设计上看起来粗糙、陈旧,对用户缺乏吸引力。

如果你的注册表单只是简单使用白色背景、纯文本字段、无序的信息组织和黑色的输入框,这样根本无法激发用户的注册欲望。如果你的注册表单设计看起来像下图一样,那么还有改进的余地。

cxuxwwi3mqe.png插图

一些对产品有强需求的用户,无论表单的外观设计成什么样样子都会使用。

而对于那些没有强需求用户,假设一进入 App 看到的是粗糙的注册表单设计,可能会导致产品失去许多潜在用户。

而将注册表单在视觉上设计的更加具有吸引力,则会将用户从放弃注册的边缘上拉回来。

1.好看才能吸引用户

在《视觉吸引力与可用性:哪个因素会进一步影响用户对网站的认知?》的研究中发现,界面的第一印象受到视觉吸引力的影响。用户倾向于将“视觉吸引力”作为评判界面是否有趣、易用的标注。

同理,用户会认为视觉吸引力差的界面难用且耗时,放弃注册表单的操作。为了吸引用户注册,我们需要增强主表表单设计的视觉吸引力。

当然设计一个合格的注册表单需要满足以下两点:

1.首先是在表单设计中增加多少视觉吸引力合适?因为过度的增加视觉吸引力会分享用户的注意力;

2.其次要在美观的同时兼顾表单设计的可用性。

看起来可能会比较麻烦,但只需要以下简单的两步即可完成一个优秀的注册表单的设计。

2.优化视觉信息层级

为了使注册表单在视觉看起来更具吸引力,我们可以将输入框添加底色,而非使用纯白色或者只是描边显示。

通过将输入框添加底色可以在视觉上增强对用户的信息提示,减少周围的视觉噪音对输入框的干扰。

35b1ux5snrx.png插图(1)

灰色文本可以快速吸引用户的注意力,以便用户能够快速与其交互。同时可以更清晰的提示用户如何输入,以便用户可以更轻松的输入、检查和修改。

相比于左图,输入框的设计与周围环境缺少对比,产生更多的视觉噪音,用户无法集中注意力。

2ov5baj5amv.png插图(2)

灰色背景能够提供更清晰的输入焦点,它通过强调空白区域减少外部因素对输入框的干扰,使输入框看起来更加清晰、易输入。

* 请务必注意,灰白色不等于灰色。避免使用纯灰色文本字段,因为用户倾向于将它们视为禁用或非活动字段。它们不利于输入和阅读。

3.选择使用品牌色

在选择输入框的背景色时,你可以选用你所在公司的品牌色,并调整它的亮度和饱和度。与品牌在视觉上保持一致,会使你的表单设计看起来更专业。

bpgjz03n1m5.png插图(3)

将亮度提高到 100%,并将饱和度降低到 5% 左右。将亮度降至低于 100% 的亮度并为颜色添加灰度。降低饱和度可降低白色调。您还可以向字段边框添加略暗的线条,加强视觉对比。

您可以选择任何颜色的输入框或者背景色,这完全取决于您想使用的色调,但是值得注意的是:“饱和度和亮度级别应该位于同一象限内”。

在选择色调的时候,您可以选择适合你的品牌的色调,但您不必一定使用你的品牌色,也可以选择邻近色。免费赠送以下最受各个品牌欢迎的集中注册表单设计示例。

cmcriooyqfq.png插图(4)

4.总结

1.视觉吸引力强的表单设计更容易吸引用户

2.优秀的表单设计主次分明,视觉信息层级明确

3.表单设计可以选择品牌色作为辅助

原文地址:海盐社(公众号)

作者: 姜正

人已赞赏
UI设计

设计沉思录丨如何利用场景化设计提升用户决策效率

2020-10-12 18:05:13

UI设计

1套流程,带你看遍1000万个产品设计的从0到1

2020-10-12 18:05:15

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索