iOS和Android規(guī)范解析——手勢(shì)

3 評(píng)論 11501 瀏覽 82 收藏 6 分鐘

隨著iPhone X將Home鍵去掉,手勢(shì)在交互導(dǎo)航中的作用更加重要了。今天我們來(lái)研究一下Google Material Design規(guī)范和iOS人機(jī)設(shè)計(jì)規(guī)范中對(duì)于手勢(shì)的介紹。

Material Design Guidelines

手勢(shì)導(dǎo)航讓用戶可以使用劃動(dòng)手勢(shì)在同級(jí)或者上下級(jí)頁(yè)面之間切換。支持的手勢(shì)包括:按住水平拖動(dòng)、按住上下拖動(dòng)。

手勢(shì)一般建議用在如下情況:

自然排序的關(guān)系,比如表示日歷里連續(xù)天數(shù)的多個(gè)頁(yè)面;

包含較少下一級(jí)頁(yè)面的頁(yè)面;

包含類似內(nèi)容類型的頁(yè)面。

比如下面這個(gè)例子:

在這個(gè)例子中,用戶按住頁(yè)面的同時(shí)向下拖動(dòng),將這個(gè)頁(yè)面收起,從而回到上一級(jí)頁(yè)面。

iOS Human Interface Guidelines

在iOS系統(tǒng)中,邊緣劃動(dòng)手勢(shì)起到了全局操作的作用。其中,從屏幕左邊緣向右劃動(dòng),可以返回上一級(jí)頁(yè)面;在iPhone X之前的手機(jī),從底部邊緣向上劃動(dòng),可以劃出控制欄;從頂部邊緣向下劃動(dòng),可以劃出消息/控制中心浮層。用戶通過(guò)從底部邊緣劃動(dòng)的操作,可以呼出系統(tǒng)級(jí)的控制頁(yè)面,或者返回上一級(jí)頁(yè)面。

需要額外說(shuō)明的一點(diǎn)是:對(duì)于H5頁(yè)面,如果從屏幕左邊緣向右滑動(dòng),會(huì)直接退出H5頁(yè)面,不論你當(dāng)前處在H5這個(gè)系統(tǒng)里的哪一級(jí)頁(yè)面中。所以當(dāng)我們?cè)谠O(shè)計(jì)H5頁(yè)面時(shí)一定要注意,盡量防止用戶因?yàn)槭褂梅祷厥謩?shì)而退出了H5頁(yè),導(dǎo)致流失率的上升。

對(duì)于iPhone X而言,由于這款機(jī)型取消了經(jīng)典的蘋(píng)果手機(jī)的home鍵,蘋(píng)果給出了使用手勢(shì)替代原來(lái)點(diǎn)擊home鍵的操作:從屏幕底部向上劃動(dòng),可以退出當(dāng)前應(yīng)用(相當(dāng)于單擊home鍵);從屏幕底部上劃后停留,則進(jìn)入多任務(wù)狀態(tài)(相當(dāng)于雙擊home鍵)。

其實(shí)安卓手機(jī)在多年前,就出現(xiàn)了沒(méi)有home鍵的機(jī)型,而安卓系統(tǒng)是提供了虛擬按鍵,來(lái)代替home鍵的功能。蘋(píng)果的設(shè)計(jì),則是使用手勢(shì)來(lái)替代原來(lái)的點(diǎn)擊home鍵,操作上十分流暢,且不容易誤操作,因此是一個(gè)偉大的創(chuàng)新。

另外,對(duì)于底部邊緣這種系統(tǒng)級(jí)的手勢(shì)的運(yùn)用,有一點(diǎn)需要注意:當(dāng)我們?cè)谠O(shè)計(jì)比較沉浸的應(yīng)用時(shí),比如游戲,有可能會(huì)需要使用定制這些屏幕邊緣劃動(dòng)的手勢(shì),也就是當(dāng)用戶進(jìn)行了從屏幕邊緣劃動(dòng)的操作時(shí),不執(zhí)行系統(tǒng)的控制面板或者返回上一級(jí)頁(yè)面等操作,而是執(zhí)行游戲里需要的操作。在這種情況下,蘋(píng)果的規(guī)范建議:

