当前位置: 首页 >  谷歌优化

2B产品设计套路一:表单设计

发布日期:2020-02-23

本系列文章主要是想跟大家讲讲关于2B设计的一些套路,本文主要说的是表单设计。

原型设计应该是入门产品的基本功了,通过原型设计把无形的各种idea变为有形的产品页面是我觉得非常有成就感的一件事。但是相比☆于2C,2B页面级的设计给p№m发挥的余地真的不多,但换言之就是有々很多套路可循。

根据我对2B产品(主要是办公、后台系统)的片面理解,2B产品的核心就是对各种各样数据“管理”。啥是“管理”呢,用人话说就是数据的“增删改查”。

从数据流的角度看,“增删改”都是对系统的输入,在“查”的基础上“显”,可以看作系统向用户的输出。对应到页面上,很多时候我们会通过表单实现增、改的操作,另外可以∫通过数据统计、表格、≡详情页配合筛选、搜索来实现从♥不同维度来向用户输出,实现“查和显”的操作。

这个系列的总结就想说说表单、表格、详情页这三个设计套路⿴。

1.ζ 为什么需要表单

软件/系统/平台本身是没有信息的,像是一个空的架子,表单是用户向系统输入信息的一种非常重要的手段,只有用εїз户向系统添加了丰富的信息,系统才能实现其价值。

比如说下图中的禅道软件本身是没有数据的,要实现其需求管理的价值,就需要用户通过“提需求”的々表单向系统○输入“需求”。只有有了需求的数据,后续的需求管理才能进行。所以说表单是2B产品“管理”的第一步。

当然还有更常见的用户注册,也是表单的一种。

更极端的一种表单是问卷调查,这种情况下表单有可能会非常非常非常长。

总的来说,表单对应的是“增删改查”中的“增И”(有的时候也可能是“改”),是对系统的输入,是用户向数据库▀写入所需的数据,有了这些数据才能迈出整个产品实现管理价值的第一步。

2. 输入什么

既然α表单的主要用途是信息输入,那么输入什么内容就值得仔细思ω考▄了。内容的过多很容易引起用户的焦虑和厌烦(想想那种特别长的问卷调查),内容过少又不足以支撑后续操作。(比如资产管理系统中ㄨ,后续的筛选功能需要“资产分类”,但是新增资产的表单中没有这个字段就会引起错误)

为了平衡用户体验和支持后续操作,我自己总结表单的设计应该遵循“不影响后续Ж操作的最小化”原则。

设计表单内容时,首先我会根据信息架构框定一个范围,一般表单的内容应该是信息架构中相应对象元数据的子集。然后▎▏我们可以对元数据进行分类,分为必填项(不填写后续操作无法进行),选填项(不填写不会影响后续操作,或者填写比较繁琐可以放在编辑中补充的信息),不填项(由系统生成的数据)。

为了保证“不影响后续操作的最小化”原则,表单填写的内容必须包括必填项,尽量包括少的选填项,不需要包括不填项。

还是举一个“新增资产”的栗子:下图右边是资产对象的元数据,对每个元数据进行分类。

比如【资产编码】应该由系统生成,所以在表单中不应该填写; 比如【资产名称】是后续查询、筛选、资产调拨等各种操作都需要用到的元╜素,所以必须在新增资产时就填写; 比如【简称】是【资产名称】的别名,可有可无,不会影响后续的操作,所以是选填项; 再比如【原价】、【使用年限】、【折旧方式】、【购买日期】字段是计算资产折旧所需要的,但是要填写的内容比较多,且折旧的计算相对独立不影响主流к程的操作,所以我把它们归到了选填项,可以在必要的时候在“编辑”功能中再完善。

把所有元数据分类完后,可以得到下图右边的结果,我们的表单具体需要填什么,不需要填什么就比较清晰了。

3. 怎么输入

在上一part中已经确定了表单需要填写哪些内容,那么这一part就需要确定怎么填写这些内容。

表单输入的形态大概有下边这些(来自elem|entUI),至于选择哪种方式填写,有一个原则就是“能选择的不要输入”,更优秀一点的,必须输入时也尽量通过联想给用户一点提示,这个放在下一part“友好的表单”里讲。

上图中必填项的【资产名称】、【SN码】、【型号】是需要输入框填写的,而【资产分类】由于业务需要采用国标分类,所以可以做到通过选择来填写。

4. 友好的表单

作为用户,很多人对填写密密麻麻的表单感到头大,虽™然我们已经在内容上尽量精简了,但还Ψ可以在表现形式上更加友好,让我们的用户不至于在填写表单时候摔键盘。ω

(1)对齐

对齐主№要是指表单标签的对齐,包括左对齐,右对齐和顶对齐三种:

