有時(shí)候我們做出來(lái)的設(shè)計(jì)，有種說(shuō)不出的別扭，這可能是設(shè)計(jì)細(xì)節(jié)上出現(xiàn)紕漏。設(shè)計(jì)細(xì)節(jié)是UI設(shè)計(jì)上的一些規(guī)范，雖然規(guī)則是可以打破的，可以不遵循規(guī)則，大膽創(chuàng)新。但大多數(shù)時(shí)候，遵循設(shè)計(jì)規(guī)范可以讓我們的設(shè)計(jì)符合視覺(jué)美感。設(shè)計(jì)達(dá)人今天和大家分享的這篇文章，借喻武林小說(shuō)的口訣風(fēng)格，聊聊如何提升我們的設(shè)計(jì)細(xì)節(jié)，讓設(shè)計(jì)更加精致。希望這些口訣技巧能夠化為大家的內(nèi)功，在以后的設(shè)計(jì)中潛意識(shí)地用到。

大家好，很久沒(méi)寫(xiě)文章了。之前做過(guò)一次團(tuán)隊(duì)分享，現(xiàn)在整理出來(lái)分享給大家交流和探討。

今天我們來(lái)聊一聊設(shè)計(jì)細(xì)節(jié)，從視覺(jué)設(shè)計(jì)的角度，總結(jié)了一些提升設(shè)計(jì)細(xì)節(jié)的方法。希望對(duì)于一些設(shè)計(jì)師有所幫助。個(gè)人見(jiàn)解，如有雷同，純屬巧合。

開(kāi)門(mén)見(jiàn)山，那么我們可以從哪些地方提升設(shè)計(jì)的細(xì)節(jié)呢？

一本“武林秘籍”一共為“九式”。雖然是設(shè)計(jì)的一些基本功，但容易被忽略。

掌握好這些，在平時(shí)設(shè)計(jì)中，多加勤練，多思考，你的設(shè)計(jì)就會(huì)更加細(xì)致~

第一式：塑“形”

一切藝術(shù)都具有形式美；美的基本因子由“形”、“色”、“質(zhì)”組成。

設(shè)計(jì)也是一樣。首先我要講的是設(shè)計(jì)中的“形”，同時(shí)我個(gè)人認(rèn)為“形”是圖形設(shè)計(jì)中最重要的一個(gè)因子，“形”的設(shè)計(jì)好壞對(duì)于一個(gè)作品起著至關(guān)重要的作用。

這里所說(shuō)的“形”可以理解為圖形的輪廓、線稿、造型等。

“形”的控制在設(shè)計(jì)過(guò)程中需要反復(fù)思考和推敲，比如圖標(biāo)設(shè)計(jì)中的對(duì)其“識(shí)別性”的要求和 設(shè)計(jì)中常用的“尺規(guī)幾何做圖法”都是對(duì)“形”細(xì)節(jié)的嚴(yán)格把控。在插畫(huà)設(shè)計(jì)中，人物或物質(zhì)形態(tài)的造型和節(jié)奏感也很重要。

“形”要準(zhǔn)確，也要有“個(gè)性”。

打個(gè)比方，我們要畫(huà)一個(gè)圓角矩形，一般都會(huì)在矩形的基礎(chǔ)上直接倒個(gè)圓角。

很普通對(duì)不對(duì)？是否可以針對(duì)這個(gè)圓角打磨更多的細(xì)節(jié)呢。

我們可以再給這個(gè)矩形進(jìn)行處理或者換另一種畫(huà)法，讓他具有一些膨脹感或更加飽滿，變得那么“不普通”。這樣的圓角矩形是不是更耐看了點(diǎn)呢。

（別小看了這圓角矩形，蘋(píng)果圖標(biāo)的圓角矩形還注冊(cè)了專利呢）

這是一組多年前OPPO手機(jī)主題大賽的參賽作品，過(guò)了那么多年，依然很喜歡。

第二式：控“色”

有了“形”，我們?cè)趤?lái)講講“色”。

經(jīng)常有“甲方爸爸”說(shuō)“這個(gè)顏色有點(diǎn)丑額！換個(gè)顏色。”其實(shí)我認(rèn)為，沒(méi)有一個(gè)顏色是丑的顏色。排除一些個(gè)人感受和喜好外，造成這樣“丑”的局面多半是因?yàn)樯蚀钆浜蜕赎P(guān)系之間出了問(wèn)題。

