教程：大屏手機(jī)的設(shè)計(jì)策略

1、教程：大屏手機(jī)的設(shè)計(jì)策略最近網(wǎng)上爆料三星s5即將發(fā)布，手機(jī)尺寸可能將增人為5.3寸。以三星為首的各家安卓手機(jī)廠商，每次手機(jī)版 木升級，屏幕尺寸也必然升級，現(xiàn)在大屏似乎已經(jīng)成了安卓手機(jī)的標(biāo)配。其實(shí)一開始安卓手機(jī)做大只是為了更高 的分辨率，更大的電池容雖，更好的散熱效果等，在商業(yè)營銷的作用下，人屏趨勢愈演愈烈，經(jīng)過市場的選擇， 手機(jī)大屏?xí)r代已經(jīng)到來。手機(jī)從通訊工具變成了互聯(lián)網(wǎng)的入口，在人們生活中的地位越來越重要，人們對手機(jī)的定位也發(fā)生了改變： 從簡單的通訊工具變成了生活學(xué)習(xí)工作的身邊小助手，所以單手持握是最自然的使用方式;而且人們使用手機(jī)的場 景都是在移動(dòng)中，所以單手操作也是最方便的。所以，手機(jī)大

2、屏是趨勢，而單手操作故白然。矛盾來了。由于手機(jī)機(jī)身變大，用戶在單手操作時(shí)會(huì)出現(xiàn)一些不爽的情況例如，我們看一個(gè)發(fā)微博的例子：（手 機(jī)為魅族mx3,使用者為180+男生。）想發(fā)微博想寫微博當(dāng)你-只亍浮著地鐵把于另-只手顫顫巍巍勉強(qiáng)觸碰到頂部的發(fā)微i誓按鈕以后，是不是覺得有淡淡的憂 桑把文字碼好，準(zhǔn)備發(fā)送的時(shí)候，你會(huì)發(fā)現(xiàn)世界上最遠(yuǎn)的距離,不是無處尋覓,而是根木無法相遇。準(zhǔn)確高效,流暢易用的操作流程會(huì)提升用戶的使用體驗(yàn)。單手操作時(shí)拇指操作的觸擊熱區(qū)仃限，人屏手機(jī)上 的非觸擊熱區(qū)面積明顯增大，其區(qū)域內(nèi)點(diǎn)擊正確率會(huì)大幅較低，影響操作效率;用戶在與機(jī)器溝通交互過程中, 以視覺輸入，觸摸輸出為主要通道，剛才的

3、例子，在用戶的訂光和手指的循跡組成的流系統(tǒng)屮，造成視線-操作 斷節(jié)，影響用戶的操作流暢性。類似這樣的痛點(diǎn)在大屏手機(jī)上還冇很多，人們享受著大屏帶來的暢快體驗(yàn)的同時(shí)，也忍受著由于機(jī)身太大帶 來的痛楚。這種孑盾可以調(diào)和嗎？答案當(dāng)然是：yes!.還是發(fā)微博的例子，我們看一下fuubo是如何優(yōu)雅地設(shè)計(jì)的：=fuubonovadngh«tagms足什麼？乾吃嗎t(yī)ojoker國內(nèi)行貨疇權(quán)本不柜舉i0gms/ (google : viandroidififte使用 浙w悅】hgtcn/8fyfd63 (分事口恿去13 專業(yè)価衣巴去濫12計(jì)圧new balance> 王" > h

4、ttp:/tcn/8ft7yibfuubo將寫微i專，發(fā)微陣等常用操作放置底部，單手操作亳無壓力簡單優(yōu)雅有木有高效便捷有木有同樣 是發(fā)微博，這體驗(yàn)的差距咋就這么大呢？剛才的兩個(gè)例子可以看出，在執(zhí)行任務(wù)-完成目標(biāo)這個(gè)流程中，后者通過一些小的設(shè)計(jì)手段，很優(yōu)雅的解決 了用戶因?yàn)榇笃聊缓蛦问植僮鲙淼牟〕?，提升了操作流暢性，操作更方便。我們在做設(shè)計(jì)的時(shí)候，也可以使用一些小策略來消除用戶因此產(chǎn)生的病點(diǎn)通過以下兒個(gè)小例子，可以總結(jié) 出一些規(guī)律，為我們此后設(shè)計(jì)提供思路。一.操作位置轉(zhuǎn)移1.魅族一下拉懸?；ヂ?lián)網(wǎng)的一些事alarmone131androidappcenterapplifiervideocache

