您现在的位置是:首页 >> 5G

案例解析 | 10个表格加分项设计(加了亿点点细节)真没想到

2022-11-23 19:04:10 5G 10人已围观

简介在日常业务情景中,表单这一元素是十分常见的,但是不少人却还是无法将表单结构设计得完美无瑕但是他们也无法病态化解大部份情景下的表单结构设计难题,因此不如优先选择从示例侧发力进行结构设计,比如说本文作者便总结了表单结构设计多半会遭遇的难题及化解方案,一同来看看吧。 在之前他们撷取过一则关于表单结...

在日常业务情景中,表单这一元素是十分常见的,但是不少人却还是无法将表单结构设计得完美无瑕但是他们也无法病态化解大部份情景下的表单结构设计难题,因此不如优先选择从示例侧发力进行结构设计,比如说本文作者便总结了表单结构设计多半会遭遇的难题及化解方案,一同来看看吧。

在之前他们撷取过一则关于表单结构设计的简述,比较深入细致撷取了表单结构设计的思路和业务流程文章镜像:年前最后一则长蔬果,B端表单规范最终集奉上但表单结构设计技术细节太多了,仅靠一则整体性的撷取的确无法覆盖大部份情景和难题,因此第一集文本主要集中在表单结构设计中遭遇的示例进行:。

常量的共同组成和内长度应用领域;常量体积增设和积极响应方法论;常量的文本类型;常量内的文本式样;常量的文本拼接;常量的翻转商业模式处理;表单中的大批量操作方式;表单文本的修改;拼接字段的结构设计关键点;序列号和 ID 的认识。

一、常量的共同组成和内长度应用领域每一表单都是由若干正方形常量共同组成的,常量内能包含对应的图片、工具栏、按键、文本文本当他们结构设计一个表单的这时候,不管你有没有采用切线来拆分出每一常量,都须要用这种分层商业模式顺利完成表单的产业布局。

这意味着,常量之间是没有长度的,它们彼此之间是紧密吻合在一同的,而不是通过外边距控制产业布局的。

在此基础上,为了防止常量文本和其它常量文本贴到一同,或在有操作方式方法的这时候和操作方式方法贴在一同,他们就须要为每一常量加进内长度,能采用4的次方增设。

内长度主要应用领域在以内两侧,但实际上上下也须要增设,在一些二百一十三或者拼接的情景中,常量的高度就要随文本增加但是,内长度的采用也不是完全相同的,在部分常量上能忽视,比如说表单中最右侧的优先选择列,和最右侧的操作方式列,都能忽视内长度和边缘吻合。

二、常量体积增设和积极响应方法论在上面的方法论中,常量的宽/高= 常量上领长度 + 文本宽/高,看起来很灵活,但是它无法完全化解表单的列宽分配难题假如科舞不光多,得做表单的以内快照慢速说实话理解,但假如表单科舞不光少怎么办?私自加进长度来顺利完成列的产业布局嘛?。

这的确是片面的,因此他们须要在前面的基础上加进捷伊条件,就是常量的最轻长度和积极响应方法论首先说最轻长度,常量虽然能在积极响应商业模式下被剪切,但能的确的是缩小到 10px 以内的常量根本就没有存在的必要。

因此每一常量都是有最轻体积的,而最轻体积须要根据文本决定这这时候捷伊难题又出现了,假如常量文本长度不一致怎么办?比如说地址有的长有的短那就要根据他们自己对文本的判断,制定出这类常量最轻的长度是多少,最少支持多少个字符。

字数比这少的留白,字数比这多的用省略号或换行

因此,当他们排列表单的这时候,就是先将大部份常量的最轻列宽组合起来,然后对比表单的整个快照区域。假如长度无法达到,他们就采用等比的方式对它们进行放大,适配快照的长度。

这就是表单积极响应式产业布局的底层方法论,快照区域大于常量最轻的体积总和,常量长度等比放大(高度基本不变),小于则采用快照以内慢速商业模式三、常量的文本类型很多 B端项目的表单只是从 Excel 表单直接照搬进来的,只有一系列的字符串文本。

但时代是在发展的,现代表单对常量文本的需求并不只局限在文本而已,不管是飞书、语雀、石墨还是 Notion、Clickup、Coda 等云端工具,都拓展了常量文本的支持范围。

因此他们首先要确定一件事,就是一个成熟的表单就不该只有文本一种常量类型,而是有多种数据类型共存的,不同数据类型就应该有不同的表现形式,来增加区分度比如说一般文本、价格、日期、标签、镜像、附件、缩略图、内链、用户、百分比、价格等数据类型。

虽然很多这时候他们获得的需求是只有文本,但他们要学会自己去判断背后的数据类型是哪种,从而延伸出对应的结构设计类型出来。但只采用文本的表单不仅可读性极差,往往也并无法带来更高的效率和采用体验。

因此尽量去积累不同的数据类型展示形式,比如说过去 QQ 采用彩色的圆形来表示在线、忙碌、离线等不同状态,在同样简单反映设备状态的表单中,他们也能采用同类的方法或者对包含百分比进度的数据,采用进度条而不是单纯放数字。

