網頁

2010-08-01

觸控環境的網頁 UI 設計


(影片來源 YouTube)

話說前陣子有位戴墨鏡、壓低帽緣的神秘 A 女拿了台 iPad 借我玩兒,當下立馬測試了一下自己的網頁,想不到... 不試則已,一試成主顧!朦朧之中便與 呷勃濕 神交了起來... (水波轉場畫面)

呷:That is the best browsing experience you've ever had.
我:的確是很棒的瀏覽網頁體驗,印象深刻。
呷:What it does is extraordinary.
我:是的,不過我在使用時...
呷:It's amazing, isn't it?
我:嗯嗯... 是很驚艷,但是...
呷:Unbelievably great!
我:呃... 我想說的是...
呷:So cool~ (陶醉)
我:............
呷:Phenomenal!

(十分鐘過後)

呷:Incredible product!
我:...... 好啦~ 你最大、你最強、你會的形容詞最多!
呷:Awesome!

(就降,我與呷勃濕的對談就在他一面倒的陶醉聲中結束了...)


鋪陳了這麼多,這篇又快變垃圾文了,趕快跳一下給它拉回來!

試用過 iPad 之後,我沉思了良久,沉澱後的心聲在我腦海中迴盪著:User friendly 都不 user friendly 了啊!!! 此話怎講?話說像我們這麼 nice 的人,想必作出來的 UI 也是對使用者灰熊友善的溜,然而以往 UI 的友善設計,在 touch panel 風起雲湧、手指紛紛出頭天的情況下,勢必有重新檢討的必要,是時候該進入咱們的主題了,觸控環境的網頁 UI 設計!(陰文標題:finger friendly web UI),咱們來聊聊... 有哪些該注意的地方:

  • 太近太小的點選範圍:
    使用滑鼠的環境下這也是個該考量的點,但是在觸控的環境下,這個問題更容易被凸顯出來,因為敝人肢體肥大 (我是說手指),心理層面來看,太近或太小的點選範圍讓我很沒有安全感,(口白:手指頭壓下去的範圍那摸大,不雞道能不能壓到我要的那個小點點?),這種痛苦,好似意圖用大拇指精準地掏出 一排小鼻孔裡的某一顆小鼻屎 一般,煞是惱人哪!

  • Mouse hover:
    常見於選單或者額外資訊的說明,意指滑鼠移到某個元件之上就作某些相對應的動作 (例如:跳出下一層選單、浮現說明視窗、...),這在滑鼠的環境是滿友善的設計,然而到了觸控的環境,(呷勃濕跳出來:hover 洗殺小),使用 hover 的選單或資訊就會出不來,37signals 也為此修改了他們的 app 設計,參考 37signals Product Blog,看看他們的影片應該就很清楚了。

  • 和鍵盤搭配的操作:
    以 jquery UI 的 selectable 舉例,套用 selectable plugin 之後,elements 就變成可以點擊選取,搭配上 Ctrl/Meta key 使用,可以達到多選的效果,參考 jquery UI demo,奈何觸控面板沒法讓你同時作 keyboard + finger 這樣的操作,所以這樣的情況下想要用鍵盤輔助多選,死路一條。

    在觸控環境下要作多選的效果,比較好的方式是直接對每個 selectable elements 作 toggle selection,點了就選取,再點一次就取消選取,點了幾個就選幾個,也就是不需要按住 Ctrl/Meta key 情況下,就有原本 selectable plugin 要按 Ctrl/Meta key 才有的效果。

  • 框選套索 (lasso):
    意指滑鼠按鍵按下不放,拖拉出一個選取的方框,包含在此方框中的元素都會被選取,jquery UI selectable plugin 也有支援這種操作,印象中好像 iPad 也有點不相容,但由於本 blog 並無實事求是的精神 (強調),加上 iPad 也被神秘的 A 女拿回去了,所以 lasso 屬於無法證實也懶得求證的一點。

    但我在想這點在技術上是可行的,只是現有的 lib 有沒有對觸控裝置 tune 過而已,有興趣的讀者可以自己實驗一下。


礙於時間關係,今天就先講到這兒,現場開放一個問題......
來~坐在左邊走道,頭上插一枝玫瑰花的那位大嬸,
啥?神秘的 A 女是誰?
基本上這個秘密全世界只有三個人知道,一個是我,一個是她本人,還有一個是誰我不能說。

假如各位對相關的議題有什麼想法,歡迎多多提出討論。

2 則留言:

  1. 你不用跟我說A女是誰,告訴我他叫什麼名字就好。

    回覆刪除
  2. to MORGAN,
    好奇心殺死一隻喵,知道太多對你沒好處...... 口弗口弗口弗~

    回覆刪除