天生防滑！為大屏手機而生的設計小策略

昨天，小編一手握著早餐，一手拿手機發微博，心情激動，要把和女神約會的消息曬給基友們看。圖片上傳、單手打字，一切似乎都很順利，微博就要發送了！不過發送按鈕在頂部。嘿（用力），大拇指再加把勁就夠到了！就在此時，悲劇發生了。手一滑，只聽到啪一聲，手滑機毀。what the fuck?。?！多么不甘的一幕。

這篇文章對解決大屏手機的痛點，很有幫助。我相信你也有過手指夠不著某個按鈕的尷尬經歷。

摘要：現在的手機屏幕越來越大，單手操作時會產生各種痛點。我們作為設計師，需要關注此類痛點。本篇文章通過幾個設計的小例子來總結如何更好地為大屏做設計，希望設計師在做設計優化時將大屏作為考慮的因素。

@搜狗桌面EDC ：最近網上爆料三星S5即將發布，手機尺寸可能將增大為5.3寸。以三星為首的各家安卓手機廠商，每次手機版本升級，屏幕尺寸也必然升級，現在大屏似乎已經成了安卓手機的標配。其實一開始安卓手機做大只是為了更高的分辨率，更大的電池容量，更好的散熱效果等，在商業營銷的作用下，大屏趨勢愈演愈烈，經過市場的選擇，手機大屏時代已經到來。

手機從通訊工具變成了互聯網的入口，在人們生活中的地位越來越重要，人們對手機的定位也發生了改變：從簡單的通訊工具變成了生活學習工作的身邊小助手，所以單手持握是最自然的使用方式；而且人們使用手機的場景都是在移動中，所以單手操作也是最方便的。

所以，手機大屏是趨勢，而單手操作最自然。

矛盾來了。

由于手機機身變大，用戶在單手操作時會出現一些不爽的情況~例如，我們看一個發微博的例子:（手機為魅族MX3，使用者為180+男生。）

當你一只手浮著地鐵把手，另一只手顫顫巍巍勉強觸碰到頂部的發微博按鈕以后，是不是覺得有淡淡的憂?！盐淖执a好，準備發送的時候，你會發現世界上最遠的距離，不是無處尋覓， 而是根本無法相遇。

準確高效，流暢易用的操作流程會提升用戶的使用體驗。單手操作時拇指操作的觸擊熱區有限，大屏手機上的非觸擊熱區面積明顯增大，其區域內點擊正確率會大幅較低，影響操作效率；用戶在與機器溝通交互過程中，以視覺輸入，觸摸輸出為主要通道，剛才的例子，在用戶的目光和手指的循跡組成的流系統中，造成視線→操作斷節，影響用戶的操作流暢性。

類似這樣的痛點在大屏手機上還有很多，人們享受著大屏帶來的暢快體驗的同時，也忍受著由于機身太大帶來的痛楚。這種矛盾可以調和嗎？答案當然是：yes！還是發微博的例子，我們看一下Fuubo是如何優雅地設計的：

Fuubo將寫微博 ，發微博等常用操作放置底部，單手操作毫無壓力~簡單優雅有木有~高效便捷有木有~同樣是發微博，這體驗的差距咋就這么大呢？

剛才的兩個例子可以看出，在執行任務--完成目標這個流程中，后者通過一些小的設計手段，很優雅的解決了用戶因為大屏幕和單手操作帶來的痛楚，提升了操作流暢性，操作更方便。

我們在做設計的時候，也可以使用一些小策略來消除用戶因此產生的痛點~通過以下幾個小例子，可以總結出一些規律，為我們此后設計提供思路。

一．操作位置轉移

1.魅族——下拉懸停

下拉懸停是魅族在魅族MX3的發布會上提出的一項設計創新，針對的就是大屏手機單手操作的情況?！绊敳苛斜眄楇y以觸達”這是常見的痛點場景，魅族針對這一情景提供了一個大膽的設計思路，巧妙的將頂部的操作位置下移，方便用戶觸達，滿足單手操作的基本需求。但是，此種設計方案用戶操作流是：手指上移--按住下滑—手指上移—點擊，操作路徑較長且與用戶想要點擊頂部列表項時下意識產生的操作意向不太一致，所以使用不太自然；而且由于“懸停”的時間較短，用戶在使用時會產生心理負擔，對用戶體驗來說也不太完美，所以有用戶在論壇里吐槽此舉“雞肋“”很少用“。我猜想下拉懸停的使用頻率應該不會太高，但是其設計思路還是值得學習的。

2.Fuubo菜單——底部對齊

安卓上很多應用都使用導航抽屜這種模式，常見的抽屜列表都是從上到下依次排列項目，即頂對齊。Fuubo匠心獨運，將菜單項底部對齊，這樣既能與頂部的個人信息做區分，也可保證菜單項目輕松觸達。這種方式也是運用了操作下移的思路。不過這種情況適用于抽屜內項目較少的情況，如果列表較長也使用此種設計的話，會造成遮擋，影響信息可見性。

3.百度輸入法“單手模式”——操作區域縮小，側移

