一、封閉與開放

1.兩個系統(tǒng)對屏幕反應(yīng)的優(yōu)先級不同

iOS對屏幕反應(yīng)的優(yōu)先級是最高的，它的響應(yīng)順序依次為Touch--Media--Service--Core架構(gòu)，換句話說當(dāng)用戶只要觸摸接觸了屏幕之后，系統(tǒng)就會最優(yōu)先去處理屏幕顯示也就是Touch這個層級症歇，然后才是媒體（Media），服務(wù)（Service）以及Core架構(gòu)谭梗。

而Android系統(tǒng)的優(yōu)先級響應(yīng)層級則是Application--Framework--Library--Kernal架構(gòu)忘晤，和顯示相關(guān)的圖形圖像處理這一部分屬于Library，你可以看到到第三位才是它激捏，當(dāng)你觸摸屏幕之后Android系統(tǒng)首先會激活應(yīng)用设塔，框架然后才是屏幕最后是核心架構(gòu)。

2.硬件工作配置不同

iOS基于GPU加速Android系統(tǒng)產(chǎn)品則并非如此远舅，因為Android需要適應(yīng)不同的手機硬件闰蛔，需要滿足各種差異配置，所以很多圖形特效大多都要靠程序本身進行加速和渲染图柏，并嚴(yán)重依賴CPU運算的操作自然會加大處理器的負(fù)荷序六，從而出現(xiàn)卡頓的問題

3.開發(fā)機制不同：

安卓機制效率低，Android的編程語言是JAVA蚤吹，而iOS的則為Objective-C例诀。Objective-C的優(yōu)勢是效率高但比較“唯一”，而JAVA的優(yōu)勢則是跨平臺不過運行效率相對偏低裁着，其實這兩個編程語言所帶來的機制不同繁涂，就已經(jīng)造成了各自系統(tǒng)之間的流暢性差異化。

我們可以用一個簡單易懂的案例來解釋封閉與開放二驰。例如消息提醒機制的差異扔罪。

iOS系統(tǒng)對權(quán)限控制比較嚴(yán)，每當(dāng)我們下載一個新的app桶雀，當(dāng)要調(diào)用相冊權(quán)限矿酵、相機、麥克風(fēng)背犯、位置等都需要用戶選擇確定坏瘩，如果用戶點擊不允許盅抚，就沒法調(diào)取漠魏。想要再次允許的時候操作也比較麻煩，需要到系統(tǒng)設(shè)置里面去打開權(quán)限妄均。這也就是為什么iOS消息設(shè)置相對來說復(fù)雜一點柱锹，根本原因是iOS系統(tǒng)哪自。

由于Android開源，Android開發(fā)在用戶安裝app就獲取了很多權(quán)限禁熏，比如用戶安裝app后壤巷，對于消息提醒的設(shè)置只需要在app設(shè)置界面設(shè)置就可以了。

二瞧毙、物理交互區(qū)別

Android和iOS除了封閉和開放的差別外胧华，還有物理控制、交互的差別宙彪。iOS全是由蘋果公司統(tǒng)一出品矩动，而安卓則不同。在國內(nèi)释漆，經(jīng)濟快速發(fā)展悲没，安卓手機廠商如雨后春筍拔地而起，很多從原來的山寨機一步步打造自己的品牌男图，逐漸得到用戶的認(rèn)可示姿。我們常見的Android手機有三星、谷歌逊笆、小米栈戳、華為、中興难裆、魅族荧琼、oppo、美圖手機差牛、錘子手機命锄、努比亞......面對著這么多手機廠商，每個廠商有著自己獨特的功能和交互方式偏化，甚至有的物理鍵都不相同脐恩。

截屏

就拿一個很常見的截屏功能來說，iOS是電源開關(guān)鍵和home鍵同時按侦讨，而小米手機截屏則是按住音量鍵和最左邊的功能鍵截屏（其實小米有五種截屏方法驶冒，如下圖），谷歌手機又不同了韵卤，華為也不一樣了骗污。

解鎖

