1310-6499-520
今天是:
站内搜索:  
您的当前位置:主页 > 知识博客 > 设计管理 >
联系我们

名称:九分网络科技

联系:13106499520

地址:福建省福州市仓山区金榕南路553号


扫一扫添加微信

万字干货!帮你彻底完整掌握表单设计方法(上)--九分网络

时间:2020-06-17   分类:设计管理    作者:网络   来源:网络整理   点击:71

本文将我自己踩过的坑整理出来,目的是为了帮助那些刚迈入职场的设计师,对表单能有一个更好的了解,从而避免在工作中进入误区。

本文来自九分网络

本文共计11000个字,阅读大约需要30分钟 www.9fen.net

万字干货!帮你彻底完整掌握表单设计方法(上)--九分网络 www.9fen.net

九分网络

前言

每个人生活中,都在和表单打交道,各种表格,表单需要填写,而表单在产品中主要负责数据采集功能。作用和现在一样——信息录入。表单也是最常用的信息录入的工具,随着互联网兴起,很多表单被放到了电子屏上填写,特别是最近几年,随着 B 端的兴起,和表单打交道的人越来越多,那么作为设计师,我们如果设计出一个糟糕的表单,会极大影响用户信息的录入的效率。

内容采集来自9fen.net

我们先看看表单的结构,一个表单有三个组成部分:

www.9fen.net

表单标签(标题) 九分网络

表单域(输入框),包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。 本文来自九分网络

表单按钮:包括提交按钮、保存按钮、复位按钮和一般按钮;用于将表单数据传送到服务器上 copyright 9fen.net

万字干货!帮你彻底完整掌握表单设计方法(上)--九分网络

本文来自九分网络

本文来自九分网络

本文主要针对表单域——输入框部分的设计,进行讲解,会涉及一点代码知识,建议查资料阅读。 九分网络

初识输入框

常见的表单类别:文本输入框、密码输入框、其中文本输入框又包含中文输入框、英文输入框、数字输入框等。

内容采集来自9fen.net

其中我们接触最多的就是需要录入信息的输入框。 www.9fen.net

在内容开始之前,先来了解一下输入框在前端开发中的模样。

本文来自九分网络

如图所示,输入框分为标签,文本输入框,和占位符三个最基本结构。根据特殊场景,会加上帮助信息,提示信息,反馈信息等等。 本文来自九分网络

万字干货!帮你彻底完整掌握表单设计方法(上)--九分网络 www.9fen.net

内容采集来自9fen.net

输入框如何设计

在文章开篇我们说到,表单结构为:表单标签(标题)、表单域(输入框)、表单按钮。三部分组成,但我们作为设计师在设计时,考虑的远远多于这三部分,我们更多是去做交互上的思考。

本文来自九分网络

从交互层面上思考,表单在设计上的结构有: 九分网络

表单标签

www.9fen.net

输入限制 www.9fen.net

占位符

本文来自九分网络

input 输入框大小 本文来自九分网络

输入框焦点

内容采集来自9fen.net

多行文字规则 www.9fen.net

报错提醒 本文来自九分网络

唤起键盘样式(移动端专属) www.9fen.net

帮助性信息

www.9fen.net

表单属性(是否必填) www.9fen.net

结果反馈 本文来自九分网络

微文案 本文来自九分网络

1. 标签

此处所讲的标签,更多的是讲表单的布局结构,合理的表单结构,能提高用户阅读效率,同时还能降低信息填写时的错误率。 copyright 9fen.net

我们常见的布局结构:左右、上下、内部。 九分网络

万字干货!帮你彻底完整掌握表单设计方法(上)--九分网络

本文来自九分网络

www.9fen.net

左右和上下结构,左右结构常用在 pc 端,左右结构在用户体验上,视觉路径相对较长,特别是在多行信息录入时,尤其明显。

九分网络

万字干货!帮你彻底完整掌握表单设计方法(上)--九分网络

本文来自九分网络

www.9fen.net

但在网页端我们大多看到的都是左右结构,这是因为有空间占比的元素,在 pc 端,横向空间很大,需要考虑到协调的关系,如果采用上下结构,在内容过多的情况下,就会出现重心偏左的视觉效果。 本文来自九分网络

而且,在 pc 端,视线距离屏幕较远,视觉聚焦面积更大,因此视觉路径较长的这一点就被中和掉了。 本文来自九分网络

因此在 pc 端,如果展示内容较多,可以选择左右结构。 九分网络

万字干货!帮你彻底完整掌握表单设计方法(上)--九分网络

www.9fen.net

copyright 9fen.net

而内容较少,在五个或以内,就可以选择上下结构。 本文来自九分网络

万字干货!帮你彻底完整掌握表单设计方法(上)--九分网络 本文来自九分网络

copyright 9fen.net

而我们在移动端很少见到左右结构,这是因为移动端的限制——屏幕太小,一个横屏展示不开,特别是在标签名字很长的时候,弊端更加明显,因此在移动端更多的是使用上下结构。当然缺点除了识别度会降低,视觉路径增长之外,纵向空间占比也会增加,本身一屏就能 展示完,现在需要两屏甚至更多。 九分网络

而我们在 pc 端,如果标签名字太长,也是可以选择上下结构。根据不同的使用场景,选择相对最合适的方案。 九分网络

万字干货!帮你彻底完整掌握表单设计方法(上)--九分网络

本文来自九分网络

copyright 9fen.net

除了常见的左右,和上下结构,还有内部结构——将标签放在输入框内部,这种也常用在移动端,它的空间占比很小,对移动端的小屏来说,是非常友好的,但如果在交互上处理不好,会有很大的缺陷。 copyright 9fen.net

标签: 用户体验 交互设计 产品 微文案 优设 用户引导 表单设计

郑重声明:本文版权归原作者所有,九分网络转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。


九分网络专业提供公众号、小程序、PC及移动端站点搭建!网站程序及服务器维护:13106499520。微信:452570709

----相关文章----