摘:在设计 App 的时候,大多数设计师将精力投入在内容页的设计当中,常常忽视注册表单的设计,导致注册表单在视觉设计上看起来粗糙、陈旧,对用户缺乏吸引力。
引言
在设计 App 的时候,大多数设计师将精力投入在内容页的设计当中,常常忽视注册表单的设计,导致注册表单在视觉设计上看起来粗糙、陈旧,对用户缺乏吸引力。
如果你的注册表单只是简单使用白色背景、纯文本字段、无序的信息组织和黑色的输入框,这样根本无法激发用户的注册欲望。如果你的注册表单设计看起来像下图一样,那么还有改进的余地。
一些对产品有强需求的用户,无论表单的外观设计成什么样样子都会使用。
而对于那些没有强需求用户,假设一进入 App 看到的是粗糙的注册表单设计,可能会导致产品失去许多潜在用户。
而将注册表单在视觉上设计的更加具有吸引力,则会将用户从放弃注册的边缘上拉回来。
1.好看才能吸引用户
在《视觉吸引力与可用性:哪个因素会进一步影响用户对网站的认知?》的研究中发现,界面的第一印象受到视觉吸引力的影响。用户倾向于将“视觉吸引力”作为评判界面是否有趣、易用的标注。
同理,用户会认为视觉吸引力差的界面难用且耗时,放弃注册表单的操作。为了吸引用户注册,我们需要增强主表表单设计的视觉吸引力。
当然设计一个合格的注册表单需要满足以下两点:
1.首先是在表单设计中增加多少视觉吸引力合适?因为过度的增加视觉吸引力会分享用户的注意力;
2.其次要在美观的同时兼顾表单设计的可用性。
看起来可能会比较麻烦,但只需要以下简单的两步即可完成一个优秀的注册表单的设计。
2.优化视觉信息层级
为了使注册表单在视觉看起来更具吸引力,我们可以将输入框添加底色,而非使用纯白色或者只是描边显示。
通过将输入框添加底色可以在视觉上增强对用户的信息提示,减少周围的视觉噪音对输入框的干扰。
灰色文本可以快速吸引用户的注意力,以便用户能够快速与其交互。同时可以更清晰的提示用户如何输入,以便用户可以更轻松的输入、检查和修改。
相比于左图,输入框的设计与周围环境缺少对比,产生更多的视觉噪音,用户无法集中注意力。
灰色背景能够提供更清晰的输入焦点,它通过强调空白区域减少外部因素对输入框的干扰,使输入框看起来更加清晰、易输入。
* 请务必注意,灰白色不等于灰色。避免使用纯灰色文本字段,因为用户倾向于将它们视为禁用或非活动字段。它们不利于输入和阅读。
3.选择使用品牌色
在选择输入框的背景色时,你可以选用你所在公司的品牌色,并调整它的亮度和饱和度。与品牌在视觉上保持一致,会使你的表单设计看起来更专业。
将亮度提高到 100%,并将饱和度降低到 5% 左右。将亮度降至低于 100% 的亮度并为颜色添加灰度。降低饱和度可降低白色调。您还可以向字段边框添加略暗的线条,加强视觉对比。
您可以选择任何颜色的输入框或者背景色,这完全取决于您想使用的色调,但是值得注意的是:“饱和度和亮度级别应该位于同一象限内”。
在选择色调的时候,您可以选择适合你的品牌的色调,但您不必一定使用你的品牌色,也可以选择邻近色。免费赠送以下最受各个品牌欢迎的集中注册表单设计示例。
4.总结
1.视觉吸引力强的表单设计更容易吸引用户
2.优秀的表单设计主次分明,视觉信息层级明确
3.表单设计可以选择品牌色作为辅助
原文地址:海盐社(公众号)
作者: 姜正