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