2014-11-18 用心設(shè)計(jì)
藍(lán)藍(lán)設(shè)計(jì)( yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè)、平面設(shè)計(jì)服務(wù)
<div class="rich_media_content" id="js_content"><p><span style="max-width:100% !important;word-wrap:break-word !important;box-sizing:border-box !important;">如今的手機(jī)越來(lái)越大,我們的手則不然。怎樣的設(shè)計(jì)解決方案可以確保大屏手機(jī)上的交互體驗(yàn)依然輕松舒適?下面是一些小建議,供你參考。</span></p>
Steven Hoober對(duì)1333名用戶(hù)的手機(jī)使用習(xí)慣進(jìn)行了觀察和分析,發(fā)現(xiàn)其中75%的用戶(hù)會(huì)依賴(lài)于拇指進(jìn)行操作,而49%的用戶(hù)習(xí)慣于單手持機(jī)。在大屏手機(jī)上(我們主要指4寸以上的規(guī)格),用戶(hù)必須將拇指伸出舒適區(qū)域才可能觸摸到界面頂部的交互對(duì)象。
舉 個(gè)例子,我個(gè)人來(lái)說(shuō),每天在使用Amazon音樂(lè)應(yīng)用時(shí)都會(huì)遇到這樣的問(wèn)題。我需要頻繁使用到的導(dǎo)航入口恰好位于界面左上角;這個(gè)幾年來(lái)約定俗成的模式, 如今在大屏設(shè)備上反而成了單手操作的噩夢(mèng)。和很多人一樣,要觸摸到這個(gè)圖標(biāo),我首先必須將手掌上移,握住機(jī)身,再伸出拇指去夠到它;或是伸出另一只手來(lái)幫 助操作。其實(shí)事情完全可以不必這樣。
系統(tǒng)級(jí)的解決方案
為了解決此類(lèi)問(wèn)題,如今的移動(dòng)操作系統(tǒng)已經(jīng)提供了一些相關(guān)的解決方案,幫助用戶(hù)更方便的觸摸到界面頂部的控件。
在iOS方面,蘋(píng)果允許用戶(hù)通過(guò)連續(xù)兩次輕觸home鍵使界面整體下移,以便界面頂部的元素可以進(jìn)入拇指熱區(qū)。方法不壞,只是原本一次點(diǎn)擊的操作現(xiàn)在需要三次了。
此外,這種系統(tǒng)級(jí)的解決方案當(dāng)中還有一個(gè)時(shí)間限制的問(wèn)題。當(dāng)你兩次輕觸home鍵使界面下移,然后讓視線重新定位目標(biāo)對(duì)象的新位置,并準(zhǔn)備進(jìn)行操作時(shí),界面很可能已經(jīng)自動(dòng)恢復(fù)到默認(rèn)的位置了;若是這樣,你還需要再來(lái)過(guò)一遍;整個(gè)體驗(yàn)不是很優(yōu)雅。
屏幕邊緣右滑手勢(shì)
讓拇指在大屏手機(jī)上觸摸到界面左上角的元素固然困難,但讓手指從手機(jī)左邊緣開(kāi)始貼著底部橫向滑動(dòng)就簡(jiǎn)單很多了。對(duì)于展開(kāi)導(dǎo)航菜單的交互來(lái)說(shuō),這種方式可以很好的替代傳統(tǒng)的左上角入口模式。
不 過(guò),與其他種類(lèi)的手勢(shì)操作相同,這種模式有著自身的弊端,也就是不如明確的視覺(jué)元素那樣顯而易見(jiàn)。換句話說(shuō),用戶(hù)必須首先知道這種交互的存在,然后記憶下 來(lái),并在需要使用的時(shí)候記得起來(lái)才可以。所以,這類(lèi)手勢(shì)并不能完全代替可視化的交互元素;例如漢堡包菜單圖標(biāo)及點(diǎn)擊展開(kāi)的模式仍然存在,手勢(shì)操作成為一種 “輔助”或“優(yōu)化”的角色。
此外還有一個(gè)問(wèn)題:右滑手勢(shì)只是讓菜單的展開(kāi)更加便捷,無(wú)需拇指點(diǎn)擊左上角的圖標(biāo)即可實(shí)現(xiàn);但要觸摸到菜單內(nèi)部那些靠近屏幕頂端的選項(xiàng),問(wèn)題依然存在。
底部布局
要 確保用戶(hù)在單手操作時(shí)能舒服的使用重要的常用功能,我們有時(shí)需要考慮將功能或?qū)Ш皆夭季值浇缑娴撞?。這種方案不僅為重要功能提升了可觸達(dá)性,同時(shí)還可能 改善其他方面的體驗(yàn)。最經(jīng)典的案例就是Facebook在他們的iOS應(yīng)用中將導(dǎo)航從側(cè)邊畫(huà)布外移回到界面底部?!靶隆钡脑O(shè)計(jì)方案不僅增強(qiáng)了用戶(hù)參與度、 滿(mǎn)意度,而且提升了導(dǎo)航效率。
在Amazon音樂(lè)應(yīng)用中,我們不僅可以把導(dǎo)航入口扔到界面底部,同時(shí)還可以嘗試在底部欄內(nèi)部根據(jù)功能權(quán)重調(diào)整順序。
浮動(dòng)按鈕
縱然很多解決方案是具有跨平臺(tái)性質(zhì)的,但有些時(shí)候仍需考慮到特定系統(tǒng)和硬件的特征。
舉例來(lái)說(shuō),安卓平臺(tái)的硬件底部是系統(tǒng)級(jí)的操作欄,這就意味著任何被放置在界面底部的操作元素都可能與其產(chǎn)生沖突,造成誤操作。實(shí)際上,安卓的設(shè)計(jì)規(guī)范當(dāng)中明確指出了“不要在界面底部放置tab欄”。
不 過(guò),在Google新近推出的Material Design當(dāng)中出現(xiàn)了一類(lèi)替代方案,也就是浮動(dòng)按鈕方案。浮動(dòng)按鈕是一種比較特殊的交互元素,布局位置獨(dú)立,不受界面當(dāng)中其他元素的局限。通常,浮動(dòng)按 鈕適用于功能操作,而非導(dǎo)航;不過(guò)在Amazon音樂(lè)應(yīng)用中,由于導(dǎo)航入口確實(shí)會(huì)被高頻次的使用到,所以也許可以嘗試以浮動(dòng)的形式展示導(dǎo)航菜單按鈕。
小結(jié)
當(dāng)你在思考怎樣使界面在大屏手機(jī)上更好用時(shí),以上幾種處理交互對(duì)象的設(shè)計(jì)思路可供參考。相信隨著大屏手機(jī)的日益普及,類(lèi)似這樣的優(yōu)化模式還會(huì)變得越來(lái)越多。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://yvirxh.cn