雖然網(wǎng)上有很多色彩搭配工具，但是最好的工具是設(shè)計(jì)師的“感覺(jué)”，也可以說(shuō)是設(shè)計(jì)師長(zhǎng)期的積累和訓(xùn)練的一種能力。色彩搭配有方法可尋，但也不是完全固定的，就比如我們常說(shuō)的“紅配綠”也可以很高級(jí)。

我們?cè)囍o剛才的圓角矩形添加個(gè)顏色，可以是純色，也可以是漸變色。但需要注意的是在做漸變的時(shí)候，需要注意明度、飽和度以及冷暖的變化，使得顏色過(guò)渡自然。

這是一組通過(guò)色彩漸變表現(xiàn)小動(dòng)物結(jié)構(gòu)的圖形作品。基本是通過(guò)控制色彩的幾個(gè)常用要素：色相、飽和度、明度來(lái)實(shí)現(xiàn)的。

第三式：添“質(zhì)”

設(shè)計(jì)可創(chuàng)造虛擬抽象，也可還原真實(shí)。除了“形”，“色”，設(shè)計(jì)中“質(zhì)”的表達(dá)也很重要。比如最早的擬物風(fēng)格圖標(biāo)的流行到現(xiàn)在的極簡(jiǎn)化風(fēng)格。這里要說(shuō)的是，由繁到簡(jiǎn)并不是“去質(zhì)”，“無(wú)質(zhì)”也是一種“質(zhì)”的表現(xiàn)形式。

很喜歡以前錘子手機(jī)的圖標(biāo)，盡可能的還原真實(shí)，有豐富的細(xì)節(jié)，可以盯著看好久。扁平化的流行也讓UI設(shè)計(jì)師的門(mén)檻變得越來(lái)越低，對(duì)于繪畫(huà)的要求也沒(méi)有那么高了。

一般“添質(zhì)”有兩種方法：添加紋理（材質(zhì)）和添加光影質(zhì)感。但是并不是一昧地追求“裝飾”，避免過(guò)度設(shè)計(jì)。

這是我比較喜歡的兩位設(shè)計(jì)師的作品，喜歡的同學(xué)感受下“質(zhì)”感。左圖是噪點(diǎn)插畫(huà)，右圖是偽3D質(zhì)感（本來(lái)想放自己作品的，還是大佬的作品更具說(shuō)服力吧）

剛講了三個(gè)基本要素“形”“色”“質(zhì)”中提升細(xì)節(jié)的一些要點(diǎn)。

我們總結(jié)一下：

塑“形”：形要準(zhǔn)確，也要有個(gè)性。“形”是第一位的，在做設(shè)計(jì)時(shí)“形”的打磨需要更多的時(shí)間，“形”需要美感，也需要“個(gè)性”。

控“色”：明度冷暖，過(guò)渡自然。色彩能給人帶來(lái)更強(qiáng)的視覺(jué)沖擊，記住沒(méi)有一個(gè)顏色是“丑”的，處理好顏色的色相、明度、飽和度，以及顏色之前的關(guān)系。

添“質(zhì)”：賦予質(zhì)感，注意光影。“質(zhì)”是錦上添花。一般方法以“添加紋理”和“添加光影”為主。“無(wú)質(zhì)”也是“質(zhì)”的一種表現(xiàn)形式哦。

第四式：留“白”

接下來(lái)我們講一講“留白”。

正所謂“此處無(wú)物勝有物”，“留白”是設(shè)計(jì)中常用的手法，這里說(shuō)說(shuō)的“白”并不是白色或空無(wú)一物的意思；留白可以讓你的主題更突出，畫(huà)面更有空間感和通透感。

那如何留白呢~~我們先來(lái)看張圖，

一個(gè)黑色小圓球，放在一堆集合圖形中。你能快速的定位到小圓球嗎？人的視覺(jué)焦點(diǎn)是分散的，甚至?xí)凰磉叺膸缀螆D形影響，始終沒(méi)辦法聚焦，看到的是一堆凌亂的圖形。

在我們平時(shí)設(shè)計(jì)過(guò)程中一樣，設(shè)計(jì)是應(yīng)該是克制的，需要做好“減法”。

