表格设计攻略

在日常的设计过程中,我们往往会遇到一些比较棘手的设计板块,它们与你所对接的业务紧密相连,复杂度高,超出你脑海中的设计模式版图,于是隐隐抓狂,比如复杂业务的表格设计。今天,我们就来探讨一下针对表格设计的应对策略。希望对您在未来面对类似的情况时,有所帮助。

一、什么时候需要选择表格设计


在面对设计任务的时候,首先思考的不应该是执行层面,而应该尽量向战略层面靠拢。不了解输入,一切皆是空谈。这是了解和探索需求的部分。在面对信息展示设计板块的时候,即使板块再小,也应遵循同样的道理,并不是客户说需要一个表格就能使用表格的。

当你在面对有一大堆维度的、包含复杂信息点的数据的时候,不妨考虑使用表格设计去做表现。表格用于把复杂的信息维度清晰化的展现。且通常来说表格比较重要的优势有:
1. 信息展现全面性与完整性
2. 直观的对比性
3. 快捷的可编辑性

但还是需要记住,依然有大把可以表现数据的方法,具体的决定需要根据实际的需求来定。如果你要展现的信息,采用可视化图表更为清晰和明确,那么还是尽量选择可视化图表。如果不需要一些细节的展示,不需要完整性,只要结果,只求变化值,大可以选用数据可视化去呈现。所以在选择使用表格作为设计的时候,需要你对索要呈现的业务,有一个明确的认知。

表格与可视化图表

二、应对表格设计的思路


当你决定选择表格作为你的设计目标的时候,不要刚开始就停留在执行的层面。应该首先梳理原始数据的信息维度,然后再考虑用怎样的表格形式去呈现。

1、数据的重要性

想直接找一个所谓酷炫的形式去展开设计,想撇开业务数据,想让业务数据追随形式,是妄念。任何设计的开始,必然是理解业务,规划业务,表格亦然。所以当拿到一组数据的时候,我们应该充分从数据价值入手去考虑,规划出对业务有价值和意义的数据,另外还应该结合用户的需求来综合决定。

“思考是最难的部分,这就是为什么参与思考的部分往往很少的原因。”
——Henry Ford

严谨的做法是只把对用户最重要的、对业务最具价值的信息展示出来,其余的隐去,并让你的列与列之间保持适当的间距。当然,如果你的表格的列过于的少,少到让人看起来感觉留白过多,那么才可以考虑适当的加上一些次级重要的信息。

2、数据类别

我们在分析业务数据的时候,需要留意的一点是数据的类别。比如彼此间的界限。如果有界限,就需要考虑把他们拆分成两个表格来展示。比如每一部分的内容中是否有一个统揽主题的标题。再比如数据的维度,数据名称等等。

你需要先定义清楚不同类别的数据是什么。一般来说复杂的业务数据会有如下几种类别:标题、层级、组别、名称、具体细节、扩展性(是否可以编辑)。表格很容易就会提炼到这些类别,并排布到位,这是一种匹配,也会是一种巧合。但不要把希望寄托在能把表格的属性分类套在业务数据上,那样只能得出刻板的嵌套,忽略了业务数据的可拓展性。正确的思考顺序是自上而下的(从数据到表格),而不是自下而上的(从表格导数据),要把希望建立在思考和分析业务数据上,把标题、层级、组别、具体细节、扩展性自己分析出来,然后再使用表格去展示他们。这个过程的重点,一定是分析、思考,不要被嵌套迷惑。

完成了这部分的内容,你会得到一个表格数据的框架,接下来还需要的部分,是细细打磨。

表格数据维度分类

3、数据层级

当已经有了一个表格的框架以后,你就有了表格的标题、行、列、数据维度这些内容。其中在“行”的这层维度中,需要我们深度去思考具体可能存在的层级结构。是否分层,以及层级的架构,还是要依据业务数据的信息从属关系以及它们的重要程度来定夺。文章中有总分总,设计中亦然。本文主要是讲思路,那么体现层级的方法,在视觉层面上,可以用颜色、位置、区域等来区别。另外还要注意整体的视觉属性,比如你为一个商业公司制作一套表格,颜色就不宜过多,商务色的考虑也应在思路范围内。

举例,在展示多级数据的的时候,需要用视觉元素的部分把他们区分开来。

表格层级

