規(guī)范只是幫助我們?cè)O(shè)計(jì)師去簡(jiǎn)單高效的設(shè)計(jì)頁(yè)面，但是沒(méi)有必要去循規(guī)蹈矩。

 

中國(guó)有句古話：溫故而知新。在這段做原型的時(shí)間中，我翻看了很多以前的交互設(shè)計(jì)，以求有所感悟，可以做出讓自己滿意的東西。我想嘗試著將一些“舊的”交互方式添加到改版中的某些地方，因?yàn)槲覉?jiān)信所有的東西都是有利有弊的，被淘汰的不一定絕對(duì)是不好的。

 

IOS和Android兩大平臺(tái)，他們各自擁有自己的一些設(shè)計(jì)規(guī)范。所謂的設(shè)計(jì)規(guī)范，不外乎就是各個(gè)平臺(tái)對(duì)于設(shè)計(jì)風(fēng)格、設(shè)計(jì)方案以及交互方式的一些約定俗成。按照這些約定，既可以保證快速的實(shí)現(xiàn)產(chǎn)品設(shè)計(jì)，又可以滿足本平臺(tái)用戶的使用習(xí)慣。

 

 

為什么需要這些規(guī)范？

 

我們都知道，交通規(guī)則是隨著現(xiàn)代交通發(fā)展而出現(xiàn)的一個(gè)衍生品；“紅燈停，路燈行”“走在路上靠右行”這些事情從小就被父母掛在耳邊天天念叨。特別是在自己可以獨(dú)立去上學(xué)的時(shí)候，每次出門(mén)都會(huì)有一聲“路上注意安全”在耳邊響起。這些都是再教育我們要遵守交通規(guī)則?，F(xiàn)在的都市車水馬龍，正式因?yàn)橛辛私煌ㄒ?guī)則的存在，才讓我們的出行更加有了保障。特別是國(guó)內(nèi)的交通，如果沒(méi)有交通規(guī)則的存在，像北上廣深這些城市，極有可能從早上上班一直堵車堵到晚上下班。

 

交通規(guī)則本身就是一個(gè)規(guī)范，正是有了這一規(guī)范才使得一切井然有序。在交通上如此，在設(shè)計(jì)領(lǐng)域也是如此了。如果所有人都是按照自己的意愿去做設(shè)計(jì)而沒(méi)有一個(gè)統(tǒng)一的規(guī)范，那軟件界面和交互就是五花八門(mén)的，用戶體驗(yàn)更是無(wú)從談起。

 

IOS和Android目前是移動(dòng)端最大的兩個(gè)操作平臺(tái)，他們之間有共同的地方，也存在著一些差異，接下來(lái)我們一起看看，兩個(gè)平臺(tái)上具體的頁(yè)面布局規(guī)范是怎樣的。

 

 

IOS端的頁(yè)面布局，大牛們稱之為“經(jīng)典的延續(xù)”。

 

為什么這樣說(shuō)呢？ios是iPhone所使用的操作平臺(tái)，iPhone的產(chǎn)品經(jīng)過(guò)了這么多年的迭代，除了屏幕大小有所改變之外，其產(chǎn)品的基本造型大致上都是很一致的。同樣在其操作平臺(tái)上也是大體相同的。在IOS的平臺(tái)規(guī)范里面，它的界面上頁(yè)眉和頁(yè)腳都做出了相應(yīng)的規(guī)定。頁(yè)眉我們稱為導(dǎo)航欄，主要是實(shí)現(xiàn)了頁(yè)面的一些跳轉(zhuǎn)以及當(dāng)前頁(yè)面的一些操作。底部的頁(yè)腳通常會(huì)設(shè)計(jì)成工具欄或者標(biāo)簽欄。工具欄主要是放置一些我們對(duì)于當(dāng)前頁(yè)面的傳統(tǒng)操作；標(biāo)簽欄主要是實(shí)現(xiàn)幾個(gè)主要頁(yè)面或者主要任務(wù)流程之間的快速切換。

 

 

在IOS端的app大多都是按照這樣的規(guī)范去設(shè)計(jì)的，先簡(jiǎn)單的說(shuō)一下，IOS對(duì)頁(yè)眉、頁(yè)腳的規(guī)定有哪些（后續(xù)我會(huì)特地寫(xiě)篇關(guān)于導(dǎo)航和列表交互操作的文章）。

 

