UI设计技巧:网页结构清晰明了的结构设计

核心提示：格式塔原理：接近性说的是物体直接的相对距离会影响我们感知它们是否以及如何组织在一起，互相靠近的物体看起来属于一组，UI设计技巧:网页结构清晰明了的结构设计(2)，而那些距离较远的则不是，上图中，值得深入研究，再配合颜色和尺寸的运用，左边的星星在水平方向比较靠近，因此我们看到的是三行星星；右边的星星在垂直方向更靠近

格式塔原理：接近性

说的是物体直接的相对距离会影响我们感知它们是否以及如何组织在一起，互相靠近的物体看起来属于一组，而那些距离较远的则不是。

上图中，左边的星星在水平方向比较靠近，因此我们看到的是三行星星；右边的星星在垂直方向更靠近，因此我们看到的是三列星星。

不知读者是否注意到另外一个现象，我们很自然的就把上面的星星看做是左边一组，右边一组。为什么会这样？两组之间的距离大小和右边一组列之间的距离大小是一样的啊。这其实就是格式塔原理中的另外一个原理"相似性"。

格式塔原理：相似性

相似性原理指出影响我们感知分组的另外一个因素：如果其他因素相同，那么相似的物体看起来属于一组。在上图中，区分组的因素就是排列的方向。

利用元素的相似性来对界面内容进行分组

关于这一原理的应用

上图中，"文档视图"组是有着相似的图标，"显示/隐藏"组是有着一样的checkbox，两组信息区分很明显。

还有一个在验证码中的应用

利用文字颜色来进行分组。

上面讲了结构设计的一个层面，内容的分组，结构设计还有另外一个层面，信息、数据的结构化呈现。

结构设计——信息、数据的结构化呈现

人们在浏览网页时，往往不是仔细阅读每一个词，而是快速的扫描，寻找目标信息。对于与目标相关的信息会非常敏感，但是对于其他的信息，即使看到了也不会被注意到。所以易于浏览、突出重点很重要。

结构化的数据能更快浏览和理解

相同的数据，左边就给人凌乱、难于区分的感觉。

结构化的数字更容易阅读和记忆

银行卡的卡号设计

看上图，分别报出邮政储蓄卡和工商银行卡的卡号。相信邮政储蓄卡的号码很难一次性无误的报出来，并且心里也没底报的对不对。

此外，即使不是一整个数据，分隔开的字段也能提供有用的视觉结构。

视觉层次易于理解信息的结构

左右两段话，右边的结构层次清晰明了。

在网页环境中，结构化的信息和数据非常有必要，当用户在快速浏览的过程中，能够快速的找到需要的信息。

在界面设计的三大元素中，结构是基础，值得深入研究，再配合颜色和尺寸的运用，才能设计出友好的界面。