守望者

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

引言

在设计 App 的时候,大多数设计师将精力投入在内容页的设计当中,常常忽视注册表单的设计,导致注册表单在视觉设计上看起来粗糙、陈旧,对用户缺乏吸引力。
 
如果你的注册表单只是简单使用白色背景、纯文本字段、无序的信息组织和黑色的输入框,这样根本无法激发用户的注册欲望。如果你的注册表单设计看起来像下图一样,那么还有改进的余地。
 
 
一些对产品有强需求的用户,无论表单的外观设计成什么样样子都会使用。
 
而对于那些没有强需求用户,假设一进入 App 看到的是粗糙的注册表单设计,可能会导致产品失去许多潜在用户。
 
而将注册表单在视觉上设计的更加具有吸引力,则会将用户从放弃注册的边缘上拉回来。 
  
 

1.好看才能吸引用户

在《视觉吸引力与可用性:哪个因素会进一步影响用户对网站的认知?》的研究中发现,界面的第一印象受到视觉吸引力的影响。用户倾向于将“视觉吸引力”作为评判界面是否有趣、易用的标注。
 
同理,用户会认为视觉吸引力差的界面难用且耗时,放弃注册表单的操作。为了吸引用户注册,我们需要增强主表表单设计的视觉吸引力。
 
当然设计一个合格的注册表单需要满足以下两点:
 
1.首先是在表单设计中增加多少视觉吸引力合适?因为过度的增加视觉吸引力会分享用户的注意力;
 
2.其次要在美观的同时兼顾表单设计的可用性。
 
看起来可能会比较麻烦,但只需要以下简单的两步即可完成一个优秀的注册表单的设计。

 

2.优化视觉信息层级

为了使注册表单在视觉看起来更具吸引力,我们可以将输入框添加底色,而非使用纯白色或者只是描边显示。
 
通过将输入框添加底色可以在视觉上增强对用户的信息提示,减少周围的视觉噪音对输入框的干扰。
 
 
灰色文本可以快速吸引用户的注意力,以便用户能够快速与其交互。同时可以更清晰的提示用户如何输入,以便用户可以更轻松的输入、检查和修改。
 
相比于左图,输入框的设计与周围环境缺少对比,产生更多的视觉噪音,用户无法集中注意力。
 
 
灰色背景能够提供更清晰的输入焦点,它通过强调空白区域减少外部因素对输入框的干扰,使输入框看起来更加清晰、易输入。
 
* 请务必注意,灰白色不等于灰色。避免使用纯灰色文本字段,因为用户倾向于将它们视为禁用或非活动字段。它们不利于输入和阅读。

 

3.选择使用品牌色

在选择输入框的背景色时,你可以选用你所在公司的品牌色,并调整它的亮度和饱和度。与品牌在视觉上保持一致,会使你的表单设计看起来更专业。
 
  
将亮度提高到 100%,并将饱和度降低到 5% 左右。将亮度降至低于 100% 的亮度并为颜色添加灰度。降低饱和度可降低白色调。您还可以向字段边框添加略暗的线条,加强视觉对比。
  
您可以选择任何颜色的输入框或者背景色,这完全取决于您想使用的色调,但是值得注意的是:“饱和度和亮度级别应该位于同一象限内”。
  
在选择色调的时候,您可以选择适合你的品牌的色调,但您不必一定使用你的品牌色,也可以选择邻近色。免费赠送以下最受各个品牌欢迎的集中注册表单设计示例。
  
  
 

4.总结

1.视觉吸引力强的表单设计更容易吸引用户
 
2.优秀的表单设计主次分明,视觉信息层级明确
 
3.表单设计可以选择品牌色作为辅助
  
 
原文地址:海盐社(公众号)
作者: 姜正

转载请注明:学UI网 » 用灰色文本字段来拯救你的注册表单设计

登录收藏
 
你可能喜欢的:
Material Design States 状态Material Design States 状态
Material Design Selection 选择Material Design Selection 选择
从「科学方法」到「设计实践」 – 云产品设计师会梦见服务器么?从「科学方法」到「设计实践」 – 云产品设计师会梦见服务器么?
异常场景怎么处理?异常场景怎么处理?
UI设计交接给开发之后看起来更糟的7个原因,以及为什么这可能是你的错UI设计交接给开发之后看起来更糟的7个原因,以及为什么这可能是你的错
如何设计好一款APP的首页?如何设计好一款APP的首页?
B端品牌如何面向C端用户B端品牌如何面向C端用户
如何搭建一个易学性高可用性强的功能框架?如何搭建一个易学性高可用性强的功能框架?
盘点 | 4个成为标杆的超强体验设计盘点 | 4个成为标杆的超强体验设计
设计驱动案例-如何优化金融产品购买体验?设计驱动案例-如何优化金融产品购买体验?