一、android篇

1钝域、android分辨率

Android的多分辨率讽坏，一向是設(shè)計(jì)師和開發(fā)者非常頭疼的事兒。盡管如此例证，對(duì)于多分辨造成的復(fù)雜問(wèn)題路呜，也是大家要優(yōu)先解決的。Android支持多種不同的dpi模式：ldpi 织咧、mdpi 胀葱、hdpi 、xhdpi 笙蒙、xxhdpi 抵屿、xxxhdpi

注意，ppi捅位、dpi 是密度單位轧葛，不是度量單位 ：

• ppi (pixels per inch)：圖像分辨率 （在圖像中搂抒，每英寸所包含的像素?cái)?shù)目）

• dpi (dots per inch)： 打印分辨率 （每英寸所能打印的點(diǎn)數(shù)，即打印精度）

dpi主要應(yīng)用于輸出朝群，重點(diǎn)是打印設(shè)備上燕耿；ppi對(duì)于設(shè)計(jì)師應(yīng)該比較熟悉中符，photoshop畫布的分辨率常設(shè)置為72像素/英寸姜胖，這個(gè)單位其實(shí)就是ppi 。盡管概念不同淀散，但是對(duì)于移動(dòng)設(shè)備的顯示屏右莱，可以看作ppi=dpi 。

ppi的運(yùn)算方式是：PPI = √（長(zhǎng)度像素?cái)?shù)2 + 寬度像素?cái)?shù)2） / 屏幕對(duì)角線英寸數(shù)档插。即：長(zhǎng)慢蜓、寬各自平方之和的開方，再除以屏幕對(duì)角線的英寸數(shù)郭膛。

以iphone5為例晨抡，其ppi=√（1136px2 + 640px2）/4 in=326ppi（視網(wǎng)膜Retina屏）

對(duì)于android手機(jī)，一個(gè)不確切的分法是则剃，720 x 1280 的手機(jī)很可能接近 320 dpi （xhdpi模式）耘柱，480 x 800 的手機(jī)很可能接近 240 dpi （hdpi模式），而320 x 480 的手機(jī)則很接近 160 dpi（mdpi模式）棍现。

2调煎、單位換算方法

android開發(fā)中，文字大小的單位是sp己肮，非文字的尺寸單位用dp士袄，但是我們?cè)谠O(shè)計(jì)稿用的單位是px。這些單位如何換算谎僻，是設(shè)計(jì)師娄柳、開發(fā)者需要了解的關(guān)鍵。

• dp：Density-independent pixels艘绍，以160PPI屏幕為標(biāo)準(zhǔn)赤拒，則1dp=1px。dp和px的換算公式 ：dp*ppi/160 = px鞍盗。對(duì)于320ppi的屏幕需了，1dp x 320ppi/160 = 2px。

• sp：Scale-independent pixels般甲，它是安卓的字體單位肋乍，以160PPI屏幕為標(biāo)準(zhǔn)，當(dāng)字體大小為 100%時(shí)敷存， 1sp=1px墓造。sp 與 px 的換算公式：sp*ppi/160 = px堪伍。對(duì)于320ppi的屏幕，1sp x 320ppi/160 = 2px觅闽。

簡(jiǎn)單理解的話帝雇，px（像素）是我們UI設(shè)計(jì)師在PS里使用的，同時(shí)也是手機(jī)屏幕上所顯示的蛉拙，dp是開發(fā)寫layout的時(shí)候使用的尺寸單位尸闸。

為什么要把sp和dp代替px？原因是他們不會(huì)因?yàn)閜pi的變化而變化孕锄，在相同物理尺寸和不同ppi下吮廉，他們呈現(xiàn)的高度大小是相同。也就是說(shuō)更接近物理呈現(xiàn)畸肆，而px則不行宦芦。

根據(jù)單位換算方法，可總結(jié)出：

