表单设计《庖丁解牛般全面剖析表单设计》

24 篇文章 1206905 位观众

有信息的地方就有表单，掌握表单设计已经成为我们的必备技能。本专题不仅有全面的基础知识总结，还将常见的表单样式和设计准则都归纳集结，附上新人错题集和实战案例，让你彻底学会这个知识点。

2022-07-31更新

收藏 538

正序倒序

想把表单的用户体验做到极致？我总结了这5个细节！

想把表单的用户体验做到极致？我总结了这5个细节！

对于设计师来说，尤其是现在 B 端设计如此流行的情况下，表单设计细节尤其需要各位设计师注意，本文会分享表单设计中那些你不注意的细节点，

彩云Sky 4.5w 人阅读 2022/06/30 B端设计 表单细节

1

从 4 个方面，总结B端表单标签的设计细节

从 4 个方面，总结B端表单标签的设计细节

我们在设计表单的时候有没有需要注意的地方？我根据实战经验从 4 个方面总结了这篇文章。

夜莺YEAH 3.5w 人阅读 2022/06/28 B端产品 UI设计

2

从 4 个方面，总结 B 端表单的交互设计细节

从 4 个方面，总结 B 端表单的交互设计细节

本文从即时验证、多余输入、额外输入、基于选择的输入 4 个方面，聊聊 B 端表单中的交互理论在设计中的实际运用。

夜莺YEAH 3.8w 人阅读 2022/06/23 B端产品 B端设计

3

超多干货！B 端表单设计的 3 大模式和 4 大使用场景

超多干货！B 端表单设计的 3 大模式和 4 大使用场景

本文总结了 B 端表单设计中的 3 大设计模式，4 大呈现方式及使用场景，希望对大家有所帮助。

设计小余 4.7w 人阅读 2022/04/28 B端表单 表单结构

4

6000字干货！6个方面帮你循序渐进掌握表单设计

6000字干货！6个方面帮你循序渐进掌握表单设计

本文从表单结构及元素设计细节、暂存及送出规则、如何提升表单完成率、常见误区及避坑指南等6个方面，总结了表单设计的知识点。

大漠飞鹰CYSJ 6.5w 人阅读 2022/03/23 UI设计 移动端表单

5

6000字干货！5个Web表单设计冷知识

6000字干货！5个Web表单设计冷知识

本文针对表单设计中的5个设计问题进行讨论，并给出了相关建议帮助大家解决。

百度MEUX 6.1w 人阅读 2021/10/29 Web表单 网页表单

6

如何设计一份体验好的表单？来看这篇超全总结！

如何设计一份体验好的表单？来看这篇超全总结！

本文从表单拆分、表单类型和表单页设计步骤 3 个方面，详细阐述了表单的设计方法。

土拨鼠 3.5w 人阅读 2021/01/03 表单设计 表格设计

7

大厂高手出品！中台系统设计指南：表单体验篇

大厂高手出品！中台系统设计指南：表单体验篇

本篇文章将分享Web端表单体验优化等相关内容，分析设计师在设计B端类产品时如何让用户愉悦并高效的填写表单。

土拨鼠 6.1w 人阅读 2020/08/24 中台系统 中台设计

8

超全面的移动端表单设计准则总结（附实战案例）

超全面的移动端表单设计准则总结（附实战案例）

编者按：本文由途牛UED 出品，作者将结合实际案例，从7个方面介绍表单设计中的常见注意事项。表单作为平台与用户联系最为紧密的一环，也是影响商业交易成功与否的重要分水岭。良好的表单设计可以给用户提供流畅自然的交易体验，保证用户购物情绪的正向增长，而混乱无序的表单则引起用户的负面情绪，影响甚至阻碍用户交易的完成，降低用户的品牌好感度和信赖度。

程远 9.8w 人阅读 2019/03/11 UI 设计 注册表单

9

用一篇超全面的文章，帮你掌握「表单设计」知识点

用一篇超全面的文章，帮你掌握「表单设计」知识点

表单是产品设计中的重要组成部分，如果说弹框的主要作用是完成信息反馈，那么表单的主要作用就是完成信息录入。任何一个表单都可以被拆解成三个最基本要素：标签（标题）、输入框和按钮。

土拨鼠 4.3w 人阅读 2019/08/08 王M争 表单

10

