大屏手機(jī)時(shí)代,如何重塑界面交互

DT
0 評(píng)論 11876 瀏覽 5 收藏 7 分鐘

這是一個(gè)大屏手機(jī)的時(shí)代。強(qiáng)調(diào)這件事情的意義在于,這已經(jīng)成為事實(shí)。

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

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

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

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

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

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

【圖】《百度移動(dòng)分發(fā)報(bào)告2014H1》

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

【圖】《百度移動(dòng)趨勢(shì)報(bào)告2014Q2》

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

【圖】《How Do Users Really Hold Mobile Devices》by Steven Hoober

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

【圖】《Mobile UI ergonomics: How hard is it really to tap different areas of your phone interface?》By Mikkel Bo

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

示例,百度瀏覽器iPhone的橫屏設(shè)計(jì),如同網(wǎng)頁(yè)的Responsive Layout概念。

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

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

2.柔性材質(zhì)。

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

《The World as a Display》

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

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

一些有價(jià)值的相關(guān)基礎(chǔ)研究鏈接

  1. 百度移動(dòng)分發(fā)報(bào)告2014H1
  2. 百度移動(dòng)互聯(lián)網(wǎng)發(fā)展趨勢(shì)報(bào)告2014Q2
  3. The Rise of the Phablet: Designing for Larger Phones
  4. Common Misconceptions About Touch
  5. How to design for thumbs in the era of huge screens
  6. Designing for Large Screen Smartphones
  7. Mobile UI ergonomics: How hard is it really to tap different areas of your phone interface?
  8. Insights on Switching, Centering, and Gestures for Touchscreens
  9. A comprehensive look at smartphone screen size statistics and trends

 

文章來源:百度MUX

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒評(píng)論,等你發(fā)揮!