大屏手機(jī)上的設(shè)計(jì)小策略
![](http://image.woshipm.com/wp-files/img/35.jpg)
作者@麥哥鄭 最近網(wǎng)上爆料三星S5即將發(fā)布,手機(jī)尺寸可能將增大為5.3寸。以三星為首的各家安卓手機(jī)廠(chǎng)商,每次手機(jī)版本升級(jí),屏幕尺寸也必然升級(jí),現(xiàn)在大屏似乎已經(jīng)成了安卓手機(jī)的標(biāo)配。其實(shí)一開(kāi)始安卓手機(jī)做大只是為了更高的分辨率,更大的電池容量,更好的散熱效果等,在商業(yè)營(yíng)銷(xiāo)的作用下,大屏趨勢(shì)愈演愈烈,經(jīng)過(guò)市場(chǎng)的選擇,手機(jī)大屏?xí)r代已經(jīng)到來(lái)。
手機(jī)從通訊工具變成了互聯(lián)網(wǎng)的入口,在人們生活中的地位越來(lái)越重要,人們對(duì)手機(jī)的定位也發(fā)生了改變:從簡(jiǎn)單的通訊工具變成了生活學(xué)習(xí)工作的身邊小助手,所以單手持握是最自然的使用方式;而且人們使用手機(jī)的場(chǎng)景都是在移動(dòng)中,所以單手操作也是最方便的。所以,手機(jī)大屏是趨勢(shì),而單手操作最自然。
矛盾來(lái)了。由于手機(jī)機(jī)身變大,用戶(hù)在單手操作時(shí)會(huì)出現(xiàn)一些不爽的情況~例如,我們看一個(gè)發(fā)微博的例子:(手機(jī)為魅族MX3,使用者為180+男生。)
當(dāng)你一只手浮著地鐵把手,另一只手顫顫巍巍勉強(qiáng)觸碰到頂部的發(fā)微博按鈕以后,是不是覺(jué)得有淡淡的憂(yōu)?!盐淖执a好,準(zhǔn)備發(fā)送的時(shí)候,你會(huì)發(fā)現(xiàn)世界上最遠(yuǎn)的距離,不是無(wú)處尋覓,?而是根本無(wú)法相遇。
準(zhǔn)確高效,流暢易用的操作流程會(huì)提升用戶(hù)的使用體驗(yàn)。單手操作時(shí)拇指操作的觸擊熱區(qū)有限,大屏手機(jī)上的非觸擊熱區(qū)面積明顯增大,其區(qū)域內(nèi)點(diǎn)擊正確率會(huì)大幅較低,影響操作效率;用戶(hù)在與機(jī)器溝通交互過(guò)程中?,以視覺(jué)輸入,觸摸輸出為主要通道,剛才的例子,在用戶(hù)的目光和手指的循跡組成的流系統(tǒng)中,造成視線(xiàn)→操作斷節(jié),影響用戶(hù)的操作流暢性。
類(lèi)似這樣的痛點(diǎn)在大屏手機(jī)上還有很多,人們享受著大屏帶來(lái)的暢快體驗(yàn)的同時(shí),也忍受著由于機(jī)身太大帶來(lái)的痛楚。這種矛盾可以調(diào)和嗎?答案當(dāng)然是:yes!.還是發(fā)微博的例子,我們看一下Fuubo是如何優(yōu)雅地設(shè)計(jì)的:
Fuubo將寫(xiě)微博?,發(fā)微博等常用操作放置底部,單手操作毫無(wú)壓力~簡(jiǎn)單優(yōu)雅有木有~高效便捷有木有~同樣是發(fā)微博,這體驗(yàn)的差距咋就這么大呢?
剛才的兩個(gè)例子可以看出,在執(zhí)行任務(wù)–完成目標(biāo)這個(gè)流程中,后者通過(guò)一些小的設(shè)計(jì)手段,很優(yōu)雅的解決了用戶(hù)因?yàn)榇笃聊缓蛦问植僮鲙?lái)的痛楚,提升了操作流暢性,操作更方便。
我們?cè)谧鲈O(shè)計(jì)的時(shí)候,也可以使用一些小策略來(lái)消除用戶(hù)因此產(chǎn)生的痛點(diǎn)~通過(guò)以下幾個(gè)小例子,可以總結(jié)出一些規(guī)律,為我們此后設(shè)計(jì)提供思路。
一.操作位置轉(zhuǎn)移
1.魅族—下拉懸停
下拉懸停是魅族在魅族MX3的發(fā)布會(huì)上提出的一項(xiàng)設(shè)計(jì)創(chuàng)新,針對(duì)的就是大屏手機(jī)單手操作的情況。“頂部列表項(xiàng)難以觸達(dá)”這是常見(jiàn)的痛點(diǎn)場(chǎng)景,魅族針對(duì)這一情景提供了一個(gè)大膽的設(shè)計(jì)思路,巧妙的將頂部的操作位置下移,方便用戶(hù)觸達(dá),滿(mǎn)足單手操作的基本需求。但是,此種設(shè)計(jì)方案用戶(hù)操作流是:手指上移–按住下滑—手指上移—點(diǎn)擊,操作路徑較長(zhǎng)且與用戶(hù)想要點(diǎn)擊頂部列表項(xiàng)時(shí)下意識(shí)產(chǎn)生的操作意向不太一致,所以使用不太自然;而且由于“懸?!钡臅r(shí)間較短,用戶(hù)在使用時(shí)會(huì)產(chǎn)生心理負(fù)擔(dān),對(duì)用戶(hù)體驗(yàn)來(lái)說(shuō)也不太完美,所以有用戶(hù)在論壇里吐槽此舉“雞肋“”很少用“。我猜想下拉懸停的使用頻率應(yīng)該不會(huì)太高,但是其設(shè)計(jì)思路還是值得學(xué)習(xí)的。
2.Fuubo菜單—底部對(duì)齊
安卓上很多應(yīng)用都使用導(dǎo)航抽屜這種模式,常見(jiàn)的抽屜列表都是從上到下依次排列項(xiàng)目,即頂對(duì)齊。Fuubo匠心獨(dú)運(yùn),將菜單項(xiàng)底部對(duì)齊,這樣既能與頂部的個(gè)人信息做區(qū)分,也可保證菜單項(xiàng)目輕松觸達(dá)。這種方式也是運(yùn)用了操作下移的思路。不過(guò)這種情況適用于抽屜內(nèi)項(xiàng)目較少的情況,如果列表較長(zhǎng)也使用此種設(shè)計(jì)的話(huà),會(huì)造成遮擋,影響信息可見(jiàn)性。
3.百度輸入法“單手模式”
安卓的百度輸入法提供了“單手模式”。單手模式將鍵盤(pán)區(qū)域減小,解決了因?yàn)槭謾C(jī)機(jī)身太寬,拇指活動(dòng)區(qū)域受限帶來(lái)的問(wèn)題。側(cè)邊空白區(qū)提供了切換左右手使用的按鈕(百度的單手模式默認(rèn)是輸入?yún)^(qū)域向右縮小,看來(lái)是為右手設(shè)計(jì)的)。給身邊的幾個(gè)同事上手使用了一下,褒貶不一。有人表示,創(chuàng)新精神可嘉,使用起來(lái)還可以;也有同事則覺(jué)得邊上的一大塊空白加三個(gè)按鈕嚴(yán)重影響了整體美觀(guān)性。評(píng)價(jià)這個(gè)設(shè)計(jì)優(yōu)劣有兩個(gè)考量因素,第一:用戶(hù)操作手機(jī)方式是否頻繁切換,(因?yàn)檫@個(gè)設(shè)計(jì)切換到正常模式比較困難)。
調(diào)查了一下身邊的同事使用輸入法的操作方式,發(fā)現(xiàn)有兩種情況較常見(jiàn):
(1)無(wú)論何種情景,多數(shù)使用單手完成輸入動(dòng)作;
(2)在移動(dòng)場(chǎng)景中(坐地鐵,行走等)單手輸入,靜止?fàn)顟B(tài)(坐著)時(shí),用雙手操作。
對(duì)于前者,單手模式可以很好地滿(mǎn)足用戶(hù)的需求。所以這種模式也只是為了迎合這部分人的使用習(xí)慣。對(duì)于單雙手會(huì)頻繁切換的用戶(hù),可能還需要再優(yōu)化;另一個(gè)考量因素:全鍵盤(pán)和九宮格的使用情況:因?yàn)槿I盤(pán)切換到單手模式的時(shí)候,可點(diǎn)擊區(qū)域就會(huì)減小(在5.7寸屏或者6.1寸屏上或許會(huì)稍微好一些),影響輸入效率,所以對(duì)于全鍵盤(pán)的用戶(hù)來(lái)說(shuō)單手模式并不太適合。對(duì)此對(duì)身邊的人做了個(gè)小范圍調(diào)研,發(fā)現(xiàn)用全鍵盤(pán)的人不在少數(shù)。所以,單手模式的設(shè)計(jì)能滿(mǎn)足部分用戶(hù)的需求。對(duì)其余的用戶(hù),此項(xiàng)優(yōu)化可能效果甚微。(百度的單手模式只是單純的將操作區(qū)域做了變化,如果在細(xì)節(jié)上再花些心思效果會(huì)更好。)
二.轉(zhuǎn)換操作方式
1.360手機(jī)瀏覽器下拉搜索—手勢(shì)
在手機(jī)瀏覽器上,搜索框是一個(gè)主要的上網(wǎng)入口。但常見(jiàn)手機(jī)瀏覽器的搜索框多數(shù)在頂部,用戶(hù)不方便點(diǎn)觸。360針對(duì)此種情景,在瀏覽器首頁(yè)提供“下拉搜索”,即下拉可激活搜索框。這個(gè)操作初衷是好的,和ios7的下拉搜索思路差不多。但360瀏覽器主界面是個(gè)長(zhǎng)頁(yè)面,需要頻繁的上下滑動(dòng)查看頁(yè)面信息,這導(dǎo)致下拉搜索操作經(jīng)常誤操作被觸發(fā);還有一點(diǎn)實(shí)在不能接受:由于此操作隱藏較深,其提供了用戶(hù)引導(dǎo),但這個(gè)閃啊閃的引導(dǎo)箭頭竟然一直存在,既不美觀(guān),也會(huì)影響用戶(hù)正常瀏覽信息。
解決痛點(diǎn)的方向是對(duì)的,但設(shè)計(jì)方案上還需再優(yōu)化。
所以利用手勢(shì)解決操作問(wèn)題時(shí)需要注意:避免引起誤操作,且控制用戶(hù)學(xué)習(xí)成本。(正面案例:IOS7的返回手勢(shì))
2.海豚瀏覽器—長(zhǎng)按搜索
同樣是解決上一個(gè)痛點(diǎn),海豚采取的方式是長(zhǎng)按菜單中提供搜索按鈕,點(diǎn)擊后觸發(fā)搜索流程。用戶(hù)需要采取的操作時(shí):長(zhǎng)按-滑動(dòng)選擇;這個(gè)方式減少了誤操作,但是隱藏較深,需要提供合適的用戶(hù)引導(dǎo)。且提供的是臨時(shí)性操作,用戶(hù)心理負(fù)擔(dān)較大。
三.軟硬件結(jié)合
1.OppoN1—軟硬件結(jié)合?背后操作
N1的一大功能就是其背部四向觸控設(shè)計(jì),可以支持滑動(dòng)、雙擊、長(zhǎng)按三種操作,能實(shí)現(xiàn)翻閱照片、更換音樂(lè)、上下拖動(dòng)網(wǎng)頁(yè)、調(diào)整音量、打開(kāi)應(yīng)用等操作。先不說(shuō)持握時(shí)用食指在背面進(jìn)行操作是否方便,這種敢于創(chuàng)新的精神是國(guó)產(chǎn)手機(jī)都需要的。官方的說(shuō)法此舉是方便大屏手機(jī)的單手操作,但為什么我覺(jué)得這種方式更適合雙手操作或者在平板上用呢。。人艱不拆啊。。這種方式局限性較大,可能需要深度定制才能與硬件進(jìn)行高契合度配合,且其操作方式并不太方便并,沒(méi)有解決大屏手機(jī)上單手操作的痛啊。也就其創(chuàng)新大膽精神可以給一個(gè)小贊。
2..其他(傳感器)
其他的方法還有利用傳感器提供的快捷操作:如搖一搖,吹一吹,但我建議這些傳感器要謹(jǐn)慎使用,利用傳感器作為快捷操作觸發(fā)并不自然,找到合適的場(chǎng)景還是比較難的。
反思
總結(jié)上面的例子,可以得出做設(shè)計(jì)優(yōu)化時(shí)我們的思考方向:
1.操作位置轉(zhuǎn)移:
- ?操作按鈕下移/列表下移:這種優(yōu)化可有效提高操作效率,需要和整體頁(yè)面元素配合設(shè)計(jì),可在此基礎(chǔ)上做發(fā)散創(chuàng)新;
- 操作區(qū)域側(cè)移:?削弱了大屏優(yōu)勢(shì),能滿(mǎn)足部分用戶(hù)需求,可能會(huì)影響雙手操作;
2.轉(zhuǎn)換操作方式:
移動(dòng)設(shè)備上提供了豐富的手勢(shì)操作,手勢(shì)操作簡(jiǎn)便,不受區(qū)域限制,在設(shè)計(jì)中有較高的發(fā)揮空間,但有的手勢(shì)可能會(huì)與其他操作沖突,需考慮誤操作;若隱藏較深,?則學(xué)習(xí)成本較高。
3.軟硬件結(jié)合(傳感器):
需要深度定制,適用范圍受限制;場(chǎng)景接入不自然。
以上設(shè)計(jì)思路是對(duì)一些例子做的簡(jiǎn)單總結(jié),我們可以根據(jù)實(shí)際的設(shè)計(jì)需求來(lái)發(fā)散思考。我們還可總結(jié)出一些容易忽視的因素,希望我們?cè)谧龃祟?lèi)設(shè)計(jì)優(yōu)化時(shí)考慮:
- 控制學(xué)習(xí)成本;
- 不影響大屏的優(yōu)勢(shì);
- 切換到雙手操作無(wú)障礙(不影響雙手操作)。
這篇文章,我希望能給大家提供一些解決問(wèn)題的思考方向,更重要的是希望設(shè)計(jì)師可以意識(shí)到為大屏手機(jī)做設(shè)計(jì)優(yōu)化的必要性,全面解決痛點(diǎn),為用戶(hù)提供更好的設(shè)計(jì)。
- 目前還沒(méi)評(píng)論,等你發(fā)揮!