比如說一個常見的功能，指紋解鎖沈条，蘋果5需忿、6、7的指紋解鎖就是在home鍵上，而iPhone x則采用面部識別解鎖屋厘。從用戶的操作習(xí)慣來說涕烧，會用大拇指來解鎖，不管左手還是右手汗洒。而華為手機的指紋解鎖放在手機的背面议纯，用戶大多數(shù)則會選擇食指來解鎖。再舉一個栗子溢谤，密碼解鎖除了指紋外瞻凤，還有輸入密碼解鎖，iOS從原來的四位到現(xiàn)在的6位世杀，都是采用鍵盤輸入密碼的方式進行解鎖鲫构；而安卓手機解鎖大部分是采用的手勢密碼的方式進行解鎖。

拍照

再比如美圖手機玫坛、oppo r11這些手機都是主打拍照功能结笨，拍照很牛逼，吸引著用戶湿镀，當(dāng)然炕吸，拍照是現(xiàn)在很多手機主推功能，包括蘋果手機也一直在拍照功能上改進勉痴。

三赫模、設(shè)計的差異

1.設(shè)計輸入與輸出

a.尺寸大小

如果每種手機尺寸都去做設(shè)計，一個設(shè)計師你會做死蒸矛，設(shè)計師多了公司又請不起瀑罗。

通常設(shè)計師們是這樣做的：Android就以720px＊1280px 或者1080px＊1920px（根據(jù)具體情況定，但大部分是以720px＊1280px做的）雏掠，iOS則以750px＊1334px斩祭。

我們看公司業(yè)務(wù)情況，重Android還是重iOS乡话，重誰就以誰為基礎(chǔ)做設(shè)計摧玫，只做一套，讓開發(fā)適配绑青，具體控件調(diào)用相應(yīng)平臺原生控件诬像。如果兩種都重視，那我們就以iOS的750px＊1334px作為設(shè)計基礎(chǔ)闸婴。

Android的安全點擊范圍為48dp坏挠，iOS的則為44pt。Android的狀態(tài)欄為24dp邪乍，iOS的為20pt降狠。安卓的頂部導(dǎo)航欄為56dp对竣，iOS的為44pt。

b.單位

• px是我們常用的像素單位喊熟。比如我們常說的蘋果6的設(shè)計尺寸為750px＊1334px柏肪。
• pt是在iOS中表示長度單位和字體單位姐刁。對于iOS開發(fā)來說芥牌，我們應(yīng)該給他們pt的單位，我們現(xiàn)在設(shè)計的尺寸基本是以蘋果6的尺寸設(shè)計的（用pt單位表示就是375pt＊667pt聂使，用像素單位表示就是750px＊1334px壁拉，在2倍圖中1pt＝2px）。
• dp是安卓開發(fā)中使用的設(shè)計單位柏靶，就拿我們常用的720px＊1280px來說弃理，與之對應(yīng)的安卓單位表示為360dp＊640dp，它們也是2倍的關(guān)系屎蜓。
• sp是安卓的字體單位痘昌，假如字體在你的設(shè)計稿720px＊1280px中為32px，那么在360dp＊640dp中該字體的大小就為16sp炬转。

• XHDPI是對應(yīng)安卓的2倍圖（720px＊1280px)辆苔，XXHDPI是對應(yīng)安卓的3倍圖（1080px＊1920px）這兩個是我們現(xiàn)在常用的。

  
  

• iOS我們通常設(shè)計尺寸是750px＊1334px扼劈，它對應(yīng)的是iOS的@2x圖驻啤。

  
  

c.字體

• 在Android中，英文字體使用Roboto荐吵，中文字體使用Noto（思源黑體）骑冗。Google聯(lián)合Adobe發(fā)布的「思源黑體」作為Android的默認(rèn)中文字體，不僅僅在字形上更易于在屏幕的閱讀先煎，并且擁有7個字重贼涩，充分滿足了設(shè)計的需求。

  
  

• iOS 中薯蝎，在英文方面磁携，蘋果加入了新的字體San Francisco，該字族包含了有兩個字體：為 iOS 和 OS X 設(shè)計的 SF良风，以及為 Watch OS 設(shè)計的 SF Compact 谊迄，而各自分為各自分為Text 和 Display，前者 6 個字重烟央，后者 9 個（多了三個斜體）统诺。OS全新的「蘋方」，字形更加優(yōu)美疑俭，且在屏幕的顯示也更加清晰易讀粮呢，擁有6個字重，滿足了日常的設(shè)計和閱讀需求。

  
  
