行動裝置 App中的流設計

      

移動情景

 

構成
節點
流

接下來將對視覺焦點、觸點，以及之間的流進行闡述，力求在應用的細節設計上提供一些不一樣的思路。

把握使用者的視覺焦點

      視覺焦點需要運用在資訊的聚焦點。如何讓使用者更清楚地看到使用者想看的，或是產品希望使用者看到的內容，互動設計師們需要考慮清楚這個焦點是什麼，而非僅僅是邏輯結構的鋪敘。如左圖，傳統的設計風格會通過標題的底色和字型的加粗，讓使用者的視覺焦點優先集中在標題上，因為這樣似乎邏輯更清晰。但是在倡導內容優先的情況下，如果更願意讓使用者關注內容，而非標題，可以通過右圖中區別內容和其他內容在空間上的前後關係來突顯內容。 如果是類目搜尋則更適合前者，因為使用者需要聚焦於標題才能快速定位到自身所需要的資訊。

      觸點是行動裝置 App直接操控特性的體現，在行動裝置的觸控螢幕上，沒有了物理按鍵的區塊感和觸覺反饋，引導操作和操作反饋大部分都由視覺承擔。對許多使用者的研究表明，淺橙色地區是右手拇指的熱區，而視覺點擊地區不宜小於44px，由於存在視差的關係，實際操作地區會比視覺地區略大並靠下。

 

      是一個數獨遊戲的設計，刻意地將視覺焦點和觸點進行分離，為觸控設計出親和的圓形地區，並減少了視覺焦點被手指遮擋的問題，顯得貼心而周到。

      點擊的觸點其實延續了PC 的互動方式，但缺少了PC 端的hover 態。為了確保使用者得到點擊結果的資訊，可以拆分為兩次點擊。比如iOS 市場的應用下載，首先顯示價格，點擊價格後，按鈕變化為下載，通過增加一次點擊完成資訊的確認。為了防止誤點，更好的方式是改換為滑動手勢的觸點，一般滑動需要有一定的距離才被視為執行操作。比如iPhone的解鎖方式，只有從左滑到右才能解開鎖屏的狀態，誤點等是無法完成這樣的操作的。同時使用者在滑動的過程中，通過滑塊的控制感，對操作結果就有了足夠的心理預期，就能夠帶來流暢的體驗。

 

 

本文節選自《移動設計》一書

傅小貞胡甲超鄭元攏著

電子工業出版社出版