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

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

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


好的方式

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

问题的数量

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

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

注意问题顺序

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

对相关信息进行分组

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

统一排版格式

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

提交按钮

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

填写进度

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

条件表单

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

Posted by:Bruce

Hi! I’m Bruce Wu UI/UX Design, Product Designer, Freelance👋 Some Availability For Projects. My superpower is to channel my interdisciplinary skill sets to create appealing and delightful experience for users in meaningful ways, to make people's lives easy and simple.