5、adfeiwoalipay八 > apsapiyunpingtai下拉懸停是魅族在魅族mx3的發(fā)布會(huì)上提出的一項(xiàng)設(shè)計(jì)創(chuàng)新，針對的就是大屏手機(jī)單手操作的情況?！绊敳?列農(nóng)項(xiàng)難以觸達(dá)”這是常見的痛點(diǎn)場景，魅族針對這一悄景提供了一個(gè)大膽的設(shè)計(jì)思路，巧妙的將頂部的操作位置 下移，方便用戶觸達(dá)，滿足單手操作的基本需求。但是，此種設(shè)計(jì)方案用戶操作流是：手指上移我住下滑一手 指上移一點(diǎn)擊，操作路徑較氏且與用戶想要點(diǎn)擊頂部列表項(xiàng)時(shí)下意識(shí)產(chǎn)生的操作意向不太一致，所以使用不太自 然;而且由于“懸?！钡臅r(shí)間較短，用戶在使用時(shí)會(huì)產(chǎn)生心理負(fù)扌n,對用戶體驗(yàn)來說也不太完美，所以有用戶在論耘 里吐榊此舉“雞肋“”很少

6、用“。我猜想下拉懸停的使用頻率應(yīng)該不會(huì)太高，但是其設(shè)計(jì)思路還是值得學(xué)習(xí)的。2.fuubo菜單一底部對齊:fuuboq p1 taylor0902h fi.e粉絲關(guān)注235621644收*箱設(shè)1a出安卓上很多應(yīng)用都使用導(dǎo)航抽脫這種模式，常見的抽屜列表都是從|二到下依次排列項(xiàng)冃，即頂對齊。fuubo 匠心獨(dú)運(yùn)，將菜單項(xiàng)底部對齊，這樣既能與頂部的個(gè)人信息做區(qū)分，也可保證菜取項(xiàng)目輕松觸達(dá)。這種方式也是 運(yùn)用了操作下移的思路。不過這種情況適用丁抽屜內(nèi)項(xiàng)目較少的情況，如果列表較長也使用此種設(shè)計(jì)的話，會(huì)造 成遮擋，影響信息可見性。3 百度輸入法“單手模式”怖親.你燈于來了 ! ww»）攢殉測邀曲安

7、卓的百度輸入法提供了“單手模式”。單手模式將鍵盤區(qū)域減小，解決了因?yàn)槭謾C(jī)機(jī)身太寬，拇指活動(dòng)區(qū)域 受限帶來的問題。側(cè)邊空白區(qū)提供了切換左右手使用的按鈕（百度的單手模式默認(rèn)是輸入?yún)^(qū)域向右縮小，看來是為 右手設(shè)計(jì)的）。給身邊的兒個(gè)同事上手使用了一下，褒貶不一。有人表示，創(chuàng)新精神可嘉，使用起來還可以;也有 同事則覺得邊上的一人塊空白加三個(gè)按鈕嚴(yán)重影響了整體美觀性。評價(jià)這個(gè)設(shè)計(jì)優(yōu)劣有兩個(gè)考量因素，第一：用 戶操作手機(jī)方式是否頻繁切換，（因?yàn)檫@個(gè)設(shè)計(jì)切換到正常模式比較困難）。調(diào)杳了 -下身邊的同事使用輸入法的操作方式，發(fā)現(xiàn)有兩種情況較常見:（1）無論何種情景，多數(shù)使用單手完成輸入動(dòng)作；（2）在移動(dòng)場景中（

8、坐地鐵，行走等）單手輸入，靜止?fàn)顟B(tài)（坐著）時(shí)，用雙手操作。對于前者，單手模式可以很好地滿足用戶的需求。所以這種模式也只是為了迎合這部分人的使用習(xí)慣。對于 單雙手會(huì)頻繁切換的用戶，可能還需要再優(yōu)化;另一個(gè)考量因索：全鍵盤和九宮格的使用情況：因?yàn)槿I盤切換到 單手模式的時(shí)候，可點(diǎn)擊區(qū)域就會(huì)減?。ㄔ?.7寸屏或者6.1寸屏上或許會(huì)稍微好一些），影響輸入效率，所以對 于全鍵盤的用戶來說單手模式并不太適合。對此對身邊的人做了個(gè)小范圍調(diào)研，發(fā)現(xiàn)用全鍵盤的人不在少數(shù)。所 以，單手模式的設(shè)計(jì)能滿足部分用戶的需求。對其余的用戶，此項(xiàng)優(yōu)化可能效果甚微。（白度的單手模式只是單純 的將操作區(qū)域做了變化，如果在細(xì)節(jié)上再

