自學體系第二課!寫給新人設計師的界面排版原則(下)

上一期大家了解了界面排版的前四個原則,今天接著上一期的內容將后面三個原則也分享出來。

歡迎關注作者的微信公眾號:「菜心設計鋪」

我們來先來回顧一下大綱:

一、親密原則

二、對比原則

三、平衡原則

四、相似原則

五、簡潔原則

六、封閉原則

七、情感原則

回顧前四條原則請戳這里:寫給新人設計師的界面排版原則(上)

今天我們從第五條開始講述。

五、簡潔原則

5.1 數字簡潔

很多同學有個不好的習慣,就是執行過程中不愛看圖層的位置和大小,尤其是位置,如果你的軟件沒有選擇像素自動對齊,這樣的壞毛病會導致位置的數值經常出現小數點或者奇數,從而使整個界面元素的間距、位置都不夠規范,如下圖:

自學體系第二課!寫給新人設計師的界面排版原則(下)

如果你的文件圖層有很多像左圖這樣繁瑣的數值,那就抓緊時間規范好自己的作圖習慣吧!

5.2 規則簡潔

如果你有平面設計的經驗,你會很清楚,一張平面設計的字體種類不宜太多、對齊方式不宜太多.....因為規則太過繁瑣會讓你的設計變得復雜,甚至臃腫不堪。

而界面設計師也是一樣的,能用一個規則解決的問題,就盡量不要使用兩個,如下圖:

自學體系第二課!寫給新人設計師的界面排版原則(下)

列表信息上下邊距(綠色和藍色的高度)就可以使用一個規則,如果你非要定為不同的距離,就會增加設計甚至開發的復雜性,從而造成不必要的資源浪費。

再舉個例子

自學體系第二課!寫給新人設計師的界面排版原則(下)

看上圖,上一期已經講述過了,由于親密原則,我們知道上下間距(綠色高度)一定大于內容區間距(紫色高度),但是為了規則的簡潔,內容區的所有間隔(紫色高度)可以采用同一個規則,而上下間距(綠色高度)也可以相同,這樣五個距離,我們僅僅只用了兩個規則就解決了問題,并且不失美感。(當然如果內容區內容需要明顯區分,你也可以采用不同間距)

5.3 樣式簡潔

今年有一個流行趨勢是“無線化分隔”。將分隔線去掉,這就一種樣式上的簡潔,如下圖:

自學體系第二課!寫給新人設計師的界面排版原則(下)

國際版QQ概念稿、今日頭條的評論頁面都采取了這種簡潔的分隔樣式,這樣的排版方法使整個頁面看著輕量、干凈、大氣,更加突出內容,甚至能夠增加用戶的欣賞時間。

再比如下圖

自學體系第二課!寫給新人設計師的界面排版原則(下)

我們可以很容易看出左圖是比較舊版的樣式,一個簡單的輸入框由多少種元素組成?有背景圖、透明蒙版、白色矩形框和描邊。而右圖是目前比較流行的簡潔樣式,一條線就解決了輸入框這個功能問題,并且美觀大氣。

六、封閉原則

什么是封閉原則呢?

我們還是先來看圖片:

自學體系第二課!寫給新人設計師的界面排版原則(下)

上面這張圖,雖然已經用間距分開兩個部分的內容,但還是不夠清晰,這時候我們就可以使用封閉原則將二者區分開,如下圖:

自學體系第二課!寫給新人設計師的界面排版原則(下)

將兩個部分的內容用線框封閉起來后,就可以更容易的區分二者了。

而在我們的移動端界面排版時,最常使用的封閉表現形式就是“卡片”,用來區分各部分獨立的信息,如下圖:

自學體系第二課!寫給新人設計師的界面排版原則(下)

還有

自學體系第二課!寫給新人設計師的界面排版原則(下)

上面這張列表,由于間隔和顏色的原因,導致我們更傾向于縱向閱讀,這時候我們也可以使用封閉原則,將內容封閉起來(每隔一條信息使用深色背景),如下圖

自學體系第二課!寫給新人設計師的界面排版原則(下)

這樣,不僅可以讓我們傾向于橫向閱讀,而且可以更好的區分開每條獨立的信息內容。

七、情感原則

如何評價一個設計稿的好壞?我覺得首先需要判斷傳遞出來的情感是否正確,因為情感是前期的一個方向與基調,如果這個基調有誤,及時你設計的再怎么漂亮,也都是徒勞。

比如我想做一個空數據頁面,那就需要傳遞出一種失望、傷心的情緒,而如果你給我一張下面這樣的圖:

自學體系第二課!寫給新人設計師的界面排版原則(下)

即使你的人物形象再怎么生動,色彩再怎么舒服,最后的分數也都是不及格,就像我們上學時的語文作文一樣,一旦你跑題了,什么都別說了,差評!

如何能傳遞出引起用戶共鳴的情感呢?答案當然是換位思考,站在用戶的角度思考他們想要什么!

比如,用戶在網購,加載動畫是一位小哥在奔跑著送快遞,如下圖:

自學體系第二課!寫給新人設計師的界面排版原則(下)

我覺得用戶都沒有辦法不喜歡!

再比如,當你在一款健身app堅持鍛煉了很久后,突然軟件給你一個這樣的反饋,如下圖:

自學體系第二課!寫給新人設計師的界面排版原則(下)

你是不是很有成就感呢?甚至想發個朋友圈炫耀一下吧!

當然,界面的調性、品牌感、配色等等,這些都是影響情感的因素,也都是我們在動手之前需要考慮的內容,只有將這些因素考慮清楚后,才能保證讓你的設計方向正確,情感傳遞精準。

總結

作為設計師,我們的根本職責還是解決工作上的問題,在實際工作中經常遇到設計原則與其他方面的因素有沖突、或者某兩個設計原則互相矛盾的情況,這時候就需要我們去合理的處理矛盾,讓工作順利的進展下去。

遵循原則是好事,但是如果被規則限制死那就不是什么好事了,特殊場景需要特殊處理,不要過度的陷入規則之中而讓自己失去創新的能力,設計原則并不是一成不變的,在我們前行的路上,你也可以多總結,多積累,最后沉淀出屬于你自己的一份設計原則!

歡迎關注作者的微信公眾號:「菜心設計鋪」

自學體系第二課!寫給新人設計師的界面排版原則(下)

「想掌握排版四原則?3個海報設計教程滿足你!」

  1. 《設計易容術!如何設計一張高品位高水準的海報?》
  2. 《設計易容術!如何設計一張高品位高水準的海報(二)》
  3. 《設計易容術!如何設計一張高品位高水準的海報?(三)》

【優設網 原創文章 投稿郵箱:yuan@uisdc.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺,專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書:史上最全的設計師圖書導航:http://hao.uisdc.com/book/。
設計微博:擁有粉絲量180萬的人氣微博@優秀網頁設計 ,歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航:全球頂尖設計網站推薦,設計師必備導航:http://hao.uisdc.com

收藏 33
點贊 2

復制本文鏈接 文章為作者獨立觀點不代表優設網立場,未經允許不得轉載。