android - UI知識

前言

對ios和android使用同一套ios的交互設計這種做法不置可否，畢竟很多人都這麼干，對此我們在開發中就要能夠換算出適合分辨率的尺寸大小，我們可直接對比雙方的分辨率來直接換算，例如：ios:(640*1136px) X 75% = ios:(480*852px) ≈ android(wvga hdpi):(480*800px)，知道這個後就可以根據相應的比例進行換算

屏幕基礎知識

iPhone界面尺寸：

設備 分辨率 PPI 狀態欄高度 導航欄高度 標簽欄高度 iPhone6 plus 1080x1920px 401PPI 54px 132px 146px iPhone6 750x1334px 326PPI 40px 88px 98px iPhone5 - 5c - 5s 640x1136px 326PPI 40px 88px 98px iPhone4 - 4s 640x960px 326PPI 40px 88px 98px iPhone&iPod Touch第一、二、三代 320x480px 163PPI 20px 44px 49px

android系統密度：

密度 密度值 分辨率 比例 dp與px ldpi 120 240x320 3 1dp = 0.75px mdpi 160 320x480 4 1dp ＝ 1px hdpi 240 480x800 6 1dp = 1.5px xhdpi 320 720x1280 8 1dp = 2px xxhdpi 480 1080x1920 12 1dp = 3px xxxhdpi 640 3840x2160 16 1dp = 4px

概念：

分辨率。分辨率就是手機屏幕的像素點數，一般描述成屏幕的“寬x高“，例如720x1280表示此屏幕在寬度方向有720個像素，在高度方向有1280個像素。Android比iPhone的尺寸多了很多套，建議取用 720x1280 這個尺寸，這個尺寸在720x1280中顯示完美，在1080x1920中看起來也比較清晰；切圖後的圖片文件大小也適中，應用的內存消耗也不會過高。計算又簡單，就是 1dp＝2px 啊

為什麼要選擇720＊1280來作為設計稿，而且分辨率設置為72
因為320dpi屏幕的分辨率最常見的是720x1280，以這個尺寸作為畫布尺寸，是最帶感的，這樣的設計稿就和應用在最多數的320dpi的機器上運行起來的樣子一樣。
而且挑密度最大的，因為圖片縮小比放大好，放大會失真，選320dpi作為目標屏幕，為其他屏幕提供圖片時，只需要縮小。
72 dpi是Photoshop的默認設置，不用改就好，這個數字和後面的換算有關系。

屏幕大小。屏幕大小是手機對角線的物理尺寸，以英寸（inch）為單位。比如某某手機為“5寸大屏手機“，就是指對角線的尺寸，5寸x2.54厘米／寸 ＝ 12.7厘米。

密度（DPI,dots per inch;或PPI,pixels per inch）。從英文名可知，就是沒英寸的像素點數，數值越高當然顯示越細膩。假如我們知道一部手機的分辨率是1080x1920，屏幕大小是5英寸，那我們應該如何計算出屏幕的密度呢？很簡單，我們可通過寬1080和高1920，根據勾股定律，可計算出對角線的像素數大約是2203，再用2203除以5就是此屏幕的密度了，計算結果是440。440dpi的屏幕已經相當的細膩了 。

一個重要的單位dp
dp也可寫為dip，即density-independent pixel。你可以想象dp更類似一個物理尺寸，比如一張寬和高均為100dp的圖片在320x480和480x800的手機上“看起來“一樣大。而實際上，他們的像素值並不一樣。dp正是這樣一個尺寸，不管這個屏幕的密度是多少，屏幕上相同dp大小的元素始終看起來差不多大。這也就是我們開發為啥要用dp的原因了。
另外，文字尺寸使用sp，即scale-independentpixel的縮寫，這樣，當你在系統設置裡調節字號大小時，應用中的文字也會隨之變大變小。

