知识分享

  • 首页
  • 市场分析
  • 需求分析
  • UI设计
  • 产品运营
  • 产品设计
  • 项目管理
  • 新玩意儿
不积跬步无以至千里
不要停留,欣赏沿途的风景
  1. 首页
  2. 新玩意儿
  3. 正文

B端交互组件之:表单篇

2020年12月8日 262点热度 0人点赞 0条评论

编辑导语:每个人生活中,都在和各种表单打交道,而表单在产品中主要负责数据采集功能。表单也是最常用的信息录入的工具,随着互联网兴起,特别是最近几年B端的兴起,表单的重要性越来越突出。那么我们应该如何设置表单,才能提高效率呢?

引言:

交互主要指人机交互,说的是人与机器之间的互动,而这个机器又特指计算机;人对机器发出指令,然后机器做出反应,并通过显示器反馈给人。

具体到应用软件中,系统一般需要获取用户的数据,有的是需要用户手动输入,有的是需要用户选择输入,最终通过提交动作,将数据传递给计算机,计算机通过处理并反馈给用户。

以上便是表单的具体使用场景,也是系统常用的获取用户数据的手段。我们常说的输入与反馈,这个输入也可以简单理解为表单,例如:登录注册信息输入、查询条件输入、新建数据输入等。

下面我会把表单这个组件层层剖开,细细道来。

一、表单所处位置

设计一款产品时,表单会用的比较多,作为主要的输入操作的表现形式,会体现在很多的地方,下面会对表单所处位置进行详细讲解。

1. 页面

打开某个页面时,可以看到表单组件,用户输入数据后,点击提交按钮,数据传递给系统。正常情况下,页面需要刷新,输入的数据根据业务要求,有的需要保留,有的不需要保留。

在输入查询条件搜索后,业务上一般是要求保存刚才输入的查询条件的,如果要去除掉,可以一个个手动删除掉,也可以点击重置按钮,清空所有查询条件。

登录系统时,需要输入用户名和密码,一般用户名可以保存,并且支持保存所有已经登录成功过的用户名,但是密码是肯定不用保存的。

2. 弹窗

在某个页面上操作后,还需要用表单组件输入数据时,可以采用弹窗形式或者再开一个TAB页的形式。

再开TAB页又分为在系统内开TAB页和在浏览器上开TAB页,唯一需要注意的就是,数据输入提交后,该TAB页需要自动关闭掉并同时刷新最开始操作页的数据。

采用弹窗来承载表单组件的话,页面层级就会看起来简单很多,输入数据提交后,弹窗会自动消失并同时刷新页面内容。这也是产品设计比较常用的方式。

3. 多层弹窗

当用弹窗来承载比较复杂的表单组件时,为了让层级更清晰,用户认知属性更好,可能需要在弹窗上再增加弹窗来承载细节的表单组件,这里我姑且称为多层弹窗吧。

第一个弹窗一般是作为一个表单集合的角色,某个表单元件还需要更细节的表单展示,这时通过点击再打开一个弹窗去承载细节的表单组件。

输入数据点击提交后,细节弹窗会自动关闭,并将数据传到第一个弹窗对应的表单元件内,在这个弹窗内点击提交后,弹窗也会自动关闭,并自动刷新页面展示数据。

二、表单元件

表单组件是由很多个元件组成的,下面我会详细谈谈常用的一些元件。

1. 标签

标签其实就是文字标识,一般作为输入元件的名称,正常来说是放在输入元件左侧,输入元件包括文本框、文本域、日期时间、单选框、复选框、下拉框等。

例如:标签叫名称,右侧放一个文本框。

PC端的标签一般是放在输入元件的左侧;而移动端的标签除了可以放在左侧,有时候也会放在头部或者放在输入元件内,例如文本框内。

当输入元件信息量很大时,你也可以把标签理解为标题。一组单选框,数量大概4个,这时一般会用到一个标签,作为这组单选框的标题。

例如:标签叫年龄,单选框值分别为18岁以下、18到24岁、25岁到35岁、35岁以上。另外标签也可以辅助表达必填字段,我一般是把红色星号放在标签文字左侧。

2. 文本框

文本框也叫单层文本框,就是里面输入的内容是不能换行的;对应的也有多层文本框,我们叫文本域,里面的内容可以输入多行。

文本域比较典型的是线上简历中的自我评价,一般会有字数限制,限制提示一般放在右下位置,格式为0/150,左侧代表输入的字数,右侧代表最多能输入的字数。

如下图所示:

单层文本框,针对输入内容,一般分为字符文本框和数值文本框。字符文本可以随便输入,系统默认都当成字符串来处理。

数值文本就是只能输入数字,一般金额类的字段用的比较多,其他一些带有单位的也需要用到数值文本框,例如单位为年,文本框肯定只能输入数值了。为了让系统更人性化,设计时可能还需要考虑限定字数。

