移动端表单表格设计

8天前发布

原创文章 / UI / 观点
木槿425 原创,如需商业用途或转载请与木槿425联系,谢谢配合。

本文写于今年1月,最近整理了自己工作记录想分享出来。

B端产品上表单、表格也许复杂的很令人厌烦,但它们是富含数据的文件中至关重要的构成元素,并且值得我们进行细致的设计思考。通过设计更高效、清晰、易于使用的表单、表格,能使用户在使用表单表格时快速分析理解大量数据的体验,提高办公效率。于是本文将分享出个人对表单设计原则与技巧,以下观点是个人观点,如若有更好的方法欢迎提出。


优化信息框架


旧版中TAB选项表形式单一,实际使用过程中长时间单一的选项样式会使用户产生视觉疲劳,降低体验快感。为了提升产品敏感度,修改为按钮图标文字式瓷片卡,增加用户紧迫感和对产品详情的了解欲望。

对于产品分类表单展示从视觉上进行了调整,主要体现在层级关系、亲密关系。目的是让用户表单填写过程中区分层级按钮,分类按钮颜色降低透明度,从视觉层级上更舒服,更精致。操作按钮放在右边更符合用户行为操作习惯,同时当多种产品分类表单时减少户在行动时的困惑和犹豫,确保用户在表单填写过程中的流畅体验,从而实现最终商业上的交易成就。


在旧版表单中分类按钮都用了纯色,按钮位置不统一,按钮本是辅助用户快速做出选项的,但在这个场景中却干扰了视觉。按钮降低透明度帮助用户预先区分出主要行动和次要行动,通过视觉语言强调主要按钮,弱化次要按钮,引导用户进行选择。修改“投保地址”减少手动输入,提供用户的历史输入项


在选项列表中,“是”“否”是选按钮必须是互斥的,这意味着当选择一个选项时,之前已选中的选项会被反选。因为有互斥的存在,选项内容只的两个,所以这一场景中用开关按钮更简洁。

旧版前资料上传列表,第一眼看到的是满屏文件夹,而这些并不能帮助用户进行浏览或操作,反而会造成视觉干扰。改版后对文件图标大小,缩略图尺寸,以及标题信息大小,进行整体调整,从而提升浏览效率。


调整文件图标占比,突显更为重要的标题信息。优化标题,时间信息文字比减弱,标题更明显,提升文件浏览查找效率。缩略图缩小排列与文件形式保持统一,视觉层级浏览理舒适。文件信息列表层级依次为:图标 > 标题 > 时间 。


在资料上传中文件与图存在着两种删除交互方式,给用户造成了困扰操作。改版后将图片与文件的删除操作展示形式统一,同时添加资料上传资料可全部清除功能,给用户减少了单独删除操作。


询价表单是销售人员最高频的路径,针对这个场景,视觉设计必须服从功能设计优先,紧跟设计潮流—极简风格,打造高级感的设计理念,通过视觉设计区分信息层级,让用户操作、浏览时更便捷。表单从以上几个维度进行优化:大小、重量、间距。



新增功能优化


在功能架构上进行视觉优化,整体设计中主要体现在:调整板块结构,运用图标设计、强化商机详情内容属性,提升点击率,简化设计,增强用户粘性。



商机详情的拜访列表,增加“点评商机”功能。仅在未关闭/未作废商机的拜访记录中增加“我要点评”,点击“ 点评”可对拜访记录入评论,200个字以内。


关于评论排序


看最新的评论

用户对于信息流的浏览方式永远都是自上而下。当信息流相对固定时,团E宝都是内部人员对商机的查看评论,属于熟人社交,评论数相对较少,在一屏内就可以看完全部的评论数,在这种情况下选择倒序没有必要。


看懂评论

针对已有的评论进行回复,评论之间的互动就导致评论之间不是相互独立的,彼此存在关联性。按照评论发布时间的正序排列,用户自上而下的浏览方向,先评论的先看到,更能体现出评论之间的逻辑关系,可以让用户更好的厘清之间的关系。


要看有用/好玩的评论

所有跟评论相关的信息都可以作为排序的依据:评论时间、点赞量、被回复数。除了前面提到的评论时间,另一个比较常见的排序指标就是点赞量。但在商机详情中却不以点赞量为依据,因为拜访记录是以正序往下按排的。


正序排列 or 倒序排列


线型结构

线型的评论列表,从样式来看,整齐划一,简洁明了。商机的评论虽没有社交APP多,但是存在评论中间隔了很多其他人的回复,想要看一个问题就要爬楼去找对应的回复关系。因此想要完整的查看你俩之间的回复记录是非常困难的,对于商机的及时性看清互动关系非常重要的。因此,一些产品选择使用了树型结构。