antDesgin:“冒号对齐(右对齐)能让内容锁定在一定范围内,让用户眼球顺着冒号的视觉流,就能找到所有填写项,从而提高填写效率”。

顶对齐比较节约横向空间,但纵向会比较长,所以移动端用的多于web端。综合来看,一般我会选择右对齐。

(2)分块分步

对于填写项比较多的表单,最好对填写项按照业务属性进行一个分组,相同属性的信息一起填写会比较符合用户习惯。还是比如还是举“新增资产”表单的栗子,按业务属性可以⊙把填写项分为基本☞信息、使用信息、采购信息和折旧信息。

由于我们每一类信息数量都不是特别多,可以采用同一页面分块填写的形式,如下:

当每一类信息都比较多,加起来一个页面需要滚动时,或者每一类信息的填写具有比较强的步骤性时,可以采用分步填写的形式,如下:

(3)错误反馈

数据校验的重要性每一个pm都应该了解,通过数据校验我们可以保证用户填写的内容符合我们的要求↘,不会使后续的操作发生异常。如果校验出现错误,作为一个友好的系统,需要给用户一个反馈告诉他们哪里出了问题。

在“增删改查”四字口诀的扩展版“增删改查显存异”中对应“异”部分。

校验方式可以分为前端校验和后端校验两种,前端校验可以实现有无输入、输入格式(要求输入数字但输入了文本、邮箱格式、手机号格式等)的校验,后端校验实现用户名是否存在、密码是否正确等需要比对数据库的校验。

触发校验的条件可以是每填写完一项时校验,也可以是点击“提交”时统一校验。由于有一些后端校验(比如校验用户名、密码是否正确)需要多项内容填写完才能进行,为了统一我一般都会选择点击“提交”触发校验。

错误的显示形式,为了让用户更直观的找到错误♤项,一般是在输入/选择框的下方用红色文字提示,如下:『

(4)帮助

2〓B业务中有些字段信息比较专业,用户可能一下理解不了,所以我们需要给用户一些指引,教给用户填写什★么。

帮助的显示形式主要是【?】图标+ 鼠标 h★over 显示帮助信息,或者是直接用灰色文字显示在输入框下方。第一种hover显示的方式可以展示更多的内容,ぷ输入框下方显示的方式更加直观。

҉

我一般会选择第一❤☜种形式,除了а对输入内容进行描述外,一般会给出一个栗子,这样的帮助更加直Е观一点。第二种形式的帮助在输入框比较多的时候会让整个页面显得比较乱,而且还要处理和错误校验信息显示的关系,所以我一般不会用这种方式展示帮助信息。

(5)搜索、联想◇与推荐

如果以下拉框选择形式填写信息,但是选项非常多,用户会很难找到想要的选项。所以一旦选项需要滚动查找,就最好加上搜索选项的功能。当然最好可以把用户×使用次数较多的选项放在最前面“常用选项/热门选项”Ↄ里,形成一个小的推荐功能。

前边在“怎么输入”中说到“能选择的尽量不输入”,必须输入时最好也可以联想之前填写过的信息,减少用户的输入量。比如“资产名称”有千千万没法用选择输入,但之前在系统中用户可能输入过一些饮水机、电脑、办公桌等名称,之后很有可能还会再输入这些名称。当然上边说的推荐常用输入的功能也同样使用于输入框。

(6)enter换行

▁▂▃▄

enter换行是л我觉得非常能提升用户体验的小功能。在填写完一个输入框后,键盘输入enter,光标跳转到下一个输入框。在输入内容较多时,每次填写完一个空都要鼠标选中下一个输入框亲测很容易让人失去耐心。

5. 参∮考

elemen‖|tUI:https://element.eleme.cn/#/zh-CN/component/instaφllation

antDesgin:https://ant.design/docs/spec/introduce-cn

 

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

