安靜的結構:控制頁面的視覺_網頁設計教程

推薦：讓網站似個彬彬有禮的紳士
不可否認，web的用途越來越廣。大家在互聯網上看資訊/電影、聊天、找朋友/工作、玩游戲、寫小說/日志、交易/買賣、聽音樂/廣播。互聯網已經不僅僅是一個窗口，

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

安靜的結構

在設計以內容為主的新聞類網站時，應該運用干凈的結構和清楚的元素組合。直觀地呈現信息是一個在線新聞站點的根本需求，為滿足這種需求甚至可以犧牲一些界面視覺。

外框、線條、顏色等都是結構的基本元素，將這些元素舒適的排列會給頁面帶來節奏感和連貫性。并大大地加強和突出內容，將內容清楚的呈現給用戶。

CNN的改版設計就是如此，它的信息架構干凈、清楚，我將它稱之為安靜的結構。當網站的內容為王，而你又想鼓勵用戶花時間將內容讀入大腦而不只是盯著它的時候。安靜的結構在這個時候可以幫助你。

創建一個安靜的結構成本其實很低，并且有很多方法。這篇文章會涉及到其中一部分。我將展示如何將它們進行有效的結合，增強設計效果。

兩個頁面的設計

粗略看一看CNN.com的主頁，再看看USA Today的主頁。你會發現USA Today設計得也不是太差。通過比較，你就會發現USA Today在內容表達上其實存在著一些混亂。
為何會產生這種情況? 我們通過比較一些細節來分析。

首先，我們比較下兩個站點的頂部設計。 CNN非常簡單，并且只有一個目標: 導航/搜索。相反, USA Today的頂部稍顯忙碌，它想要用戶完成至少3種不相關的任務。通過頂部的設計，就初顯兩個站點截然不同的設計風格。

焦點明確：導航/搜索。

焦點分散，效率變低。
雖然能找到導航/搜索，但是評論內容、邀請成為會員、登錄提示都以同等程度的重要性來展現。

但是頁面是否干凈和清楚，區別體現在整個版面上，頂部并不會破壞網頁的完整性。因此要建立安靜的結構，還需要從具體的版面上入手。

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

通過比較可以得出，CNN在展示圖/文配對上具有較高的一致性。這種一致性，在其內容和結構元素的展現方面也可看出。因為這種一致性的結合，CNN的表達較USA Today來說更為清楚。

分享：初步了解信息架構
結合一葉千鳥對信息架構的講解，談談自己的看法。我是學信息專業畢業的，考過信息架構師，但是似乎和工作中的了解還是有點區別，就此拿出項目實例和大家分享