提升單手操作體驗,只需要這4個方法

11 評論 3414 瀏覽 15 收藏 14 分鐘

編輯導讀:現在的手機屏幕越來越大,有時候單只手都握不住更別提單手操作了。但是單手操作是最方便且常用的交互方式,本文作者根據這次iOS的更新,分享了一些自己對提升單手操作體驗的想法,與你分享。

6 月 7 日凌晨 1 點,蘋果全球開發者大會 WWDC 2022如期舉行,此次大會展現了全新的視覺設計、更高效的交互方式以及更充分的互聯互通。本文主要結合iOS此次的更新的功能點分享一些關于單手操作的設計思考以及如何提高單手操作體驗。

一、蘋果WWDC2022 3大更新特點

1. 全新的設計

全新的鎖屏設計更自由、更有趣,更實用,除了可以用自己喜歡的照片和字體外,還能顯示各種小組件;鎖屏還可以實時展示活動,隨時了解正在發生的事情,并且可以制定不同的鎖屏。

2. 更高效的交互方式

iOS16此次更聚焦搜索框、鎖屏通知全部下移,可以以展開、疊放或隱藏視圖的方式進行展示。單手操作更加方便。

同時mac、iPad的交互差別被進一步縮小,“臺前調度”功能讓多窗口、可視化的桌面交互在iPad上落地。

3. 更充分的互聯互通

無處不在的協同互聯——共享相冊、家人共享、瀏覽器共享等,親朋好友的動態實時同步,甚至還有全新的協作App; Facetime能在Mac、iPhone、iPad上實現無縫自由流轉;iPhone能夠通過配件充當mac設備的無線攝像頭,mac設備也能擁有旗艦主攝級別的通話攝像頭。

二、iOS與MIUI的設計思考

1. 鎖屏通知位置

iOS:顯示位置下移,默認顯示的通知數量變少,支持展開列表、疊放列表、隱藏列表三種視圖方式展示。

MIUI:鎖屏的位置在圖片中間顯示,平鋪展示。

對比:從閱讀效率的角度,MIUI的鎖屏通知展示數量更多;從鎖屏通知的展示方式來看,iOS支持多種方式展示,整體更自由、更靈活。

2. 桌面全局搜索

iOS:全局搜索功能下移至dock欄上方,方便單手操作,且不遮擋其他元素,用戶下拉時進入全局搜索。

MIUI:具備桌面搜索框,目前不支持頁面下拉進入全局搜索,下拉手勢可以進入消息通知和工具欄。

對比:均保留桌面快捷入口,搜索入口更高效、便捷。

不難看出不管是iOS還是MIUI,在系統設計上都在考慮單手勢操作的使用場景。喬布斯曾說,3.5寸屏幕是最適合人手大小的手機,但面對用戶越來越強的視覺體驗需求,市面上的手機尺寸也越做越大,用戶單手操作也越來越難。

三、如何提高單手操作體驗

在講單手操作之前,我們先來了解一下用戶是如何使用手機的,以及觸控屏是如何感應我們的操作的。

1. 用戶如何使用手機

Steven Hoober在《How Do Users Really Hold Mobile Devices?》一文中指出,通過兩個月的時間對1333名手機用戶在公眾場所(街道、機場、汽車站、咖啡館、火車上、汽車上等)使用習慣的觀察得出以下結論:

  1. 780名用戶是通過滑動、點擊、打字等來操作屏幕,其他用戶則僅僅是用手機來收聽、觀看、打電話。
  2. 49%的用戶通過單手操作,36%一手拿著手機一手操作,另有15%雙手操作。
  3. 在單手操作用戶中,有33%的用戶用左手拇指來操作。
  4. 用戶經常變換操作姿勢和手勢。

2. 觸屏是如何感知操作的

Steven Hoober通過研究在《Common Misconceptions About Touch》中指出,因為我們的手指是三維立體且柔軟的,在操作屏幕的時候,只有手指的部分區域是和屏幕接觸的,這部分區域稱為接觸印跡。而觸控屏僅僅感知人們接觸印跡的幾何中心位置來出發操作,與接觸印跡區域大小無關。

除了以上這些因素外,硬件設備的差異,用戶使用移動設備時的視線角度都會影響點擊操作的精準度。為此 Steven Hoober提出為界面元素分別設計視覺目標和觸控目標(即我們常說的熱區)的建議。

另外一個將視覺目標和觸控目標分開設計的方法即為我們常說的手勢操作,如上文所述手機使用過程中單手和左手操作的用戶比例都比較大,好的單手操作手勢設計能有效提高使用效率,減少誤操作,給用戶帶來驚喜。

3. 關于3.5寸屏幕

