大家看到這張圖的第一感受是什么？是不是覺得大氣，高級、簡約，而且不會覺得不精致。
再來看這張圖，是不是同樣的感受，給人高級感。那么有沒有想過是什么影響了這些高級感？是不是我們?nèi)庋勰芸吹降念伾?、留白、陰影、大小、圖片、排版、質(zhì)感等細(xì)節(jié)。就是這些元素的和諧處理，才使得整體看上去同一個世界，讓我們感官愉悅。
因此我們做設(shè)計時候，也需要和諧的處理這些元素關(guān)系。把這些關(guān)系處理好了，設(shè)計細(xì)節(jié)自然豐富，精致度自然也就上來了。
下面我們看看間距節(jié)奏、投影質(zhì)感、高級圖片等在設(shè)計中如何處理。
1.間距節(jié)奏
我們常說的間距節(jié)奏，其實就是留白或者負(fù)空間的應(yīng)用。那么在UI版式中，這些負(fù)空間就是間距網(wǎng)格的應(yīng)用，間距節(jié)奏的把控，下面看這張圖。
上圖，就是一張基礎(chǔ)的版式間距節(jié)奏。好的版式節(jié)奏，就像音樂一樣，它通過變化的節(jié)奏來表達(dá)動聽的音樂。
對于間距節(jié)奏，我們在設(shè)計中盡量體現(xiàn)倍數(shù)關(guān)系，這樣的節(jié)奏是最明顯的，而且設(shè)版式節(jié)奏感也會更強(qiáng)，比如看下面這個案例。
2.投影質(zhì)感
在UI的設(shè)計語言中，投影是其中一個基礎(chǔ)層風(fēng)格樣式，它處理好壞也會直接影響到界面品質(zhì)感。
Dribbble@Gleb Kuznetsov?
上圖是Gleb Kuznetsov的作品，雖然界面設(shè)計中沒有過多復(fù)雜的設(shè)計，但是整個界面品質(zhì)感和細(xì)節(jié)處理還是挺值得學(xué)習(xí)的。
我們可以注意以下幾個細(xì)節(jié)，紅圈的地方。底部語音是輕擬態(tài)質(zhì)感，其他部分的卡片設(shè)計和按鈕均用了細(xì)膩的投影，而且按鈕的投影還有帶有色相。
所以對于投影的處理，我們可以看出可以存在兩種思路，按鈕的使用帶有色相的，卡片類的統(tǒng)一灰色投影。
對于這種投影的處理思路，大家可以看上圖，以按鈕為例，首先將按鈕基本形態(tài)做好。其次復(fù)制一個上層按鈕，然后將其長度左右縮小一些，降低透明度50%，第三步就直接將這個按鈕模糊處理，模糊值大小可以調(diào)節(jié)到合適的范圍即可。
其實我們看一些優(yōu)秀的Web端設(shè)計，投影出現(xiàn)的概率也是比較大的。通過投影可以增加細(xì)節(jié)，豐富質(zhì)感，而且還可以有多種顏色漸變模糊。
3.高級圖片
圖片在整個設(shè)計中可以說是重中之重，因為圖片占比也是非常大。特別是以圖片為主的產(chǎn)品，一定要注意圖片的品質(zhì)感。
29cm的官網(wǎng)，整體版式質(zhì)感看著就會很高級。大家可以去看看蘋果官網(wǎng)，圖片又高級，又大，產(chǎn)品質(zhì)感精致，對于用戶來說，只要進(jìn)入官網(wǎng)就會有想購買的沖動。
29cm官網(wǎng)
選擇圖片需注意的陷阱，比如上圖，右側(cè)的圖其實作為生活中的照片是很溫馨的，也適合發(fā)朋友圈。但是如果在設(shè)計中，就會顯得元素多，而且不夠聚焦，左側(cè)的就會更聚焦有力量，有質(zhì)感。
好了，今天的內(nèi)容就先講到這里，我們下期見。
轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》3個好用到尖叫的設(shè)計細(xì)節(jié)，再不知道就晚了！
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)