9、花些心思效果會(huì)更好。）二.轉(zhuǎn)換操作方式1.360手機(jī)瀏覽器下拉搜索r 勢小說菱圖0i鮒站整薦md58冏城飪網(wǎng)1號店aar務(wù)寧品會(huì)360»牛36if9i超if窗曲"otf住心事氏圧在手機(jī)瀏覽器i：,搜索框是-個(gè)主耍的上網(wǎng)入但常見手機(jī)瀏覽器的搜索框多數(shù)在頂部，用戶不方便點(diǎn)觸。 360針對此種情景:，在瀏覽器首頁提供“下拉搜索”，即下拉可激活搜索樁。這個(gè)操作初衷是好的，和ios7的下拉 搜索思路差不多。但360瀏覽器主界面是個(gè)長頁面，需要頻繁的上下滑動(dòng)杳看頁面信息，這導(dǎo)致下拉搜索操作經(jīng) 常誤操作被觸發(fā);還有一點(diǎn)實(shí)在不能接受：由于此操作隱藏較深，其提供了用戶引導(dǎo),但這個(gè)閃啊閃的引導(dǎo)

10、箭頭竟 然一直存在，既不美觀，也會(huì)影響用戶正常瀏覽信息。解決痛點(diǎn)的方向是對的，但設(shè)計(jì)方案上還需再優(yōu)化。所以利用手勢解決操作問題時(shí)需要注意：避免引起謀操作，且控制用八學(xué)習(xí)成木。（正面案例:i0s7的返回手勢）2海豚瀏覽器一長按搜索入冋址-575°主力幼向再次wi主攻一大方向價(jià)何夸壞孚后首硼民離毆賅先生韻生小公主外交都:瀕促費(fèi)方立卻収消貝巴馬會(huì)見匡養(yǎng)一今日離築同址耳臚 為廢一下1«用工日： + q樹訪冋同樣是解決上一個(gè)痛點(diǎn)，海豚采取的方式是長按菜單屮捉供搜索按鈕，點(diǎn)擊后觸發(fā)搜索流程。用戶需耍采取 的操作時(shí)：長按滑動(dòng)選擇;這個(gè)方式減少了誤操作，但是隱藏較深，需耍提供合適的用戶引導(dǎo)

11、。且提供的是臨時(shí) 性操作，用戶心理負(fù)擔(dān)較人。三軟硬件結(jié)合1.oppon1-軟硬件結(jié)合背后操作n1的一大功能就是其背部四向觸控設(shè)計(jì)，可以支持滑動(dòng)、雙擊、長按三 種操作，能實(shí)現(xiàn)翻閱照片、更換音樂、上下拖動(dòng)網(wǎng)頁、調(diào)整音量、打開應(yīng)用等操作。先不說持握時(shí)用食指在背面 進(jìn)行操作是否方便，這種敢于創(chuàng)新的粘神是國產(chǎn)手機(jī)都需要的。官方的說法此舉是方便大屏手機(jī)的單手操作，但 為什么我覺得這種方式更適合雙手操作或者在平板上用呢。人艱不拆啊。這種方式局限性較人，可能需要深 度定制才能與皺件進(jìn)行髙契合度配合，且英操作方式并不太方便并，沒有解決大屏手機(jī)上單手操作的痛啊。也就 其創(chuàng)新大膽精神可以給一個(gè)小贊。2.其他（傳感器

12、戊他的方法還有利用傳感器提供的快捷操作：如搖搖，吹一吹，但我建議這些傳感器要謹(jǐn) 慎使用，利用傳感器作為快捷操作觸發(fā)并不自然，找到合適的場景還是比較難的。反思總結(jié)上面的例子，可以得出做設(shè)計(jì)優(yōu)化時(shí)我們的思考方向：1. 操作位置轉(zhuǎn)移：操作按鈕下移列表下移操作區(qū)域側(cè)移操作按鈕下移/列表下移：這種優(yōu)化可有效提高操作效率，需要和整體頁而元素配合設(shè)計(jì)，可在此基礎(chǔ)上做發(fā) 散創(chuàng)新；操作區(qū)域側(cè)移：削弱了大屏優(yōu)勢，能滿足部分用戶需求，可能會(huì)影響雙手操作；2. 轉(zhuǎn)換操作方式:長按press雙擊double tap滑動(dòng)甌flickdrag移動(dòng)設(shè)備上提供了豐富的手勢操作，手勢操作簡便，不受區(qū)域限制，在設(shè)計(jì)中有較高的發(fā)揮空間，但有的手 勢可能會(huì)與其他操作沖突，需考慮誤操作;若隱藏較深，則學(xué)習(xí)成木較高。3. 軟硬件結(jié)合（傳感器）：需要深度定制，適用范圍受限