树型结构

树型结构的设计我们需要考虑的是次级评论的展示问题。一级评论像是树的主干,次级评论是依附于主干的分支。树型结构会聚合展示所有相关的次级评论,用户可以看到清晰的对话记录。虽然商机的评论少,但是商机的评论信息去对销售重要程度比较高,所以为了理清关系用了树型评论。



评论更新频率不是很高,基于产品定位,用户希望看到围绕一个观点大家的讨论记录,所以更加关注的是评论之间的逻辑性。因此采用的还是正序排列,按照评论的发表时间依次展示,帮助用户理解。



表单设计


标签分类样式

左标签:左标签在目前来说是最常见的一种标签样式。

顶部标签:与左标签相比,顶部标签可以给输入框的内容腾出足够的空间。会占据更多的纵向空间,之前一屏就可以展示的内容,现在用户需要滑动页面才可以看完。

行内标签:样式看起来很适合手机端的表单设计,因为它可以极大的减少了视觉噪音。但当用户点击输入状态后,就看不到这些标签了,那么用户记忆力会很吃力,不利于用户短期记忆。


输入域符合预期

如果用户输入的地址过长,就会造成信息的展示不完全,这对用户体验来说是致命的。因为用户在进行下一步操作之前都会对输入的内容进行审核确认,如果连完整的内容都无法获知或者获知的难度较大,则用户根本不会进行下一步操作,这就造成了操作流程的中断。所以,我们在使用左标签的时候,一定要考虑对多行文本的展示。输入域的长度与预期输入的内容成正比,确保输入字段长度符合用户心理预期,并能在表单中能完整呈现。


以简驭繁

以证件类型和证件号为例,分开展示输入会占用整体页面的高度,相对B端产品来说能节省空间就节省空间。而证件类型、证件号码两者同时存在的,合并在一起合理利用空间的同时能让用户快速做出选择,当用户进入页面时证件类型默认带出用户常选项。


*号的使用

在PC端沿用通用*符号习惯,来区分信息层级,但在移动端当表单中必填项多于非必填项时,每项表单中都加 * 只会给用户增加识别难度,让用户陷入迷惘无法快速完成表单。当表单设计中,必填项多于非必填项时,隐藏 * 号标记,转而通过暗提示语标记非必填项的形式来帮助用户识别。


*号的总结

预输入清除

根据需求可以在表单输入框上有些内容是系统已预填了信息,无需用户二次点击输入完成,但当用户需要修改时,需要对信息进行逐字修改或长按信息点全选再删除,这样修改太过于麻烦,这种情况下可以考虑在输入框内加一个删除的icon,点击icon直接清空当前列表框信息,这样表单设计更高效。


减少手动输入


联动键盘

移动端的虚拟键盘由于受限于屏幕尺寸,在各种类型键盘间进行切换的成本较高,且在数字和各类中英文标点符号的输入上效率较低。因此,在移动端长表单的设计中,需要更多考虑:默认调出哪种类型的键盘,才是当前场景下最为高效的选择。如下面的案例所示:改为联动键盘后,可以在同 1 个底部弹出层中,流畅地填写完 3 个表单项,有助于打造更为便捷高效地填写体验。当连续多个表单项的输入方式各不相同时,可考虑使用联动键盘。


键盘匹配

根据填写类型不同,呼出对应的键盘,省去用户收起点开键盘的重复动作和表单上下填写项的切换,让填写表单的过程更为顺畅,用户思考不被打断。不应该把所有的输入框都做成文本框样式,用户必须调起键盘一个字一个字地输入,这种体验是非常不友好的。


关于文本框是用全键盘还是九宫格,手机从最开始的功能机开始,就是直板手机,智能手机也是这样演变过来的,功能机的时候用的就是九宫格,很多人都已经习惯了,还有九宫格在手机上的布局更加合理,全键盘看起来是把所有的字母都展现出来了,可是手机本身就只有那么大,全部展现出来,就会导致键盘的字母很小,看都看不清,对于很多人来说都打不快。


系统自动识别

根据表单需求,收集姓名、性别、出生日期、身份证号四个输入项。可通过后台技术的一些手段从身份证号中提取出信息,用户原本要输入4个项目信息,现只输入2项信息输入。身份证的倒数第二位可以判断性别:奇数是男,偶数表示女,出生日期大家都能看出。而这样操作成本大大下降,减少误输可能性。


1-2位省、自治区、直辖市代码;3-4位地级市、盟、自治州代码;5-6位县、县级市、区代码;7-14位出生年月日,比如19820426代表1982年4月26日;15-17位为顺序号,其中17位(倒数第二位)男为单数,女为双数;


