网页设计中的对比原则与接近性原则（6）
发布时间：2010-03-30 14:51:00
创建视觉层次
有效地使用留白和逻辑分组可以给站点一个清晰的视觉层次。当然，站点的信息架构是有效地使用接近原则的基础。
层次是靠把元素分成有继承关系的组来表达的。层次让用户明白他们在什么地方、要到什么地方去，从而实现站点的交流，目的。列表是视觉上表达层次关系的很好的例子，如下图：
上面的图不看内容，只要瞥一眼就可以看出左面的列表在表示各项之间的关系时更加有层次感（缩进的项是主项的子类）。
层次离不开留白（包括各种大小的留白）。右面的列表则仅仅是一些元素的随机排列，它们之间看起来也没有联系和层次。
要在站点上用简单的HTML列表实现这个原则是很简单的。挑战之处在于从开始构建一个站点到整个设计过程中都贯穿这一原则。
容易查找和阅读的布局
有层次关系和逻辑分组的内容是容易阅读和查找的。
拿标题来说，应该让用户一目了然。段落则应当在一开始就表达视觉上的层次关系，上面的列表的缩进项目就很糟糕，因为它与视觉层次不相匹配。
一个在架构和设计中应用接近原则的站点不会对用户阅读信息产生压迫感。所以尽管在内容清淡的站点上实现接近原则相对容易，在内容丰富的站点应用这一原则就更加重要。
新闻网站就是研究使用这一原则的好案例。下面是Los Angeles Times 和Globe and Mail的对比。
总的来说，字体排印和颜色的选择使洛杉矶时报的站点的设计更加友好。它有一个整洁的外观，特别是页面的头部。
徽标很大而且突出，有效地展示了站点的品牌名称。靠近徽标的组件的是下面的一组水平导航栏，导航栏的暗色与徽标形成对比。徽标上方的链接排列整齐，并且链接之间的空白也足够大。头部左对齐的内容也使外观看起来很清爽。LA Times头部把所有关联项进行了分组，以凸显其徽标的地位。使你毫无疑问地清楚这些信息来自何处。
而Globe and Mail的站点又如何呢？
Globe and Mail的站点头部很复杂，没有实现接近原则。
页面中部徽标旁边那块仅有的重要留白并没有达到任何目的。头部的两则广告很乱，也许是商业需要吧，但这很成问题。最大的问题是巨大的banner广告上面那糟糕的部分，其中的元素没有明显的区别。三个点状的分割线试图把头部那块区域分成四部分，但第一条分割线并未起到任何作用。事实上，把分割线去掉的话或许看起来会更友好些。
0
投稿猜你喜欢
- 本文实例为大家分享了Python实现学生管理系统的具体代码，供大家参考，具体内容如下实现从面向过程到面向对象的过度，通过更改前面的学生管理系
在vue项目中, mock数据可以使用 node 的 express模块搭建服务1. 在根目录下创建 test 目录, 用来存放模拟的 js- 阅读上一篇：打造设计你自己的字体 ⅠMyFonts.com上销售的字体总数已经超过55,000个。现有字体的巨大数量表明了一个事实：我们在设
- '==' 比较的是两个对象的值'is' 比较的是两个对象的内存地址(id)下面我们着重理解 'is&
- 本文实例总结了微信小程序实现给嵌套template模板传递数据的方式。分享给大家供大家参考，具体如下：一、template模板调用的数据是单
- 1. 开发1.1. 架构Gorm使用可链接的API，*gorm.DB是链的桥梁，对于每个链API，它将创建一个新的关系。db, err :=
- 可以使用 Python 的 NumPy 和 OpenCV 库来实现这个任务。提前准备一张图片作为素材。什么是峰值信噪比峰值信噪比（Peak
- 最近看到好多人说到tns或者数据库不能登录等问题，就索性总结了下面的文档。首先来说Oracle的网络结构，往复杂处说能加上加密、LDAP等等
- 被分割的字段一定是有限而且数量较少的，我们不可能在一个字符串中存储无限多个字符 这个字段所属的表与这个字段关联的表，一定是一对多的关系 比如
- 我们之前看到了函数和对象。从本质上来说，它们都是为了更好的组织已经有的程序，以方便重复利用。模块(module)也是为了同样的目的。在Pyt
- 心血来潮写了个多线程抓妹子图，虽然代码还是有一些瑕疵，但是还是记录下来，分享给大家。Pic_downloader.py# -*- codin
- 之前在做数据分析的过程中，需要对数据进行实时的写入，比如对新生成的数据写入之前已经生成的txt或csv文件中。现在想想其实很简单，所以做一个
- 在python中有很多字符串连接方式，今天就在这里具体总结一下：①.最原始的字符串连接方式：str1 + str2②.python 新字符串
- 在前文说过，如果想要更好的做接口测试，我们要利用自己的代码基础与代码优势，所以该章节不会再介绍商业化的、通用的接口测试工具，重点介绍如何通过
- 现在有一个xml，格式如下： <date> <item> <id> 1 </id> <
- 1、背景我们先谈谈为什么在Python编码过程中强烈推荐使用类型注解 ？Python对于初学者来说是非常好上手，原因是在于对计算机底层原理的
- 一.什么是Vuex？ Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规
- 本文介绍了深入理解ES6中let和闭包，分享给大家，具体如下：在开始本文之前我们先来看一段代码for(var i=0;i<10;i++
- 本文实例讲述了Python中的True,False条件判断用法。分享给大家供大家参考。具体分析如下：对于有编程经验的程序员们都知道条件语句的
- 在写Python的时候经常会遇到时间格式的问题，首先就是最近用到的时间戳（timestamp）和时间字符串之间的转换。所谓时间戳，就是从 1
