如今的手機越來越大,我們的手則不然。怎樣的設(shè)計解決方案可以確保大屏手機上的交互體驗依然輕松舒適?下面是一些實用的小建議,同學(xué)們處理交互對象時可以參考這幾種思路,學(xué)起來吧。
基礎(chǔ)不熟的同學(xué),直接來這里惡補吧!《交互基礎(chǔ)知識科普!帶你認識最熱門的12種導(dǎo)航模式》
為拇指而設(shè)計
Steven Hoober對1333名用戶的手機使用習(xí)慣進行了觀察和分析,發(fā)現(xiàn)其中75%的用戶會依賴于拇指進行操作,而49%的用戶習(xí)慣于單手持機。在大屏手機上(我們主要指4寸以上的規(guī)格),用戶必須將拇指伸出舒適區(qū)域才可能觸摸到界面頂部的交互對象。
舉個例子,我個人來說,每天在使用Amazon音樂應(yīng)用時都會遇到這樣的問題。我需要頻繁使用到的導(dǎo)航入口恰好位于界面左上角;這個幾年來約定俗成的模式,如今在大屏設(shè)備上反而成了單手操作的噩夢。和很多人一樣,要觸摸到這個圖標,我首先必須將手掌上移,握住機身,再伸出拇指去夠到它;或是伸出另一只手來幫助操作。其實事情完全可以不必這樣。
系統(tǒng)級的解決方案
為了解決此類問題,如今的移動操作系統(tǒng)已經(jīng)提供了一些相關(guān)的解決方案,幫助用戶更方便的觸摸到界面頂部的控件。
在iOS方面,蘋果允許用戶通過連續(xù)兩次輕觸home鍵使界面整體下移,以便界面頂部的元素可以進入拇指熱區(qū)。方法不壞,只是原本一次點擊的操作現(xiàn)在需要三次了。
此外,這種系統(tǒng)級的解決方案當中還有一個時間限制的問題。當你兩次輕觸home鍵使界面下移,然后讓視線重新定位目標對象的新位置,并準備進行操作時,界面很可能已經(jīng)自動恢復(fù)到默認的位置了;若是這樣,你還需要再來過一遍;整個體驗不是很優(yōu)雅。
屏幕邊緣右滑手勢
讓拇指在大屏手機上觸摸到界面左上角的元素固然困難,但讓手指從手機左邊緣開始貼著底部橫向滑動就簡單很多了。對于展開導(dǎo)航菜單的交互來說,這種方式可以很好的替代傳統(tǒng)的左上角入口模式。
不過,與其他種類的手勢操作相同,這種模式有著自身的弊端,也就是不如明確的視覺元素那樣顯而易見。換句話說,用戶必須首先知道這種交互的存在,然后記憶下來,并在需要使用的時候記得起來才可以。所以,這類手勢并不能完全代替可視化的交互元素;例如漢堡包菜單圖標及點擊展開的模式仍然存在,手勢操作成為一種“輔助”或“優(yōu)化”的角色。
此外還有一個問題:右滑手勢只是讓菜單的展開更加便捷,無需拇指點擊左上角的圖標即可實現(xiàn);但要觸摸到菜單內(nèi)部那些靠近屏幕頂端的選項,問題依然存在。
底部布局
要確保用戶在單手操作時能舒服的使用重要的常用功能,我們有時需要考慮將功能或?qū)Ш皆夭季值浇缑娴撞?。這種方案不僅為重要功能提升了可觸達性,同時還可能改善其他方面的體驗。最經(jīng)典的案例就是Facebook在他們的iOS應(yīng)用中將導(dǎo)航從側(cè)邊畫布外移回到界面底部?!靶隆钡脑O(shè)計方案不僅增強了用戶參與度、滿意度,而且提升了導(dǎo)航效率。
在Amazon音樂應(yīng)用中,我們不僅可以把導(dǎo)航入口扔到界面底部,同時還可以嘗試在底部欄內(nèi)部根據(jù)功能權(quán)重調(diào)整順序。
浮動按鈕
縱然很多解決方案是具有跨平臺性質(zhì)的,但有些時候仍需考慮到特定系統(tǒng)和硬件的特征。
舉例來說,安卓平臺的硬件底部是系統(tǒng)級的操作欄,這就意味著任何被放置在界面底部的操作元素都可能與其產(chǎn)生沖突,造成誤操作。實際上,安卓的設(shè)計規(guī)范當中明確指出了“不要在界面底部放置tab欄”。
不過,在Google新近推出的Material Design當中出現(xiàn)了一類替代方案,也就是浮動按鈕方案。浮動按鈕是一種比較特殊的交互元素,布局位置獨立,不受界面當中其他元素的局限。通常,浮動按鈕適用于功能操作,而非導(dǎo)航;不過在Amazon音樂應(yīng)用中,由于導(dǎo)航入口確實會被高頻次的使用到,所以也許可以嘗試以浮動的形式展示導(dǎo)航菜單按鈕。
小結(jié)
當你在思考怎樣使界面在大屏手機上更好用時,以上幾種處理交互對象的設(shè)計思路可供參考。相信隨著大屏手機的日益普及,類似這樣的優(yōu)化模式還會變得越來越多。
成為交互設(shè)計師的必讀好文!
阿里巴巴資深交互設(shè)計師經(jīng)驗!
《推薦!交互設(shè)計那些事兒(一)》網(wǎng)易設(shè)計總監(jiān)親歷分享!
《網(wǎng)易美女設(shè)計主管!交互設(shè)計菜鳥如何入門?》交互設(shè)計師自學(xué)指南!
《交互設(shè)計師修煉指南!教你從零開始成為優(yōu)秀交互設(shè)計師》
原文地址:lukew
譯文地址:beforweb
譯者:@BeForWeb
【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱:2650232288@qq.com】
================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計師學(xué)習(xí)平臺,專注分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程。
【特色推薦】
設(shè)計師需要讀的100本書:史上最全的設(shè)計師圖書導(dǎo)航:http://hao.uisdc.com/book/。
設(shè)計微博:擁有粉絲量86萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ,歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航:全球頂尖設(shè)計網(wǎng)站推薦,設(shè)計師必備導(dǎo)航:http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設(shè)計教程、經(jīng)驗分享和各種意想不到的"福利"嗎?
添加 優(yōu)秀網(wǎng)頁設(shè)計 微信號:【youshege】優(yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加:
復(fù)制本文鏈接 文章為作者獨立觀點不代表優(yōu)設(shè)網(wǎng)立場,未經(jīng)允許不得轉(zhuǎn)載。
發(fā)評論!每天贏獎品
點擊 登錄 后,在評論區(qū)留言,系統(tǒng)會隨機派送獎品
2012年成立至今,是國內(nèi)備受歡迎的設(shè)計師平臺,提供獎品贊助 聯(lián)系我們
AI輔助海報設(shè)計101例
已累計誕生 753 位幸運星
發(fā)表評論
↓ 下方為您推薦了一些精彩有趣的文章熱評 ↓