這里給出一些建議，希望幫助到大家，如果你有其他好的建議，也希望能分享出來，歡迎討論。

使用邏輯分辨率

設(shè)計(jì)稿使用邏輯分辨率是是很重要的一點(diǎn)。推薦邏輯分辨率并不是因?yàn)槲易鳛橐粋€(gè)開發(fā)者懶得進(jìn)行單位轉(zhuǎn)換，而是Android和iOS在進(jìn)行UI布局時(shí)都是使用邏輯像素為單位，使用邏輯像素作為設(shè)計(jì)稿的單位除了上面說的減少單位轉(zhuǎn)換，還可以減少很多不必要的麻煩。

1. 使用像素為單位，設(shè)計(jì)師可能輕松設(shè)置出13px這樣的尺寸。這種尺寸在多個(gè)分辨率之間轉(zhuǎn)換和縮放時(shí)，就會(huì)在個(gè)別屏幕上出現(xiàn)“半像素”。素質(zhì)好的設(shè)備，會(huì)讓邊緣看起來發(fā)“虛”，素質(zhì)不好的屏幕，就可能出現(xiàn)“彩邊”。然后，你再想想一下線條充滿半像素的圖標(biāo)……而使用邏輯分辨率就幾乎不會(huì)有這個(gè)問題，大部分屏幕的邏輯像素密度都是整數(shù)，對邏輯像素為單位的尺寸放大渲染時(shí)，同樣總能得到整數(shù)。
2. 像素對齊切圖。如果使用邏輯分辨率，對于圖標(biāo)的像素對齊，只需要考慮單像素對齊即可；如果以某個(gè)特定的屏幕像素分辨率進(jìn)行設(shè)計(jì)，很容易出現(xiàn)難以進(jìn)行像素對齊的圖標(biāo)。應(yīng)用開發(fā)中，一般會(huì)有一個(gè)規(guī)范的圖標(biāo)尺寸，就像一個(gè)邊界，比如14或16，這樣能保證所有圖標(biāo)都能看起來“重量相同”；而且為了防止縮放出現(xiàn)虛邊，一般都是偶數(shù)。還拿剛才的尺寸舉例，如果設(shè)計(jì)稿尺寸為iPhone6的分辨率，要切出一個(gè)13px的圖標(biāo)，就很尷尬了，這里可以將圖標(biāo)縮放到偶數(shù)，再進(jìn)行切圖（我平時(shí)就是這么干的）。
3. 更麻煩的問題是如果設(shè)計(jì)稿不使用甚至不考慮邏輯像素密度，會(huì)出現(xiàn)下面的情況：一組線框風(fēng)格的圖標(biāo)，在邏輯像素密度為2的設(shè)計(jì)稿上，描邊寬度為2，在邏輯像素密度為3的設(shè)計(jì)稿上，描邊寬度也為2，這就導(dǎo)致沖突——同一組圖標(biāo)，不同的圖標(biāo)描邊寬度不同（視覺重量不同）。很可能在你切一組圖標(biāo)到一半的時(shí)候，發(fā)現(xiàn)寬度不對，之前切的圖全都要重新來過，甚至重新放到項(xiàng)目里。

給設(shè)計(jì)師的建議：

1. 使用邏輯分辨率作為設(shè)計(jì)稿畫布尺寸。比如375×667，這是iPhone 6的邏輯分辨率。

2. 規(guī)范圖標(biāo)尺寸，可以參考一些UI模板，比如Sketch內(nèi)置的Material Design模板，其中對于圖標(biāo)會(huì)有Symbol的處理。不僅切圖方便，設(shè)計(jì)時(shí)也可以方便使用外邊框進(jìn)行對齊，進(jìn)行規(guī)范布局。

   material_design_icon

3. 盡量不在布局中使用px單位，針對特殊布局元素，需要使用1px或者2px的地方，比如極細(xì)的分割線，要進(jìn)行標(biāo)注。

給開發(fā)者的建議：

