實例分享|在界面排版中,需要注意的七大原則(上)
前面的視覺體系和大家簡單提到過傳統平面排版的四大原則:親密性、對比、重復、對齊。那界面排版有什么原則呢?今天菜心就來用實例分享一下界面排版中需要注意哪些原則。
大綱如下:
一、親密原則
二、對比原則
三、平衡原則
四、相似原則
五、簡潔原則
六、封閉原則
七、情感原則
由于篇幅原因,今天先來介紹前四個原則,剩下的我們下期再分享。
一、親密原則
空間上接近的內容,我們更容易將之歸類到一組,這就是我們所說的親密原則。
如下圖:
我們很容易將唐僧、孫悟空、沙僧分成一組,而將豬八戒單獨分離出來,因為前三者離的更近。
我們來看下面這張圖:
你能分清標題是屬于上面還是下面嗎?
當你了解了親密原則后,就知道為什么分不清,這也就是我們學習理論知識的原因,當我們看到錯誤的設計時,可以說出哪里不對,而不是憑感覺。
那這個原則如何運用到我們界面設計上呢?
看下圖:
上圖是簡書文章列表中的一條,我們在平時工作中也經常會遇到這種信息排版。首先我們需要清楚,上圖的內容有三個:上分割線、內容區和下分割線。此時我們可以判斷,內容區內的所有間距一定小于內容區與分割線的間距,因為根據親密性原則,有關聯的內容會離的更近,內容區的內容相對分割線來說,就是關聯性比較強的,所以它們的間距就會相對較小。
這樣的間距規律還會讓我們清晰的區分開每一條信息,不會導致信息干擾。
親密性原則是我們在界面排版中最常用的原則之一,大家一定要牢牢的記住并大量實踐,為我們后期的排版設計打下堅實的基礎!
二、對比原則
我們經常會遇到界面看著混亂的情況,但又不知道為什么,其實大部分情況都是因為界面內容對比不明顯而造成的。
例如下圖:
雖然上圖符合親密原則,但似乎看著還是有些凌亂,其中一個很重要的原因就是因為界面信息內容的對比不夠強烈,我們不知道該看哪里!
而我們來看一下今日頭條的信息排版:
你會發現重要信息和次要信息的大小對比非常強烈,使我們聚焦在主要信息(標題)上,這樣看著就不會那么散亂。
看完這個排版后再去解決上面那個散亂的問題,會不會更容易些呢?大家不妨自己嘗試排一下,這樣會讓你的印象更加深刻。
我們平時也要多去研究一些排版,好的排版你需要去分析它為什么好,不好的排版你需要分析它為什么不好,你能否排的更好,只有通過這樣不斷地刻意練習,你才能扎扎實實的前進。
回到正題,其實關于對比的方式還遠不止大小層面,還有顏色對比、粗細對比、形狀對比、疏密對比等等,所以大家在進行對比排版的時候,不妨多維度考慮,一定可以找到合適的解決方案。
三、平衡原則
平衡原則是界面排版布局的首要原則,大到整個官網,小到一張圖文,都需要我們對視覺平衡有一個良好的把控。
舉幾個例子:
看上圖,我們可以發現,圖片下方的文字是左對齊,為了達到視覺上的平衡,設計師將VIP 圖標和更新集數放在圖片右側。
再來看下圖:
我們會感覺整個頁面怪怪的,好像在向右上角傾斜,就是因為沒有遵循平衡原則,而當我們將最下方的按鈕移動到右側時,如下圖:
整個頁面看著就會平衡很多。
這里需要注意一點,一些藝術類的海報排版為了達到某些效果,可能會有意打破平衡,但那是特殊的平面藝術設計,而對于我們UI設計來說,在進行界面排版的時候,大多數情況還是要遵循平衡原則,這樣才能讓用戶感覺整個界面更加協調、舒服。
四、相似原則
我們需要對相似的內容賦予相同的屬性,例如同一級別的標題文字大小相同,相同顏色(如藍色等)的字體都可以點擊等等。
例如下圖:
上圖文字有兩處是藍色的,藍色使二者具有一定的相似性,而我們需要將相似性的內容賦予相同的屬性:可點擊。
相反我們看下圖:
雖然設計者為了統一和強調,將電話和地址都作成藍色,但如果電話可點擊,而地址不可點擊,就會給用戶產生困擾,以致于整個頁面的交互都存在一定的問題。這一點也是我們必須要注意的內容,在進行設計的時候不要犯這種低級的錯誤。
當然相似原則的因素也不只有文字顏色,還有背景色、方向、大小等等,有興趣的同學可以多多總結積累,大家一起交流。
以上就是今天分享的界面排版的前四個原則,下一期會將后面的內容補充完整。
希望你能夠多多練習,完善自己的排版知識體系,早日成為一名合格的資深視覺設計師。
作者:菜心(微信號:410628210 ?微信公眾號:菜心設計鋪),華為ITUX用戶體驗設計師(主視覺),3年工作經驗,參與華為Welink、3MS、連長社區等多個項目的用戶體驗設計工作。歡迎大家互相交流關注。
本文由 @菜心 原創發布于人人都是產品經理。未經許可,禁止轉載。
平衡原則的距離是一個失敗的例子,ui的設計最終要更好的服務用戶視覺瀏覽習慣和操作便利性,而不是為了美觀而美觀
平衡原則是不是也和視覺瀏覽的習慣有關系?
倒不如向大家推薦《這給大家看的設計書》,這本書排版講的很透徹。
寫給大家看的設計書
你說的情況,一般來說寬度應該不會太寬,如果頁面太寬,有向一個角落傾斜的情況,嚴重不平衡,一定要以平衡原則為第一位。
當然規矩也不是死的,特殊場景還要特殊考慮。