• 在我們移交設(shè)計稿時啄寡，我們要向開發(fā)說明豪硅，安卓、iOS開發(fā)挺物，用系統(tǒng)自帶的字體懒浮，那么安卓就會用安卓系統(tǒng)的字體，iOS則會用iOS系統(tǒng)的字體识藤。除非設(shè)計特殊要求用其他字體砚著，那就要和開發(fā)工程師商量了，在安裝包植入字體包痴昧，這樣才能讓用戶使用的字體都相同稽穆。

d.距離大小、字體大小的區(qū)別

• 在iOS中赶撰，內(nèi)容到邊的距離通常是15pt（以750px＊1334px為基礎(chǔ)舌镶，像素大小為30px）。
• 而安卓基本是16dp（以720px＊1280px為基礎(chǔ)豪娜，像素大小為32px）餐胀。
• 字體大小也不一樣，iOS是11pt侵歇、13pt骂澄、15pt、17pt惕虑，而安卓中是12sp坟冲、14sp、16sp溃蔫、18sp健提。

• 用一種設(shè)計尺寸，那么我們通常采用偶數(shù)伟叛，這樣方便兩邊適配私痹，就是間距以8px為基礎(chǔ)我們邊距可以定位32px。字體大小也采用12sp统刮、14sp紊遵、16sp、18sp侥蒙。

  
  

e.設(shè)計輸出

標(biāo)注

sketch Measure暗膜，它可以輕松導(dǎo)出我們的尺寸標(biāo)注，導(dǎo)出的時候我們可以選擇默認(rèn)展示的單位鞭衩。如果是給安卓開發(fā)導(dǎo)出尺寸学搜，你的畫板是360dp＊640dp娃善，那我們選擇導(dǎo)出的單位就為MDPI，這樣開發(fā)就直接讀取值就行瑞佩，不用換算了聚磺。如果給iOS導(dǎo)出尺寸，畫板是375pt＊667pt炬丸，那就選擇導(dǎo)出的單位為@1x瘫寝。

windows標(biāo)注神器：

• Markman（http://www.getmarkman.com），
• Pxcook像素大廚（http://www.fancynode.com.cn）御雕，
• Assister ps（ http://witstudio.net/en/assistor/ ）
• Markly（http://marklyapp.com/）
• INK（http://ink.chrometaphore.com/）

切圖

• 通常我們切圖格式為png矢沿，當(dāng)然滥搭，現(xiàn)在h5頁面酸纲、網(wǎng)頁開發(fā)基本都是采用svg格式（矢量）。
• 在sketch中瑟匆，我們可以新建一個面板闽坡，專門放切圖文件。
• ps也有切圖插件cutterman愁溜，一鍵切圖疾嗅，非常智能高效。

切圖我們需要注意的是：
統(tǒng)一規(guī)格：通常冕象，我們都有一套自己的圖標(biāo)設(shè)計規(guī)范代承，在這個規(guī)范內(nèi)進行我們的圖標(biāo)設(shè)計，設(shè)計完后再用到相應(yīng)的位置渐扮。比如论悴，安卓常見的圖標(biāo)制作大小為24dp，安卓切圖通常就為24dp

注意點擊范圍：安卓的安全點擊范圍為48dp墓律，比如我們頂部的導(dǎo)航返回鍵什荣，點擊范圍就應(yīng)該設(shè)置為48dp旦签。雖然通常設(shè)計切圖可以不切這么大，但是應(yīng)該在移交的時候注明點擊范圍。

統(tǒng)一命名：命名規(guī)范翠肘，其實也就像我們使用ps的時候圖層命名一樣，它的主要作用是讓我們能夠快速找到想要的切圖和區(qū)分其他切圖书幕，是一個習(xí)慣的問題象迎。切圖命名統(tǒng)一英文，不要用中文慰枕，程序不識別的具则。

安卓點九切圖：這個是安卓切圖比較特別的地方，點九切圖可以更好的適配手機和減少系統(tǒng)占用資源捺僻，當(dāng)然并不是所有安卓切圖都用點九乡洼，只是在特殊情況下才使用的崇裁，比如按鈕、背景等束昵。使用點九拔稳，你可以用ps切，也可以下載一個點九圖的生成器锹雏。

