一.安卓和iOS的設(shè)計(jì)規(guī)范

首先菩咨，我們先看看iOS端

頂部導(dǎo)航和底部的tab是完全不一樣的，如下圖

在iOS端陡厘，頁(yè)眉和頁(yè)腳都做出了相應(yīng)的規(guī)定抽米，頁(yè)眉我們稱(chēng)之為導(dǎo)航欄，主要是實(shí)現(xiàn)了頁(yè)面的跳轉(zhuǎn)和當(dāng)前頁(yè)面的操作糙置，底部的頁(yè)腳通常會(huì)設(shè)計(jì)成工具欄和標(biāo)簽欄云茸，工具欄主要是放置一些我們對(duì)于當(dāng)前頁(yè)面的傳統(tǒng)操作，如轉(zhuǎn)發(fā)谤饭、刪除标捺、收藏胖笛。其次還能做成標(biāo)簽欄，標(biāo)簽欄主要是實(shí)現(xiàn)幾個(gè)主要頁(yè)面或主要任務(wù)流程之間的快速切換宜岛。在iOS端的大量APP都是按照這樣的規(guī)范去設(shè)計(jì)的长踊。

我們來(lái)看一下iOS對(duì)頁(yè)眉的規(guī)定有哪些，頁(yè)眉我們通常叫做導(dǎo)航欄萍倡，主要是用來(lái)實(shí)現(xiàn)在不同信息層級(jí)之間的導(dǎo)航身弊，有時(shí)候也可用于管理當(dāng)前的內(nèi)容，如圖：

那頁(yè)腳呢列敲，我們通常叫做工具欄阱佛，主要用于放置操作當(dāng)前屏幕中各對(duì)象的控件，工具欄即可以放置icon戴而，也可以放置文字凑术，文字會(huì)更加的直接一些，相對(duì)于icon也會(huì)更加占用空間所意，但是呢淮逊，文字比icon可能會(huì)更加的通俗易懂，所以扶踊，在做工具欄設(shè)計(jì)時(shí)泄鹏，如果想讓我們的工具欄上可以放置更加功能入口的話(huà)，建議用icon秧耗，如果工具欄上的功能入品不多备籽，可以用文字。

同時(shí)呢分井，頁(yè)腳還可以做成標(biāo)簽欄车猬，標(biāo)簽欄讓用戶(hù)在不同的任務(wù)、界面和模式中進(jìn)行切換尺锚，但是底部的標(biāo)簽也不能放置過(guò)多珠闰，最多可承載5個(gè)標(biāo)簽，隨著手機(jī)屏幕的不斷擴(kuò)大缩麸，底部放置的標(biāo)簽也會(huì)增多苍日。

然后缚够，我們來(lái)看一下安卓端

我們先來(lái)看一下安卓的發(fā)展史肋演，在2009年的時(shí)候域醇，安卓第一次推出了1.5的系統(tǒng)，但真正能夠上線(xiàn)為大眾所接受的是2010年12月份推出的2.3系統(tǒng)弧械，那個(gè)時(shí)候還是挺亂的八酒，沒(méi)有規(guī)范可言的。到2011年2月份刃唐，安卓又推出了3.0羞迷，3.0第一次為平板而設(shè)計(jì)的一個(gè)安卓系統(tǒng)界轩，也是第一次在平板上出現(xiàn)了虛擬的按鈕，從4.0開(kāi)始衔瓮，統(tǒng)一了手機(jī)和平板的規(guī)范浊猾，在3.0的基礎(chǔ)上延續(xù)了虛擬導(dǎo)航的存在。

2014年10月又推出了5.0热鞍，5.0出了一份比4.0介紹更加詳細(xì)的平臺(tái)規(guī)范葫慎，這個(gè)平臺(tái)規(guī)范后來(lái)影響了每一代安卓版本的開(kāi)發(fā)。

從2009年推出的安卓1.5的版本開(kāi)始薇宠，它叫紙杯蛋糕偷办，后面也延續(xù)了這種以食物命名的方式，比如甜甜圈澄港、閃電泡鞭椒涯、優(yōu)格冰激凌等等。

