四大基本原则

　　我们可以通过减少视线移动、增强视觉刺激来进行元素设计。网页设计主要遵循以下四个基本原则：“亲密性”、“秩序性”、“一致性”、“差异性”。

　　1. 亲密性

　　为了减少用户视线移动，相关的元素（操作相关、功能逻辑相关、响应逻辑相关）应当放置在一起组成视觉单元（物理位置相近）；逻辑联系较弱，彼此无关的元素则不应该靠近，使得整个页面的逻辑层次清晰。

　　元素相关性强弱和物理位置远近的适当设计，便于用户理解元素逻辑内容，减少混乱干扰。

　　2. 对齐

　　元素的摆放另一个重要原则就是对齐。对齐，不是说横平竖直，九宫格式的简单排列，而是在保证亲密性原则下，打乱无关元素的物理位置位置，保持各部分对齐，即所谓“乱中有序”。

　　随意摆放的元素在视觉上会造成混乱，同时在逻辑上也不易理解，因此在布局设计时，应当保证元素对齐，建立视觉联系。一般来说，不建议采用居中对齐的方式。

　　Apple 开发者网站，顶部导航条、产品分类、标题、介绍内容等在逻辑联系上亲密，根据亲密性原则物理位置相近，为了避免视觉混乱，将元素对齐，使得元素更具有秩序性。

　　3. 重复

　　对于类似的设计元素，要保持复用设计，保持整体设计的风格一致。

　　书籍的文章标题使用一样的字体、大小，使得整本书脉络清晰。

　　重复元素包含很多，符号、颜色、线条、字体甚至字间距等，组织重复信息利于帮助用户理清页面的层次逻辑，将设计中一致的元素统一起来，在外观上即可作为整体元素进行展示。

　　如下图中一级导航与二级导航的重复样式，视觉上相同，便于用户理解不同页面间的逻辑设置。

　　出现重复的元素，即提示用户上一段的结束和新一段的开始，免去用户判断过程。但要注意，没有逻辑相关的元素需要避免相同的设计，人的直观认知中，外观类似的元素会被自觉归为一类，如果没有逻辑相关的元素设计雷同，会让用户存在认知错误，增加其判断过程。

　　这就引出了最后一个原则：对比。

　　4. 对比

　　上面说过，含义不同，外观雷同的元素设计会使用户多加判断，这也是用户疲劳的来源之一。

　　元素的对比设计，可以是颜色也可以是粗细，有鲜明的对比可以在视觉上形成层次效果。

[返回上一级]