掌握了這3個細節(jié)，界面質(zhì)感提升一個等級！

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

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

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

今天分享目錄如下：

• 圓角細節(jié)
• 漸變方法
• 融入白色

圓角細節(jié)

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

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

△ 硬角和圓形

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

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

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

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

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

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

基于網(wǎng)格系統(tǒng)里面的數(shù)值，可以選取3~4個值來滿足整個界面設計，如下

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

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

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

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

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

漸變色方法

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

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

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

下面我們來看下案例：

左側(cè)漸變色值略顯臟了，已經(jīng)不在取色區(qū)間范圍了。右側(cè)剛好是在漸變?nèi)∩珔^(qū)間，因此會更加輕量舒適一些。

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

UI中單色漸變應用效果。

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

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

推薦一個漸變色網(wǎng)站：https://webgradients.com/ 。

融入白色

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

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

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

△ 作品包裝單頁

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

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

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

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

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