组件

整体性原则

视觉形象首先是作为统一的整体被认知的,而后才以部分的形式被认知(格式塔)。人们在观看时,眼脑并不是在一开始就区分一个形象中各个单一的组成部分,而是将各个部分组合起来,使之成为一个更易于理解的统一体。如果一个整体中包括了太多不相关的单位,眼脑就会试图将其简化,把各个单位加以组合,使之成为一个知觉上易于处理的整体。如果办不到这一点,整体形象将继续呈现为无序状态或混乱的状态,从而无法被正确认知。

接近原理 #

“更接近一起的对象比进一步分开的对象被认为更相关。” 元素之间的远近可以代表它们之间的关联性,间距越近就越像一个视觉群体,反之距离越远,就越会像一个独立个体。利用元素之间的间距创造视觉规律,提升信息层次表达,减少信息混乱。
  • 想让按钮去控制不同的区域,可以调整按钮的跟随位置来判断它控制的是哪部分功能。
示例1. 按钮距离表格的位置更近,因此与表格的关联性更强
示例2. 按钮距离查询条件的位置更近,因此与查询条件的关联性更强
我们可以通过大、中、小三种间距来划分层次信息,分别为24px、16px、8px; 在这三种基础间距不适用的情况下,可以通过加减“基础间距”更改间距,基础间距为8px。

相似原理 #

在某一方面相似的内容,在视觉展示上会趋于一个整体,在相似的情况下应当需要连续一贯的动作。
  • 用图标、标题和文字区分3组不同的内容,我们就需要始终保证图标、颜色、布局、大小写、字体、字号等保证统一性。
Do
icon的大小、颜色、样式保持统一
文字的字体、字号、颜色保持统一
Don't
icon的大小、颜色、样式不统一
标题的字体颜色不统一

对齐原理 #

任何元素都不能在页面上随意摆放,每个元素应该与页面上的另外一个元素存在某种视觉联系,对齐的根本目的是使页面统一且有条理。

文案类对齐 #

找到一条明确的对齐线,并以它为基准对齐,这样有助于更清晰的展示信息。
Do
Don't

表单类对齐 #

表单类的对齐方式为右对齐(冒号对齐)。
Do
Don't

表格类对齐 #

表头内容以及行内容为左对齐,数字类信息为右对齐(具体规则详见数字类对齐)。
Do
Don't

数字类对齐 #

为了快速对比数值大小,建议所有数值的小数位个数相同(建议保留小数点后两位),并且右对齐。
示例1. 数字类右对齐
示例2. 表格内的数字右对齐