结合不同的场景去思考会发现无限多的做法,减少输入项个数的目的也只是为了让完成表单变得更加高效。




代替输入

由于 OCR 技术的发展,拍照识别文字的速度和准确度都有了较大的提升,最常见的就是各大金融服务应用中拍照识别银行卡号的功能。如下所示,被保人名称、身份证。证件有效期可以通过OCR识别。如果采用手动输入的方式,不仅效率低且输错可能性较大。在这里应用 OCR 技术,旨在降低输入成本,提升用户体验。提供当前场景下的常用选项,用选择代替输入是最为基本的思路。需要注意的是,如果常用选项不能涵盖用户可能填写的全部内容,那么手动输入自定义选项的功能也要提供给用户。




预输入

表单设计如:用户在填写长表单前已经在平台填写了联系方式、名称或其他信息,在用户进行信息录入时,可以提供合理的默认值有效简化操作步骤,减轻用户填写表单的负担,更快地帮助用户完成表单内容的填写。如果你确定对用户足够了解,在用户进行信息录入时,可以提供合理的默认值。因为对用户来说,填写信息永远都不是一件有趣的事情,设置合理的默认值可以节省用户的操作时间。


利用移动端设备能获取的信息

尽管移动端在输入上没有那么便捷,但获取到信息种类与精确度,却具有一定的优势。比如,移动端设备能较为精确地获取到用户当前的地理位置,这就为某些需要填写位置的表单提供了便捷(如收货地址、联系地址等)。再如,调用通讯录的功能也经常出现在各种需要填写手机号的表单中。




提供用户的历史输入项

一份表单中出现了多处相同类型的表单项,这时可以提供用户的历史输入项供其选择。另外,很多填单页也会将用户输入的信息自动保存为常用收货人等,同样也是用到了这一方法。




二次确认

多场景考虑异常情况

移动端的使用场景比较广泛,用户在填写场景较为不稳定,吃饭、行驶、过马路等场景填写,为了防止用户误操作而丢失已填信息的场景,需要在此时进行二次操作确认,确认用户操作意图。当然,如果用户没有对表单进行任何编辑,这样的退出操作是不需要二次确认的。


流程闭环

原页面表单填写提交后,提示成功的弹窗还停留在表单填写页面中,只能原路返回,甚至还可以重复提交。优化表单后,点提交按钮,跳转提交成功的提示页面,让流程形成闭环。同时在结束任务时应给予用户情感反馈,让表单设计带有温暖情感设计,需求给予用户积极向上的夸赞,在用户没有完成提交任务时,不应该给予用户负面情绪。




表格设计原则


数字要右对齐

数字右对齐是为了方便比较时,首先看个位,然后是十位、百位。大多数人们也是这样学习算术的——从右边开始,向左移动,动态地传递数据。所以,表格中的数字应该保持右对齐


文字要左对齐

文本信息从左向右读。通常是按文字顺序排序的方法比较文本信息:如果两个条目以相同的文字开头,就比较第二个文字,以此类推。如果没有左对齐,对于有对数据进行比较时这种浏览文本会使人烦躁。


表头与数据对齐

表头通常应当遵循表格中数据的对齐方式。这是的表格垂直方向看起来更整洁,并提供了一致性和上下文环境。


不要使用居中对齐

居中对齐会使表格的行看起来“错落不齐”,浏览表格会给人造成胡里胡涂感,常常要使用额外的分隔线和图形元素。


有效的数字

有一种简单的方法能让你的表格看起来更整齐,就是保持一致的有效数字(一般情况下指小数点后的位数),这样每一列数据中的小数点后位数都是一样的。有效数字细究起来就无尽无休,这里就不过多详述,我的简单建议就是:表格数字不是越精确越好,需要多少有效数字就显示多少,不必太多。股票基金的有效数据又不同于此。


如果表单表格浏览或者使用让人恼火烦躁,那是因为这些表格太烂了要背的锅,完全没有经过设计表单表格。设计是表格表单的关键,如果设计恰当,浏览比较复杂的数据会很容易,如果设计不妥,数据就无法理解且会传递错误的信息数据。在B端设计中对于信息繁杂利用如何利用狭窄的空间,仍然可以区分各元素,且不妨碍浏览使用,这就是设计时要考虑的。看似简单的背后是不简单的思考过程。


35
- 位站酷推荐设计师推荐 -

声明:站酷(ZCOOL)内网友所发表的所有内容及言论仅代表其本人,并不反映任何站酷(ZCOOL)之意见及观点。

    没有新消息