手机国产精品一区二区,另类第一页,亚欧在线,日韩一国产极品99热在线播放69_国产美女久久精品香蕉欧美_亚州中文无码aⅤ在线_免费国产v片在线

手機(jī)及小程序界面設(shè)計(jì)之四:手機(jī)屏幕越來(lái)越大,UX設(shè)計(jì)師面臨哪些挑戰(zhàn)?

2022-6-14    博博

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

手機(jī)屏幕越來(lái)越大,UX設(shè)計(jì)師面臨哪些挑戰(zhàn)?

而這些手機(jī)都有一個(gè)共同的特點(diǎn),就是屏幕尺寸越來(lái)越大。屏幕尺寸變大后,手握手機(jī)的方式和界面交互操作方式也隨之改變,那對(duì)于設(shè)計(jì)而言,是否也應(yīng)該隨之進(jìn)行改變呢?


拇指的操作范圍


想單手點(diǎn)擊屏幕的操作,需要手足夠靈活進(jìn)行一輪操作才能夠到屏幕上方,過(guò)程中稍有不慎,手機(jī)隨時(shí)會(huì)砸地上。作者的手機(jī)屏幕已經(jīng)修了幾次,差不多趕上一臺(tái)二手機(jī)的價(jià)格了。

在 2013 年,國(guó)外設(shè)計(jì)師 Steven Hoober 發(fā)表了一篇《手機(jī)界面設(shè)計(jì)》的研究報(bào)告中,對(duì)一千三百名手機(jī)使用者進(jìn)行量化研究數(shù)據(jù):

手機(jī)屏幕越來(lái)越大,UX設(shè)計(jì)師面臨哪些挑戰(zhàn)?

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

手機(jī)屏幕越來(lái)越大,UX設(shè)計(jì)師面臨哪些挑戰(zhàn)?

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

手機(jī)屏幕越來(lái)越大,UX設(shè)計(jì)師面臨哪些挑戰(zhàn)?

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


為拇指區(qū)域設(shè)計(jì)


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

那隨著大屏幕手機(jī)的普及,就意味著設(shè)計(jì)師在設(shè)計(jì)界面的時(shí)候,要為大屏幕手機(jī)的使用場(chǎng)景進(jìn)行界面調(diào)整,避免用戶難以使用的體驗(yàn)問(wèn)題。以下是我整理的一些設(shè)計(jì)建議方案:

1. 頭部區(qū)域設(shè)計(jì)更高

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

手機(jī)屏幕越來(lái)越大,UX設(shè)計(jì)師面臨哪些挑戰(zhàn)?

手機(jī)屏幕越來(lái)越大,UX設(shè)計(jì)師面臨哪些挑戰(zhàn)?

2. 常用導(dǎo)航與操作居于底部

比起導(dǎo)航欄放在頂部,更適合大屏幕手機(jī)的方式是將導(dǎo)航和重要操作盡量往屏幕底部放置。

手機(jī)屏幕越來(lái)越大,UX設(shè)計(jì)師面臨哪些挑戰(zhàn)?

3. 手勢(shì)操作頁(yè)面切換與返回

抖音和 Instagram story 等短視頻應(yīng)用界面都是通過(guò)手勢(shì)滑動(dòng)屏幕的方式,對(duì)頁(yè)面進(jìn)行切換,操作的學(xué)習(xí)成本很低,而且主要操作也在屏幕底部。這種操作方式也會(huì)在今年越來(lái)越多地被使用。

手機(jī)屏幕越來(lái)越大,UX設(shè)計(jì)師面臨哪些挑戰(zhàn)?

4. 提示彈窗從底部升起

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

手機(jī)屏幕越來(lái)越大,UX設(shè)計(jì)師面臨哪些挑戰(zhàn)?

5. 使用大卡片

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

手機(jī)屏幕越來(lái)越大,UX設(shè)計(jì)師面臨哪些挑戰(zhàn)?

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


總結(jié)


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

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

作者:布萊恩臣

轉(zhuǎn)載請(qǐng)注明:優(yōu)設(shè)網(wǎng)

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長(zhǎng)學(xué)習(xí),請(qǐng)掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系。

魏華的微信.png

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

免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

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



更多精彩文章:

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

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

手機(jī)及小程序界面設(shè)計(jì)之八:如何適配iPhone X?來(lái)看滴滴出行的實(shí)戰(zhàn)案例復(fù)盤(pán)!






分享本文至:

日歷

鏈接

個(gè)人資料

存檔