2024-6-27 資深UI設計者
規范只是幫助我們設計師去簡單高效的設計頁面，但是沒有必要去循規蹈矩。
中國有句古話：溫故而知新。在這段做原型的時間中，我翻看了很多以前的交互設計，以求有所感悟，可以做出讓自己滿意的東西。我想嘗試著將一些“舊的”交互方式添加到改版中的某些地方，因為我堅信所有的東西都是有利有弊的，被淘汰的不一定絕對是不好的。
IOS和Android兩大平臺，他們各自擁有自己的一些設計規范。所謂的設計規范，不外乎就是各個平臺對于設計風格、設計方案以及交互方式的一些約定俗成。按照這些約定，既可以保證快速的實現產品設計，又可以滿足本平臺用戶的使用習慣。
為什么需要這些規范？
我們都知道，交通規則是隨著現代交通發展而出現的一個衍生品；“紅燈停，路燈行”“走在路上靠右行”這些事情從小就被父母掛在耳邊天天念叨。特別是在自己可以獨立去上學的時候，每次出門都會有一聲“路上注意安全”在耳邊響起。這些都是再教育我們要遵守交通規則。現在的都市車水馬龍，正式因為有了交通規則的存在，才讓我們的出行更加有了保障。特別是國內的交通，如果沒有交通規則的存在，像北上廣深這些城市，極有可能從早上上班一直堵車堵到晚上下班。
交通規則本身就是一個規范，正是有了這一規范才使得一切井然有序。在交通上如此，在設計領域也是如此了。如果所有人都是按照自己的意愿去做設計而沒有一個統一的規范，那軟件界面和交互就是五花八門的，用戶體驗更是無從談起。
IOS和Android目前是移動端最大的兩個操作平臺，他們之間有共同的地方，也存在著一些差異，接下來我們一起看看，兩個平臺上具體的頁面布局規范是怎樣的。
IOS端的頁面布局，大牛們稱之為“經典的延續”。
為什么這樣說呢？ios是iPhone所使用的操作平臺，iPhone的產品經過了這么多年的迭代，除了屏幕大小有所改變之外，其產品的基本造型大致上都是很一致的。同樣在其操作平臺上也是大體相同的。在IOS的平臺規范里面，它的界面上頁眉和頁腳都做出了相應的規定。頁眉我們稱為導航欄，主要是實現了頁面的一些跳轉以及當前頁面的一些操作。底部的頁腳通常會設計成工具欄或者標簽欄。工具欄主要是放置一些我們對于當前頁面的傳統操作；標簽欄主要是實現幾個主要頁面或者主要任務流程之間的快速切換。
在IOS端的app大多都是按照這樣的規范去設計的，先簡單的說一下，IOS對頁眉、頁腳的規定有哪些（后續我會特地寫篇關于導航和列表交互操作的文章）。
頁眉的導航欄主要是用來實現不同信息層級之間的交流，有時候也會用于管理當前屏幕的內容。例如通常我們在頂部會放置一個標題來表示當前頁面的大致內容，左側呢，會放一個返回按鈕，右側會放置一個操作按鈕。
頁腳大多會做成兩種情況。其一是做成工具欄。工具欄是用于放置操作當前屏幕中各個對象的控件，例如網易郵箱底部就放置了回復、轉發等控件。其二是做成標簽欄，標簽欄是讓用戶在不同的任務界面和模式之間進行切換，例如京東app的工具欄就放置了首頁、分類以及發現、購物車和個人中心五個Tab，用來不同界面之間的快速切換。IOS端的布局規范大概就是以上內容了，接下來我們看一下Android端。
Android端的頁面布局，大牛們總結為“變化與統一”。
為什么會有這樣的一個總結，這就必須得說一下Android操作平臺的發展歷史了。
在2010年12月份，Android第一次推出了它的2.3系統，那時Android的整個硬件布局都是混亂的，所以平臺規范更是無從談起了。一直到了2011年2月份，Android推出了3.0系統，這是Android第一次為平板而設計的一個Android系統，在平板上第一次出現了一個虛擬按鈕。緊接著，2011年10月份發布了4.0系統，4.0才是一個Android真正意義上可以拿的出手的操作平臺，因為4.0整合了平板和手機規范，在3.0的基礎上，4.0繼續延續了虛擬按鈕和虛擬導航的樣式。時間終于來到了2014年10月份，Android推出了叫做Meterial Design 的5.0系統，這才是Android真正最為詳細的平臺規范。再后來從2015年9月的Android 6.0一直到2018年5月份的Android 9.0，再到如今傳說中的Android Q ，Android平臺的操作規范一直在一步步完善。
回顧一下，4.0是Android系統一個標志性的時刻，谷歌在Android系統上實現了平板和手機的統一，于是將虛擬按鈕作為Android系統的標配，從4.0開始沒有配備硬件按鈕設備將顯示導航欄這一虛擬的系統欄。與IOS頁面的主要導航放在底部的標簽欄上不同，由于它已經在底部有一個虛擬的導航欄了，所以Android 4.0把重要的系統操作放在了頁眉，稱之為操作欄，也叫action bar。它主要用于實現app內視圖的切換和層級間的導航。
在Android 4.0中，因為它底部有虛擬導航欄，導致它的操作欄只能放在頂部。這就促使它的頁面布局肯定與IOS是不一樣的，這里我將其總結為Android 4.0的四種頁面布局：第一種是一個大而全的頂部主操作欄，配合下拉菜單進行頁面間的切換；第二種是主操作欄加次級操作欄，將下拉菜單中的頁面平鋪到頁面中；第三種是主操作欄加底部工具欄，這樣雖然會增加誤操作的風險，但是會使頁面干凈簡潔很多；第四種則是主操作欄加次級操作欄再加底部工具欄，這是用于你的產品有很多的功能點。
到了Android 5.0 ，出現了一個曾經紅極一時的交互設計，抽屜式導航。Android 5.0出現的時候，IOS 7所引領的圖標扁平化已經盛行，扁平化就是只有X軸和Y軸，Android 5.0 為了讓頁面更加有質感，它在頁面上添加了Z軸，Z軸所帶來的的空間變化，會讓頁面更加有層次感和質感。同時，在頂部主操作欄的左邊，添加了一個抽屜按鈕，點擊后會有一個抽屜式的展開。Android 5.0的操作規范說明中，大篇幅的介紹了這種抽屜式導航，Android對此非常的推崇。到了5.0，頂部的主操作欄稱之為應用欄（APP Bar），用來顯示應用的表示、應用導航、內容搜索以及其他操作。
發展至今，就用戶而言，已經是很難看到IOS和Android在app的交互操作上有很大的不同了。所以在沒有嚴格規定的情況下，對于交互設計師而言，一套設計稿就可以完成工作，而一些不同的交互動作和交互流程，標注即可。
最后總結一下兩個平臺常用的操作手勢，其實在移動端的手勢操作大多數是來源于我們的生活，例如在使用讀書app的時候，它的翻頁效果就是從我們生活中翻開圖書這種手勢提取來的，好的手勢肯定是來源于生活而高于生活的。
在移動端采用手勢操作有兩個大的好處：一呢是比較直觀化，不管是那個年齡段的使用人群，都可以憑借著直接去進行操作；第二呢，則是非常的高效，手勢操作可以大大的降低用戶去頁面的一些操作成本。
在IOS和Android兩個平臺上，大部分操作手勢都是相同的，但也會有一些不同，最直接的體現就是“刪除”功能，IOS是向左側滑動刪除，Android是長按點擊刪除。在這種手勢操作規范的“硬核”區，還是要按照其平臺規范設計。而在一些“模糊”的區域，當然是本著方便用戶操作的思想去設計。
在文章的最后，我想說規范只是幫助我們設計師去簡單高效的設計頁面，但是沒有必要去循規蹈矩。更何況移動端發展到今天，就我個人而言，僅說在APP的交互操作上，兩大平臺之間的操作區別已經越來越不明顯了，有點求同存異的感覺。而造成這一現象最直觀的原因，當然是所有設計者都明白的一個道理：一切設計的目的，都是以用戶的使用場景為中心的！
藍藍設計(www.gyxygd.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan。
關鍵詞：UI咨詢、UI設計服務公司、軟件界面設計公司、界面設計公司、UI設計公司、UI交互設計公司、數據可視化設計公司、用戶體驗公司、高端網站設計公司、銀行金融軟件UI界面設計、能源及監控軟件UI界面設計、氣象行業UI界面設計、軌道交通界面設計、地理信息系統GIS UI界面設計、航天軍工軟件UI界面設計、醫療行業軟件UI界面設計、教育行業軟件UI界面設計、企業信息化UI界面設計、軟件qt開發、軟件wpf開發、軟件vue開發