安卓介面設計規範

2021-03-04 08:09:08 字數 4379 閱讀 4557

目前主流的安卓手機解析度有以下3種:

[, , , ]

[, ]

[, , , ]

小公尺 3和小公尺4 螢幕尺寸和解析度: 5英吋 1920×1080畫素

魅族mx2 螢幕尺寸和解析度: 4.4英吋 1280×800像

魅族mx3 螢幕尺寸和解析度: 5.1英吋 1800×1080畫素

htc one螢幕尺寸和解析度: 4.7英吋 1920×1080畫素

華為榮耀6螢幕尺寸和解析度: 5英吋 1920×1080畫素

華為p6螢幕尺寸和解析度: 4.7英吋 1280×720畫素

華為p7螢幕尺寸和解析度: 5英吋 1920×1080畫素

什麼是螢幕畫素密度?

螢幕畫素密度,即每英吋螢幕所擁有的畫素數,英文簡稱ppi。

在目前我們的安卓app設計專案當中,我們並不會去為每一種解析度去設計一套ui介面。這是一種追求完美和理想的狀態。小公司肯定是耗不起這樣的。

所以,這個時候我們需要學會變通。為了適應多解析度,

1:在標準基礎(xdpi:1280*720)上開始,然後放大或縮小,以適應到其他尺寸。

2:從裝置的最大尺寸(xxdpi:1920×1080)開始,然後縮小,並適應到所需的最小螢幕尺寸。

有些時候我們也會在實際開發過程中,android和ios的設計稿若無太大差異,也可從ios的解析度(960*640)開始,再調整設計稿的比例,適應其他解析度。但是這種方法在切圖的時候需要做一些**的調整。如果不是向量圖的元件需要重新按照1280*720的尺寸設計下。

我們必須知道的安卓設計常識:安卓4.0之後用的字型是roboto。中文字型:方正蘭亭黑體

今天跟大家講解的是在720*1280的基礎上的字型設計大小。

注釋最小字型: 12sp == 24px

文字字型14sp == 28px

文章標題或圖示名稱: 16sp == 32px

導航標題18sp == 36px

一般android設定長度和寬度多用dip,設定字型大小多用sp. 在螢幕密度為160,1dp=1px=1dip, 1pt = 160/72 sp 1pt = 1/72 英吋.當螢幕密度為240時,1dp=1dip=1.

5px.

安卓多解析度解決方案

android的多解析度,一向是設計師和開發者非常頭疼的事兒。儘管如此,對於多分辨造成的複雜問題,也是大家要優先解決的。android支援多種不同的dpi模式:

ldpi 、mdpi 、hdpi 、xhdpi 、xxhdpi 、***hdpi

注意,ppi、dpi 是密度單位,不是度量單位 :

* ppi (pixels per inch):影象解析度 (在影象中,每英吋所包含的畫素數目)

* dpi (dots per inch): 列印解析度 (每英吋所能列印的點數,即列印精度)

dpi主要應用於輸出,重點是列印裝置上;ppi對於設計師應該比較熟悉,photoshop畫布的解析度常設定為72畫素/英吋,這個單位其實就是ppi 。儘管概念不同,但是對於移動裝置的顯示屏,可以看作ppi=dpi 。

ppi的運算方式是:ppi = √(長度畫素數 + 寬度畫素數) / 螢幕對角線英吋數。即:長、寬各自平方之和的開方,再除以螢幕對角線的英吋數。

以iphone5為例,其ppi=√(1136px + 640px)/4 in=326ppi(視網膜retina屏)

對於android手機,乙個不確切的分法是,720 x 1280 的手機很可能接近 320 dpi (xhdpi模式),480 x 800 的手機很可能接近 240 dpi (hdpi模式),而320 x 480 的手機則很接近 160 dpi(mdpi模式)。

來自友盟指數2023年3月份的資料( 戳這裡看最新資料 ):

480 x 800的手機佔比最高為31.9%,720 x 1280的手機佔比為16.5%位居第二,而240 x 320的手機佔比最少為1.

0% 。xxdhpi模式的高解析度1080 x 1920手機佔比也越來越高,目前為6.1% 。

2、單位換算方法

android開發中,文字大小的單位是sp,非文字的尺寸單位用dp,但是我們在設計稿用的單位是px。這些單位如何換算,是設計師、開發者需要了解的關鍵。

* dp:density-independent pixels,以160ppi螢幕為標準,則1dp=1px。dp和px的換算公式 :

dp*ppi/160 = px。對於320ppi的螢幕,1dp x 320ppi/160 = 2px。

* sp:scale-independent pixels,它是安卓的字型單位,以160ppi螢幕為標準,當字型大小為 100%時, 1sp=1px。sp 與 px 的換算公式:

sp*ppi/160 = px。對於320ppi的螢幕,1sp x 320ppi/160 = 2px。

簡單理解的話,px(畫素)是我們ui設計師在ps裡使用的,同時也是手機螢幕上所顯示的,dp是開發寫layout的時候使用的尺寸單位。

為什麼要把sp和dp代替px? 原因是他們不會因為ppi的變化而變化,在相同物理尺寸和不同ppi下,他們呈現的高度大小是相同。也就是說更接近物理呈現,而px則不行。

