當(dāng)一個(gè)產(chǎn)品完成核心部分的需求之后，我們就可以慢慢準(zhǔn)備開(kāi)始研究細(xì)節(jié)的問(wèn)題。
一個(gè)產(chǎn)品幾乎每個(gè)層面都可以談?wù)摷?xì)節(jié)：其中還包括表面上看得到的，以及表面上看不到的。表面上看得到的細(xì)節(jié)很簡(jiǎn)單，花時(shí)間去做、去嘗試、去犯錯(cuò)、去修正就好了。而看不到的細(xì)節(jié)諸如產(chǎn)品定位、用戶體驗(yàn)等等，往往依靠不長(zhǎng)期經(jīng)驗(yàn)的累積、研究與得到使用者反饋外，很難清楚的明了到底哪邊該怎么去制作與修正。
筆者曾經(jīng)做過(guò)一些平面設(shè)計(jì)，深刻的了解到「東西如果會(huì)被別人拿著擺著看細(xì)節(jié)，那么每個(gè)部分的細(xì)節(jié)都必須細(xì)心追求」。一張海報(bào)傳單印刷出去，很容易就被復(fù)制了幾百份幾千份、進(jìn)而有幾千人幾萬(wàn)人觀看到，想到這點(diǎn)就不得不謹(jǐn)慎處理畫(huà)面上的每個(gè)細(xì)節(jié)。也因此設(shè)計(jì)師常常花費(fèi)一整個(gè)下午的時(shí)間，不為什么，就只是就是盯著屏幕上的稿件、慢慢地去微調(diào)畫(huà)面上每個(gè)標(biāo)題、每個(gè)文字的字型與顏色、尺寸與間距、字距與行距……等等。
筆者還曾經(jīng)參與過(guò)一些動(dòng)畫(huà)創(chuàng)作，深刻的體會(huì)到了「而東西如果要?jiǎng)悠饋?lái)，需要兼顧到的細(xì)節(jié)就會(huì)更多」：諸如動(dòng)畫(huà)的十項(xiàng)法則、物體落地時(shí)的形變(不同材質(zhì)的物體、不同動(dòng)畫(huà)風(fēng)格的表現(xiàn)還會(huì)影響形變度呢)、動(dòng)畫(huà)角色表演時(shí)的預(yù)備動(dòng)作……等等，雖然不做不影響整體表現(xiàn)，但缺少了就是會(huì)讓觀賞者覺(jué)得少了點(diǎn)味道。
而在參與用戶接口的制作后。再度深刻了解到「如果東西如果還能夠與使用者互動(dòng)，那么需要顧慮到的細(xì)節(jié)就更加倍增了」。因?yàn)槲覀冇肋h(yuǎn)無(wú)法預(yù)期，使用者會(huì)在哪個(gè)時(shí)間點(diǎn)，做出超出你預(yù)期外的事情。
追求細(xì)節(jié)是很耗費(fèi)時(shí)間的工作，但我們要有追求細(xì)節(jié)的態(tài)度
按鈕的互動(dòng)細(xì)節(jié)
以網(wǎng)頁(yè)上最常見(jiàn)的互動(dòng)元素：按鈕來(lái)說(shuō)，網(wǎng)頁(yè)上的按鈕一般包含了三種互動(dòng)效果，分別為：Normal、Hover 以及 Active (Pressed) 。通常狀況下，網(wǎng)頁(yè)設(shè)計(jì)師會(huì)利用三張圖片的替換來(lái)完成這個(gè)效果(不論是使用三張獨(dú)立圖片抑或是利用 CSS Sprite 皆是)。
曾經(jīng)有一段時(shí)期，F(xiàn)lash SWF 成為了因特網(wǎng)的熱門(mén)寵兒，可視化的創(chuàng)作接口讓許多創(chuàng)作者減低了排斥感，成為很多網(wǎng)頁(yè)設(shè)計(jì)師必學(xué)的軟件之一。在 Flash 中默認(rèn)的按鈕組件也提供了相同的互動(dòng)效果：Up、Over 以及 Down(其中第四個(gè) Hit 為感應(yīng)區(qū))。由于 Flash 的動(dòng)畫(huà)特性，使用者可以在每個(gè)狀態(tài)中加入動(dòng)畫(huà)組件，讓用戶與按鈕的互動(dòng)中加上動(dòng)態(tài)效果。
好了，現(xiàn)在我們可以替按鈕加上動(dòng)態(tài)的效果，例如下面這個(gè)狀況：我們?cè)?Over 里面放了一個(gè)黑色色塊的動(dòng)畫(huà)片段。當(dāng)用戶把鼠標(biāo)移到按鈕上方就會(huì)觸發(fā)這個(gè)動(dòng)畫(huà)效果：
在互動(dòng)上的經(jīng)驗(yàn)活潑了不少，但是卻少了點(diǎn)什么：由于 Over 區(qū)塊偵測(cè)的是「當(dāng)鼠標(biāo)移動(dòng)到區(qū)塊上時(shí)」觸發(fā)動(dòng)畫(huà)效果，而當(dāng)「鼠標(biāo)離開(kāi)區(qū)塊時(shí)」卻沒(méi)有相對(duì)應(yīng)的影格，導(dǎo)致整個(gè)動(dòng)畫(huà)效果卻是硬生生的被截?cái)唷?魔鬼藏在細(xì)節(jié)里(The devil is in the details)，如果我們想要取得完整的體驗(yàn)，勢(shì)必必須考慮到這個(gè)容易被大家忽略的部份，也就是不只是光標(biāo)移到按鈕上方的動(dòng)畫(huà)效果，光標(biāo)離開(kāi)的效果也是個(gè)列入設(shè)計(jì)考慮的細(xì)節(jié)之一，理想的狀態(tài)如下圖所示：
想要兼顧到這個(gè)效果，就不得不利用程控來(lái)達(dá)成目的了(不論是 Flash 或是 CSS / JavaScript 等等皆是)。透過(guò)程序語(yǔ)言的控制的確可以有效的達(dá)到想要的效果、讓設(shè)計(jì)師的創(chuàng)作想象力更為廣泛，不過(guò)也有著無(wú)法善加利用圖片，以致創(chuàng)作彈性較低，以及另外一個(gè)瀏覽器與平臺(tái)支持度的問(wèn)題。
更多的細(xì)節(jié)
「如果東西如果還能夠與使用者互動(dòng)，那么細(xì)節(jié)就倍增了」，像是同樣的例子，我們將動(dòng)畫(huà)效果減速演出之后，就會(huì)發(fā)現(xiàn)另外一個(gè)問(wèn)題：「如果使用者在動(dòng)畫(huà)表演到一半的時(shí)候，鼠標(biāo)又離開(kāi)別的地方呢?」以下面的按鈕組件為例，動(dòng)畫(huà)是會(huì)硬生生被切斷的(因?yàn)橛案癖粡?qiáng)制跳出到下一個(gè)影格了)。
相對(duì)的，這么做是較為安全的作法，因?yàn)楫?dāng)用戶的「光標(biāo)離開(kāi)感應(yīng)區(qū)時(shí)即強(qiáng)制中斷動(dòng)畫(huà)表演」就不會(huì)遇到動(dòng)畫(huà)排程的問(wèn)題：想象一下如果光標(biāo)離開(kāi)了，動(dòng)畫(huà)還緩慢地表演的時(shí)候，用戶又快速的重復(fù)光標(biāo)進(jìn)入、離開(kāi)、進(jìn)入、離開(kāi)的動(dòng)作，是否又是另外一場(chǎng)災(zāi)難呢?考慮到這個(gè)問(wèn)題，如果使用程控的情況下，就必須細(xì)心兼顧到這個(gè)部分的細(xì)節(jié)。
小小一個(gè)按鈕、搭配一個(gè)簡(jiǎn)單的動(dòng)畫(huà)，卻由于牽扯到與使用者互動(dòng)的部份，即會(huì)牽扯出這么多的「細(xì)節(jié)」出來(lái)。雖然追求細(xì)節(jié)很耗費(fèi)時(shí)間，大部分的時(shí)候恐怕都會(huì)被認(rèn)為「這部份不影響產(chǎn)品功能」、「這個(gè)不是產(chǎn)品的核心」等等而被草草帶過(guò)。但就像著名的設(shè)計(jì)師 Charles Eames 說(shuō)過(guò)：「細(xì)節(jié)本身并非細(xì)節(jié)，而就是產(chǎn)品的精髓。」他們那些經(jīng)過(guò)千錘百煉、精心校調(diào)設(shè)計(jì)的椅子款式，一直到現(xiàn)在都還是精彩的設(shè)計(jì)呢。
聯(lián)系客服
