安卓設(shè)計規(guī)范

在講安卓設(shè)計規(guī)范之前我們先來看看一下的問題：

專注于為中小企業(yè)提供成都網(wǎng)站制作、網(wǎng)站建設(shè)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)華寧免費做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了上1000家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

*規(guī)范是什么？

*規(guī)范的目的是什么？

*怎樣進(jìn)行規(guī)范？

規(guī)范是什么

規(guī)范：意指明文規(guī)定或約定成俗的標(biāo)準(zhǔn)。或是按照標(biāo)準(zhǔn)，規(guī)范的要求進(jìn)行操作，使某一行為或某一活動達(dá)到或是超越規(guī)定的標(biāo)準(zhǔn)。

也就是說 規(guī)范通過制定一些規(guī)定與約束 （如字體大小，界面尺寸，圖標(biāo)大小等） 使某一行為 （如項目開發(fā)，組件庫的組件等） 達(dá)到標(biāo)準(zhǔn) 。

制定規(guī)范的目的是 確保設(shè)計的統(tǒng)一性與合理性 。規(guī)范維護(hù)的是項目的統(tǒng)一，而不是設(shè)計師個人的設(shè)計。想一想在公司里，除了設(shè)計，前有產(chǎn)品經(jīng)理，后有程序員，還有用戶，你做的東西都是要交給他們的。產(chǎn)品經(jīng)理看你的設(shè)計是否展現(xiàn)了她的需求（設(shè)計內(nèi)容是否包括前期討論的內(nèi)容），程序員問你要各種切圖（圖標(biāo)、組件、布局、間距、字體大小等），用戶看你的設(shè)計（顏色，圖標(biāo)使用的大小范圍等），如果設(shè)計師完全沒有規(guī)范，全憑自己的“天馬行空”設(shè)計出來的東西，是會帶來很大的麻煩的，舉個簡單的例子，切圖規(guī)范，如果你的命名只有自己能看懂，那你就不要發(fā)給程序員了吧~因為發(fā)給他他也找不到哪個是哪個，這個圖標(biāo)應(yīng)該放在哪里。你所做的設(shè)計是為了公司項目服務(wù)的，是為了客戶服務(wù)的，所以你設(shè)計的東西就得滿足項目中其他職位（產(chǎn)品經(jīng)理、程序員）使用的需求，以及符合用戶的使用習(xí)慣。所以 規(guī)范是為了項目利益最大化，高效化而在團(tuán)隊中制定成的約定。

不同的規(guī)范雖然內(nèi)容不同但是包含的內(nèi)容其實是差不多的，通常包括布局，顏色，圖標(biāo)，組件，字體這幾個方面。接下來我們就來看看安卓中常見的設(shè)計規(guī)范，相信學(xué)習(xí)了之后，以后項目里的設(shè)計規(guī)范你都很清楚了，在設(shè)計中多加注意就行。一個產(chǎn)品設(shè)計完成之后，進(jìn)行設(shè)計規(guī)范制作也是對項目總結(jié)的一個方法。能注意規(guī)范且會制定規(guī)范。

在進(jìn)行app設(shè)計的時候，我們都會先建畫布大小，當(dāng)然是根據(jù)安卓界面尺寸來建立的。安卓手機(jī)那么多，不必每一個都記住。只要記住一兩個，懂得之間的換算關(guān)系就行了。

目前安卓端主流尺寸主要是@1.5x，@2x以及@3x，記住下面三個就夠用了。

@1.5x? ? 480x854 /540x960

@2x? ? ? 720x1280( 這是我最常用的界面尺寸)

@3x? ? ? 1080x1920

考考你，那@1x是多少呢？

除了知道界面尺寸外，還得知道狀態(tài)欄，導(dǎo)航欄，菜單欄的高度是多少，設(shè)計時建立好相應(yīng)的參考線。

建議取用 720 ×1280 這個尺寸，這個尺寸 720×1280中顯示完美，切圖后的圖片文件大小也適中，應(yīng)用的內(nèi)存消耗也不會過高。