移动端的长表单设计有哪些注意事项？这篇都总结好了！

移动端的长表单设计有哪些注意事项？这篇都总结好了！

本文将基于驴妈妈移动端供应商加盟项目，从 PC 端和移动端的不同之处入手，探讨移动端长表单的设计有哪些注意事项。

土拨鼠 5.4w 人阅读 2019/09/23 移动端设计 表单设计

11

如何做好UI界面的表单设计？收下这篇科普干货！（下）

如何做好UI界面的表单设计？收下这篇科普干货！（下）

上期我们分享了在实际的项目中如何选择合适的表单以及表单的结构介绍，本期将分享在表单设计过程需要注意的细节以及容易碰到的问题点。

大漠飞鹰CYSJ 4.5w 人阅读 2020/08/13 UI表单 UI设计

12

如何做好UI界面的表单设计？收下这篇科普干货！（上）

如何做好UI界面的表单设计？收下这篇科普干货！（上）

表单几乎是每一款数字产品都不可或缺的组成部分，也是设计师必须要亲身经历的设计组件之一。本文从表单的组成结构与类型，详细阐述如何设计表单。

大漠飞鹰CYSJ 5.4w 人阅读 2020/08/09 UI 表单 UI 设计

13

如何应对复杂B端表单设计？这次给你两个案例（下）

如何应对复杂B端表单设计？这次给你两个案例（下）

上篇发表后，看到有读者评论说没看到B端案例，也没看到如何解决复杂性。关于这俩问题，今天的下篇全给说明白！

土拨鼠 5.8w 人阅读 2020/07/31 B端产品 B端设计

14

万字干货！帮你彻底完整掌握表单设计方法（上）

万字干货！帮你彻底完整掌握表单设计方法（上）

表单设计是每个设计师都会遇到的问题，这个看似简单但经常踩坑的设计，今天用这篇万字干货，帮你彻底学会它！

土拨鼠 4.1w 人阅读 2020/05/26 交互设计 产品

15

设计手册可能是最全面的表单设计完全手册！

可能是最全面的表单设计完全手册！

表单设计可以说是设计界一个老生常谈的话题，针对它的重要性自不必多言。本文结合自身经验和所看所学所得总结，希望能帮助到大家。从「因子（构成要件）」的角度，将表单逐一拆分，从而能够全面的看待。

程远 6.8w 人阅读 2018/09/24 注册表单 登录表单

16

表单样式超全面！13种表单样式的设计方式都在这了

超全面！13种表单样式的设计方式都在这了

半木zxy：从复杂的ERP系统到Facebook，应用程序已经不仅仅是作为输入的意义而存在。各种各样形式的表单服务于用户提交信息。本文介绍了13种不同的方式来呈现表单，并探讨了数据输入的未来。

程远 9.7w 人阅读 2017/04/15 UI设计 经验分享

17

进阶方法表单设计进阶方法！7招提升表单体验

表单设计进阶方法！7招提升表单体验

阿肆Stella ：最近在做认证的优化，期间涉及到一系列的表单设计。在制作过程中，发现我对于提示语、按钮的位置、是否放步骤条等等都无法做出快速的判断，这说明我对这部分的概念是比较模糊的，所以就想针对表单的体验设计做一个学习和总结，加深自己对表单设计的理解。一、什么是表单表单在网页或 app 中主要负责数据采集的功能。

程远 4.3w 人阅读 2018/11/20 注册表单 网页表单

18

设计准则必考考点！这些表单设计的基本准则你都知道嘛？

必考考点！这些表单设计的基本准则你都知道嘛？

编者按：表单可能是日常UI设计中最常见的设计元素了，它广泛的应用范畴、多年来的积淀使得表单设计牵涉到大量的、约定俗成的设计规则。今天我们来聊聊这些最常见的表单设计准则~无论是注册网站还是内容输入，总是回避不了表单这种UI控件。表单几乎是每一个数字产品都无法规避的组成部分，它的作用近乎无可替代。

陈子木 3.7w 人阅读 2016/08/18 UI设计 经验分享

19

友好型遵守这8个原则，帮你创建用户友好型表单

遵守这8个原则，帮你创建用户友好型表单