题图来自Unsplash,基于CC0协议。

  • 谷歌手势控制黑科技新进展...

    谷歌公司获得了美国监管部门的批准,可部署一款基于雷达的动作感应设备,也就是外界熟悉的Project Soli项目。美国联邦通信委员会(FCC)在周一晚间公布的命令中称,同意授予谷歌一项豁免,以高于目前允许的功率水平运行Soli传感器。FCC称,这种传感器还可以运行在飞机上。谷歌FCC称,这一决定是出于公众利益考虑,通过免触摸的手势技术提供创新设备控制功能。FCC表示,Soli传感器能够使用雷达射束...

  • CBNData:纸尿裤行...

    报告下载:添加199IT官方微信【i199it】,回复关键词【纸尿裤行业研究报告】即可 消费者画像-性别和年龄 消费者方面,和母婴行业整体情况一样,购买纸尿裤的消费者也是女性居多,并且仍在逐年增加 购买纸尿裤的主力是29-35岁年龄人群,并且这个人群的比例远高于整个母婴行业;23-28岁年轻人群的比例逐年增加 消费者画像-网购深度和消费档...

  • 小米:2017年Q2小米...

    7 月 7 日,雷军发表内部信称,小米手机第二季度出货量 2316 万台,环比增长 70%,是小米手机问世七年以来创造的最高季度手机出货量纪录。 根据 IDC 的数据,2017 年第一季度,小米手机的出货量还不及华为的一半,在中国市场排名第五。雷军把过去一年小米手机销量不理想的原因归结为「两次长达几个月的严重缺货」。而在内部信中,雷军把第...

  • 3成女性,竟因为这个原因...

    16-25岁的女性,每周花在自拍上的时间,超过5个小时;当她们自拍时,她们在想些什么?

  • 毕马威 | 资本寒冬下投...

    199IT数据中心微信账户:i199IT 日前,顶尖会计师事务所界中的“四大”之一的毕马威(KPMG)公布了2015年第四季度全球VC风险投资报告。作为收官之作,其不仅详细阐述了世界“热钱”的流向和流量,也指明了未来创新创业的风口所在。 对于全球范围的创业者和风投机构来说,持续半年多的资本寒冬所带来的影响似乎仍然在持续。然而即便如此,就...

  • 北京大学&安世...

    近期,安世联合(中国)与北京大学“中国居民出境旅游风险研究”项目组联合发布《中国居民出境旅游风险报告》,对海外旅游市场进行了解读,对中国出境旅游风险进行了详细的分析。 中国居民出境旅游市场分析 报告从中国居民出境旅游人次、旅游目的地分布和旅游消费渠道三个方面,回顾了过去十年(2007-2016)中国居民出境旅游市场,并对2017至2020...

  • 2017年大数据十大发展...

    大数据市场将会继续增长这一点毋庸置疑,但企业应该如何应用大数据呢?目前还没有一个清楚的答案。新的大数据技术正在进入市场,而一些旧技术的使用还在继续增长。本文涵盖大数据未来发展的十大趋势,这些趋势可能对2017年及以后的大数据市场产生极大影响。 专家预计,机器学习、预测分析、物联网和边缘计算将对2017年及以后的大数据项目产生深远影响。 ...

  • 这几个因素会影响到网站优...

        其中一些因素将影响网站优化的作用。许多SEO的搜索者仍仅停留在排名阶段,而朋友链很难改变。那么百度搜索引擎的关键字排名又如何呢??如何提高您网站的排名?网站的内容和搜索关键词的相关性,网站的相同主题和内容将被百度认可,甚至您的网站减少也会使用户感到不满。网...

  • 如何分析付费用户,第一部...

    付费用户就是为我们的产品带来收入的人。了解付费用户行为的细微差别是很重要的:比如他们都买了什么,付费频率是怎样,花了多少钱等等。了解用户在上述行为中的感受是很重要的,用户投资了我们的产品是否让他们感到满意。实际上,在F2P网络游戏中玩家的每次付费都是投资:在一开始的时候玩家的付费,会在最后得到一个投资回报率(ROI),可以用货币化的方式衡量玩家体验的情绪。因此我们应该了解用户,即使他们是少数的.....

  • 【网络广告销售技巧】设计...

        一个好的营销网站是企业24个小时的推销员,很难在规划上是不合理的,客户能够付出,假如做到了,那就是你的主动东西每天赚24个小时。横幅直奔主题,中心卖点是买卖网站最重要的网站之一。一个好的横幅可能是规划的中心。         直奔主题,...

  • Ponemon Inst...

    根据Ponemon Institute周三公布的网络犯罪报告显示,对美国大公司的网络攻击导致这些大公司今年损失1270万美元,同比增长9.7个百分点。该报告显示,网络犯罪给大公司造成的损失当中,业务中断和信息丢失占了近四分之三。 研究还证实,将安全置于优先考虑的公司,年内和安全事件相关的成本更低,使用安全技术防止关键系统被入侵的公司...

  • 今日头条:AI助力用户推...

    在上篇中主要讲了AI助力实现智能推荐的原理流程和方法,在下篇中笔者将通过上手操作,来讨论具体落地的方法。 本篇笔者选择今日头条中的13个类别的信息作为上手对象,如:时尚、旅游、美食、育儿、财经、图片、探索、娱乐、搞笑、直播、体育、科学等,分别通过抽取粉丝数超过百万以上的用户最近的文章、用户标签和分享的图像,最终在13个类别上获取了353个用户的I...