android40規范

Ⅰ 淺談iOS與Android設計規范：6類交互設計規范對比

iOS和Android兩個不同的平台，肯定是有很多區別的，下面就從交互的角度，談談區別。

以前就讀過IOS和Android的規范，但是覺得沒啥大用處，因為現在APP為了保持一致性，通常在IOS和Android上的設計是一樣的，而且一些小公司只設計IOS的交互原型，因為只要IOS上能用，安卓上肯定沒問題，前段時間，和一個人聊，問我它倆的區別，當時一臉懵逼，不知從何說起。畢竟是兩個不同的平台，肯定是有很多區別的，下面就從交互的角度，談談區別。
一、全局導航
IOS：通常放在底部，方便用戶點擊
Android：通常放在上面，下面有物理按鍵，防止誤操作。

解析：因為Android比IOS多了物理按鍵，為了防止誤操作，所以只能將全局導航放在上面，但是隨著屏幕越來越大，上面是手指無法觸及的區域，所以切換起來相對成本較高。
二、二級導航
IOS：通常放返回、上一級標題、標題（居中），操作通常只有一個
Android：通常返回控制項、logo、下拉菜單、重要操作、更多操作

解析：IOS顯示了上一級的名稱，讓用戶點擊返回後，心裡有預期，Android放了APP的logo，增加了品牌性，但是就使用來講，用戶不知道點擊會回到哪，下拉菜單和更多操作都需要點擊才能顯示，增加了操作步驟。
三、工具欄
IOS：通常放在最下面，方便操作
Android：放在導航欄里，將重要操作放在外面，其他放在更多里。

解析：IOS將操作都放在底部，區域更大，操作更方便。Android將操作放在了頂部，顯得很擁擠，並且還收起了一部分，需要用戶查找，但是卻節省了空間，讓內容顯示區更大。
四、提示框
IOS：出現在屏幕中間，可以帶圖標，可以不帶，可以是靜態的，也可以是動態的。
Android：不可以帶圖標，不能是動態的，最多隻可以帶一個操作按鈕，最多隻能出現一個提示，不能和低端的懸浮按鈕重合。

解析：IOS的設計理念是盡量不打擾用戶，只要用戶能看見變化，輕易不會出現提示，只有一些用戶無法感知時，才會出現提示框，所以可以是動態的，像調節音量。Android的提示要比IOS重一些，因為它可以帶一個按鈕。
五、警示框
IOS：標題和按鈕是必須的，可以有內容和輸入

Android：主要有四種：用途、內容、事件、表現。
1、用途包含了標題，內容和事件。

六、手勢定義
IOS的手勢規定有8種，如下：

解析：IOS只有8種手勢，Android有14種，但是很多都不常用，個人感覺IOS的8種已經完全夠用了，定義那麼多種，用戶的學習成本就會提高，而且Android的有些手勢並沒有定義可以做什麼，所以給出這么多手勢也沒有用。
結語
本文對IOS和Android的規范進行了對比，Android的規范那是相當詳細，但是IOS的只給出了設計原則，所以，一些是我自己總結的，可能對比的還不夠全面，歡迎大家一起討論。

Ⅱ iOS和Android的app界面設計規范(750×1334)

目前，很多UI設計師的UI設計稿是先做iPhone6(750×1334)的，目的是向上適配iPhone6Plus，同時向下適配iPhone5和iPhone4的尺寸。這一節課也算是25學堂為大家精心整理的iPhone6界面設計尺寸規范大全。

iOS篇
————————————————————————————————————
界面尺寸

☆ 狀態欄(status bar)：就是電量條，其高度為：40px；
☆ 導航欄(navigation)：就是頂部條，其高度為：88px；
☆ 主菜單欄(submenu，tab)：就是標簽欄，底部條，其高度為：98px；
☆ 內容區域(content)：就是屏幕中間的區域，其高度為：1334px-40px-88px-98px=1108px

| 設備|App Store|程序應用|主屏幕|spotlight搜索|標簽欄|工具欄和導航欄|
| :-------------:|:-------------:| :-----:|:-----:|:-----:|
|iPhone6 plus（@3x）|1024 1024px|180 180px|144×144px|87×87 px|75 75px|66 66px|
|iPhone6（@2x）|1024 1024px|120 120px|144×144px|58 58px|75 75px|44 44px|
|iPhone5 - 5s - 5c（@2x） |1024 1024px|120 120px|144×144px|58 58px|75 75px |44 44px|
|iPhone4 - 4s（@2x）|1024 1024px|120 120px|144×144px|58 58px|75 75px|44 44px|
|iPad3 - 4 - Air - Air2 - mini2|1024 1024px|180 180px|144×144px|100 100px|50 50px|44 44px|
|iPad1 - 2|1024 1024px|90 90px|72 72px|50 50px|25 25px|22 22px|
|iPad mini |1024 1024px|90 90px|72 72px|50 50px|25 25px|22 22px|
字體
iPhone 上的字體英文為： HelveticaNeue 至於中文，Mac下用的是黑體-簡，Win下則為華文黑體，所有字體要用雙數字型大小。
網路用戶體驗部做過一個小調查， 對於app字體大小的調查結論如下：