dp與px的轉換
在android中，系統密度為160dpi的中密度手機屏幕為基准屏幕，即320x480的手機屏幕。在這個屏幕中，1dp＝1px。
100dp在320x480（mdpi，160dpi）中是100px。那麼100dp在480x800（hdpi，240dpi）的手機上是多少px呢？我們知道100dp在兩個手機上看起來差不多大，根據160與240的比例關系，我們可以知道，在480x800中，100dp實際上覆蓋了150px。因此，如果你為mdpi手機提供了一張100px的圖片，這張圖片在hdpi手機上就會拉伸至150px，但是他們都是100dp。
中密度和高密度的縮放比例似乎可以不通過160dpi和240dpi計算，而通過320px和480px也可以算出。但是按照寬度計算縮放比例不適 用於超高密度xhdpi和超超高密度xxhdpi了。即720x1280中1dp是多少px呢？如果用720／320，你就會得出1dp=2.25px，實際這樣算出來是不對的。dp與px的換算要以系統密度為准，720x1280的系統密度為320，320x480的系統密度為160，320／160＝2；那麼在720x1280中，1dp＝2px。同理，在1080x1920中1dp＝3px。
當android系統字號設為“普通“時，sp與px的尺寸換算和dp與px是一樣的。比如某個文字大小在720x1280的PS畫布中是24px，那麼告訴工程師，這個文字大小是12sp。

Material design設計規范

這裡主要提供android端的界面組件間距、尺寸等，更詳細內容可到 中文文檔 或 官方英文 查看更多內容，以下內容圖片來自這裡

邊框與間距

該屏幕演示圖標、頭像和一個2行文本的列表如何左對齊，以及一個56dp的浮動動作按鈕和文本如何右對齊。<喎?/kf/ware/vc/" target="_blank" class="keylink">vcD4NCjxwPtfz09K499PQMTZkcLXEtLnWsbHfv/Kho7T409DNvLHqu/LV3823z/G1xMTayN3T0DcyZHC1xNfzsd++4KGjPGJyIC8+DQq0udaxsd++4KO6PGJyIC8+DQoxLiAyNGRwPGJyIC8+DQoyLiA1NmRwPGJyIC8+DQozLiA0OGRwPGJyIC8+DQo0LiA3MmRwPC9wPg0KPHA+PGltZyBhbHQ9"這裡寫圖片描述" src="/uploadfile/Collfiles/20160520/20160520090939121.png" title="\" />

該屏幕演示圖標、頭像、2行文本列表、子標題和40dp的浮動動作按鈕如何左對齊。小圖標右對齊。
圖標（大小圖標）有16dp的左右垂直邊框。帶有圖標或者頭像的內容有72dp的左邊距。
垂直邊距
1. 24dp
2. 56dp
3. 72dp
4. 48dp
5. 8dp

該屏幕演示圖標如何左對齊，以及圖標和一個56dp的浮動動作按鈕如何右對齊。
圖標有16dp的左垂直邊框。帶有圖標或頭像的內容有72dp的左邊距，32dp的右邊距（考慮到56dp的圓形浮動動作按鈕）。這樣圓形浮動動作按鈕下的圖標也對其了。
垂直邊距
1. 24dp
2. 56dp
3. 8dp
4. 72dp

該屏幕演示圖標、頭像和文本如何左對齊，浮動動作按鈕、圖標或文本如何右對齊。
圖標有16dp的左右垂直邊框。帶有圖標或頭像的內容區域左對齊，距左邊界72dp。
垂直邊距
1. 24dp
2. 56dp
3. 48dp
4. 8dp

該屏幕演示了側邊導航菜單的寬度，以及圖標、頭像和文本如何左對齊，小圖標如何右對齊。
圖標距側邊導航菜單的左右邊界分別有16dp的垂直邊框。帶有圖標或者頭像的內容距側邊導航菜單的左邊界72dp。側邊導航菜單的寬度等於屏幕的寬度減去動作條的高度，即在本例中距屏幕右側56dp的寬。
垂直邊距
1. 48dp
2. 8dp
3. 56dp

觸摸目標尺寸

最小的觸摸目標尺寸是48dp。在布局中，當為圖標（24dp）或者頭像（40dp）設置邊距時，要時刻記得。觸摸目標不能重疊。

應用欄

前身為android的操作欄，用於品牌推廣，導航，搜索和操作。

默認高度：
手機橫屏（Landscape）:48dp
手機豎屏（Portrait）:56dp
平板電腦／電腦桌面（Tablet/Desktop）:64dp
對於拉高了的選單，它的高度等於默認高度加上內容高度。

側邊導航欄（side nav）

若側欄出現，左右邊的導航抽屜（nav drawer）可以被固定一直顯示或者浮動顯示臨時覆蓋上去。左邊的導航欄的內容應該是主要是導航或者識別類型的。而右邊導航欄的內容應該主要是更深層次的信息，該頁主要內容的初級信息。

