大屏手機(jī)時(shí)代,如何重塑界面交互
這是一個(gè)大屏手機(jī)的時(shí)代。
強(qiáng)調(diào)這件事情的意義在于,這已經(jīng)成為事實(shí)。
Medium上存在一份個(gè)人統(tǒng)計(jì)。
在過(guò)去7年,新上市的手機(jī)屏幕尺寸越來(lái)越大。
以4.5英寸為分界點(diǎn),我們更清晰的看到這一變化。過(guò)去的兩年,4.5英寸的比例從10%升至80%。
在國(guó)內(nèi)的過(guò)去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》
然而屏幕尺寸的上升并沒(méi)有引起用戶操作上的過(guò)多不適,有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ì)的角度,需要做出改變。
大屏幕擁有典型的可用性問(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)。
2.注意使用場(chǎng)景路徑觸發(fā)的連貫性。
示例,在百度手機(jī)助手Android中下載百度瀏覽器,操作區(qū)域集中在安全區(qū)域。
3.更多的使用可拖動(dòng)的浮動(dòng)按鈕,給用戶更自由的操作可能性。
示例,百度瀏覽器Android中翻頁(yè)/返回頂部的組合按鈕。
4.更多的使用手勢(shì),并提供暗示。
示例,百度瀏覽器Android的刪除窗口操作。
5.更多的使用語(yǔ)音作為輸入方式。
示例:生活手記中使用語(yǔ)音替代鍵盤(pán)輸入。
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)吧!
本文地址:http://m.likemindfilms.com/tutorial/id2625.html
您可能還喜歡
- 關(guān)于第三方注冊(cè)和本地注冊(cè)的選擇
- 8大網(wǎng)頁(yè)前端界面必備jQuery插件
- 掌上指路標(biāo) —– APP架構(gòu)與導(dǎo)航設(shè)計(jì)
- 時(shí)尚電商網(wǎng)站交互分析
- 軟件推薦為移動(dòng)設(shè)計(jì)而生-Justinmind
- TGideas實(shí)例:加載,不只是少一點(diǎn)點(diǎn)
- 網(wǎng)頁(yè)設(shè)計(jì)中引人入勝的引導(dǎo)頁(yè)設(shè)計(jì)
- 體驗(yàn)新版Apple AppStore ——App設(shè)計(jì)從
- 確認(rèn)按鈕在左邊,取消按鈕在右邊?
- 交互設(shè)計(jì)從登錄開(kāi)始
- 專訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類
- 體驗(yàn)設(shè)計(jì)中的排序問(wèn)題
- 網(wǎng)頁(yè)設(shè)計(jì)精粹 網(wǎng)頁(yè)中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁(yè)UI - 原子設(shè)計(jì)理論(上)
- 如何通過(guò)設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺(jué)設(shè)計(jì)系列文章(二):全屏