網站交互設計：資訊設計中的「父子關係」

仲介交易 SEO診斷 淘寶客 雲主機 技術大廳

交互設計工作核心在於資訊架構和交互細節設計。 資訊架構包括資訊分類以及資訊展示邏輯設計;交互細節則多表現為控制項的選擇，交互效果的定義等。 在資訊設計中，遇到最棘手的問題就是資訊量太多而顯得設計結果不盡人意，那麼在砍不掉需求的前提下(資訊太多，也許是需求本身還有被精簡的可能性)，如何解決這類問題呢?

通常來說，資訊設計的時候有很對可遵循的關係在，資訊間互斥，資訊間相輔相成，資訊間屬於包含與被包含關係等。 那麼今天要探討的是」父子關係」。 所謂」父子關係」也就是核心資訊與輔助資訊(同類資訊)，重點資訊與次要資訊(非同類資訊)在介面設計上的對比關係。

一、 「父子關係」在設計中的意義

如果你不能做到讓一個頁面不言而喻，那麼至少應該讓它自我解釋，這是由Krug先生在《Don’t make me think》中提及的觀點。 而「父子」關係的體現，則是向使用者解釋哪些是需要被關注的，哪些是當前最重要的，以保證主路徑的暢通無阻(即便是廣告，如果是定制化的也是有積極意義的)。

二、如何在設計中找到「父子關係」

設計師首先需要判斷需要設計的資訊間關係。 而判斷依據可以是業務邏輯，可以是使用者操作邏輯。

比如一個成功回饋頁面。 如果業務邏輯到此為止結束，沒有下一步動作，那麼回饋資訊顯得比較重要;如果業務邏輯中這個成功回饋只是邏輯中的一個環節，那麼下一步動作的引導則強于回饋資訊。

三、 如何在設計中體現「父子關係」

第一步：資訊分類

將所有的資訊按照某種邏輯(card sorting)歸類。 歸類前將所有資訊設置為相同字型大小，字體，顏色。

分類的設計方法：

線：設計輔助線，實線，虛線等

面：背景底色，背景框

留白：通過資訊間空白區域來分割

比如郵箱驗證成功頁面，按照業務不同，將資訊劃分為三種：

原有頁面

第二步：資訊在頁面的排列順序

不同資訊在頁面排列的順序是特定的，這個順序可能一種規範，比如該頁面成功回饋肯定出現在頁面頂部，引導排後。 那麼將之前分類好的資訊以類為單位，按照這個順序陳列在頁面上。

第三步：資訊在頁面的優先順序

雖然資訊在頁面上陳列的順序是某種規範，但是資訊的優先順序卻不受這種規範的限制。 在明確優先順序之後，我們需要通過設計，將優先順序體現出來。

優先順序設計方法：層

所謂層的概念，類似ps的圖層。 就是讓優先順序最高的資訊第一時間吸引使用者眼球，並給使用者一種距離更近的感覺。 通常處理方式有加陰影，加底色等。

比如在郵箱驗證成功頁面，引導使用者完善個人資訊優先順序最高，那麼採用加底色加陰影的方式突出：

第四步：大框架設計完了之後，設計類單位下資訊的優先順序

對於類單位下資訊的設計方法同上面方法一樣。

比如會員資訊完善引導中資訊的設計：頁面資訊分為3類：標題，action，解釋語言。 action應該緊隨標題存在，

解釋語言圍繞action附近。 注意資訊間留白處理。

第五步：交互細節調整

在以上設計步驟完成之後，頁面資訊基本已經ok。 那麼交互細節的調整著重從視覺是説明使用者定位資訊。

設計方法：區別對待字體，字型大小，顏色以及樣式。

在郵箱驗證成功頁面，成功提示正文顏色#666666，12px(網站規範);引導文字中連結色#0066cc，標字14px bold等

第六步：做減法

這一步必不可少，剛開始都是採用各種效果已達到頁面設計的最好的效果，但是最後的時候要從整體角度出去去看這個頁面，將一些過重過多的設計項目去除

最終設計效果：

頁面資訊層級明顯，「父子」關係尤為突出。

四、「父子關係」在平常設計中的應用

A. Apple.com

蘋果官方網站首頁的資訊設計中，包括重點與次要，核心與輔助的關係。

B. Amazon.com

亞馬遜預設首頁的局部設計中，也存在比較明顯的運營息與常規，重點與次要，核心與輔助的關係

Ps：常規資訊本身可能是最重要的，比如導航，但是在網站成熟之後使用者對導航的認知度很高，反而不再需要視覺強化，而運營資訊本身的週期性決定它在某段時間需要被強化。

C. Gap.com

潮牌gap官網女裝頁面，以人物著裝大圖為主要推廣方式，在資訊設計上，運營與常規，核心與輔助資訊關係非常明瞭。

有設計方法的指導固然可以保證頁面的規範性和規整性，但是在具體對應的專案中，採用哪一種設計方法需要設計師有深入的思考和分析，同時，在完成專案之後對設計review並能總結經驗，以取得更大進步。

　　來源：HTTP://www.aliued.com/2012/07/28/1021/