当然具体采用什么式样,须要结合具体情景做判断,无法纯粹为了差异性和视觉效果做改变,任何优化都须要在最后和用户做确认确保它们的有效性四、常量内的文本式样前面提的是他们要让常量的不同数据类型被表现出来,而这里他们要讲的就是纯文本式样了。

虽然很多表单中确实主要以文本为主,不适合将文本替换成不同的数据类型,但文本和文本之间,也是有区别的首先就是很多表单都包含一个核心字段,比如说班级学生、执勤医生表单,那么这个表单中最重要的信息必然是姓名虽然可能也会有重名的情况,姓名不具有唯一属性,但作为数据主键(数据库概念)中的用户 ID,是没有任何可读性的,因此不应该被凸显。

假如他们判断不出来什么文本重要,但至少他们应该能判断哪些字符是不重要的,这种不重要不一定是数据本身的价值,而是它对于他们的浏览、检索没有太大的价值比如说前面例举的复杂的 User_id 号,或者没有任何规律的商品编码,再或者一长串的哈希值……。

他们就能通过最基本的字重、灰度来适当调节它们的对比即可,弱化那些对于浏览而言不重要的信息,才能提高整个表单的查看效率。

假如要为文本增加色彩,那么该文本的字段意义要符合用户的心智比如说镜像是蓝色的,上涨是红色(可能是绿色),状态正常是绿色,警示文本是橙色,以此类推……同时,针对一些比较特殊的文本类型,尤其是和数字相关的,是能切换数字字体类型的。

比如说财务、金融、虚拟货币类平台,对金额、百分比的数据展示异常关注,虽然不一定要在式样上做得非常不光,但往往会独立采用一个字体显示金额和百分比

五、常量的文本拼接在一般的表单结构设计中,他们默认一个常量包含一行的文本,因为这符合传统 Execel 的结构设计方法论,每一个常量要匹配字段的文本但是,这个方法论显然在复杂的 B 端项目中是不成立的,因为很多规定只是死的,但结构设计师是活得……。

在一些长表单中,很多近似、前后关联、前后从属的数据,是能进行合并的。比如说头像、用户名、ID 编号,或者专业和所属院系,以内眼视力状况,体重、体脂率和肌肉含量,都是能够进行合并的数据类型。

再或者,直接将同类数据合并进一个常量中,在常量另外加进每一数据的标题,也不会直接影响查看。比如说 Coding 中的列表事例:

对常量文本进行拼接合并,是须要结构设计师去判断可行性的,这能很好的减少表单的长度,降低次要信息的占比,加快同类数据信息的识别速度,提升整体的采用效率和体验但是,它同样存在局限性,就是被合并后会难以进行排序,因为一个常量内包含好几项文本,精确排序的结果就难以呈现出对应的规律结果。

因此合并信息文本必须加进一个条件,就是被合并对象没有排序的需求,或者整个常量有个明确的主体字段,排序只以它为标准六、常量的翻转商业模式处理常量的翻转上,很多人一直没搞明白怎么处理,因为实用性是高于美观度的,因此只须要遵循几个固定的方法论做判断,其实不光简单。

首先,因为人眼 F 型的浏览习惯,能直接默认常量是左翻转,然后找出不符合左翻转条件的那些信息数据,对它们进行居中或右翻转的处理下面一项项解释1. 最右操作方式列右翻转最右侧操作方式列查看方法论和右侧文本不同,他们要找操作方式选项的这时候视线是从右侧开始向左看起 (F型反转)的,因此作为操作方式项右翻转的商业模式效率更高。

但假如最右侧的文本不是常见的操作方式而是长文本,比如说地址、邮箱,那么依旧只能左翻转,因为文本的阅读是有连续性的,只适合从右侧读起。

2. 价格类数字右翻转对于价格或一些统计总数,他们也须要采用右翻转因为这些数字位数较多,他们在表单中查看它们的主要顺序就是先确定位数,再看具体数值比如说 82000000000,那他们要做的第一件事必然是数 “0”。

因为位数长度不同,再通过千位分隔符,还能对上下常量进行数额大小的对比,提升查看效率。

但是,不是大部份长数字都要右翻转,因为有些数字组合是没有位数价值的,比如说手机号、数字 ID、年月日等等,它们依旧只适合左翻转3. 固定长度的短数据居中最后一个,就是一些固定长度的短数据类型,比如说球员号码、状态标签、百分比、工具栏,都是适合进行居中排列的。

之因此加 “短” 字,就是因为只有数据文本短,居中翻转看起来就整洁干练但类似手机号、长ID 这些文本,虽然长度也一样,但居中的效果会非常违和七、表单中的大批量操作方式表单往往会包含大批量操作方式,在复杂的业务情景中确实能延伸出非常复杂的交互方法论。

他们首先来解释它的常规交互形态,然后再自己根据实际情景进行优化首先,大批量操作方式必然要包含两个关键的要素,多选框和操作方式列表。多选框用来进行大批量优先选择,操作方式列表则是对选中的文本进行处理的按键区域。

