網(wǎng)站建設(shè)中的互動按鈕大小事發(fā)布者：本站     時間：2022-06-02 15:06:24

當(dāng)一個產(chǎn)品完成核心部分的需求之后，我們就可以慢慢準(zhǔn)備開始研究細(xì)節(jié)的問題

一個產(chǎn)品幾乎每個層面都可以談?wù)摷?xì)節(jié)：其中還包括表面上看得到的，以及表面上看不到的。表面上看得到的細(xì)節(jié)很簡單，花時間去做、去嘗試、去犯錯、去修正就好了。而看不到的細(xì)節(jié)諸如產(chǎn)品定位、使用者體驗等等，往往依靠不長期經(jīng)驗的累積、研究與得到使用者反饋外，很難清楚的明了到底哪邊該怎么去制作與修正。

筆者曾經(jīng)做過一些平面設(shè)計，深刻的了解到「東西如果會被別人拿著擺著看細(xì)節(jié)，那么每個部分的細(xì)節(jié)都必須細(xì)心追求」。一張海報傳單印刷出去，很容易就被復(fù)制了幾百份幾千份、進(jìn)而有幾千人幾萬人觀看到，想到這點就不得不謹(jǐn)慎處理畫面上的每個細(xì)節(jié)。也因此設(shè)計師常?；ㄙM一整個下午的時間，不為什么，就只是就是盯著螢?zāi)簧系母寮?、慢慢地去微調(diào)畫面上每個標(biāo)題、每個文字的字型與顏色、尺寸與間距、字距與行距……等等。

筆者還曾經(jīng)參與過一些動畫創(chuàng)作，深刻的體會到了「而東西如果要動起來，需要兼顧到的細(xì)節(jié)就會更多」：諸如動畫的十項法則、物體落地時的形變（不同材質(zhì)的物體、不同動畫風(fēng)格的表現(xiàn)還會影響形變度呢）、動畫角色表演時的預(yù)備動作……等等，雖然不做不影響整體表現(xiàn)，但缺少了就是會讓觀賞者覺得少了點味道。

【魔鬼藏在細(xì)節(jié)里】互動按鈕大小事

【魔鬼藏在細(xì)節(jié)里】互動按鈕大小事

而在參與使用者介面的制作后。再度深刻了解到「如果東西如果還能夠與使用者互動，那么需要顧慮到的細(xì)節(jié)就更加倍增了」。因為我們永遠(yuǎn)無法預(yù)期，使用者會在哪個時間點，做出超出你預(yù)期外的事情。

追求細(xì)節(jié)是很耗費時間的工作，但我們要有追求細(xì)節(jié)的態(tài)度

按鈕的互動細(xì)節(jié)
以網(wǎng)頁上最常見的互動元素：按鈕來說，網(wǎng)頁上的按鈕一般包含了三種互動效果，分別為：Normal、Hover 以及Active (Pressed) 。通常狀況下，網(wǎng)頁設(shè)計師會利用三張圖片的替換來完成這個效果（不論是使用三張獨立圖片抑或是利用CSS Sprite 皆是）。

【魔鬼藏在細(xì)節(jié)里】互動按鈕大小事

曾經(jīng)有一段時期，F(xiàn)lash SWF 成為了網(wǎng)際網(wǎng)路的熱門寵兒，視覺化的創(chuàng)作介面讓許多創(chuàng)作者減低了排斥感，成為很多網(wǎng)頁設(shè)計師必學(xué)的軟體之一。在Flash 中預(yù)設(shè)的按鈕元件也提供了相同的互動效果：Up、Over 以及Down（其中第四個Hit 為感應(yīng)區(qū)）。由于Flash 的動畫特性，使用者可以在每個狀態(tài)中加入動畫元件，讓使用者與按鈕的互動中加上動態(tài)效果。

【魔鬼藏在細(xì)節(jié)里】互動按鈕大小事

好了，現(xiàn)在我們可以替按鈕加上動態(tài)的效果，例如下面這個狀況：我們在Over 里面放了一個黑色色塊的動畫片段。當(dāng)使用者把滑鼠移到按鈕上方就會觸發(fā)這個動畫效果：

【魔鬼藏在細(xì)節(jié)里】互動按鈕大小事

在互動上的經(jīng)驗活潑了不少，但是卻少了點什么：由于Over 區(qū)塊偵測的是「當(dāng)滑鼠移動到區(qū)塊上時」觸發(fā)動畫效果，而當(dāng)「滑鼠離開區(qū)塊時」卻沒有相對應(yīng)的影格，導(dǎo)致整個動畫效果卻是硬生生的被截斷。

魔鬼藏在細(xì)節(jié)里（The devil is in the details），如果我們想要取得完整的體驗，勢必必須考慮到這個容易被大家忽略的部份，也就是不只是游標(biāo)移到按鈕上方的動畫效果，游標(biāo)離開的效果也是個列入設(shè)計考量的細(xì)節(jié)之一，理想的狀態(tài)如下圖所示：

【魔鬼藏在細(xì)節(jié)里】互動按鈕大小事

想要兼顧到這個效果，就不得不利用程式控制來達(dá)成目的了（不論是Flash 或是CSS / Javascript 等等皆是）。透過程式語言的控制的確可以有效的達(dá)到想要的效果、讓設(shè)計師的創(chuàng)作想像力更為廣泛，不過也有著無法善加利用圖片，以致創(chuàng)作彈性較低，以及另外一個瀏覽器與平臺支援度的問題。

更多的細(xì)節(jié)
「如果東西如果還能夠與使用者互動，那么細(xì)節(jié)就倍增了」，像是同樣的例子，我們將動畫效果減速演出之后，就會發(fā)現(xiàn)另外一個問題：「如果使用者在動畫表演到一半的時候，滑鼠又離開別的地方呢？」以下面的按鈕元件為例，動畫是會硬生生被切斷的（因為影格被強制跳出到下一個影格了）。

【魔鬼藏在細(xì)節(jié)里】互動按鈕大小事

相對的，這么做是較為安全的作法，因為當(dāng)使用者的「游標(biāo)離開感應(yīng)區(qū)時即強制中斷動畫表演」就不會遇到動畫排程的問題：想像一下如果游標(biāo)離開了，動畫還緩慢地表演的時候，使用者又快速的重復(fù)游標(biāo)進(jìn)入、離開、進(jìn)入、離開的動作，是否又是另外一場災(zāi)難呢？考慮到這個問題，如果使用程式控制的情況下，就必須細(xì)心兼顧到這個部分的細(xì)節(jié)。

小小一個按鈕、搭配一個簡單的動畫，卻由于牽扯到與使用者互動的部份，即會牽扯出這么多的「細(xì)節(jié)」出來。雖然追求細(xì)節(jié)很耗費時間，大部分的時候恐怕都會被認(rèn)為「這部份不影響產(chǎn)品功能」、「這個不是產(chǎn)品的核心」等等而被草草帶過。但就像著名的設(shè)計師Charles Eames說過：「細(xì)節(jié)本身并非細(xì)節(jié)，而就是產(chǎn)品的精髓?！顾麄兡切┙?jīng)過千錘百煉、精心校條設(shè)計的椅子款式，一直到現(xiàn)在都還是精采的設(shè)計呢。