產品界面設計中信息關係包含哪些要素？怎樣才算規範？

一．界面設計的意義

為什麼有的APP看起來那麼舒服、清新、有情懷，一眼看上去就很有feel？其實是因為它們充滿著「品質感」，品質感其實就是產品給人帶來的一種嚴謹、專註的態度。品質感其實是源於產品對細節深度的考究與打磨，一款設計的有品質感的產品帶來的是用戶的舒適度、好感度和信賴度。

例如小學時候文具店裡5毛錢一本的普通練習簿和10塊錢一本的高端日記本區別。不同的是，在如今免費大行其道的互聯網行業，對於用戶來說，付出相同成本甚至成本的情況下，用戶會毫不猶豫的用「高端日記本」而不是一本普通練習簿來記錄生活。因此一個產品在滿足用戶基本需求的前提條件下，誰的體驗更好，誰就能夠贏得用戶。

二．界面中的品質感

界面設計和產品的設計也是一樣，同樣會帶給用戶一種品質感，它們都是是源於設計師對界面的每處細節的深度考究。

界面的品質感主要來源於界面四個維度、界面中的結構、界面中的圖形、界面中的顏色和界面中的動態，今天研究一下如何通過結構提升界面品質感。

三．界面中的結構

界面的結構在用戶體驗中起著重要作用，其相當於界面設計中的「骨」，界面結構中的細節更是會直接影響到整體設計的品質感。那麼具體結構中的細節體現在哪裡？

1. 關係

信息關係包含界面中的組合、層級、分割等。

組合

「物以類聚」，界面內需明確傳達各元素之間的關係。

輔助信息應服務於主體信息：輔助信息是主體內容的延續說明或補充操作，作用為服務於主體內容。同一組合內，信息間需有明確的關係與合理的順序，且輔助信息不能搶鏡。例如朋友圈，清晰傳達關係的同時，以內容為主的閱讀方式不會被頭像內容干擾。

關係越緊密的內容距離應越近：形式不變的基礎上，元素之間的距離越近，越易被視為同一組合。距離相同時，橫向排列的內容接近度相對更高。

層級

界面的層級關係主要體現在主次、優先順序、層數。

主次分明、避免層級混亂：清晰的層級結構，能讓用戶更快的獲取重要內容，同一組合下其信息一定有主要展示和次要展示。可以通過位置、面積、顏色三個維度建立主次層級的對比度。

位置：在中國，用戶的閱讀習慣為從左上至右下，所以用戶對左上區域的觀察最優，依次為右上，左下，而右下最差。因此，左上部和上中部被稱為「最佳視域」。

面積：信息內容在界面內的佔比面積越大，信息越是突出。

顏色：白色背景下，明度越低/飽和度越高，信息越是突出

同一組合下，有且僅能有一個最重要的內容：當所有的內容都重要，也就等於所有內容都不重要，信息的優先順序不取決於主要信息是否夠大，而是主要信息和次要信息的對比度。

更多示例

同一頁面，信息層級不宜過多：過多的信息層級會讓頁面變得複雜，增加用戶的理解成本。冗餘的信息展示會讓界面變的凌亂瑣碎，一定程度上干擾用戶使用體驗。一般情況下界面應控制在3層信息以內。

分割

分割是用於區分不同信息的方法，大概可以分為距離分割、線性分割、面性分割（背景色分割）、顏色分割。

距離分割：增大兩模塊的距離達到內容分割內容作用，元素間的距離越遠，越不易被視為同一組合，其好處是可以省去分割元素，減少視覺層級，讓界面更乾淨、明快。

線性分割：線性分割是目前界面中最常用的分割方式，其優勢是線自身「較輕」，不易干擾用戶。值得注意的是線本身不重要，不宜過度強調，應點到為止，所以線的顏色不宜過重。

面性分割/背景色分割：當處理多層級、信息複雜的場景，在單個模塊里已經用了線性分割的情況下。可能需要更強一點的分割方式來表明模塊與模塊間的關係，這時我們可能需要面性分割方式。這種方式像是灰色的背景上，羅列著多張卡片，能更明確的表達兩組內容的分割感，但其缺點是會較明顯的增多界面層級。

顏色分割：當信息的表現形式重複性較高，容易被看混的情況下，顏色分割是更為合適的選擇。

以上可以總結為:

界面中的組合能讓信息關係更縝密。

層級能讓用戶更快的獲取重要內容。

分割能讓用戶更清晰的區分不同模塊間關係。

時間有限，關於"字體"和"對齊"的部分近期將繼續研究。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！