精华内容
下载资源
问答
  • 为大家梳理一个web表格设计框架,希望能够给大家带来完整的不一样的内容。全文12,598字 ,预计阅读30分钟,建议收藏。在网页或桌面为载体的B产品和生产力工具中,越来越多的设计师需要和数据打交道,查询和处理...

    9351222874c69cb24f4884e91d228a0a.png

    为大家梳理一个web表格设计框架,希望能够给大家带来完整的不一样的内容。全文12,598字 ,预计阅读30分钟,建议收藏。
    在网页或桌面端为载体的B端产品和生产力工具中,越来越多的设计师需要和数据打交道,查询和处理数据的能力是当前正在设计的大多数产品的关键要求之一,表格被公认为是展现数据最为清晰、高效的形式之一,也是世界上最常用的用户界面工具,其重要性不言而喻。

    5515eedd1457b2b92b875d04abe94ed8.png


    1. 表格的布局与构成


    表格,展示行列数据,既是一种可视化交流模式,又是一种整理数据的手段。表格帮助我们组织和展示信息,同时保证信息的可读性,从大量信息中找到所需内容;通过合理布局,感知不同信息间的关联与区别,进行分析和比较;对数据进行排序、搜索、分页、自定义操作等复杂行为。

    3e6ee0f34df0a8f70279746be9240841.png

    1.1 表格的布局
    表格的行元素和列元素行和相交就会形成一个简单的二维表,行,列元素的空间组合就确定了一个个单元格。常见的表格布局有水平型、垂直型和矩阵型三种基本布局,分别强调行、列、单元格。
    水平型会弱化列的存在,强调行信息的连贯性,适用于用户阅读信息时是从左到右,然后自上而下逐条扫描。垂直型是通过强化列的视觉特征来突出不同列信息的对比。矩阵型的表格有均匀统一的分割线,单元格比较明显,适用于列信息较多而没有足够空间用留白来分割信息的表格,同时我认为单元格合并的情况也属于矩阵型。

    9640294687e15a5309b517bb0a5a628d.png


    还有比较常用的表格类型层级型:层级表
    是表达结构性关系的表格,表现得如同树的分支,所以又叫树列表。每一个条目可展开或折叠包含的更详细的行信息,也包含嵌套子表格。
    层级表并不如矩阵表直观,但通过结构化的组织方式逐级展示表的数据内容,让整体信息架构一目了然,非常适合大型数据表。

    859983a50d5704803f34946748d222d9.png


    结合层级表的使用场景,多以查看为主,编辑需求较少。
    同时还有特殊的表格类型,图表型与卡片型:图表型
    除了在单元格中引用图表之外,很多时候都会提供图表/表格视图切换,便于用户从图形角度查看、分析自己关注的数据。有时也会有“图表+表格”的形式,这时候,表格往往只作为明细放在页面底部。大量的表格也会导致视觉的单调。

    576f5dfd76a13450d72e02a774157095.png

    卡片型
    可以用卡片的形式来展示信息,将信息以组的概念呈现,单张卡片内的信息按优先级进行排列。此外,卡片彼此之间又形成一个整体。

    ffd9f543c24487868f6b5c1b7f160171.png


    卡片是一种承载信息的容器,对可承载的内容类型无过多限制,它让一类信息集中化,增强区块感的同时更易于操作;卡片通常以网格或矩阵的方式排列,传达相互之间的层级关系。适合较为轻量级和个性化较强的信息区块展示。
    注:在有限的表格空间内需注意卡片信息之间的间距,若卡片信息过长可做截断处理。在实际工作中,上述表格类型还有可能互相结合,以更好的达到相应的分析目的。
    比如垂直–层级,矩阵–数据立体表等。1.2 表格的构成
    从视觉结构的表现角度,个人将“表格”的构成分为:标题、表上方筛选操作区、表头、表体、底栏。由表头、表体构成内部区域,由标题、筛选操作、底栏构成外部区域。

    e7324cbdc70fbb017b8dd217019517cd.png

    标题
    标题是对表格信息内容的整体概括,可包含数据来源及属性(日期、地区等),以便用户对表格内容有整体认知。给数据表格起一个清晰简明的标题,与其他的设计同等重要。有了好的标题,表格就可以独立使用,如果导航菜单层级清晰,同样能起到标题的作用。标题作为最重要的识别元素,默认展示在左上角。筛选操作区域
    这里特指位于表头的上方的操作区域,包含筛选,操作按钮等其他操作。筛选区包含模糊搜索和条件筛选,按钮分为增删改和其它业务处理操作,合理设计筛选区可以大大提高用户的效率。

    45d37f6c33fa5c27e1e669a1d7b5b950.png

    表头
    表头对数据性质的归类。表头按惯例要对数据的简况做出反映,如被调查者的性别、年龄、学历、收入、家庭成员组成、政治背景、经济状况等。表头的字段名称应当符合人们的思维习惯,保证用户理解。如果有需要解释,则在字段名称旁边加说明小图标(小问号)。表头在这里也能指列行标签,是对所属行或列数据的描述。
    除了容纳行/列标签之外,表头也可以进行排序、搜索、筛选等。

    c533aed1e72caa3bb602bbd49f0a3887.png

    表体
    表体是表格的主体内容,具体信息数据内容的填充区域,由一个个基础的单元格组成,单元格是表格呈现数据信息的基本单位,可以是计数、百分比、均值、"-"等任何数据。表体包含数据,分割线,背景,单元格数据可进行点击操作,如链接跳转(项目或者商品等)、展开嵌套表的子集信息(子表格)、操作按钮(查看编辑)等。

    930b79096c89d59ac8473c1bade4216f.png


    表尾一般是统计类数据,例如合计、平均数等。表尾使用频率较少,且重要性明显不如表头,我就把它归到表体这类。

    321a6f17974f28e63ef310574498f2af.png

    底栏
    底栏在表格最下方,主要展示正文中的数据量或单页数据的概览信息,也常提供统计功能,供用户了解总体进展。底栏一般放统计信息、分页控件、备注说明、操作按钮(加载更多)等内容。
    底栏最常见的元素就是分页,分页可以放在头部或底部,常见的还是放到底部,分页固定能省去用户需要翻到顶部或底部进行操作的麻烦。分页可分为整体页码平铺式、全功能版、简易版等,需要根据不同的场景选择最优的设计方案,比如有的时候并不需要定点跳转。

    c61700b23b37b9e7581dca1c5c723dcb.png


    无限滚动可以替代分页,但对于功能优先的应用未必适用。下图为查看更多按钮,比较少见:

    11df85fc2f68942aeea49c3e7744d7a9.png


    同时,在选中操作的下,操作按钮也可以位于底栏,在未选中时操作置灰。


    2. 表格的视觉


    采用格式一致外观,突出有利于对象识别的关键信息。2.1 视觉标准填充与边距
    合适的填充和边距对于视觉设计至关重要,既包括保证数据单元格之间的留白,又包括单元格内部留白,以保证易读性,当创建表格设计规范并严格遵循后,就可以创建视觉一致的表。表格本身应具有最小宽度,在不同画面中宽度应可以增长到整个空间,所以每个列也需具备最小宽度。如果页面宽度小于表格,那么表格应水平可拖拽。

    8a6ec7b4349fee4453d6151af3593677.png

    对齐方式
    数据合适的位置排列能够提升数据的浏览效率和准确度。对齐能够很好的形成视觉引导线,会让表格更加规范易理解,给用户视觉上的统一感,视线流动更顺畅,让用户快速的捕捉到所需内容。
    正如连续律所描述的,人们倾向于把那些经历最小变化或阻断的直线或圆滑曲线知觉为一个整体,倾向于使知觉对象的直线继续成为直线,使曲线继续成为曲线。在界面设计中,将元素进行对齐,既符合用户的认知特性,也能引导视觉流向,让用户更流畅地接收信息。
    数字应该右对齐

    在表格中,诸如金额、数量等数值排列时,通常采用“右对齐”方式,既方便用户快捷读取数据,还可以使用户进行纵向数据对比。数字是从右向左读的,是因为我们对比数字时,首先看个位,然后十位、百位。当个位数值对齐时,我们就可以快速查看前面的数值,比较多个数据的大小。因此,表格的数字应当右对齐。

    34a4901ca632b272d22d3e585d012815.png


    当我们常用的字体如果不同数字宽度不一致时,会导致千位分隔符不在一条直线上,所以要选择数字等宽的字体,等宽的数字在同一竖线时更容易对比。


    文字信息左对齐

    因为我们阅读文字信息是从左向右读,如果不采用左对齐,会降低浏览文字的效率。
    混合型文本左对齐

    当数字、文字、字母组成混合数据时,标题和正文左对齐,使用了一个视觉起点。
    在实际工作中,主流框架组件,表格列数据对齐同时针对分割线,虽不是完美中的对齐,但开发成本低。

    c9f05c07c528d7e630e6a8fc6cc84183.png

    不论何种对齐方式,都需要考虑到该字段可能存在的极端情况。如:普通文本若过长,可在鼠标悬停状态时单元格展开列出全部字段信息。色彩
    一般表格具有的颜色尽可能少。颜色和可读性是密切相关的,要合理的使用颜色,普通表尽量使用简单的背景色和点缀色。背景色方面,除了行/列交替颜色(可以区隔内容,引导视线)、悬停高亮底色(便于准确辨别光标所在行)等处理方法,还可以对表头表尾进行视觉区分。但不能增加过多颜色以引起混乱。
    分割线颜色尽量不要与背景色相差太大。当字体选择深灰色,背景为浅白色时,边框选择浅灰色,这样可以减少我们视觉疲劳,不会使表格看起来令人生畏。

    eaeb370edb414c6854400969f4a93a02.png

    2.2 表头的优化
    表头标签应该简炼准确,以达到节省表头空间和减轻视觉压力的作用,让用户注意力聚焦在数据本身。当然对于产品而言,先能把事情说清楚,再考虑文字的简洁性。
    当数据结构比较复杂的时候,使用多级表头来体现表头与数据的层次关系,如下图:

    f8459d7d706419d6cb6059714742cea0.png


    当数据有看不懂或生僻的信息时,用户期望有人告诉他为什么会这样,就需要在表头标签后加上小问号,鼠标悬停弹出说明文字的提示框。不需要表头
    如果表格数据可以自我解释,表头就可以不需要。电子邮件的表格是一个好例子,邮件主题,发送者,发送日期都区别度高不会混淆的。当然有的情况表头是不能去掉的,例如有两个不明确的日期,这时候你就需要定义一个表头。

    fb7815f1b74335eaf541f1c91a84ea4c.png


    2.3 行的优化
    默认排序
    所有行按逻辑排序,比如按风险由小到大,将最安全的操作放最前面;或按照信息时间排序,由新到旧,以创建时间进行排序,即最新创建的排在最前面。

    bf6fd414a98f80310ba98cab5a680576.png

    合适的行高
    行高是非常重要的参数,直接影响着阅读体验。较小的行高承载更多信息,让用户无需滚动鼠标即可看到更多数据,但会降低扫描效果,导致视觉解析错误。适宜的行高使得数据更易于被阅读,但这不代表行高越大越利于阅读。

    70074a84bbfd660f3e61c82a5196a306.png


    设置行高的原则:
    A.单行数据显示时,数据显示紧凑、有序。
    B.多行数据显示时,弱化表格形式,提供丰富的视觉展现。
    因此,对于单行显示的表格,建议行高为字体高度的2.5倍到3倍;对于多行显示的表格,建议内容区到上下边框的距离略小于文字高度。当然,也可以提供切换按钮让用户自己控制显示密度。横向斑马线
    斑马线又称作间行换色、隔行变色、行的交替样式。它能让行间界限更为明显,同时加强视觉流的横向引导,避免在阅读表格时出现迷失情况,要注意两种颜色不能反差过大。另外,可以根据实际情况选择是否与边框同时使用。

    74762bcf19e3597096d331fef1685580.png


    行的强调

    有时为了强调行内信息的连续性,可去掉单元格的纵向分割线,仅使用横向分割线和底色分割,使横向信息更加连续通畅,以提升阅读效率。
    表格还可以通过颜色来指示状态,颜色指示可以帮助用户识别哪些行可能需要特别注意的行数据。

    0c73bd795d34f980dcf07d6d8bc1d98c.png


    同时可以对行内信息进行扩充,进一步弱化表格形式,丰富各类信息的视觉呈现,同时兼顾行与行之间的关键信息的对比,如上文表格布局提到的图表的使用。2.4 列的优化
    减少列的数量
    尽量减少列的数量,关注用户需要的必要信息。当数据列过多时,要分清主次列,非重点、辅助性信息可以通过次级入口来解决,如固定重要列(主体名称/操作列),次级列在表格中间区域左右拖动。
    合适的列宽
    列宽严谨的处理方式有三种。第一,通过栅格,由列的数量决定列宽,主流框架组件一般是这种;第二,可以固定部分列的宽度,其余列则按百分比处理;第三,在固定宽度的基础上,允许用户自由拖动调整列宽的大小。(当然我觉得不要太拘泥这个,合适就好)
    列的强调
    为便于用户对数据进行对比分析,可以在原始数据的基础上给出差值、升降变化等数据处理结果,减少用户数据加工的过程,直达用户获取信息的目标(需要明确用户目标),提高用户的阅读速度。
    一般列的强调是配合列排序功能使用的,如点击率、访问量的排序。有时会使用不同粗细的纵向分割线或不同底色对列信息进行区隔,增加同类信息的对比性。

    517f376c6dfe9c24bf022ea74ba6aae0.png

    2.5 单元格数据展示度量单位的使用
    其中的关键区别在于数字的大小。数据的度量单位无需重复,一般在表头标识清楚即可。

    b63704e1c9c3befe5533aaee0b8d69b2.png

    空白单元格处理
    一般指空数据或零数据的情况,空白单元格容易造成用户困惑甚至误解,用户会搞不清楚到底是没有数据,还是数值为零?正确做法是,对于数据为零的单元格,要填上0,且小数点后位数、单位,都要与上下数据格式保持一致;对于没有

    55e413d6258ab5414835ddbdfa5c4593.png

    数据的单元格,通常是用“-”表示。
    B端后台数据类型较多,最好能为空数据做出释义,可以在“列标签”或底栏给出解释文案。数据过多
    单元格的宽度根据列中字符的长短自动变化宽度,超过该列宽可以省略显示,末尾以"..."显示,鼠标悬停时出现气泡显示完整内容。关键属性标识
    比如用户重点关注数据状态、某些数据的上升和下降等,可用符号进行标识,帮助用户快速定位到目标信息。

    003c732f938f3caba602f7e8e2f9a77f.png

    2.6 分隔线
    水平分隔线,能显著减轻表格在垂直方向的视觉重量,内容更加条理清晰,便于用户对比查看数据。
    垂直分隔线,在表格中使用适合的对齐方式后,那么就可以省略;数据量级比较大的表格,列之间过于紧密时建议保留,可以使用较淡的分隔线,将不同列数据区分开来,提升浏览速度。
    下图采用了同时使用水平和垂直分隔线:

    d6c6aacd181daca43d2c019b86fd9a64.png


    如果在表格中使用适合的对齐方式,分隔线就是多余的。但由于表格数据量级不同,即使要用,分隔线也要淡,不能妨碍快速浏览。2.7 分页及翻页
    在web端,表格的的数据内容超过一定“数量”时需要提供翻页功能,这个“数量”由表头的高度、表格的行间距、目标用户群体的显示设备的配置等因素来决定,原则是不要超过一屏,考虑到每个用户的使用习惯,可以让用户自定义每页的显示的数量。相比于跨屏翻页而言,向下滚屏会更便利,在下文控制表内容中展开比较了无线滚动与分页。
    分页控件内容 :用户自定义每页显示的数量,当前页码(行数),全部数据的页数(行数),向前翻页,向后翻页,到达第一页,到达最后一页等。
    当用户的数据未超过一页时,可以隐藏翻页控件。翻页按钮不可用时,须给出置灰态或不可点击。
    分页控件做为筛选数据的一种方式,通常可以结合排序、筛选等其它控件一起使用,来提升用户的操作效率,如网易的邮箱,翻页与日历结合使用,对于有大量邮件数据的用户来说,查阅邮件的效率更高。

    b6c182a7ed61069cdcf214a581bbf59a.png


    除了无限滚动,还有第三种翻页方式,鼠标点击“加载更多”按钮以查看更多数据。2.8 简化表格
    干净的表格使人愉悦。特别是在处理大量数据时,巨大的数据量会增加用户的压力,因此要减少视觉干扰。删除不必要的分隔符与背景,去除阴影等。信息内容的有效传达是表格设计的本质,让用户注意力聚焦在核心内容上。所以,做减法设计就显得可贵了。
    实现简化的方法是适当删减。如果画面视觉很糟糕,请删除辅助信息、不常用的控件和分散注意力的样式,但要小心删除必要内容。“简单并不意味着没有杂乱,这是简单的结果。简单性在某种程度上基本上描述了对象和产品的目的和位置。想设计出一个井然有序的产品。这并不简单。“ - Jonathan Ive减少分隔线
    这必须是在数据允许的情况下。水平分隔线能显著减轻长表格在垂直方向的视觉重量,加快数值的对比效率。但如果在表格中使用适合的对齐方式,竖直分隔线就是多余的。它们最大的贡献就是缩减元素之间的距离,明确了单元格范围。即使要用垂直分割线,也要淡,不能妨碍快速浏览。
    不使用斑马线,使用不同底色区分指示不同类型的数据是有必要的,但是用来区分同一类数据,斑马线在很多时候又是没有必要的,因为水平分割线已经明显区隔了。
    省去分隔线,对于较小的,动态性较小的表,可以省去所有分隔线,并获得醒目的外观。当然,这更多是数据量不大且易分辨的情况。

    5b9a6bf9db00235fa73c4770e6ac310d.png

    尽量以黑白为主
    运用彩色表达组织或含义可能会增加误解,并且引发视觉障碍者的易用性问题。普通表格一般使用颜色代表状态或进度。克制图形元素的使用
    其他图形元素,如星号、三角、圆点、对勾、叉等,虽然能够帮助组织数据、更直观的传达信息,但要注意数量,物极必反,要注意克制这些元素的使用。


    3. 表格的交互


    优秀的表格交互给予用户操控感,不让其迷失在数据中。提供便捷的过滤筛选组件,配合鼠标悬停、点击、框选等操作,方便用户查看更多数据信息,快速定位目标数据,或根据特定规律对数据进行排序、突出、降维等处理。当我们将这些组件与交互动作结合,用一些习以为常的交互去操纵表格时,用户将更清晰、有信心、提效率。3.1 筛选与搜索
    筛选和搜索是用户精确目标数据的好方法,这是一项基本功能,可让用户从默认的表格数据轻松获取要查找的内容,在数据量较大的表中特别有用,一般位于表上方的操作区域或表头区域。表上方
    当表格的数据量较大时,可在表上方操作区域增加对象搜索或数据分类来提升用户查找效率,且能同时使用。提供多维的筛选和排序,是增加用户效率的有效方式。
    输入搜索框输入用户关心的内容,既可以实时筛选,也可以点击触发,一般须支持模糊查询,否则用户必须记住所有内容,才能查出要找的目标项,成本过高。也有特殊情况,如保密性较高的账号密码列表查询需精确输入。

    0926eb5288d9a4e0e3d5d74a6f9f9899.png


    无论手动查询还是自动查询,如果查询条件是组合的几个,那么一般是填好全部筛选条件再让用户点击查询按钮。因为如果用户要查询的表格数据具有多个属性且相互联系时,组合条件的查询显然是更合理的。


    如果筛选操作是单个条件独立查询,各个筛选条件都是相互独立的,那么最好填好一个条件便自动查询。
    筛选条件有时候既需要汇总数据的,又需看单一条件下的数据,比如状态包含“待付款、待发货和待收货等”,此时则是做成Tab单选较好,如下图所示。

    12dd8b4271be229cf8d340ddd96e8740.png

    表头
    放置在表头标签上的筛选,受列内容的影响,一般做单次筛选。通过对表头标签旁按钮的点击,使用户更快捷进入到自己的筛选条件中。通常,表单越左的列数据越重要的,也是筛选频率与需求最高的,因此高频的筛选场景基本可以得到满足。

    1f536efa46108c8f6a1421a6c145d0b3.png

    3.2 滚动与固定垂直滚动固定表头
    垂直滚动时,固定表头可以让用户明白当前单元格数据信息的属性和含义,体现界面友好性。当数据列差异不大,用户不能直接根据表格数据分辨类型时,尤其需要固定表头。当表头有操作时,固定表头更能提升使用效率。
    数据列表相当庞大而复杂的时候,使用固定表头可以帮助用户区分列与属性。

    b6f6d0d1b793b1f0f56c45c1fb43b772.png

    水平滚动列固定
    当呈现大量数据时,表包含的列数超出了该表的最大宽度,水平滚动就无法避免。第一列(前几列)或操作列固定能更方便信息的对比与操作。基于我们读取信息的方式,从左到右放置关键列。最左侧的列会引起最多的关注,当我们感兴趣时,才会查看其他列,它会影响用户阅读所需时间与精力。

    e393db43bd6ec7fcd9fbb7ac1ff8b933.png


    在大型表格中,我们才可以水平滚动,最好是寻找可替代方案。表格中文本为什么这么长?能减少字数嘛?可以将文本换至第二行以减少水平宽度吗?能否为过长的文字选择别名吗?可否用图形条目取代?是否可以采取工具提醒?是否可以安排在窗口或对话框里?
    一般有两个解决办法:文本换行,对它缩排;在单元格区域截断文本,在提示中显示完整文本。方法一意味着我们要增加表格高度,且每行高度可能不同;方法二,如果不同文本内容的头几个字一样就存在问题了。但这两种方法都比水平滚动好。3.3 排序
    表格初始有一个默认排序,也叫初始排序。但有时,用户希望将表格中某一行位置换到另一位置。拖曳排序
    拖放似乎很简单。就是抓住某个元素把它放到另一个地方而已。可是,事实上,拖放过程涉及到了大量细节,在拖放期间,需要处理许多特定的状态。
    用户在拖动模块时,页面整体布局基本保持不变。因为移动的不是模块,而是插入条。插入条指明了放置模块时的目标位置。常用于数据量较小,有拖曳排序需求的场景。又可以运用在多个表一起的情况。

    b82ee47482306218a6e07b4eb2d1f728.gif


    穿梭表格
    就是多表格拖拽的情况。比如左侧的表格内容可拖拽至右侧列表框,同时支持表内上下拖拽更换位置顺序,也可直接选中对象在两栏中按钮移动,完成拖拽行为。

    1a54bcfcbde030cd4fe47ee58f7bd0f0.png

    那如何让用户知道可拖拽呢?
    增加意向符号;改变光标样式;增加被拖拽对象临时性底色,突出显示。

    21738463fb427990af4e4681b0f0249d.png


    如何让用户知道怎么拖拽到哪里?
    被拖入区域应增加插入位置符号,可以明确指出放置模块的目标位置,减少用户困惑,也可以对放置操作发生后的页面外观提前给出预览。同时设计时考虑上下左右两个方向的拖拽运动分别可以触发什么结果,超出表格范围拖拽对象消失。

    2618e6df07a867a997d236d93c2adb71.png


    被拖动对象应呈现为轻微透明的样式?应该显示为完全不透明?或者改为使用缩略图表示?我认为这三种方法都可以。透明效果也会让更多表格内容对用户可见,有助于用户预览最终放置后的结果。从而方便用户查看页面,也会表明该模块处于一种特殊模式中。透明可以表明相应被拖拽对象尚未定位,或者说正处于过渡状态。表头排序
    排序又分为降序和升序,比如,事件相关的表格,默认时间降序排列;风险相关的表格,默认安全降序排序。
    表头排序可以辅助用户快速挖掘出需要关注的信息,发现数据信息之间的关系,一般可按数字大小、文字拼音顺序、字母顺序等其它数据特征进行排序。如果表格中不是所有数据都能排序时,则需要标识出可排序操作的列,一般采用三角箭头做为标识,实时反馈当前操作状态。3.4 控制表内容控制列
    可伸缩列
    由于存在多个数据标题和列,我们只能根据表格的宽度来展示数据。在某些情况下,表格可允许用户选择他们关注的列,在其固定宽度基础上,让用户可以自由拖动列宽边缘以调整列宽。

    9db9ec147f6d05e8811b4a73b9d2ddf3.png


    自定义选择列
    由于数据报表,往往需要满足各种不同的角色在不同场景下的需求,因而在表格数据显示上,一般采取宁多勿少的原则,即尽可能提供详细的数据,由此会数据指标过多,难以在表内完整展示,导致需要水平拉伸,降低了表格的可读性。
    针对上面这个问题上,可将所有的指标名称罗列在表格上方,并提供多选操作,在默认情况下仅展示最常用、最重要的几个指标(如下图)。这样能让用户在表格上方看到所有指标名称,避免了原来需要水平拖拽而导致指标浏览不全的情况。其次,用户可以根据自己的需要,自由的选择显示所需指标,隐藏不必要指标,减少干扰。

    b11d3db0d4fa573cb8a1aba8bb759f00.png


    B端后台通常会对应不同的角色及不同的需求,可让用户根据自己的需求来定义表格的展示列及列的顺序。同时系统应记住用户上一次自定义列的设置。控制行
    控制行高
    较小的行高让用户无需滚动页面就能查看到更多的数据,但可扫描性的效果易导致视觉迷失。这就是为什么许多成功的数据表设计包含了控制行高(显示密度)的功能。

    c13d3b188d5f098621628f9051af2845.png


    树形表
    行也可以结构化分为不同的类别,前面提到了层级表/树形表,可以嵌套子表格,展开和折叠。可操作按钮一般位于各级行标题左侧,具有独特的视觉效果并具有扩展或折叠的功能。单击表中的类别标题会在类别的展开或折叠状态之间切换。展开与折叠也将极大的影响行内容显示。

    9df29b71b11f14bdfce485fc5e43df6b.png

    分页
    分页可以将表内容信息划分成独立的页面来显示。
    优点:1.良好转换:当用户是在结果列表中查找特定信息而不仅仅浏览信息流时,分页就是好的选择。你会知道表格总量与当前页的准确数量,能够决定在哪里停下或者去哪里。
    再次寻找特定数据时,分页方案让我们能够大概定向到目标数据位置。用户可能难以记录目标数据页精确数字,但一般能记录大概范围,而页码链接能让用户更容易到达那里。2.掌控感:无限滚动就像个无止境空间——无论你滚动多久,你会感觉永远结束不了。当用户知道可用行数量时,他们可以自己主观做出决定而不是被动滚动。同样的,当用户能够看到结果的数量时,他们将能够预估他们查看表数据大概要花费多长时间。
    缺点:额外的动作:在分页方案中,用户要到达下一页表内容,就必须点击分页控件上的按钮跳转,等待表格新内容的加载。无限滚动
    表格无限下拉加载使用户在数据内容面前一直滚动查看。向下滚动的时候不断加载新内容,虽然十分方便与诱人,但不是什么场景都适用。
    优点:1.高效浏览:无线滚动提供了一个高效的方法让用户浏览表数据信息,而不必等待表格新内容的加载。当用户并不特意寻找特定的内容时,他们需要通过查看大量内容找到自己中意的信息。2.体验更好:用户使用滚动能获得比点击分页有更好的体验。滚动行为要比点击更快更容易,对于那些连续且冗长的内容,无限滚动要比把分页的有更好的易用性。尤其在表格区域狭小时,使用无线滚动更能节省空间。
    缺点:1.受限性能:页面加载速度是良好体验的一切。尤其是表格计算数据时需注意使用无限滚动,缓慢的加载速度会造成用户的不耐烦与离开。用户在一个表格页面中越向下滚动,就会加载更多的内容,当数据量过大时,结果就是页面性能越来越低。2.位置丢失:无线滚动同分页相比,没法标记当前位置且不能再随意回到之前位置。一旦离开,就会丢失当前的浏览记录,如果要回到上次的位置,必须得重新滚动去寻找。当用户有这种行为的话,无线滚动就会让用户产生困扰厌烦。尤其当你刷新页面时发现自己又回到表格顶部,不得不重新滚动等待结果的加载以继续查看。3.信息缺失:滚动条并没有反映出实际数据量。假设快要接近底部了,当受到引诱滚动条再滚动一点点时,结果却会发现表格数据量又刷新了。从一个可用性的角度来说,打破滚动条的正常使用规则对用户来讲是糟糕的。
    一般来说,无限滚动适用于在数据有限且信息重复的表格,有利于内容探索。分页则适用用户在寻找特定信息及浏览记录,易快速访问。
    3.5 查看次要信息

    表格内容的取舍要建立在对业务的了解之上,尽量精简指标,隐藏不必要信息,减少干扰,避免无主次的铺出所有信息。不要让用户一次性接收过于庞大的信息量,建议默认只展示用户所必须的信息,其他次要信息通过展开下拉等方式展示,为辅助信息提供深层入口。展开行
    展开行允许用户无需打开新页面在表格内即可查看附加信息,防止用户迷失。

    3c3847075cd0362152d6632f014cd82e.png


    子表格

    表格中打开表格,表格组节把相关的行组合在一起,并且能够收缩和展开,各组节层级要有样式区别。如有需要,在每个组节里可以显示数据概要信息。

    0425b1306af912c57b0df1af52f62ef3.png

    弹窗
    包括模态弹窗和非模态弹窗,模态弹窗是仅支持打开一个弹窗进行详细查看,非模态弹窗是可以同时打开多个,并允许拖动弹窗位置进行信息对比。
    模态允许用户留在表格视图中,且更多地关注附加信息和操作:

    39ad91eff8361423c07080161081f4fa.png


    非模态弹窗对于主动使用的用户来说可能很有用,可以通过一系列操作,比较不同行数据的细节:

    93874e6e0b8fd5cbb6ded7693b615b28.png

    视图切换
    可以通过视图切换查看更多细节,比如在“表格”和“左列表+右详情”之间切换,或者提供“只看文本,看文本和缩略图,只看缩略图”几种查看方式。相比弹窗减少了页面层级和隔离感。单击行链接将表格转换为左侧的列表项目和右侧的其他详细信息,这让用户能够解析大型数据集,而且在涉及到多个项目时不会丢失位置。

    d3d18cded554c67ce920cb3098bcc9e8.png

    3.6 数据的编辑操作
    编辑表格数据在大众化的Web应用程序中并不常见。不过,在企业级Web应用程序中,表格则占据统治地位。此时,最常见的用户需求,就是想要像使用Excel一样实现表格编辑。毕竟Excel早已成为编辑网格数据的一种标准。
    表格数据的操作大体可分为显性与隐性。显性操作,指操作选项显示在行内,直观明了;隐性操作,当鼠标悬停时或勾选才显示操作选项,界面简洁明快,可减轻空间压力,减少干扰。
    单行操作和批量操作
    操作项一般存在于行数据最后,为固定列,或表上方位置,两者对应多种操作场景。单行数据操作
    文字按钮操作项一般不多于三个时,图标按钮不多于四个时,操作项跟在行条目后面;当超过时,建议将操作折叠收起,点击更多弹出多个操作选项。当操作按钮致灰时,鼠标选中可显示原因。

    2aa2cabeff144ede1a7145213ce5a93d.png


    如果行操作不那么重要,或者说行操作过于啰嗦影响用户阅读时,可使用隐形操作,鼠标在行区域悬停时,可对当前行背景作出区分,或放大悬停区域,同时行尾出现可操作按钮,进行行操作。如谷歌邮箱:

    271b03901853a4077fed586e68bd6c74.png

    批处理操作
    对于数据批量操作的场景,建议将操作放到表格上方,与复选框操作配合使用。批处理操作模式允许用户对一行或多行对象执行操作,并在选中复选框后激活表上方操作按钮,如删除、批准、拒绝、复制之类的操作,这将节省用户时间,避免重复对多行进行相同操作。
    表格上方的所有筛选或搜索按钮可能会因操作按钮出现过多而暂时隐藏,如果空间限制导致操作按钮排列不下,则使用“更多操作”按钮。
    二次确认提示:对于用户操作结果给出提示窗反馈,用户点击「删除」后,直接操作;出现提示框告知用户操作成功,并提供用户「撤销」的按钮;用户进行下一个操作或者15s内不进行任何操作,提示框消失,用户无法再「撤销」。

    a246a36bec6ee7214263389b18ce8207.png


    在执行某些无法撤销的操作时,点击删除后,出现模态弹窗进行二次确认,在当前页面完成任务。同时禁止滥用模态弹窗进行二次确认,就既打断用户心流(无法将上下文带到弹出框中),也无法避免失误的发生。

    efcae8863ad1221c4827b70cf11a5e6d.png


    单选、多选和全选

    数据较多时,单个选择数据费时费力。单选框是只能单选,而复选框是能选择单个、多个或全部选择项,而实际上纯粹的单选很少见,所以建议一般场景下在表格最左侧加上复选框,如前面说到的批量操作,多选后,就可以批量操作。点击选框所在行的局部能让整行被选中,每个选定的行都接受突出显示处理,这种做法可增大点击区域减少界面的混乱。
    具体设计时,可以按照数据类型进行选择,如邮件已读、未读等。
    可进行选择的表格需告知用户已选数据量,在翻页时是否允许跨页选择;全选是当前页视图中的所有项目还是选择表格中的所有项目。

    084aac2481010390dc061ac1b7eb770f.png


    单元格编辑、行编辑与表格编辑

    针对于需要进行数据编辑的表格。表内编辑能使数据更具可操作性,表内编辑一般优于弹窗。要启动编辑功能,必须通过鼠标单击,而非鼠标悬停。这样就能确保整洁的网格显示效果。假如是通过鼠标悬停来触发,鼠标每经过一个单元格就得显示一个编辑框,那这种编辑模式就会干扰到不同单元格间的切换,会有多么烦人。
    单元格编辑:针对单个,不连续的可编辑的单元格,为了让功能更容易被发现,可以在单元格数据旁放置编辑图标,这样可编辑和不可编辑的单元格视觉对比就十分明显。单击该图标即可触发编辑,单元格内出现输入框,保存数据并退出。有了这个随时可见的链接后,编辑功能就更容易被注意到了。

    da847106b53eeed51ca15af9e9b2afc1.png


    单元格编辑时,也可以设置整个单元格为热区,以便用户触发。
    覆盖层编辑:点击编辑图标触发;通过在页面上方添加一层来放置编辑数据。虽然编辑期间也不会离开当前页面,但却不是在页面中直接实现编辑。而是把一个轻量级的弹出式覆盖层(如对话框)作为编辑窗口。

    64404a7364158f30878dd944ae1be311.png


    选择覆盖层编辑而非行内编辑的原因也很多。有时候,不可能把某个复杂的编辑任务安排在同一个页面中完成,如果嵌入页面的编辑区域太大,会因为把内容过多地推向下方而损害页面的整体感。
    而其他情况下,也可以选择中断当前页面流,尤其是被编辑的信息本身非常重要时。覆盖层能够为用户提供明确的编辑空间。提示如果有必要占用专门的屏幕空间放置编辑窗格,而且页面的上下文对编辑任务也不重要,就可以考虑使用覆盖层编辑。行编辑:针对同一行标签下的数据编辑。新增数据行后,视图定位到新增的行并高亮显示,让用户快速聚焦。几秒后高亮消失,以免过度干扰用户。

    0a35f2756193905e1692637d27b6c118.png


    不过,表内编辑图标会涉及平衡页面中视觉干扰的问题,如果功能及其提示在页面中的数量过多,很可能造成功能的利用率下降。如果一行有多个编辑选项,则可以适当使用弹窗编辑数据;如果表格有大部分单元格数据需要编辑,则可以全局编辑。

    2626c52a02668b608ff15762f59e6c0c.png

    全局表格编辑:点击表格编辑按钮,当前表格所有可编辑的数据单元格内显示文本修改框或类似XLSX的角标,进入一种特殊得编辑状态,不会给人直觉造成混乱。这一功能基本用于大面积需要填写和修改时,如大型填写报表。

    4be44a67aef13409032199c907432aca.png

    大型数据表由于支持编辑数据处多,这种方法的另一个问题是容易填错单元格,想象单元格的密集,用户意外编辑错误也时有发生,这样的话需要编辑/暂存/提交三个操作。如果发现编辑的内容报错可被更正,应直接引导用户更正;如果报错内容不可被更正,则告知用户原因。
    大型数据表如需减少与表格无关的视觉干扰,提供表格的沉浸式阅读体验,可提供全屏查看的入口,但应注意可以让用户便捷的退出。全屏模式可以直接屏蔽掉页面其它内容,只留下表格区域,用户通过ESC键或按钮随时退出全屏模式,学习成本较低。
    表格数据为空时,在表格的空白内容处加入可创建的快捷入口,引导用户新建表格数据,或者导入数据。如下图邮箱已发送邮箱为空时:

    87772f2136a8421da8df60aa5aa8ca1e.png


    当没有创建诉求的,直接告之暂无数据。如数据是系统产生的,不是由用户创建的,直接告之暂无数据,话术的表述则需与后台文案的整体风格保持一致。

    744ef5c13dfea6db30889ce744ab81ad.png


    后记
    个人关于web表格设计的看法基本写完了,在总结归纳中也发现了自己平常设计表格中的其他问题。大多表格设计在不同场景中需要随机应变,没有绝对的规范,只有相对的规范。我们要理解规范背后的原则,推导出适应其他场景的规范。
    欢迎留言纠正,感谢阅读。我是一只小龙,请鞭挞我吧!


    参考资料:
    1.web表格设计攻略http://www.woshipm.com/ucd/714641.html
    2.B端后台数据的表格的易读性和易操作性体验http://www.woshipm.com/pd/1657136.html
    3.蚂蚁设计模式https://ant.design/docs/spec/alignment-cn
    4.设计表格的可重用性https://uxdesign.cc/designing-tables-for-reusability-490a3760533
    5.数据表的用户界面最佳设计http://www.woshipm.com/pd/661699.html
    6.树形控件在生产力工具中的设计https://zhuanlan.zhihu.com/p/260068653
    7.element组件库:https://element.eleme.cn/#/zh-CN/component/table

    展开全文
  • 为大家梳理一个web表格设计框架,希望能够给大家带来完整的不一样的内容。全文12,598字 ,预计阅读30分钟,建议收藏。在网页或桌面为载体的B产品和生产力工具中,越来越多的设计师需要和数据打交道,查询和处理...

    为大家梳理一个web表格设计框架,希望能够给大家带来完整的不一样的内容。全文12,598字 ,预计阅读30分钟,建议收藏。

    在网页或桌面端为载体的B端产品和生产力工具中,越来越多的设计师需要和数据打交道,查询和处理数据的能力是当前正在设计的大多数产品的关键要求之一,表格被公认为是展现数据最为清晰、高效的形式之一,也是世界上最常用的用户界面工具,其重要性不言而喻。

    1. 表格的布局与构成

    表格,展示行列数据,既是一种可视化交流模式,又是一种整理数据的手段。表格帮助我们组织和展示信息,同时保证信息的可读性,从大量信息中找到所需内容;通过合理布局,感知不同信息间的关联与区别,进行分析和比较;对数据进行排序、搜索、分页、自定义操作等复杂行为。

    d12b71e0a5df117d28fe6a1a00cb920a.png

    1.1 表格的布局

    表格的行元素和列元素行和相交就会形成一个简单的二维表,行,列元素的空间组合就确定了一个个单元格。常见的表格布局有水平型、垂直型和矩阵型三种基本布局,分别强调行、列、单元格。

    水平型会弱化列的存在,强调行信息的连贯性,适用于用户阅读信息时是从左到右,然后自上而下逐条扫描。垂直型是通过强化列的视觉特征来突出不同列信息的对比。矩阵型的表格有均匀统一的分割线,单元格比较明显,适用于列信息较多而没有足够空间用留白来分割信息的表格,同时我认为单元格合并的情况也属于矩阵型。

    738cead813e8407194c8536f48cc0d1a.png

    还有比较常用的表格类型层级型:

    层级表

    是表达结构性关系的表格,表现得如同树的分支,所以又叫树列表。每一个条目可展开或折叠包含的更详细的行信息,也包含嵌套子表格

    层级表并不如矩阵表直观,但通过结构化的组织方式逐级展示表的数据内容,让整体信息架构一目了然,非常适合大型数据表。

    367fc59fbefe624cdc5ded6bb71860cc.png

    结合层级表的使用场景,多以查看为主,编辑需求较少。

    同时还有特殊的表格类型,图表型与卡片型:

    图表型

    除了在单元格中引用图表之外,很多时候都会提供图表/表格视图切换,便于用户从图形角度查看、分析自己关注的数据。有时也会有“图表+表格”的形式,这时候,表格往往只作为明细放在页面底部。大量的表格也会导致视觉的单调。

    c3c1766e5e10f8e9b163843c25f611b0.png

    卡片型

    可以用卡片的形式来展示信息,将信息以组的概念呈现,单张卡片内的信息按优先级进行排列。此外,卡片彼此之间又形成一个整体。

    9909581ba04e4273c56a22ff932909ce.png

    卡片是一种承载信息的容器,对可承载的内容类型无过多限制,它让一类信息集中化,增强区块感的同时更易于操作;卡片通常以网格或矩阵的方式排列,传达相互之间的层级关系。适合较为轻量级和个性化较强的信息区块展示。

    注:在有限的表格空间内需注意卡片信息之间的间距,若卡片信息过长可做截断处理。

    在实际工作中,上述表格类型还有可能互相结合,以更好的达到相应的分析目的。

    比如垂直–层级,矩阵–数据立体表等。

    1.2 表格的构成

    从视觉结构的表现角度,个人将“表格”的构成分为:标题、表上方筛选操作区、表头、表体、底栏。由表头、表体构成内部区域,由标题、筛选操作、底栏构成外部区域。

    702e263951f395283351c110478cbf32.png

    标题

    标题是对表格信息内容的整体概括,可包含数据来源及属性(日期、地区等),以便用户对表格内容有整体认知。给数据表格起一个清晰简明的标题,与其他的设计同等重要。有了好的标题,表格就可以独立使用,如果导航菜单层级清晰,同样能起到标题的作用。标题作为最重要的识别元素,默认展示在左上角。

    筛选操作区域

    这里特指位于表头的上方的操作区域,包含筛选,操作按钮等其他操作。筛选区包含模糊搜索和条件筛选,按钮分为增删改和其它业务处理操作,合理设计筛选区可以大大提高用户的效率。

    cc120da870d4c532469208216d426d3f.png

    表头

    表头对数据性质的归类。表头按惯例要对数据的简况做出反映,如被调查者的性别、年龄、学历、收入、家庭成员组成、政治背景、经济状况等。表头的字段名称应当符合人们的思维习惯,保证用户理解。如果有需要解释,则在字段名称旁边加说明小图标(小问号)。表头在这里也能指列行标签,是对所属行或列数据的描述。

    除了容纳行/列标签之外,表头也可以进行排序、搜索、筛选等。

    10b13251a5784a75ab398332d590329b.png

    表体

    表体是表格的主体内容,具体信息数据内容的填充区域,由一个个基础的单元格组成,单元格是表格呈现数据信息的基本单位,可以是计数、百分比、均值、"-"等任何数据。表体包含数据,分割线,背景,单元格数据可进行点击操作,如链接跳转(项目或者商品等)、展开嵌套表的子集信息(子表格)、操作按钮(查看编辑)等。

    e511a4e372d239b8c0a015e7b16377c9.png

    表尾一般是统计类数据,例如合计、平均数等。表尾使用频率较少,且重要性明显不如表头,我就把它归到表体这类。32173a53786c2cabfd5c3f7a62d78558.png

    底栏

    底栏在表格最下方,主要展示正文中的数据量或单页数据的概览信息,也常提供统计功能,供用户了解总体进展。底栏一般放统计信息、分页控件、备注说明、操作按钮(加载更多)等内容。

    底栏最常见的元素就是分页,分页可以放在头部或底部,常见的还是放到底部,分页固定能省去用户需要翻到顶部或底部进行操作的麻烦。分页可分为整体页码平铺式、全功能版、简易版等,需要根据不同的场景选择最优的设计方案,比如有的时候并不需要定点跳转。

    ab8db11d0330db2ede887d003f47bba5.png

    无限滚动可以替代分页,但对于功能优先的应用未必适用。下图为查看更多按钮,比较少见:

    39f6140f6523a55339d7abeaf75895e5.png

    同时,在选中操作的下,操作按钮也可以位于底栏,在未选中时操作置灰。

    2. 表格的视觉

    采用格式一致外观,突出有利于对象识别的关键信息。

    2.1 视觉标准

    填充与边距

    合适的填充和边距对于视觉设计至关重要,既包括保证数据单元格之间的留白,又包括单元格内部留白,以保证易读性,当创建表格设计规范并严格遵循后,就可以创建视觉一致的表。表格本身应具有最小宽度,在不同画面中宽度应可以增长到整个空间,所以每个列也需具备最小宽度。如果页面宽度小于表格,那么表格应水平可拖拽。

    6d9845cc7cd0adff0c695f415d1383da.png

    对齐方式

    数据合适的位置排列能够提升数据的浏览效率和准确度。对齐能够很好的形成视觉引导线,会让表格更加规范易理解,给用户视觉上的统一感,视线流动更顺畅,让用户快速的捕捉到所需内容。

    正如连续律所描述的,人们倾向于把那些经历最小变化或阻断的直线或圆滑曲线知觉为一个整体,倾向于使知觉对象的直线继续成为直线,使曲线继续成为曲线。在界面设计中,将元素进行对齐,既符合用户的认知特性,也能引导视觉流向,让用户更流畅地接收信息。

    数字应该右对齐

    在表格中,诸如金额、数量等数值排列时,通常采用“右对齐”方式,既方便用户快捷读取数据,还可以使用户进行纵向数据对比。数字是从右向左读的,是因为我们对比数字时,首先看个位,然后十位、百位。当个位数值对齐时,我们就可以快速查看前面的数值,比较多个数据的大小。因此,表格的数字应当右对齐。

    3ffc0d221b1535112cc9939c5d4ea12f.png

    当我们常用的字体如果不同数字宽度不一致时,会导致千位分隔符不在一条直线上,所以要选择数字等宽的字体,等宽的数字在同一竖线时更容易对比。

    文字信息左对齐

    因为我们阅读文字信息是从左向右读,如果不采用左对齐,会降低浏览文字的效率。

    混合型文本左对齐

    当数字、文字、字母组成混合数据时,标题和正文左对齐,使用了一个视觉起点。

    在实际工作中,主流框架组件,表格列数据对齐同时针对分割线,虽不是完美中的对齐,但开发成本低。

    2e61f489d3f7b72d4effdb8ee8e46b56.png

    不论何种对齐方式,都需要考虑到该字段可能存在的极端情况。如:普通文本若过长,可在鼠标悬停状态时单元格展开列出全部字段信息。

    色彩

    一般表格具有的颜色尽可能少。颜色和可读性是密切相关的,要合理的使用颜色,普通表尽量使用简单的背景色和点缀色。背景色方面,除了行/列交替颜色(可以区隔内容,引导视线)、悬停高亮底色(便于准确辨别光标所在行)等处理方法,还可以对表头表尾进行视觉区分。但不能增加过多颜色以引起混乱。

    分割线颜色尽量不要与背景色相差太大。当字体选择深灰色,背景为浅白色时,边框选择浅灰色,这样可以减少我们视觉疲劳,不会使表格看起来令人生畏。

    f39765cfb0f8c64015f7033347ede75e.png

    2.2 表头的优化

    表头标签应该简炼准确,以达到节省表头空间和减轻视觉压力的作用,让用户注意力聚焦在数据本身。当然对于产品而言,先能把事情说清楚,再考虑文字的简洁性。

    当数据结构比较复杂的时候,使用多级表头来体现表头与数据的层次关系,如下图:

    d9c6d1e281f5af5a53fb276a77e8f93b.png

    当数据有看不懂或生僻的信息时,用户期望有人告诉他为什么会这样,就需要在表头标签后加上小问号,鼠标悬停弹出说明文字的提示框。

    不需要表头

    如果表格数据可以自我解释,表头就可以不需要。电子邮件的表格是一个好例子,邮件主题,发送者,发送日期都区别度高不会混淆的。当然有的情况表头是不能去掉的,例如有两个不明确的日期,这时候你就需要定义一个表头。

    83b599e2a852946057640b830f13ff5f.png

    2.3 行的优化

    默认排序

    所有行按逻辑排序,比如按风险由小到大,将最安全的操作放最前面;或按照信息时间排序,由新到旧,以创建时间进行排序,即最新创建的排在最前面。

    7932eb20c77ba772d4c82923dcca1683.png

    合适的行高

    行高是非常重要的参数,直接影响着阅读体验。较小的行高承载更多信息,让用户无需滚动鼠标即可看到更多数据,但会降低扫描效果,导致视觉解析错误。适宜的行高使得数据更易于被阅读,但这不代表行高越大越利于阅读。283d50dd1d08fa2d6b4653a01ad635e0.png

    设置行高的原则:

    A.单行数据显示时,数据显示紧凑、有序。

    B.多行数据显示时,弱化表格形式,提供丰富的视觉展现。

    因此,对于单行显示的表格,建议行高为字体高度的2.5倍到3倍;对于多行显示的表格,建议内容区到上下边框的距离略小于文字高度。当然,也可以提供切换按钮让用户自己控制显示密度。

    横向斑马线

    斑马线又称作间行换色、隔行变色、行的交替样式。它能让行间界限更为明显,同时加强视觉流的横向引导,避免在阅读表格时出现迷失情况,要注意两种颜色不能反差过大。另外,可以根据实际情况选择是否与边框同时使用。

    0d9c0b91d5c880028f0a8cff1e119a58.png

    行的强调

    有时为了强调行内信息的连续性,可去掉单元格的纵向分割线,仅使用横向分割线和底色分割,使横向信息更加连续通畅,以提升阅读效率。

    表格还可以通过颜色来指示状态,颜色指示可以帮助用户识别哪些行可能需要特别注意的行数据。

    0dfe6a2a2425a85acf514da0c845f5a7.png

    同时可以对行内信息进行扩充,进一步弱化表格形式,丰富各类信息的视觉呈现,同时兼顾行与行之间的关键信息的对比,如上文表格布局提到的图表的使用。

    2.4 列的优化

    减少列的数量

    尽量减少列的数量,关注用户需要的必要信息。当数据列过多时,要分清主次列,非重点、辅助性信息可以通过次级入口来解决,如固定重要列(主体名称/操作列),次级列在表格中间区域左右拖动。

    合适的列宽

    列宽严谨的处理方式有三种。第一,通过栅格,由列的数量决定列宽,主流框架组件一般是这种;第二,可以固定部分列的宽度,其余列则按百分比处理;第三,在固定宽度的基础上,允许用户自由拖动调整列宽的大小。(当然我觉得不要太拘泥这个,合适就好)

    列的强调

    为便于用户对数据进行对比分析,可以在原始数据的基础上给出差值、升降变化等数据处理结果,减少用户数据加工的过程,直达用户获取信息的目标(需要明确用户目标),提高用户的阅读速度。

    一般列的强调是配合列排序功能使用的,如点击率、访问量的排序。有时会使用不同粗细的纵向分割线或不同底色对列信息进行区隔,增加同类信息的对比性。

    f67b84e98fb2a52ba9e25015449f24d1.png

    2.5 单元格数据展示

    度量单位的使用

    其中的关键区别在于数字的大小。数据的度量单位无需重复,一般在表头标识清楚即可。

    a43cdb60f1b0420cf24e51fcbb8eba3b.png

    空白单元格处理

    一般指空数据或零数据的情况,空白单元格容易造成用户困惑甚至误解,用户会搞不清楚到底是没有数据,还是数值为零?正确做法是,对于数据为零的单元格,要填上0,且小数点后位数、单位,都要与上下数据格式保持一致;对于没有6fa9bb60a1ab1b3c304008a0c76cdc93.png数据的单元格,通常是用“-”表示。

    B端后台数据类型较多,最好能为空数据做出释义,可以在“列标签”或底栏给出解释文案。

    数据过多

    单元格的宽度根据列中字符的长短自动变化宽度,超过该列宽可以省略显示,末尾以"..."显示,鼠标悬停时出现气泡显示完整内容。

    关键属性标识

    比如用户重点关注数据状态、某些数据的上升和下降等,可用符号进行标识,帮助用户快速定位到目标信息。

    1c01e391f7cfd45d0ffd27059def0fec.png

    2.6 分隔线

    水平分隔线,能显著减轻表格在垂直方向的视觉重量,内容更加条理清晰,便于用户对比查看数据。

    垂直分隔线,在表格中使用适合的对齐方式后,那么就可以省略;数据量级比较大的表格,列之间过于紧密时建议保留,可以使用较淡的分隔线,将不同列数据区分开来,提升浏览速度。

    下图采用了同时使用水平和垂直分隔线:4754640771d67abbcb9bcbf7f42ab1cc.png

    如果在表格中使用适合的对齐方式,分隔线就是多余的。但由于表格数据量级不同,即使要用,分隔线也要淡,不能妨碍快速浏览。

    2.7 分页及翻页

    在web端,表格的的数据内容超过一定“数量”时需要提供翻页功能,这个“数量”由表头的高度、表格的行间距、目标用户群体的显示设备的配置等因素来决定,原则是不要超过一屏,考虑到每个用户的使用习惯,可以让用户自定义每页的显示的数量。相比于跨屏翻页而言,向下滚屏会更便利,在下文控制表内容中展开比较了无线滚动与分页。

    分页控件内容 :用户自定义每页显示的数量,当前页码(行数),全部数据的页数(行数),向前翻页,向后翻页,到达第一页,到达最后一页等。

    当用户的数据未超过一页时,可以隐藏翻页控件。翻页按钮不可用时,须给出置灰态或不可点击。

    分页控件做为筛选数据的一种方式,通常可以结合排序、筛选等其它控件一起使用,来提升用户的操作效率,如网易的邮箱,翻页与日历结合使用,对于有大量邮件数据的用户来说,查阅邮件的效率更高。

    99c45b2df8ccc6b8c3826cbe6a8a718b.png

    除了无限滚动,还有第三种翻页方式,鼠标点击“加载更多”按钮以查看更多数据。

    2.8 简化表格

    干净的表格使人愉悦。特别是在处理大量数据时,巨大的数据量会增加用户的压力,因此要减少视觉干扰。删除不必要的分隔符与背景,去除阴影等。信息内容的有效传达是表格设计的本质,让用户注意力聚焦在核心内容上。所以,做减法设计就显得可贵了。

    实现简化的方法是适当删减。如果画面视觉很糟糕,请删除辅助信息、不常用的控件和分散注意力的样式,但要小心删除必要内容。“简单并不意味着没有杂乱,这是简单的结果。简单性在某种程度上基本上描述了对象和产品的目的和位置。想设计出一个井然有序的产品。这并不简单。“ - Jonathan Ive

    减少分隔线

    这必须是在数据允许的情况下。水平分隔线能显著减轻长表格在垂直方向的视觉重量,加快数值的对比效率。但如果在表格中使用适合的对齐方式,竖直分隔线就是多余的。它们最大的贡献就是缩减元素之间的距离,明确了单元格范围。即使要用垂直分割线,也要淡,不能妨碍快速浏览。

    不使用斑马线,使用不同底色区分指示不同类型的数据是有必要的,但是用来区分同一类数据,斑马线在很多时候又是没有必要的,因为水平分割线已经明显区隔了。

    省去分隔线,对于较小的,动态性较小的表,可以省去所有分隔线,并获得醒目的外观。当然,这更多是数据量不大且易分辨的情况。

    8ff229bd8913c2421a943e402a0b929b.png

    尽量以黑白为主

    运用彩色表达组织或含义可能会增加误解,并且引发视觉障碍者的易用性问题。普通表格一般使用颜色代表状态或进度。

    克制图形元素的使用

    其他图形元素,如星号、三角、圆点、对勾、叉等,虽然能够帮助组织数据、更直观的传达信息,但要注意数量,物极必反,要注意克制这些元素的使用。

    3. 表格的交互

    优秀的表格交互给予用户操控感,不让其迷失在数据中。提供便捷的过滤筛选组件,配合鼠标悬停、点击、框选等操作,方便用户查看更多数据信息,快速定位目标数据,或根据特定规律对数据进行排序、突出、降维等处理。当我们将这些组件与交互动作结合,用一些习以为常的交互去操纵表格时,用户将更清晰、有信心、提效率。

    3.1 筛选与搜索

    筛选和搜索是用户精确目标数据的好方法,这是一项基本功能,可让用户从默认的表格数据轻松获取要查找的内容,在数据量较大的表中特别有用,一般位于表上方的操作区域或表头区域。

    表上方

    当表格的数据量较大时,可在表上方操作区域增加对象搜索或数据分类来提升用户查找效率,且能同时使用。提供多维的筛选和排序,是增加用户效率的有效方式。

    输入搜索框输入用户关心的内容,既可以实时筛选,也可以点击触发,一般须支持模糊查询,否则用户必须记住所有内容,才能查出要找的目标项,成本过高。也有特殊情况,如保密性较高的账号密码列表查询需精确输入。

    56590ee452c2d8ec816c19df2feb3b67.png

    无论手动查询还是自动查询,如果查询条件是组合的几个,那么一般是填好全部筛选条件再让用户点击查询按钮。因为如果用户要查询的表格数据具有多个属性且相互联系时,组合条件的查询显然是更合理的。

    b9b08d800c10447c2fae7f9783caa1fa.png

    如果筛选操作是单个条件独立查询,各个筛选条件都是相互独立的,那么最好填好一个条件便自动查询。

    筛选条件有时候既需要汇总数据的,又需看单一条件下的数据,比如状态包含“待付款、待发货和待收货等”,此时则是做成Tab单选较好,如下图所示。

    4825d36f837e8ed26cd95c3e5e531410.png

    表头

    放置在表头标签上的筛选,受列内容的影响,一般做单次筛选。通过对表头标签旁按钮的点击,使用户更快捷进入到自己的筛选条件中。通常,表单越左的列数据越重要的,也是筛选频率与需求最高的,因此高频的筛选场景基本可以得到满足。87798ffc9e73a121ccbb9756d3c2a2ab.png

    3.2 滚动与固定

    垂直滚动固定表头

    垂直滚动时,固定表头可以让用户明白当前单元格数据信息的属性和含义,体现界面友好性。当数据列差异不大,用户不能直接根据表格数据分辨类型时,尤其需要固定表头。当表头有操作时,固定表头更能提升使用效率。

    数据列表相当庞大而复杂的时候,使用固定表头可以帮助用户区分列与属性。1ee0c97afebc5994efd83d68547358d9.gif

    水平滚动列固定

    当呈现大量数据时,表包含的列数超出了该表的最大宽度,水平滚动就无法避免。第一列(前几列)或操作列固定能更方便信息的对比与操作。基于我们读取信息的方式,从左到右放置关键列。最左侧的列会引起最多的关注,当我们感兴趣时,才会查看其他列,它会影响用户阅读所需时间与精力。

    013b2b20f307ccb7ea4b3df1ab3a0bb5.gif

    在大型表格中,我们才可以水平滚动,最好是寻找可替代方案。表格中文本为什么这么长?能减少字数嘛?可以将文本换至第二行以减少水平宽度吗?能否为过长的文字选择别名吗?可否用图形条目取代?是否可以采取工具提醒?是否可以安排在窗口或对话框里?

    一般有两个解决办法:文本换行,对它缩排;在单元格区域截断文本,在提示中显示完整文本。方法一意味着我们要增加表格高度,且每行高度可能不同;方法二,如果不同文本内容的头几个字一样就存在问题了。但这两种方法都比水平滚动好。

    3.3 排序

    表格初始有一个默认排序,也叫初始排序。但有时,用户希望将表格中某一行位置换到另一位置。

    拖曳排序

    拖放似乎很简单。就是抓住某个元素把它放到另一个地方而已。可是,事实上,拖放过程涉及到了大量细节,在拖放期间,需要处理许多特定的状态。

    用户在拖动模块时,页面整体布局基本保持不变。因为移动的不是模块,而是插入条。插入条指明了放置模块时的目标位置。常用于数据量较小,有拖曳排序需求的场景。又可以运用在多个表一起的情况。

    3c9351d3d86cbd799b93f70506f0155a.gif

    穿梭表格

    就是多表格拖拽的情况。比如左侧的表格内容可拖拽至右侧列表框,同时支持表内上下拖拽更换位置顺序,也可直接选中对象在两栏中按钮移动,完成拖拽行为。

    23512bc3a7c8a9023690fb466fa73e64.png

    那如何让用户知道可拖拽呢?

    增加意向符号;改变光标样式;增加被拖拽对象临时性底色,突出显示。

    1f2ef1e540b5a15a86518166b9c108cf.png

    如何让用户知道怎么拖拽到哪里?

    被拖入区域应增加插入位置符号,可以明确指出放置模块的目标位置,减少用户困惑,也可以对放置操作发生后的页面外观提前给出预览。同时设计时考虑上下左右两个方向的拖拽运动分别可以触发什么结果,超出表格范围拖拽对象消失。

    e617a32d02511fae1838e28c629b84d8.png

    被拖动对象应呈现为轻微透明的样式?应该显示为完全不透明?或者改为使用缩略图表示?我认为这三种方法都可以。透明效果也会让更多表格内容对用户可见,有助于用户预览最终放置后的结果。从而方便用户查看页面,也会表明该模块处于一种特殊模式中。透明可以表明相应被拖拽对象尚未定位,或者说正处于过渡状态。

    表头排序

    排序又分为降序和升序,比如,事件相关的表格,默认时间降序排列;风险相关的表格,默认安全降序排序。

    表头排序可以辅助用户快速挖掘出需要关注的信息,发现数据信息之间的关系,一般可按数字大小、文字拼音顺序、字母顺序等其它数据特征进行排序。如果表格中不是所有数据都能排序时,则需要标识出可排序操作的列,一般采用三角箭头做为标识,实时反馈当前操作状态。

    3.4 控制表内容

    控制列

    可伸缩列

    由于存在多个数据标题和列,我们只能根据表格的宽度来展示数据。在某些情况下,表格可允许用户选择他们关注的列,在其固定宽度基础上,让用户可以自由拖动列宽边缘以调整列宽。

    ed6c4af7fe538babf96c97e9f35f691a.png

    自定义选择列

    由于数据报表,往往需要满足各种不同的角色在不同场景下的需求,因而在表格数据显示上,一般采取宁多勿少的原则,即尽可能提供详细的数据,由此会数据指标过多,难以在表内完整展示,导致需要水平拉伸,降低了表格的可读性。

    针对上面这个问题上,可将所有的指标名称罗列在表格上方,并提供多选操作,在默认情况下仅展示最常用、最重要的几个指标(如下图)。这样能让用户在表格上方看到所有指标名称,避免了原来需要水平拖拽而导致指标浏览不全的情况。其次,用户可以根据自己的需要,自由的选择显示所需指标,隐藏不必要指标,减少干扰。

    d9652900d0a513d28e6919b6451d2989.png

    B端后台通常会对应不同的角色及不同的需求,可让用户根据自己的需求来定义表格的展示列及列的顺序。同时系统应记住用户上一次自定义列的设置。

    控制行

    控制行高

    较小的行高让用户无需滚动页面就能查看到更多的数据,但可扫描性的效果易导致视觉迷失。这就是为什么许多成功的数据表设计包含了控制行高(显示密度)的功能。

    2058eb24cb2dd7a5dd1ccd7906ce638a.gif

    树形表

    行也可以结构化分为不同的类别,前面提到了层级表/树形表,可以嵌套子表格,展开和折叠。可操作按钮一般位于各级行标题左侧,具有独特的视觉效果并具有扩展或折叠的功能。单击表中的类别标题会在类别的展开或折叠状态之间切换。展开与折叠也将极大的影响行内容显示。

    1cb6425414499e0e83020521880f420b.png

    分页

    分页可以将表内容信息划分成独立的页面来显示。

    优点:

    1.良好转换:当用户是在结果列表中查找特定信息而不仅仅浏览信息流时,分页就是好的选择。你会知道表格总量与当前页的准确数量,能够决定在哪里停下或者去哪里。

    再次寻找特定数据时,分页方案让我们能够大概定向到目标数据位置。用户可能难以记录目标数据页精确数字,但一般能记录大概范围,而页码链接能让用户更容易到达那里。

    2.掌控感:无限滚动就像个无止境空间——无论你滚动多久,你会感觉永远结束不了。当用户知道可用行数量时,他们可以自己主观做出决定而不是被动滚动。同样的,当用户能够看到结果的数量时,他们将能够预估他们查看表数据大概要花费多长时间。

    缺点:

    额外的动作:在分页方案中,用户要到达下一页表内容,就必须点击分页控件上的按钮跳转,等待表格新内容的加载。

    无限滚动

    表格无限下拉加载使用户在数据内容面前一直滚动查看。向下滚动的时候不断加载新内容,虽然十分方便与诱人,但不是什么场景都适用。

    优点:

    1.高效浏览:无线滚动提供了一个高效的方法让用户浏览表数据信息,而不必等待表格新内容的加载。当用户并不特意寻找特定的内容时,他们需要通过查看大量内容找到自己中意的信息。

    2.体验更好:用户使用滚动能获得比点击分页有更好的体验。滚动行为要比点击更快更容易,对于那些连续且冗长的内容,无限滚动要比把分页的有更好的易用性。尤其在表格区域狭小时,使用无线滚动更能节省空间。

    缺点:

    1.受限性能:页面加载速度是良好体验的一切。尤其是表格计算数据时需注意使用无限滚动,缓慢的加载速度会造成用户的不耐烦与离开。用户在一个表格页面中越向下滚动,就会加载更多的内容,当数据量过大时,结果就是页面性能越来越低。

    2.位置丢失:无线滚动同分页相比,没法标记当前位置且不能再随意回到之前位置。一旦离开,就会丢失当前的浏览记录,如果要回到上次的位置,必须得重新滚动去寻找。当用户有这种行为的话,无线滚动就会让用户产生困扰厌烦。尤其当你刷新页面时发现自己又回到表格顶部,不得不重新滚动等待结果的加载以继续查看。

    3.信息缺失:滚动条并没有反映出实际数据量。假设快要接近底部了,当受到引诱滚动条再滚动一点点时,结果却会发现表格数据量又刷新了。从一个可用性的角度来说,打破滚动条的正常使用规则对用户来讲是糟糕的。

    一般来说,无限滚动适用于在数据有限且信息重复的表格,有利于内容探索。分页则适用用户在寻找特定信息及浏览记录,易快速访问。

    3.5 查看次要信息

    表格内容的取舍要建立在对业务的了解之上,尽量精简指标,隐藏不必要信息,减少干扰,避免无主次的铺出所有信息。不要让用户一次性接收过于庞大的信息量,建议默认只展示用户所必须的信息,其他次要信息通过展开下拉等方式展示,为辅助信息提供深层入口。

    展开行

    展开行允许用户无需打开新页面在表格内即可查看附加信息,防止用户迷失。

    b0653ec4123fb7e7a90a4ea806f27171.png

    子表格

    表格中打开表格,表格组节把相关的行组合在一起,并且能够收缩和展开,各组节层级要有样式区别。如有需要,在每个组节里可以显示数据概要信息。

    e0b3505c9cacc7c6819c4d7ec43a3edd.png

    弹窗

    包括模态弹窗和非模态弹窗,模态弹窗是仅支持打开一个弹窗进行详细查看,非模态弹窗是可以同时打开多个,并允许拖动弹窗位置进行信息对比。

    模态允许用户留在表格视图中,且更多地关注附加信息和操作:

    4de67f15bc1910f0f3faea9cbfd72a7a.png

    非模态弹窗对于主动使用的用户来说可能很有用,可以通过一系列操作,比较不同行数据的细节:

    505095bee5d5655155a7c6e0fa353767.png

    视图切换

    可以通过视图切换查看更多细节,比如在“表格”和“左列表+右详情”之间切换,或者提供“只看文本,看文本和缩略图,只看缩略图”几种查看方式。相比弹窗减少了页面层级和隔离感。单击行链接将表格转换为左侧的列表项目和右侧的其他详细信息,这让用户能够解析大型数据集,而且在涉及到多个项目时不会丢失位置。

    b0df55283a1b1686b3afe0914e41dc43.png

    3.6 数据的编辑操作

    编辑表格数据在大众化的Web应用程序中并不常见。不过,在企业级Web应用程序中,表格则占据统治地位。此时,最常见的用户需求,就是想要像使用Excel一样实现表格编辑。毕竟Excel早已成为编辑网格数据的一种标准。

    表格数据的操作大体可分为显性与隐性。显性操作,指操作选项显示在行内,直观明了;隐性操作,当鼠标悬停时或勾选才显示操作选项,界面简洁明快,可减轻空间压力,减少干扰。

    单行操作和批量操作

    操作项一般存在于行数据最后,为固定列,或表上方位置,两者对应多种操作场景。

    单行数据操作

    文字按钮操作项一般不多于三个时,图标按钮不多于四个时,操作项跟在行条目后面;当超过时,建议将操作折叠收起,点击更多弹出多个操作选项。当操作按钮致灰时,鼠标选中可显示原因。

    ecbdba27e959e83f29ee25e76860884e.png

    如果行操作不那么重要,或者说行操作过于啰嗦影响用户阅读时,可使用隐形操作,鼠标在行区域悬停时,可对当前行背景作出区分,或放大悬停区域,同时行尾出现可操作按钮,进行行操作。如谷歌邮箱:

    c526d52c036d016a3fedc97540d4a3b0.png

    批处理操作

    对于数据批量操作的场景,建议将操作放到表格上方,与复选框操作配合使用。批处理操作模式允许用户对一行或多行对象执行操作,并在选中复选框后激活表上方操作按钮,如删除、批准、拒绝、复制之类的操作,这将节省用户时间,避免重复对多行进行相同操作。

    表格上方的所有筛选或搜索按钮可能会因操作按钮出现过多而暂时隐藏,如果空间限制导致操作按钮排列不下,则使用“更多操作”按钮。

    二次确认提示:对于用户操作结果给出提示窗反馈,用户点击「删除」后,直接操作;出现提示框告知用户操作成功,并提供用户「撤销」的按钮;用户进行下一个操作或者15s内不进行任何操作,提示框消失,用户无法再「撤销」。8b630cf79745ec860f1f682e829a73e1.png

    在执行某些无法撤销的操作时,点击删除后,出现模态弹窗进行二次确认,在当前页面完成任务。同时禁止滥用模态弹窗进行二次确认,就既打断用户心流(无法将上下文带到弹出框中),也无法避免失误的发生。

    6ac90a194c44dade67e3cedceaaacb2f.png

    单选、多选和全选

    数据较多时,单个选择数据费时费力。单选框是只能单选,而复选框是能选择单个、多个或全部选择项,而实际上纯粹的单选很少见,所以建议一般场景下在表格最左侧加上复选框,如前面说到的批量操作,多选后,就可以批量操作。点击选框所在行的局部能让整行被选中,每个选定的行都接受突出显示处理,这种做法可增大点击区域减少界面的混乱。

    具体设计时,可以按照数据类型进行选择,如邮件已读、未读等。

    可进行选择的表格需告知用户已选数据量,在翻页时是否允许跨页选择;全选是当前页视图中的所有项目还是选择表格中的所有项目。

    0e3705b328bc277af9411d907f4e0794.png

    单元格编辑、行编辑与表格编辑

    针对于需要进行数据编辑的表格。表内编辑能使数据更具可操作性,表内编辑一般优于弹窗。要启动编辑功能,必须通过鼠标单击,而非鼠标悬停。这样就能确保整洁的网格显示效果。假如是通过鼠标悬停来触发,鼠标每经过一个单元格就得显示一个编辑框,那这种编辑模式就会干扰到不同单元格间的切换,会有多么烦人。

    单元格编辑:针对单个,不连续的可编辑的单元格,为了让功能更容易被发现,可以在单元格数据旁放置编辑图标,这样可编辑和不可编辑的单元格视觉对比就十分明显。单击该图标即可触发编辑,单元格内出现输入框,保存数据并退出。有了这个随时可见的链接后,编辑功能就更容易被注意到了。

    c3e4beb53aaef902f4175cdd8602dcba.png

    单元格编辑时,也可以设置整个单元格为热区,以便用户触发。

    覆盖层编辑:点击编辑图标触发;通过在页面上方添加一层来放置编辑数据。虽然编辑期间也不会离开当前页面,但却不是在页面中直接实现编辑。而是把一个轻量级的弹出式覆盖层(如对话框)作为编辑窗口。

    dacaf74f10a56f7fe95f85df2a362a99.png

    选择覆盖层编辑而非行内编辑的原因也很多。有时候,不可能把某个复杂的编辑任务安排在同一个页面中完成,如果嵌入页面的编辑区域太大,会因为把内容过多地推向下方而损害页面的整体感。

    而其他情况下,也可以选择中断当前页面流,尤其是被编辑的信息本身非常重要时。覆盖层能够为用户提供明确的编辑空间。提示如果有必要占用专门的屏幕空间放置编辑窗格,而且页面的上下文对编辑任务也不重要,就可以考虑使用覆盖层编辑。

    行编辑:针对同一行标签下的数据编辑。新增数据行后,视图定位到新增的行并高亮显示,让用户快速聚焦。几秒后高亮消失,以免过度干扰用户。

    008fa251751e1148e254afa789f2f6e2.png

    不过,表内编辑图标会涉及平衡页面中视觉干扰的问题,如果功能及其提示在页面中的数量过多,很可能造成功能的利用率下降。如果一行有多个编辑选项,则可以适当使用弹窗编辑数据;如果表格有大部分单元格数据需要编辑,则可以全局编辑。42f3d38e7187f53de5c500aafe781575.png

    全局表格编辑:点击表格编辑按钮,当前表格所有可编辑的数据单元格内显示文本修改框或类似XLSX的角标,进入一种特殊得编辑状态,不会给人直觉造成混乱。这一功能基本用于大面积需要填写和修改时,如大型填写报表。

    bd1a4c4211a5d3a7f688329ad619995d.png大型数据表由于支持编辑数据处多,这种方法的另一个问题是容易填错单元格,想象单元格的密集,用户意外编辑错误也时有发生,这样的话需要编辑/暂存/提交三个操作。如果发现编辑的内容报错可被更正,应直接引导用户更正;如果报错内容不可被更正,则告知用户原因。

    大型数据表如需减少与表格无关的视觉干扰,提供表格的沉浸式阅读体验,可提供全屏查看的入口,但应注意可以让用户便捷的退出。全屏模式可以直接屏蔽掉页面其它内容,只留下表格区域,用户通过ESC键或按钮随时退出全屏模式,学习成本较低。

    表格数据为空时,在表格的空白内容处加入可创建的快捷入口,引导用户新建表格数据,或者导入数据。如下图邮箱已发送邮箱为空时:

    43ef1f202c596088977fdcc84618339c.png

    当没有创建诉求的,直接告之暂无数据。如数据是系统产生的,不是由用户创建的,直接告之暂无数据,话术的表述则需与后台文案的整体风格保持一致。

    54c4cbbba5a6b41f8bef9ff2e53aa6a4.png

    后记

    个人关于web表格设计的看法基本写完了,在总结归纳中也发现了自己平常设计表格中的其他问题。大多表格设计在不同场景中需要随机应变,没有绝对的规范,只有相对的规范。我们要理解规范背后的原则,推导出适应其他场景的规范。

    欢迎留言纠正,感谢阅读。

    我是一只小龙,请鞭挞我吧!

    8051bea7baad4098dd09e0a77452e733.png

    参考资料:

    1.web表格设计攻略http://www.woshipm.com/ucd/714641.html

    2.B端后台数据的表格的易读性和易操作性体验http://www.woshipm.com/pd/1657136.html

    3.蚂蚁设计模式https://ant.design/docs/spec/alignment-cn

    4.设计表格的可重用性https://uxdesign.cc/designing-tables-for-reusability-490a3760533

    5.数据表的用户界面最佳设计http://www.woshipm.com/pd/661699.html

    6.树形控件在生产力工具中的设计https://zhuanlan.zhihu.com/p/260068653

    7.element组件库:https://element.eleme.cn/#/zh-CN/component/table

    展开全文
  • @木槿425授权发布https://www.zcool.com.cn/article/ZMTE2MTc4NA==.html-------------------------------------------感谢大家...正文B产品上表单、表格也许复杂的很令人厌烦,但它们是富含数据的文件中至关重要的...

    42494119f9e3c09a69c69adfee858f42.png

    d16c5cd102a304dabec0ce4e358d0f3e.gif

    @木槿425 授权发布

    https://www.zcool.com.cn/article/ZMTE2MTc4NA==.html

    -------------------------------------------

    感谢大家对黑马家族的支持,今天给大家推荐一篇关于移动端表单设计原则与技巧的文章,希望对你有所帮助!

     正文

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

    优化信息框架

    旧版中TAB选项表形式单一,实际使用过程中长时间单一的选项样式会使用户产生视觉疲劳,降低体验快感。为了提升产品敏感度,修改为按钮图标文字式瓷片卡,增加用户紧迫感和对产品详情的了解欲望。68684e2aa4c55de176af617fe9567b03.png对于产品分类表单展示从视觉上进行了调整,主要体现在层级关系、亲密关系。目的是让用户表单填写过程中区分层级按钮,分类按钮颜色降低透明度,从视觉层级上更舒服,更精致。操作按钮放在右边更符合用户行为操作习惯,同时当多种产品分类表单时减少户在行动时的困惑和犹豫,确保用户在表单填写过程中的流畅体验,从而实现最终商业上的交易成就。82f08bbb123e2fbef0e84596175709df.png在旧版表单中分类按钮都用了纯色,按钮位置不统一,按钮本是辅助用户快速做出选项的,但在这个场景中却干扰了视觉。按钮降低透明度帮助用户预先区分出主要行动和次要行动,通过视觉语言强调主要按钮,弱化次要按钮,引导用户进行选择。修改“投保地址”减少手动输入,提供用户的历史输入项395cdedf5aaf5eb5f5e8e7c23fe9cc1e.png在选项列表中,“是”“否”是选按钮必须是互斥的,这意味着当选择一个选项时,之前已选中的选项会被反选。因为有互斥的存在,选项内容只的两个,所以这一场景中用开关按钮更简洁。def4f260230209c1a08ae8429ccbd7f9.png旧版前资料上传列表,第一眼看到的是满屏文件夹,而这些并不能帮助用户进行浏览或操作,反而会造成视觉干扰。改版后对文件图标大小,缩略图尺寸,以及标题信息大小,进行整体调整,从而提升浏览效率。调整文件图标占比,突显更为重要的标题信息。优化标题,时间信息文字比减弱,标题更明显,提升文件浏览查找效率。缩略图缩小排列与文件形式保持统一,视觉层级浏览理舒适。文件信息列表层级依次为:图标 > 标题 > 时间 。82d3a884ba57edf7d4564d36e6901574.png在资料上传中文件与图存在着两种删除交互方式,给用户造成了困扰操作。改版后将图片与文件的删除操作展示形式统一,同时添加资料上传资料可全部清除功能,给用户减少了单独删除操作。8b656557756fedfaa5f5881958109975.png询价表单是销售人员最高频的路径,针对这个场景,视觉设计必须服从功能设计优先,紧跟设计潮流—极简风格,打造高级感的设计理念,通过视觉设计区分信息层级,让用户操作、浏览时更便捷。表单从以上几个维度进行优化:大小、重量、间距。902e48c344066f12d0869d4d5a0ee2e8.png

    新增功能优化

    在功能架构上进行视觉优化,整体设计中主要体现在:调整板块结构,运用图标设计、强化商机详情内容属性,提升点击率,简化设计,增强用户粘性。5c5008e5f5adf40cba8edeeaee603fc5.png商机详情的拜访列表,增加“点评商机”功能。仅在未关闭/未作废商机的拜访记录中增加“我要点评”,点击“ 点评”可对拜访记录入评论,200个字以内。

    关于评论排序

    看最新的评论

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

    看懂评论

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

    要看有用/好玩的评论

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

    正序排列 or 倒序排列

    线型结构

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

    树型结构

    树型结构的设计我们需要考虑的是次级评论的展示问题。一级评论像是树的主干,次级评论是依附于主干的分支。树型结构会聚合展示所有相关的次级评论,用户可以看到清晰的对话记录。虽然商机的评论少,但是商机的评论信息去对销售重要程度比较高,所以为了理清关系用了树型评论。870213e15df3e8f1278d7dd5fcc27be8.png评论更新频率不是很高,基于产品定位,用户希望看到围绕一个观点大家的讨论记录,所以更加关注的是评论之间的逻辑性。因此采用的还是正序排列,按照评论的发表时间依次展示,帮助用户理解。b436f58748819ae8e26a6f4626ef1eaa.png

    表单设计

    标签分类样式

    左标签:左标签在目前来说是最常见的一种标签样式。顶部标签:与左标签相比,顶部标签可以给输入框的内容腾出足够的空间。会占据更多的纵向空间,之前一屏就可以展示的内容,现在用户需要滑动页面才可以看完。行内标签:样式看起来很适合手机端的表单设计,因为它可以极大的减少了视觉噪音。但当用户点击输入状态后,就看不到这些标签了,那么用户记忆力会很吃力,不利于用户短期记忆。5292144c2a517ef93bfff9f95cb625c1.png

    输入域符合预期

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

    以简驭繁

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

    *号的使用

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

    *号的总结

    6f1a79715c7b15a5a20af4d7870dd527.png

    预输入清除

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

    减少手动输入

    联动键盘

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

    键盘匹配

    根据填写类型不同,呼出对应的键盘,省去用户收起点开键盘的重复动作和表单上下填写项的切换,让填写表单的过程更为顺畅,用户思考不被打断。不应该把所有的输入框都做成文本框样式,用户必须调起键盘一个字一个字地输入,这种体验是非常不友好的。关于文本框是用全键盘还是九宫格,手机从最开始的功能机开始,就是直板手机,智能手机也是这样演变过来的,功能机的时候用的就是九宫格,很多人都已经习惯了,还有九宫格在手机上的布局更加合理,全键盘看起来是把所有的字母都展现出来了,可是手机本身就只有那么大,全部展现出来,就会导致键盘的字母很小,看都看不清,对于很多人来说都打不快。

    系统自动识别

    根据表单需求,收集姓名、性别、出生日期、身份证号四个输入项。可通过后台技术的一些手段从身份证号中提取出信息,用户原本要输入4个项目信息,现只输入2项信息输入。身份证的倒数第二位可以判断性别:奇数是男,偶数表示女,出生日期大家都能看出。而这样操作成本大大下降,减少误输可能性。1-2位省、自治区、直辖市代码;3-4位地级市、盟、自治州代码;5-6位县、县级市、区代码;7-14位出生年月日,比如19820426代表1982年4月26日;15-17位为顺序号,其中17位(倒数第二位)男为单数,女为双数;结合不同的场景去思考会发现无限多的做法,减少输入项个数的目的也只是为了让完成表单变得更加高效。ff7ea808923972b2775408a366dd1368.png代替输入由于 OCR 技术的发展,拍照识别文字的速度和准确度都有了较大的提升,最常见的就是各大金融服务应用中拍照识别银行卡号的功能。如下所示,被保人名称、身份证。证件有效期可以通过OCR识别。如果采用手动输入的方式,不仅效率低且输错可能性较大。在这里应用 OCR 技术,旨在降低输入成本,提升用户体验。提供当前场景下的常用选项,用选择代替输入是最为基本的思路。需要注意的是,如果常用选项不能涵盖用户可能填写的全部内容,那么手动输入自定义选项的功能也要提供给用户。46c1f1ab01c6f3e086f982e8804aa191.png预输入表单设计如:用户在填写长表单前已经在平台填写了联系方式、名称或其他信息,在用户进行信息录入时,可以提供合理的默认值有效简化操作步骤,减轻用户填写表单的负担,更快地帮助用户完成表单内容的填写。如果你确定对用户足够了解,在用户进行信息录入时,可以提供合理的默认值。因为对用户来说,填写信息永远都不是一件有趣的事情,设置合理的默认值可以节省用户的操作时间。ced611974441e2257ee5de3ef710c78c.png利用移动端设备能获取的信息尽管移动端在输入上没有那么便捷,但获取到信息种类与精确度,却具有一定的优势。比如,移动端设备能较为精确地获取到用户当前的地理位置,这就为某些需要填写位置的表单提供了便捷(如收货地址、联系地址等)。再如,调用通讯录的功能也经常出现在各种需要填写手机号的表单中。e522ad41c65fa74e8ce312f2137ad491.png提供用户的历史输入项一份表单中出现了多处相同类型的表单项,这时可以提供用户的历史输入项供其选择。另外,很多填单页也会将用户输入的信息自动保存为常用收货人等,同样也是用到了这一方法。8ff55ac4ce4cde996e0864f1984b9187.png

    二次确认

    多场景考虑异常情况

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

    流程闭环

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

    表格设计原则

    数字要右对齐

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

    文字要左对齐

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

    表头与数据对齐

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

    不要使用居中对齐

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

    有效的数字

    有一种简单的方法能让你的表格看起来更整齐,就是保持一致的有效数字(一般情况下指小数点后的位数),这样每一列数据中的小数点后位数都是一样的。有效数字细究起来就无尽无休,这里就不过多详述,我的简单建议就是:表格数字不是越精确越好,需要多少有效数字就显示多少,不必太多。股票基金的有效数据又不同于此。28e0d5bf9fafc19204923eccce947cf9.png如果表单表格浏览或者使用让人恼火烦躁,那是因为这些表格太烂了要背的锅,完全没有经过设计表单表格。设计是表格表单的关键,如果设计恰当,浏览比较复杂的数据会很容易,如果设计不妥,数据就无法理解且会传递错误的信息数据。在B端设计中对于信息繁杂利用如何利用狭窄的空间,仍然可以区分各元素,且不妨碍浏览使用,这就是设计时要考虑的。看似简单的背后是不简单的思考过程。87570d322940996bd164ebbe26c587c3.png感谢你的阅读支持 · 欢迎留言互动-------------------------------------------声明:本文内容及言论仅代表其作者之意,并不反映任何黑马家族之意见及观点d16c5cd102a304dabec0ce4e358d0f3e.gif精品高阶课程推荐31c08ad649dfad7e24d7ab56eb175ab4.pngc225aa20136871c9bcc9d789236a018c.pngd16c5cd102a304dabec0ce4e358d0f3e.gif多一点行动  ·  多一分设想

    3347bbdb451dd91efd7c3e2dc35ce5e2.png

    展开全文
  • 一点一点地理清表格的设计点,可能会使得表格更加趋于明朗。今天,我会为大家详细地介绍了数据表格中都有哪些设计点,希望...因此,我结合了自身在实际工作中遇到的表格设计的问题,针对web端复杂业务场景下的表格该...

    521634b93b4d4b523512c624b4ab14be.png
    一点一点地理清表格的设计点,可能会使得表格更加趋于明朗。今天,我会为大家详细地介绍了数据表格中都有哪些设计点,希望能给大家带来不一样的内容。

    1. 前言

    在企业级中后产品中,通常大量使用表格来展示结构化的数据。合理地设计表格能给用户带来高效的信息获取率,但如何言而有物地设计表格,相信是绝大数刚入行B端的设计师的困扰。

    因此,我结合了自身在实际工作中遇到的表格设计的问题,针对web端复杂业务场景下的表格该如何设计进行了探讨,希望能帮大家理清表格设计中的一些难点和困惑点。

    表格(Table),又称为表,是用来收集、整理、组织、分析数据的二维矩阵。它由内、外两部分组成,其中,内部包含表头、表体、底栏等;外部包含标题、筛选区、操作按钮区等,如图:

    07619d4ce69bb6b70ccf55f0bf3ae5ae.png
    • 标题:对表格信息内容的整体概括,可包含数据来源及属性(日期、地区等);
    • 筛选区域:表格的数据检索区,方便用户快速查询定位数据,一般位于表格上方;
    • 操作按钮区:承载表格的增删改查的功能和业务处理操作;
    • 表头:般指列标签,这里也指首列行标签,是对所属行或列信息的描述;
    • 表体:表格的主体,承载着内容信息数据,由单元格组成;
    • 底栏:主要用于统计数据总条数和记录当前位置,包含数据量、单页条目、总条目、分页等。

    说完表格的组成,接下来我会对每一个部分进行讲解,探讨表格设计要点。

    2. 筛选区域

    筛选区可以看作表格的导航,由搜索和条件筛选两部分组成。

    2.1 搜索

    根据其表现形式,可以分为以下四种类型:单属性搜索、切换属性搜索、多属性模糊搜索以及多属性组合搜索。类型之间没有优劣之分,根据业务场景使用对应的类型即可。

    2.1.1 单属性搜索

    af8aaa20f069b4878c0db054ab799b26.png

    适用场景:通过某个特定属性就可以快速定位到目标数据,此特定属性通常是具有唯一识别性的、高使用频率的、对用户决策有意义的。

    2.1.2 切换属性搜索

    4e79a68f6d18f6ae2f514af28a30b8b2.png

    适用场景:有多个常用的搜索属性,且对搜索精确度要求较高,但页面空间比较局限,可使用切换属性搜索。

    2.1.3 多属性模糊搜索

    a1bcbb6f7c87f8dc71322eb9fda5cc33.png

    适用场景:有多个常用的搜索属性,且对搜索的便捷性要求高于搜索结果的精确性时,可选用多属性模糊搜索。

    2.1.4 多属性组合搜索

    3b5ee4df33d76e8b808942419eeb132e.png

    适用场景:对页面空间要求比较高,无多余空间放置其他筛选项,但需要进行多属性组合搜索,得到精确的搜索结果。

    2.2 条件筛选

    条件筛选也可以称为过滤器,英文名Filter,主要用于内容提取,帮助用户缩小信息范围。包含了下拉选择器、单/复选框、日期选择器、标签切换等控件。

    2.2.1 下拉选择器

    下拉选择器是后台系统中最为常见的一种控件,其形式为弹出一个下拉菜单给用户选择操作。

    为了选择数据的方便,还可以加入搜索功能。当选项少于5个时,建议直接将选项平铺,使用单选框会是更好的选择。

    0ceca0378e233d52bb7a90d33c0a0f61.png

    2.2.2 单选框(Radio)

    用于在多个备选项中选中单个状态的场景,其中每个选项应该是互斥的。单选框的数量至少为2个,一般少于6个。要注意的一点,一组单选按钮应该默认选择一个选项,一般初始状态默认选择第一项。

    d16016773f0770eac476a2235ca07275.png

    2.2.3 复选框(Checkbox)

    用户可以在选项列表中选择一个或者多个选项,其中选项的数量不宜过多,一般来说不要超过7个,过多的复选框会给用户造成认知负担。但如若出现过多的情况,采用下拉选择器更合适。

    b409e82991a3b010646fa2adeed544f1.png

    2.2.4 日期选择器

    日期选择器是允许用户选择一个或某个日期范围的组件,同样的根据业务诉求,有时还可以在上面加入快捷选项。

    265ea604b144384376f6a165a163f69e.png

    其中,数据格式需要注意以下2点:

    第一:使用“-”作为分隔符;日期为个位数时,需要用“0”补齐;表达时间范围时,用“至”作为连接;如果日期是用中文,则采用“-”作为连接。

    2c6056ceb549dada7e9e8af12aa30636.png

    第二:日期、星期与时刻一起使用时,格式为【日期 星期 时刻】。

    4126d53fb07fd4b9b15be8649e787c29.png

    2.2.5 标签切换

    提供平级的区域将大块内容进行收纳和展现,保持界面整洁。可根据业务场景改变样式,会有更好的使用体验。

    6eaed97276c3c66fef5df70652054c52.png

    2.3 筛选区域的形式

    在表格设计中,筛选区域的形式有哪些?当业务复杂时,筛选区域又该怎么设计?接下来我根据过往的经验为大家总结了一些筛选区域的形式,希望能给大家带来一些启示。

    2.3.1 录入展示式

    可以兼容多种数据格式(数字、文本、标签、布尔值、枚举值等),包含了日期选择、标签切换、单/复选框选择等多个UI控件。

    2587567c6d29d7a366cf55cfb17f882d.png
    • 适用场景:适用于从各个维度筛选的场景,应对各种复杂的筛选情况。
    • 优点:筛选条件平铺展示,便于用户进行快速地筛选选择。
    • 缺点:筛选项隐藏较深,难以知道备选项有什么;当筛选过多时,信息量过于冗杂繁多。

    2.3.2 录入收折叠式

    它是录入展开式的一种变形,高频筛选字段外露,低频筛选隐藏。

    b33a24d1a939ffe0beb5c4e6d45539d3.png
    • 适用场景:当筛选条件有高低频之分,且对页面空间要求较高。
    • 优点:高频筛条件可优先快速筛选、一定程度上减少用户的认知负荷,同时占用空间较小。
    • 缺点:平台通用性较差,当高频筛选项过多时,页面同样会出现信息冗杂、空间占比大等问题。

    2.3.3 矩阵式

    矩阵式也称为平铺式,顾名思义就是将所有筛选项罗列出来平铺在页面上。

    2b4ca5ea2fc5dd319036b0b0fdaae363.png
    • 适用场景:多维度筛选且每个用户对信息筛选的颗粒度需求不一致,同时希望备选项被选中。
    • 优点:用户能直接看到选项内容,方便用户识别选项,且提高了用户筛选的效率(节省了筛选操作)。
    • 缺点:占据页面空间较大,此类型一般配合“勾选即执行”使用,因此在执行筛选的过程(动画或加载时长)可能分散用户精力。

    这里就可以很好的理解电商类产品在筛选区往往采用矩阵式布局,比如:挑选一台电脑,有人希望按品牌筛选、有人希望按内存容量、有人希望按系统,我们很难判断哪个频率更高。

    面对这种情况,只能将所有的筛选条件平铺出来供用户选择。同时电商产品将品牌的备选项平铺出来,可以增加品牌的曝光度,这无疑是一个可带来利益的隐形广告位。

    33d536b8637dbe0fd7d2d5ce49dcc4e9.png

    2.4 实例运用 – 筛选区优化

    产品现状:由于业务复杂、数据集大、维度多等原因,合同管理页面所需的筛选条件过多,当前的筛选区采用录入展开式堆叠在屏幕上,会严重挤占列表的展示空间,使得首屏留给列表的空间所剩无几;用户在寻找具体筛选条件时,仿佛大海捞针,耗时费力。

    badac2cbaba0cfb2432c6b5dc3e0defd.png

    改版目标:合同管理页面的内容又多又全面(表体),但在操作时又能支持快速定位(搜索,包含筛选)、准确处理(操作)。

    设计策略:

    • 用户可以快速找到筛选条件 —— 控制条件的数量;
    • 能满足搜索细致程度上的要求 —— 筛选条件要充足;
    • 将展示区域更多留给表体 —— 避免筛选区域占用太多屏幕空间。

    2.4.1 方案一 :隐藏筛选条件的标题

    由于筛选区存在自定义字段,因此无法掌控筛选条件标题的长度,所以原有的标题在输入框上方,因此通过隐藏标题可以使筛选条件排布的更紧密,从原来的220px降低到了130px(高度降低60%),给表体腾出空间。

    b257cf1c8690dcb38443f84a56265c29.png

    讨论结果:这种设计方案其实挺常见,但前提是输入框数量极少,且为用户所熟知;但在筛选项中存在多个时间筛选选项,选择后用户只凭选中项,可能回想不出这个选项对应的是什么筛选条件。

    2.4.2 方案二 :缩短筛选条件宽度

    通过缩短输入框宽度,减少筛选条件的行数,将屏幕空间更多的留给表体。

    75cdaa0f8d2873e722ab75cd3174a338.png

    讨论结果:此方案虽能在一定程度上缩减筛选区的展示区域,为表体腾出空间。但输入框的文本只能展示前面几个字,会在一定程度上影响用户的预览和理解。

    例如:在选择房间的输入框中只能显示“创维棒导体大厦…”无法看到“层数”、“房间号”等更详细的重要信息。

    2.4.3 方案三:通过权限控制

    由于合同管理页面由多个角色共用,通过权限控制筛选条件的显隐,则能满足设计需求。例如角色A展示筛选条件1、2、3、4,角色B展示筛选条件5、6、7、8。

    edc15302107f0a735f4696f8417f82b6.png

    讨论结果:此方案虽然能同时满足设计目标,但需要非常细致的配置工作;若组织架构发生变动,维护的工作量很难预估。

    思考: 只能在录入展开式的基础上做优化吗?

    遵从设计的一致性原则,前三种优化方案都是在原有的展示形式上做了相应的调整。遵循一致性是为了让用户有更高效的操作和降低学习成本,但显然与事实不符合。

    对于一个系统来说把一致性排在比高效性前面,系统也会因为创新被遏制,而止步不前。因此,我们认为系统的高效性应该在一致性前面,这点在salesforce的设计原则中也有所体现,故可以采用其他的展现形式。

    f861bf15aac22b867df42033dfbba3aa.png

    注:salesforce是CRM行业的领导者,将CRM的理念搬到了Web上,引领了SaaS行业。

    2.4.4 方案四:强调主次关系

    根据筛选条件的使用频率的不同,对不常用的筛选条件进行隐藏,采用录入折叠式,以达到想要的效果,如下图:

    d8a2cc25258812c0cac494e99bf697fa.png

    讨论结果:此方案也是大多数B端产品中所使用的方案,但并不适用多角色共用的场景。

    我们只能从业务侧去分析得到共用的筛选条件,对于角色所特定使用的筛选条件,我们无法得到直观的数据 —无法判断每个角色的使用时长,因此从后台查看到的数据并不能直接反应筛选条件的使用频率。

    2.4.5 方案五:可配置筛选条件

    通过设置筛选项,每个角色都可以根据自己的需求和习惯决定展示哪些选项,可以对选项进行排序,甚至可以根据自己的使用频率,对筛选条件进行显隐。

    68c00d0822573f58c3d9175f926f2c1f.png

    讨论结果:这个方案较全面的解决了问题,同时也满足了我们的设计目标,对于多角色的用户来说,是一个比较理想的方案。

    3. 操作按钮区

    功能按钮区在这里指的是对于表格数据进行增删改查等,包含导出、创建和业务处理操作等,首先我们来看看在功能按钮区中能存在多少种按钮类型。

    3.1 按钮类型

    虽然按钮的种类有很多种,但在研究过大量系统之后,发现功能按钮区的按钮类型无外乎有以下四种类型,分别是普通按钮、主要按钮、图标按钮、文字按钮,如图:

    27f2b6d95a54965fb142875bb54b52fe.png
    • 普通按钮:也叫做常规按钮,是页面中存在最多的按钮,其权重性相对比较低。在不确定选择哪种按钮的情况下,该按钮永远是最安全的选择。
    • 主要按钮:用于突出,页面主功能操作。当需要突出或者强调时使用它。同时需要注意的是,一个模块区域只允许一个主要按钮。
    • 文字按钮:轻量的按钮样式,可用于需大面积展示按钮场景。
    • 图表按钮:可与常规按钮、主按钮以及文字按钮结合,起到强调的作用。通过对操作功能的意符化,提供视觉线索引导,避免逐字阅读按钮文案,更高效地使用界面。可以在较小的空间展示更多的按钮;当使用纯图标按钮必须有 Tooltip 提示按钮含义。

    知识扩展:什么是意符?

    意符是唐纳德·A·诺曼在《设计心理学》中提出的概念,他指出:“‘意符’这个词指的是能告诉人们正确操作方式的任何可感知的标记或声音。”通过设计易理解、表意准确的意符,可将产品操作方法清晰的表达出来,能更好的指引用户操作,提高操作效率。

    7478fd6d50368ed1fed5bbc327e43906.png

    3.2 按钮样式

    3.2.1 采用圆角矩形

    在复杂系统设计中这里建议使用圆角矩形的按钮样式,理由如下:在相似的内容中,圆角的识别度比直角更高。

    举个例子:如下图,即便间距相同,我们能更容易计算出圆角矩形的总数。

    10db0b0f7904c85dbfa6a2d34b49e88e.png

    这是因为圆角矩形中的圆角具有收拢的关系,视觉聚焦向中心推,使得有更明显的边缘,可以引导我们的视觉差异。而直角则看起来彼此一样,中间找不到断点,因此不太可能引起我们的注意。

    a64ff09b958810da1479823198eae8b0.png

    再加上B端产品涉及到功能性按钮可能会很多,在网格布局中,圆角矩行能让用户更高效地辨别和获取信息,所以圆角的效果会更好。

    3.2.2 慎用全圆角

    圆角并不是越大越好,由于全圆角按钮无法显示嵌套选项。

    例如:当当全圆角按钮带有可用的嵌套选项时,通常会在右侧显示一个箭头icon,触发嵌套选项的有效触控区域就锁定到箭头icon的大小(16或24像素)。但若是换成半圆角按钮,就可以把整个按钮当作触控区域。通过菲茨定律我们知道,这样是更有效率的。

    4e0a6c968a9d5fcbb2fd119dab257131.png

    知识扩展:什么是菲茨定律?

    菲茨定律是用来预测从任意一点到目标位置所需时间的数学模型,它由保罗·菲茨在1954年首先提出。这项定律尤其适合按钮等可点击、可选择、可交互的元素,目的:易于查找和选择。

    作为一个数学模型,菲兹定律是有表达式的,表达式如下:T=a+blog2(D/W+1),W为其中目标的大小;D为到目标的距离;T为移动到目标所用最短时间。

    b17433af60dba4022253f9bea8698234.png

    结论: 离目标距离越近,所需的时间越短;目标尺寸越大,完成速度越快,时间就越短。也就是说,预测点击一个目标的时间,取决于目标和当前位置的距离+目标的大小。

    3.3 按钮顺序

    关于顺序,我们认为需要考虑整个系统层面,主要从弹窗、表单、表格这3个典型页面来推导出适合的按钮顺序。

    3.3.1 弹窗

    在弹窗中,当消息提示我们进行下一步操作的时候,我们会下意识的寻找动作(action)按钮。但我们往往会先阅读完所有的操作项,在进行动作指令。

    因此「确定」放在左侧,将导致用户的视线流发生改变,用户视线流无意识的回跳,而放于右侧将保持视线流在一个方向,减少视线曲折搜索的过程。

    29e18ed74af55c586ab549bcf0deece5.png

    3.3.2 表单

    表单页承载着大量的同质信息并且平衡分布,所以其用户的浏览路径遵循古腾堡法制,它描述了用户的阅读模式,从页面的左上方开始浏览内容,而结束浏览时视线往往落在右下角,所以合理利用这个法则可以帮助用户更好地获取内容并采取行动。

    ea579957744c89ef6340a1fc5ecc9591.png

    3.3.3 表格

    在我们系统中,表格页的按钮放置在右上角,考虑到页面的适配问题,若主按钮放在左侧,虽然眼动路径最短,但其出现的位置,会随着屏幕的变化而变化,没有一种确定感。

    最后考虑到,用户使用web的习惯,大部分人都是右手用鼠标,指针会更习惯放在右侧,因此执行按钮放在右侧更容易让用户点击(菲兹定律)。

    通过上述几个方面探讨论述,我们制定出了系统层面的按钮顺序:主按钮在右,次按钮在左。

    4. 表头

    表头的作用是解释当前列数据,表头并不是表格的必要元素,当数据本身能自我表意的时候(例如邮箱),表头是可以删减掉的,毕竟表头也占据一定的空间。

    4.1 表头的类型

    根据表头的构成,可以分为以下三类:

    1. 纯文本表头:仅起到解释数据属性的作用
    2. 多功能表头:可以筛选、排序、搜索相关数据
    3. 多级表头:信息分类层级较多的情况下使用

    1d3b5e0a6b67d6506cd27ab6e5b7d4bf.png

    4.2 表头筛选

    表头筛选是一种列表内置筛选形式,类似Excel表格的操作。表头筛选和筛选区的筛选相比,只能筛选一列数据,能节约一定的空间。

    a7a2847fb43b6dfb31cba2ec4888cd51.png

    虽然表头筛选能在一定程度上节约空间,但对于复杂业务的产品来说,不推荐使用,原因如下:

    原因1:数据集庞大,导致数据列多,采用列固定的交互方式。这种情况下,高频的筛选功能可能会被遮挡,筛选前需进行滚动,无端增加操作。

    25d34accfd88ea5d705f17e9ec30d1b2.png

    原因2:每个表头都会有一个筛选的icon,影响用户对于表头的识别;

    原因3:表头中的属性并不是都可以进行筛选,用户不可感知哪些可以筛选,需要滑动表格检索。

    4.3 表头排序

    排序功能让用户可以改变数据的排序,为纯粹以展示为目的的表格增添了活力,丰富了数据展示形式。

    有两种形式:一种是使用上下按钮进行排序(只有两种排序),另一种是使用下拉菜单进行排序(适用于多种排序)。

    7dc90b83c2bfff26fc8936466c57488e.png

    4.4 字段名称

    表头的字段名称应当符合用户思维习惯,保证用户理解。

    如果精简后的生僻字段难以自我解释,可以跟一个释义标识,鼠标悬停时出现该字段的详细解释,同时满足新手用户、普通用户以及专家用户的需求。

    9dbb9bbeded56845c302dd26040345a6.png

    4.5 可配置列(自定义表头)

    可配置列与配置筛选条件的功能类似,同样是考虑到不同角色的用户,查看数据的视角不一样,对应的关心的字段也会不一样。

    8100b64227437a0172e95096cc3e6c3b.png

    5.后记

    今天就先分享到这里,关于表格剩下的内容我会后续更新。

    我是Nick,B端一号种子设计师,我们下篇文章再见 ~~~

    谢谢阅读!

    展开全文
  • ActiveReports是一款专注于 .NET 和 .NET Core 平台的报表控件。通过拖拽式报表设计器,可以快速地设计 Excel表格、Word文档、图表、数据过滤、数据...ActiveReports Web端在线报表设计器已经正式上线! 现在我们就.
  • 为了方便后续在B产品设计过程中可以更加高效且高质量的进行列表的交互设计,笔者结合自己在实际工作中遇到的列表类型总结了web列表设计的常用基础表格模式,以供大家参考。本篇文章所介绍的列表设计主要集中在列表...
  • Web表格应用系统开发套件

    千次阅读 2005-07-19 11:00:00
    一、利用Cell设计Web表格应用系统开发套件Cell毕竟还是一个表格组件,只能用单元格位置标示数据,没有数据模型和数据绑定概念,离真正的应用开发还有段距离,我们可以利用Cell设计一套Web表格应用系统开发套件,以下...
  • 本文作者主要是结合自己在实际工作中遇到的表格设计问题,针对Web端数据呈现方式之一,表格的设计进行探讨。表格,是一种常见的信息组织整理手段。常用来展示、保存、对比分析、排序、筛选 、归纳等,是最清晰、高效...
  • 本文作者主要是结合自己在实际工作中遇到的表格设计问题,针对Web端数据呈现方式之一,表格的设计进行探讨。表格,是一种常见的信息组织整理手段。常用来展示、保存、对比分析、排序、筛选 、归纳等,是最清晰、高效...
  • 本文作者主要是结合自己在实际工作中遇到的表格设计问题,针对Web端数据呈现方式之一,表格的设计进行探讨。表格,是一种常见的信息组织整理手段。常用来展示、保存、对比分析、排序、筛选 、归纳等,是最清晰、高效...
  • WEB设计大全

    2007-08-05 15:41:04
    前言 <br>第一部分 Web设计核心问题 <br>第1章 什么是Web设计 <br>1.1 Web设计的金字塔 <br>1.2 建设Web站点 <br>1.3 为用户建设 <br>1.4 从纸张到软件 <br>1.5 Web的图形用户界面传统 ...
  • ASP.Net.Web程序设计

    2011-06-15 14:52:14
    WEB程序设计》复习答疑 1、当前主要的WEB数据库访问技术有哪些? 答:到目前为止,WEB数据库访问技术主要分为两大类: (1)公共网关接口技术(CGI); CGI是WEB服务器运行时外部程序的规范,按照CGI编写的程序...
  • WEB设计大全(part2)

    2007-08-05 15:44:38
    前言 <br>第一部分 Web设计核心问题 <br>第1章 什么是Web设计 <br>1.1 Web设计的金字塔 <br>1.2 建设Web站点 <br>1.3 为用户建设 <br>1.4 从纸张到软件 <br>1.5 Web的图形用户界面传统 ...
  • 上篇我们说了这个表格,这一篇我们开始说表单,看清楚,是 表 单 一、认识表单 直接百科走起来 可以看到啊,这个表单在我们网页中主要是负责数据采集的功能,然后呢,我们将采集好的数据提交到我们的后端,也...
  • 从具体的角度上看,Web前端是利用HTML、CSS、JavaScript等专业的技能和相关的工具,将产品的UI设计稿实现成网站产品,涵盖用户PC、移动端等网页,进而去处理视觉和交互的相关问题。因此,We...
  • 用户通过Smartbi电子表格插件,能够直接在Excel中设计报表并发布到Web端,需要的朋友快来下载吧。 Smartbi电子表格功能介绍 极致简单 Excel就是报表设计器 不是"类Excel报表设计器",不再重新发明轮子;易学易用,功能...
  • 电子表格设计器是一个Excel插件,设计用户直接在Excel中设计报表并发布到Web端,浏览用户通过浏览器访问报表,无需安装任何插件;也支持移动应用访问报表,并分享到微信上。Smartbi电子表格怎么卖 电子表格个人版...
  • 介绍Fabric UI是微软开源的一套Office风格的多组件库,共有三套针对性的组件,分别适用于web、android以及iOS,Fabric React是一组强大的基于React的组件,旨在能够使用Office设计语言轻松创建一致的Web体验。...
  • Web报表工具即采用web开发基于web设计报表,通过浏览器设计报表、查看报表, 较c/s报表设计器更加易用, AnyReport报表设计器采用Flex开发,一个类似Excel表格形式的WEB报表设计与开发平台,能让用户在浏览器中...
  • 1.系统结构: ... 写HTNL CSS JavaScript代码的这波人叫做:WEB前端开发工程师。 前端页面上的图片需要UI设计师来完成 s是服务端Server,Server的语言很多:C C++ java python B/S架构的系统有什...
  • RAWGraphs最初被认为是设计人员和视觉爱好者的工具,其目的是在电子表格应用程序(例如LibreOffice Calc,Microsoft Excel,Apple Numbers,Google Docs等)和矢量图形编辑器(例如Inkscape,Adobe Illustrator等)...
  • RAWGraphs最初被认为是设计人员和视觉爱好者的工具,其目的是在电子表格应用程序(例如Microsoft Excel,Apple Numbers,Google Docs,OpenRefine等)和矢量图形编辑器(例如Adobe Illustrator,Inkscape等)之间...
  • web开放(初学者)

    2010-12-30 23:17:00
    web开发初学者的感想,web开发不是一个新名词,从网页设计过度到了web开发,由此加如了很多的东西,html文本标记语音,css表格样式化,script脚步,cookies,Web数据库系统,这些新的东西,为web开发走上了一个新的...
  • WEB安全测试

    2013-07-02 15:06:08
    6.4 使用电子表格程序来精简列表 120 6.5 使用LWP对网站做镜像 121 6.6 使用wget对网站做镜像 123 6.7 使用wget对特定的清单做镜像 124 6.8 使用Nikto扫描网站 125 6.9 理解Nikto的输出结果 127 6.10 使用Nikto扫描...
  • Web前端从入门到精通237全集视频都在这里!

    千次阅读 热门讨论 2020-02-15 17:01:21
    Web前端是利用HTML、CSS、JavaScript等专业的技能和相关的工具,将产品的UI设计稿实现成网站产品,涵盖用户PC、移动端等网页,进而去处理视觉和交互的相关问题。 因此,Web前端一套完整的教程中,所涉及的内容也...
  • 1.前端多页面之间的互相...2.表格款式的设计 ps:现在显得非常容易了 3.读取录入数据库前后之间的传值 4.前后同步更新的问题 5.数据库的存储能否存储图片(应该可以) 多加研究C#中if的使用以及数据库基本知识 ...
  • 开源的快速web开发框架

    热门讨论 2012-11-05 13:46:20
    在线的带语法分析和高亮的Java、JavaScript、ServerScript、SQL编辑器,所见即所得的表单设计器,强大的组件管理器和模块管理器,智能的对象探测器。 企业级的Portal 灵活且易于使用的Portal整合了各方应用,给...
  • 您还将学习设计受控表格。 将向您介绍Flux架构和Redux。 您将探索Redux的各个方面,并将其用于开发React-Redux支持的应用程序。 然后,您将学习如何使用Fetch进行客户端-服务器通信以及在服务器使用REST API。 ...
  • 在线的带语法分析和高亮的Java、JavaScript、ServerScript、SQL编辑器,所见即所得的表单设计器,强大的组件管理器和模块管理器,智能的对象探测器。 企业级的Portal 灵活且易于使用的Portal整合了各方应用,给...
  • 450 种以上的 Excel 公式,提供高度类似 Excel 的功能,主要用于开发 Web Excel 组件,实现多人协同编辑、高性能模板设计和数据填报等功能模块,组件架构符合UMD规范,可以以原生的方式嵌入各类应用,并与前后技术...

空空如也

空空如也

1 2 3 4 5 ... 11
收藏数 218
精华内容 87
关键字:

web端表格设计