Ant Design
先从原则开始讲起:
第一亲密性:如果信息之间关联性越高,它们之间的距离就应该越接近,也越像一个视觉单元;反之,则它们的距离就应该越远,也越像多个视觉单元。亲密性的根本目的是实现组织性,让用户对页面结构和信息层次一目了然。以上这段话都来自与ant design中,看起很很高深的样子啊,换个通俗点说法就是,为了方便用户方便查找,所以说把有关联的东西放在一起,没有关联的东西放的远远的,让人一眼就看就出来,而实现这种情况就是靠调节纵向间距和横向间距这些在ant deign以经给我们说出来了:
通过『小号间距』、『中号间距』、『大号间距』这三种规格来划分信息层次。
(在 Ant Design 中,这三种规格分别为:8px(小号间距)、16px(中号间距)、24px(大号间距)
如果这三种规格不适用的情况下,可以通过加减『基础间距』的倍数,或者增加元素来拉开信息层次。
注:在 Ant Design 中,y = 8 + 8 * n。其中,n >= 0,y 是纵向间距,8 是『基础间距』。
横向间距: 为了适用不同尺寸的屏幕,在横向采用栅格布局来排布组件,从而保证布局的灵活性。
然后对齐这个就是很基础的问题了,这里就不怎么说了啊
然后下一个对比,这个我个人感觉基本上都是用在交互上面的来看看Ant Design上面是怎么说的吧:对比是增加视觉效果最有效方法之一,同时也能在不同元素之间建立一种有组织的层次结构,让用户快速识别关键信息。他这句话说的就是要用对比,就要使两者之间出现明显的差距下面是Ant Design给出的案例
(正确的)
(错误的)
在一些用户做出抉择的地方不应该使用对比来诱使用户做出判断
下一个重复
Ant Design:相同的元素在整个界面中不断重复,不仅可以有效降低用户的学习成本,也可以帮助用户识别出这些元素之间的关联性。个人感觉重复也是在利用人的惯性思维,来帮助人来节省时间,通过的订单都用绿色的边框,人们一看到那显眼的绿色就都会知道那个订单,又比如同一个东西在很多东西上都有出现,人们就会感觉这些东西是一套的,下面是Ant Design给出的案例:
至于重复东西是那些Ant Design上已经说的很清楚了:重复元素可以是一条粗线、一种线框,某种相同的颜色、设计要素、设计风格,某种格式、空间关系等。
剩下的内容有时间我会在写在下篇文献里。
Ant Design
最新推荐文章于 2024-05-21 17:22:22 发布