表单对于企业和个人同样至关重要，当涉及到数据收集时，我们大多数情况下会采用表单（或许是因为在互联网繁荣之前我们就已经在线下使用了很久的表单）。因此建立一个用户友好的表单是增加填写完成率的关键。一、表单解析表单的目的、内容、大小长度等虽然各不相同，但基本元素比较固定；合理组织这些元素有助于用户轻松完成表单填写。

程远 2.9w 人阅读 2018/07/17 注册表单 点融设计中心

20

长表单设计的套路：10个小技巧让长表单填写更省事

设计的套路：10个小技巧让长表单填写更省事

表单设计是我们做产品设计时经常会做的一件事，特别是长表单，在设计时尤其要注意。没有用户愿意对着一串很长且无聊的字段机械式的填写。针对长表单设计，我结合自己的项目经验和使用其他APP时的一些好的体验，总结了下面10个小tips：提前告知所需材料，避免表单填写过程被打断。

程远 3.6w 人阅读 2018/01/21 UI设计 用户体验

21

问题手册提高转化率！9个新人容易中枪的表单设计问题

提高转化率！9个新人容易中枪的表单设计问题

在网站中，表单是用户跟我们沟通的主要桥梁。透过表单，用户可以买东西、订阅新文章、更新资料……可以说网站最重要的功能，都是靠表单来完成。

程远 2.7w 人阅读 2016/04/21 经验分享 网页表单

22

实战案例如何高效完成表单输入？来看这个实战案例！

如何高效完成表单输入？来看这个实战案例！

58UXD：表单是收集用户信息的方式。如果你的产品需要收集大量用户信息来完成为其提供的服务，那么在用户进行信息输入的过程中一定要考虑到输入成本和输入效率对用户体验的影响。针对复杂表单信息多、填写慢、体验差等问题，我们以「58简历发布」与「赶集房产发布」为例，进行表单发布流程的再设计。

程远 3.3w 人阅读 2018/07/02 实战案例 改版设计

23

实战案例用3个案例，让你学会移动端的长表单设计

用3个案例，让你学会移动端的长表单设计

Echo ：基于业务需求（常见于B端产品），有时候用户在操作过程中，不可避免的需要填写很多表单。针对移动端长表单，我们应该如何去正确的设计呢？本文大纲：三种主方案主方案1的设计讨论主方案2的设计讨论主方案3的设计讨论总结一. 三种主方案针对长表单的设计，按照设计思路的不同，可以分为三种主方案，如下所示：图中举例的关键字段仅仅为举例需要。

程远 5.7w 人阅读 2017/10/26 移动端设计 表单设计

24

本专题已完结，还有79个系列专题

收藏本专题 538 查看更多专题

发评论！每天赢奖品

点击登录后，在评论区留言，系统会随机派送奖品

2012年成立至今，是国内备受欢迎的设计师平台，提供奖品赞助联系我们

本期奖品

这么设计才好玩

已累计诞生 623 位幸运星

查看获奖名单

发表评论已发布2条

{{ moreBtnTxt }}

以上留言仅代表用户个人观点，不代表优设立场

评论就这些咯，让大家也知道你的独特见解立即评论

大家都在看

AIGC自学指南

64篇文章

B 端产品设计

49篇文章

企业出海设计

18篇文章

用户体验法则

16篇文章

设计趋势

55篇文章

品牌设计

28篇文章

中文字体

21篇文章

平面设计

81篇文章

即时设计的进阶之路

19篇文章

热门频道

设计灵感

支持与服务

官方社群
优设官方微信群
01优设AIGC自学交流群
02优设小红书个人IP交流群
03优设设计师交流群
04优设UI设计师交流群
05优设交互设计师交流群
06优设电商交流群
07优设私单群

08优设硬件种草交流群
09优设同城搭子群
10优设大学生交流群
11优设插画师交流群
12优设平面品牌设计师交流群
13优设3D设计师交流群
14优设摄影剪辑爱好者交流群
微信扫码添加管理员招财

微信号：扫码添加

严格审核打造高质量交流群

进群会有面试题谢绝打广告
优设微博

@
优设AIGC
400W粉丝！每日更新设计干货
@
优设
强烈推荐！优设官方品牌微博
@
优优教程网
官方微博，海量教程看不完
@
优设基础训练营
零基础入门，带你成为软件高手
优设微信

每天官微五分钟

一年萌新变大神

扫码关注

1000W

优设新媒体矩阵等你来关注

优优教程网

优设大课堂

设计师导航