安卓從4.0開(kāi)始沒(méi)有配備硬件按鈕回梧，把虛擬按鈕作為4.0的標(biāo)配废岂，與iOS把導(dǎo)航欄放在底部標(biāo)簽欄上不同，安卓把一些重要的操作放在了底部的頁(yè)眉部分漂辐，這是因?yàn)榘沧恳呀?jīng)有了底部的虛擬按鈕了泪喊。頁(yè)眉在安卓系統(tǒng)叫操作欄，主要用于實(shí)現(xiàn)APP內(nèi)視圖的切換和層級(jí)間的導(dǎo)航髓涯，還會(huì)放置一些重要控件。在4.0的操作規(guī)范里有大量的元素哈扮，像返回按鈕纬纪、下拉菜單、操作按鈕滑肉，但是這種下拉菜單有個(gè)不好的地方是：比較重包各，一個(gè)小的地方放置了很多操作元素。所以在規(guī)范里也是推薦了下圖2所示的這種標(biāo)簽式導(dǎo)航靶庙，來(lái)實(shí)現(xiàn)對(duì)不同頁(yè)面之間的切換跳轉(zhuǎn)问畅。

除了把下拉菜單進(jìn)行拆分之外，右上角還有很多大量的操作按鈕在六荒，當(dāng)你的頁(yè)面有很多操作按鈕需要去放置护姆，就會(huì)顯得很擁擠，這個(gè)時(shí)候掏击，我們可以嘗試把右上角的操作按鈕放到底部卵皂，雖然我們把大量的操作按鈕放到底部會(huì)增加一引起誤操作的風(fēng)險(xiǎn)，但是會(huì)讓頁(yè)面變得更加的簡(jiǎn)潔砚亭。

2013年蘋(píng)果公司推出iOS7灯变，iOS7拋棄了擬物化的設(shè)計(jì)殴玛，采用了扁平化的設(shè)計(jì)，2017年安卓推出了5.0添祸，那個(gè)時(shí)候已經(jīng)是扁平化盛行的時(shí)代滚粟，安卓在5.0之后會(huì)了讓界面變得更加有質(zhì)感，在界面上加了Z軸刃泌，安卓推出的頁(yè)面布局是在Z軸的空間上有更多的空間變化坦刀，讓界面更加的有質(zhì)感和觸感，在Z軸上不同層次的變化蔬咬，使得頁(yè)面呈現(xiàn)出更多的層次感 鲤遥。安卓5.0是安卓系統(tǒng)很重要的一個(gè)里程碑，整個(gè)安卓系統(tǒng)變得趨于穩(wěn)定林艘，在后面的幾代迭代中基本上沒(méi)有太大的變化盖奈，更多是基于性能上的優(yōu)化。

安卓在5.0的時(shí)候大力推崇抽屜式導(dǎo)航的使用樣式狐援，和4.0相比钢坦，在5.0里面安卓也是把主要的導(dǎo)航和操作元素放在頁(yè)面的上方，叫作應(yīng)用欄啥酱，應(yīng)用欄是以前安卓系統(tǒng)中的操作欄爹凹，是用來(lái)顯示應(yīng)用的標(biāo)識(shí)，應(yīng)用導(dǎo)航镶殷，內(nèi)容搜索以及其他操作禾酱。

在4.0的時(shí)候，安卓的操作欄上放有下拉菜單绘趋，頁(yè)面可以進(jìn)行切換颤陶，在5.0的時(shí)候，這些頁(yè)面放在左側(cè)的抽屜里面陷遮，這樣顯得頁(yè)面比較干凈滓走。

如果你的產(chǎn)品在一級(jí)導(dǎo)航下還有二級(jí)導(dǎo)航，這個(gè)時(shí)候我們可以把二級(jí)導(dǎo)航放到頁(yè)面中帽馋，實(shí)現(xiàn)在某一個(gè)主導(dǎo)航下面進(jìn)行子導(dǎo)航的切換搅方。

1.2.平臺(tái)常用控件

控件全稱(chēng)叫控制元件，它是用戶(hù)通過(guò)控件來(lái)操作界面狀態(tài)或設(shè)定狀態(tài)绽族。