这一部分的重点在于体现出层级与层级之间的关联性,运用的法则仍然是视觉四原则:亲密、对齐、重复、对比。这四个原则运用好了,任何复杂的问题都会迎刃而解,后边会继续讲到。但是关键环节还是在于先把层级关系分析和拆解出来。

三、呈现


表格的最终的呈现需要考虑视觉关联,建立视觉关联需要考虑的点仍然会回到:对齐、重复、亲密、对比。你会发现,原来一切设计最终遵循的都会是最初最简单的规则。所以,一切设计的重点,仍然还是在于思考,剩下的部分才有所谓的原则。

视觉设计四原则

1. 对齐原则

对于多层级的表格来说,将他们的不同层级之间错落排布,并且同一个层级之间遵循左对齐原则,可以让层级关系一目了然。另外要做一点说明的是,表格中如果是文本的内容,建议使用左对齐,因为文字的排布方式是从左至右,视觉对文本的路线是从左边开始的。如果是数字内容,建议使用右对齐,因为数字的递增方式为个十百千万,是从右往左递增的,右对齐有助于对数字更好的识别和比较,一下子就能辨别出他们的数量级。

对齐原则

2. 重复原则

重复的目的是统一并增强视觉效果。对多层级的表格来说,为了凸显不同层级之间的显示效果,可以为不同的层级添加视觉属性,比如给第三级的内容前增加蓝灰色的方格,那么所有的第三层级前都有蓝灰方格做标记,使其清晰。比如给第四级的内容前添加蓝灰短线,那么所有的第四层及表格都会直观清晰的被辨别出来。

重复原则

3. 亲密原则

对于多层级的表格来说,表格的列往往承载了不同维度的数据,维度与维度之间往往存在对比的关系,所以在视觉上,要将列的感觉凸显出来,就要使用亲密原则,让数列的关系通过间距就能展示出来。

亲密原则

4. 对比原则

在多层级的表格中,对比原则可以通过颜色、样式、线条、形状等来实现。比如表头和第一层级都是用蓝灰色底色,第二层级都用灰色底色,第三层级左端错位开并使用蓝灰色方格,第四层级都是用白色底色,用这样的方式,用户可以一下子就辨别出来不同层级之间的关系。

对比原则

5. 其他小策

Hover:

对于表格来说,因为行数众多,虽纵列数据体现对比,但横行数据亦是一家,所以建议在交互效果上增加鼠标Hover效果,来让用户可以一下子定位到想要仔细考察的行。

Hover

简洁:

这是一个微妙的小原则。开始设计的时候,我们往往会因为过于专注于理性本身而为每行内容添加过多的元素,比如每行都想有一个横线(通过横线的不同属性来标记所属层级)来将他们从视觉上区分开。但是,在一整行里,如果你不看最左边的部分,直接看右边的那些“实线”和“虚线”(如下图),是不能够区分那些实线和虚线是属于哪一个层级的,而且他们看起来好像也并没有什么标记属性,反而还增加了视觉负担。你看第二级和第三级,好像光看右边是没有办法区别到底是虚线代表第三级还是实线代表第三级。那么在这种时刻,就要断舍离,干掉自己的强迫症,使页面简洁是第一要义。也就是说,如果不是必要,就不要随便把他们展示出来。

分割线

更改后,只给拥有第四级的第三层级标记虚线就可以了。这样使标记规则变得简单好记。

简化分割线

附加值:

如果你发现有些共用的部分因为需求的变化不能再共用了,那么可以为其添加附加值,以期优秀。比如在表格中,本来所有列都会有一个共用的列的单位,但是唯独其中一列改变了需求——他们拥有自己行的独特单位,那么可以选择换行、对比的方式把数据和其单位展示在一起。这样设计既可以完善表格的细节,又可以明确的表现出不同类别的内容。所以,你可以选择合适的方式把不同的需求合理的排布在其中,就是好的附加值设计。

附加值

四、总结


所以,在表格设计的执行层面,其实有很多种方法,遵循的原则都是一致的。最难的部分是在于最初的数据分析和业务分析。思考大于行动,很多人一看到要做表格,看到一大堆数据和需求,忽然些许懵逼,于是二话不说先上网找图找表格资源,所谓寻求灵感。其实不然,要先攻克难的部分,先思考和拆解,然后再去行动,才是好的。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,271评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,275评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,151评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,550评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,553评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,559评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,924评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,580评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,826评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,363评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,940评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2 342

推荐阅读更多精彩内容