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

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协议。

  • 双11买洗衣机:天猫V榜...

    一年一度的“双11”购物狂欢日即将开启,今年,天猫推出了“天猫V榜”,为用户“买买买”解锁新姿势。在洗衣机V榜中,卡萨帝双筒洗护12KG洗衣机、西门子10/7KG大容量洗烘新品、松下10kg纳米水离子除味洗烘洗衣机等都榜上有名,是用户关注度很高的产品。简单说,“天猫V榜”是一款集大数据推荐与消费者意见于一身的高品质购物指南,它以阿里平台所属用户消费行为数据为基础,采用5大算法模型、36项数据指标,...

  • 知识春晚另辟蹊径:低成本...

    2020鼠年除夕出现了一台令全国观众耳目一新的春晚——知识春晚。知识春晚由得到APP、深圳卫视、爱奇艺联合出品,罗振宇、张泉灵、庞玮担纲主持,通过55位素人嘉宾演讲,为观众呈现了一场10小时直播的知识盛宴,展现当代平凡人身上不平凡的生活智慧和进取精神。此外其特别之处还在于:没有设置传统歌舞等娱乐节目和大型灯光布景,现场除了讲者和工作人员之外没有普通观众,是一台极为简单朴素、内容大于形式的晚会。  ...

  • 世界经济论坛:2020年...

    世界经济论坛发布了“2020年全球社会流动报告”。通过新的社会流动性解决不平等问题需要全球动力。在主要发达和发展中经济体中,收入最高的10%的人口的收入是收入最低的40%的近3.5倍。 北欧和欧洲部分地区的表现优于世界其他地区。为其居民提供最平等机会的国家大多是北欧经济体:芬兰、挪威、瑞典、丹麦和冰岛。从排名来,德国排在第11位,法国排名...

  • IDC:2023年全球二...

    国际数据公司(IDC)预计,2019年全球二手智能手机销量将达到2.067亿部,比2018年(1.758亿部)增长了17.6%。到2023年,二手智能手机销量将达到3.329亿部,总价值达到670亿美元。2018年至2023年二手智能手机销量复合年均增长率(CAGR)为13.6%。 这一增长可以归因于对二手智能手机的需求上升。与新型号相比...

  • B端产品设计中,审批流程...

    在B端产品中,审批流程是经常使用的功能模块之一。那这个常用的功能,具体该如何设计?看看作者的经验,相信能给你带来不少启发。 审批流的场景 工作流主要在OA等内部办公软件用到,比如请假、加薪申请、转正申请等,这种场景下,一般需要多个人协作。 而对于大多数B端产品来说,要用到的场景,就是财务审批,需要业务员和财务人员、出纳、公司领导一起协作。 审批流...

  • 滴滴成立“医护保障车队”...

    1月25日消息,滴滴成立“医护保障车队”,为武汉各医院医务工作者提供免费出行服务,春节无休随时待命,所有费用由滴滴承担。“医护保障车队”首批100名司机已配备防护装备和消毒液,25日凌晨已开始提供服务。以下为滴滴声明全文:为更高效协助疫情防控工作,在向武汉有关部门报备后,滴滴已在当地组建“医护保障车队”,为武汉各医院医务工作者提供免费出行服务,春节无休随时待命,所有费用由滴滴承担。从1月24日晚深...

  • Edison:2019年...

    Edison发布了“2019年冬季智能音频报告”。通过对1002名18岁以上的成年人的调查,Edison分析了智能音箱在美国的普及情况。 目前,24%的美国成年人拥有智能音箱,约6000万人。相当于每4个美国成年人中就有一个是智能音箱用户。不仅普及率在提高,智能音箱的认知度也在增长。到2019年12月,84%的美国人知道智能音箱设备。显然...

  • 阿里巴巴驰援武汉:设立1...

    1月25日晚间消息,阿里巴巴今天宣布:设立10亿元医疗物资供给专项基金,从海内外直接采购医疗物资,定点送往武汉及湖北的医院。阿里巴巴国际站相关人员已经赶赴印尼、韩国等14个国家和地区,寻找医疗物资供应商。截至今天下午3点,已经接触了42家具备优质口罩供货能力的海外供应商,正在详细统计医疗级口罩的供货能力。同时,阿里巴巴将继续在国内动员匹配产能,直接协调生产和采购医疗物资。目前已协调义乌、深圳、广州...

  • 酷云互动:2020中央广...

    PDF版本将分享到199IT交流群,支持我们发展可加入!

  • 爸妈总被谣言忽悠?科普专...

    “震惊!常吃这几种食物能够治好癌症!”“90%的人都不知道,抽烟对人体有益!”“医生提示:在人中涂风油精可有效预防呼吸道疾病”上述丝毫没有科学依据的不实信息,正在给大量年轻人带来烦恼。这是因为,许多老年人往往对这些谣言深信不疑,平时胡乱养生也就罢了,有的就连得了病也不愿去医院,而是靠各种稀奇古怪的食材自我治疗,直到病情加重。更令人懊恼的是,做子女的花了很大力气,却怎么也无法说服被谣言”洗脑”的老人...

  • 离开武汉的500多万人都...

    500多万离开武汉的人群中,有不少是回到自己的家乡,还有的飞去了国内外更远的城市。26日晚,湖北省人民政府新闻办公室就新型冠状病毒感染的肺炎疫情防控工作召开新闻发布会,武汉市长周先旺今日表示,因为春节和疫情的影响,目前有500多万人离开武汉,还有900万人留在城里。这500多万人到底去了哪里?根据第一财经此前的报道,由于武汉是外来人口流入城市,武汉的外来人口返乡过年也是极为普通的事情。根据武汉市文...

  • Netflix:本土用户...

    美国流媒体平台Netflix公布2019年第四季度财务报表。财报显示,Netflix第四季度总营收为54.7亿美元,略低于市场预估的54.52亿美元,较上年同期增长30.6%;净利润为5.87亿美元,比上年同期的1.34亿美元增长338%。但Netflix在美国本土用户增长明显逊于预期,比市场预期少增30%。 Netflix四季报显示,...