規(guī)范只是幫助我們設(shè)計師去簡單高效的設(shè)計頁面，但是沒有必要去循規(guī)蹈矩。

 

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

 

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

 

 

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

 

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

 

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

 

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

 

 

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

 

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

 

 

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

 

頁眉的導航欄主要是用來實現(xiàn)不同信息層級之間的交流，有時候也會用于管理當前屏幕的內(nèi)容。例如通常我們在頂部會放置一個標題來表示當前頁面的大致內(nèi)容，左側(cè)呢，會放一個返回按鈕，右側(cè)會放置一個操作按鈕。

 

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

 

 

 

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

 

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

 

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

 

 

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

 

 

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

 

 

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

 

 

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

 

 

 

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

 

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

 

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

 

 

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