當(dāng)運(yùn)行在mdpi下時(shí)轴脐，1dp=1px ：也就是說(shuō)設(shè)計(jì)師在PS里定義一個(gè)item高48px调卑，開發(fā)就會(huì)定義該item高48dp ；

當(dāng)運(yùn)行在hdpi模式下時(shí)大咱，1dp=1.5px ：也就是說(shuō)設(shè)計(jì)師在PS里定義一個(gè)item高72px恬涧，開發(fā)就會(huì)定義該item高48dp ；

當(dāng)運(yùn)行在xhdpi模式下時(shí)徽级，1dp=2px ：也就是說(shuō)設(shè)計(jì)師在PS里定義一個(gè)item高96px气破，開發(fā)就會(huì)定義該item高48dp ；

當(dāng)你的app需要適配多個(gè)dpi模式的時(shí)候餐抢，請(qǐng)參考圖1的比例進(jìn)行換算 现使。

3、設(shè)計(jì)稿基本元素的尺寸設(shè)置

為了適應(yīng)多分辨率的手機(jī)旷痕，理想的方式是為每種分辨率做一套設(shè)計(jì)稿碳锈，包括所用到的icon、設(shè)計(jì)稿標(biāo)注等欺抗。但在實(shí)際開發(fā)中售碳，這種方法耗時(shí)耗力。所以通常會(huì)選擇折中的方法绞呈。

方法一：在標(biāo)準(zhǔn)基礎(chǔ)上（比如xhdpi）開始贸人，然后放大或縮小，以適應(yīng)到其他尺寸佃声。不足之處是艺智，對(duì)于更高分辨率的手機(jī)，圖標(biāo)被放大后會(huì)導(dǎo)致質(zhì)量不高圾亏。

方法二：以最高分辨率為基準(zhǔn)設(shè)計(jì)十拣，然后縮小適應(yīng)到所需的小分辨率上封拧。缺點(diǎn)是，圖標(biāo)等若都最大尺寸夭问，加載時(shí)速度慢且耗費(fèi)流量較多泽西，對(duì)于小分辨率的用戶也不夠好。

結(jié)合友盟的分辨率占比數(shù)據(jù)缰趋、也為了方便換算到android開發(fā)中的尺寸單位捧杉，推薦設(shè)計(jì)稿的畫布尺寸選用 720X1280 ，分辨率仍舊為72ppi（像素/英寸）埠胖。

在android規(guī)范中對(duì)于導(dǎo)航欄糠溜、工具欄等的尺寸沒有明確的規(guī)定。但根據(jù)48dp原則直撤，以及一些主流的android應(yīng)用的截圖分析，總結(jié)一下尺寸要求：

狀態(tài)欄高度：50 px

導(dǎo)航欄蜕着、操作欄高度：96 px=48dp x 2

主菜單欄高度：96 px

內(nèi)容區(qū)域高度：1038 px （1280-50-96-96=1038）

Android最近出的手機(jī)都幾乎去掉了實(shí)體鍵谋竖，把功能鍵移到了屏幕中，高度也和菜單欄一樣為：96 px

4承匣、圖標(biāo)和字體大斜统恕（來(lái)自官方規(guī)范文檔）

a、啟動(dòng)圖標(biāo)（home頁(yè)或app列表頁(yè)）

整體大小為48 x 48 dp

b韧骗、操作欄圖標(biāo)嘉抒，代表用戶在app中可以使用到的最重要的圖標(biāo)

整體大小為32 x 32 dp ，圖形實(shí)際區(qū)域?yàn)?24 x 24 dp

c袍暴、小圖標(biāo)/場(chǎng)景圖標(biāo)些侍，提供操作或特定項(xiàng)目的狀態(tài)。

比如gmail app的星型標(biāo)記政模、一些內(nèi)容展開收起用到的向下向上的圖標(biāo)等岗宣。整體大小為16 x 16 dp ，圖形實(shí)際區(qū)域?yàn)?12 x 12 dp 淋样。

d耗式、通知圖標(biāo)

