設計中如何使介面更加飽滿？

設計的好壞往往在於細節的處理，是否對齊？是否對比合適？是否用色準確？...... 今天來聊聊“飽滿感”。

 前言   

我們先來看幾張對比圖，看的時候注意觀察左右兩邊的不同，並心裡做下評估，同樣的內容，區域性細節處理方式的不同帶來的閱讀感受哪種更舒適呢？

對比一

對比二

對比三

對比四

對比五

對比六

對比七

對比八

對比九

為什麼左右兩張圖會帶給讀者不同的閱讀感受呢，今天我們來講講設計中“如何使介面更加飽滿？”

方式一：字型的飽滿   

這是一個普通的思源黑體-加粗字型

加上隱形矩形，會發現有不少空白

將字型處理後，空白麵積減少，是不是整體更飽滿了些呢？

海報案例：

    方式二：文字的飽滿   

1.標題文字

正常情況下為使閱讀更方便，標題間距給-10%~20%為佳。

海報案例：

2.文字+數字

通常數字會比漢字小，為使基線對齊，數字與漢字需分開設定字號。

3.標題段落

標題段落間距過大，容易內容分離，影響閱讀。建議行間距1.1-1.3。

4.正文段落

正文段落間距過小，畫面堆砌，影響閱讀。建議行間距1.2-1.5。

5.主副標題

主副標題字號比例過大過小會導致介面不平衡，建議主標題是副標題的1.5倍。

   方式三：關係的飽滿   

1.修飾元素

肉眼看不出時可藉助隱形矩形，如圖小豎線跟字型高度等高時更加飽滿。

2.符號+文字

中文字元常常是佔用一個文字單元格，而標點符號則是佔用半個文字單元格，在視覺上會讓人感覺內容分家。所以要注意標點符號的小細節，建議將符號距離控制均等。

3.圖形+文字

當A=B時，圖示和文字的關係會混淆，這種情況下要滿足B>A，用間距分層次。

採用黃金分割0.618值。也就是橫向21個小方塊，豎向13個小方塊。此時，最優雅的板式是A＞B的間距，1＞2＞3的間距。

案例：

左邊圖示太小，間距B＞A，畫面看起來不夠飽滿，優化如右邊，將圖示放大，調整B＞A的間距到A＞B的間距，是不是更加飽滿了些呢？

   方式四：圖示的飽滿   

第一個隱形矩形空白太多，當把收音機電線縮小，機盒放大時，空白減少，整體更加飽滿了。

案例：

   總結   

上述即是本人對設計中“如何使介面更加飽滿？”總結的幾種技巧，概述而言分別為：字型的飽滿，文字的飽滿，關係的飽滿和圖示的飽滿，不足之處希望大家多多指教哦。