對于圖標(biāo)其實在規(guī)范上面有很多要注意的，比如圖標(biāo)大小，圖標(biāo)設(shè)計，圖標(biāo)切圖規(guī)范，這里就重點講圖標(biāo)大小，之后會再講圖標(biāo)設(shè)計規(guī)范。

安卓系統(tǒng)中，中文使用的是谷歌思源，英文使用的是Roboto。思源字體，是一種非襯線字體，Adobe稱思源體為Source Han Sans,Google稱思源體為Noto Sans CJK. 思源體包含7個自重，也就是7中不同粗細(xì)的字體。

對于字體或許在設(shè)計過程中你會選用其他字體，但是需要注意你所用的字體是否利于用戶閱讀，是否舒服等問題。

對于字體的大小，在界面設(shè)計過程中，需要統(tǒng)一，比如所有正文是統(tǒng)一大小，所有標(biāo)題是統(tǒng)一大小。

不同風(fēng)格的字體大小，給人的感覺也是不同的，我們要學(xué)會靈活應(yīng)用。安卓文字單位是sp，以下文字是按照@1x倍率來規(guī)范的

在安卓中，標(biāo)注距離一般用dp，標(biāo)注文字用sp，而知之間的換算關(guān)系為：

1dp＝（屏幕ppi／160）px

不清楚單位的，可以去找上一篇文章了解px pt sp dp ppi。

Android開發(fā)需要的設(shè)計交付物至少要有：高保真UI圖，標(biāo)注，切圖

這是最后，也是最重要的一點，因為你所切的圖是要交到程序員的手里的，他寫的程序達(dá)不到你想要的效果可能就是他看不懂你給他的規(guī)范~

1.切圖尺寸必須為雙數(shù)

2.單像素的圖會出現(xiàn)邊緣模糊的情況

3.命名需要規(guī)范

基本上 App 的切圖可分為下面幾大類： 背景、按鈕、圖示、圖片、照片、TabBar icon 等。

一般命名規(guī)范可以為：

前綴：位置 組件 用途

后綴：狀態(tài)

如用btn-xxx.png 來命名 。App 里的按鈕擁有 4 種屬性，分別為一般normal、點擊highlight、不能點擊disabled、選中(selected)。

但不追求精致與完整度的話，只出一般屬性按鈕圖檔就可以了。如果是點擊（hightlight）狀態(tài)就可以命名為：btn- cancel-hightlight.png? 表示取消按鈕點擊時圖標(biāo)。

就算不是按照很嚴(yán)格的規(guī)范來命名，至少能讓程序員知道你這個圖標(biāo)是在那種情況下使用的圖標(biāo)，這就需要設(shè)計師跟程序員很好的溝通，方便整個團(tuán)隊的開發(fā)，提高團(tuán)隊的開發(fā)效率

移動端設(shè)計必學(xué)（Android設(shè)計規(guī)范）

◆組件最小間隔建議為8dp或10dp。排版/文字最小間隔建議為4dp?;

◆組件尺寸建議能被4整除;

◆組件尺寸建議為偶數(shù)(單數(shù)容易出現(xiàn)鋸齒)。

觸摸式UI組件通常使用48dp作為基準(zhǔn)單位。

◆48dp轉(zhuǎn)換為物理尺寸大約9mm左右。這是一個用戶手指能夠準(zhǔn)確舒服觸摸的最小寸。

◆48dp指組件最小實際尺寸也指最小觸摸區(qū)域

◆狀態(tài)欄: 24dp

◆操作欄: 44/48dp

側(cè)邊導(dǎo)航: 286 / 304dp

◆懸浮操作按鈕: 56dp

◆操作欄+TAB: 36+33dp / 44+ 40dp

◆底欄: 44/48dp

屏幕水平外邊距,尺寸建議為: 6dp、8dp、16dp。

操作欄/?App?Bar?:可放置工具欄,顯示應(yīng)用的LOGO、主標(biāo)題、導(dǎo)航、菜單以及功能等。

工具欄/Tool?Bar?:?Android5.0推出的Material?Design風(fēng)格導(dǎo)航控件,用于取代Action?Bar控件。相比Action?Bar?,?ToolBar在樣式、布局、運用上更靈活:?Actionbar一定要固定在Activity頂部?，ToolBar可以放到界面的任意位置;有更多的定制修改屬性:

