萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> 交互設計 >> 取代點擊操作

取代點擊操作

取代點擊操作 三聯

  在分析N9的滑動手勢時,分析其如何取代iPhone的Home鍵,提出“取代點擊”的論點。匯總之前幾篇文章,強調這一設計趨勢。觸摸屏的點擊是沿用鼠標點擊的操作,其本身具有諸多不利的因素:

  顯示空間。控件會占用顯示控件,44像素的正方形對於手機界面也是寶貴的顯示空間。

  不易操作。控件需要放置的特定的位置,由於屏幕過大和手持設備的姿勢導致部分控件不容易點擊到。

  精確度。一是點擊手勢有精准性要求,觸摸屏可點擊區域由手指的指肚面積決定。二是用戶點擊的落點通常在目標區域中心的下方。

  尺寸。如按鍵密集的輸入法鍵盤,按鍵大,用戶點擊比較隨意,速度快但導致精准度差。按鈕太小,導致用戶點擊比較小心,點擊速度較慢。

  形狀。圓形和菱形按鈕不如方形按鈕輸入准確率高。

  位置。在大拇指周圍易於點擊,但是右下角點擊的准確度卻不如左上角的按鈕。

  隱喻。點擊與現實生活的隱喻很弱,按鈕通過指示開關或者某項特定的操作,但是刪除、下載、關閉、打開和切換等操作與點擊沒有直接的關系,這也是和鼠標操作比較單一有關系,觸摸屏的操作方式更為豐富,自然用戶界面(NUI)比圖形界面(GUI)更為直接,與其說是隱喻,不如說直接表現物理世界,轉向最自然的交流方式。

  從更多的設計中可以看出,以滑動和拖拽等手勢取代點擊已經成為交互設計的一種趨勢。以滑動手勢舉例,設計中使用滑動手勢取代點擊有諸多優點:

  更方便。滑動操作與點擊相比,易操作,甚至可以全屏操作。如憤怒的小鳥,在拉彈弓時,並不要求精確操作某個區域,這一點應用在很多游戲的交互設計中。又如Android3.0左右滑動切換標簽。

  扁平化界面。如ios5相機取景時,滑動界面可以查看之前的照片,界面切換不是通過點擊跳轉,而是平級的呈現方式。

  節約顯示空間。如iPhone豆瓣主界面下拉顯示搜索框、Palm應用程序界面隨著滑動軌跡顯示常用功能、郵件列表向右滑動刪除郵件和微博列表下拉刷新,可以減少控件占有顯示空間,控件只在需要的時候出現,讓用戶的注意力放置在主體內容上。

  減少誤操作。當控件被取代之後,由於控件本身指示性弱和控件過小導致點擊不精准導致誤操作的問題出現的概率更小。

  隱喻強。Palm的卡片刪除多任務和郵件列表右滑刪除郵件隱喻“移除”,而不是呆板地點擊一個叉叉圖標。

  通過對比,滑動比點擊有著很多優勢,雖然個別操作需要學習成本或者暫時作為快捷操作,應用在設計中確實可以提升體驗,特別對於翻頁這種頻繁的操作。除此之後,滑動作為本身還有很多特性可以利用。

  從技術的角度來,是通過參數來識別手勢。點擊是獲取手指觸摸屏幕的坐標,滑動是獲取坐標和時間,拖拽是長按加上滑動操作。連接各個時間點的坐標繪制出滑動曲線軌跡,這個曲線可以利用的參數有:

  方向性。在Safari裡可以任意方向滑動頁面,iPhone主界面可以左右滑動,WP7的sina微博可以上下和左右滑動,百度手機輸入法可以四個方向滑動選詞。當只能單方向滑動,如左右,左右方向Y軸只要有位移都可以導致滑動;當可以兩個方向滑動,滑動根據位移所在的區間識別滑動方向,WP7的應用程序有時會分辨不清滑動方向。

  慣性。滑動軌跡具有慣性,當手指離開觸摸屏時有速度,滑動效果不會立即結束,比如網頁的快速滾屏效果。在Android系統主界面,緩慢左右滑動半屏,界面並不會切換,當快速短距離左右滑動時,界面會根據慣性切換,這和現實世界的物理運動規律相吻合的。

  起點和終點。在特定的區域內開始滑動,操作不同,如百度手機輸入法的滑動選詞,滑動手勢也可以像點擊一樣限定區域。N9由底部向上滑動在五分之一區域停留識別為切換多任務。

  這些是滑動的基本元素,更為復雜的操作需要應用程序自定義,如swype輸入法是利於曲線的折角識別選擇的字母,浏覽器可以定義滑動的快捷操作,順著這個 思路可以預見將會有更多的滑動操作方式出現。

  文章來源:daichuanqing.com/index.php/archives/2948

copyright © 萬盛學電腦網 all rights reserved