切圖的輸出：雖然前面我們講了只做一套設(shè)計稿巴比，但是我們切圖的時候最好分別輸出，因為安卓和iOS的命名是不一樣的礁遵。iOS切圖是全部放在一個文件夾的轻绞，以后綴名不同來區(qū)分@2x和@3x。而安卓是把2倍圖和3倍圖分開放在不同的文件夾里佣耐，名字都是一樣的政勃，2倍圖放在xhdpi的文件夾中，3倍圖放在xxhdpi中兼砖。

交互與視覺輸出：交互設(shè)計師需要把頁面跳轉(zhuǎn)流程奸远、交互事件在交互文檔中說明。視覺設(shè)計師最后輸出切圖讽挟、標(biāo)注懒叛、圖片，最后統(tǒng)一移交給開發(fā)耽梅。

2.控件差別

導(dǎo)航

• 導(dǎo)航欄的高度是不相同的薛窥，iOS系統(tǒng)規(guī)范為44pt，安卓的為56dp眼姐。
• 其次iOS導(dǎo)航欄的標(biāo)題在中間诅迷，返回鍵旁邊可以有返回字樣或者上一層級的名稱；而安卓導(dǎo)航欄的標(biāo)題通常是和返回鍵挨著的妥凳，還有就是兩者的箭頭樣式不同竟贯。

• 如果只做一套，那就把標(biāo)題統(tǒng)一放在中間逝钥，返回鍵旁邊也不需要放指示文字屑那。

  
  

彈窗

Dialog／Alerts

首先它們在兩個平臺的名稱不一樣，安卓稱之為dialog艘款，iOS中稱之為alert持际。使用場景就是：需要用戶對此彈框進行操作后才能繼續(xù)執(zhí)行其他任務(wù)。使用Dialog／Alerts的時候還是謹(jǐn)慎一點比較好哗咆，盡量不要給用戶帶來糟糕的體驗感蜘欲。

Toast／HUD

toast是安卓中的習(xí)慣叫法，HUD是iOS中的習(xí)慣叫法晌柬。

安卓中是這樣規(guī)范toast的：
1.出現(xiàn)在屏幕底部姥份。2.只能放文字不能帶圖標(biāo)郭脂，文字要精簡不宜太長。3.不是模態(tài)的澈歉，可以透過Toast對其他控件進行操作展鸡。4.短時間后會自動消失。5.不能對Toast進行交互埃难，不能手動操作讓Toast主動消失莹弊。

它們兩的不同主要是：

• Toasts一般出現(xiàn)在屏幕下方，HUD出現(xiàn)在屏幕中間涡尘。
• Toasts一般是灰黑或黑色半透明忍弛，HUD一般是毛玻璃半透明。
• 每次產(chǎn)生的Toasts內(nèi)容不可改變考抄，HUD內(nèi)容可以改變（比如調(diào)節(jié)音量時出現(xiàn)的HUD）
  *但其實現(xiàn)在toast使用也已泛化细疚，每個平臺都在用，而且也延伸出其他樣式座泳，出現(xiàn)的位置也不一定在中間或者底部惠昔，也有可能出現(xiàn)在頂部幕与。

Actionbar（Action Sheets挑势、Acitivity Views）

動作欄雖然兩個系統(tǒng)都有，但是官方給的指導(dǎo)建議還是有些不同的啦鸣。

安卓中稱為Bottom Sheets潮饱，特別適合有三個或者三個以上的操作需要提供給用戶選擇、并且不需要對操作有額外解釋的情景诫给。如果只有兩個或者更少的操作香拉，或者需要詳加描述的，可以考慮使用菜單(Menu)或者對話框替代中狂。

底部動作條(Bottom Sheets)可以是列表樣式的也可以是宮格樣式的凫碌，沒有取消按鈕。宮格布局可以增加視覺的清晰度胃榕。在一個標(biāo)準(zhǔn)的列表樣式的底部動作條(Bottom Sheets)中盛险，每一個操作應(yīng)該有一句描述和一個左對齊的 icon。如果需要的話勋又，也可以使用分隔符對這些操作進行邏輯分組苦掘，也可以為分組添加標(biāo)題或者副標(biāo)題。