側(cè)邊導(dǎo)航/?Side?Nav?:左側(cè)導(dǎo)航和右側(cè)導(dǎo)航可固定顯示,也可通過側(cè)滑顯示,覆蓋在應(yīng)用上。左側(cè)導(dǎo)航主要用于導(dǎo)航菜單或重要信息顯示,右側(cè)導(dǎo)航主要顯示二級擴(kuò)展內(nèi)容及相關(guān)信息。

底欄/?Bottom?Bar?:用于展示最核心、最重要的功能、導(dǎo)航,方便用戶快速

切換,也是用戶單手操作最舒適的區(qū)域。

◆Android程序開發(fā)統(tǒng)- 使用虛擬尺寸單位: dp/dip. sp

? dp/ dip :用于Android元素尺寸,如按鈕、導(dǎo)航尺寸。

◆sp :用于Android字體大小尺寸。

◆按Android開發(fā)原則,文字的尺寸一-律用sp單位,非文字的尺寸一律使用dp單位。

? 例如textSize= "14sp" 、layout height= "40dp" 。

◆dp= dip= sp

◆px與dp單位的轉(zhuǎn)換與ppi有直接關(guān)系

◆ppi指每英寸所擁有的像素數(shù)/每英寸像素。

屏幕擁有像素的總數(shù)以及屏幕水平(寬)和垂直(高)方向的像素數(shù)量。單位為像素。像素/px是組成屏幕圖像的最小點, -個相對大小單位,同屏幕里越小越密越清晰。

ppi指每英寸所擁有的像素數(shù)/每英寸像素。像素密度越高,代表屏幕圖像顯示越清晰。

dpi平面設(shè)計/印刷計數(shù)單位,指每英寸所能印刷出來的網(wǎng)點數(shù)。衡量打印機(jī)打印精度的主要參數(shù)之一，,值越大,表明打印機(jī)的打印精度越高。

用戶需求、體驗研究

信息架構(gòu)、操作流程、頁面交互設(shè)計產(chǎn)品原型圖輸出,推進(jìn)UI落地

交互說明文檔輸出,推進(jìn)前端落地產(chǎn)品可用性測試,優(yōu)化改進(jìn)

當(dāng)你拿的手機(jī)距離你約25-?30厘米,如果手機(jī)pp達(dá)到300以上,你的眼睛將無法分辨出像素點。這就是蘋果提出的視網(wǎng)膜屏幕。

顯示分辨率:屏幕擁有像素的總數(shù)以及屏幕水平(寬)和垂直(高)方向的像素數(shù)量。單位為像素。

ppi?:屏幕像素密度,每英寸所擁有的像素數(shù)/每英寸像素

ppi?=?dpi

◆逗號不排在最左側(cè)

◆左對齊優(yōu)先右對齊

標(biāo)題越重要、級別越大顏色越深、越突出

◆字體設(shè)計有層次,有主次

◆正文行寬建議不超過320dp

◆dp/pt與px的裝換與乃配

◆Android手機(jī)竝用結(jié)杓

◆Android基本布局入冂

◆Android文本排版入冂

android app界面設(shè)計規(guī)范(dpi,dp,px等)

PPI(Pixels per inch)：每英寸所擁有的像素數(shù)，即像素密度。

DPI(dots per inch)：即每英寸上，所能印刷的網(wǎng)點數(shù)，一般稱為像素密度。ppi計算公式：ppi = 屏幕對角線像素數(shù)/屏幕對角線英寸數(shù)，通過勾股定理計算屏幕對角線像素數(shù)。

Screen Size(屏幕尺寸)：手機(jī)屏幕尺寸大小，如3英寸、4英寸、4.3英寸、5.7英寸，指的是對角線的長度。

DIP（device independent pixel）：即dip/dp，設(shè)備獨立像素。 1px = 1dp density(由dpi決定)

Resolution(分辨率)：指手機(jī)屏幕垂直和水平方向上的像素個數(shù)。eg分辨率480 800，指該設(shè)備垂直方向有800個像素點，水平方向有480個像素點。