根據單位換算方法,可總結出:

當執行在mdpi下時,1dp=1px :也就是說設計師在ps裡定義乙個item高48px,開發就會定義該item高48dp ;

當執行在hdpi模式下時,1dp=1.5px :也就是說設計師在ps裡定義乙個item高72px,開發就會定義該item高48dp ;

當執行在xhdpi模式下時,1dp=2px :也就是說設計師在ps裡定義乙個item高96px,開發就會定義該item高48dp ;

當你的app需要適配多個dpi模式的時候,請參考圖1的比例進行換算 。

3、設計稿基本元素的尺寸設定

為了適應多解析度的手機,理想的方式是為每種解析度做一套設計稿,包括所用到的icon、設計稿標註等。但在實際開發中,這種方法耗時耗力。所以通常會選擇折中的方法。

方法一: 在標準基礎上(比如xhdpi)開始,然後放大或縮小,以適應到其他尺寸。不足之處是,對於更高解析度的手機,圖示被放大後會導致質量不高。

方法二: 以最高解析度為基準設計,然後縮小適應到所需的小解析度上。缺點是,圖示等若都最大尺寸,載入時速度慢且耗費流量較多,對於小解析度的使用者也不夠好。

結合友盟的解析度佔比資料、也為了方便換算到android開發中的尺寸單位, 推薦設計稿的畫布尺寸選用 720x1280 ,解析度仍舊為72ppi(畫素/英吋) 。

在android規範中對於導航欄、工具欄等的尺寸沒有明確的規定。但根據48dp原則,以及一些主流的android應用的截圖分析,總結一下尺寸要求:

狀態列高度: 50 px

導航欄、操作欄高度: 96 px=48dp x 2

主選單欄高度: 96 px

內容區域高度: 1038 px (1280-50-96-96=1038)

android最近出的手機都幾乎去掉了實體鍵,把功能鍵移到了螢幕中,高度也和選單欄一樣為:96 px

4、圖示和字型大小(來自官方規範文件)

a、啟**標(home頁或app列表頁)

整體大小為48 x 48 dp

b、操作欄圖示,代表使用者在app中可以使用到的最重要的圖示

整體大小為32 x 32 dp ,圖形實際區域為 24 x 24 dp

c、小圖示/場景圖示,提供操作或特定專案的狀態。

比如gmail app的星型標記、一些內容展開收起用到的向下向上的圖示等。整體大小為16 x 16 dp ,圖形實際區域為 12 x 12 dp 。

d、通知圖示

如果app有通知,要提供乙個有新通知時顯示在狀態列的通知圖示。整體大小為24 x 24 dp ,圖形實際區域為 22 x 22 dp 。

注:android規範提供的尺寸單位是dp,若設計稿尺寸設為720 x 1280 ,圖示大小需在規範要求的尺寸數字上乘以2。比如操作欄圖示32 x 32 dp ,則設計稿上應該是64 x 64 px 。

e、字型大小

android規範中的要求如下:

前面提到android開發中的字型大小單位是sp,而換算關係是 sp*ppi/160 = px 。所以720 x 1280尺寸的設計稿上,字型大小可選擇為 24px 、28px 、32px 、36px ,主要根據文字的重要程度來選擇,特殊情況下也可能選擇更大或更小的字型。

f、其他尺寸要求

通常把48dp作為可觸控的ui元件的標準。

為什麼要用48dp呢?一般來說,48dp轉化為乙個物理尺寸約9公釐。通常建議目標大小為7-10公釐,以方便使用者手指能準確並且舒適觸控目標區域。

如果你設計的元素高和寬至少48dp,你就可以保證:

(1)觸控目標絕不會比建議的最低目標(7mm)小,無論在什麼螢幕上顯示。

(2)在整體資訊密度和觸控目標大小之間取得了乙個很好的平衡。

另外,每個ui元素之間的空白通常是8dp 。

人機互動介面設計規範

討論稿 1.必須在編碼之前完成,否則就成花架子了。2.gui規範不是一蹴而就,它和設計相互迭代,彼此補充,相互完善。3.gui規範的內容70 是通用原則,涉及產品圖形控制項的基本屬性和構建的基本引數和原則,30 是與專案或產品特點相適應的內容,這部分內容就是在設計過程中迭代產生。概述 目的 適用專案...

介面設計報告

版本歷史 目錄 0.文件介紹 4 0.1 文件目的 4 0.2 文件範圍 4 0.3 讀者物件 4 0.4 參考文獻 4 0.5 術語與縮寫解釋 4 1.應當遵循的介面設計規範 5 2.介面的關係圖和工作流程圖 5 3.主介面 5 4.子介面a 5 5.子介面b 5 6.美學設計 6 7.介面資源設...

使用者介面設計報告

版本歷史 目錄0.文件介紹 4 0.1 文件目的 4 0.2 文件範圍 4 0.3 讀者物件 4 0.4 參考文獻 4 0.5 術語與縮寫解釋 4 1.應當遵循的介面設計規範 5 2.介面的關係圖和工作流程圖 5 3.主介面 5 4.子介面a 5 5.子介面b 5 6.美學設計 6 7.介面資源設計...