移動應用中的流設計

目光和手指的循跡

      

移動情景

作為應用的設計者，我們常常以應用自身的邏輯為線索進行設計，一頭沉浸在頁面與原型的製作中。 而大部分的應用在使用過程中，使用者的目光和觸控是與應用共舞的主要參與者，如人-機-環中使用者的輸入輸出，以視覺輸入、觸控輸出為主要的互動通道。為了提升使用者在感知層面的體驗，我們可以順著使用者的目光出發，關注使用者在介面中注意力焦點轉移的過程，同時循著使用者手指的痕跡來發現使用者直接操作的軌跡，以此設計我們的應用。

這裡將提出一個流系統的框架，並講述如何在這個框架中提升使用者的感知體驗。

目光和手指迴圈而成的流系統

在 使用者與應用透過目光和手指進行互動的過程中，存在著如上圖所示的一個流系統——使用者的視覺通道接收著介面的絕大部分資訊，視覺焦點（注視點）是使用者資訊加 工的載體，使用者持續關注內容後會留下一連串的視覺焦點，在介面中這些視覺焦點的流向，我們稱為視線流。使用者透過視覺獲得了輸入資訊，並透過應用介面進行反 應操作，使用者在介面中的操作的接觸點會形成觸點。在一個任務中，連續的觸點會形成一條操作的軌跡，我們稱為操作流。使用者透過觸點對應用進行輸入，應用介面 做出相應的反饋，使用者透過視覺焦點接收資訊，並決定下一步的觸點操作。這是流系統的迴圈過程，大部分互動都是由這些視覺焦點，觸點以及之間的流構成。

 

流系統中的視覺焦點包含了應用突出呈現給使用者資訊，它抓住了使用者的視覺注意力，觸點則是承擔了使用者對應用的輸入介面，是移動應用的直接操作的體現。

一個好的應用設計應該每次都能及時把最核心的內容突顯出來，且視覺焦點的轉移很流暢，不需要使用者多次來回掃視；操作觸點也不需要使用者往復地轉動、伸縮手指。視覺焦點和觸點間的流軌跡都很流暢，互動的阻力更少，使用者不用思考。那我們應該怎麼設計才能使兩個軌跡更流暢呢？

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

把握使用者的視覺焦點

視線流的形成來源於視覺注意力的轉移機制。除了主動的注意外，視覺注意很容易被動的轉移。如下表是造成視覺注意轉移的各種因素，對比越大，越容易轉移。透過這些不同維度的差異對比，可以讓使用者輕鬆轉移視覺焦點，這也是介面引導的設計基礎。

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

手指的觸點區域

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

 

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

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

 

 

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

傅小貞 胡甲超鄭元攏 著

電子工業出版社出版