DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 關於網頁技巧 >> 移動互聯網產品設計:滑動手勢功能性設計
移動互聯網產品設計:滑動手勢功能性設計
編輯:關於網頁技巧     

破洛洛文章簡介:探索滑動手勢.

Nokia N9剛剛發布,滑動手勢承擔了更多的功能性操作。從按鍵手機到iPhone的Home鍵,讓人不禁聯想,實現全觸摸屏手機已經指日可待了。

iPhone Home鍵已經承擔的過多的操作,單擊退出程序,雙擊進入多任務,自定義三擊顯示輔助操作,組合開機鍵截屏,恐怕這是所有手機中使用率最頻繁的按鍵了。但是功能越來越多,要麼繼續壓搾按鍵,要麼挖掘新的手勢操,責任自然落在點擊和滑動這兩個最基礎的手勢操作。

比起電腦鼠標,觸摸點擊存在問題,但同時交互設計上可在采取各種優化措施。

觸摸屏點擊形式本身單一,沒有左右鍵點擊之分。對於手機系統,可以獲取觸摸區域和時間,由此根據觸摸目標和時間長短衍生出長按操作,相當於鼠標右鍵點擊;根據觸摸的時間間隔衍生出雙擊,但與鼠標的雙擊有區別。以鼠標在桌面上打開應用程序為例,鼠標停留效果之後第一擊選擇目標焦點,第二擊相當於確認目標,觸摸屏點擊沒有鼠標停留效果和選擇目標焦點的概念,相比之下簡化了操作,但是少了必要的富交互效果,比如查看圖標屬性。

鼠標可以精確到1像素,觸摸屏點擊區域推薦為29像素,而且用戶在點擊觸摸屏目標區域時並沒有真正點中,存在一定偏差。這種缺陷在按鍵密集的輸入法上體現尤為明顯,頻繁的誤點擊會影響用戶的操作流。

滑動手勢可以和長按組合出拖動,除此之外僅僅停留在滑動頁面顯示區域。滑動模擬物理運動規律,慢速滑動時頁面滾動的范圍等於手指運動的區域,快速滑動時滾動的范圍要計算手指移動的慣性,頁面移動速度由快變慢。手機得到的參數有:觸摸點坐標和時間,但坐標點和時間關系並不是一維的, 觸摸點坐標隨著時間變化也會發生變化,由此可以分析出手指移動的起始點、終點、移動速度、加速度和滑動曲線等。

與點擊和操作按鍵相比,滑動優勢存在不少優勢:

1.沒有明確的目標區域。比如浏覽器頁面中任何位置都可以執行滑動操作。N9解鎖屏向上滑可以顯示多任務,向右滑動顯示消息推送和功能列表, iPad版Maven浏覽器將頁面滾動限制在特定區域,反而會影響頁面的操作效率,書簽和else-mobile一樣將原本層級點擊操作轉變為滑動操作,用戶手持設備的方式各不相同,同樣會遇到操作效率和單級中顯現的功能有限的問題,優點在於其形式占用的空間小。

2.小區域內可以容納更多的選項。百度手機輸入法的拼音拇指輸入,“2abc”同時顯示在一個按鍵,在按鍵上上滑數字“2”,利用滑動的方向選擇不同的字母或者數字。還有MIUI最新的百變解鎖屏,同樣是在利用同樣的起點但方向不同的滑動區分操作。

3.比連續點擊更快速。Swype輸入法之所以快捷,把點擊變為滑動操作,省去連續輸入過程中的手指重復的抬起和按下。

4.彌補點擊難以精確的缺陷。iPhone和wp7使用滑動操作調節文本光標,以滑動的位移代替點擊插入光標。

N9屏外的觸摸區只是全觸摸屏手機發展過程中的過渡方案,其實沒有觸摸區也能勝任已有的滑動,猜想系統在判斷滑動起始點可以用屏幕內的邊緣為基准,增加觸摸區的概念純粹是“欺騙”用戶,減少誤操作。滑動操作並不像點擊那樣立即響應,當中途發現誤操作也是可以取消。從屏幕內滑向屏幕外應該可以執行頁面內滑動,因為在滑動的開始時系統無法預知終點是否會在屏幕外。

(圖片來自ifanr)

三主屏左右滑動切換,形式和操作效果符合物理規律。在應用程序,如果之前是從多任務進入的,從觸摸區四個方向滑動都可以返回多任務,從應用程序返回多任務時邊界的陰影可以看出是前後兩個界面,應用程序在三主屏的前方。在多任務進入應用程序時,應用程序從右邊向左滑進顯示區域,而不是放大之後覆蓋多任務界面,界面之間的位置關系缺乏方向感。

也許受iPhone的影響,這種操作需要時間去適應,在看到視頻時本以為從屏幕上方滑進會顯示消息通知欄,從底部滑進是返回或者顯示多任務。把N9的多任務誤以為是safari的多窗口,把多任務作也作為三主屏並顯示應用程序的縮略圖,比起圖標式多任務除了增加點擊區域,沒有優點。Safari使用網頁縮略圖顯示多窗口,因為縮略圖比網站標題操作的效率更高,還可以顯示網頁的加載狀況。N9多任務界面長按操作調出“刪除”按鈕,為什麼要多次一舉,不直接在縮略圖上顯示“刪除”圖標。

N9的滑動操作確實有創新之處,比iPhone更進一步,但不完美。

試想下iPhone去掉Home鍵會怎麼樣?現有的系統界面結構完全符合條件。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved