大屏手機(jī)單手操作不方便,產(chǎn)品頁面該如何設(shè)計(jì)?

3 評論 5014 瀏覽 32 收藏 12 分鐘

喬布斯曾說,3.5寸屏幕是最適合人手大小的手機(jī),但面對用戶越來越強(qiáng)的視覺體驗(yàn)體驗(yàn)需求,市面上的手機(jī)越做越大,用戶有點(diǎn)難~

大屏下單手操作——難!

Steven Hoober 在其2013年的手機(jī)設(shè)備研究報(bào)告中指出:49%的用戶單手持機(jī)操作,36%的用戶一手拿著手機(jī)另一手進(jìn)行操作,另有15%的用戶雙手持機(jī)操作。到了大屏?xí)r代,單手持機(jī)的方式仍是主流。必須要承認(rèn)的是,面對大屏,單手持機(jī)不那么方便了。比如想要點(diǎn)擊頂部的發(fā)送按鈕,尤其是在移動場景中,就不那么方便了。

這種情況下,我們可以用手機(jī)指環(huán)幫助自己穩(wěn)定地進(jìn)行操作;也有能人異士自創(chuàng)了一套“反彈琵琶”的技能,通過反彈的方式用另外四只手指自如操作手機(jī)。當(dāng)然還有一群設(shè)計(jì)師,為此也是操碎了心。

解決問題的設(shè)計(jì)思路

通過分析用戶的操作習(xí)慣可以劃分出難易區(qū)域,下圖呈現(xiàn)的是左右利手的操作區(qū)域難度劃分,綠色為最易,紅色為最難??梢钥闯龈撞僮鞯膮^(qū)域位于屏幕的中下方。

那么面對大屏,有沒有好的辦法去解決呢,以市面上的手機(jī)為例,主要的解決思路有兩種:

  1. 操作下移
  2. 手勢代替點(diǎn)按

1. 操作下移

方法一:區(qū)分視覺和觸控目標(biāo)(StevenHoober提出為界面元素分別設(shè)計(jì)視覺目標(biāo)和觸控目標(biāo))

系統(tǒng)級的處理:三星&VIVO對于預(yù)置界面做了區(qū)域的劃分(見下圖),即上部為顯示,下部為操作,vivo是需要界面下拉到屏幕中部才會變?yōu)檫@種布局,而三星默認(rèn)如此,下滑時變?yōu)槠胀ń缑?,?nèi)容充滿屏幕。

相機(jī)界面,三星在相機(jī)中之前嘗試過將一些操作下移,而蘋果是在最新一代相機(jī)中將頂部的功能下移,需要下滑特定區(qū)域才能顯現(xiàn)。

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

方法二:半屏狀態(tài)(一般用于一些臨時狀態(tài))

iOS系統(tǒng)在雙擊home鍵(全面屏手機(jī)為下滑導(dǎo)航條)可實(shí)現(xiàn)半屏效果,頁面內(nèi)容只顯示一半。用戶可以輕松操作原本在頂部的區(qū)域。并且如果操作之后是跳轉(zhuǎn)到新的頁面,則會自動變?yōu)槿粒绻€在頁面內(nèi)就依然保持半屏狀態(tài),非常全面的考慮。

在oppo的操作系統(tǒng)color os7中提出了半屏交互的操作方式,很多頁面都用了半屏的處理方式。一方面是幫助用戶更好理解頁面層級,另外也有利于單手操作)

方法三:小窗模式

安卓系統(tǒng)特有的狀態(tài),見下圖,同時考慮到左右利手的習(xí)慣問題。

某些輸入法也是如此,調(diào)整尺寸以適應(yīng)單手操作,但一些用戶反饋這樣的新布局對于九宮格的輸入法還較為實(shí)用,對于全鍵盤因?yàn)辄c(diǎn)擊區(qū)域變小,反而影響識別率。

2. 手勢優(yōu)先

方法一:用手勢代替點(diǎn)按

手勢>點(diǎn)按;豎滑>橫滑。比如將底部的tab按鈕切換替換為頂部的tab通過手勢。

安卓現(xiàn)在推出的全面屏手勢,用戶可以通過直接滑動不同位置來完成諸如返回主界面、切換多任務(wù)等操作。用戶可以通過手勢交互執(zhí)行后退、返回至主屏以及打開設(shè)備助手等操作。如果用戶自定義程度需求較高,也可以通過諸如“Mygesture”的應(yīng)用來完成更多的操作定義。

