@布萊恩臣 ：iPhone X 在 2017 年上市以來，全面屏手機就開始逐漸普及。iPhone 8 的 4.7 寸屏幕到目前最新機型 iPhone 11 的 6.1 寸屏幕，以及 Pro Max 系列的 6.5 寸，各種各樣的劉海屏、水滴屏、挖孔屏、折疊屏等等屏幕方式隨之出現(xiàn)，物理 Home 鍵都被舍棄改成虛擬按鍵，甚至是沒有虛擬按鍵的手勢滑動操作。

而這些手機都有一個共同的特點，就是屏幕尺寸越來越大。屏幕尺寸變大后，手握手機的方式和界面交互操作方式也隨之改變，那對于設計而言，是否也應該隨之進行改變呢？

拇指的操作范圍

想單手點擊屏幕的操作，需要手足夠靈活進行一輪操作才能夠到屏幕上方，過程中稍有不慎，手機隨時會砸地上。作者的手機屏幕已經(jīng)修了幾次，差不多趕上一臺二手機的價格了。

在 2013 年，國外設計師 Steven Hoober 發(fā)表了一篇《手機界面設計》的研究報告中，對一千三百名手機使用者進行量化研究數(shù)據(jù)：

據(jù)當時研究的數(shù)據(jù)可以看出，有近半的用戶是單手使用手機（現(xiàn)在肯定不止）。當用戶單手操作的時候，實際拇指可以觸摸到的區(qū)域是如下圖這樣的。綠色區(qū)域是拇指的正常操作區(qū)域，黃色區(qū)域是拇指能觸碰到的最大限度范圍，紅色區(qū)域是觸摸比較困難的區(qū)域。

然而這份研究報告的數(shù)據(jù)是在 2013 年發(fā)布，當時還沒有全面屏的出現(xiàn)，如果把上面研究結(jié)論的區(qū)域，套用到如今的手機屏幕尺寸上，頂部的紅色區(qū)域會占更大比例。以 iPhone 11 尺寸比例作為參考，如下圖：

拇指可操作范圍大約在 3 分之 2 的區(qū)域，可見想要觸碰到紅色區(qū)域是有一定難度的。也正是因為這份報告只適合當時的手機市場情況，在當今已經(jīng)不適用了，因此需要重新去考慮如何為大屏幕手機進行界面設計。

為拇指區(qū)域設計

根據(jù) 2020 年手機UX設計趨勢，大屏幕設計將會成為熱點。根據(jù)數(shù)據(jù)報告中有說明，2018 年 10 月使用大屏手機的用戶比例是16.3%，到 2019 年 12 月，該數(shù)據(jù)已經(jīng)上升到 41%，并且會在未來更多新機型的出現(xiàn)中持續(xù)上漲。

那隨著大屏幕手機的普及，就意味著設計師在設計界面的時候，要為大屏幕手機的使用場景進行界面調(diào)整，避免用戶難以使用的體驗問題。以下是我整理的一些設計建議方案：

1. 頭部區(qū)域設計更高

通過將標題欄的信息區(qū)域放大，盡量把主要操作內(nèi)容向拇指區(qū)域靠近。

2. 常用導航與操作居于底部

比起導航欄放在頂部，更適合大屏幕手機的方式是將導航和重要操作盡量往屏幕底部放置。

3. 手勢操作頁面切換與返回

抖音和 Instagram story 等短視頻應用界面都是通過手勢滑動屏幕的方式，對頁面進行切換，操作的學習成本很低，而且主要操作也在屏幕底部。這種操作方式也會在今年越來越多地被使用。

4. 提示彈窗從底部升起

常用的彈窗，很多是設計在屏幕中間彈出，為了適配大屏幕，不妨嘗試從底部彈出，關鍵選項都能輕松選擇，提高轉(zhuǎn)化率。

5. 使用大卡片

屏幕尺寸變大以后，使用整張大卡片可以讓用戶瀏覽內(nèi)容更專注，大面積的配圖和留白，也能提高用戶的點擊欲望。

除此以外，作為手機廠商，在發(fā)布大屏幕手機的時候，就有對界面操作做了一些對應系統(tǒng)級的設計調(diào)整，比如界面下拉懸停，鍵盤單手模式，屏幕邊緣滑動返回等等。

總結(jié)

大屏幕尺寸已經(jīng)是趨勢，屏幕大意味著內(nèi)容可以更大限度地得到展示，有利于產(chǎn)品提供更多的服務，不再糾結(jié)首屏無法展示完主要內(nèi)容。在這個信息爆炸的時代，用戶也不再滿足于小屏幕的瀏覽方式?？梢哉f，大屏幕已經(jīng)是無法改變的趨勢。與其擔心問題到來，設計師更應該思考如何去適應產(chǎn)品的快速迭代，不斷更新自己的設計思維模型，更全面思考問題，產(chǎn)出更合理、體驗更好的設計方案。

希望本文內(nèi)容可以對你有所啟發(fā)。

作者：布萊恩臣

轉(zhuǎn)載請注明：優(yōu)設網(wǎng)

藍藍設計建立了UI設計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設計( m.820esy.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

更多精彩文章：

手機及小程序界面設計之一：讓設計更有說服力的20條經(jīng)典原則：菲茨定律

手機及小程序界面設計之二：三分鐘搞懂，iPhone 12發(fā)布后的設計尺寸調(diào)整

手機及小程序界面設計之三：從 Dribbble 高贊的 828 個作品中，總結(jié)出 2022 設計趨勢

手機及小程序界面設計之四：手機屏幕越來越大，UX設計師面臨哪些挑戰(zhàn)？

手機及小程序界面設計之五：連高手都容易忽略的9個 iOS 與 Android 間的交互差異

手機及小程序界面設計之六：讓設計更有說服力的20條經(jīng)典原則：菲茨定律

手機及小程序界面設計之七：基礎科普！超全面的 UI 元素尺寸設置指南（上）

手機及小程序界面設計之八：如何適配iPhone X？來看滴滴出行的實戰(zhàn)案例復盤！

手機及小程序界面設計之九：手機端表格設計：我整理了一套循序漸進的處理方法

手機及小程序界面設計之十：超詳細解讀：UI導航設計不僅僅指的是導航欄