我們可以通過(guò)“減法”來(lái)更加突出小圓球的視覺(jué)位置。

1：“減少干擾”：我們可以把小圓球身邊的雜亂的圖形弱化。

2：“去除”：把不相干的幾何圖形元素去掉。

充分發(fā)揮留白的作用，體現(xiàn)其內(nèi)在價(jià)值，才能在突出主題、提升內(nèi)容美感的同時(shí)，給觀者創(chuàng)造一個(gè)較為輕松、愉快的氛圍。

這是蘋(píng)果官網(wǎng)的截圖，大家感受下，其實(shí)畫(huà)面主要是文字，產(chǎn)品圖，沒(méi)有過(guò)多的裝飾，但是“浴霸”讓你過(guò)目難忘~

留白同時(shí)還能延展想象和視覺(jué)空間感，具有一定的藝術(shù)性。我國(guó)的水墨畫(huà)也常常有留白的應(yīng)用。

說(shuō)了這么多，不要產(chǎn)生一個(gè)誤區(qū)：留白是萬(wàn)能的！其實(shí)并不是所有的都需要大面積的留白，比如：有氣氛類的活動(dòng)、節(jié)日、功能性很強(qiáng)的頁(yè)面等等。靈活運(yùn)用才是王道。

第五式：層次

我們?cè)谠O(shè)計(jì)中經(jīng)常會(huì)提到“層次”，那“層次”如何而來(lái)呢？

一般情況，“層次”需要通過(guò)建立元素或內(nèi)容之間的秩序，比如層級(jí)關(guān)系、主次關(guān)系、顏色關(guān)系、位置關(guān)系等等。

設(shè)計(jì)常用的方法：“對(duì)比”，即強(qiáng)調(diào)和弱化，元素間形成關(guān)系差；“歸納”：對(duì)相近元素的整理和不同元素的區(qū)分。

對(duì)于文字排版而言，比如說(shuō)報(bào)紙或雜志一般都會(huì)有明確的層次：標(biāo)題（一級(jí)）、副標(biāo)題（二級(jí)）、正文（三級(jí)），這是很典型的三級(jí)排列。不同的層次可以更好地向讀者展示哪些是重要信息。

這是一份分享的培訓(xùn)通知，左邊經(jīng)過(guò)一定的內(nèi)容提取，去除了一些沒(méi)必要的內(nèi)容，整理文章內(nèi)容，建立元素之間的次序，突出分享主題，會(huì)不會(huì)更加吸引你呢。

第六式：對(duì)齊

“對(duì)齊”是指對(duì)于頁(yè)面的各元素之間建立排列次序；元素排列要有規(guī)律。

就像大家平常收拾房間一樣，各個(gè)物件擺放整齊。我覺(jué)得這是一個(gè)設(shè)計(jì)師最基本的要求之一，但常常被一些設(shè)計(jì)師所忽略。

在設(shè)計(jì)過(guò)程中，組織和建立元素間的排列次序關(guān)系非常重要。

一般設(shè)計(jì)工具中都有一些自動(dòng)對(duì)齊工具，常用的對(duì)齊方式有“左對(duì)齊”、“居中對(duì)齊”、“右對(duì)齊”等。

請(qǐng)時(shí)刻檢查我們的對(duì)齊！請(qǐng)時(shí)刻檢查我們的對(duì)齊！請(qǐng)時(shí)刻檢查我們的對(duì)齊！

找了一些電影海報(bào)，大家感受下這三種對(duì)齊方式的在排版設(shè)計(jì)中的魅力。當(dāng)然，在建立良好的次序的前提下，有時(shí)候也會(huì)有多種對(duì)齊方式混合使用的情況。

但是我們要小心，有時(shí)候在某種情況下，自動(dòng)對(duì)齊并不適用。比如一些文字、符號(hào)對(duì)齊和一些特殊圖形上。需要用過(guò)視覺(jué)比重或其他的一些方法手動(dòng)調(diào)整。

思考題：上面的播放按鈕，三角形與圓形的對(duì)齊方式，大家覺(jué)得哪種方式更優(yōu)呢~~

第七式：拒絕“默認(rèn)字體”

