按鈕的互動細節
以網頁上最常見的互動元素：按鈕來說，網頁上的按鈕一般包含了三種互動效果，分別為：Normal、Hover 以及 Active (Pressed) 。通常狀況下，網頁設計師會利用三張圖片的替換來完成這個效果（不論是使用三張獨立圖片抑或是利用 CSS Sprite 皆是）。
曾經有一段時期，Flash SWF 成為了網際網路的熱門寵兒，視覺化的創作介面讓許多創作者減低了排斥感，成為很多網頁設計師必學的軟體之一。在 Flash 中預設的按鈕元件也提供了相同的互動效果：Up、Over 以及 Down（其中第四個 Hit 為感應區）。由於 Flash 的動畫特性，使用者可以在每個狀態中加入動畫元件，讓使用者與按鈕的互動中加上動態效果。
好了，現在我們可以替按鈕加上動態的效果，例如下面這個狀況：我們在 Over 裡面放了一個黑色色塊的動畫片段。當使用者把滑鼠移到按鈕上方就會觸發這個動畫效果：
在互動上的經驗活潑了不少，但是卻少了點什麼：由於 Over 區塊偵測的是「當滑鼠移動到區塊上時」觸發動畫效果，而當「滑鼠離開區塊時」卻沒有相對應的影格，導致整個動畫效果卻是硬生生的被截斷。
魔鬼藏在細節裡（The devil is in the details），如果我們想要取得完整的體驗，勢必必須考慮到這個容易被大家忽略的部份，也就是不只是游標移到按鈕上方的動畫效果，游標離開的效果也是個列入設計考量的細節之一，理想的狀態如下圖所示：
想要兼顧到這個效果，就不得不利用程式控制來達成目的了（不論是 Flash 或是 CSS / Javascript 等等皆是）。透過程式語言的控制的確可以有效的達到想要的效果、讓設計師的創作想像力更為廣泛，不過也有著無法善加利用圖片，以致創作彈性較低，以及另外一個瀏覽器與平台支援度的問題。
更多的細節
「如果東西如果還能夠與使用者互動，那麼細節就倍增了」，像是同樣的例子，我們將動畫效果減速演出之後，就會發現另外一個問題：「如果使用者在動畫表演到一半的時候，滑鼠又離開別的地方呢？」以下面的按鈕元件為例，動畫是會硬生生被切斷的（因為影格被強制跳出到下一個影格了）。
相對的，這麼做是較為安全的作法，因為當使用者的「游標離開感應區時即強制中斷動畫表演」就不會遇到動畫排程的問題：想像一下如果游標離開了，動畫還緩慢地表演的時候，使用者又快速的重複游標進入、離開、進入、離開的動作，是否又是另外一場災難呢？考慮到這個問題，如果使用程式控制的情況下，就必須細心兼顧到這個部分的細節。
小小一個按鈕、搭配一個簡單的動畫，卻由於牽扯到與使用者互動的部份，即會牽扯出這麼多的「細節」出來。雖然追求細節很耗費時間，大部分的時候恐怕都會被認為「這部份不影響產品功能」、「這個不是產品的核心」等等而被草草帶過。
但就像著名的設計師 Charles Eames 說過：「細節本身並非細節，而就是產品的精髓。」他們那些經過千錘百鍊、精心校調設計的椅子款式，一直到現在都還是精采的設計呢。
----
在今年如果谈起设计来说，没有人可以避开扁平化设计，不管它是否为未来的设计趋势，至少在今年网页设计领域中扁平化很流行很流行。相比以往，扁平化在界面上可以说是一种”偷懒”，界面”偷懒”后，对后面的交互上的细节要求就更加高了。因此Tympanus收集了一些和传统交互效果相比更加有创意且适合扁平化设计的一些案例。本文为 21个链接 Hover 交互样式，原Demo效果在此。
1. 中括号
2. 3D翻转
3. 底部色块平滑渐隐
4. 底部色块快速渐隐
5. 3D浮动
沒有留言:
張貼留言