做出來的設(shè)計，有種說不出的別扭，這可能是設(shè)計細節(jié)上出現(xiàn)紕漏。設(shè)計細節(jié)是UI設(shè)計上的一些規(guī)范，雖然規(guī)則是可以打破的，可以不遵循規(guī)則，大膽創(chuàng)新。

但大多數(shù)時候，遵循設(shè)計規(guī)范可以讓我們的設(shè)計符合視覺美感。今天和大家分享的這篇文章，借喻武林小說的口訣風(fēng)格，聊聊如何提升我們的設(shè)計細節(jié)，讓設(shè)計更加精致。希望這些口訣技巧能夠化為大家的內(nèi)功，在以后的設(shè)計中潛意識地用到。

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

開門見山，那么我們可以從哪些地方提升設(shè)計的細節(jié)呢？

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

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

1塑“形”

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

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

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

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

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

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

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

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

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

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

2控“色”

有了“形”，我們在來講講“色”。

經(jīng)常有“甲方爸爸”說“這個顏色有點丑額！換個顏色?！逼鋵嵨艺J為，沒有一個顏色是丑的顏色。排除一些個人感受和喜好外，造成這樣“丑”的局面多半是因為色彩搭配和色彩關(guān)系之間出了問題。

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

我們試著給剛才的圓角矩形添加個顏色，可以是純色，也可以是漸變色。但需要注意的是在做漸變的時候，需要注意明度、飽和度以及冷暖的變化，使得顏色過渡自然。

這是一組通過色彩漸變表現(xiàn)小動物結(jié)構(gòu)的圖形作品?；臼峭ㄟ^控制色彩的幾個常用要素：色相、飽和度、明度來實現(xiàn)的。

3添“質(zhì)”

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

5

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

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

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

我們總結(jié)一下：

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

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

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

4留“白”

接下來我們講一講“留白”。

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

那如何留白呢~~我們先來看張圖。

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

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

我們可以通過“減法”來更加突出小圓球的視覺位置。

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

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

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

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

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

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

5層次

我們在設(shè)計中經(jīng)常會提到“層次”，那“層次”如何而來呢？

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

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

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

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

6對齊

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

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

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

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

請時刻檢查我們的對齊！請時刻檢查我們的對齊！請時刻檢查我們的對齊！

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

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

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

7拒絕“默認字體”

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

這是Sketch里蘋方字體打的一段文字，數(shù)字和中文字、標(biāo)點符號之間有明顯的問題。

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

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

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

8精選圖片

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

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

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

9統(tǒng)一原則

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

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

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

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

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

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

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

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

最后，感謝大家的觀閱。

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

最后，感謝大家的觀閱。

圖、色彩、文字等之間的關(guān)系，使其和諧統(tǒng)一。

最后，感謝大家的觀閱。