建议将能操作方式的选项做到表单的右侧,类似上方的事例,不管是放在表单上方还是下方都能但非常不建议将操作方式区域放到表单的右上角去,因为优先选择和操作方式的距离太远,不仅操作方式起来麻烦,在不熟悉系统的情况下还很难找到操作方式项。

也建议操作方式的选项能在选中被激活时和默认状态有一定的区别,让用户操作方式过程明显感知到选中后应该在哪个地方进行操作方式优先选择,能参考百度云、阿里云的大批量交互最后,很多表单高度是超过一屏的,须要慢速的,那么这个操作方式栏就须要悬浮在页面上而不被滑出屏幕之外,这才能确保大批量操作方式的效率和体验。

八、表单文本的修改表单除了大批量操作方式,也有允许直接在表单中进行常量编辑和修改的需求虽然这里也存在很不一样的业务需求和操作方式情景,但我还是要给出一个套比较万能的化解方案首先一定要明确现在做的东西是一个能编辑的表单,而不是做一个长得像表单的表单,比如说下图千牛的大批量装修页,看起来很像表单,但本质上它是个表单。

既然是表单,那查看、检索、大批量操作方式才是它的主要功能,无法因为他们能去编辑它而把它私自表单化。比如说将能修改的文本直接做成输入框,随时能编辑,页面的观感就会充满不确定性(等着你去改)……

而且改完之后怎么将修改的数据覆盖原有的,是加进确认按键,还是直接光标从现有区域移出后就顺利完成覆盖?不管哪种操作方式效果都不好因此我一般建议在可修改的表单中,对允许修改的选项加进操作方式提示工具栏文本必须再点击后才进入编辑商业模式,且必须有修改后点击确认替换原数据的操作方式过程。

这么做看起来确实操作方式变长了,但这是变难用了嘛?再回到前面的关键点重复一遍,这是一个表单还要在这个地方查看信息、复制现有信息,要防止操作方式太容易,导致误操作方式替换了错误的信息进去……九、拼接字段的结构设计关键点拼接字段,就是字段类似 Excel,包含上下的层级和从属关系,比如说在 Ant Design 表单页面中有展示的字段分组效果。

这种情况一般不用,但用的话几乎都采用在字段数量极多的情景,通过拼接的方式来对不同的字段进行归类,便于在众多数据中理解该数据类型的归属,比如说你们能查看下面他们某学员的项目需求,接近 80个字段的字段:

碰到这种情况确实是很蛋疼,但是没办法,有的项目就希望在表单页面查看大部份数据,而不整理进详情页面中针对这个情况就不要考虑美观的难题,而是识别性的难题这种情况先完全忽视掉表单的美观性,就重点考虑数据的识别性。

因为数据太多,没有字段作为提示是不可能认清数据是什么的,因此首先要确保字段是能始终存在于快照区域文本不会被慢速走的第二点,既然都用拼接对字段做分组了,目的当然是为了强调它们的从属和上级分类,假如只是像上面事例这样简单的用切线拆分,那在实际查看过程基本是没有多少帮助的。

因此,在这种非常接近 Excel 排列方法论的表单中,也采用操作方式 Excel 常用的手法,就是给不同的分类加进不同的背景色,让它们更好被区分出来。

虽然他们能用很浅的背景色防止它们太上头,但这个页面的视觉效果基本是和美观无缘了原因于信息的识别效率,美观是值得被牺牲的这种要罗列大量数据的表单,和前面的表单确实已经快变成两个物种了强烈建议大家在 Excel 内先创建出一个 1:1 的数据表,并模拟实际业务操作方式去动手,你就会产生完全不同的认识,而这是用图文撷取没办法详细解答的感受。

十、序列号和ID的认识在表单中,还有一个很容易纠结的地方,就是需不须要加 “序列号”,而序列号很多这时候又和ID的理解有冲突首先要理解,ID 是表单每一行的唯一标识符,比如说学生列表,学生姓名年龄生日都能完全相同,但ID才是系统区分他们的唯一指标,因此ID的存在是用来做数据对象的标识的。

而序列号,则是独立于数据对象之外,用来标识表单中数据对象的序列,这在 Excel 中的侧边栏是必备的显示文本。

本质上说,这个序列和数据对象其实是没关系的,不管你做了什么筛选、排序、修改,序列号1采用就是表单中的第一个对象,2就是第2个,以此类推它在 B 端项目中的存在价值并不是不光突出,常规情况下他们的确不须要放。

但假如出现了一些对表单序列、数量比较敏感的情景,比如说要查看排序结果范围内的对象数量,或者增设表单导出范围(从某个序列号到另一个序列号之间)这些例子并不多见,因此想不明白序列号存在的意义,产品业务方也给不出理由,那就不须要放!

结尾以上就是今天撷取的表单相关知识点了,下一次撷取表单可能就是表单中的层级折叠说明了。有其它的难题也能在留言中提出,有好的难题我也会后面一并进行整理。感谢大家收看!

Tags:

站点信息

  • 文章统计4935篇文章
  • 微信公众号:扫描二维码,关注我们