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

歡迎關(guān)注作者的微信公眾號：「菜心設(shè)計鋪」

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

一、親密原則

二、對比原則

三、平衡原則

四、相似原則

五、簡潔原則

六、封閉原則

七、情感原則

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

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

五、簡潔原則

5.1 數(shù)字簡潔

很多同學(xué)有個不好的習(xí)慣，就是執(zhí)行過程中不愛看圖層的位置和大小，尤其是位置，如果你的軟件沒有選擇像素自動對齊，這樣的壞毛病會導(dǎo)致位置的數(shù)值經(jīng)常出現(xiàn)小數(shù)點或者奇數(shù)，從而使整個界面元素的間距、位置都不夠規(guī)范，如下圖：

如果你的文件圖層有很多像左圖這樣繁瑣的數(shù)值，那就抓緊時間規(guī)范好自己的作圖習(xí)慣吧！

5.2 規(guī)則簡潔

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

而界面設(shè)計師也是一樣的，能用一個規(guī)則解決的問題，就盡量不要使用兩個，如下圖：

列表信息上下邊距（綠色和藍(lán)色的高度）就可以使用一個規(guī)則，如果你非要定為不同的距離，就會增加設(shè)計甚至開發(fā)的復(fù)雜性，從而造成不必要的資源浪費(fèi)。

再舉個例子

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

5.3 樣式簡潔

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

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

再比如下圖

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

六、封閉原則

什么是封閉原則呢？

我們還是先來看圖片：

上面這張圖，雖然已經(jīng)用間距分開兩個部分的內(nèi)容，但還是不夠清晰，這時候我們就可以使用封閉原則將二者區(qū)分開，如下圖：

將兩個部分的內(nèi)容用線框封閉起來后，就可以更容易的區(qū)分二者了。

而在我們的移動端界面排版時，最常使用的封閉表現(xiàn)形式就是“卡片”，用來區(qū)分各部分獨(dú)立的信息，如下圖：

還有

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

這樣，不僅可以讓我們傾向于橫向閱讀，而且可以更好的區(qū)分開每條獨(dú)立的信息內(nèi)容。

七、情感原則

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

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

即使你的人物形象再怎么生動，色彩再怎么舒服，最后的分?jǐn)?shù)也都是不及格，就像我們上學(xué)時的語文作文一樣，一旦你跑題了，什么都別說了，差評！

如何能傳遞出引起用戶共鳴的情感呢？答案當(dāng)然是換位思考，站在用戶的角度思考他們想要什么！

比如，用戶在網(wǎng)購，加載動畫是一位小哥在奔跑著送快遞，如下圖：

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

再比如，當(dāng)你在一款健身app堅持鍛煉了很久后，突然軟件給你一個這樣的反饋，如下圖：

你是不是很有成就感呢？甚至想發(fā)個朋友圈炫耀一下吧！

當(dāng)然，界面的調(diào)性、品牌感、配色等等，這些都是影響情感的因素，也都是我們在動手之前需要考慮的內(nèi)容，只有將這些因素考慮清楚后，才能保證讓你的設(shè)計方向正確，情感傳遞精準(zhǔn)。

總結(jié)

作為設(shè)計師，我們的根本職責(zé)還是解決工作上的問題，在實際工作中經(jīng)常遇到設(shè)計原則與其他方面的因素有沖突、或者某兩個設(shè)計原則互相矛盾的情況，這時候就需要我們?nèi)ズ侠淼奶幚砻?，讓工作順利的進(jìn)展下去。

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

歡迎關(guān)注作者的微信公眾號：「菜心設(shè)計鋪」

「想掌握排版四原則？3個海報設(shè)計教程滿足你！」

1. 《設(shè)計易容術(shù)！如何設(shè)計一張高品位高水準(zhǔn)的海報？》
2. 《設(shè)計易容術(shù)！如何設(shè)計一張高品位高水準(zhǔn)的海報（二）》
3. 《設(shè)計易容術(shù)！如何設(shè)計一張高品位高水準(zhǔn)的海報？（三）》

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計師學(xué)習(xí)平臺，專注分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程。
【特色推薦】
設(shè)計師需要讀的100本書：史上最全的設(shè)計師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計微博：擁有粉絲量180萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導(dǎo)航：http://hao.uisdc.com