首页 > 名字大全 > 微信名字 正文
【班级四组微信名字大全】关于b侧表格设计的几点思考

时间:2023-03-05 02:35:20 阅读: 评论: 作者:佚名

指南编辑:B端的表格设计对产品体验起着至关重要的作用。作为收集信息、执行任务、形成产品闭环的关键阶段,表格应该如何更好地设计?一起看一下吧。

表格是收集信息、开展工作、形成产品闭环的关键步骤。在一系列B端产品中,有较高频率的应用场景。随着B端设计的精细化,表格设计对B端产品的经验起着越来越重要的作用。

本文从高效清晰的两个表格设计原则出发,阐述了B侧产品的表格优化思路。制定设计规范,为复杂的业务场景提供设计决策依据。

一、表格定义

表单页面是用于添加和输入信息的页面类型。用于在用户请求时向系统提交输入信息,或指导用户设置应用程序。表单的一般类型:基本表单、分组表单、阶段性表单。

1. 基础表单

是相对简单的表单类型,通常只需少量信息即可完成的任务。登录注册界面页面等。

2. 分步表单

将复杂的填充内容组织成线性过程,并分解为多个阶段。

好处:为用户提供明确的工作期望值,并快速了解填充过程和进度。减少用户的写作负担,降低错误率。

1)一般阶段性表格

用户必须在每个步骤完成之前单击“确定”,才能进入下一步,更适合具有明确线性顺序的填充步骤。

在实际应用程序中,用户未通过第一阶段的填充和验证,因此无法执行下一阶段的任务。如果没有下一阶段的编写条件,可以选择在第一阶段放弃,这样反而不会被用户反感。但是,由于填充内容太长,如果选择常规分发表单,则可能会无意中增加用户的填充步骤。在这种情况下,建议使用灵活的分发表格。

2)灵活的阶段性形式

为用户提供阶段性选择的同时(为用户提供足够的期望)。可以直接显示所有输入字段,也可以根据任务要求自定义输入顺序。

这种方法更像是步骤栏和定位锚的组合,优点是用户不需要单击“下一步”,也不需要按现有线性顺序输入信息。

3. 分组表单

需要创建具有一定相似性和归纳性的复杂内容分类组。与分阶段表格一样,它可以减轻用户的运营负担,提高运营效率。

小想法:这里大家可能都很苦恼。灵活的阶段性形式和团体形式将相似。在我看来,首先要根据业务场景选择合适的表格样式。第二,其中“灵活的阶段性形式”可以是阶段性形式的升级,也可以是分组形式的升级。名字是什么并不重要。帮助用户高效地执行填充任务很重要。

二、背景

1)用户端

在过去的工作中,戴尔通过用户调查整理了反馈。结果表明,用户关注表单使用问题效率低,复杂。

2)设计方面

设计师在设计表格时,对一些设计细节的认识不一致,往往依赖于现有的设计经验。

开展设计工作。需要一个表单设计规范,去引导和规范设计工作。

三、设计策略

我们通过对现状的分析,结合用户调研,确定设计目标为高效、清晰、组件化,并将设计目标拆解为具体的可执行动作。

策略一:高效 – 提升用户决策效率

目的:通过合理的信息组织,使用户快速完成表单填写。

  • 行动 1. 更少的浏览时间,合理的布局
  • 行动 2. 更短的视觉路径,加强视觉引导
  • 行动 3. 更快的决策路径,规范操作行为

策略二:清晰 – 明确填写目标

目的:帮助用户理解表单填写项的含义,准确的填写表单,降低出错率。

  • 行动 1. 暗示输入长度,减少用户的认知负担
  • 行动 2. 视觉降噪,加强用户感知,建立用户心智
  • 行动 3. 有容错机制,有填写错误的校验提醒

四、关键行动

策略一:高效 – 提升用户决策效率

1)更少的浏览时间 – Lable 和 Input 的对齐方式

Lable 和 Input 的对齐方式,推荐选择右对齐和顶对齐的方式。

Matteo Penzo 通过眼动追踪实验的方式,对表单中 Lable 的放置位置进行深入研究。研究发现,对于用户来说,需要有一个从 Lable 到 Input 扫视的时间,来感知之间的联系。其中,左对齐需要 500 毫秒,右对齐需要 240 毫秒,顶对齐需要 50 毫秒。填写速度从快到慢依次是顶对齐、左对齐、右对齐。

为了提升表单在业务场景中使用效率,同时考虑到系统的美观、有序,防止设计者仅凭个人经验选择 Lable 的对齐方式,我们推荐选择顶对齐和右对齐两种方式。

那么我们该如何对左对齐和顶对齐进行选择呢?

最直观的区别是占空间大小和视觉美观。顶对齐视觉相对平衡,所占横向空间最小,缺点是需要较长的屏幕纵向空间。右对齐因为受限 Lable 的宽度不固定,视觉效果较为参差,占横向空间较大,但所占纵向空间较少。

考虑到内部 B 端产品会涉及到大量的表单输入项,为了节约纵向空间提升屏效。我们推荐一个系统优先使用左对齐的方式,同时保留两种对齐方式。并给出如下的选择条件供设计师判断。

顶对齐:

  • 当页面横向空间较少,比如在内容较少的弹窗、抽屉、页面分屏、页面
  • 更加聚焦填写内容,要求极高的填写效率
  • 不会因为 Lable 的长度不固定,而引起视觉不平衡,视觉上整齐统一

左对齐:

  • 当纵向空间较少,填写内容多,需要提高屏效时
  • 表单整体长度较长,需要用户填写项较多
  • 相对顶对齐,可以节约大量的纵向空间,较常用的对齐方式

