UI設(shè)計中的小套路

　　如果你還在為界面不精致，層次亂糟糟，反復(fù)修改浪費時間，開發(fā)還原度很差等問題而煩惱，不妨來看看AAA教育郭老師總結(jié)的一些關(guān)于UI設(shè)計中的“小套路”。
 

　　UI設(shè)計是一個年輕的職業(yè)，起步較晚變化飛快。新的創(chuàng)意和玩法層出不窮，去年流行的風(fēng)格，今年可能已經(jīng)不見蹤影。作為一名UI設(shè)計師，要時刻保持危機意識，不斷進化自己的設(shè)計知識和理念。一邊探索，一邊沉淀是UI設(shè)計師的基本素養(yǎng)。
 

　　探索固然有趣，沉淀更需要毅力，今天我要跟大家聊的不是探索，而是在UI設(shè)計當(dāng)中的一些“小套路”。
 

　　字體字號的運用
 

　　1. 字體
 

　　UI設(shè)計師常用的字體有：蘋方、思源黑、蘭亭黑系列、華文黑體等，在字體選用方面看團隊習(xí)慣。
 

　　就還原度來講，如果你的團隊是用一套設(shè)計稿同時適配安卓和iOS，推薦用蘋方字體去做設(shè)計;如果是iOS端和安卓端都要做那就推薦iOS用蘋方體，安卓用思源黑體。由于蘭亭黑系列字號偏大，會導(dǎo)致設(shè)計稿和還原效果差別較大，不建議使用。

 

　　2. 字號
 

　　常用的字號(以iOS一倍圖為例)有：10pt、12pt、14pt、15pt、16pt、18pt。除了這些常用的字號，在實際設(shè)計過程中還要看具體情況。如果文字較多，分級又特復(fù)雜，就會涉及到多種字號混排，也相對考驗設(shè)計師對字體字號的運用。好的效果需要反復(fù)調(diào)試，差的效果就有很多共同點了。
 

　　(1) 不同層級的文字字號不能太接近

 

　　(2) 字重的合理利用
 

　　在閱讀大段文字的時候用細體或者粗體都會比較累，盡量選用標準字重的字體。

 

　　(3)字體字號的統(tǒng)一性原則
 

　　APP內(nèi)相同層級的內(nèi)容字體字號應(yīng)該保持一致，這也就需要在設(shè)計前期建立基本的設(shè)計規(guī)范。

 

　　顏色的運用
 

　　在一套設(shè)計規(guī)范里往往會給出一個品牌色，幾個輔助色，幾個黑白灰的顏色供我們使用，但真正要用好不見得那么容易。我們分開來看黑白灰和彩色。
 

　　1. 黑白灰
 

　　(1) 避免使用純黑色
 

　　純黑色在自然界中是幾乎不存在，在黑色中加一點點的色彩傾向，會讓界面看著更自然，包括文字的顏色也不要選用#000。
 

　　(2) 文字排版
 

　　文字顏色用不同的灰色拉開對比，達到把信息層級區(qū)分開來的目的。

 

　　2. 彩色
 

　　(1) UI設(shè)計里的631原則
 

　　631原則是指主色調(diào)：次要顏色：強調(diào)顏色=6:3:1。這個理論最早出現(xiàn)在室內(nèi)設(shè)計里，被譽為最完美的配色比例。
 

　　UI設(shè)計也一樣，品牌色不要超過整體頁面的30%。色彩比重太多讓界面顯得很躁，很容易造成秩序混亂。所以顏色應(yīng)該用在主要引導(dǎo)區(qū)域或者內(nèi)容區(qū)隔上。
 

　　(2) 漸變色小技巧
 

　　漸變色在當(dāng)下非常流行，如果你還在為調(diào)漸變色而煩惱不妨試試我的這個小方法。先確定好一個顏色，然后打開色盤，在這個顏色相鄰的左右各取一個顏色，然后把左側(cè)顏色的明度提高一點，把右側(cè)顏色的明度降低一點點。你會發(fā)現(xiàn)這樣調(diào)出來的漸變是最舒服的。

 

　　陰影的運用
 

　　陰影一直以來都是UI設(shè)計中不可或缺的部分。從之前的擬物風(fēng)格，UI設(shè)計師努力嘗試用高光陰影給用戶在二維界面里營造三維效果。即使在超扁平風(fēng)格盛行的當(dāng)下，UI設(shè)計師也沒有停止對陰影的鐘愛。
 

　　從視覺上看，陰影為二維界面增加了厚度，能讓用戶把界面和現(xiàn)實世界關(guān)聯(lián)起來，有助于用戶理解界面各個模塊的意義和它的交互方式。
 

　　1. 垂直偏移陰影效果更自然
 

　　現(xiàn)實中的光源不可能在你的眼睛那里，一般都會在偏上的位置，投影會在物體偏下的位置。

 

　　2. 用陰影分割比描邊分割更優(yōu)雅
 

　　用投影來做分割能讓界面更微妙，并且不會分散用戶的注意力，讓內(nèi)容更聚焦。

 

　　3. 陰影不一定是黑色的
 

　　一定要注意環(huán)境色對陰影的影響，這是學(xué)水粉的時候老師敲爛的知識點。

 

　　4. 彌散陰影
 

　　彌散陰影和普通陰影的區(qū)別是物體與光源的相對大小不同，如下圖：兩種陰影給觀者傳達的感覺也不太一樣，彌散陰影特別像臺燈下看一顆寶石，給人一種更精致的感覺。當(dāng)然并不是所有內(nèi)容都適合做彌散陰影，我的經(jīng)驗來看在做精致圖標或者小控件的時候比較適合。

 

　　留白的運用
 

　　設(shè)計中的留白不僅限于白色，還有空白的意思，留白是指某個區(qū)域內(nèi)是空的，沒有別的裝飾和元素。正確的留白能讓界面更有節(jié)奏，層級更加清晰，閱讀起來更輕松，同時也會讓界面更精致。
 

　　1. 文字1.5倍行間距
 

　　給讀者最舒服的閱讀體驗。

 

　　2. 親密關(guān)系法
 

　　關(guān)聯(lián)大的元素之間留白小一些，關(guān)聯(lián)小的元素之間留白大一些。在做復(fù)雜界面的時候不要立馬去排，不要太去扣細節(jié)，這樣很容易陷入到死胡同里，來回推倒重做浪費大量時間。
 

　　如果你也遇到過這樣的問題，不妨試試我這個方法，先用灰塊去處理，按照元素的親密關(guān)系來組合界面。如下左圖先把元素間關(guān)系疏離清楚，再把真實數(shù)據(jù)帶入進去看效果對不對，再對細節(jié)進行處理，整個界面基本就可以出爐了。

 

　　3. 元素大小適中
 

　　合適的元素大小讓界面會呼吸。

 

　　好了，我就寫到這吧，其實UI設(shè)計中還有很多很多小套路，我這里也就拋磚引玉一下，剩下的等待你去發(fā)現(xiàn)啦! 因此，您現(xiàn)在已經(jīng)了解了與UI設(shè)計師的工作相關(guān)的主要技能。如果您想了解更多信息，請訪問AAA教育，包含有關(guān)在該領(lǐng)域工作的更多相關(guān)文章。