頁(yè)眉的導(dǎo)航欄主要是用來(lái)實(shí)現(xiàn)不同信息層級(jí)之間的交流，有時(shí)候也會(huì)用于管理當(dāng)前屏幕的內(nèi)容。例如通常我們?cè)陧敳繒?huì)放置一個(gè)標(biāo)題來(lái)表示當(dāng)前頁(yè)面的大致內(nèi)容，左側(cè)呢，會(huì)放一個(gè)返回按鈕，右側(cè)會(huì)放置一個(gè)操作按鈕。

 

頁(yè)腳大多會(huì)做成兩種情況。其一是做成工具欄。工具欄是用于放置操作當(dāng)前屏幕中各個(gè)對(duì)象的控件，例如網(wǎng)易郵箱底部就放置了回復(fù)、轉(zhuǎn)發(fā)等控件。其二是做成標(biāo)簽欄，標(biāo)簽欄是讓用戶在不同的任務(wù)界面和模式之間進(jìn)行切換，例如京東app的工具欄就放置了首頁(yè)、分類以及發(fā)現(xiàn)、購(gòu)物車和個(gè)人中心五個(gè)Tab，用來(lái)不同界面之間的快速切換。IOS端的布局規(guī)范大概就是以上內(nèi)容了，接下來(lái)我們看一下Android端。

 

 

 

Android端的頁(yè)面布局，大牛們總結(jié)為“變化與統(tǒng)一”。

 

為什么會(huì)有這樣的一個(gè)總結(jié)，這就必須得說(shuō)一下Android操作平臺(tái)的發(fā)展歷史了。

 

在2010年12月份，Android第一次推出了它的2.3系統(tǒng)，那時(shí)Android的整個(gè)硬件布局都是混亂的，所以平臺(tái)規(guī)范更是無(wú)從談起了。一直到了2011年2月份，Android推出了3.0系統(tǒng)，這是Android第一次為平板而設(shè)計(jì)的一個(gè)Android系統(tǒng)，在平板上第一次出現(xiàn)了一個(gè)虛擬按鈕。緊接著，2011年10月份發(fā)布了4.0系統(tǒng)，4.0才是一個(gè)Android真正意義上可以拿的出手的操作平臺(tái)，因?yàn)?.0整合了平板和手機(jī)規(guī)范，在3.0的基礎(chǔ)上，4.0繼續(xù)延續(xù)了虛擬按鈕和虛擬導(dǎo)航的樣式。時(shí)間終于來(lái)到了2014年10月份，Android推出了叫做Meterial Design 的5.0系統(tǒng)，這才是Android真正最為詳細(xì)的平臺(tái)規(guī)范。再后來(lái)從2015年9月的Android 6.0一直到2018年5月份的Android 9.0，再到如今傳說(shuō)中的Android Q ，Android平臺(tái)的操作規(guī)范一直在一步步完善。

 

 

回顧一下，4.0是Android系統(tǒng)一個(gè)標(biāo)志性的時(shí)刻，谷歌在Android系統(tǒng)上實(shí)現(xiàn)了平板和手機(jī)的統(tǒng)一，于是將虛擬按鈕作為Android系統(tǒng)的標(biāo)配，從4.0開(kāi)始沒(méi)有配備硬件按鈕設(shè)備將顯示導(dǎo)航欄這一虛擬的系統(tǒng)欄。與IOS頁(yè)面的主要導(dǎo)航放在底部的標(biāo)簽欄上不同，由于它已經(jīng)在底部有一個(gè)虛擬的導(dǎo)航欄了，所以Android 4.0把重要的系統(tǒng)操作放在了頁(yè)眉，稱之為操作欄，也叫action bar。它主要用于實(shí)現(xiàn)app內(nèi)視圖的切換和層級(jí)間的導(dǎo)航。

 

 

