網頁設計經常拿JavaScript來耍花招、變把戲。
說是把戲,其實,也不過就像Now You See Me這篇文章所說的:「把內容藏起來」或者「把內容秀出來」。
如此而已。
事實上,舉凡頁籤(Tab)、幻燈片(Slideshow)、操作提示(Tooltips)……,無一不是套用「把某些內容藏起來、把某些內容秀出來」這樣的原理在運作。
原理雖然簡單泛用,但,實作上當然還有不少細節需要逐一斟酌計較。
至於各種斟酌計較的取捨變數,冠冕堂皇的說法當然是:對更好的使用者經驗或者用戶體驗( User Experience/ UX )的追求。
我們都清楚,即使是相同內容,依循相同視覺操作原理,選擇不同作法,還是可能帶來不同的用戶體驗。
譬如說:
- 「visibility: hidden;」:內容不見了,內容原本佔有的版面留白。
- 「display: none;」:內容不見了,內容原本佔有的版面也跟著不見。
- 「text-indent: -5000em;」:內容存在頁面上,只是你看不見。
- 把整體內容拆分成好幾個頁面。
一般來說,第1種作法的用意,經常與維繫既有網站訪客的瀏覽慣性息息相關;第2種作法主要是在精省版面空間或降低版面上的視覺或訊息干擾;第3種作法,則是為了SEO( Search engine optimization )。
至於第4種作法,當然是希望網站訪客能多點幾頁才看完所有內容以增加Page View。
對Designer來說,追求UX的關鍵,表面雖然與把戲、作法的選擇有關,但,本質上,客戶期望值才是決斷關鍵。