大家看到這張圖的第一感受是什么？是不是覺得大氣，高級、簡約，而且不會覺得不精致。

再來看這張圖，是不是同樣的感受，給人高級感。那么有沒有想過是什么影響了這些高級感？是不是我們肉眼能看到的顏色、留白、陰影、大小、圖片、排版、質感等細節。就是這些元素的和諧處理，才使得整體看上去同一個世界，讓我們感官愉悅。

因此我們做設計時候，也需要和諧的處理這些元素關系。把這些關系處理好了，設計細節自然豐富，精致度自然也就上來了。

下面我們看看間距節奏、投影質感、高級圖片等在設計中如何處理。

1.間距節奏

我們常說的間距節奏，其實就是留白或者負空間的應用。那么在UI版式中，這些負空間就是間距網格的應用，間距節奏的把控，下面看這張圖。

上圖，就是一張基礎的版式間距節奏。好的版式節奏，就像音樂一樣，它通過變化的節奏來表達動聽的音樂。

對于間距節奏，我們在設計中盡量體現倍數關系，這樣的節奏是最明顯的，而且設版式節奏感也會更強，比如看下面這個案例。

2.投影質感

在UI的設計語言中，投影是其中一個基礎層風格樣式，它處理好壞也會直接影響到界面品質感。

Dribbble@Gleb Kuznetsov?

上圖是Gleb Kuznetsov的作品，雖然界面設計中沒有過多復雜的設計，但是整個界面品質感和細節處理還是挺值得學習的。

我們可以注意以下幾個細節，紅圈的地方。底部語音是輕擬態質感，其他部分的卡片設計和按鈕均用了細膩的投影，而且按鈕的投影還有帶有色相。

所以對于投影的處理，我們可以看出可以存在兩種思路，按鈕的使用帶有色相的，卡片類的統一灰色投影。

對于這種投影的處理思路，大家可以看上圖，以按鈕為例，首先將按鈕基本形態做好。其次復制一個上層按鈕，然后將其長度左右縮小一些，降低透明度50%，第三步就直接將這個按鈕模糊處理，模糊值大小可以調節到合適的范圍即可。

其實我們看一些優秀的Web端設計，投影出現的概率也是比較大的。通過投影可以增加細節，豐富質感，而且還可以有多種顏色漸變模糊。

3.高級圖片

圖片在整個設計中可以說是重中之重，因為圖片占比也是非常大。特別是以圖片為主的產品，一定要注意圖片的品質感。

29cm的官網，整體版式質感看著就會很高級。大家可以去看看蘋果官網，圖片又高級，又大，產品質感精致，對于用戶來說，只要進入官網就會有想購買的沖動。

29cm官網

選擇圖片需注意的陷阱，比如上圖，右側的圖其實作為生活中的照片是很溫馨的，也適合發朋友圈。但是如果在設計中，就會顯得元素多，而且不夠聚焦，左側的就會更聚焦有力量，有質感。

好了，今天的內容就先講到這里，我們下期見。

轉載請注明：學UI網》3個好用到尖叫的設計細節，再不知道就晚了！

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務