靜電說：新手在學習UI設計過程當中，一般會陷入到一個誤區中，就是把UI設計當算術題來作。好比常常會有同窗問：UI界面中的字號最小是多少？UI界面模塊中的間距有沒有什麼規則能夠遵循？是否是必定要4的倍數？UI界面左右留白多少才合適，有規範嗎？按鈕的圓角多少才合適？
瀏覽器
先說結論：UI設計過程當中或多或少會有一些經驗數值，但經驗數值僅僅是經驗數值，並非公式，不能生搬硬套。而大多數狀況下，則沒有「經驗值」一說。設計不只僅是理性的，也是感性的。咱們要從兩個方面入手來進行學習。下面來解答幾個常見問題：微信
Q：字號必定要是2的倍數嗎？
app
A：關於2的倍數這一問題，大部分狀況下是一種約定俗成的結論。在使用PS作設計的時代，因爲咱們作的UI設計稿都是2倍圖或者3倍圖，因此使用2的倍數會更方便於開發工程師換算，好比你在2倍圖下設定一個字體大小爲24px，開發工程師在開發過程當中要進行換算，除以2，獲得的數值就是12pt。最終，這個12pt就寫在了代碼裏。可是若是你設置爲23pt，很差意思，除起來就有小數點了，最終爲11.5pt。爲了不出現小數點，因此最終就約定了字號最好爲2的倍數更方便一點。（你們想一想，在三倍圖下，2的倍數會怎樣？）
編輯器
可是隨着sketch等矢量UI工具的普及，你們廣泛開始使用1倍圖來進行設計，那麼此時，無論你設置多大的字號，開發工程師最終設置的代碼也是同樣的。字體爲12px，那麼開發就寫12pt，整個換算是1：1進行的。因此此時你無論用任何數值來進行字號設置，都沒有問題。（典型的例子爲微信：微信朋友圈的刪除按鈕爲13pt，並非偶數。）工具
其實咱們仔細觀察會發現，在UI設計過程當中，用多少號字號的都有，很多應用從9pt，11pt，12pt，13pt一直日後都會用到。無非是看設計師有沒有這個心理潔癖必定要用偶數了。
佈局
一方面是約定俗成，一方面是實際狀況，你們要根據實際狀況來使用字號，切不可生搬硬套公式。
學習
Q：圖形尺寸最好爲偶數且爲整數嗎？字體
A：是的。這就涉及到一個問題，就是對齊了。 好比你設置一個直徑爲105的正圓形，而後在裏邊嵌套一個60的圓，此時你發現這兩個圓沒法居中對齊了（在像素進度爲1的狀況下）。以下圖。flex
此種狀況下，建議你們用偶數尺寸，會更好的進行對齊操做。固然，若是你對小數點不敏感的話，也能夠嘗試有小數點的數值，最終也會對齊。可是，若是此時你要導出爲位圖的話，那麼位圖邊緣可能就有點模糊，不太銳利了。因此，涉及到圖標等內容的時候，偶數是一個不錯的選擇。
Q：UI中的字體要加字間距嗎？
A：沒有特別的狀況下，強烈不建議在字體中加入字間距屬性，通常狀況下保持默認便可。特別是列表等等區域，加入過大的字間距會致使模塊比較散，不太美觀。以下圖，右側爲加入字間距的模塊，左側爲未加入行間距和字間距的模塊。右側明顯過散。
Q：成段文本要特別設置行間距嗎？
A：無特殊狀況下，不建議。通常保持系統默認便可。這裏有個經驗數值，行間距從1.2到2倍都是比較理想的。可是要根據設計風格具體處理。太高的行間距一樣會讓模塊難以辨認。
Q：模塊之間通常要用4的倍數嗎？
A：嗯？並無據說過這些規則。模塊之間的間距要根據具體設計風格來定，固然，若是你用偶數的話，作算式題的時候會更好對齊一些。特別是橫向排列的模塊。可是縱向排列的模塊則沒有這個要求。如何解決？請參照本文下方的設計心理學知識。
Q：手機界面左右留白有規定值嗎？
A：沒有。這個只是你們的一個經驗值，通常來講，頁面左右留出必定間距會讓頁面有呼吸感，不至於太擠。這個經驗值，我我的的經驗值，最小留白爲8-10，最大隨意，跟隨設計風格走。以下圖所示，蝦米音樂強調個性，留白偏大，達到了20pt，而淘寶內容更豐富，強調內容呈現，因此只有9pt。
柵格化佈局是萬能藥嗎？
其實不少同窗問到的問題都源於以前的一個理論，那就是柵格化佈局。所謂柵格化佈局，實際上是一種設計方法，將頁面等分爲N個不一樣的橫豎模塊，每一個模塊佔用N個單位，從而讓設計更加規整。
可是這種柵格化佈局在比較窄的移動端上有點捉襟見肘（以前主要是爲網頁設計而準備的），不少時候嚴格按照柵格化佈局作出來的設計也存在諸多的視覺問題。靜電以前曾翻譯過一篇在移動端UI上使用柵格化設計的文章，最終做者作出的設計已經沒法自圓其說。因此，對於這種設計方式，咱們能夠選擇在某些狀況下使用便可，沒有必要徹底照搬。
感性VS理性，正確選擇
那麼，又回到了這個問題。對於初學者，真的沒有規律可循了嗎？真的沒有所謂的「公式」，讓咱們去死記硬背嗎？真的沒。
請記住，設計是感性和理性相交融的產物，特別是對於UI設計而言。除了上文說的經驗值，咱們不妨多從設計心理學角度來去理解設計，多看多作。切勿徹底照搬公式，這樣才能更快的成長。我本身的作法，先感性再理性，設計前期和設計中期感性，整理設計規範的時候理性。注意讓頭腦在兩種模式之間切換。若是前期過度理性，一切套公式，那麼你的設計稿可能就沒有視覺張力和創意。同理，若是全程感性，後期不進行理性整理，那麼設計就缺乏規範可言。隨意，規範，樣式，和元件等內容，我通常會放在交付設計稿以前進行。
轉回文章開頭有同窗問到的問題，模塊之間的間距有多少合適呢？我認爲能夠用設計心理學中的格式塔原理-鄰近性原理來考量：接近的東西會被當作是一組，以下圖：
有想回看設計心理學讀書會的同窗
能夠直接在公衆號聊天窗口回覆關鍵詞
讀書
查看上次的公開課視頻內容
本文分享自微信公衆號 - 靜Design（JingDesign91）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。