如何提升界面品質感1-界面中的結構

來自專欄別叫我設計師

01 當前背景

今天聊些設計基礎部分

設計工作中，我們總會接到不同場景、不同目標用戶的業務需求，需要不同風格的設計方案支持，但無論是什麼風格的設計，用戶都會有一個共同訴求-「品質感」

02 什麼是品質感？

所謂品質感其實就是產品給人的一種嚴謹、專心對待的態度。同樣一本書的封面，粗糙紙的封面和細心打磨的小羊皮封面就是不同的概念。

例如無印良品和愛馬仕，兩者都會傳達給用戶一種「品質感」，雖設計方向不同，但他們有一個共同的特性-對細節的深度打磨。其實品質感就是來源於產品對細節的深度考究與打磨。

一款有品質感的設計，隨之帶來的是用戶使用中的舒適度、好感度、信賴感。

03 界面中的品質感

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

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

04 界面中的結構

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

一.關係

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

· 組合

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

1輔助信息服務於主體信息

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

2關係越緊密的內容距離應越近

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

· 層級

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

1.主次分明、避免層級混亂

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

a.位置.

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

b.面積.

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

c.顏色

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

2.同一組合下，有且僅能有一個最重要的內容

當所有的內容都重要，也就等於所有內容都不重要，信息的優先順序不取決於主要信息是否夠大，而是主要信息和次要信息的對比度。

3.同一頁面，信息層級不宜過多。

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

主次分明、優先順序明確、層級適當會讓界面的信息傳達更清晰明確，進而增加用戶的使用中的舒適度。

· 分割

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

1.距離分割

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

2.線性分割

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

3.面性分割/背景色分割

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

4.顏色分割

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

能起到分割作用的前提下，分割方式越輕，越不會干擾閱讀、界面越乾淨。

以上可以總結為

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

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

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

二.字體

文字字體是界面結構中重要組成部分，文字也是多數場景下信息傳達最為準確的方法。合理的字體能夠增加用戶的閱讀體驗，提升用戶在產品使用中的舒適度。合理的字體包含字體的可讀性、對比度、間距。

· 可讀性

可讀性是字體在界面中需考慮的基礎因素，也是首要因素。字體的的信息傳達容易需精準、明確。字形選擇包括其場景適應和字形的適度性

1.字形的場景適應

由於不同的字形會帶給用戶不同的感覺。由於場景需要，我們一定情況下會選擇自定義字體。當我們選擇不同的字體時，需要考慮字體在產品內不同模塊下是否易於閱讀。

2.字形的適度性

字體本身不宜搶鏡。隨意的、搶眼的字體一定場景下上能夠帶來足夠的氛圍感，但是長期使用會出現「視覺疲勞」，其原因是字體本身的設計搶走了用戶正常在該場景下閱讀或使用的內容和信息

· 對比度

1.字型大小

用於區分不同層級的信息內容，為保證信息的快速傳達，不同層級的字體需有一定的優先順序順序。

a.界面內的主文案/一級文案應精簡明確。假設用戶只會在這個界面停留3、4秒，能夠吸引用戶繼續瀏覽是界面的就是一級信息。當一級信息文案字數過多，會增加用戶剛進入頁面時的閱讀成本，進而降低閱讀體驗。

b.另外，移動端小於24px的字型大小應慎重使用，雖然小的字型大小會讓板式更加的精緻，但當同一場景下，小於24px的文案字數偏多時，會影響用戶的正常閱讀。但可用於弱化的文字鏈、標籤等字數少的場景。

2.加粗

字型大小相同，字體加粗也是區分不同層級信息的一種方法，當兩信息區分度不大、界面層級過多需要減少層級的場景下，可以選擇加粗部分內容建立輕度對比。

3.字色

我們畫畫的時候，時常會聽到老師說「要注意畫面的黑白灰」。在界面設計中，也是一樣，我們需注意各層級字體間的黑白灰關係。明確的畫面黑白灰關係會讓界面變得更乾淨清晰。另外，當不同明度切換時應保持色相/飽和度不變。

· 間距

在界面設計中，字間距和行間距會直接影響用戶閱讀效率。過於緊密的間距會讓字體間失去「透氣性」，根據我們正常的閱讀順序來講，字間距要小於行間距以便於每一行更易被視為一組，進而給用戶帶來更好的閱讀體驗。我們可根據文案長短，字型大小大小制定更適合閱讀的間距。

字體的可讀性是字體的基礎，明確的字體對比度能夠讓信息層級更加清晰乾淨，而合理的字間距能夠無形的提升用戶的閱讀體驗。

三.信息對齊

對齊是界面結構中的一部分，合理的對齊方式能夠使界面內的信息變得更規整，內容傳達更明確。讓元素間的關係更具節奏感。

· 聯繫性

同一組合內的不同元素間需有明確的對齊關係，其關係能夠清晰表達不同元素間的親密性

1.元素間的居左對齊

當文案的字數偏多一些的場景下，居左對齊更符合用戶的閱讀習慣

2.元素間的居中對齊

當內容信息較少、或由於對齊元素形狀等因素，居中對齊可能會帶來意外的收穫與效果。

3.元素間的居右對齊

界面內一般不會用居右對齊的方式來建立兩元素間的關係，但是界面內會存在和屏幕建立右對齊關係的元素（稍微有點繞-.-），與屏幕右對齊的元素一般為主體的解釋說明以及輔助操作等。一般情境下，當用戶閱讀完主要內容信息後才會對操作類的功能有需求，如查看購買、關注、查看更多、進入下一頁面等。

· 統一性

另外，不同組建間也需要合理的建立對齊關係，同時為保持界面的簡潔性，同一界面內建立的對齊模式不要過多。

05 總結

界面的結構是提升界面品質感的關鍵，而合理的信息關係、字體、對齊方式能夠界面的結構更加完整，精緻。也希望每個設計師的作品都更加的美而精緻。

以上為本人的一些看法，也希望能給正在探索的你們一些觀點參考。

文章來源於【微信公眾號：別叫我設計師】，更多設計內容定期更新

感謝您的閱讀，下期見！