最近大熊的工作重心都在前端 Vue.js 框架的學習和使用上，不經意就疏忽了文章的更新。所以這次趁著假期好好補上一篇，認真跟大夥兒講講設計中的「最後一公里」。文章的內容其實十分易懂，可能有人看完後心裡會想：「這麼簡單的道理，用的著費勁的反覆說明嗎？」。大熊覺得，文章寫的”淺”，才更容易消化理解。同樣的資訊，每個人的解讀都不一樣，設計本身並沒有那麼神祕，這5條經驗權作拋磚引玉，以後儘可能寫一系列短小精悍的文章，講的更專更深一些，是為序。
最後一公里？最後一公里！
最後一公里「Last Kilometer」這個概念，最早是拿來形容公共交通末梢的問題。後來各個行業都開始用，就逐漸引申為完成一件事最後且關鍵性的一步。（通常很棘手，但如果解決得當就能為整件事形成完美的閉環）而在設計領域裡，大熊認為這「最後一公里」的問題，恰恰就落在最終專案的呈現上。
你可曾想過這麼一個問題：自己設計書看的不少，”設計大牛”的文章一篇不落，工作幾年經手的專案不說多有難度，至少數量上也很足夠了，照理說”設計經驗”很豐富。可為什麼逛 dribbble、behance、FWA 時，總能明顯感覺到，明明風格相近，別人的作品看上去很有質感，細節到位，自己的就平淡無奇，談不上滿意。問題到底出在哪？
不光是剛入門的設計師會有這樣的困惑，就連”身經百戰”的資深設計師，也會面臨類似的瓶頸，只是深度不同。
所以，如何settle、如何給設計作品最後”定妝”，讓最終的設計脫穎而出？
下面這5條經驗之談能幫你搞定這個問題。
一、層次
層次分平面和縱深。任何一個設計師，都應該充分意識到，有節奏的層次變化，能在使用者內心產生微妙的化學反應。
我們來舉個?。
這是一個簡單的底圖＋文字（背景是卡達航空），沒有任何特別之處。然而卻問題多多，不趕緊補救一下，根本拿不出手。首當其衝的是平面版式的層次，全部內容堆到一起，丟失視覺重心；其次是畫面沒有縱深感，稍作停留就覺得乏味。
「Before」
理一下思路，我們可以從這幾個地方入手：
- 一級標題、二級標題、正文的強弱層次區分開；
- 沿著左側的機翼割裂方形框，形成縱深感；
來看看效果：
「After」
看出區別了嗎。按照剛才的思路稍作修改，是不是立刻煥然一新。
原理很簡單：
通過後期將畫面中的元素突出或弱化，人為的製造出視覺差，大大增強畫面的立體感。
「畫面元素在人眼中呈現的先後次序」
在設計中多多運用這樣的技巧，給自己的設計製造富有節奏的層次感，結果可能就大有不同。
是為「設計最後一公里」之層次。
二、色彩
大熊在轉行做設計前，是一個土木工程師。專案裡密密麻麻的CAD走線大紅大綠，沒有眼瞎已經是僥倖。連大熊這樣的渣渣都能通過後期不斷練習，勉強在設計中把顏色基本用對，你們就更不用說了。所以，色彩一定要花功夫調整，否則可能原本不錯的設計稿因為顏色用的不夠“正”，就被可憐的打入冷宮。
我們來看這幅圖：
毫無疑問，肯定是後者更舒服？可是凡事要多問為什麼，我們把畫面的顏色提取出來看看：
左側的色樣超過10種，右側的色樣不過3種。
永遠記住，在絕大多數沒有把握的情況下，要嚴格控制畫面中顏色的數量，否則很容易擦槍走火。
再來看另外一個栗子：
同樣的，大熊將顏色提取出來，對應至色輪：
發現癥結所在了嗎？
什麼樣的產品，就運用什麼樣的顏色組合。
大熊在設計選色上，自己總結了4種辦法，效率非常高（也曾在公司內分享過）：
- 近似色
- 互補色
- 同色系
- 自然（圖片中）尋找
拿近似色來說，有現成的工具比如 Adobe Color，以及 Apple 設計師也在用的Color Schemer Studio 2 幫忙，在色輪上取正負30°的顏色，通常就是非常好的近似色組合。
「Adobe Color」
「Color Schemer Studio」
我們將上圖Color Schemer取的顏色來一次現場配色，是不是毫無違和感：
「蒙特裡安構成派的作品風格，按近似色重新組合」
再說互補色，色輪上對應的兩個顏色就是視覺衝擊最強的顏色組合。
但是千萬不要拿來就要，先敲定一個主色和若干輔色：
再確定色塊的比例：
「比較常用的做法」
接著說同色系，這個比較簡單，通過加深或減淡基本色，就可以定義一組可用的顏色出來：
大熊基本上是選定一種顏色後，分別疊加20%透明度的白色和20%透明度的黑色，得到了想要的同類色組合。
最後說說從自然中取色，拿一張大表姐的照片舉例，放入Adobe Color 自動識別出圖片中的主要顏色：
「Adobe Color 識別顏色」
根據這幾個顏色以及主輔色的比例，我們可以在短短几分鐘就完成一個可用的版式設計：
「這裡稍微提升了畫面的亮度和飽和度」
如果在設計中發現作品不合心意，沒準問題就出在顏色上。
上述4個技巧在任何場景下都可以靈活運用，這下知道該怎麼做了吧。
三、陰影
幾乎是GUI介面設計誕生的那一刻起，陰影的運用就無處不在。
20世紀末的應用介面基本上都長這樣：
「Windows 2000 Pro預覽版」
可以看到，介面設計有高光有陰影有漸變。在當時GUI設計是一個新興的行業，大家都沒有可參考的物件，傳統的平面印刷設計很難拿來借鑑，同時又受制於製圖軟體特性限制，也就有了如上圖的結果。
後來設計工具不斷迭代，手法也越來越多，特別是iPhone OS（是的那會還不叫iOS）出世後，擬物設計「Skeuomorph」風靡整個設計圈，在iOS 6的時候達到了頂峰。幾乎所有設計師都在拼命畫ICON，花費大量的時間在介面中的投影、反射、紋理、高光上，誰的設計能讓人更想”舔”一口，誰就贏了：
「被無數設計師臨摹的圖表介面，設計師 Mike 的作品」
iOS 7 推行扁平化設計後，當時的設計圈就炸開了鍋。「這麼多年辛苦練習的設計技巧，說拋棄就拋棄？」於是他們還是想到了陰影。你要說2014年最流行的設計風格是什麼，毫無疑問是漸變「Gradient」+長投影「Long shadow」：
「典型的長投影設計」
如果你還有印象的話，一定記得當時Appstore只要上推薦榜的應用，一大半都是這種風格。
藝術源於生活，長投影在生活中也隨處可見：
「羅德島藝術設計學院——藝術博物館外立面的長投影」
緊接著設計師們就看膩了長投影，開始轉向紙片化的設計，另加上大範圍的薄陰影烘托質感。風格依舊是扁平的，只是大家在探索的過程中往裡面加入了很多新的元素，變著法子做出不一樣的感覺。
「泰國設計師 buatoom 設計的廣告banner」
為了更好的理解在這二十年裡的設計風格演變，大熊畫了下面的圖來管中窺豹：
「陰影在設計中運用的演變」
大熊想說的是，對潮流不要抗拒，新的設計風格興起一定有它的時代背景。（比如扁平化的設計將設計師從無止盡的畫素堆疊中解放出來，從更實用的角度去做設計，讓精力迴歸到最基本的互動和使用體驗上。）然而也要時刻保持思考，風格是皮外物，適合的才是好的。
花這麼長篇幅說陰影跟文章的主題「設計的最後一公里」有關係嗎？
彆著急，有的。
還是舉個?，這是大熊2014年給某個定製高階戶外遊的公司做的視覺概念設定，仔細一看，問題不少。首先是採用卡片式的設計，最好將內容和背景脫離開，否則「可點選」的暗示不夠強烈；其次是採用了幽靈按鈕「Ghost Button」，要補充一些必要的細節讓內容更完整。
「Before」
所以我們可以這麼改進：
- 通過邊框「Border」和陰影「Shadow」將卡片導航與背景明顯分割開；提高文字的可讀性；
- 給幽靈按鈕增加細節，即便滑鼠沒有移到上面處於「Hover」狀態，也要給人明顯可點選的暗示；
「After」
是否看出區別：右側底部卡片的標題可讀性提高了，卡片和背景也分割的更明顯。
一點點陰影，差別可以如此大。
四、氛圍
優秀的設計作品無一不重視氛圍的渲染，就好像去餐館吃飯，同樣一盤菜擺在蒼蠅館子的餐桌上，和擺在米其林餐廳裡，人們對它的價格預期是不一樣的。我們花了95%的時間在反覆推敲設計的合理性，互動的一致性。為何不多花那5%的時間，將最終要給別人看的設計好好打磨，呈現一個更好的樣貌？
我們還是來舉個?，這是大熊很久以前練習時繪製的燈塔：
「Before」
這張卡片設計沒有絲毫特別之處，換句話說，太單調了。
我想我們可以從這幾個方面入手，強化設計最終呈現的效果：
- 呼應主題的背景，可以用高斯模糊或漸變；
- 一些細微的裝飾性元素；
- 文字和陰影；
一起動手試試：
看起來是不是比原來孤零零的卡片更完整。
這就是為什麼我們要強調氛圍的重要性，同樣的設計，僅僅多用一些心思，就提升了整個設計作品的完成度。
「越用心，越美好」這句話，在這裡是適用的。
五、字型
大熊對字型的研究只有皮毛，但有一點記得很清楚：用對字型，設計才得體。
你不會想要在卡通風格的設計中用宋體，同理，也不會用娃娃體去做嚴肅文學作品的封面。
用錯字型，就像是穿著高跟鞋去登山，夾著拖鞋去跑步，總歸是勞心乏力，還不好看。
十分慚愧，大熊平時用的最多的英文字型，無非就是這麼幾款：
「基本都是系統自帶字型，請善用搜尋引擎」
此外不得不提的是，大熊所在公司當前的LOGO，也是在Lucida Grande這款字型的基礎上做的變形設計（這款字型實在是太經典了）：
「haobtc LOGO」
所以，這對你意味著…
每當設計接近尾聲時，時刻記著從這五個角度重新梳理一遍（這裡只是拋磚引玉）：層次、色彩、陰影、氛圍、字型，你會發現，如果每樣都比之前好那麼一點點，整體設計會大有不同。
設計中的「最後一公里」，歸根結底是細節的積累，用心探索，設計會越做越好。
這篇文章裡提到的幾點，不過是設計中經常會碰到的常識，要想真正提高設計能力，還需要大量反覆的練習。設計圈內高手如雲，大熊依然徘徊在門外。只有通過不斷學習，或許才有一天能做出讓別人感動的設計，與大家共勉。