當(dāng)我們玩轉(zhuǎn)很多有趣的APP之后,發(fā)現(xiàn)很多APP很多單手操作功能基本都是一樣的。因?yàn)檫@些單手操作交互效果都是通用的,也是移動(dòng)端固有的操作方式。
今天25學(xué)堂跟大家來回顧下五種常用APP單手操作用法。
在目前APP的設(shè)計(jì)當(dāng)中,多層級(jí)、多頁面切換是最頻繁的操作,如果僅僅依靠大多數(shù)應(yīng)用左上角的back鍵來返回或是點(diǎn)擊后才能切換tab,使用起來將非常不方便,因此APP單手操作最常見的應(yīng)用場(chǎng)景則是利用左右滑手勢(shì)來穿行于各層級(jí)頁面間。如何做好大屏手機(jī)的APP交互設(shè)計(jì)【APP設(shè)計(jì)課程】
第一種APP單手操作用法:頁面切換(包括TAB切圖效果)
如Tab切換。在這個(gè)手勢(shì)操作中有兩個(gè)關(guān)鍵因素影響使用體驗(yàn):
1、滑動(dòng)過程中頁面要跟隨手指,這樣能讓用戶形成對(duì)產(chǎn)品的控制感和更明確的層級(jí)感;
2、需要有“路標(biāo)”作用的頁面元素作為指引。
下圖(1)是網(wǎng)易云閱讀和iOS設(shè)置中的右滑操作示意。網(wǎng)易云閱讀中,在頁面任何位置輕輕右滑即可返回,iOS的返回操作手勢(shì)熱區(qū)在屏幕邊緣。這兩者的區(qū)別是,云閱讀中的返回設(shè)計(jì)更多是利用用戶的下意識(shí)行為,操作成本低,但同時(shí)增加了誤操作的風(fēng)險(xiǎn)。iOS中用戶的操作多是有意識(shí)的行為,誤操作幾率小,同時(shí)操作成本也增加了。
這兩種方式各有利弊,因此在設(shè)計(jì)中應(yīng)更具實(shí)際場(chǎng)景定義好對(duì)手指滑動(dòng)的感應(yīng)范圍和角度。
圖(1)iPhone和網(wǎng)易云閱讀的右滑手勢(shì)熱區(qū)
下圖(2)為網(wǎng)易云閱讀和網(wǎng)易新聞的文章正文頁,都能通過左滑返回,后滑進(jìn)入評(píng)論頁。相比之下用網(wǎng)易新聞顯得更自然,初次用網(wǎng)易云閱讀的用戶會(huì)更容易對(duì)右滑進(jìn)入評(píng)論頁產(chǎn)生迷惑。究其原因,網(wǎng)易新聞在標(biāo)題欄兩邊分別放置了“返回”和“跟帖”的頁面元素,就像是分叉口的兩個(gè)路標(biāo),讓用戶對(duì)前方的路形成心理預(yù)期。相比之下,網(wǎng)易云閱讀的返回和評(píng)論同處于頁面底部的左邊,引導(dǎo)性不太明確。
圖(2)手勢(shì)切換時(shí)的頁面引導(dǎo)
第二種APP單手操作用法:多維度的切換
舉例說明日歷的設(shè)計(jì)。日期的可拆分維度有年、月、季度、周等,不同的使用場(chǎng)景需要切換時(shí)間粒度,Cal利用手勢(shì)上下滑動(dòng)方便地切換周歷和日歷,利用左右滑切換日期。數(shù)讀首屏,默認(rèn)顯示文章概要,上滑即可瀏覽文章詳情,由此利用手勢(shì)的上下左右滑動(dòng)可以針對(duì)文章展開4個(gè)維度的瀏覽:概要,詳情,上一篇,下一篇。此外,相似的手勢(shì)運(yùn)用還是墨跡天氣等。
圖(3)Cal的周歷、日歷切換
圖(4)數(shù)讀的文章概要和詳情切換
第三種APP單手操作用法:將相關(guān)功能隱藏在對(duì)內(nèi)容的手勢(shì)操作中,擴(kuò)充屏幕內(nèi)容展示空間。
最常用的ios 像左滑或者右滑代表刪除。android就是長(zhǎng)按刪除。
資訊閱讀軟件Digg和追劇神奇TeeVee則采用了如圖(5)和圖(6)所示的操作方式。Digg通過右滑手勢(shì)后,可對(duì)該資訊模塊進(jìn)行贊、添加書簽、分享等操作。TeeVee中,左滑是最常見的刪除操作,右滑可查看更詳細(xì)的劇目更新信息和提醒設(shè)置。這種直接操作內(nèi)容的自然人機(jī)交互方式,不僅符合用戶的感知習(xí)慣,也能很好地節(jié)約屏幕空間,創(chuàng)造沉浸式的閱讀體驗(yàn),這點(diǎn)和Windows UI的設(shè)計(jì)理念非常契合。只要對(duì)新手用戶做好引導(dǎo),之后的操作就非常得心應(yīng)手。
圖(5)Digg將添加標(biāo)簽等內(nèi)容相關(guān)操作隱藏在左滑手勢(shì)之后
圖(6)TeeVee的手勢(shì)操作
除此之外iOS自帶的郵件、信息,和小清新壁紙應(yīng)用拾光都有類似手勢(shì)應(yīng)用。
第四種APP單手操作用法:提煉重要功能,利用手勢(shì)呼出操作
iOS的多指觸控自不必說,可是需要額外的記憶成本[3]。上文提到過,在使用時(shí)最常用的手勢(shì)是滑動(dòng)和點(diǎn)擊,運(yùn)用得當(dāng)也可以達(dá)到驚艷的效果。刷新浪微博時(shí)大家最常用的操作莫過于看和寫,新浪微博將寫微博的操作放在了左上角很明顯的位置,但是單手難以操作,而Fuubo通過點(diǎn)按屏幕底部的首頁鍵然后順勢(shì)上滑,即可觸發(fā)寫微博的操作,更簡(jiǎn)潔快速。如圖(7)是新浪微博和Fuubo的界面功能布局對(duì)比。
圖(7)新浪微博和Fuubo的寫微博功能呼出方式
在優(yōu)酷的播放界面任何地方左右滑動(dòng)可控制播放進(jìn)度,上下滑動(dòng)控制音量,將手指從界面眾多功能中解放出來。
圖(8)優(yōu)酷的手勢(shì)運(yùn)用
除此之外,Clear,Any.Do等to do應(yīng)用利用下拉手勢(shì)直接調(diào)出最常用的編輯新條目功能;易信雙擊呼出語音;多看閱讀下拉書籍正文直接添加書簽;Readmill在文章閱讀時(shí)上下滑直接調(diào)節(jié)亮度;Solar利用上下滑手勢(shì)查看不同時(shí)間點(diǎn)的天氣。
第五種APP單手操作用法:往上滑實(shí)現(xiàn)一些交互功能。
比如ios當(dāng)中,向上滑可以滑出系統(tǒng)正在運(yùn)行的APP應(yīng)用。但是很多APP應(yīng)用也采用這一的app單手操作功能。騰訊視頻APP在看視頻的時(shí)候,向上滑動(dòng)代表是 音量得的增加或者減少。左右代表快進(jìn)和倒退。
所以,我們?cè)谠O(shè)計(jì)APP的時(shí)候,要充分利用簡(jiǎn)單的上下滑和點(diǎn)擊手勢(shì)呼出APP使用時(shí)最常用、觸發(fā)頻率最高的功能,提高使用效率。但哪些功能優(yōu)先級(jí)比較高,是否容易誤操作,誤操作后果如何是需要慎重考慮的問題。如優(yōu)酷的上下滑調(diào)節(jié)音量功能的優(yōu)先級(jí)是否如此之高,在某些場(chǎng)合是否會(huì)令用戶誤操作而尷尬,這些都是需要結(jié)合使用場(chǎng)景去仔細(xì)斟酌的。
全站高品質(zhì)素材免費(fèi)下載!