移動應用界面設計的尺寸設置及規范


http://www.tuicool.com/articles/zIZBVj

一、android篇

1、android分辨率

Android的多分辨率,一向是設計師和開發者非常頭疼的事兒。盡管如此,對於多分辨造成的復雜問題,也是大家要優先解決的。Android支持多種不同的dpi模式:ldpi 、mdpi 、hdpi 、xhdpi 、xxhdpi 、xxxhdpi 
dpi
注意,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模式)。

來自友盟指數2014年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 
iconLoad

b、操作欄圖標,代表用戶在app中可以使用到的最重要的圖標 
整體大小為32 x 32 dp ,圖形實際區域為 24 x 24 dp 
iconBar

c、小圖標/場景圖標,提供操作或特定項目的狀態。 
比如gmail app的星型標記、一些內容展開收起用到的向下向上的圖標等。整體大小為16 x 16 dp ,圖形實際區域為 12 x 12 dp 。 
iconSmall

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

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

e、字體大小 
Android規范中的要求如下: 
androidFont

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

f、其他尺寸要求 
通常把48dp作為可觸摸的UI元件的標准。 
android48dp

為什么要用48dp呢?一般來說,48dp轉化為一個物理尺寸約9毫米。通常建議目標大小為7-10毫米,以方便用戶手指能准確並且舒適觸摸目標區域。 
如果你設計的元素高和寬至少48dp,你就可以保證: 
(1)觸摸目標絕不會比建議的最低目標(7mm)小,無論在什么屏幕上顯示。 
(2)在整體信息密度和觸摸目標大小之間取得了一個很好的平衡。 
另外,每個UI元素之間的空白通常是8dp 。

5、一點疑問供探討

在720 x 1280 px 的設計稿上,有兩個按鈕(比如登錄、注冊)並排一行放置,尺寸均為320 x 80 px ,換算為android開發單位就是 160 x 40 dp 。 
根據前面的計算方式,如果顯示在 480 x 800的手機上,反過來換算為px尺寸就是 240 x 60 px ,此時兩個按鈕排放在一行,剛好是480px=屏幕橫向尺寸,鋪滿了整行,顯然顯示效果並不合適。

如果遇到這種情況,如何做呢?咨詢android開發工程師,得到的答案是可能需要做自適應處理,不過目前他們都是寫固定的dp值。所以我想設計師是否也需要考慮——在基准分辨率下設置的尺寸換算在其他分辨率下,是否也能優雅顯示?


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM