CNN新聞網(wǎng)站前段時(shí)間改版了。非著名設(shè)計(jì)顧問 andy 通過對(duì)比 CNN.com 和 USAToday.com ，談了些自己的想法，其中不乏一些好的見解。根據(jù)本人的理解，將其中一些有用的信息做了翻譯并記錄如下：

安靜的結(jié)構(gòu)

在設(shè)計(jì)以內(nèi)容為主的新聞?lì)惥W(wǎng)站時(shí)，應(yīng)該運(yùn)用干凈的結(jié)構(gòu)和清晰的元素組合。直觀地呈現(xiàn)信息是一個(gè)在線新聞?wù)军c(diǎn)的根本需求，為滿足這種需求甚至可以犧牲一些界面視覺。

外框、線條、顏色等都是結(jié)構(gòu)的基本元素，將這些元素舒服的排列會(huì)給頁面帶來節(jié)奏感和連貫性。并大大地加強(qiáng)和突出內(nèi)容，將內(nèi)容清晰的呈現(xiàn)給用戶。

CNN的改版設(shè)計(jì)就是如此，它的信息架構(gòu)干凈、清晰，我將它稱之為安靜的結(jié)構(gòu)。當(dāng)網(wǎng)站的內(nèi)容為王，而你又想鼓勵(lì)用戶花時(shí)間將內(nèi)容讀入大腦而不只是盯著它的時(shí)候。安靜的結(jié)構(gòu)在這個(gè)時(shí)候可以幫助你。

創(chuàng)建一個(gè)安靜的結(jié)構(gòu)成本其實(shí)很低，并且有很多方法。這篇文章會(huì)涉及到其中一部分。我將展示如何將它們進(jìn)行有效的結(jié)合，增強(qiáng)設(shè)計(jì)效果。

兩個(gè)頁面的設(shè)計(jì)

粗略看一看CNN.com的主頁，再看看USA Today的主頁。你會(huì)發(fā)現(xiàn)USA Today設(shè)計(jì)得也不是太差。通過比較，你就會(huì)發(fā)現(xiàn)USA Today在內(nèi)容表達(dá)上其實(shí)存在著一些混亂。
為何會(huì)產(chǎn)生這種情況? 我們通過比較一些細(xì)節(jié)來分析。

首先，我們比較下兩個(gè)站點(diǎn)的頂部設(shè)計(jì)。 CNN非常簡(jiǎn)單，并且只有一個(gè)目標(biāo): 導(dǎo)航/搜索。相反, USA Today的頂部稍顯忙碌，它想要用戶完成至少3種不相關(guān)的任務(wù)。通過頂部的設(shè)計(jì)，就初顯兩個(gè)站點(diǎn)截然不同的設(shè)計(jì)風(fēng)格。

焦點(diǎn)明確：導(dǎo)航/搜索。

焦點(diǎn)分散，效率變低。
雖然能找到導(dǎo)航/搜索，但是評(píng)論內(nèi)容、邀請(qǐng)成為會(huì)員、登錄提示都以同等程度的重要性來展現(xiàn)。

但是頁面是否干凈和清楚，區(qū)別體現(xiàn)在整個(gè)版面上，頂部并不會(huì)破壞網(wǎng)頁的完整性。因此要建立安靜的結(jié)構(gòu)，還需要從具體的版面上入手。

例如：USA Today不太注意圖/文結(jié)合時(shí)的配對(duì)排列方式，一些是水平配對(duì)，一些是垂直配對(duì)。雖然這不能稱之為一個(gè)問題，但是每一種排列方式都有適合它出現(xiàn)的位置。不搞清楚這個(gè)狀況，會(huì)惡化版面，造成內(nèi)容展示的損傷。具體到下面的圖片：

通過比較可以得出，CNN在展示圖/文配對(duì)上具有較高的一致性。這種一致性，在其內(nèi)容和結(jié)構(gòu)元素的展現(xiàn)方面也可看出。因?yàn)檫@種一致性的結(jié)合，CNN的表達(dá)較USA Today來說更為清楚。

下面的例子將圖釋如何進(jìn)行圖/文配對(duì)，解決閱讀是否舒服、眼睛是否疲勞的問題。
先看下面第一張圖。在第一張圖的結(jié)構(gòu)中，一對(duì)單獨(dú)的圖/文需要你上/下不停的移動(dòng)你的雙眼，造成視覺上的消耗。要想瀏覽整組信息，還需要左/右移動(dòng)你的眼睛。而上下兩組信息的并排加劇了這種消耗。

相反，下面第二張圖的圖/文配對(duì)結(jié)構(gòu)允許你的眼睛停在一個(gè)平面上。幾組新聞之間也不會(huì)沖突。（另：請(qǐng)注意兩個(gè)例子在視覺復(fù)雜程度上的不同。）

網(wǎng)格和間距的排版

一些人可能認(rèn)為，布置一個(gè)好的網(wǎng)格只需要注意欄目寬度和水平間距。創(chuàng)造水平方向的韻律當(dāng)然很重要，但如果你想設(shè)計(jì)出一個(gè)安靜的結(jié)構(gòu)，垂直方向的節(jié)奏感同樣重要。

在下面的例子里，網(wǎng)格在欄目的水平方向上是一致的。但需要注意的是，垂直方向的不同排版在結(jié)構(gòu)上會(huì)產(chǎn)生一定程度的視覺噪音。

在下面的例子里，水平和垂直方向的間距相同，這使得整個(gè)結(jié)構(gòu)在背景里淡入淡出。因而所有呈現(xiàn)內(nèi)容更顯干凈，也更容易將視覺吸引到內(nèi)容上。可見它對(duì)安靜的結(jié)構(gòu)起到重要作用。

安靜的結(jié)構(gòu)

為了幫助你理解什么是安靜的視覺，什么是吵鬧的視覺。我們來比較以下兩個(gè)無內(nèi)容、純結(jié)構(gòu)的展示圖片。來測(cè)試下它們?cè)谝曈X上的“分貝”。

PK...

我們能夠注意到USA Today的不一致性：粗糙，雜糅，寬度混亂。而CNN卻有顯著的一致性：極簡(jiǎn)且清楚的空間結(jié)構(gòu)。

來看下面的圖片。當(dāng)你第一次瀏覽USA Today的這個(gè)頁面時(shí)，最先引起你注意的是這個(gè)頁面吵鬧的結(jié)構(gòu)：

讓我們?cè)倏纯碈NN的這個(gè)頁面。你可以很明顯看出，安靜的結(jié)構(gòu)是如何使內(nèi)容成為頁面上最顯眼的元素的。

希望大家注意本文強(qiáng)調(diào)的各個(gè)要點(diǎn)，無論好點(diǎn)還是壞點(diǎn)。也許某一個(gè)點(diǎn)不會(huì)直接影響內(nèi)容的清楚展現(xiàn)。但是，它們的結(jié)合卻能產(chǎn)生巨大的能量。除了要點(diǎn)，文中列舉的圖例也可以作為借鑒。

雖然某些網(wǎng)站的設(shè)計(jì)，不會(huì)涉及到大的閱讀內(nèi)容欄目。但文中這些排版方式，可以給你清晰的設(shè)計(jì)思路。

還有很多設(shè)計(jì)安靜結(jié)構(gòu)的方法這里沒有涉及到，希望讀者花一些來自己完善。這些有用的技術(shù)可以幫助你玩轉(zhuǎn)頁面結(jié)構(gòu)中的視覺“分貝”。當(dāng)然，戲法人人會(huì)變，巧妙各有不同。要活學(xué)活用！ (編輯：68design_2)