兩個(gè)平臺(tái)都有控件庫(kù)姨涡，當(dāng)你想要設(shè)計(jì)某個(gè)功能的時(shí)候，你可以到控件庫(kù)里看看项秉，如果有我們需要的绣溜，可以直接使用，

時(shí)間選擇器

比如我們要設(shè)計(jì)一個(gè)鬧鐘娄蔼，我們可以看到在iOS端和安卓端都有自己的時(shí)間選擇器的控件怖喻，那么我們?cè)趇OS端選擇上下滑動(dòng)的時(shí)間選擇器底哗，在安卓端運(yùn)用可視化的時(shí)間選擇器即可。這樣我們不用去設(shè)計(jì)锚沸，開(kāi)發(fā)人員也不用去寫(xiě)代碼了跋选。

還有一些控件，像表示進(jìn)度讀取的樣式哗蜈，有無(wú)限循環(huán)指示器前标，還有進(jìn)度條指示器，那如果選擇叫呢距潘？

進(jìn)度條相對(duì)于無(wú)限循環(huán)指示器的最大優(yōu)勢(shì)是：它可以明確告訴用戶(hù)炼列，整個(gè)任務(wù)需要多少時(shí)間以及當(dāng)前所處在什么狀態(tài)下。一般無(wú)限循環(huán)指示器用于比較短的等待音比，進(jìn)度條適用于等待時(shí)間比較長(zhǎng)的時(shí)候俭尖。

1.3.平臺(tái)常用手勢(shì)

手勢(shì)應(yīng)用在移動(dòng)端有兩個(gè)好處，一個(gè)是比較直覺(jué)化洞翩，一個(gè)是比較高效稽犁，隨著未來(lái)手機(jī)屏幕直越來(lái)越大，我們可以點(diǎn)擊的范圍會(huì)越來(lái)越小骚亿，這時(shí)候手勢(shì)就能解決這些問(wèn)題已亥。這里列舉了八個(gè)常用手勢(shì)。

這些操作是源于我們生活中去操作物體時(shí)候的一些手勢(shì)来屠，我們將它們移到了移動(dòng)端虑椎，減少我們使用移動(dòng)平臺(tái)的操作成本。

在iOS和安卓端基本手勢(shì)的操作都是一樣的的妖，唯一不同的是iOS是輕掃滑動(dòng)刪除绣檬，安卓是長(zhǎng)按刪除。所以我們?cè)谠O(shè)置手勢(shì)時(shí)也要遵循平臺(tái)規(guī)范嫂粟，如果用錯(cuò)了往往會(huì)給用戶(hù)帶來(lái)很大的麻煩。

二墨缘，移動(dòng)端導(dǎo)航樣式?

導(dǎo)航在產(chǎn)品設(shè)計(jì)中是非常重要的星虹，如果導(dǎo)航設(shè)計(jì)的不好，用戶(hù)很容易迷路镊讼。

導(dǎo)航有一級(jí)導(dǎo)航和二級(jí)導(dǎo)航宽涌，并且一個(gè)APP里往往會(huì)有多種的導(dǎo)航形式，導(dǎo)航形式也并不是隨意用的蝶棋，需要考慮場(chǎng)景選擇最適合的一個(gè)導(dǎo)航模式卸亮。

那接下來(lái)我們來(lái)了解一下在移動(dòng)端有哪些導(dǎo)航模式及它們分別適用的場(chǎng)景。

標(biāo)簽式導(dǎo)航

如果你的產(chǎn)品里有多個(gè)主要任務(wù)玩裙，而且你覺(jué)得他們都很重要兼贸，并且它們之間的相互切換比較頻繁段直，這時(shí)就比較適用標(biāo)簽式導(dǎo)航。如微信：

標(biāo)簽式導(dǎo)航的特點(diǎn)是入品扁平化溶诞，導(dǎo)航控件占據(jù)面積大鸯檬，能夠輕松進(jìn)行點(diǎn)擊操作，進(jìn)行功能間的快速切換螺垢。這咱頁(yè)面底部的標(biāo)簽式導(dǎo)航在iOS端是最為常見(jiàn)的喧务，也是iOS設(shè)計(jì)中最為推薦的一種導(dǎo)航模式。