在Android 4.0中，因?yàn)樗撞坑刑摂M導(dǎo)航欄，導(dǎo)致它的操作欄只能放在頂部。這就促使它的頁(yè)面布局肯定與IOS是不一樣的，這里我將其總結(jié)為Android 4.0的四種頁(yè)面布局：第一種是一個(gè)大而全的頂部主操作欄，配合下拉菜單進(jìn)行頁(yè)面間的切換；第二種是主操作欄加次級(jí)操作欄，將下拉菜單中的頁(yè)面平鋪到頁(yè)面中；第三種是主操作欄加底部工具欄，這樣雖然會(huì)增加誤操作的風(fēng)險(xiǎn)，但是會(huì)使頁(yè)面干凈簡(jiǎn)潔很多；第四種則是主操作欄加次級(jí)操作欄再加底部工具欄，這是用于你的產(chǎn)品有很多的功能點(diǎn)。

 

 

 到了Android 5.0 ，出現(xiàn)了一個(gè)曾經(jīng)紅極一時(shí)的交互設(shè)計(jì)，抽屜式導(dǎo)航。Android 5.0出現(xiàn)的時(shí)候，IOS 7所引領(lǐng)的圖標(biāo)扁平化已經(jīng)盛行，扁平化就是只有X軸和Y軸，Android 5.0 為了讓頁(yè)面更加有質(zhì)感，它在頁(yè)面上添加了Z軸，Z軸所帶來(lái)的的空間變化，會(huì)讓頁(yè)面更加有層次感和質(zhì)感。同時(shí)，在頂部主操作欄的左邊，添加了一個(gè)抽屜按鈕，點(diǎn)擊后會(huì)有一個(gè)抽屜式的展開(kāi)。Android 5.0的操作規(guī)范說(shuō)明中，大篇幅的介紹了這種抽屜式導(dǎo)航，Android對(duì)此非常的推崇。到了5.0，頂部的主操作欄稱之為應(yīng)用欄（APP Bar），用來(lái)顯示應(yīng)用的表示、應(yīng)用導(dǎo)航、內(nèi)容搜索以及其他操作。

 

 

發(fā)展至今，就用戶而言，已經(jīng)是很難看到IOS和Android在app的交互操作上有很大的不同了。所以在沒(méi)有嚴(yán)格規(guī)定的情況下，對(duì)于交互設(shè)計(jì)師而言，一套設(shè)計(jì)稿就可以完成工作，而一些不同的交互動(dòng)作和交互流程，標(biāo)注即可。

 

 

 

最后總結(jié)一下兩個(gè)平臺(tái)常用的操作手勢(shì)，其實(shí)在移動(dòng)端的手勢(shì)操作大多數(shù)是來(lái)源于我們的生活，例如在使用讀書(shū)app的時(shí)候，它的翻頁(yè)效果就是從我們生活中翻開(kāi)圖書(shū)這種手勢(shì)提取來(lái)的，好的手勢(shì)肯定是來(lái)源于生活而高于生活的。

 

在移動(dòng)端采用手勢(shì)操作有兩個(gè)大的好處：一呢是比較直觀化，不管是那個(gè)年齡段的使用人群，都可以憑借著直接去進(jìn)行操作；第二呢，則是非常的高效，手勢(shì)操作可以大大的降低用戶去頁(yè)面的一些操作成本。

 

在IOS和Android兩個(gè)平臺(tái)上，大部分操作手勢(shì)都是相同的，但也會(huì)有一些不同，最直接的體現(xiàn)就是“刪除”功能，IOS是向左側(cè)滑動(dòng)刪除，Android是長(zhǎng)按點(diǎn)擊刪除。在這種手勢(shì)操作規(guī)范的“硬核”區(qū)，還是要按照其平臺(tái)規(guī)范設(shè)計(jì)。而在一些“模糊”的區(qū)域，當(dāng)然是本著方便用戶操作的思想去設(shè)計(jì)。

 

 

在文章的最后，我想說(shuō)規(guī)范只是幫助我們?cè)O(shè)計(jì)師去簡(jiǎn)單高效的設(shè)計(jì)頁(yè)面，但是沒(méi)有必要去循規(guī)蹈矩。更何況移動(dòng)端發(fā)展到今天，就我個(gè)人而言，僅說(shuō)在APP的交互操作上，兩大平臺(tái)之間的操作區(qū)別已經(jīng)越來(lái)越不明顯了，有點(diǎn)求同存異的感覺(jué)。而造成這一現(xiàn)象最直觀的原因，當(dāng)然是所有設(shè)計(jì)者都明白的一個(gè)道理：一切設(shè)計(jì)的目的，都是以用戶的使用場(chǎng)景為中心的！