Ⅲ android app界面設計規范(dpi,dp,px等)

PPI(Pixels per inch)：每英寸所擁有的像素數，即像素密度。
DPI(dots per inch)：即每英寸上，所能印刷的網點數，一般稱為像素密度。ppi計算公式：ppi = 屏幕對角線像素數/屏幕對角線英寸數，通過勾股定理計算屏幕對角線像素數。
Screen Size(屏幕尺寸)：手機屏幕尺寸大小，如3英寸、4英寸、4.3英寸、5.7英寸，指的是對角線的長度。
DIP（device independent pixel）：即dip/dp，設備獨立像素。 1px = 1dp density(由dpi決定)
Resolution(解析度)：指手機屏幕垂直和水平方向上的像素個數。eg解析度480 800，指該設備垂直方向有800個像素點，水平方向有480個像素點。
px(Pixel像素)：相同像素的ui，在不同解析度的設備上效果不同。在小解析度設備上會放大導致失真，大解析度上被縮小。

Android Design里把主流設備的 dpi 歸成了四個檔次： 120 dpi、160 dpi、240 dpi、320 dpi ，具體見如下表格。
實際開發當中，我們經常需要對這幾個尺寸進行相互轉換（比如先在某個解析度下完成設計，然後縮放到其他尺寸微調後輸出），一般按照 dpi 之間的比例即 2:1.5:1:0.75 來給界面中的元素來進行尺寸定義。
也就是說如果以 160 dpi 作為基準的話，只要尺寸的 DP 是 4 的公倍數，XHDPI 下乘以 2，HDPI 下乘以 1.5，LDPI 下乘以 0.75 即可滿足所有尺寸下都是整數 pixel 。但假設以 240 dpi 作為標准，那需要 DP 是 3 的公倍數，XHDPI 下乘以 1.333，MDPI 下乘以 0.666 ，LDPI 下除以 2。而以 LDPI 和 XHDPI 為基準就更復雜了。同時第一款Android設備（HTC的T-Mobile G1）是屬於160dpi的。鑒於以上各種原因， 標准dpi=160

谷歌官方對dp的解釋如下：
A virtual pixel unit that you should use when defining UI layout, to express layout dimensions or position in a density-independent way.
The density-independent pixel is equivalent to one physical pixel on a 160 dpi screen, which is the baseline density assumed by the system for a "medium" density screen. At runtime, the system transparently handles any scaling of the dp units, as necessary, based on the actual density of the screen in use. The conversion of dp units to screen pixels is simple: px = dp * (dpi / 160). For example, on a 240 dpi screen, 1 dp equals 1.5 physical pixels. You should always use dp units when defining your application's UI, to ensure proper display of your UI on screens with different densities.

簡單來說，以160dpi的設備為准，該設備上1dp = 1px；如果屏幕密度大，1dip代表的px就多，比如在320dpi的屏幕上，1dip=2px(即1dp代表2個像素)。在app開發時，最好用dp來做界面的布局，以保證適配不同屏幕密度的手機。

dp和px的換算公式：

我的理解，該公式表示px的數值等於dp的數值*（設備dpi/160）
注意，px、dp是單位，但density沒單位。

applyDimension的源碼如下，可參考：

android的尺寸眾多，建議使用解析度為 720x1280 的尺寸設計。這個尺寸 720x1280中顯示完美，在 1080x1920 中看起來也比較清晰；切圖後的圖片文件大小也適中，應用的內存消耗也不會過高。

app啟動圖標為48*48dp，對應各dpi設備，圖像資源像素如下：

| mdpi | hdpi | xhdpi | xxhdpi |
| ---:| ---: | ---:| ---:| ---:|
|48 48px|72 72px|94 96px|144px 144px|

操作欄圖標為32*32dp，對應各dpi設備，圖像資源像素如下：其中圖形區域尺寸是24*24dp，可參考平時ui切圖會有部分留白。

| mdpi | hdpi | xhdpi | xxhdpi |
| ---:| ---: | ---:| ---:| ---:|
|32 32px|48 48px|64 64px|96px 96px|

通知欄圖標為24*24dp，對應各dpi設備，圖標像素如下：