安卓的百度輸入法提供了“單手模式”。單手模式將鍵盤區域減小，解決了因為手機機身太寬，拇指活動區域受限帶來的問題。側邊空白區提供了切換左右手使用的按鈕(百度的單手模式默認是輸入區域向右縮小，看來是為右手設計的)。給身邊的幾個同事上手使用了一下，褒貶不一。有人表示，創新精神可嘉，使用起來還可以；也有同事則覺得邊上的一大塊空白加三個按鈕嚴重影響了整體美觀性。評價這個設計優劣有兩個考量因素，第一：用戶操作手機方式是否頻繁切換，（因為這個設計切換到正常模式比較困難）。調查了一下身邊的同事使用輸入法的操作方式，發現有兩種情況較常見：（1）無論何種情景，多數使用單手完成輸入動作；（2）在移動場景中（坐地鐵，行走等）單手輸入，靜止狀態（坐著）時，用雙手操作。對于前者，單手模式可以很好地滿足用戶的需求。所以這種模式也只是為了迎合這部分人的使用習慣。對于單雙手會頻繁切換的用戶，可能還需要再優化；另一個考量因素：全鍵盤和九宮格的使用情況：因為全鍵盤切換到單手模式的時候，可點擊區域就會減小（在5.7寸屏或者6.1寸屏上或許會稍微好一些），影響輸入效率，所以對于全鍵盤的用戶來說單手模式并不太適合。對此對身邊的人做了個小范圍調研，發現用全鍵盤的人不在少數。所以，單手模式的設計能滿足部分用戶的需求。對其余的用戶，此項優化可能效果甚微。（百度的單手模式只是單純的將操作區域做了變化，如果在細節上再花些心思效果會更好。）

二．轉換操作方式

1.360手機瀏覽器下拉搜索——手勢

在手機瀏覽器上，搜索框是一個主要的上網入口。但常見手機瀏覽器的搜索框多數在頂部，用戶不方便點觸。360針對此種情景，在瀏覽器首頁提供“下拉搜索”，即下拉可激活搜索框。這個操作初衷是好的，和ios7的下拉搜索思路差不多。但360瀏覽器主界面是個長頁面，需要頻繁的上下滑動查看頁面信息，這導致下拉搜索操作經常誤操作被觸發；還有一點實在不能接受：由于此操作隱藏較深，其提供了用戶引導，但這個閃啊閃的引導箭頭竟然一直存在，既不美觀，也會影響用戶正常瀏覽信息。

解決痛點的方向是對的，但設計方案上還需再優化。

所以利用手勢解決操作問題時需要注意：避免引起誤操作，且控制用戶學習成本。（正面案例：IOS7的返回手勢）

2.海豚瀏覽器——長按搜索

同樣是解決上一個痛點，海豚采取的方式是長按菜單中提供搜索按鈕，點擊后觸發搜索流程。用戶需要采取的操作時：長按-滑動選擇；這個方式減少了誤操作，但是隱藏較深，需要提供合適的用戶引導。且提供的是臨時性操作，用戶心理負擔較大。

三．軟硬件結合

1.Oppo N1—軟硬件結合——背后操作

N1的一大功能就是其背部四向觸控設計，可以支持滑動、雙擊、長按三種操作，能實現翻閱照片、更換音樂、上下拖動網頁、調整音量、打開應用等操作。先不說持握時用食指在背面進行操作是否方便，這種敢于創新的精神是國產手機都需要的。官方的說法此舉是方便大屏手機的單手操作，但為什么我覺得這種方式更適合雙手操作或者在平板上用呢。。人艱不拆啊。。這種方式局限性較大，可能需要深度定制才能與硬件進行高契合度配合，且其操作方式并不太方便并，沒有解決大屏手機上單手操作的痛啊。也就其創新大膽精神可以給一個小贊。

2..其他（傳感器）

其他的方法還有利用傳感器提供的快捷操作：如搖一搖，吹一吹，但我建議這些傳感器要謹慎使用，利用傳感器作為快捷操作觸發并不自然，找到合適的場景還是比較難的。

總結上面的例子，可以得出做設計優化時我們的思考方向：

1.操作位置轉移：

? 操作按鈕下移/列表下移：這種優化可有效提高操作效率，需要和整體頁面元素配合設計，可在此基礎上做發散創新；

? 操作區域側移： 削弱了大屏優勢，能滿足部分用戶需求，可能會影響雙手操作；

2.轉換操作方式：

? 移動設備上提供了豐富的手勢操作，手勢操作簡便，不受區域限制，在設計中有較高的發揮空間，但有的手勢可能會與其他操作沖突，需考慮誤操作；若隱藏較深， 則學習成本較高。

3.軟硬件結合（傳感器）：

? 需要深度定制，適用范圍受限制；場景接入不自然。

以上設計思路是對一些例子做的簡單總結，我們可以根據實際的設計需求來發散思考。

我們還可總結出一些容易忽視的因素，希望我們在做此類設計優化時考慮：

? 控制學習成本；

? 不影響大屏的優勢；

? 切換到雙手操作無障礙（不影響雙手操作）。

這篇文章，我希望能給大家提供一些解決問題的思考方向，更重要的是希望設計師可以意識到為大屏手機做設計優化的必要性，全面解決痛點，為用戶提供更好的設計。

附：

《華為設計總監尤原慶：怎樣讀設計書》
《設計總監尤原慶：我在華為的工作體驗》

投稿者：@搜狗桌面EDC

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是一個分享網頁設計、無線端設計以及PS教程的干貨網站。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量72萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎？
添加 優秀網頁設計 微信號：【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：