?

類似于抖音、微博、小紅書等通過滑動直接切換下一條,都是利用手勢設(shè)計(jì)便于用戶切換內(nèi)容,讓用戶更好地停留在軟件內(nèi),無法自拔。

知乎的手機(jī)端有點(diǎn)反向設(shè)計(jì),在其改版后,去掉了左右滑動以切換答案,而是通過向下滑看完整個答案后才切換或者點(diǎn)擊一個懸浮按鈕后,這引來了一部分的用戶不滿,認(rèn)為切換答案不方便了,不過筆者認(rèn)為這種下滑的瀏覽兼顧切換的方式更符合整個產(chǎn)品的邏輯,也更易于讓用戶沉浸其中,看完一個答案剛好接著看另一個,當(dāng)然對于平臺而言,這也能提升底部的廣告瀏覽量。

模塊內(nèi)的具體應(yīng)用分析

1. 三星——相機(jī)

三星在ONEUI9.5系統(tǒng)中,對手機(jī)的相機(jī)模塊做了比較大的布局改動,將其模式選擇放到了取景框的上方,而本來在頂部的輔助功能在被移到了取景框的下方。

另外一些常用操作都可以通過手勢實(shí)現(xiàn),比如切換前后攝像頭,只需豎向滑動即可。

這樣設(shè)計(jì)的好處有二:

  1. 將信息區(qū)域和操作區(qū)域分開,上方為操作區(qū),下方即大拇指更好操作的區(qū)域?yàn)楣δ軈^(qū)。頂部顯示模式文字也更符合用戶從上到下、從左到右的視覺習(xí)慣。
  2. 便于單手操作,模式切換只需要通過滑動即可,而常用的功能按鈕因?yàn)橐频搅讼路?,單手也可以靈活操作。

不過,在新一代的ONEUI系統(tǒng)中,三星的手機(jī)又改回了最正統(tǒng)的布局,即下圖。

可謂一頓操作猛如虎,一看戰(zhàn)績0-5。聰明的你們,覺得這是為什么呢?筆者簡單分析后,覺得可能有兩點(diǎn):

  1. 用戶不習(xí)慣
  2. 用戶在開拍之前一般會掃一眼文字以確認(rèn)拍照模式和快門位置,將大拇指定在快門位置,視線回到取景框內(nèi)才開始拍攝;而將文字顯示在最上方之后,用戶的視線流就被拉遠(yuǎn),會很辛苦。

當(dāng)舊有的界面,競品已經(jīng)培養(yǎng)好成熟的用戶使用習(xí)慣時,如果你的設(shè)計(jì)不是那么得優(yōu)秀,就近似于零。

培養(yǎng)用戶習(xí)慣vs塑造用戶習(xí)慣

  1. ?衡量它與行業(yè)標(biāo)準(zhǔn)之間的距離。
  2. ?衡量一個新設(shè)計(jì)需要去考慮它帶來的價值,是否值得讓老用戶付出學(xué)習(xí)成本。VIVO和OPPO的相機(jī)在前幾年的設(shè)計(jì)中也嘗試過調(diào)整模式tab的位置,但最終還是回到了最開始的樣子。

2. 蘋果——相機(jī)

在iphone11中,相機(jī)的改動較大,最明顯的一點(diǎn)是將原本顯示在頂部的功能進(jìn)行了隱藏,用戶需要通過滑動來顯示和使用,見下圖。目前部分用戶反饋并不是很好操作,還需要一定的學(xué)習(xí)成本。

TIPS:

上述的方案在應(yīng)用時都得考慮到用戶具體的使用場景,過于強(qiáng)調(diào)單手,一方面可能會增加用戶的學(xué)習(xí)成本,另外也可能浪費(fèi)了大屏的優(yōu)勢,這些都是設(shè)計(jì)師需要去衡量的要素。

文中部分圖片使用到網(wǎng)上資源,侵刪

 

本文由 @二樓自習(xí)室 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載

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

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 那你想怎么辦?

    回復(fù)
    1. 不好意思打錯了,我就是試一下鍵盤,哈哈哈

      回復(fù)
  2. 三星的系統(tǒng)經(jīng)過大改后的one ui2.0已經(jīng)非常人性化和完美,使得三星拋掉了硬件很強(qiáng)軟件弱雞的帽子??,星粉8年的體驗(yàn),不過也不覺得以前的三星系統(tǒng)的多難用,終歸是人適應(yīng)系統(tǒng)

    回復(fù)