標(biāo)簽式導(dǎo)航除了放在底部枉圃，也可以放在頂端功茴，頂端的標(biāo)簽式導(dǎo)航被大量應(yīng)用在安卓設(shè)計(jì)里。它可以避免導(dǎo)航與底部虛擬按鈕之間發(fā)生沖突孽亲，引發(fā)誤操作坎穿。

不管是布局在頂部還是底部的標(biāo)簽式導(dǎo)航，要把標(biāo)簽數(shù)量控制在5個(gè)以?xún)?nèi)墨林，如果標(biāo)簽超過(guò)5個(gè)以?xún)?nèi)建議使用滾動(dòng)式標(biāo)簽導(dǎo)航赁酝，需要注意的是流動(dòng)式標(biāo)簽導(dǎo)航需要給用戶(hù)一點(diǎn)提示，如下圖顯示的效果：

分段式導(dǎo)航

標(biāo)簽式導(dǎo)航雖然直觀易操作旭等，但是它在頁(yè)面中占用了很大面積酌呆，特別是當(dāng)我們?cè)谝粋€(gè)頁(yè)面中使用兩個(gè)標(biāo)簽的時(shí)候，面積會(huì)大大的被占用搔耕。

怎么辦呢隙袁？分段式導(dǎo)航就能很好的解決這個(gè)問(wèn)題，分段式導(dǎo)航尺寸較小弃榨，能輕松地融入界面菩收，不占用空間。只要有一點(diǎn)空間它就能插進(jìn)去鲸睛，當(dāng)然它一般只是分成兩段或者三段娜饵，不會(huì)像標(biāo)簽式導(dǎo)航那樣有四段或五段的標(biāo)簽。

分段式控件是iOS的標(biāo)準(zhǔn)控件官辈，它也不適合作為一級(jí)導(dǎo)航箱舞，往往作為二級(jí)導(dǎo)航與標(biāo)簽導(dǎo)航嵌套使用。

舵式導(dǎo)航

上面我們講了標(biāo)簽式導(dǎo)航適用于幾個(gè)功能非常重要拳亿，并且它們之間的相互切換比較頻繁晴股，但是，其中有一個(gè)功能最為重要肺魁，是APP的核心功能或操作电湘，這個(gè)時(shí)候我們可以使用舵式導(dǎo)航，它是標(biāo)簽式導(dǎo)航的一種變體，它在標(biāo)簽式導(dǎo)航的基礎(chǔ)上寂呛，突出強(qiáng)調(diào)了一個(gè)標(biāo)簽放在中間位置怎诫，看起來(lái)就像船的一個(gè)舵，所以取名：舵式導(dǎo)航昧谊。

抽屜式導(dǎo)航

如果我們的APP中一個(gè)功能特別重要刽虹，其他的功能都不特別重要，這時(shí)設(shè)計(jì)思路就是：既然不重要呢诬，又不可能刪除掉涌哲，那只有“藏”起來(lái)。這里就用到了抽屜式導(dǎo)航尚镰。抽屜式導(dǎo)航不僅能突出核心功能還減少了主界面中的導(dǎo)航控件數(shù)量阀圾，讓主界面干凈利落。

但是狗唉，使用抽屜式導(dǎo)航意味著同級(jí)上的導(dǎo)航比標(biāo)簽式導(dǎo)航有更多次的點(diǎn)擊初烘，國(guó)外的研究也顯示，藏在抽屜式里的其他功能的使用頻率會(huì)遠(yuǎn)遠(yuǎn)低于標(biāo)簽式的導(dǎo)航分俯。

所以肾筐，我們可以發(fā)現(xiàn)，現(xiàn)在抽屜式導(dǎo)航已經(jīng)不像幾年前那么火了缸剪，這個(gè)與它的缺點(diǎn)是息息相關(guān)的吗铐， 隨著手機(jī)屏幕越來(lái)越大，抽屜式導(dǎo)航的按鈕也很能按到杏节，雖然抽屜式導(dǎo)航走下了神壇唬渗，但它也并不是一無(wú)是處的，還有很多APP在使用抽屜式導(dǎo)航奋渔，如打車(chē)類(lèi)產(chǎn)品镊逝，對(duì)于打車(chē)產(chǎn)品來(lái)說(shuō)，最核心的功能就是打車(chē)嫉鲸，其他功能對(duì)于它來(lái)說(shuō)不是那么重要撑蒜，所以抽屜式導(dǎo)航對(duì)于打車(chē)產(chǎn)品來(lái)說(shuō)是再適合不過(guò)了。

