Figma Tech

UI 设计 · 表单与输入框的设计指南

2020年 03月 27日 · 3 min read

对于任何UI设计师来说,设计一套实用的表单是一项很重要的技能。表格可帮助用户了解产品,包括:创建新帐户、购买商品、提供工单、安排工作任务、填写税款等。无论是什么格式,设计师都应站在用户和使用场景下来设计,以便用户可以快速,轻松地完成表单。

表单的重点就是输入模块。输入框的设计规范是设计师交付供组建库中重要的一部,应敬慎地去设计与维护,以确保用户可以快速、准确地完成表格的编辑。

本指南将演示表单的设计,并根据 Material DesignBootstrapFigma 输入框来进行说明。


好的方式

在讨论输入字段之前,我们了解一些在业内设计与体验很棒的表单。表单的设计应该看起来像是用户与应用程序之间的沟通。下面的一些做法可以改善设计并提高用户的完成率。

问题的数量

只问可以完成目的的问题,以保证页面尽可能的短。如果必须增加一些可选的问题,一定要将其备注为可选状态。
问题数量示例

提示:用“可选”一词标记可选字段,而不要使用星号(*)。因为它的含义可能不清楚,并且出现太多时会产生视觉噪音。

注意问题顺序

问题应该按一定的逻辑顺序,表格应从简介开始。询问用户名以及一些基本的联系信息,然后继续提问越来越困难或敏感的问题。不然的话,就好比有人在问你名字之前先问你的地址,会让人觉得很奇怪。
问题顺序

对相关信息进行分组

对相关信息进行分组,以帮助用户划分并了解他们的要求。可以将表单进行 “标记分类” 或 多页来完成。
对相关信息进行分组

统一排版格式

输入应安排在单个列中,以便用户可以沿页面下的直线读取表单。多列的表单会让用户视觉混乱甚至漏填部分字段。
统一排版格式

提交按钮

提交按钮应具有描述性的名称,并应放置在表单底部,与列对齐。当用户到达表单底部并准备采取下一个操作时,可遵循用户的视线。如果需要辅助按钮,需确保它在视觉上弱于主按钮,并根据对齐方式排在第二位。
提交按钮

填写进度

遇到多个页面的较长表单时,应告诉用户它们的填写位置和还需要进行那些操作。可以通过进度条、百分比和计数等多种方式来进行设计。
填写进度

条件表单

通过使用条件输入,可以实时为每个用户定制表单。当满足某些要求时,自定义输入可能会显示以收集更多且更相关的数据。
条件输入