第一次進(jìn)行屏幕邊緣劃動(dòng)時(shí),執(zhí)行應(yīng)用自身的設(shè)計(jì);

第二次進(jìn)行屏幕邊緣劃動(dòng)時(shí),執(zhí)行系統(tǒng)級(jí)的設(shè)計(jì),即出現(xiàn)系統(tǒng)的控制面板或者返回返回上一級(jí)頁(yè)面等操作。

另外,在iOS系統(tǒng)里,如果是iPad設(shè)備,則還有一個(gè)系統(tǒng)級(jí)手勢(shì):四個(gè)手指向中心捏攏,以返回到桌面。這個(gè)手勢(shì)是天然適應(yīng)于iPad的大屏幕的,也是手勢(shì)能表現(xiàn)執(zhí)行的操作效果這個(gè)理念很好的例子。

今天介紹了安卓和iOS系統(tǒng)里,關(guān)于使用手勢(shì)來(lái)進(jìn)行導(dǎo)航操作的部分。其中,安卓系統(tǒng)中,可以通過(guò)按住頁(yè)面并向下拖動(dòng),關(guān)閉一個(gè)二級(jí)頁(yè)面,回到一級(jí)頁(yè)面。另外在安卓系統(tǒng)中,用戶隨時(shí)都可以使用底部的虛擬按鍵返回上一級(jí)頁(yè)面;而iOS中可以在任何二級(jí)、三級(jí)…頁(yè)面中通過(guò)從屏幕左邊緣向右劃動(dòng)返回上一級(jí)頁(yè)面。相比較而言,iOS的做法會(huì)更容易操作一些。

#專欄作家#

沐風(fēng),微信公眾號(hào):“沐風(fēng)與體驗(yàn)設(shè)計(jì)”。人人都是產(chǎn)品經(jīng)理專欄作家,2017年度作家評(píng)選最佳人氣獎(jiǎng)。愛(ài)奇藝Phone和PC端交互團(tuán)隊(duì)負(fù)責(zé)人。留德海龜,曾任職騰訊微生活、網(wǎng)易、宜信。6年交互設(shè)計(jì)經(jīng)驗(yàn),專注設(shè)計(jì)領(lǐng)域,歡迎關(guān)注。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

題圖來(lái)自 Unsplash,基于CC0協(xié)議。

專欄作家
沐風(fēng),微信公眾號(hào):沐風(fēng)與體驗(yàn)設(shè)計(jì)。人人都是產(chǎn)品經(jīng)理專欄作家,2017年度作家評(píng)選最佳人氣獎(jiǎng)。愛(ài)奇藝資深交互設(shè)計(jì)師。留德海龜,曾任職騰訊微生活、網(wǎng)易、宜人貸。6年交互設(shè)計(jì)經(jīng)驗(yàn),專注設(shè)計(jì)領(lǐng)域,歡迎關(guān)注。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載

題圖來(lái)自Unsplash,基于CC0協(xié)議

該文觀點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 的確蘋(píng)果的手勢(shì)不錯(cuò),讓我深思為什么小米早在做第一代全面屏?xí)r不考慮用手勢(shì)取代下面虛擬操作按鈕,可能是受制與安卓系統(tǒng)本身,可能因?yàn)轭I(lǐng)導(dǎo)覺(jué)得影響不大,但如果早做了這個(gè)創(chuàng)新,現(xiàn)在的“全面屏”手機(jī)將更酷。我認(rèn)為安卓必會(huì)去掉現(xiàn)在大大的虛擬按鍵的,會(huì)用其他交互方式取代。

    來(lái)自北京 回復(fù)
  2. “偉大的創(chuàng)新”這種詞盡量少用,你咋不說(shuō)全手勢(shì)操作后學(xué)習(xí)成本騰的一下就上去了呢

    來(lái)自北京 回復(fù)
    1. 你試試iPhone X就知道學(xué)習(xí)成本有多低了。有時(shí)候光靠yy,是不夠的。

      來(lái)自北京 回復(fù)