1. 使用dp作為單位。
2. 規(guī)范切圖，對可避免的半像素要及時(shí)反饋給設(shè)計(jì)師重繪或者微調(diào)后切圖。
3. 如果Android開發(fā)者拿到的是iOS的設(shè)計(jì)稿（我知道這個(gè)情況實(shí)在太普遍了），要知道你要針對的屏幕和設(shè)計(jì)稿并不相同。舉個(gè)例子，你拿到了iPhone6的時(shí)間稿，其中的內(nèi)容區(qū)域距離邊框12dp，如果在Android上也是照搬尺寸，距邊框16dp，那么最終的還原質(zhì)量是不會(huì)太好的，假設(shè)16dp在iPhone6上的物理尺寸是x inch。拿Nexus5舉例，物理尺寸是(375 / 360) / (4.7 / 5.0) x ≈ 1.1x，也就是增大了10%。簡單說就是近似物理尺寸的Android設(shè)備屏幕普遍會(huì)“放大”iPhone設(shè)計(jì)稿的尺寸，所以對于“邊距/間隔”可以適當(dāng)縮小，比如：12dp可以使用10dp/8dp替代，以便保證更大的內(nèi)容顯示區(qū)域。

響應(yīng)可變屏幕

“響應(yīng)可變屏幕”是我想到的一個(gè)概念，是說不管是設(shè)計(jì)還是編碼階段，要有一個(gè)意識(shí)，屏幕的尺寸是會(huì)變的：可能等比例變大變小，也可能高度或?qū)挾葐为?dú)變化。這其實(shí)是有意識(shí)針對多分辨率屏幕進(jìn)行布局的形象說法。

屏幕分辨率變化就會(huì)導(dǎo)致界面布局變化。要應(yīng)對這種變化，就要讓界面上的元素根據(jù)屏幕變化多少進(jìn)行特定的響應(yīng)。有點(diǎn)類似Web開發(fā)中的響應(yīng)式設(shè)計(jì)。

layout

當(dāng)屏幕從iPhone6變成iPhone6plus的尺寸，第一種響應(yīng)方式就是不合理的，第二種方式就是合理的。各自的邏輯大家可以猜一下。

就像文章開頭的例子一樣，開發(fā)者對設(shè)計(jì)師意圖的正確理解是好的屏幕適配的重要原因。對此，我的建議是這樣的：

1. 設(shè)計(jì)師和開發(fā)者都要有響應(yīng)可變屏幕的意識(shí)，開發(fā)者要站在設(shè)計(jì)師的立場去思考對方是怎么考慮屏幕變化時(shí)的響應(yīng)的；設(shè)計(jì)師在解釋設(shè)計(jì)稿時(shí)，也可以有意識(shí)的針對不容易想到的地方多做說明。
2. 盡量少的使用不能拉伸和擴(kuò)展的界面，有意識(shí)的放置可變尺寸元素?？梢杂^察下iOS和Android的內(nèi)置應(yīng)用，幾乎所有App的所有界面上，都有可變尺寸元素的存在，比如一個(gè)可以滑動(dòng)的列表或者可以伸縮的內(nèi)容，甚至整個(gè)頁面支持滾動(dòng)。在考慮屏幕適配時(shí)，加入可變尺寸元素是性價(jià)比最高的布局方法。
3. 平時(shí)多觀察其他App的處理方式。目前市場上成熟的App非常多，使用其他App時(shí)也可以思考下他們的界面是怎么做適配的，可以使用開發(fā)機(jī)或者模擬器在不同屏幕上檢驗(yàn)自己的想法。

使用Sketch

Sketch非常適合移動(dòng)UI的設(shè)計(jì)工作，不管是設(shè)計(jì)師和開發(fā)者，掌握Sketch的使用都是一個(gè)加分項(xiàng)。PS的領(lǐng)域是圖像處理，是duang_duangduang~加特效，甚至是藝術(shù)創(chuàng)作；相比而言，Sketch在最初就是為了UI設(shè)計(jì)服務(wù)的（確切的說是為屏幕顯示內(nèi)容的設(shè)計(jì)服務(wù)的）。

• 更輕量、更快。矢量支持、像素預(yù)覽。樣式支持。新版還原生支持了類似Autolayout的布局。導(dǎo)出功能、實(shí)時(shí)預(yù)覽功能……
• 豐富的插件。推薦個(gè)：CraftManager，幫你填充占位內(nèi)容的工具。
• ……

簡單的描述Sketch的使用體驗(yàn)，不僅僅是所見即所得，更像是直接在手機(jī)或者瀏覽器中設(shè)計(jì)。僅作為一個(gè)開發(fā)者，我就不多說了，大家感興趣就去體驗(yàn)下吧。