如果app有通知，要提供一個(gè)有新通知時(shí)顯示在狀態(tài)欄的通知圖標(biāo)趁猴。整體大小為24 x 24 dp 刊咳，圖形實(shí)際區(qū)域?yàn)?22 x 22 dp 。

注：android規(guī)范提供的尺寸單位是dp儡司，若設(shè)計(jì)稿尺寸設(shè)為720 x 1280 娱挨，圖標(biāo)大小需在規(guī)范要求的尺寸數(shù)字上乘以2。比如操作欄圖標(biāo)32 x 32 dp 枫慷，則設(shè)計(jì)稿上應(yīng)該是64 x 64 px 让蕾。

e浪规、字體大小

Android規(guī)范中的要求如下：

前面提到Android開發(fā)中的字號(hào)單位是sp，而換算關(guān)系是 sp*ppi/160 = px 探孝。所以720 x 1280尺寸的設(shè)計(jì)稿上笋婿，字體大小可選擇為 24px 、28px 顿颅、32px 缸濒、36px ，主要根據(jù)文字的重要程度來(lái)選擇粱腻，特殊情況下也可能選擇更大或更小的字體庇配。

f、其他尺寸要求

通常把48dp作為可觸摸的UI元件的標(biāo)準(zhǔn)绍些。

為什么要用48dp呢捞慌？一般來(lái)說(shuō)，48dp轉(zhuǎn)化為一個(gè)物理尺寸約9毫米柬批。通常建議目標(biāo)大小為7-10毫米啸澡，以方便用戶手指能準(zhǔn)確并且舒適觸摸目標(biāo)區(qū)域。

如果你設(shè)計(jì)的元素高和寬至少48dp氮帐，你就可以保證：

（1）觸摸目標(biāo)絕不會(huì)比建議的最低目標(biāo)（7mm）小嗅虏，無(wú)論在什么屏幕上顯示。

（2）在整體信息密度和觸摸目標(biāo)大小之間取得了一個(gè)很好的平衡上沐。

另外皮服，每個(gè)UI元素之間的空白通常是8dp 。

二参咙、iOS篇

1龄广、分辨率

iPhone 界面尺寸：

iPad 界面尺寸：1024×768、2048×1536

（以上單位都是像素昂勒，至于分辨率一般網(wǎng)頁(yè)UI和移動(dòng)UI基本上都只要 72 ppi）

2蜀细、單位換算px、pt

這里需要先區(qū)分pt戈盈、px奠衔，pt(磅值)是物理長(zhǎng)度單位，指的是72分之一英寸塘娶。手機(jī)上看來(lái)同一大小的字磅值是一樣的归斤，但是換算成不同分辨率手機(jī)的字號(hào)px值不一樣。（px=pt*ppi/72）

iPhone在出retina屏(也就是4S)之前的屏幕像素是320x480px刁岸，屏幕密度是163ppi脏里，4S的屏幕像素是640x960px，屏幕密度是326ppi虹曙，翻了一倍迫横。iPhone5的ppi沒有變化番舆，兼容性方面要增加類似首屏畫面等程序上的判斷。

在iPhone界面上元素的定位矾踱、尺寸是通過(guò)一個(gè)單位point恨狈，而非px，屏幕上固定有320x480pt呛讲，retina屏兩倍的分辨率改變的只是pt和px之間的比例而已禾怠，這樣就能實(shí)現(xiàn)不改變程序，只上傳兩套圖片就兼容兩個(gè)分辨率贝搁。

****在設(shè)計(jì)的時(shí)候并不是每個(gè)尺寸都要做一套吗氏，尺寸按自己的手機(jī)尺寸來(lái)設(shè)計(jì)，比較方便預(yù)覽效果雷逆，一般用 640×960 或者 640×1136 的尺寸設(shè)計(jì)弦讽。其中設(shè)計(jì)稿的畫布分辨率設(shè)為默認(rèn)的72ppi（此時(shí)1px=1pt ），所以設(shè)計(jì)師可以統(tǒng)一采用px為單位关面。
開發(fā)拿到設(shè)計(jì)稿時(shí)入桂，將上面標(biāo)注的以px為單位的字號(hào)大小钧敞、圖像尺寸除以2，就是非retina屏上的pt值申屹，這樣在retina屏上也可以根據(jù)此pt值換算對(duì)應(yīng)的px大小蛮放，以確保不同的分辨率下有合適的效果缩抡。****