而iOS中楔壤，也有和安卓類似的功能鹤啡，但是action sheets是沒有圖標(biāo)的，居中對齊蹲嚣，在action sheets（操作列表）和activity views（活動視圖）通常還帶有一個取消按鈕递瑰，通常點擊取消或者彈窗外的界面祟牲，彈窗都會消失。

其實抖部，安卓中也有不帶文字的操作列表疲眷，不過通常是在屏幕中間彈出。樣式我們現(xiàn)在基本也趨于統(tǒng)一您朽，不去糾結(jié)每個平臺的特殊性了狂丝。

tips和popover

這兩種用法在每個平臺都有用到，我們在正確的場景中使用它們就好了哗总。

Snackbar

安卓獨有的（見上圖）几颜。它是一種針對操作的輕量級反饋機制，常以一個小的彈出框的形式讯屈，出現(xiàn)在手機屏幕下方或者桌面左下方蛋哭。它們出現(xiàn)在屏幕所有層的最上方，包括浮動操作按鈕涮母。

它們會在超時或者用戶在屏幕其他地方觸摸之后自動消失谆趾。Snackbar 可以在屏幕上滑動關(guān)閉。當(dāng)它們出現(xiàn)時叛本，不會阻礙用戶在屏幕上的輸入沪蓬，并且也不支持輸入。屏幕上同時最多只能現(xiàn)實一個 Snackbar来候。

動畫

Material Design運用的是機械物理和電磁物理跷叉，而iOS的動效更多建立在鏡頭運動和景深變化上。究其設(shè)計語言的本質(zhì)就是讓用戶可以把客觀經(jīng)驗移植到界面的一種思路营搅。

Material Design動畫最引人注目的就是響應(yīng)式交互動畫云挟，更加模擬真實物理場景，點擊后就會泛起“漣漪”作為一個交互響應(yīng)转质。而其他物體的排列則按照一種“深淺”的層級來排布园欣，離手指越近的元素越亮，陰影越深休蟹，而離開遠的元素則越暗沸枯，直至淹沒在黑暗之中。

iOS的系統(tǒng)動效可以發(fā)現(xiàn)鸡挠，每當(dāng)用戶去點擊辉饱，鏡頭就會切近，而背景則是隱入了一片高斯模糊的景深之中拣展。高斯模糊也成為了iOS特有的一個表達層級關(guān)系的利器（其中不僅是模糊彭沼，還存在著鏡頭晃動時的位移）。同樣類型的動效還體現(xiàn)在打開app的時候由一個點放大成一個面备埃，包括“日歷”App和“相冊”App（皆為系統(tǒng)應(yīng)用）中年-日-月切換的操作姓惑，均是鏡頭思路的表現(xiàn)形式褐奴。

按鈕

安卓主要使用的按鈕是：扁平按鈕、凸起按鈕于毙、懸浮按鈕敦冬、底部常駐按鈕、下拉菜單按鈕唯沮、開關(guān)按鈕脖旱。

iOS和安卓的按鈕形式都很接近，系統(tǒng)主要采用文字按鈕和圖標(biāo)按鈕介蛉。

兩者最大的差異是安卓點擊有響應(yīng)效果萌庆。比如：懸浮響應(yīng)按鈕(Floating action button)， 點擊后會產(chǎn)生墨水?dāng)U散效果的圓形按鈕币旧。浮動按鈕(Raised button)践险， 常見的方形紙片按鈕，點擊后會產(chǎn)生墨水?dāng)U散效果吹菱。扁平按鈕(Flat button)巍虫， 點擊后產(chǎn)生墨水?dāng)U散效果，和浮動按鈕的區(qū)別是沒有浮起的效果鳍刷。而iOS沒有墨水?dāng)U散效果占遥，而是顏色變淺來反饋用戶點擊事件。

鍵盤

安卓和iOS的鍵盤是不相同的倾剿，根據(jù)不同場景呼出不同的鍵盤類型筷频，具體使用場景大家可以自己去深入了解下。如下圖前痘。通常對于對話框來說，iOS的發(fā)送按鈕是可以直接放在鍵盤上的担忧，而安卓的通常是放在對話框里面芹缔。

選擇控件和日期選擇等

