實(shí)戰(zhàn)說明設(shè)計(jì)中的細(xì)節(jié)

先說下設(shè)計(jì)細(xì)節(jié)具體是什么。其實(shí)這是一個(gè)很廣義的概念，一個(gè)設(shè)計(jì)作品如果成功，細(xì)節(jié)方面一定是到位的，但是細(xì)節(jié)不僅僅是指細(xì)小的東西，比如說像素級別的對齊，到位等等，還包括:這里如果不用這種形式，稍微加點(diǎn)紋理或者質(zhì)感會不會更好，與整體是否協(xié)調(diào)，光影關(guān)系是否與整個(gè)圖標(biāo)或者整個(gè)界面一致等等。本文將通過一個(gè)實(shí)戰(zhàn)案例說明設(shè)計(jì)中的細(xì)節(jié)。

    在摳設(shè)計(jì)的細(xì)節(jié)的時(shí)候，一定要戒驕戒躁，即使是很小的一個(gè)點(diǎn)上，也需要多思考，如何讓這個(gè)點(diǎn)更符合整個(gè)設(shè)計(jì)作品的氣質(zhì)，確定之后再去動(dòng)手去實(shí)現(xiàn)。而不要說因?yàn)樾枰龅氖虑楹苄。覜]什么技術(shù)難度，就直接去幾下畫完，然后再一次次的評審中去修改，這樣花的時(shí)間很有可能更多，而且達(dá)不到想要的效果。那接下來就以一個(gè)具體的設(shè)計(jì)案例去具體講述下什么是設(shè)計(jì)的細(xì)節(jié)，以及在設(shè)計(jì)的過程中如何去把設(shè)計(jì)的細(xì)節(jié)做好。

有一個(gè)需求是這樣的，界面上有一個(gè)彈出框，如圖1:

圖1 設(shè)計(jì)原稿

    為了適應(yīng)產(chǎn)品的新特性，我們需要在這個(gè)彈出框上加一個(gè)小的抓手，可以拖拽這個(gè)彈出框，需要設(shè)計(jì)側(cè)給這個(gè)彈出框加一點(diǎn)修飾，讓它看起來是可以拖拽的。

    需求其實(shí)很簡單，而且有很多現(xiàn)成的例子可以參考。如果是一個(gè)稍微有些經(jīng)驗(yàn)的設(shè)計(jì)師，基本上就不需要再找什么參考就可以直接幾分鐘畫出一個(gè)抓手。這里為了說明整個(gè)設(shè)計(jì)需求的流程，找了些參考圖，如圖2。

圖2 抓手參考

    對比現(xiàn)有的比較成熟的軟件，大家的做法就是把可以抓取的部分加入凹凸的顆粒，看起來好像摩擦力很大的樣子，這樣來示意這個(gè)區(qū)域是可以抓住拖動(dòng)的。所以我們沿用這個(gè)規(guī)則就可以了，由于我們需要做的需求中可以拖拽的部分是邊而不是角，所以可以加入橫線的方式來做。好，我們來細(xì)化到像素級別來完成這個(gè)需求吧J

圖3 設(shè)計(jì)效果圖

    設(shè)計(jì)稿很快就出來了，我們還可以放大看下細(xì)節(jié)。

圖4 設(shè)計(jì)效果圖放大400%效果

    能夠很明顯的看出來，這個(gè)是用鉛筆畫了3個(gè)像素的線，然后加了投影，我們再放大些看看。

圖5 放大1600%的效果

     現(xiàn)在已經(jīng)很細(xì)節(jié)了吧？在三個(gè)像素高度的圖形上加入了高光，陰影還有過度，這個(gè)細(xì)節(jié)是不是已經(jīng)做的很好了呢？呃，從放大圖上來看，好像，沒什么問題，但是，這個(gè)時(shí)候我們回過頭來看看整個(gè)界面，忽然覺得有那么一點(diǎn)“缺少細(xì)節(jié)”，這…什么情況…

    我們明明已經(jīng)是細(xì)化到像素級別了，為什么還有些不安呢？仔細(xì)思考下，大概是這樣的：這個(gè)界面的元素都是圓潤的，包括投影，邊角都是一點(diǎn)點(diǎn)過度的，而我們的抓手部分卻是用像素直接一點(diǎn)點(diǎn)畫出來的，所以，氣質(zhì)上本身就有點(diǎn)問題。但是，三個(gè)像素的高度上，我們可以做出圓潤的感覺嗎？實(shí)際上，你可以的。

    先仔細(xì)思考下怎么做會更好一點(diǎn)。因?yàn)檫@個(gè)需求屬于延續(xù)設(shè)計(jì)，所以需要先揣摩現(xiàn)有界面的設(shè)計(jì)思路。界面屬于擬物風(fēng)格，上側(cè)稍微有點(diǎn)翹起，所以上邊緣有一個(gè)像素的高光，然后是自陰影，圓角也是很明顯的。所以我們需要做的，應(yīng)該是一個(gè)擬物化的，圓潤的抓手。為了讓抓手區(qū)域更明顯一點(diǎn)，我們甚至可以加入一點(diǎn)底色。

    好，先看下完成稿。

圖6 設(shè)計(jì)定稿

    現(xiàn)在看起來比較靠譜了，然后我們來看下“細(xì)節(jié)”實(shí)現(xiàn)。

圖7 400%放大效果圖

圖8 每個(gè)元素的實(shí)現(xiàn)示意

    其實(shí)在第一稿上，大部分的東西我們都注意到了，只是再深入細(xì)化了一下，用路徑來勾勒圓潤的角度，用photoshop圖層樣式中的斜面浮雕，內(nèi)發(fā)光來模擬凸起物本身的質(zhì)感，而不是用一條條像素點(diǎn)來生硬的勾勒。高光層做了細(xì)化，中間亮，兩邊暗一點(diǎn)。投影也用了投影和外發(fā)光兩層來模擬更真實(shí)一點(diǎn)的投影效果。至于新添加的底色，因?yàn)槭琴N在界面上的，所以需要順應(yīng)界面本身的質(zhì)感，頂層有一個(gè)像素的高光，然后是區(qū)域內(nèi)陰影等等。

    到這里，這個(gè)界面細(xì)節(jié)優(yōu)化就差不多了?？偨Y(jié)起來，所謂細(xì)節(jié)，一個(gè)層面是指，這個(gè)設(shè)計(jì)作品上，像素級的東西有沒有用心去做，另一個(gè)層面，細(xì)化到像素級別之后，回過頭來看看，細(xì)化完的部分跟整個(gè)作品是否氣質(zhì)統(tǒng)一。在這兩個(gè)層面上，第二個(gè)層面其實(shí)會更重要一點(diǎn)，但是往往會被忽略掉。設(shè)計(jì)師在做一個(gè)作品的時(shí)候，需要時(shí)刻注意，細(xì)節(jié)與整體的關(guān)系，細(xì)節(jié)是為整體服務(wù)的，所以需要在理解整體的基礎(chǔ)上再去深化細(xì)節(jié)部分。