關(guān)于“字體”的使用一直是我們?cè)O(shè)計(jì)師的痛，一是涉及到版權(quán)問(wèn)題，很多商用的字體需要授權(quán)；二是“默認(rèn)字體”尤其是中英文數(shù)字標(biāo)點(diǎn)等一起的時(shí)候，會(huì)出現(xiàn)一些意外的情況。

這是Sketch里蘋(píng)方字體打的一段文字，數(shù)字和中文字、標(biāo)點(diǎn)符號(hào)之間有明顯的問(wèn)題。

這個(gè)時(shí)候，我們需要人工介入，對(duì)數(shù)字和標(biāo)點(diǎn)符號(hào)進(jìn)行調(diào)整，從而保證整體的平衡（如圖）。

作為一個(gè)設(shè)計(jì)師，同時(shí)也需要一點(diǎn)點(diǎn)“造字”的能力，為了營(yíng)造一些畫(huà)面的氣氛，尤其是運(yùn)營(yíng)設(shè)計(jì)中主題字體設(shè)計(jì)可以很大幅度提升活動(dòng)質(zhì)量。

造字雖然涉及到時(shí)間成本，會(huì)花費(fèi)一定的時(shí)間和精力，但從效果和質(zhì)量上來(lái)看，還是很有必要的。

第八式：精選圖片

設(shè)計(jì)師們離不開(kāi)圖片素材。圖片素材一般通過(guò)一些素材網(wǎng)站上挑選，也可以自行拍攝。但是網(wǎng)上找的或者自己拍攝的都會(huì)有一些問(wèn)題，這個(gè)時(shí)候修圖的能力就非常重要了。

如果用到一些食物圖片素材，務(wù)必選擇一些質(zhì)量較好的圖片或者攝影圖片。右圖是不是讓你更有食欲呢。

設(shè)計(jì)師不僅要學(xué)會(huì)精選圖片，更要學(xué)會(huì)如何精修圖片。左圖是修圖前，左圖是修圖后。一般對(duì)于產(chǎn)品精修上會(huì)更加注重細(xì)節(jié)的打磨。修圖后的啤酒是不是讓你更想來(lái)一杯呢~~

第九式：統(tǒng)一原則

細(xì)節(jié)的打磨不光是局部的打磨，最終會(huì)回到整體的把控上。

我們來(lái)看一組頭像排列的案例，乍看沒(méi)什么問(wèn)題，但是仔細(xì)看會(huì)發(fā)現(xiàn)，每個(gè)頭像的人物的比例關(guān)系和視線都不太統(tǒng)一，我們還可以做的更好。

我們來(lái)看下優(yōu)化后的效果，每個(gè)頭像的人物的比例關(guān)系和視線基本統(tǒng)一。

統(tǒng)一意味著協(xié)調(diào)一致，元素間的大小、重量、間距、方向、對(duì)齊、色彩、形狀、布局、風(fēng)格等同樣也要遵循一定的次序和規(guī)律。

我們?cè)賮?lái)看一組圖片，左圖給人的感覺(jué)比較雜亂，羽毛和球體跟產(chǎn)品本身不夠明顯，顏色上也比較突兀，所以會(huì)給人一種不夠聚焦產(chǎn)品甚至雜亂的感覺(jué)。

右圖在形態(tài)、色彩、屬性等方面的統(tǒng)一化處理，加強(qiáng)了每個(gè)單獨(dú)視覺(jué)元素之間的呼應(yīng)，使得畫(huà)面更整體舒適！

前面主要講了“形、色、質(zhì)”在細(xì)節(jié)打磨上的重要性，接著講到了版式設(shè)計(jì)中常用的一些細(xì)節(jié)的處理方法：“留白”、“層次”、“對(duì)齊”，最后提了幾點(diǎn)注意事項(xiàng)：拒絕“默認(rèn)字體”、“精選圖片”、“統(tǒng)一原則”等。

一句話總結(jié)下下今天分享的內(nèi)容：設(shè)計(jì)細(xì)節(jié)的把控就是要注重各個(gè)元素包括圖形、構(gòu)圖、色彩、文字等之間的關(guān)系，使其和諧統(tǒng)一。

最后，感謝大家的觀閱。

作者：老狼老狼老狼，個(gè)人主頁(yè)：http://langdesign.zcool.com.cn