界面设计中的结构设计

　　关于这一原理的应用

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

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

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

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

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

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

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

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

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

　　银行卡的卡号设计

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

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

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

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

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

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

　　作者：童飞

　　文章来源：阿里UED