查看文章 |
安静的结构：控制页面的视觉“分贝”
2007年07月18日 星期三 23:50
CNN新闻网站前段时间改版了。 安静的结构 外框、线条、颜色等都是结构的基本元素，将这些元素舒服的排列会给页面带来节奏感和连贯性。 CNN的改版设计就是如此，它的信息架构干净、清晰，我将它称之为安静的结构。 创建一个安静的结构成本其实很低，并且有很多方法。这篇文章会涉及到其中一部分。 两个页面的设计  焦点明确：导航/搜索。  焦点分散，效率变低。
虽然能找到导航/搜索，但是评论内容、邀请成为会员、登录提示都以同等程度的重要性来展现。 但是页面是否干净和清楚，区别体现在整个版面上，顶部并不会破坏网页的完整性。 因此要建立安静的结构，还需要从具体的版面上入手。 例如:USA Today不太注意图/文结合时的配对排列方式，一些是水平配对，一些是垂直配对。 虽然这不能称之为一个问题，但是每一种排列方式都有适合它出现的位置。 不搞清楚这个状况，会恶化版面，造成内容展示的损伤。 具体到下面的图片：  通过比较可以得出，CNN在展示图/文配对上具有较高的一致性。 这种一致性，在其内容和结构元素的展现方面也可看出。 因为这种一致性的结合，CNN的表达较USA Today来说更为清楚。
下面的例子将图释如何进行图/文配对，解决阅读是否舒服、眼睛是否疲劳的问题。 先看下面第一张图。 在第一张图的结构中，一对单独的图/文需要你上/下不停的移动你的双眼，造成视觉上的消耗。
要想浏览整组信息，还需要左/右移动你的眼睛。而上下两组信息的并排加剧了这种消耗。 相反，下面第二张图的图/文配对结构允许你的眼睛停在一个平面上。几组新闻之间也不会冲突。 （另：请注意两个例子在视觉复杂程度上的不同。）  网格和间距的排版
一些人可能认为，布置一个好的网格只需要注意栏目宽度和水平间距。 创造水平方向的韵律当然很重要，但如果你想设计出一个安静的结构，垂直方向的节奏感同样重要。 在下面的例子里，网格在栏目的水平方向上是一致的。 但需要注意的是，垂直方向的不同排版在结构上会产生一定程度的视觉噪音。  在下面的例子里，水平和垂直方向的间距相同，这使得整个结构在背景里淡入淡出。
因而所有呈现内容更显干净，也更容易将视觉吸引到内容上。可见它对安静的结构起到重要作用。  安静的结构 为了帮助你理解什么是安静的视觉，什么是吵闹的视觉。 我们来比较以下两个无内容、纯结构的展示图片。来测试下它们在视觉上的“分贝”。  PK...  我们能够注意到USA Today的不一致性：粗糙，杂糅，宽度混乱。 而CNN却有显著的一致性：极简且清楚的空间结构。 来看下面的图片。当你第一次浏览USA Today的这个页面时，最先引起你注意的是这个页面吵闹的结构：   但是，它们合在一起之后就能产生巨大的能量。另外，文中列举的图例也可以作为借鉴。 也许某些网站的设计，不会涉及到这么大的阅读内容栏目。 但文中这些排版方式，也可以让你的设计思路更清晰。 还有很多设计的方法这里没有涉及到，需要您自己花时间来完善。 以上的技术可以帮助您玩转页面结构中的视觉“分贝”。 但是，戏法人人会变，巧妙各有不同。要活学活用！ |
