为什么你做的仪表板或是数据大屏看起来没有那么好看,为什么看别人的大屏好看但是不知道如何应用到自己的大屏中。总的来说就是看到一块好看的大屏但是说不出其中的每个让其好看的原因。正好这段时间在看《写给大家看的设计书》,感觉很多内容是相通的,这些原则也同样适用于仪表板大屏的设计中,故整理了部分内容可供大家参考。
本文所涉及内容主要为其第二章至第五章所讲,亲密性、对齐、重复、对比。
亲密性
亲密性的根本目的是实现组织性。 只需简单地将相关的元素分在一组建立更近的亲密性,就能自动实现条理性和组织性。如果信息很有条理,将更容易阅读,也更容易被记住。此外还有一个 很好的“副产品”,利用亲密性原则,还可以使空白更美观。
示例一(原图):
存在的问题: 不知道从哪里开始看,也不知道接下来看什么,看完不知道是否还有遗漏,不知道什么内容与什么内容具备更强的关联性,整个内容显得毫无组织等等。
示例一(调整后):
感受: 不论从理解上还是视觉上看都很有条理,知道从哪里开始读,哪里结束,知道什么内容之间的相关性更强,留出了更多的空间,看起来更整洁。
\
亲密性原则并不是说所有一切都要更靠近,其真正的含义是:如果某些元素在理解上存在关联,或者相互之间存在某种关系,那么这些元素在视觉上也应当有关联。 除此以外,其他孤立的元素或元素组则不应存在亲密性。位置是否靠近可以体现出元素之间是否存在关系。
示例二:
不看正文便能从右边的传单上获取到共列了三场读书会,因为每场读书会的信息都被归入有逻辑的亲密关系中。
\
更多示例:
\
对齐
Robin 对齐原则:任何元素都不能在页面上随意安放。每一项都应当与页面上的某个内容存在某种视觉联系。
对齐的根本目的是使页面统一而且有条理。 其效果类似于把客厅里四处零落的洋娃娃捡起来,并把它们放在一个玩具箱中。不论创建精美的、正式的、有趣的还是严肃的外观,通常都可以利用一种明确的对齐来达到目的。
示例一:
看上去,这个名片上的元素就好像是随意扔上去并被粘住一样。这里所有元素都与名片上任何其他元素没有关联。
用线来明确哪里缺少关联。
花点时间看看哪些项应当分在一组,以建立更近的亲密性,而哪些项应当分开。把所有元素都移至右侧,使它们 按同一种方式对齐,现在信息立刻就更有条理了。(当然,将相关的元素分组以建立更近的亲密
性也起到了很大的作用)下面这些文本项有了一个共同的边界,这个边界把它们联系在了一起。
\
中间对齐与左右对齐讨论:
尽管这是一种合法的对齐方式,但边界是“软”的;实在看不出那条“对齐线”的强度
这与前面有同样的逻辑布局,不过现在采用右对齐方式。你能看出右边的“硬”边界吗?尽管这是一条看不见的线,但它很明确,连接了这两组文本的边界。现在确实可以看出边界。正是这个边界的强度为布局提供了力度。
\
其它示例:
\
重复
Robin 重复原则指出:设计的某些方面需要在整个作品中重复。 重复元素可能是一种粗字体、一条粗线、某个项目符号、颜色、设计要素、某种格式、空间关系等。读者能看到的任何方面都可以作为重复元素。
例如,所有标题都设置为相同的大小和粗细,在每一页底部增加一条半英寸的线,项目中的每个列表都使用相同的项目符号,这些都是重复的例子。新手通常需要把这个概念更进一步,把无意的重复变为有意,利用重复将一系列出版物从视觉上系为一体。
重复的目的就是统一,并增强视觉效果。 不要低估页面视觉效果的威力,如果一个作品看起来很有趣,它往往也更易于阅读。
要避免太多地重复一个元素,重复太多会让人讨厌。 要注意对比的价值,例如,如果这位女士想穿黑色晚礼服,配红帽子、红耳环、红口红、红色手提包、红鞋和一件红上衣,重复就太滥了,现在的对比不再有统一的效果,感觉上也让人不太舒服,太多的重复将混淆重点。
示例一:
读到信息的末尾时,你的视线是不是会在名片上四处漫游?
读到信息的末尾时,现在你的视线会向哪里移?它会在粗体元素之间来回跳吗?可能会,这正是重复的主旨,它能把整个作品联系在一起,提供统一性。
\
示例二:
这个版本的关注点是演讲人。
这个版本的关注点是演讲题目。瘦版中的黑色带重复出现在了底部。把所有东西都联系起来的重复性元素就是这么简单。
\
对比
对比是为页面增加视觉效果的最有效的途径,也是在不同元素之间建立一种有组织的层次结构最有效方法。要记住一个重要规则:要想实现有效的对比,对比就必须强烈。千万不要畏畏缩缩。如果两个元素虽然不同,但是区别不大,这时候就不是对比了,而是冲突(就好像是由于你的粗心样式没有一致)。不应该用 12 磅大小的字体与 14 磅大小的字体进行对比。也不要用0.5磅的线与1磅的线来对比。此外,深棕色与黑色的对比也是不合适的。所以一定要当心。
Robin 对比原则指出:页面上的不同元素之间要有对比效果,达到吸引读者的对比效果。如果两个项不完全相同,就应当使之不同,而且应当是截然不同。
对比不仅可以用来吸引眼球,还可以用来组织信息、清晰层级、在页面上指引读考并且制造焦点。可以采用多种方式产生对比。如大字体与小字体的对比;典雅的旧式体与加粗的:衬线体产生对比:细线与粗线的对比:冷色与暖色的对比:平滑材质与粗糙材质对比:水平元素(如很长的一行文本)与垂直元素(如又高又窄的一列文本)的比:间隔很宽的文本行与紧凑在一起的文本行形成对比:小图片与大图片的对比等等。
字体之间和线之间确实有一点对比,不过这里的对比很微弱。这些线确实有意设置为两种不同的粗细吗?是不是只是不小心弄错了?
现在字体之间强烈的对比使它更生动,更引人注目。由于线粗细有了更强烈的对比,再不会有人认为这可能是一个失误了。
这只是线的另外一种用法(这条粗线隐藏在了白色字体的后面)。运用对比,整个表都更鲜明,更精美;它的表达更清晰。
整体运用示例
这是一个相当乏味但很典型的报告封面:居中,为了填满整个页面而各行间隔都均匀。如果你不懂英语,可能认为这一页上有 6 个单独的主题。每一行看上去都是自成一体的孤立元素。
标题和子标题相互靠近,现在就有一个明确的单元,而不是 6 个无关的孤立单元。现在很清楚,这两个主题彼此之间紧密相关。把作者署名和日期放得更远一些,从而能很快清楚地看出:尽管这是一个有关联的信息,可能还很重要,但它不是标题的一部分。
应当注意放在页面上的每一个元素。要保证整个页面是统一的,将每个对象与另外某个对象的一个边界对齐。左对齐或右对齐可以给出一个更明显的边界,这条线更明确,使你的视线有基准可循。
标题与众不同的字体在作者名中得到重复,这会加强它们之间的关联,尽管它们在页面上的物理位置相距很远。
在这里,虚线成为了一个重复元素。虽然它们长短不一,但是虚线很有特点,能够以各种方式出现在整个文件中,却仍然被视为重复元素。
在这里增加对比很简单,只是增加了一个黑方框而已。
选择字体也能增加对比。这里的对比不仅仅是白纸上浓黑的标题,同时也是这种字体的粗体和细体的对比,全部大写和小写的对比。在这两个版本中,全部大写的粗体也是一种重复。