理解UI设计准则——结构化

目录

• 去除重复
• 结构化提高了用户浏览长数字的能力
• 数据专用控件提供了更多的结构
• 视觉层次让人专注于相关信息

 

---

　　　　本节主要是来说明当信息以简洁和架构化的方式呈现的时候，人们能够更容易的浏览和理解。

去除重复

　　　　左图中的网页中，啰嗦重复的链接拖慢了用户的查看进度，并且把他们需要看到的重要文字都“掩埋”在了那些重复、啰嗦的文字当中了。

　　右图的网页是经过改进的设计，更加精炼、更加结构化、重要的是巧妙的去除了重复文字。不但功能没有减少，而且更节省了空间，更适于

　　浏览。

 

结构提高了用户浏览长数字的能力

　　　　对于一些专用的数字，比如，电话号码和银行卡号，为了便于浏览，习惯上会将这些数字分割成多个部分，便于输入和核查

　　　                                                        　

　　　　所以，好的用户体验应该是，当用户输入这些号码的时候，允许用户输入空格进行分割，或者系统自动提供空格进行分割，再或者使用

　　静态文本进行强行分割

　                                 　　　

　　　　　　　　　　　　　　  　　

 

数据专用控件提供了更多结构

　　　　结构化从分割字段再进一步就是数据专用控件，也可以提供结构化的特性

　　　　

           

 

视觉层次让人专注于相关信息

　　　　可视化信息显示的重要目标之一，是提供一个视觉层次，即信息的布置安排能够：

　　　　■ 将信息分段，把大块整段的信息分割为各个小段

　　　　■ 显著标记各个信息段和子段，以便清晰的确认各自的内容

　　　　■ 以一个层次结构来展示各段及其子段，使得上层的段能够比下层得到更重点的展示

　　　　当用户查看信息的时候，如果内容是经过层次化展示的，就能够略过不相关的信息，直接找到关注的内容。比较一下下面的两个内容

　　网页，就会非常的清楚

　　　　             

　　　　同样除了文字内容之外，对于其他的信息的组织都应该体现一种结构化、层次化的信息架构，以帮助用户迅速找到想要找的信息，

　　比较一下下面的两个面板：