常見的選擇控件樣式是不相同的，iOS像滾輪瓶盛，模糊弱化未選擇的選項最欠，安卓就是平移滑動。開關(guān)控件樣式也是不相同的惩猫。通常這些對于做原生應(yīng)用的來說芝硬，各自調(diào)用各自的系統(tǒng)組件就行，但是對于h5來說轧房，他們是采用統(tǒng)一的設(shè)計拌阴，安卓和iOS是相同的，應(yīng)該讓開發(fā)制作統(tǒng)一樣式奶镶，需要更少的系統(tǒng)區(qū)分迟赃。

iOS11

設(shè)計語匯

1.字體加重

字體的變化在這個版本來說是非常大的陪拘，字重發(fā)生變化，比如主界面纤壁，App 名稱的字變粗左刽，日歷字體變粗改進閱讀體驗。

2.字體變大

全新的 Navigation Bar酌媒，我們可能早就已經(jīng)見過過這種樣式了欠痴，去年(2016)在新版 Apple Music 就應(yīng)用了這種大大字 Nav Bar，可謂是iOS的一次嘗試秒咨，隨后在今年就全部應(yīng)用在iOS11系統(tǒng)中了斋否。當(dāng)然設(shè)計師也不要擔(dān)心開發(fā)的實現(xiàn)難度，iOS11也開放 API 讓大家使用了拭荤。

3.卡片茵臭、陰影、圓角的應(yīng)用

卡片的應(yīng)用舅世，大家可以去觀察App Store旦委，這次它的改變也非常大，整體交互架構(gòu)都發(fā)生了變化雏亚，視覺表現(xiàn)也讓人耳目一新缨硝，當(dāng)然它的改變不是為了更好看，而是為了達到蘋果公司的商業(yè)目的罢低。App Store也充分展現(xiàn)了卡片查辩、陰影、圓角的應(yīng)用方式网持。

4.icon從空心到實心

據(jù)研究表明宜岛，實心的圖標(biāo)比空心更容易識別。當(dāng)然功舀，這里的改變主要的原因我認(rèn)為是卡片和陰影的應(yīng)用萍倡，實心圖標(biāo)能更好的和它們結(jié)合在一起。

5.鍵盤樣式改變

數(shù)字虛擬鍵盤也從原來的空心變成實心了辟汰，它和撥號列敲、計算器統(tǒng)一為實心按鈕。

系統(tǒng)本身交互和應(yīng)用的變化

1.解鎖交互發(fā)生變化

iPhone x解鎖采用面部解鎖帖汞，取代了原來的指紋解鎖戴而，實體home鍵已經(jīng)被虛擬條取代。

2.控制中心的變化

控制中心從原來的2個頁面變?yōu)楝F(xiàn)在的一個頁面了翩蘸。

3.計算器所意、撥號樣式的變化

計算器和撥號樣式也和數(shù)字鍵盤一樣，從空心按鈕便為實心按鈕。

五扁眯、iPhone x

尺寸

原來的屏幕在 iPhone X 之前壮莹，盡管 iPhone SE，7 和 7 Plus 的屏幕尺寸大小不同姻檀，但都是 16:9 的屏幕命满。而 iPhone X 差不多是個 13:6 的屏幕812pt x 375 pt（2436px x 1125px）。屏幕的絕對尺寸也變大了绣版，從 4.7 吋增大到 5.8 吋胶台。

就尺寸大小來說，我們就可以簡單的認(rèn)為杂抽，iPhone X的豎屏模式诈唬，寬度與iPhone6、iPhone7缩麸、iPhone8的4.7寸顯示屏寬度相同铸磅；iPhone X的高度比4.7寸的屏幕要高出145pt，增加大約20%的垂直顯示空間杭朱。應(yīng)用程序可以顯示高分辨率的圖像阅仔。iPhone X是顯示高分辨率的@3x圖片。375x812@1x弧械，3倍尺寸就為1125x2436@3x八酒，所以我們設(shè)計稿就以375pt x 812pt做，最后導(dǎo)出3倍圖就可以刃唐。

安全區(qū)

為了在iPhone x上適配我們的設(shè)計羞迷，我們就不得不考慮這個問題。相對于其他來說画饥，iPhone x 的狀態(tài)欄變高了衔瓮，垂直空間更大，展示的內(nèi)容更多荒澡。還有home鍵采用虛擬條报辱，交互也發(fā)生了一些變化。我們通過下面的圖來了解它单山。