防砸臉指南!大屏?xí)r代如何重塑界面交互?

編者按:有木有同學(xué)仰躺著玩手機(jī)時(shí)經(jīng)常被砸臉?在不改變大屏幕的前提下,想護(hù)住你的臉就得靠交互設(shè)計(jì)師了。今天百度的同學(xué)總結(jié)了交互工作的一些經(jīng)驗(yàn),用在大屏界面上特別合適,為了用戶的臉,這篇就別錯(cuò)過(guò)咯。

這是一個(gè)大屏手機(jī)的時(shí)代。

強(qiáng)調(diào)這件事情的意義在于,這已經(jīng)成為事實(shí)。

Medium上存在一份個(gè)人統(tǒng)計(jì)。

在過(guò)去7年,新上市的手機(jī)屏幕尺寸越來(lái)越大。

防砸臉指南!大屏?xí)r代如何重塑界面交互?

以4.5英寸為分界點(diǎn),我們更清晰的看到這一變化。過(guò)去的兩年,4.5英寸的比例從10%升至80%。

防砸臉指南!大屏?xí)r代如何重塑界面交互?

在國(guó)內(nèi)的過(guò)去3個(gè)季度,使用FHD HD分辨率的手機(jī)從38%的份額增至50%。

防砸臉指南!大屏?xí)r代如何重塑界面交互?

更大尺寸的屏幕可以承載更多的內(nèi)容展現(xiàn),更適合游戲、閱讀與播放視頻,體驗(yàn)得以提升。

防砸臉指南!大屏?xí)r代如何重塑界面交互?

然而屏幕尺寸的上升并沒(méi)有引起用戶操作上的過(guò)多不適,有51%的用戶已經(jīng)適應(yīng)雙手操作。

關(guān)于這點(diǎn),有篇很棒的文章推薦給同學(xué)們,分析到位具體:《移動(dòng)設(shè)備手持分析!用戶到底是怎么使用手機(jī)的?》

防砸臉指南!大屏?xí)r代如何重塑界面交互?

即使用戶單手操作,在操作大屏幕時(shí)的相對(duì)盲區(qū)(深色區(qū)域),需要更多的響應(yīng)時(shí)間,也可以被接受。

防砸臉指南!大屏?xí)r代如何重塑界面交互?

即便如此。3.5英寸~4英寸,依然是平衡單手操作與體驗(yàn)的合理尺寸范圍。

防砸臉指南!大屏?xí)r代如何重塑界面交互?

這樣就產(chǎn)生一個(gè)矛盾:用戶擁有更大屏幕的尺寸,但從人機(jī)交互的角度,并不完美。

面對(duì)這一現(xiàn)狀,從APP產(chǎn)品界面設(shè)計(jì)的角度,需要做出改變。

大屏幕擁有典型的可用性問(wèn)題:縱向單手操作機(jī)身,邊角、頂部、左右側(cè)邊難以觸達(dá),放置在以上盲區(qū)的點(diǎn)擊入口,將導(dǎo)致體驗(yàn)路徑中斷。

交互設(shè)計(jì)角度的最佳實(shí)踐:

1. 設(shè)計(jì)安全區(qū)域,避開(kāi)操作盲區(qū)

示例,百度搜索結(jié)果頁(yè),根據(jù)視線規(guī)律,典型的左上角操作盲區(qū)可以用于logo展現(xiàn)。

防砸臉指南!大屏?xí)r代如何重塑界面交互?

2. 注意使用場(chǎng)景路徑觸發(fā)的連貫性

示例,在百度手機(jī)助手Android中下載百度瀏覽器,操作區(qū)域集中在安全區(qū)域。

防砸臉指南!大屏?xí)r代如何重塑界面交互?

3. 更多的使用可拖動(dòng)的浮動(dòng)按鈕,給用戶更自由的操作可能性

示例,百度瀏覽器Android中翻頁(yè)/返回頂部的組合按鈕。

防砸臉指南!大屏?xí)r代如何重塑界面交互?

4. 更多的使用手勢(shì),并提供暗示

示例,百度瀏覽器Android的刪除窗口操作。

防砸臉指南!大屏?xí)r代如何重塑界面交互?

5. 更多的使用語(yǔ)音作為輸入方式

示例:生活手記中使用語(yǔ)音替代鍵盤(pán)輸入。

防砸臉指南!大屏?xí)r代如何重塑界面交互?

6. 橫屏Pad化的操作設(shè)計(jì),以及更多的內(nèi)容展現(xiàn)

示例,百度瀏覽器iPhone的橫屏設(shè)計(jì),如同網(wǎng)頁(yè)的響應(yīng)式布局概念。

防砸臉指南!大屏?xí)r代如何重塑界面交互?

在界面交互的層面之外,在不遠(yuǎn)的時(shí)間,硬件存在更多的優(yōu)化可能性。

1. 更窄的邊框,更大的顯示比例。

防砸臉指南!大屏?xí)r代如何重塑界面交互?

2. 柔性材質(zhì)。

防砸臉指南!大屏?xí)r代如何重塑界面交互?

3. “手機(jī)”成為服務(wù)的觸發(fā)者,屏幕投射與隔空操作。

鋼鐵俠即視感,順便推薦一篇鋼鐵俠的文章:《PS+AI教程!教你繪制超酷炫的鋼鐵俠面具!》

防砸臉指南!大屏?xí)r代如何重塑界面交互?

之所以將討論的范圍擴(kuò)展到硬件,是希望設(shè)計(jì)師在針對(duì)具體屏幕設(shè)計(jì)的同時(shí),能夠從另外的視角,思考人機(jī)交互的變化與可能性,激發(fā)創(chuàng)造力。

當(dāng)前是大屏手機(jī)的時(shí)代,推動(dòng)你的手機(jī)APP產(chǎn)品跟進(jìn)吧!

多看多想多學(xué)習(xí),前輩的經(jīng)驗(yàn)都是財(cái)富!

華為設(shè)計(jì)總監(jiān)的6年經(jīng)驗(yàn)分享,幫你全民提升自己!
《6年面試經(jīng)驗(yàn)總結(jié)!設(shè)計(jì)師如何從8個(gè)方面全面提升自己?》

設(shè)計(jì)師的自我修煉手冊(cè)!網(wǎng)易美女主管傾情分享!
《網(wǎng)易美女設(shè)計(jì)主管!論設(shè)計(jì)師的自我修養(yǎng)》

升職加薪的17條經(jīng)驗(yàn)分享!
《17條經(jīng)驗(yàn)之談!視覺(jué)設(shè)計(jì)師如何進(jìn)階提升自己能力》

原文地址:mux.baidu

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱:2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái),專注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書(shū):史上最全的設(shè)計(jì)師圖書(shū)導(dǎo)航:http://hao.uisdc.com/book/
設(shè)計(jì)微博:擁有粉絲量88萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ,歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航:全球頂尖設(shè)計(jì)網(wǎng)站推薦,設(shè)計(jì)師必備導(dǎo)航:http://hao.uisdc.com
官方微信:想在手機(jī)上、被窩里獲取設(shè)計(jì)教程和各種意想不到的"福利"嗎?添加優(yōu)設(shè)哥微信號(hào):youshege

防砸臉指南!大屏?xí)r代如何重塑界面交互?

收藏 3
點(diǎn)贊 1

復(fù)制本文鏈接 文章為作者獨(dú)立觀點(diǎn)不代表優(yōu)設(shè)網(wǎng)立場(chǎng),未經(jīng)允許不得轉(zhuǎn)載。