不容忽視的9式設計基本功

有時候我們做出來的設計，有種說不出的別扭，這可能是設計細節上出現紕漏。設計細節是UI設計上的一些規範，雖然規則是可以打破的，可以不遵循規則，大膽創新。但大多數時候，遵循設計規範可以讓我們的設計符合視覺美感。設計達人今天和大家分享的這篇文章，借喻武林小說的口訣風格，聊聊如何提升我們的設計細節，讓設計更加精致。希望這些口訣技巧能夠化為大家的內功，在以後的設計中潛意識地用到。

大家好，很久沒寫文章了。之前做過一次團隊分享，現在整理出來分享給大家交流和探討。

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

開門見山，那麼我們可以從哪些地方提升設計的細節呢？

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

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

第一式：塑“形”

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

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

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

“形”的控製在設計過程中需要反複思考和推敲，比如圖標設計中的對其“識別性”的要求和 設計中常用的“尺規幾何做圖法”都是對“形”細節的嚴格把控。在插畫設計中，人物或物質形態的造型和節奏感也很重要。

“形”要準確，也要有“個性”。

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

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

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

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

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

第二式：控“色”

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

經常有“甲方爸爸”說“這個顏色有點醜額！換個顏色。”其實我認為，沒有一個顏色是醜的顏色。排除一些個人感受和喜好外，造成這樣“醜”的局面多半是因為色彩搭配和色彩關係之間出了問題。

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

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

這是一組通過色彩漸變表現小動物結構的圖形作品。基本是通過控製色彩的幾個常用要素：色相、飽和度、明度來實現的。

第三式：添“質”

設計可創造虛擬抽象，也可還原真實。除了“形”，“色”，設計中“質”的表達也很重要。比如最早的擬物風格圖標的流行到現在的極簡化風格。這裏要說的是，由繁到簡並不是“去質”，“無質”也是一種“質”的表現形式。

很喜歡以前錘子手機的圖標，盡可能的還原真實，有豐富的細節，可以盯著看好久。扁平化的流行也讓UI設計師的門檻變得越來越低，對於繪畫的要求也沒有那麼高了。

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

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

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

我們總結一下：

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

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

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

第四式：留“白”

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

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

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

一個黑色小圓球，放在一堆集合圖形中。你能快速的定位到小圓球嗎？人的視覺焦點是分散的，甚至會被他身邊的幾何圖形影響，始終沒辦法聚焦，看到的是一堆淩亂的圖形。

在我們平時設計過程中一樣，設計是應該是克製的，需要做好“減法”。

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

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

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

充分發揮留白的作用，體現其內在價值，才能在突出主題、提升內容美感的同時，給觀者創造一個較為輕鬆、愉快的氛圍。

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

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

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

第五式：層次

我們在設計中經常會提到“層次”，那“層次”如何而來呢？

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

設計常用的方法：“對比”，即強調和弱化，元素間形成關係差；“歸納”：對相近元素的整理和不同元素的區分。

對於文字排版而言，比如說報紙或雜誌一般都會有明確的層次：標題（一級）、副標題（二級）、正文（三級），這是很典型的三級排列。不同的層次可以更好地向讀者展示哪些是重要信息。

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

第六式：對齊

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

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

在設計過程中，組織和建立元素間的排列次序關係非常重要。

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

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

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

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

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

第七式：拒絕“默認字體”

關於“字體”的使用一直是我們設計師的痛，一是涉及到版權問題，很多商用的字體需要授權；二是“默認字體”尤其是中英文數字標點等一起的時候，會出現一些意外的情況。

這是Sketch裏蘋方字體打的一段文字，數字和中文字、標點符號之間有明顯的問題。

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

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

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

第八式：精選圖片

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

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

設計師不僅要學會精選圖片，更要學會如何精修圖片。左圖是修圖前，左圖是修圖後。一般對於產品精修上會更加注重細節的打磨。修圖後的啤酒是不是讓你更想來一杯呢~~

第九式：統一原則

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

我們來看一組頭像排列的案例，乍看沒什麼問題，但是仔細看會發現，每個頭像的人物的比例關係和視線都不太統一，我們還可以做的更好。

我們來看下優化後的效果，每個頭像的人物的比例關係和視線基本統一。

統一意味著協調一致，元素間的大小、重量、間距、方向、對齊、色彩、形狀、布局、風格等同樣也要遵循一定的次序和規律。

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

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

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

一句話總結下下今天分享的內容：設計細節的把控就是要注重各個元素包括圖形、構圖、色彩、文字等之間的關係，使其和諧統一。

最後，感謝大家的觀閱。

作者：老狼老狼老狼，個人主頁：http://langdesign.zcool.com.cn