*本文基於ios 10&Android 7官方規範進行解讀和寫作，理解不恰當之處，歡迎指正。

移動端是IOS和Android的天下。不同平臺的設計區別很多，在一稿適配流行的今天，理解規範反而越來越重要。不僅幫助你設計有數，在不同平臺上統一體驗，還能避免某些無效的討論。不同平臺就像在不同的國家旅行，能使兩個平臺上的使用者都能夠理解並且易於使用你的app，那是多麼愉快。由於職業習慣，在閱讀規範文件的時候，我更加關注設計和互動層面的問題，主要針對設計方面的規範做一個提煉和橫向比較，也希望能作為一個簡明幫助文件方便設計時檢視。

設計理念

IOS設計規範叫：ios Human Interface Guidelines 簡稱：IOS HIG

IOS的設計理念是：

1. 清晰（Clarity）

2. 遵從（Deference）

3. 深度（Depth）

解讀：

1. IOS設計的最根本原則是要易於識別，便於使用。設計需要突出重點內容，並且表達可互動性。縱觀整個系統，文字、圖示、留白、顏色、以及其它介面元素，都是為了幫助理解和使用功能。

2. 動效要流暢，介面要清爽美觀，但這些目的還是幫助使用者理解內容並與之互動，而不會干擾使用者。當前內容佔據整屏時，半透明和模糊處理能夠暗示其它更多的內容。通過減少使用邊框、漸變和陰影讓介面儘可能地輕量化，從而突出內容。在動態設計語言中，IOS模擬鏡頭，通過焦距和景深變化來展示關係，讓使用者可以使用人眼視覺習慣來操作。仔細看iOS 的桌面，點選開啟app的過程，就像發現了一顆果樹，調節焦距後放大這顆果樹，發現樹上的蘋果越來越清晰，同時背景漸漸變得模糊。是不是很像呢？這種景深的模糊通常表示層級的切換。

3. 清楚的視覺層和生動的動效表達了層次結構，賦予了活力，並有助於理解。可互動的元素需要易於發現，讓使用者在成功觸發相應功能或者獲得更多內容的同時還能掌控當前位置的來龍去脈。例如日曆app裡由年-月這個視角轉換。它流暢的表現了由一點展開變為面的過程，在這個動效過程中，我們能清楚的看到是由哪個頁面過渡而來的。同樣運營鏡頭焦距變化的視角，帶來縱深感。

Android設計規範叫：Material Design 簡稱：MD

Material Design的設計理念是：

1. 通過隱喻來表達實體感。（ Material is the metaphor ）