下拉菜單式導(dǎo)航

上面我們提到過(guò)下拉菜單玄渗，它的特點(diǎn)時(shí)减江，收起時(shí)體積小巧，節(jié)省空間捻爷，展開(kāi)時(shí)，能顯示豐富的導(dǎo)航條目份企，但缺點(diǎn)是沒(méi)有關(guān)閉按鈕也榄，因?yàn)椴僮鞅容^復(fù)雜，所以這種導(dǎo)航模式已經(jīng)很少見(jiàn)了，但是甜紫，它可以和滾動(dòng)式的標(biāo)簽進(jìn)行結(jié)合降宅，滾動(dòng)標(biāo)簽導(dǎo)航的特點(diǎn)是顯示數(shù)目有限，但是能夠?qū)崿F(xiàn)快速切換囚霸，下拉導(dǎo)航菜單的特點(diǎn)是能夠顯示足夠多的條目腰根，但是切換起來(lái)比較麻煩，兩者結(jié)合正好可以進(jìn)行優(yōu)勢(shì)互補(bǔ)拓型。

宮格導(dǎo)航

宮格導(dǎo)航比較扁平额嘿，它的優(yōu)點(diǎn)是能充分的運(yùn)用頁(yè)面，宮格導(dǎo)航大多用于二級(jí)導(dǎo)航劣挫，在界面上平鋪顯示使用頻率相近但是又相互獨(dú)立的功能册养，像支付寶

三.移動(dòng)端設(shè)計(jì)模式-列表

垂直列表

首先我們來(lái)看垂直列表形式，它是最基本的列表形式压固，無(wú)論是網(wǎng)頁(yè)端和手機(jī)端都會(huì)使用到這種布局方式球拦，對(duì)于垂直列表用戶(hù)的閱讀習(xí)慣是從左往右，從上到下的帐我，所以一定要把最重要的功能放在屏幕的最上方坎炼，而且垂直列表都是左對(duì)齊的。再說(shuō)呢拦键，我們要做好條目的詳細(xì)程度以及條目數(shù)量之間的平衡谣光，這個(gè)需要從具體的需求出發(fā)。舉個(gè)栗子：地于外賣(mài)訂單來(lái)說(shuō)矿咕，用戶(hù)往往只需要關(guān)注自己剛剛點(diǎn)的那份外賣(mài)的訂單抢肛，所以，這個(gè)訂單的內(nèi)容如果足夠詳細(xì)那么用戶(hù)就沒(méi)必要點(diǎn)擊進(jìn)去查看具體的詳情了碳柱。這樣就會(huì)比較便捷捡絮，讓用戶(hù)少操作。

這是垂直列表幾種常見(jiàn)的模式莲镣，我們可以根據(jù)具體需求來(lái)選擇合適的方案福稳。

垂直導(dǎo)航可以用來(lái)作一級(jí)導(dǎo)航嗎？答案是肯定的瑞侮，但是只適合功能層級(jí)比較淺的圆，且功能間切換不頻繁的APP，像郵箱類(lèi)的半火。

輪播面板和網(wǎng)格列表

除了垂直列表還有橫向維度的輪播面板越妈，輪播面板能隱藏大量的內(nèi)容，能充分的利用空間钮糖。還有兩種方式相結(jié)果的網(wǎng)格列表梅掠，像垂直列表展示文字顯示的比較干凈酌住，網(wǎng)格列表更加富有情感化，善于使用網(wǎng)格列表會(huì)讓界面變得更加富有感染力阎抒。還有一種是網(wǎng)格列表的變種酪我，我們叫它瀑布流，瀑布流的圖片排列方式 顯得非常隨意且叁。

列表模式還有兩種形式都哭，分別是時(shí)間軸和對(duì)話(huà)框的形式，兩者的應(yīng)用場(chǎng)景都是和時(shí)間順序有關(guān)的逞带，

三.web端設(shè)計(jì)規(guī)范與設(shè)計(jì)模式