臨時的導航抽屜可以覆蓋內容畫布。而固定的導航抽屜應該放置在內容畫布的側邊或者下方。

尺寸：
手機：側邊導航欄寬度 ＝ 屏幕寬度 － 應用欄高度
例子：Nexus 4: 304dp
Nexus 5: 288dp
iPhone: 264dp
浮動的最大寬度： 304dp

底部動作條（Bottom Sheets）

一個從屏幕底部邊緣向上滑出的一個面板，使用這種方式向用戶呈現一組功能。底部動作條呈現了簡單、清晰、無需額外解釋的一組操作。
規格：

列表樣式的底部動作條：

帶頭部的列表樣式的底部動作條：

包含跳轉到其他程序入口的標准宮格樣式的底部動作條：

按鈕

底部固定按鈕：

懸浮響應按鈕：默認尺寸和迷你尺寸。迷你尺寸僅僅用於配合屏幕上的其他元素制造視覺上的連續性。

扁平和浮動按鈕的狀態：

Flat Light/Light color
最小寬度：88dp，高度：36dp
覆蓋狀態：20％ ＃999，點擊狀態：40％ ＃999，不可用狀態：10％ ＃999

Flat Dark/Dark color
最小寬度：88dp，高度：36dp
覆蓋狀態：15％ ＃ccc，點擊狀態：25％ ＃ccc，不可用狀態：10％ ＃ccc

Raised Light/Light color
最小寬度：88dp，高度：36dp

Flat Light/Light color
最小寬度：88dp，高度：36dp
正常狀態：Color 500 ,覆蓋狀態：Color 600，點擊狀態：Color 700，不可用狀態：10％ ＃ccc

卡片

包含一組特定數據集的紙片，數據集含有各種相關信息，例如，關於單一主題的照片，文本和鏈接。

卡片帶圓角，帶多種操作，可忽略和重排

布局准則：
字體設計：
正文：14sp 或 16sp
標題：24sp或更大
扁平按鈕： Roboto Medium，14sp，10sp 字間距
移動設備上的卡片間距：
屏幕邊界與卡片留白：8dp
卡片間留白：8dp
內容留白：16dp

紙片

Chips 是一種小塊的用來呈現復雜實體的塊，比如說日歷的事件或聯系人。

關閉狀態的聯系人紙片視圖：
聯系人名字使用的字體：Roboto，常規，14sp
當點擊關閉狀態下的聯系人紙片視圖，它就會展開並且顯示出聯系人的地址

打開狀態的聯系人紙片視圖：
默認狀態下，最頂的聯系方式被激活並選中
聯系人名字的字體為：Roboto，常規，16sp
地址文本的字體為：Roboto，常規，14sp
當用戶選擇後，紙片視圖被關閉

提示框（Dialogs）

用於提示用戶作一些決定，或者是完成某個任務時需要的一些其它額外的信息。 Dialog可以是用一種 取消/確定 的簡單應答模式，也可以是自定義布局的復雜模式，比如說一些文本設置或者是文本輸入 。

網格

網格列表是一種標准列表視圖的可選組件。網格列表與應用於布局和其他可視視圖中的網格有著明顯的區別。

網格列表表頭/表尾（header/footers）：
單行表頭/表尾：
高： 48dp
文本內邊距： 16dp
默認字體大小： 16sp
次要動作與尾右對齊

兩行表頭/表尾：
高： 68dp
文本內邊距： 16dp
每行的默認字體大小： 16sp/12sp或者14sp/14sp

僅有圖片的網格列表：
網格內邊距： 4dp
網格列表中的瓦片可以跨多列。
仔細考慮網格列表中的次要文本是否需要使用多列瓦片，因為大的瓦片可能會造成很大的空間浪費。

單行網格列表：
僅有文本
高: 48dp
文本內邊距： 16dp
默認字體大小： 16sp
網格內邊距： 4dp

帶圖標的文本：
高： 48dp
文本內邊距： 16dp
默認字體大小： 16sp
網格內邊距： 4dp
網格列表表尾或者表頭的中的次要文本可以右對齊或左對齊。