2. 鮮明、形象、深思熟慮。( Bold, graphic, intentional ）

3. 有意義的動態效果。( Motion provides meaning ）

解讀：

1. Material Design 以紙墨為隱喻，基於真實世界中電磁和物理規律的效果，創造熟悉的觸感，意圖建立真實的數字化（Authentically Digital），讓使用者可以快速地理解和認知。同時MD對於光影做了嚴格的提煉，用來解釋物體之間的交合關係、空間關係，以及單個物體的運動。動效和空間，構成了實體隱喻。MD對於層級的解釋和IOS有顯著的不同，所有元素都有z軸，意味著這是一個3D空間。

當點選模組時，我們的手指像有磁力一樣，模組上升，泛起一圈圈漣漪（Ripple Effect）。從表現形式上來說物體的高度增加，陰影會變得更柔和、更大；隨著物體高度降低，陰影會變得更銳利、更小。個人覺得這套動效很有魔法的味道誒，可以控制想要拿的東西飛過來。

2. MD注重平面視覺語言，在排版、網格、空間、比例、配色、影像使用等方面下功夫，運用視覺手法夠構建層級，表達關係。通過精心選擇色彩、影像、選擇合乎比例的字型、留白，力求構建出鮮明、形象的使用者介面，讓使用者沉浸其中。MD設計語言強調根據使用者行為凸顯核心功能，進而為使用者提供操作指引。

3. 動效設計強調有意義，要根據使用者行為而定，目的是為了吸引使用者的注意力，可以有效地暗示、指引使用者。動效要非常連續和平滑，維持整個系統的連續性體驗。動效反饋需要細膩，讓使用者能夠充分知曉所發生的變化。轉場動效需要保持一致性。

單位換算

IOS是一個相對封閉的系統，使得我們設計時必須運用更多原生控制元件；而Android的開放性使得各廠商可以進行深度定製，螢幕和系統都五花八門，眾所周知的某個原因，我們很少能接觸原生Android。有些企業出於品牌一致性和資源等因素考慮，使用IOS設計稿作為一稿適配，這避免不了單位適配的問題，這件事情不僅僅是開發同學的活兒，我們在設計和標註時注意兩個平臺的區別，開發同學對接起來一定會更順利啦~

iOS的單位:

pt（point ，獨立畫素）這裡特別說明下，和平面設計印刷的pt值是不一樣的，在手機螢幕裡pt 是獨立畫素的意思。對於IOS來說1inch=163pt。而在平面設計和印刷中，包括ps等設計軟體裡，pt是點的意思，1inch=72pt。把這兩個搞混了小心開發同學哭給你看哦（喂

Android的單位:

長度單位：dp（device independent pixel，裝置無關畫素）文字單位：sp（scale-independent pixel，縮放無關畫素）一般情況下可認為sp=dp

計算公式：

px = dp *（ppi / 160 ）

Android約定在邏輯密度為160DPI（即mdpi）時，1dp=1px。

IOS約定在邏輯密度為163PPI（即@1x）時，1pt=1px。Retina屏下1pt=2px

因此可以看成畫素解析度160下，1dp=1pt=1px

ppi（Pixels Per Inch）意思是：即每英寸所擁有的畫素數目，即螢幕畫素密度。在螢幕尺寸一樣的情況下，螢幕的解析度越大，PPI的值也就越大，螢幕顯示密度就越高，畫面的細節也會越豐富。

ppi計算公式：

ppi = √ (螢幕橫向解析度 ² + 螢幕縱向解析度 ² ) / 螢幕英寸

iphone7螢幕橫向解析度750px，縱向解析度為1334px， PPI=√(7502 ²+1334 ²)/4.7=326，所以iphone6的螢幕畫素密度就是326;

如果你計算水平和我一樣男默女淚的話。。。上神器：

http://dpi.nu/

設計與輸出：

根據友盟17年3月的資料，國內IOS裝置最主流解析度TOP3分別是：1334*750，2208*1242，1136*640，每個尺寸佔比差別10%左右。也就是主流是@2x和@3x尺寸。

國內Android裝置最主流解析度TOP3分別是：1920*1080，1280*720，854*480，由於第三個尺寸只佔8.1%，基本可以忽略。主流尺寸主要是xxhdpi，xhdpi。值得一提的是兩者幾乎平分秋色，當然按這個趨勢，xxhdpi會漸漸拉開差距。我們設計的時候也主要兼顧主流尺寸。

IOS

1. 設計時，用1334*750的設計稿進行設計

2. 切圖時, 切的@2x，@3x圖示，@2x的banner等點陣圖。

3. 標註時，距離和字號用pt

Android

1. 設計時，用1280*720的設計稿進行設計

2. 切圖時, 切xhdpi，xxhdpi的圖示，xhdpi的banner等點陣圖。

3. 標註時，距離用dp，字號用sp

一稿適配：

sketch：

如果你用sketch做IOS設計稿來適配的話，那麼設計稿可以用375x667 。它是IOS的@1x；注意banner 之類的點陣圖需要另外用@2x去設計，因為點陣圖由小放大會模糊，只能由大縮小去適配。

PS：

如果你用PS做IOS設計稿來適配的話，那麼請從@2x開始，雖然ps爸爸厲害但還是點陣圖軟體，例如@1x設計稿中要做0.5px的線，那麼在ps裡依然顯示為1px。

你可能奇怪那麼@3x不是更清楚嗎？

我是基於以下幾點考慮的：

1.目前ios最主流解析度還是@2x的。

2. 雖然Android方面xxhdpi和xhdpi佔比相當，但是圖片越大意味著載入越慢，綜合考慮用@2x設計banner和營銷頁面。

在輸出時候，IOS輸出@2x、@3x。

雖然Android的尺寸奇奇怪怪都有，但是兼顧主流才是重點對吧~ Android輸出xhdpi，xxhdpi。或者問問你家開發有沒有其他的尺寸需求。

標註直接按照你的設計稿標，分別告訴iOS是@1X的，Android是1px=1dp。

如果你喜歡我的分享記得給我留言或者點贊哦，

也可以把你的問題寫在下面的評論區。

更多相關的文章記得去我的主頁查閱哦。