3. 日期时间

日期时间元件一般也用文本框样式,只是一般框内右侧会放一个日期图标,点击文本框,弹出日期时间控件,有的业务上也要求可以手动输入日期,固定好格式就行了,例如:20201202。

日期时间框放一个代表某个时间,如果是放两个框,则代表时间范围。一个框表示具体的某个时间,可以是日期也可以是具体的时刻,这个比较好理解。

如果是时间范围,则会有一些明显的校验要考虑:

  • 右侧日期不能小于左侧日期;
  • 限定了时间范围的话,左右两侧日期值不能超过这个范围;
  • 常识性的时间选择,比如预定酒店选入住时间,不能选今天以前的日期等。

另外说明一点,时间范围如果输入同一时刻,则代表没有范围,只有这一时刻。

例如:在用日期时间元件作为查询条件时,一般是一个范围,如果我只想查某一天的怎么办,便可以两个框输入同一天。

我记得以前有开发把日期框设置成可以只输入左侧那一个,代表只查某一天,其实这样是会给用户歧义以及造成一些误操作,体验并不好,可以查范围的地方,如果只想查某一天,还是应该输入两个一样的日期。

4. 单选框

单选框元件一般用于选项不多的情况,用户可以一眼看到所有内容,对应的如果选项内容很多,一般用下拉框,原则就是超过5个选项用下拉框。

单选框里面的选项选择是互斥的,只能选择一个,也就是传递给系统的数据值只有一个,当选项值只有两个时,也类似于开关一样的元件,例如:是和否、打开和关闭、开启和禁用等。

这类选项内容,除了可以用单选框组件外,也可以使用开关组件。

这里再补充一点,还有种滑块组件,也可以代替单选框组件使用,原则也是4个选项以内,我个人觉得滑块组件在视觉上会更美观一些。

如下图所示:

5. 复选框

区别于单选框组件,复选框组件就是支持选择多项内容,即传递给系统的数据值可以是多个。

单选框组件在使用时,一般会使用一组单选框;而复选框除了使用一组以外,还可以只使用一个复选框。这个时候也会给人一种互斥的感觉,要么选择,要么不选择。

在早期Widows系统中,开关也会用复选框组件来表达。

6. 下拉框

下拉框组件除了在选项内容很多时可以代替单选框组件使用,其实也可以将下拉内容换成复选框,支持一次选择多个内容。

当选择多个内容后,会在展示框内显示多个内容,中间用符号隔开,这个符号可以跟开发去协商好。

如下图所示:

当然,内容很多并且带有一定组织性时,我们也可以用树形组件作为下拉框选项内容,同时也支持多选,根据业务需要而定。

三、表单反馈

从前面我们可以知道,表单主要是让用户输入数据的,按照正常的流程,用户是输入正确的数据,系统给出正确的结果。

当用户输入的内容有误时,系统要及时做出校验并反馈给用户,让用户及时改正并输入正确的数据,以便达到用户的任务目标。

下面我将来聊聊表单的反馈:

1. 右侧反馈

早期设计餐饮行业CRM系统时,就是采用的右侧反馈模式,这种模式需要表单元件右侧有足够的空白区域,一般用单列来摆放元件。

如下图所示:

校验触发的话,可以是提交时一起校验,也可以是输入后即时校验,我个人觉得即时校验效果会更好点,方便用户快速发现问题。

如果是提交时一起校验,对用户的情绪是会有影响的,当然原则还是看你们的业务需求,毕竟各行各业的不同产品的业务场景都是不一样的。

2. 底部反馈

当表单内容很多,需要多列摆放时,我们就不能使用右侧反馈模式了,我们可以使用底部反馈或者浮层反馈。

底部反馈需要表单元件上下之间有一定的留白空间,如果是有反馈提示时,强行去撑开页面高度,这种体验也是很不好的,有种忽闪忽闪的感觉。

如下图所示:

3. 浮层反馈

浮层反馈模式一般用于表单元件需要多列多行排列时,整体看起来比较紧凑,校验反馈一般用浮层方式,不会破坏页面原有的紧凑感。

如下图所示:

这里有个很尴尬的问题,如果采用浮层反馈模式,并且是需要提交时才去校验,如果校验反馈很多,反馈后,整体看着会很乱,满屏的浮层,互相之间可能还会出现遮挡。

这里就需要做取舍了,需要根据实际的业务情况去判断。

4. 弹窗反馈

弹窗反馈在这里我是作为一个反面来举例的,这种模式一般只能是提交时去统一校验,如果问题很多,需要点击提交按钮多次,反复的修正校验再修正,用户会很疲惫,这种模式一般不建议。

以前在对一些老系统做用户体验优化时,就经常遇到这样反馈的系统,真是不知该如何吐槽好了。用户在使用时经常会很烦躁,遇到一些对计算机操作不是特别熟的人,会把这种体验当成BUG提出来,是不是让人很无奈。

