郑州UI设计培训学校介绍UI设计中11种表单设计技巧!

发布日期:2019/08/23 10:50:58 浏览次数:116

表单作为平台与用户联系最为紧密的一环,也是影响商业交易成功与否的重要分水岭。那么在设计过程中,需要怎样规避风险,提升表单页面的产品体验呢?下面红狐郑州UI设计培训学校小编就为大家介绍一下UI设计中11种表单设计技巧!

表单的构成要件:标题、标签、输入字段、帮助提示、占位符、反馈、操作。

1、保持简短  

没有用户会喜欢填写很长的表单,我知道花一些时间来询问每个字段是否对于用户实现其目标是必要的,这需要很多时间,但是相信我,减少用户填写的工作量将会使更多用户填写表单。

必要而不是全部,简化表单,或许是优化表单的最大建议。简化的办法之一就是追溯每个字段为什么需要,是否是当前最相关的信息,如果它是可选的,最好不要显示。

2、可视化组字段及其标签  

标签需要紧密挨着输入框,利用空白分割上下的距离,尤其是标签的位置在输入框的上边。

一定要紧密将标签与输入框组合在一起,因为人们潜意识中会认为紧密联系的组合是一个整体—格式塔原理。

标签告诉用户需要输入什么。这里作者强调了位于输入字段顶部的标签要紧密挨着输入字段,牢记设计中的格式塔原理。

3、清楚地显示你的要求  

告诉用户你们需要什么,不要等到用户填完表单之后才反馈错误信息,这是一种非常不友好的负面强化形式。如果不明确提示用户怎么填,用户将不知道他填写的内容是否正确,这尤其适用于“密码”字段,因为不同的产品有不同的要求。

帮助提示在表单中是必不可少的组成部分。作用在于说明要求,解释原因。根据产品的不同需求,存在的形式有三种:1、常驻(比如密码要求可以一直显示在页面中)  2、按需提供(针对部分用户的低频需求,比如对字段的解释,鼠标悬停在帮助图标上才显示说明)

4、避免使用占位符文本作为字段标签  

占位符,标签的额外描述,帮助用户了解可输入的数据类型和格式提示,但是有一些设计师却用占位符替代了字段标签,从而使得整体看起来更简约。

这样做的问题是,一旦用户输入字段交互,占位符文本就会消失,如果用户忘记了字段的用途,必须在其外部单击以再次查看占位符,这可能会很烦人。

作者说的这种标签形式即“内联标签”,多数情况下谨慎使用内联标签,在用户输入后,内联标签会消失,用户无法判断输入的内容是否符合。不过在用户熟悉且简单的字段下可采用,比如登录表单只有账号和密码。针对以上问题,可以采用内联浮动标签。

5、使用自动对焦  

当进入表单页面,自动对焦第一个输入字段可以引导用户开始进行输入,我非常喜欢它,因为我只需输入,tab,输入,tab最后enter完成。虽然它只为我节省了一次额外的点击,但它确实以一种微妙的方式增强了整体体验。

当允许表单自动对焦时,还要突出显示活动的字段以通知用户第一个字段已被选中,并且可以填写它。

这通常通过改变边框颜色和大小来完成,以提供更强的视觉提示。确保所选字段的颜色从表单的其余部分突出,下意识地帮助用户专注于活动字段。同样的概念也可用于错误反馈,如果出现错误,通常文本字段将以红色突出显示。

6、告知用户大写锁定已开启  

这是一个非常简单的功能,但很多产品没有实现它。有时我没有意识到大写锁定已经开启,并且在我不断被提示输入错误时感到沮丧。最糟糕的是,错误消息甚至没有提示我大写锁定已打开,它只是一直说我的密码错误。这对用户来说真的很烦人。

7、使用字段视觉约束  

字段视觉约束有助于强化用户所需的信息。例如,如果“日期/月”字段只需要两个字符,则不需要它与“名称”字段的输入框一样长,否则可能会导致用户混淆。

8、不要隐藏你的错误信息  

一些设计将错误信息隐藏起来。通过在输入框末端显示警报图标,让用户将鼠标悬停在图标上时,才会显示错误消息。这是非常糟糕的用户体验,因为它需要用户更多一步的操作才知道他错在哪里。有些用户可能甚至不知道他们需要采取额外步骤(将鼠标悬停在图标上)以查看错误消息。

我们不仅仅需要视觉上的区别(请考虑色盲用户),还需要文字说明并告知原因和解决办法,而不是简单的「输入错误」。

9、明确区分可选填字段  

如果您忽略了第一个提示(保持表单简短),并使用了可选填字段,请确保它们明确标记为可选填。它将提供更强的视觉提示,在标签后边标明(可选填),而不是仅使用星号。有些用户可能也不理解星号的含义,因为它有时用于表示验证错误。

如上所述,尽量避免可填字段。如果不可避免,应该做明确区分。根据经验,可填和必填的数量少的做标记说明。

常规做法:必填,使用「*」星号符;可填,使用「选填」

10、使用图片来增加用户参与度  

如果有意义,请使用图像作为选项,改善用户体验。利用图标或者图像和文本进行组合,有时候可以更好地解释每个选项。

11、尽可能使用预测搜索  

这主要适用于要求用户输入具有许多预定义选项的信息,例如他们的假日目的地。允许用户只输入几个字母来查找他们的目的地城市,而不是输入整个名称。

它还降低了搜索失败的几率,因为用户不太可能拼错他们的搜索词。

郑州宏略科技有限公司是一家产教结合的IT培训企业,目前主要开设课程有:UI设计、PHP程序、WEB前端、SEO优化、网页设计等,学员毕业即可高薪就业。各位想要参加培训的学生可以直接拨打公司客服电话报名哦!

  1. 上一篇:郑州UI设计培训学校介绍UI设计中的视觉元素的5个技巧
  2. 下一篇:郑州UI设计培训学校介绍UI设计注意事项!

Copyright©2018-2019 红狐企业网IT培训中心 www.xxxxxxx.edu.cn 版权所有 All Rights Reserved 豫ICP备16004903号-7