如何設計出“好看”的UI介面（一）：排版的六項原則

排版是介面設計中最基本的，也最重要的，就像是繪畫中的造型設計，要是形體不準，上面的細節裝飾再豐富也是徒勞。

好的排版能有效地向使用者傳遞關鍵資訊，同時也能提升產品的使用者體驗，排版已經變成了設計師越來越重視的一個環節，下面總結了一些排版的知識點，希望可以和大家一起成長。

介面設計的6個關鍵點：

• 留白
• 放大比例
• 對齊與平衡
• 父子主次關係
• 穿插與分割
• 人物與介面關係
  

1.留白

設計最重要的一點是清晰，所以留白的主要目的是突出重要資訊，合理的利用空間關係，使重要的資訊一目瞭然，同時可以讓介面透氣。

留白的多少，是由介面功能的性質決定的。

1.一般基本功能留白的空間，不會太大，以功能清晰為原則。


2.一些特殊功能的留白空間，會根據介面性質，選擇多留出空間，用來增加介面特有的氣氛。


或是用來突出重點資訊，或是為了符合功能的特點


2.放大比例

介面設計中，讓人眼前一亮又印象深刻的，一個最簡單的方法，就是打破自己的設計習慣，打破常規，放大功能之間的比例，給畫面增加視覺衝擊力。

下面看一個案例：

示例a：


示例b：


a和b哪個介面更吸引你？是不是一目瞭然的a？

3.對齊和畫面平衡

對齊是介面設計中一個重要的細節，可以無形中提升畫面的整體品質，也是對UI設計師是否合格的一個基本判定。

1.對齊是介面中各個功能之間的調整，比如：文字之間的對齊，文字與介面間距的等比對齊，介面與介面之間的細微對齊調整。


2.對齊也是讓畫面保持平衡的一種手段，避免畫面出現視覺上的不對稱不舒服，讓畫面失衡。


3.對齊不只是資訊之間的對齊，還包括畫面中功能之間相互呼應的“對齊”，比如圖中的左上角和右下角的區域間的對應，避免了一頭過重而讓畫面失去平衡。


4.對齊也包括介面中，功能之間傾斜角度的一致性。


整個介面相關功能的傾斜度都是一致的，包括彈窗、文字和背景裝飾，會讓畫面更有動感。

4. 父子主次關係

是指介面中的層級關係，不只是點選操作上的順序展現，還有視覺上的主次功能先後順序的展示。

1. 在介面設計中，點選出現的先後順序的展現，比如切換按鈕介面。


2. 視覺上的觀看順序，比如合成功能，技能樹。



5.穿插與分割

1.在二次元風格的介面中出現的比較多，也是二次元介面的排版特點，可以讓畫面更加有活力和動感，也更接近漫畫和雜誌的排版佈局。


2.還可以更好的製造出空間感，讓畫面層次更加豐富。


6.人物與介面關係

其實，遊戲UI介面就是，人物與功能和背景三者之間相互襯托相互穿插的展示。

1.一般以角色為主的介面，都是功能圍繞角色進行排版設計，比如選擇角色介面、換裝介面、抽卡介面等。


2.以功能為主的介面，角色會用來襯托功能進行展示，比如7日登入介面、恭喜獲得介面、一些獎勵介面和一些活動介面等。


而背景會根據遊戲世界觀和遊戲本身的風格進行設計，用來裝飾和襯托整個畫面。

但是，不論怎樣設計，都要記住遊戲介面是為資訊服務的，雖然我們可以加裝飾，做各種形式的展示，但是資訊部分一定要清晰直觀，要第一時間傳遞給玩家。

同時，整個畫面要保持視覺上的平衡。

總結

不論什麼樣的遊戲風格，製作過程中這些思考都是必不可少的，只有通過思考製作出來的介面，才是有靈魂的。

作者：哥白尼
專欄地址：https://zhuanlan.zhihu.com/p/88175933