Steve Jobs once said that the 3.5-inch screen is the“perfect size for consume”。喬布斯曾說,3.5寸屏幕是最適合用戶的尺寸,過大的屏幕是愚蠢的。

其實所謂的“Perfect Size”其實是站在單手操作的角度考慮的完美尺寸。當手機尺寸為3.5英寸時,單手大拇指可以觸碰到屏幕至少90%以上的區域。

而如今屏幕尺寸已經擴大了1.5倍,在接近7寸的尺寸里,我們的手還可以觸碰到哪里?

四、單手操作的設計思路

通過分析用戶的操作習慣可以劃分出難易操作區域,下圖呈現的是左右利手的操作區域難度劃分,綠色為“易觸區”,動動大拇指就可以碰到;黃色為“可觸區”,努努力可以夠到,可能容易按錯;紅色為“不可觸區”,努力也夠不到,手的負擔大,誤觸率很高;不難看出更易操作的區域位于屏幕的中下方。

所以我們在設計時,應該考慮哪些點呢?

1. 縮短大拇指的移動路徑,降低操作負擔

來看下蘋果的日歷,我們在添加一項日程的時候,即使是兩只手操作,操作體驗也并不流暢,兩只手需要來回調整位置。整體的操作路徑較長。

我們可以嘗試縮短大拇指的移動路徑,來看一下效果。

在日常的體驗設計時,我們首先可以評估當前操作交互路徑的長短,然后看現有方案是否有可優化的空間。

2. 讓核心操作進入可觸區

這里我們主要考慮盡量在能力范圍內讓核心操作進入可觸區域,比如從紅區的“不可觸區”盡量到黃區的“可觸區”,提高單手操作下的整體體驗。

來看一下三星的鎖屏,如果將鎖屏下的相機和電話操作位置從現有的不可觸區移動到可觸區,操作體驗會更佳。

蘋果密碼解鎖和三星的輸入撥打電話號碼,其實都考慮了單手操作的場景,將核心操作區域像可觸區移動。也就是將核心操作區域整體像中間靠攏。

3. 讓高頻操作下移

Steven Hoober提出界面元素分別設計視覺目標和觸控目標,這里我們可以考慮區分觸控目標和視覺的目標。來看一些可參考的案例。

3.1 系統級別

Steven Hoober提出界面元素分別設計視覺目標和觸控目標,這里我們可以考慮區分觸控目標和視覺的目標。來看一些可參考的案例。

三星在相冊和設置頁面都將核心操作區域進行了下移。

蘋果的消息通知位置在這一次也變得更低了。單手操作確實更方便了,你喜歡這個改動嗎?

安卓系統特有的小窗狀態,也可以很好的解決單手操作的問題。

3.2 第三方應用級別

比如高德地圖,以選擇界面布局方式,其中一種將搜索條下移,上方保留可視區域,還有許多典型的應用也是此種布局,比如滴滴、音樂類app等。

4. 原地操作原則

操作可以根據上一步點擊位置展開,且仍應位于可觸區域內。例如微信的長按信息更多編輯操作。

五、總結

上述的方案在應用時都要考慮用戶具體的使用場景,過于強調單手,一方面可能會增加用戶的學習成本,另外也可能浪費了大屏的優勢,這些都是設計師需要去衡量的要素。落實到每個具體的產品展中,還需要設計師開通腦力思考更多更高效的解決方案。尤其是,當屏幕尺寸更大后,我們該如何在大屏下保障產品的用戶體驗也是需要我們不斷思考的內容。

感謝你的觀看!

 

本文由 @設計師麻小慧 原創發布于人人都是產品經理,未經許可,禁止轉載。

題圖來自 Unsplash,基于 CC0 協議。

本文由 @設計師慧同學 原創發布于人人都是產品經理,未經許可,禁止轉載。

題圖來自 Unsplash,基于 CC0 協議。

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 學到了 學到了

    來自上海 回復
    1. 哈哈 你來啦

      來自北京 回復
  2. 太干了

    來自上海 回復
    1. 在飲水機旁看??

      回復
    2. 呱呱呱呱

      來自上海 回復
  3. 不管是iOS還是MIUI,在系統設計上都在考慮單手勢操作的使用場景。

    來自吉林 回復
    1. 是的呀

      回復
  4. 我喜歡大一點的屏幕,單手操作的話拇指動的幅度確實挺大的,像文章中的設計就方便多了

    來自廣東 回復
    1. 贊??

      來自北京 回復
  5. 哈哈哈哈哈我就是喜歡用右手單手刷手機,所以所有的應用都放在右下角大拇指可以夠到的所有地方

    來自廣東 回復
    1. 哈哈 可以,也是一種方法

      回復