3、基本元素的尺寸設(shè)置

iPhone的APP界面一般由四個(gè)元素組成包颁，分別是：狀態(tài)欄瞻想、導(dǎo)航欄、主菜單欄以及中間的內(nèi)容區(qū)域娩嚼。

這里取用 640×960 的尺寸設(shè)計(jì)蘑险，那我們就說(shuō)說(shuō)在這個(gè)尺寸下這些元素的尺寸：

狀態(tài)欄：就是我們經(jīng)常說(shuō)的信號(hào)、運(yùn)營(yíng)商岳悟、電量等顯示手機(jī)狀態(tài)的區(qū)域佃迄，其高度為：40 px

導(dǎo)航欄：顯示當(dāng)前界面的名稱，包含相應(yīng)的功能或者頁(yè)面間跳轉(zhuǎn)的按鈕贵少，其高度為：88 px

主菜單欄：類似于頁(yè)面的主菜單呵俏，提供整個(gè)應(yīng)用的分類內(nèi)容的快速跳轉(zhuǎn)，其高度為：98 px

內(nèi)容區(qū)域：展示應(yīng)用提供的相應(yīng)內(nèi)容滔灶，整個(gè)應(yīng)用中布局變更最為頻繁的普碎，其高度為：734 px=960-40-88-98

以上尺寸適用于 iPhone 4、4S录平，iPhone5/5s 的 640×11136 的尺寸麻车，其實(shí)就是中間的內(nèi)容區(qū)域高度增加到：910 px缀皱，其他尺寸也同上。

4动猬、常用圖像啤斗、圖標(biāo)大小（來(lái)自官方規(guī)范文檔）

單位：像素

圖片描述

5枣察、字體大小

iOS交互設(shè)計(jì)規(guī)范文檔上争占，對(duì)字體大小沒有做嚴(yán)格的數(shù)值規(guī)定，只提供了一些指導(dǎo)原則：

單位：點(diǎn)pt

– 即便用戶選擇了最小文字大小序目，文字也不應(yīng)小于 22 點(diǎn)臂痕。作為對(duì)照，正文樣式在大字號(hào)下使用 34 點(diǎn)字體大小作為默認(rèn)文字大小設(shè)置猿涨。

– 通常來(lái)說(shuō)握童，每一檔文字大小設(shè)置的字體大小和行間距的差異是 2 點(diǎn)。例外情況是兩個(gè)標(biāo)題樣式叛赚，在最小澡绩、小和中等設(shè)置時(shí)都使用相同字體大小、行間距和字間距俺附。

– 在最小的三種文字大小中肥卡，字間距相對(duì)寬闊；在最大的三種文字大小中事镣，字間距相對(duì)緊密步鉴。

– 標(biāo)題和正文樣式使用一樣的字體大小。為了將其和正文樣式區(qū)分璃哟，標(biāo)題樣式使用加粗效果氛琢。

– 導(dǎo)航控制器中的文字使用和大號(hào)的正文樣式文字大小（明確來(lái)說(shuō)随闪，是 34 點(diǎn)）阳似。

– 文本通常使用常規(guī)體和中等大小，而不是用細(xì)體和粗體铐伴。

百度用戶體驗(yàn)做過(guò)的一個(gè)小調(diào)查：

單位：像素px

圖片描述

還有個(gè)方法就是找你覺得好的APP應(yīng)用撮奏，手機(jī)截圖后放進(jìn)PS自己對(duì)比調(diào)節(jié)字體大小。