兩行網格列表：
僅有文本
高： 68dp
文本內邊距： 16dp
每行的默認字體大小： 16sp/12sp或14sp/14sp
網格內邊距： 4dp

帶有圖標的文本：
高： 68dp
文本內邊距： 16dp
每行的默認字體大小： 16sp/12sp 或 14sp/14sp
網格列表表尾或者表頭中的次要文本可以右對齊或左對齊。
網格內邊距是4dp

列表

列表作為一個單一的連續元素來以垂直排列的方式顯示多行條目。

單行列表：
僅有文本：
字體： Roboto Regular 16sp
瓦片高： 48dp
文本內邊距： 16dp
在列表的上部和下部添加8dp的內邊距。一個特例是在帶有表頭條目（subheader）的列表上部，因為表頭條目包含了它們自己的內邊距。

帶有文本的圖標：
字體： Roboto Regular 16sp
瓦片高： 48dp
左邊圖標內邊距： 16dp
文本左內邊距： 72dp
文本上部和下部內邊距： 16dp
在列表的上部和下部添加 8dp 的內邊距。一個特例是在帶有表頭條目（subheader）的列表上部，因為表頭條目包含了它們自己的內邊距。

帶有文本的頭像：
字體： Roboto Regular 16sp
瓦片高： 56dp
左邊頭像內邊距： 16dp
文本左內邊距： 72dp
文本上部和下部內邊距： 20dp
在列表的上部和下部添加8dp的內邊距。一個特例是在帶有表頭條目（subheader）的列表上部，因為表頭條目包含了它們自己的內邊距。

兩行列表：
僅有文本：
主要文本的字體： Roboto Regular 16sp
次要文本的字體： Roboto Regular 14sp
瓦片高： 72dp
文本內邊距： 16dp
在列表的上部和下部添加8dp的內邊距。一個特例是在帶有表頭條目（subheader）的列表上部，因為表頭條目包含了它們自己的內邊距。

帶有文本的頭像：
主要文本的字體： Roboto Regular 16sp
次要文本的字體： Roboto Regular 14sp
瓦片高： 72dp
左邊頭像內邊距： 16dp
文本左內邊距： 72dp
文本上部和下部內邊距： 16dp
圖標和文本區域中心對齊。
在列表的上部和下部添加8dp的內邊距。一個特例是在帶有表頭條目（subheader）的列表上部，因為表頭條目包含了它們自己的內邊距。

帶有文本和圖標的頭像：
主要文本的字體： Roboto Regular 16sp
次要文本的字體： Roboto Regular 14sp
瓦片高： 72dp
左邊頭像內邊距： 16dp
文本左內邊距： 72dp
文本上部和下部內邊距： 16dp
右邊圖標內邊距： 16dp
在列表的上部和下部添加 8dp 的內邊距。一個特例是在帶有表頭條目（subheader）的列表上部，因為表頭條目包含了它們自己的內邊距。

三行列表：

僅有文本：
主要文本的字體： Roboto Regular 16sp
次要文本的字體： Roboto Regular 14sp
瓦片高： 88dp
文本內邊距： 16dp
在列表的上部和下部添加8dp的內邊距。一個特例是在帶有表頭條目（subheader）的列表上部，因為表頭條目包含了它們自己的內邊距。

帶有文本的頭像：
主要文本的字體： Roboto Regular 16sp
次要文本的字體： Roboto Regular 14sp
瓦片高： 88dp
左邊頭像內邊距： 16dp
文本左內邊距： 72dp
文本上部和下部內邊距： 16dp
頭像和主要文本上部對齊。
在列表的上部和下部添加8dp的內邊距。一個特例是在帶有表頭條目（subheader）的列表上部，因為表頭條目包含了它們自己的內邊距。

帶有文本和圖標的頭像：
主要文本的字體： Roboto Regular 16sp
次要文本的字體： Roboto Regular 14sp
瓦片高： 88dp
左邊頭像內邊距： 16dp
文本左內邊距： 72dp
文本上部和下部內邊距： 16dp
右邊圖標內邊距： 16dp
頭像和圖標與主要文本上部對齊。
在列表的上部和下部添加8dp的內邊距。一個特例是在帶有表頭條目（subheader）的列表上部，因為表頭條目包含了它們自己的內邊距。

菜單

