實例分享|在界面排版中,需要注意的七大原則(上)

5 評論 19904 瀏覽 170 收藏 9 分鐘

前面的視覺體系和大家簡單提到過傳統平面排版的四大原則:親密性、對比、重復、對齊。那界面排版有什么原則呢?今天菜心就來用實例分享一下界面排版中需要注意哪些原則。

大綱如下:

一、親密原則

二、對比原則

三、平衡原則

四、相似原則

五、簡潔原則

六、封閉原則

七、情感原則

由于篇幅原因,今天先來介紹前四個原則,剩下的我們下期再分享。

一、親密原則

空間上接近的內容,我們更容易將之歸類到一組,這就是我們所說的親密原則。

如下圖:

我們很容易將唐僧、孫悟空、沙僧分成一組,而將豬八戒單獨分離出來,因為前三者離的更近。

我們來看下面這張圖:

你能分清標題是屬于上面還是下面嗎?

當你了解了親密原則后,就知道為什么分不清,這也就是我們學習理論知識的原因,當我們看到錯誤的設計時,可以說出哪里不對,而不是憑感覺。

那這個原則如何運用到我們界面設計上呢?

看下圖:

上圖是簡書文章列表中的一條,我們在平時工作中也經常會遇到這種信息排版。首先我們需要清楚,上圖的內容有三個:上分割線、內容區和下分割線。此時我們可以判斷,內容區內的所有間距一定小于內容區與分割線的間距,因為根據親密性原則,有關聯的內容會離的更近,內容區的內容相對分割線來說,就是關聯性比較強的,所以它們的間距就會相對較小。

這樣的間距規律還會讓我們清晰的區分開每一條信息,不會導致信息干擾。

親密性原則是我們在界面排版中最常用的原則之一,大家一定要牢牢的記住并大量實踐,為我們后期的排版設計打下堅實的基礎!

二、對比原則

我們經常會遇到界面看著混亂的情況,但又不知道為什么,其實大部分情況都是因為界面內容對比不明顯而造成的。

例如下圖:

雖然上圖符合親密原則,但似乎看著還是有些凌亂,其中一個很重要的原因就是因為界面信息內容的對比不夠強烈,我們不知道該看哪里!

而我們來看一下今日頭條的信息排版:

你會發現重要信息和次要信息的大小對比非常強烈,使我們聚焦在主要信息(標題)上,這樣看著就不會那么散亂。

看完這個排版后再去解決上面那個散亂的問題,會不會更容易些呢?大家不妨自己嘗試排一下,這樣會讓你的印象更加深刻。

我們平時也要多去研究一些排版,好的排版你需要去分析它為什么好,不好的排版你需要分析它為什么不好,你能否排的更好,只有通過這樣不斷地刻意練習,你才能扎扎實實的前進。

回到正題,其實關于對比的方式還遠不止大小層面,還有顏色對比、粗細對比、形狀對比、疏密對比等等,所以大家在進行對比排版的時候,不妨多維度考慮,一定可以找到合適的解決方案。

三、平衡原則

平衡原則是界面排版布局的首要原則,大到整個官網,小到一張圖文,都需要我們對視覺平衡有一個良好的把控。

舉幾個例子:

看上圖,我們可以發現,圖片下方的文字是左對齊,為了達到視覺上的平衡,設計師將VIP 圖標和更新集數放在圖片右側。

再來看下圖:

我們會感覺整個頁面怪怪的,好像在向右上角傾斜,就是因為沒有遵循平衡原則,而當我們將最下方的按鈕移動到右側時,如下圖:

整個頁面看著就會平衡很多。

這里需要注意一點,一些藝術類的海報排版為了達到某些效果,可能會有意打破平衡,但那是特殊的平面藝術設計,而對于我們UI設計來說,在進行界面排版的時候,大多數情況還是要遵循平衡原則,這樣才能讓用戶感覺整個界面更加協調、舒服。

四、相似原則

我們需要對相似的內容賦予相同的屬性,例如同一級別的標題文字大小相同,相同顏色(如藍色等)的字體都可以點擊等等。

例如下圖:

上圖文字有兩處是藍色的,藍色使二者具有一定的相似性,而我們需要將相似性的內容賦予相同的屬性:可點擊。

相反我們看下圖:

雖然設計者為了統一和強調,將電話和地址都作成藍色,但如果電話可點擊,而地址不可點擊,就會給用戶產生困擾,以致于整個頁面的交互都存在一定的問題。這一點也是我們必須要注意的內容,在進行設計的時候不要犯這種低級的錯誤。

當然相似原則的因素也不只有文字顏色,還有背景色、方向、大小等等,有興趣的同學可以多多總結積累,大家一起交流。

以上就是今天分享的界面排版的前四個原則,下一期會將后面的內容補充完整。

希望你能夠多多練習,完善自己的排版知識體系,早日成為一名合格的資深視覺設計師。

 

作者:菜心(微信號:410628210 ?微信公眾號:菜心設計鋪),華為ITUX用戶體驗設計師(主視覺),3年工作經驗,參與華為Welink、3MS、連長社區等多個項目的用戶體驗設計工作。歡迎大家互相交流關注。

本文由 @菜心 原創發布于人人都是產品經理。未經許可,禁止轉載。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 平衡原則的距離是一個失敗的例子,ui的設計最終要更好的服務用戶視覺瀏覽習慣和操作便利性,而不是為了美觀而美觀

    來自北京 回復
  2. 平衡原則是不是也和視覺瀏覽的習慣有關系?

    來自上海 回復
  3. 倒不如向大家推薦《這給大家看的設計書》,這本書排版講的很透徹。

    回復
    1. 寫給大家看的設計書

      回復
  4. 你說的情況,一般來說寬度應該不會太寬,如果頁面太寬,有向一個角落傾斜的情況,嚴重不平衡,一定要以平衡原則為第一位。
    當然規矩也不是死的,特殊場景還要特殊考慮。

    來自廣東 回復