3.1.網(wǎng)頁(yè)布局

搜索類(lèi)網(wǎng)站

web的網(wǎng)頁(yè)布局大概有六種欺矫，第一種是搜索類(lèi)的，做的最好的是谷歌掰担，它的大體布局是右上角顯示網(wǎng)頁(yè)內(nèi)容和登錄汇陆，中間模塊顯示LOGO以及最主要的功能搜索欄，在底部放置一些網(wǎng)站和其他的信息带饱。

博客類(lèi)網(wǎng)站

博客類(lèi)網(wǎng)站在國(guó)內(nèi)最典型的就是微博毡代，它的頂部放置網(wǎng)頁(yè)一級(jí)導(dǎo)航和登錄，因?yàn)椴┛皖?lèi)的網(wǎng)站會(huì)有大量的其他模塊勺疼，所在它在左邊有一個(gè)樹(shù)狀的二級(jí)導(dǎo)航教寂。中間模塊是博客的核心，它有最主要的發(fā)文功能执庐，下面是個(gè)三級(jí)導(dǎo)航酪耕，是其他人發(fā)送的一些博客的內(nèi)容，下面顯示具體詳細(xì)的信息轨淌，網(wǎng)站的最右邊則會(huì)顯示一些不是特別重要的信息迂烁，比主博主信息和推薦的廣告位及其他的一些信息。

商城類(lèi)網(wǎng)站

商城類(lèi)網(wǎng)站我們最常見(jiàn)的有淘寶递鹉、天貓盟步、京東等，像淘寶：頂部顯示了用戶(hù)的信息及網(wǎng)站大導(dǎo)航躏结，然后下面顯示它的LOGO和主要的搜索功能却盘，在淘寶這種品類(lèi)繁雜的網(wǎng)站，搜索功能是非常有必要的媳拴，再下來(lái)是淘寶的一些子品牌黄橘，像天貓、聚劃算等屈溉。因?yàn)樘詫毜钠放品倍嗳兀裕鼈冏隽艘粋€(gè)二級(jí)欄目子巾，供用戶(hù)快速篩選描孟，然后中間是整個(gè)網(wǎng)站的首推位置驶睦，首推位置主要推薦一些熱賣(mài)商品和活動(dòng)。在網(wǎng)站的右側(cè)放置了一些不是很重要的信息匿醒，像個(gè)人信息和一些公告、論壇等缠导。

圖片類(lèi)廉羔、新聞?lì)悺a(chǎn)品網(wǎng)站

圖片類(lèi)網(wǎng)站主要是用戶(hù)在上面快速瀏覽圖片信息僻造，所以圖片的布局占了很大的篇幅憋他。

除了介紹過(guò)的四種還有新聞?lì)惖暮彤a(chǎn)品類(lèi)的網(wǎng)站，每種網(wǎng)站因?yàn)橐休d的信息不同髓削，布局也會(huì)不同竹挡，新聞?lì)惖娜缃袢疹^條。產(chǎn)品類(lèi)網(wǎng)站如蘋(píng)果官方立膛。

現(xiàn)在還有一種比較新穎的揪罕，卡片式布局，以前多半是用于后臺(tái)管理中宝泵，現(xiàn)在也被用于大量飾品類(lèi)的網(wǎng)站或者圖片類(lèi)的網(wǎng)站中好啰。

3.2自適應(yīng)設(shè)計(jì)

自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)是可以自動(dòng)識(shí)別屏幕寬度，并根據(jù)屏幕的寬度做出相應(yīng)調(diào)整的網(wǎng)頁(yè)設(shè)計(jì)儿奶。

自適應(yīng)網(wǎng)站支持通過(guò)多種瀏覽器和設(shè)備訪(fǎng)問(wèn)框往，在pc的web上是一種效果，適用其他的屏幕時(shí)會(huì)做一些調(diào)整闯捎，比如在一些分辨率比較小的網(wǎng)頁(yè)椰弊，我們會(huì)做相應(yīng)的調(diào)整，如果在pad端呢瓤鼻，我們要根據(jù)pad的瀏覽習(xí)慣進(jìn)行調(diào)整秉版，那么在手機(jī)端也是如此。