站在用户角度而言,也无可厚非,我们本来就是要提供更人性化的产品给用户使用,实现模型是给程序员用的,用户还是要更多的使用心理模型。

四、总结

表单元件其实有很多,以上列举的只是我觉得比较常用的一些,差不多都是属于结构化数据输入,其实还有很多非结构化数据的输入,例如图片、视频、文件等。

交互设计师画的原型需要包含所有页面,而视觉设计师除了品牌调性和风格以外,只需要把组件设计出来。

例如:表单组件中的文本框,下拉框等,默认是什么样,滑过什么样,点击什么样,禁用什么样,与用户交互后又该怎么反应等,这些细节就需要慢慢去打磨了。

 

作者:D.cheerful,微信号:dcf8859,微信公众号:D哥设计。

本文由 @D.cheerful 原创发布于人人都是产品经理。未经许可,禁止转载

题图来自 unsplash,基于 CC0 协议

给作者打赏,鼓励TA抓紧创作!

标签: 交互设计 产品 产品经理
最后更新:2020年12月8日

小虾米

同理心,洞察力!

点赞
< 上一篇
下一篇 >

文章评论

razz evil exclaim smile redface biggrin eek confused idea lol mad twisted rolleyes wink cool arrow neutral cry mrgreen drooling persevering
取消回复
最新 热点 随机
最新 热点 随机
1小时6.5元,共享单车我骑不起了 我在椰树直播间,花了三分钱 东方甄选走红这一年 京东自营开始踩刹车 “单车刺客”6.5元一小时!共享单车平台还是赚不到钱,你被刺了吗? 政务CRM-CRM在政务行业的应用现状 Temu的砍一刀,迷倒了美国人 社交媒体围攻BOSS直聘 组件应用 | 个人主页头部,应该如何设计? 远程技术团队,操作回顾会怎么开? 我在网上卖“土”,年入5000万 增长模型:产品增长的通用思维框架 “大人”,榜单时代变了 汽水音乐一周年:“抖音BGM播放器”的起与落 一个方法论,搞懂支付的一切 密码强度计有哪些局限性? 618回归“价格战”:京东淘宝进入存量竞争,小红书、视频号深入电商直播 兴趣电商未来会超过货架电商吗? 直播带货再难造神:天涯重启失败,7天只卖了36万 鏖战13年后,线上超市的肉搏还在继续
被集市收割、被买家嫌弃,“摆摊后浪”有点惨蓝领用工招聘平台的数字化建设思路干货分享:WMS系统—PDA的应用iOS 17,能否守住「iOS神话」?系统功能设计:网络加速器系统产品需求设计电商扫盲第一讲:GMV的底层逻辑打造一个基于本地社区的闲置交易平台,你看好吗?东南亚出海洞察:去东南亚为直播电商开荒,没有超头主播,货品供给不足……定金+尾款模式背后的套路天涯老用户的自救,让我明白情怀是最不值钱的东西抖音上线酒店日历房,其他平台会慌吗?从需求到设计开发,产品质量问题如何分析靠咱们看腻的电视剧,爱奇艺和腾讯在东南亚成了顶流如何让你的“对内B端产品”看起来有价值?设计走查知多少产品思考:视觉冲击!以图片展示金额,“省钱卡”这样玩就对了多多买菜为什么比美团买菜要便宜?都在骂网暴,为什么网暴一直没有停过韩国漂流记:明星在面前,咖啡在手里,中国互联网公司在广告墙自动驾驶风口退潮的深层逻辑
明星自己做 App:不想占用“公共资源”,为什么老是失败? SaaS生命周期系列文章一:SaaS开发生命周期详解 设计中的交互设计 保护隐私同时,内容推送该如何做? 产品经理跟程序员友好相处的3个技巧 从大厂产品中学习用户体验的7项原则 数字科技是如何成为联结点的? 案例分析:智慧物流行业的现状和未来 2022年中国个人云盘行业发展年度分析 慢下来的互联网医疗要等下一阵风? 居家办公,带火了我的生意 面对一个新功能,我们需要怎样的思考? 产品经理下神坛:“小龙”罕有,Bug常存 品牌如何看透新消费人群Z世代,抓住人口代际红利? 2021年度作者评选公布:你支持的TA上榜了吗? “变味”的扫码点餐:不获取个人信息不能吃饭 面向Z世代,如何做年轻化体验设计探索? B端选择录入类组件的使用辨析 转转投诉量激增背后,二手电商该怎么解决信任痛点? 和100位00后聊完,我明白了为什么还有6亿中国人仍不放弃QQ

COPYRIGHT © 2023 知识分享. ALL RIGHTS RESERVED.

Theme Kratos Made By Seaton Jiang