2)更短的视觉路径 – 单列和多列

多列布局的格式,对相似的选项进行阅读。视觉路径更长,阅读效率相对更低。

在 B 端业务中推荐运用单列布局的形式,更短的视觉路径,更高的阅读效率。

但是在特定的业务诉求下,用户对屏效的要求比较高,也可以采用多列布局的形式。

3)更快的决策路径 – 按钮的位置

参考 Ant Design ,“我们确定了一个清晰的设计策略来决策按钮区位置:应将按钮放置于用户浏览路径中,便于被用户发现,并且应尽量靠近其所控制的对象。在未刻意建立信息层级引导视觉路径时,经典 “F” “Z” 网页浏览模式作为了我们按钮位置放置规则的基础指导。”

F形阅读模式:用户的视线首先是水平移动的浏览内容区域的顶部,这是F的第一横。接下来用户的视线会沿着屏幕的左侧向下移动,如果找到感兴趣的点,视线会继续向右移动,这是F的第二横。最后用户的视线会继续沿着屏幕垂直向下移动。

Z字形阅读(古腾堡法则):用户关注流(通常含鼠标移动)遵循一个 Z 字形模式。视线流从左上到右下,左上角为第一视觉区,右下角为视觉终点区。

为了提升用户的决策效率,我们对表单按钮的摆放位置进行了统一。当单列布局时,按钮的位置选择跟随表单。当多列布局时,按钮的位置在右下角。

策略二 :清晰 – 明确填写目标

1)暗示输入长度 – Input 定宽

目前对 Input 的宽度常见的处理方式有定款和自适应两种。常见在实际的业务场景中,大部分 Input 都有理想的输入长度。Input 的宽度应该向用户暗示需要输入字符的长短,给用户明确的填写预期。基于此,我们选择定宽的处理方式。

牛顿说:“如果我看的更远,那是因为我站在巨人的肩上。”

我们不妨站在巨人的肩膀上看问题,根据 Ant Design 的研究,得出5种高频的表单宽度区间。宽度值是 XS – 80~160px、S – 160~280、M – 280~360px、L – 360px~480px、XL – 480~560px。

为了呈现出错落有致的排列效果,倡导组合 Input 和单个 Input 的对齐概率最大化,这样Input的宽度差值可以呈现出一个固定规律,且总结出一种不同宽度尺码的排列公式。

我们设定 XS 尺寸可以容纳 7 个中文字段的 input 或 99999.00 的 number input。根据设计规范,此时宽度刚好为 100PX。并且根据公式推算出5种 Input的宽度,以及应用场景。分别是XS=108PX、S=208PX、M=316PX、L=424PX、XL=532PX。

XS:我们设定支持输入 5~7 个中文字符,7~10 个英文字符, 宽度为 108PX。

适用于:较短文本、短数字、选项、价格、数量。如:课程价格、学员性别、选择时间点等。

S:支持输入 14~16 中文字符,宽度为 208PX。

适用于:短文本和选项,如:学员姓名、学员电话、学员微信、邮箱、身份证、学员 ID 、课程 ID、日期段选择等。

M:显示23~25个中文字段,宽度为 316PX。

适用于:常规输入框大小,适用于大部分字段长度。如:课程名称、班级名称、模版名称、日期时间段选择等。

L:宽度为 424PX。

适用于:较长字段录入,适用于长网址、标签组展示、文件路径、集联选择器等。

XL:宽度为 532PX。

适用于:超长文本的输入,如:正文、描述、备注、简介等。

小结:我们根据此规范,对真实使用场景做优化,有较为显著的提升效果。在满足填写需求的同时,我们也通过设定的 Input 尺寸,给予用户所输入内容长短的心理预期。与表单自适应规则不同,Input 定宽的处理方式可以降低适配过程中的视觉风险。同时,错落有致的布局,更接近真实的使用场景也符合设计美感。

2)视觉降噪 – 必填和选填的抉择

大量的必填项小红点会增加用户的认知负荷,产生焦躁的情绪,增加填错的风险。表单中的视觉噪声越少可读性越强。

当必填项过多时,推荐选择非必填提示的形式。

3)合理的预期-提示反馈

用户在初次使用表单时,对各种定义、用途、使用条件等概念往往理解不清晰。我们希望用户在填写表单时,给予用户清晰的引导和明确的填写预期。这里我们对输入说明、输入线索、错误提示进行规范。

输入说明:指在空白文本字段的旁边或下方,放置一个短语或示例,解释输入内容或提示输入要求。

作用:

  • 保持 Lable 标签字段简洁
  • 补充说明填写要求,降低填写难度,提高填写的成功率

输入线索:指用示例或说明文本,以占位符的形式,引导、提示用户输入内容。

作用:

  • 以较少的占位空间,提示用户,视觉负担较轻
  • 在输入框内,容易引起用户的重视

错误提示:是表单出现输入错误时,为用户展示的一条引人注目的解释性消息。

作用:

  • 帮助用户修复他们在输入时遇到的问题
  • 让用户尽可能快速,轻松地完成任务

五、总结

本文根据用户对于表单的使用痛点,挖掘出用户目标。将用户目标转化为设计目标,找到设计抓手。并将表单设计的思考,总结为规范,引导设计工作。

这里对表单设计规范作用的理解,不仅是为一些简单的业务场景,提供设计模版供设计师直接使用。更重要的意义是,面对复杂和未覆盖的场景,设计规范可以为设计者决策提供设计依据和设计边界。

感谢阅读。

本文由 @

  • 评论列表

发表评论: