「四大設計原則」在排版中的應用
排版中的四大設計原則
在前幾期的推送中，我向大家推薦過一本非常實用的書，叫《寫給大家看的設計書》，作者是 RobinWilliams，書中講到了四大設計原則：對齊，親密性，對比，一致性，這四大原則可以說是排版設計中的黃金法則，不論多麼複雜的界面，用這幾個原則都能輕鬆搞定。在接下的教程中我會做一張名片，看看在設計這張簡單的名片中是如何運用各個原則的。
首先我們都知道，名片是標示姓名，職位，所屬公司和聯繫方法的紙片，所以名片中首先要有姓名，我的網名是 NEVERGG。我的職位是設計師，也就是 Designer。郵箱是 fzhang@leanclou.com，網址是 https://dribbble.com/Nevergg，電話是 000-000-0000，最後為了裝逼可以加一句座右銘 Be the greatest,or nothing. 這就應該是一張名片中的所有信息了，我把這些信息隨便排列了一下，如下如：
最基本的原則，對齊原則
對齊原則是最基本也是最簡單的一個原則：頁面上的所有元素應該是遵循秩序的，而不是隨便放置的，有一條看不見的線將它們約束起來。對齊的方式有三種，居中對齊，居左對齊，居右對齊，在一個界面中最好只有一種對齊方式，也就是要麼居中，要麼居左，要麼居右。好了，我們應用對齊原則，將所有元素都居中：
是不是比居中對齊顯得更「專業」？
親密性原則，最重要的設計原則
在小時候學中國畫的時候，老師說過這樣一句話：密不通風，疏可跑馬。這句話是什麼意思呢？就是說在畫面密集的區域要密得連風都吹不進去，畫面空的地方，可以容得下一匹馬隨意奔跑。
我們做設計的時候也一樣，有些大神愛說什麼界面的節奏感，韻律感，我們總感覺他是在裝逼，但其實真的是這樣的，做界面要該緊湊的地方緊湊，該留白的地方留白。
親密性原則是幹什麼的？親密性原則就是控制各個元素之間的距離的。在界面設計中，關係越緊密的元素離得越近，這就是親密性原則。具體在這張名片中，我的名字和我的職位都是我的屬性，關係很緊密，它們倆應該離得很近。而我的電話，我的網址和我的郵箱都是我的聯繫方式，它們三個應該在一起離得更近。座右銘和他們都沒什麼關係，所以拿出來單獨排列。按照親密性原則重新排列如下：
對比原則，突出重要的內容
在界面設計中，需要我們突出重要的內容，讓人第一眼就看到。一般情況下，如果一個元素越重要，那麼它就越大，字體就越粗，顏色就越明顯。假如別人把你的名片和其他人的名片放在一起，想要找到你的話肯定要找你的名字，所以在名片中，最重要的是名字，職位次之，而聯繫方式作為附加信息往往是更次要的。我們根據對比原則把這些元素的大小按重要程度重新排列：
在上圖中，最重要的名字和職業，我用了最大的字體是 16 像素。次要的聯繫方式我用了 12 像素的字體，座右銘雖然也不重要，但是作為一句話，為了提高可讀性我用了 14 像素。
但是這樣的對比度還遠遠不夠，聯繫方式雖然大小變小了，但是顏色還是太亮，我把它們改成百分之 40 的透明度，這樣名字就會顯得更亮更突出。還有個問題是 Designer 和名字一樣粗，但是它其實沒有名字重要，所以我要把它變細來突出名字的重要性，如下圖：
一致性原則
最後一個原則是一致性原則，在設計中重複的元素要保持一致。比如重複出現的按鈕要一樣大，重複出現的字體要相同，重複出現的間距要相同。
在名片里，出現了多種不同的字體，這是錯誤的，應用一致性原則我們需要把所有字體統一。有些元素是首字母大寫，有些是全部字母都大寫，我們需要都統一成首字母大寫。（聯繫方式除外，一般聯繫方式都是全小寫）
最重要的是間距，在這裡我們可以自己制定一個規則，我規定最小的間距是 8 像素，其他所有間距都是 8 的倍數。下圖中，親密性最緊密的元素間距我用 8 像素，親密性遠的我用 5 * 8 = 40 像素。然後把它們打包成組，整體離左側邊界也是 40 像素，最後豎直方向居中於畫布:
在運用了這四大設計原則後，一張嚴謹又美觀的名片很輕鬆得就被我們設計了出來，最重要的是我們設計的界面有了理論的支持，再碰到要做界面的時候不會沒有頭緒無從下手了。其實我們 UI 設計師在做複雜的頁面的時候，也是由這些簡單的頁面組合而成的，只要用好這四個原則，再複雜的界面也能做到心中有底。
怎麼複雜呢？如果想要細化，思考後可以發現座右銘和其他內容好像沒什麼關係，所以根據親密性原則可以把這句話放到名片背面或者旁邊。類似這樣：
或者這樣？再畫點三角形裝飾一下，然後添加些高斯模糊，都可以，自由發揮。
今天的教程就到這裡了，之所以寫這篇教程，是因為很多同學精通了超寫實圖標，精通了扁平風格插畫，但是在界面還有排版這些 UI 設計師工作中最常用的地方卻總是沒有頭緒，或者做設計全靠感覺，其實我們在排版的時候是有規律可循的，按照前人總結的經驗會發現做界面其實很簡單。
推薦閱讀：