如何设计表单页

时间：2023-09-14 15:24:02 | 来源：网站运营

时间：2023-09-14 15:24:02 来源：网站运营

如何设计表单页：前言

相信很多设计师很少留意表单的设计，例如每个 APP 中默默无闻的设置页、功能列表页；表单页也称作 Cell 和 list，在视觉层面很难设计得出彩，以至于很多人都忽视这一块；我看过有设计师把待输入、选择类型做成一样的文本颜色，又或者可编辑与置灰状态一样…… 这些在视觉层面看起来好像没什么问题，但在使用过程中是否可点击、可输入不明确的话，用户就会困惑、觉得体验烂；

但是作为UI设计师，不应该仅仅为了做出好看的页面、画个皮而已，用户体验也至关重要；其实表单页有不同的类型，视觉如何表达可点击、可输入、不可编辑等等状态，同样也需要UI去思考，不能忽视。

表单的类型与设计

表单的类型有很多，但视觉层面来讲常规的大概只有这几种：输入类型、跳转/选择类型、显示类型、按钮；

输入类型：分为短文本、长文本输入、以及左对齐、右对齐输入；输入文本长短是产品功能决定的，但输入的对齐方式一般是取决于排版；

一般而言左对齐比较合适，因为输入文本的时候文本从左往右出现是比较自然的，与书写的方向保持一致；但有一种情况则采用右对齐，就是多种类型表单放在一个页面的时候（如上图），操作区都是右对齐的，那么输入也保持右对齐会令页面排版整齐些；另外在采用右对齐方式的时候需要注意：设计输入的最大范围（如下图）；这样避免输入的文本与标题重叠。




iOS 原生的列表设计有一点非常有意思，当页面大多数列表都是输入类型的话，选择类型的表单会迁就输入类型，文本采用左对齐的方式；估计他的设计原则是少数服从多数..







跳转/选择类型：虽然都是文本+箭头，但其实两者还是有些区别；跳转类型不一定带文本，而且置灰状态一般在于有无箭头；但选择类型则必定带有文本与箭头，而置灰状态在于文本；

在 Apple Music 的跳转列类型，直接用带颜色的纯文本代表可点击跳转，去掉了箭头，这一点在选择类型的列表则无法做到；

在选择类型中，一般还有两种设计，用明亮的主色强调当前的选择内容，或者用灰色文本提示当前选择；两种做法都是都是对的，如果你留意过iOS系统的设置页就会发现，也会存在这两种样式；

至于用法，我个人觉得是以重要程度或者需要区分可否点击，如上图的“送货地址”页面，“国家/地区”是不可点击的，而“省/市”则可以点击，如果同样用灰色就很难表达是否可点击了；所以有时候设计需要具体问题具体分析，不能为了规范而规范；







显示类型：看起来很简单，就是单纯的显示信息；但有一个问题相信大家都想过，那就是该突出标题还是内容呢？该内容左对齐还是右对齐？

一般政治正确的都说要突出内容，其实也是要视情况而定，不能盲目突出内容；我个人总结一个评判标准就是：内容能否表达自我；意思是一个内容在没有标题的情况下，可否说明本身的含义；如果可以内容本身能表达自我的含义，那么标题弱化（甚至不需要标题），如地址、电话号码；反之内容不能表达自我，那么标题强化；

左、右对齐的问题，一般是基于信息分组、排版的考虑；例如京东的订单详情页分了两种对齐方式，价格的部分是以右对齐的方式显示；一方面可以排版平衡些，不至于右边全空，同时与订单信息区别开来以突出价格；




按钮类型：只需要考虑表层的视觉细节以及不同的状态；

One More Thing-针对人群而设计

在很多产品中我们逐渐看到很多的表单设计把分割线去掉，也有甚至把箭头去掉；这一切都是为了排版更加简洁，但这是否是一个好的设计？

我个人的观点是视用户群体而定，倘若你的用户是年轻的、潮流的，尽管用新的视觉语言、交互形式，只要你的设计是整体的、一致性的；类似 Snapchat 新的视觉语言，新的交互形式，反而更加吸引年轻的用户尝试，他们会觉得 Cool、好玩；but, Btw Snapchat 的列表页同样会保留分割线与箭头。

但相反如果你的用户年龄层比较大的话，去掉分割线和箭头并不适合；分割线起到视觉分区的作用，明确地告知用户点击区域，箭头自然就是一个视觉的指引，告诉用户可点击可跳转；就像 Facebook、微信这种几乎包含全年龄层的产品，你会发现页面的设计都相对保守；

曾经有个产品经理就要求我把表单的箭头去掉，理由是页面好看些…… 然而我拒绝了，因为所设计产品的面向人群是装修工人，去掉箭头无疑会增加学习成本，降低使用效率；所以我们做设计不能单纯追逐潮流、为了好看，要针对不同的用户群体而设计；

总结

作为UI设计师，设计好看的页面固然重要，但在考虑怎么好看的前提需要把确保功能体验良好；在设计表单之前搞清楚不同的类型，再针对性地进行设计，最后才到字号大小、颜色、间距这些表层的设计；这样下来设计是内外兼修，体验与视觉都良好。同时也要考虑面向人群，针对性地设计；




End

JP 写于 2018-09-16 台风天