提升單手操作體驗(yàn),只需要這4個(gè)方法

11 評(píng)論 3867 瀏覽 14 收藏 14 分鐘

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

6 月 7 日凌晨 1 點(diǎn),蘋果全球開發(fā)者大會(huì) WWDC 2022如期舉行,此次大會(huì)展現(xiàn)了全新的視覺設(shè)計(jì)、更高效的交互方式以及更充分的互聯(lián)互通。本文主要結(jié)合iOS此次的更新的功能點(diǎn)分享一些關(guān)于單手操作的設(shè)計(jì)思考以及如何提高單手操作體驗(yàn)。

一、蘋果WWDC2022 3大更新特點(diǎn)

1. 全新的設(shè)計(jì)

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

2. 更高效的交互方式

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

同時(shí)mac、iPad的交互差別被進(jìn)一步縮小,“臺(tái)前調(diào)度”功能讓多窗口、可視化的桌面交互在iPad上落地。

3. 更充分的互聯(lián)互通

無處不在的協(xié)同互聯(lián)——共享相冊(cè)、家人共享、瀏覽器共享等,親朋好友的動(dòng)態(tài)實(shí)時(shí)同步,甚至還有全新的協(xié)作App; Facetime能在Mac、iPhone、iPad上實(shí)現(xiàn)無縫自由流轉(zhuǎn);iPhone能夠通過配件充當(dāng)mac設(shè)備的無線攝像頭,mac設(shè)備也能擁有旗艦主攝級(jí)別的通話攝像頭。

二、iOS與MIUI的設(shè)計(jì)思考

1. 鎖屏通知位置

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

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

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

2. 桌面全局搜索

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

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

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

不難看出不管是iOS還是MIUI,在系統(tǒng)設(shè)計(jì)上都在考慮單手勢(shì)操作的使用場(chǎng)景。喬布斯曾說,3.5寸屏幕是最適合人手大小的手機(jī),但面對(duì)用戶越來越強(qiáng)的視覺體驗(yàn)需求,市面上的手機(jī)尺寸也越做越大,用戶單手操作也越來越難。

三、如何提高單手操作體驗(yàn)

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

1. 用戶如何使用手機(jī)

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

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

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

Steven Hoober通過研究在《Common Misconceptions About Touch》中指出,因?yàn)槲覀兊氖种甘侨S立體且柔軟的,在操作屏幕的時(shí)候,只有手指的部分區(qū)域是和屏幕接觸的,這部分區(qū)域稱為接觸印跡。而觸控屏僅僅感知人們接觸印跡的幾何中心位置來出發(fā)操作,與接觸印跡區(qū)域大小無關(guān)。

除了以上這些因素外,硬件設(shè)備的差異,用戶使用移動(dòng)設(shè)備時(shí)的視線角度都會(huì)影響點(diǎn)擊操作的精準(zhǔn)度。為此 Steven Hoober提出為界面元素分別設(shè)計(jì)視覺目標(biāo)和觸控目標(biāo)(即我們常說的熱區(qū))的建議。

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

3. 關(guān)于3.5寸屏幕

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

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

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

四、單手操作的設(shè)計(jì)思路

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

所以我們?cè)谠O(shè)計(jì)時(shí),應(yīng)該考慮哪些點(diǎn)呢?

1. 縮短大拇指的移動(dòng)路徑,降低操作負(fù)擔(dān)

來看下蘋果的日歷,我們?cè)谔砑右豁?xiàng)日程的時(shí)候,即使是兩只手操作,操作體驗(yàn)也并不流暢,兩只手需要來回調(diào)整位置。整體的操作路徑較長。

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

在日常的體驗(yàn)設(shè)計(jì)時(shí),我們首先可以評(píng)估當(dāng)前操作交互路徑的長短,然后看現(xiàn)有方案是否有可優(yōu)化的空間。

2. 讓核心操作進(jìn)入可觸區(qū)

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

來看一下三星的鎖屏,如果將鎖屏下的相機(jī)和電話操作位置從現(xiàn)有的不可觸區(qū)移動(dòng)到可觸區(qū),操作體驗(yàn)會(huì)更佳。

蘋果密碼解鎖和三星的輸入撥打電話號(hào)碼,其實(shí)都考慮了單手操作的場(chǎng)景,將核心操作區(qū)域像可觸區(qū)移動(dòng)。也就是將核心操作區(qū)域整體像中間靠攏。

3. 讓高頻操作下移

Steven Hoober提出界面元素分別設(shè)計(jì)視覺目標(biāo)和觸控目標(biāo),這里我們可以考慮區(qū)分觸控目標(biāo)和視覺的目標(biāo)。來看一些可參考的案例。

3.1 系統(tǒng)級(jí)別

Steven Hoober提出界面元素分別設(shè)計(jì)視覺目標(biāo)和觸控目標(biāo),這里我們可以考慮區(qū)分觸控目標(biāo)和視覺的目標(biāo)。來看一些可參考的案例。

三星在相冊(cè)和設(shè)置頁面都將核心操作區(qū)域進(jìn)行了下移。

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

安卓系統(tǒng)特有的小窗狀態(tài),也可以很好的解決單手操作的問題。

3.2 第三方應(yīng)用級(jí)別

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

4. 原地操作原則

操作可以根據(jù)上一步點(diǎn)擊位置展開,且仍應(yīng)位于可觸區(qū)域內(nèi)。例如微信的長按信息更多編輯操作。

五、總結(jié)

上述的方案在應(yīng)用時(shí)都要考慮用戶具體的使用場(chǎng)景,過于強(qiáng)調(diào)單手,一方面可能會(huì)增加用戶的學(xué)習(xí)成本,另外也可能浪費(fèi)了大屏的優(yōu)勢(shì),這些都是設(shè)計(jì)師需要去衡量的要素。落實(shí)到每個(gè)具體的產(chǎn)品展中,還需要設(shè)計(jì)師開通腦力思考更多更高效的解決方案。尤其是,當(dāng)屏幕尺寸更大后,我們?cè)撊绾卧诖笃料卤U袭a(chǎn)品的用戶體驗(yàn)也是需要我們不斷思考的內(nèi)容。

感謝你的觀看!

 

本文由 @設(shè)計(jì)師麻小慧 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載。

題圖來自 Unsplash,基于 CC0 協(xié)議。

本文由 @設(shè)計(jì)師慧同學(xué) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載。

題圖來自 Unsplash,基于 CC0 協(xié)議。

該文觀點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 學(xué)到了 學(xué)到了

    來自上海 回復(fù)
    1. 哈哈 你來啦

      來自北京 回復(fù)
  2. 太干了

    來自上海 回復(fù)
    1. 在飲水機(jī)旁看??

      回復(fù)
    2. 呱呱呱呱

      來自上海 回復(fù)
  3. 不管是iOS還是MIUI,在系統(tǒng)設(shè)計(jì)上都在考慮單手勢(shì)操作的使用場(chǎng)景。

    來自吉林 回復(fù)
    1. 是的呀

      回復(fù)
  4. 我喜歡大一點(diǎn)的屏幕,單手操作的話拇指動(dòng)的幅度確實(shí)挺大的,像文章中的設(shè)計(jì)就方便多了

    來自廣東 回復(fù)
    1. 贊??

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

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

      回復(fù)