高級細節欄目持續更新啦，之前寫完看得出大家非常喜歡。可以說細節決定成敗，再大的設計，細節依然是需要認真去打磨。掌握好細節，設計品質自然提升。

查爾斯·狄更斯在他的作品「 一年到頭 」中寫道：“有人曾經被問到這樣一個問題：什么是天才？他回答說：天才就是注意細節的人。”

對設計師來說：“細節是頭等大事”。一些設計師老是覺得自己做設計沒天賦，比不上那些比自己強的人。其實那些厲害的人，只是在做設計時候多思考了一下細節，你也可以，功夫不負有心人，加油。

今天分享目錄如下：

• 圓角細節
• 漸變方法
• 融入白色

圓角細節

圓角可以說是在設計中出現次數最多的設計元素之一，我們熟悉的 Apple 公司家族化產品基本都帶有圓角。圓角也是打造記憶點的常用手段之一，而且現在越來越多手機硬件廠商都逐步圓角化。

圓角還有一個重要的特點，就是親和力強和有溫度感，讓用戶感到舒適。反之尖銳的元素會讓人產生些許距離感，所以大家有沒有發現大部分奢侈品設計或者一些高端的設計基本硬朗直角多一些。

△ 硬角和圓形

我們做界面設計時候，對圓角的掌控或者處理也是需要注意。切勿將直角和圓角混搭設計，這樣出來的界面視覺上會比較別扭。

上圖我們可以看到，左側硬朗直角和右側比起來，右側視覺感官會更舒適一些，也體現出功能層級。

還有就是在做界面時候，整體都有圓角，只有按鈕是硬朗的或者很小的圓角，就會顯得整體格格不入，圓角統一性也很重要。

對于彈窗里面按鈕組件設計也是一個道理。

那么問題來了，圓角值如何定義比較好呢？

這里推薦大家一個簡單的方法；「參數化圓角值」，也是基于網格系統來定義的。如果不懂網格系統，可以看看這篇：

基于網格系統里面的數值，可以選取3~4個值來滿足整個界面設計，如下

有些同學可能會問，為啥是這幾個？這里我簡單說下：“不管選取圓角值是多少，都是需要再嘗試和試效果的，并不是憑感覺定義數值”。可以根據產品里面的組件，進行圓角值定義。大型產品可以初步定義四種尺寸：“S、M、L、XL”等，當然有些簡單的產品2~3個就夠了。

之前，網上流傳計算圓角值方法的，其實都不太科學，就如黃金比例做設計出來的卡片就一定很好看么？最科學的方法就是測試驗證，然后去定義。

下面來看下網上做得比較好的圓角運用案例，更能幫助大家理解圓角的統一性和和諧性。

設計中，基本組件帶有圓角，屬于同一個世界中。小圖標、小卡片和按鈕等圓角整體運用很和諧。

反之，如果使用均是直角，那么整個語言要遵循直角。

漸變色方法

我們在做圖標或者界面設計時候，經常會遇到使用漸變。漸變處理的細膩程度也會影響到界面美觀感和高級感。用好漸變色設計，可以幫助我們提高設計細節的質感。

要想做好漸變色設計，我們先認識下色彩面板，熟悉色彩的安全區間，對于我們配色來說，可以避免踩坑。

那么正常漸變色取色范圍該是如何呢？我看了大量漸變色設計并集合我自己的經驗，總結了這個規律，基本上好看的漸變色都是在15度區間取值。越往上走，色彩越干凈。

下面我們來看下案例：

左側漸變色值略顯臟了，已經不在取色區間范圍了。右側剛好是在漸變取色區間，因此會更加輕量舒適一些。

不管是單色漸變還是雙色漸變以及多色漸變，取色原理不會變，還是在15度區間，取色效果最好。

UI中單色漸變應用效果。

海報設計中也是同樣道理，多色漸變案例。

UI中多色漸變案例。是不是發現好看的漸變色基本都是比較輕量和簡約一些，因此這個原則大家需要注意。

推薦一個漸變色網站：https://webgradients.com/ 。

融入白色

白色設計，在家居領域歷史悠久。白色簡約，更清爽。在產品設計中，它的地位更是舉足輕重。我們熟悉的Apple和宜家家居，就是白色語言的極致體現。

當我們在設計配色時，如果沒有很好的思路，可以考慮使用白色。它基本都能和其他任何色彩搭配，而且效果也還不錯。

比如我們在包裝作品時，可以配合圓形融入白色，這樣視覺焦點也更加能聚焦在畫面中心。

△ 作品包裝單頁

對半分割融入白色，也是比較常用的包裝手法。

在界面設計中，大量使用白色可以讓界面更干凈整潔。

平面設計中白色也是屢見不鮮。

白色設計是最簡約，最純粹的設計格調。白色也很好用，所以色感不是很好的同學，可以盡量多加入白色進來吧。

歡迎關注作者微信公眾號：「功夫UX」