px(Pixel像素)：相同像素的ui，在不同分辨率的設(shè)備上效果不同。在小分辨率設(shè)備上會放大導(dǎo)致失真，大分辨率上被縮小。

Android Design里把主流設(shè)備的 dpi 歸成了四個檔次： 120 dpi、160 dpi、240 dpi、320 dpi ，具體見如下表格。

實際開發(fā)當(dāng)中，我們經(jīng)常需要對這幾個尺寸進(jìn)行相互轉(zhuǎn)換（比如先在某個分辨率下完成設(shè)計，然后縮放到其他尺寸微調(diào)后輸出），一般按照 dpi 之間的比例即 2:1.5:1:0.75 來給界面中的元素來進(jìn)行尺寸定義。

也就是說如果以 160 dpi 作為基準(zhǔn)的話，只要尺寸的 DP 是 4 的公倍數(shù)，XHDPI 下乘以 2，HDPI 下乘以 1.5，LDPI 下乘以 0.75 即可滿足所有尺寸下都是整數(shù) pixel 。但假設(shè)以 240 dpi 作為標(biāo)準(zhǔn)，那需要 DP 是 3 的公倍數(shù)，XHDPI 下乘以 1.333，MDPI 下乘以 0.666 ，LDPI 下除以 2。而以 LDPI 和 XHDPI 為基準(zhǔn)就更復(fù)雜了。同時第一款A(yù)ndroid設(shè)備（HTC的T-Mobile G1）是屬于160dpi的。鑒于以上各種原因， 標(biāo)準(zhǔn)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的設(shè)備為準(zhǔn)，該設(shè)備上1dp = 1px；如果屏幕密度大，1dip代表的px就多，比如在320dpi的屏幕上，1dip=2px(即1dp代表2個像素)。在app開發(fā)時，最好用dp來做界面的布局，以保證適配不同屏幕密度的手機(jī)。

dp和px的換算公式：

我的理解，該公式表示px的數(shù)值等于dp的數(shù)值*（設(shè)備dpi/160）

注意，px、dp是單位，但density沒單位。

applyDimension的源碼如下，可參考：

android的尺寸眾多，建議使用分辨率為 720x1280 的尺寸設(shè)計。這個尺寸 720x1280中顯示完美，在 1080x1920 中看起來也比較清晰；切圖后的圖片文件大小也適中，應(yīng)用的內(nèi)存消耗也不會過高。

app啟動圖標(biāo)為48*48dp，對應(yīng)各dpi設(shè)備，圖像資源像素如下：

| mdpi | hdpi | xhdpi | xxhdpi |

| ---:| ---: | ---:| ---:| ---:|

|48 48px|72 72px|94 96px|144px 144px|

操作欄圖標(biāo)為32*32dp，對應(yīng)各dpi設(shè)備，圖像資源像素如下：其中圖形區(qū)域尺寸是24*24dp，可參考平時ui切圖會有部分留白。

| mdpi | hdpi | xhdpi | xxhdpi |

| ---:| ---: | ---:| ---:| ---:|

|32 32px|48 48px|64 64px|96px 96px|

通知欄圖標(biāo)為24*24dp，對應(yīng)各dpi設(shè)備，圖標(biāo)像素如下：

| mdpi | hdpi | xhdpi | xxhdpi |

| ---:| ---: | ---:| ---:| ---:|

|24 24px|36 36px|48 48px|72px 72px|

某些場景需要用到小圖標(biāo)，大小應(yīng)當(dāng)是16*16dp，其中圖形區(qū)域尺寸12*12dp。

| mdpi | hdpi | xhdpi | xxhdpi |

| ---:| ---: | ---:| ---:| ---:|

|16 16px|24 24px|32 32px|48px 48px|

網(wǎng)頁題目：android設(shè)計規(guī)范,app安卓設(shè)計規(guī)范
文章分享：http://chinadenli.net/article1/dsiddod.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營銷型網(wǎng)站建設(shè)、網(wǎng)站設(shè)計公司、定制網(wǎng)站、用戶體驗、手機(jī)網(wǎng)站建設(shè)、靜態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)