[技術.網站設計]當滑鼠進化成觸控式行動裝置上的手指

Mouse-vs-touch

當行動裝置碰上傳統的滑鼠動作

小編這次要來談談現在很夯的行動裝置網站設計的概念的…..一小部分!

本篇主要是希望提供未來會找我們承接網站設計的訪客

一般使用者了解手機跟電腦網頁執行方式的不同, 以及為什麼建議可以考慮同時設計行動裝置版與一般電腦版網頁的一部分原因。

(更多設計性/人機介面等等的話題等以後有興致再來談!)

這次的主題是當瀏覽網頁的工具由電腦變成行動裝置, 由 滑鼠 變成 手滑(還不小心掉到地上)

對於網頁設計/網站程式設計上有什麼影響呢?

正文開始 :

以前有一種很常被用在部落格的網站設計程式效果(當然有時候不是很好看的效果)

mousemove

以前曾流行過的滑鼠後面跟著很多圖片的效果

在瀏覽一些網站的時候, 會發現滑鼠游標後面跟著很多有的沒的星星/月亮/太陽/叉燒包(圖片不見了在IE會顯示一個叉)

無論怎麼甩滑鼠都無法逃脫他們的糾纏, 而現在, 這種煩惱在觸控式行動裝置已不復在了, 因為行動裝置沒有滑鼠這個概念!

 

還有一種現在比較新型態網站常用的功能(如Blogger, Pixnet 後台管理會用到)

drag&drop

在一般的電腦瀏覽器中可以達成的拖曳效果

因為觸控式行動裝置沒有滑鼠這回事, 有些針對滑鼠移動功能製作的拖曳效果並無法順利執行,

 

還有一種網站設計特效恐怕也會變成網站設計無效了, 這個效果被非常大量的採用中.

常用在網站有很多項目時使用的下拉選單特效

這個滑鼠移入時會展開選單的效果在iPhone/iPad/Android恐怕也無法使用, 因為沒有滑鼠滑入這個狀況可以提供網頁判斷.

 

簡單的整理後希望大家都可以理解及不會嫌棄我用語太工程師並且用內容生動活潑風趣幽默的方式來說:

一般有滑鼠的電腦瀏覽器:

  1. 滑鼠滑入某個連結或東西上, 可以來讓網頁的程式可以產生一些動作反應(例如滑鼠滑上去會展開Menu)
  2. 可以根據滑鼠的座標讓網頁運算(例如讓滑鼠游標[箭頭]後面跟很多小雞圖片)
  3. 瀏覽器可以判斷滑鼠是不是在某張圖片(或其他畫面上的東西)上移動.
  4. 瀏覽器可以判斷你按下了滑鼠左鍵後放開了沒.
  5. 可以點了某個東西之後移動滑鼠, 讓你點的東西跟著移動(如上面的拖曳移動示意圖)
  6. 滑鼠點一下網頁會有反應
而到了觸控式的行動裝置(iPhone/iPad/Android)後:
  1. 因為沒有滑鼠, 而只有手指可以戳, 在Menu部分無法判斷使用者的意圖是點了Menu要連過去新網頁,  或是讓Menu展開以顯示更多選項, 所以無法使用Menu自動展開的特殊效果. (除非那個Menu就是點了一下之後會展開, 再點一下就關起來的話還可以繼續用)
  2. 沒有滑鼠坐標, 但是可以改用預設最高10個點(用10隻手指頭戳)的多點觸控座標來判斷戳了哪些地方.
  3. 可以判斷手指戳下去之後是不是在拖曳移動, 以及手是否戳完螢幕拿起來了, 所以還是可以做出拖曳的特殊效果.
  4. 手指戳一下網頁會有反應

(設計師 : 不要用手戳我的螢幕!)

雖然在上面的說明中, 部分能做的事情看起來差不多, 但是實際上需要完全不同的程式來處理!

也就是只有在 “點/戳下去一下" 的這個部分滑鼠與手指頭的程式可以共用. 而其他所有的功能都需要不同的程式來處理.

因此如果您想要有一個美好的行動裝置版網站時,請再多花點預算另外做個版本,
透過刪減及調整行動裝置版本上要呈現的資訊與特效程式,讓手機網頁運作更順暢,資訊更清晰,操作體驗更理想吧!


(如果覺得本文不錯的話, 成為粉絲並讚吧!)


Categorised as: Knowlege 知識‧網站設計


發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *

*

你可以使用這些 HTML 標籤與屬性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>