| mdpi | hdpi | xhdpi | xxhdpi |
| ---:| ---: | ---:| ---:| ---:|
|24 24px|36 36px|48 48px|72px 72px|

某些場景需要用到小圖標，大小應當是16*16dp，其中圖形區域尺寸12*12dp。

| mdpi | hdpi | xhdpi | xxhdpi |
| ---:| ---: | ---:| ---:| ---:|
|16 16px|24 24px|32 32px|48px 48px|

Ⅳ Android App 常用圖標尺寸規范

1. 程序啟動圖標：

LDPI (Low Density Screen，120 DPI)，其圖標大小為 36 x 36 px。

MDPI (Medium Density Screen, 160 DPI)，其圖標大小為 48 x 48 px。

HDPI (High Density Screen, 240 DPI)，其圖標大小為 72 x 72 px。

xhdpi (Extra-high density screen, 320 DPI)，其圖標大小為 96 x 96 px。

xxhdpi（xx-high density screen, 480 DPI）,其圖標大小為144 x 144 px。

2.底部菜單圖標

1. 大屏:

1. 完整圖片（紅色）: 72 x 72 px

2. 圖標（藍色）: 48 x 48 px

3. 圖標外邊框（粉色）: 44 x 44 px

1. 中屏:

1. 完整圖片: 48 x 48 px

2. 圖標: 32 x 32 px

3. 圖標外邊框: 30 x 30 px

1. 小屏:

1. 完整圖片: 36 x 36 px

2. 圖標: 24 x 24 px

3. 圖標外邊框: 22 x 22 px

3. 彈出對話框頂部圖標

小屏24 x 24 px Low density screen (ldpi)

中屏32 x 32 px Medium density screen (mdpi)

大屏48 x 48 px High density screen (hdpi)

4. 長列表內部列表項圖標

小屏24 x 24 px Low density screen (ldpi)

中屏32 x 32 px Medium density screen (mdpi)

大屏48 x 48 px High density screen (hdpi)

5. 底部或頂部tab標簽圖標

1. 大屏 (hdpi) screens:

1. 完整圖片（紅色）: 48 x 48 px

2. 圖標（藍色）: 42 x 42 px

1. 中屏 (mdpi) screens:

1. 完整圖片: 32 x 32 px

2. 圖標: 28 x 28 px

1. 小屏(ldpi) screens:

1. 完整圖片: 24 x 24 px

2. 圖標: 22 x 22 px

6. 底部狀態欄圖標

ldpi (120 dpi) 18 x 18 px 小屏

mdpi (160 dpi) 24 x 24 px 中屏

hdpi (240 dpi) 36 x 36 px 大屏

xhdpi (320 dpi) 48 x 48 px 特大屏

Ⅳ ios和android設計規范區別

Android 整體視覺設計規范

App 界面的整體視覺組成大致可以分為四個部分：

StatusBar（狀態欄）、TopBar（頭部欄）、Body Content（內容區域）、FootBar（底部欄）。

StatusBar 的樣式由系統 UI 決定，除背景配色外，不需要做其他的設計。

TopBar 兩個系統平台規范上的顯示高度與內容布局有明顯的差異，按各自的規范進行設計。

Body Content 除控制項外，採用相同的布局與視覺設計。

FootBar 除控制項外，採用相同的布局與視覺設計。

 

二、Android差異化設計案例解讀

 

1. StatusBar/TopBar 差異化設計

 

2. 常用的三個系統圖標/控制項差異化

 

3. 搜索/輸入控制項差異化

4. 彈窗樣式差異化

 

 

三、Android系統交互與iOS系統交互的差異化設計

1. 交互方式：

除了上面提到了彈窗樣式與交互差異化之外，對於一些系統交互行為，推薦盡量使用 iOS 與 Android 各自平台的系統控制項與交互方式，降低開發與用戶學習成本。系統交互行為主要包含以：返回上級/關閉當前頁面的方式、通知開啟或者關閉設置、發送/提交內容（鍵盤自帶或者新增按鈕點擊）、Item 列表排序/刪除、提示窗顯隱、時間選擇控制項、手勢操作等等。

2. 交互動效：

交互動效也推薦盡量使用 iOS 與 Android 各自平台的系統提供的動效。比如 iOS 的鏡頭切近與高斯模糊，Android 的紙墨磁吸等等。

單條 item 的交互差異示例

 

總體來說，就是以 iOS 版為參照，底部欄與中間內容區域盡量保持相同的設計，通過對狀態欄、頭部樣式、控制項（開關、選框、搜索、輸入）、系統圖標（返回、分享、更多）、彈窗樣式、系統交互進行 Android 規范化差異，以保證該 App 的設計在兩個不同的系統平台即能符合中國用戶的使用習慣，又能適當體現系統的不同風格與特性。