有時候我們做出來的設計，有種說不出的彆扭，這可能是設計細節上出現紕漏。設計細節是UI設計上的一些規範，雖然規則是可以打破的，可以不遵循規則，大膽創新。但大多數時候，遵循設計規範可以讓我們的設計符合視覺美感。設計達人今天和大家分享的這篇文章，借喻武林小說的口訣風格，聊聊如何提升我們的設計細節，讓設計更加精緻。希望這些口訣技巧能夠化為大家的內功，在以後的設計中潛意識地用到。
大家好，很久沒寫文章了。之前做過一次團隊分享，現在整理出來分享給大家交流和探討。
今天我們來聊一聊設計細節，從視覺設計的角度，總結了一些提升設計細節的方法。希望對於一些設計師有所幫助。個人見解，如有雷同，純屬巧合。
開門見山，那麼我們可以從哪些地方提升設計的細節呢？
一本“武林秘籍”一共為“九式”。雖然是設計的一些基本功，但容易被忽略。
掌握好這些，在平時設計中，多加勤練，多思考，你的設計就會更加細緻~
第一式：塑“形”
一切藝術都具有形式美；美的基本因子由“形”、“色”、“質”組成。
設計也是一樣。首先我要講的是設計中的“形”，同時我個人認為“形”是圖形設計中最重要的一個因子，“形”的設計好壞對於一個作品起著至關重要的作用。
這裡所說的“形”可以理解為圖形的輪廓、線稿、造型等。
“形”的控制在設計過程中需要反覆思考和推敲，比如圖標設計中的對其“識別性”的要求和 設計中常用的“尺規幾何做圖法”都是對“形”細節的嚴格把控。在插畫設計中，人物或物質形態的造型和節奏感也很重要。
“形”要準確，也要有“個性”。
打個比方，我們要畫一個圓角矩形，一般都會在矩形的基礎上直接倒個圓角。
很普通對不對？是否可以針對這個圓角打磨更多的細節呢。
我們可以再給這個矩形進行處理或者換另一種畫法，讓他具有一些膨脹感或更加飽滿，變得那麼“不普通”。這樣的圓角矩形是不是更耐看了點呢。
（別小看了這圓角矩形，蘋果圖標的圓角矩形還註冊了專利呢）
這是一組多年前OPPO手機主題大賽的參賽作品，過了那麼多年，依然很喜歡。
第二式：控“色”
有了“形”，我們在來講講“色”。
經常有“甲方爸爸”說“這個顏色有點醜額！換個顏色。”其實我認為，沒有一個顏色是醜的顏色。排除一些個人感受和喜好外，造成這樣“醜”的局面多半是因為色彩搭配和色彩關係之間出了問題。
雖然網上有很多色彩搭配工具，但是最好的工具是設計師的“感覺”，也可以說是設計師長期的積累和訓練的一種能力。色彩搭配有方法可尋，但也不是完全固定的，就比如我們常說的“紅配綠”也可以很高級。
我們試著給剛才的圓角矩形添加個顏色，可以是純色，也可以是漸變色。但需要注意的是在做漸變的時候，需要注意明度、飽和度以及冷暖的變化，使得顏色過渡自然。
這是一組通過色彩漸變表現小動物結構的圖形作品。基本是通過控制色彩的幾個常用要素：色相、飽和度、明度來實現的。
第三式：添“質”
設計可創造虛擬抽象，也可還原真實。除了“形”，“色”，設計中“質”的表達也很重要。比如最早的擬物風格圖標的流行到現在的極簡化風格。這裡要說的是，由繁到簡併不是“去質”，“無質”也是一種“質”的表現形式。
很喜歡以前錘子手機的圖標，儘可能的還原真實，有豐富的細節，可以盯著看好久。扁平化的流行也讓UI設計師的門檻變得越來越低，對於繪畫的要求也沒有那麼高了。
一般“添質”有兩種方法：添加紋理（材質）和添加光影質感。但是並不是一昧地追求“裝飾”，避免過度設計。
這是我比較喜歡的兩位設計師的作品，喜歡的同學感受下“質”感。左圖是噪點插畫，右圖是偽3D質感（本來想放自己作品的，還是大佬的作品更具說服力吧）
剛講了三個基本要素“形”“色”“質”中提升細節的一些要點。
我們總結一下：
塑“形”：形要準確，也要有個性。“形”是第一位的，在做設計時“形”的打磨需要更多的時間，“形”需要美感，也需要“個性”。
控“色”：明度冷暖，過渡自然。色彩能給人帶來更強的視覺衝擊，記住沒有一個顏色是“醜”的，處理好顏色的色相、明度、飽和度，以及顏色之前的關係。
添“質”：賦予質感，注意光影。“質”是錦上添花。一般方法以“添加紋理”和“添加光影”為主。“無質”也是“質”的一種表現形式哦。
第四式：留“白”
接下來我們講一講“留白”。
正所謂“此處無物勝有物”，“留白”是設計中常用的手法，這裡說說的“白”並不是白色或空無一物的意思；留白可以讓你的主題更突出，畫面更有空間感和通透感。
那如何留白呢~~我們先來看張圖，
一個黑色小圓球，放在一堆集合圖形中。你能快速的定位到小圓球嗎？人的視覺焦點是分散的，甚至會被他身邊的幾何圖形影響，始終沒辦法聚焦，看到的是一堆凌亂的圖形。
在我們平時設計過程中一樣，設計是應該是剋制的，需要做好“減法”。
我們可以通過“減法”來更加突出小圓球的視覺位置。
1：“減少干擾”：我們可以把小圓球身邊的雜亂的圖形弱化。
2：“去除”：把不相干的幾何圖形元素去掉。
充分發揮留白的作用，體現其內在價值，才能在突出主題、提升內容美感的同時，給觀者創造一個較為輕鬆、愉快的氛圍。
這是蘋果官網的截圖，大家感受下，其實畫面主要是文字，產品圖，沒有過多的裝飾，但是“浴霸”讓你過目難忘~
留白同時還能延展想象和視覺空間感，具有一定的藝術性。我國的水墨畫也常常有留白的應用。
說了這麼多，不要產生一個誤區：留白是萬能的！其實並不是所有的都需要大面積的留白，比如：有氣氛類的活動、節日、功能性很強的頁面等等。靈活運用才是王道。
第五式：層次
我們在設計中經常會提到“層次”，那“層次”如何而來呢？
一般情況，“層次”需要通過建立元素或內容之間的秩序，比如層級關係、主次關係、顏色關係、位置關係等等。
設計常用的方法：“對比”，即強調和弱化，元素間形成關係差；“歸納”：對相近元素的整理和不同元素的區分。
對於文字排版而言，比如說報紙或雜誌一般都會有明確的層次：標題（一級）、副標題（二級）、正文（三級），這是很典型的三級排列。不同的層次可以更好地向讀者展示哪些是重要信息。
這是一份分享的培訓通知，左邊經過一定的內容提取，去除了一些沒必要的內容，整理文章內容，建立元素之間的次序，突出分享主題，會不會更加吸引你呢。
第六式：對齊
“對齊”是指對於頁面的各元素之間建立排列次序；元素排列要有規律。
就像大家平常收拾房間一樣，各個物件擺放整齊。我覺得這是一個設計師最基本的要求之一，但常常被一些設計師所忽略。
在設計過程中，組織和建立元素間的排列次序關係非常重要。
一般設計工具中都有一些自動對齊工具，常用的對齊方式有“左對齊”、“居中對齊”、“右對齊”等。
請時刻檢查我們的對齊！請時刻檢查我們的對齊！請時刻檢查我們的對齊！
找了一些電影海報，大家感受下這三種對齊方式的在排版設計中的魅力。當然，在建立良好的次序的前提下，有時候也會有多種對齊方式混合使用的情況。
但是我們要小心，有時候在某種情況下，自動對齊並不適用。比如一些文字、符號對齊和一些特殊圖形上。需要用過視覺比重或其他的一些方法手動調整。
思考題：上面的播放按鈕，三角形與圓形的對齊方式，大家覺得哪種方式更優呢~~
第七式：拒絕“默認字體”
關於“字體”的使用一直是我們設計師的痛，一是涉及到版權問題，很多商用的字體需要授權；二是“默認字體”尤其是中英文數字標點等一起的時候，會出現一些意外的情況。
這是Sketch裡蘋方字體打的一段文字，數字和中文字、標點符號之間有明顯的問題。
這個時候，我們需要人工介入，對數字和標點符號進行調整，從而保證整體的平衡（如圖）。
作為一個設計師，同時也需要一點點“造字”的能力，為了營造一些畫面的氣氛，尤其是運營設計中主題字體設計可以很大幅度提升活動質量。
造字雖然涉及到時間成本，會花費一定的時間和精力，但從效果和質量上來看，還是很有必要的。
第八式：精選圖片
設計師們離不開圖片素材。圖片素材一般通過一些素材網站上挑選，也可以自行拍攝。但是網上找的或者自己拍攝的都會有一些問題，這個時候修圖的能力就非常重要了。
如果用到一些食物圖片素材，務必選擇一些質量較好的圖片或者攝影圖片。右圖是不是讓你更有食慾呢。
設計師不僅要學會精選圖片，更要學會如何精修圖片。左圖是修圖前，左圖是修圖後。一般對於產品精修上會更加註重細節的打磨。修圖後的啤酒是不是讓你更想來一杯呢~~
第九式：統一原則
細節的打磨不光是局部的打磨，最終會回到整體的把控上。
我們來看一組頭像排列的案例，乍看沒什麼問題，但是仔細看會發現，每個頭像的人物的比例關係和視線都不太統一，我們還可以做的更好。
我們來看下優化後的效果，每個頭像的人物的比例關係和視線基本統一。
統一意味著協調一致，元素間的大小、重量、間距、方向、對齊、色彩、形狀、佈局、風格等同樣也要遵循一定的次序和規律。
我們再來看一組圖片，左圖給人的感覺比較雜亂，羽毛和球體跟產品本身不夠明顯，顏色上也比較突兀，所以會給人一種不夠聚焦產品甚至雜亂的感覺。
右圖在形態、色彩、屬性等方面的統一化處理，加強了每個單獨視覺元素之間的呼應，使得畫面更整體舒適！
前面主要講了“形、色、質”在細節打磨上的重要性，接著講到了版式設計中常用的一些細節的處理方法：“留白”、“層次”、“對齊”，最後提了幾點注意事項：拒絕“默認字體”、“精選圖片”、“統一原則”等。
一句話總結下下今天分享的內容：設計細節的把控就是要注重各個元素包括圖形、構圖、色彩、文字等之間的關係，使其和諧統一。
最後，感謝大家的觀閱。
免責申明：文章來源於公開網絡，僅供設計師學習，版權歸原創者所有!無對涉及版權問題負責，如有原作者認侵，聯繫必刪
福利互動
為答謝客官閱讀完此文支持，特准備設計新人整套課程（字體設計，海報，logo，ps工具）
轉發關注後，私信小編：免費課程，即可領取ing~
閱讀更多 Ps平面設計課堂 的文章
