Pinapps
首发于Pinapps
换个角度谈表单设计

换个角度谈表单设计

今天这期周刊我们继续来聊聊「表单设计」这个 Design Pattern。表单几乎是设计过程中每个产品都会涉及到的一个功能模块,作为一个如此重要、常见的课题,网络上有非常多的相关的讨论、总结文章。不过既然我们的这个系列是基于 Design System 来展开的,这次我想换一个思路和角度来和大家谈表单设计。

从表象上来看,表单不过是一堆操作的集合界面,但实际上它远没有看上去这么简单。表单的出现就意味着需要对用户当前流程的中断,向用户索要信息,表单的设计是否合理将会对产品的整体效果、数据带来直接的影响。

网络关于表单设计的讨论有很大一部分关注点在动效、设计形式的创新,比如前段时间很多人关注的字段标题设计(如下图):

其实并不是说这些讨论和文章不好,只是基于我们在前面对于表单的思考它们只是一些“点”,而表单设计于业务的作用是一整个“面”的事情。单个的“点”很散,不足以实质是的解决问题,只有基于“面”下思考的“点”才是真正设计于业务真正的价值。

表单本质是解决什么问题?

原则上来说用户并不需要表单,是因为我们还无法更有效、方便的获取用户的信息,所以需要用户自己填写来让帮助产品满足大家的需求。

这个成本是我们的系统留给用户的,既然现在我们还无法完全避免,那么我们就需要尽可能的去降低用户在这里的成本消耗。

所以表单的本质是帮助系统合理、高质、高效的收集用户信息来让用户的使用继续下去,获得更好的产品体验、提升对产品的依赖。而从产品设计的角度来说,我们最核心关注的是表单的填写质量和填写效率。

填写质量将影响系统是否能够更好的服务于用户;填写效率则将影响用户是否更愿意提供信息给到我们的系统。

如何来看待表单设计

很多设计师在表单设计过程中受到别人的质疑或是自我怀疑,很大原因来源于将多个维度的混在了一起。就像我们将交互、视觉同时来做的时候一样,结果往往导致顾了东顾不了西,越搅越乱。

所以当我们换一个思路,将表单的“属性”先进行拆分逐个解决,处理起来就会清晰得多。

通常来说我会将表单(其实也适用于很多地方)的设计拆分成三个维度:基础体验、行业特性和业务特性,这三个维度基本也决定了一个表单的设计,我们可以由下至上一层层来解决。

首先,表单作为最为常见的设计模式之一已经被大家研究过很多年了。无论是怎样的表单,使用哪些组件、各自有什么样的约束、规范和优秀案例,得出结论和形成一整套完整的方案相对来说还是比较容易的。

在此之上我们可以开始进一步考虑产品所处的行业或是领域。每一个不同的类型都有着自己的特性,做食谱的产品和做汽车的产品显然就有着很大的差异(后面会详细提到)。它直接的反映就是表单问题和输入的设计,最终也会体现出产品自身的专业度表单填写的质量效率。

最后是业务特性。如果说前两层属性还具备共同性,那么第三层的业务特性可能就会有着明显的差异。每一个产品都有自己独特的业务特性(同时也是设计上的约束),我们需要基于它们来进行属于自己产品的表单设计。

这也是为什么之前提到做竞品分析真正需要的是分析而不是直接“照搬”别的产品,设计的思考具有共同性但产品业务、背景则很多时候是不一样的。


以上是 Design System 系列的第 10 期的节选内容,在余下的全文内容中(付费部分)我们将继续聊聊表单的设计框架,并且通过几个实际案例来进一步剖析表单的设计。

加入 PinDesign 会员,获取本期主题「换个角度谈表单设计」的全文内容及本系列前 2 期周刊的赠送,年付会员将获得 Design System 系列所有(01~09)文章的赠送。

Design System 是 PinDesign 周刊的一个新系列,基于「Design Systems」这本书结构框架的读书笔记和经验总结。希望将自己的感受和经验分享给大家,辅助大家的阅读。

点击领取 PinDesign 会员计划 50 元优惠券

Design System 系列已更新:

5key:什么是 Design Systemzhuanlan.zhihu.com图标5key:Design Systems 02 - 什么是 Design Principleszhuanlan.zhihu.com图标5key:Components 与 Patterns 究竟有什么区别zhuanlan.zhihu.com图标5key:你该为产品设计怎样的气质zhuanlan.zhihu.com图标5key:Design System 中的 Design Tokenzhuanlan.zhihu.com图标5key:Design Pattern 实例 - 用户通知与中断zhuanlan.zhihu.com图标5key:Design Pattern 组合实例 - 列表页设计思考zhuanlan.zhihu.com图标5key:Design Pattern 划分方式是对设计的逻辑思考zhuanlan.zhihu.com图标5key:Design Pattern - 页面的信息展示逻辑zhuanlan.zhihu.com图标

点击下方链接,了解 PinDesign 会员计划详细信息:

PinDesign 互联网产品设计周刊wap.youzan.com

文章被以下专栏收录

    我推荐的不仅仅是apps,更是一种态度。 偶尔我也会聊聊和 apps 相关的设计,请保持关注! 微信搜索「Pinapps」