菜單是臨時的一張紙（paper），由按鈕（button）、動作（action）、點（pointer）或者包含至少兩個菜單項的其他控件觸發。
每一個菜單項是一個離散的選項或者動作，並且能夠影響到應用、視圖或者視圖中選中的按鈕。
菜單不應該用作應用中主要的導航方法。

Snackbars 與 Toasts

Snackbar 是一種針對操作的輕量級反饋機制，常以一個小的彈出框的形式，出現在手機屏幕下方或者桌面左下方。它們出現在屏幕所有層的最上方，包括浮動操作按鈕。

它們會在超時或者用戶在屏幕其他地方觸摸之後自動消失。Snackbar 可以在屏幕上滑動關閉。當它們出現時，不會阻礙用戶在屏幕上的輸入，並且也不支持輸入。屏幕上同時最多只能現實一個 Snackbar。

Android 也提供了一種主要用於提示系統消息的膠囊狀的提示框 Toast。Toast 同 Snackbar 非常相似，但是 Toast 並不包含操作也不能從屏幕上滑動關閉。

手機端 Snackbar：

單行 Snackbar 高度：48 dp
多行 Snackbar 高度：80 dp
文本：Roboto Regular 14 sp
操作按鈕：Roboto Medium 14 sp, 大寫文本
默認背景填充色：#323232 100%

Android toast：

開發者可以自定義的 Toast 和它在屏幕上的位置。如果你打算自定義 Toast 的話，強烈建議按照上述 Snackbar 的樣式來設計。

副標題

副標題是特殊的列表區塊，它描繪出一個列表或是網格的不同部分，通常與當前的篩選條件或排序條件相關。

副標題可以內聯展示在區塊裡，也可以關聯到內容裡，例如，關聯在相鄰的分組列表裡。

在滾動的過程中，副標題一直固定在屏幕的頂部，除非屏幕切換或被其他副標題替換。

為了提高分組內容的視覺效果，可以用系統顏色來顯示副標題。

列表副標題
區塊高度是 48dp。

副標題字體為 Roboto Medium 14sp。

副標題應該跟列表中頭像或是圖標左對齊，除非那個地方有進階操作（promoted action）。

網格副標題
區塊高度是 48dp。

副標題字體為 Roboto Medium 14sp。

副標題跟左邊緣距離為 16dp。

Tabs

在一個 app 中，tabs 使在不同的視圖和功能間探索和切換以及浏覽不同類別的數據集合起來變得簡單。

用法
tab 用來顯示有關聯的分組內容。tab標簽用來簡要的描述內容。

規格：
固定並且全屏寬度
Tab 寬度：屏幕的 1/3
激活的Tab的指示器高度：2 dp
文本：14 sp Roboto Medium
文本在 tab 中居中
激活的文字顏色：#fff 或顏色選擇中的次要顏色（詳情可見Color）
不可用的文字顏色：#fff 60%

可滾動的：
Tab 寬度：12 dp + 文本寬度 + 12 dp
激活的Tab的指示器高度：2 dp
文本：14 sp Roboto Medium
激活的文字顏色：#fff 或顏色選擇中的次要顏色
不可用的文字顏色：#fff 60%

文本框

文本框可以讓用戶輸入文本。它們可以是單行的，帶或不帶滾動條，也可以是多行的，並且帶有一個圖標。點擊文本框後顯示光標，並自動顯示鍵盤。除了輸入，文本框可以進行其他任務操作，如文本選擇（剪切，復制，粘貼）以及數據的自動查找功能。
文本框可以有不同的輸入類型。輸入類型決定文本框內允許輸入什麼樣的字符，有的可能會提示虛擬鍵盤並調整其布局來顯示最常用的字符。常見的類型包括數字，文本，電子郵件地址，電話號碼，個人姓名，用戶名，URL，街道地址，信用卡號碼，PIN 碼，以及搜索查詢。

淺色主題：

提示和輸入字體：Roboto Regular 16 sp
輸入框高度：48 dp
文本頂部和底部填充：16 dp
文本字段分隔填充：8 dp

帶有圖標的淺色主題：

提示和輸入字體：Roboto Regular 16 sp
輸入框高度：48 dp
文本頂部和底部填充：16 dp
文本字段分隔填充：8 dp

終於看完了，我們開發自己應用時，可參考以上規范，實際開發肯定是按著產品經理說了算，這裡也不吐槽了，下班走人。。