屏幕適配是一個老生常談的問題了，我用這三篇博客和大家討論點屏幕適配相關(guān)的干貨。
- 01 屏幕適配和邏輯分辨率
- 02 Android邏輯像素刨根問底
- 03 幾點建議
“如果方向錯了，走得越遠(yuǎn)，偏離目標(biāo)越遠(yuǎn)?！?/strong>對于屏幕適配，設(shè)計稿就是“目標(biāo)”，開發(fā)者對于設(shè)計稿的理解就是“方向”。很多適配糟糕的界面并不源于“糟糕的設(shè)計”或者“糟糕的實現(xiàn)”，而是因為設(shè)計師設(shè)計出了不可適配的界面或者開發(fā)者沒有理解適配意圖。
這里給出一些建議，希望幫助到大家，如果你有其他好的建議，也希望能分享出來，歡迎討論。
使用邏輯分辨率
設(shè)計稿使用邏輯分辨率是是很重要的一點。推薦邏輯分辨率并不是因為我作為一個開發(fā)者懶得進(jìn)行單位轉(zhuǎn)換，而是Android和iOS在進(jìn)行UI布局時都是使用邏輯像素為單位，使用邏輯像素作為設(shè)計稿的單位除了上面說的減少單位轉(zhuǎn)換，還可以減少很多不必要的麻煩。
- 使用像素為單位，設(shè)計師可能輕松設(shè)置出13px這樣的尺寸。這種尺寸在多個分辨率之間轉(zhuǎn)換和縮放時，就會在個別屏幕上出現(xiàn)“半像素”。素質(zhì)好的設(shè)備，會讓邊緣看起來發(fā)“虛”，素質(zhì)不好的屏幕，就可能出現(xiàn)“彩邊”。然后，你再想想一下線條充滿半像素的圖標(biāo)……而使用邏輯分辨率就幾乎不會有這個問題，大部分屏幕的邏輯像素密度都是整數(shù)，對邏輯像素為單位的尺寸放大渲染時，同樣總能得到整數(shù)。
- 像素對齊切圖。如果使用邏輯分辨率，對于圖標(biāo)的像素對齊，只需要考慮單像素對齊即可；如果以某個特定的屏幕像素分辨率進(jìn)行設(shè)計，很容易出現(xiàn)難以進(jìn)行像素對齊的圖標(biāo)。應(yīng)用開發(fā)中，一般會有一個規(guī)范的圖標(biāo)尺寸，就像一個邊界，比如14或16，這樣能保證所有圖標(biāo)都能看起來“重量相同”；而且為了防止縮放出現(xiàn)虛邊，一般都是偶數(shù)。還拿剛才的尺寸舉例，如果設(shè)計稿尺寸為iPhone6的分辨率，要切出一個13px的圖標(biāo)，就很尷尬了，這里可以將圖標(biāo)縮放到偶數(shù)，再進(jìn)行切圖（我平時就是這么干的）。
- 更麻煩的問題是如果設(shè)計稿不使用甚至不考慮邏輯像素密度，會出現(xiàn)下面的情況：一組線框風(fēng)格的圖標(biāo)，在邏輯像素密度為2的設(shè)計稿上，描邊寬度為2，在邏輯像素密度為3的設(shè)計稿上，描邊寬度也為2，這就導(dǎo)致沖突——同一組圖標(biāo)，不同的圖標(biāo)描邊寬度不同（視覺重量不同）。很可能在你切一組圖標(biāo)到一半的時候，發(fā)現(xiàn)寬度不對，之前切的圖全都要重新來過，甚至重新放到項目里。
給設(shè)計師的建議：
使用邏輯分辨率作為設(shè)計稿畫布尺寸。比如375×667，這是iPhone 6的邏輯分辨率。
-
規(guī)范圖標(biāo)尺寸，可以參考一些UI模板，比如Sketch內(nèi)置的Material Design模板，其中對于圖標(biāo)會有Symbol的處理。不僅切圖方便，設(shè)計時也可以方便使用外邊框進(jìn)行對齊，進(jìn)行規(guī)范布局。
material_design_icon 盡量不在布局中使用px單位，針對特殊布局元素，需要使用1px或者2px的地方，比如極細(xì)的分割線，要進(jìn)行標(biāo)注。
給開發(fā)者的建議：
- 使用dp作為單位。
- 規(guī)范切圖，對可避免的半像素要及時反饋給設(shè)計師重繪或者微調(diào)后切圖。
- 如果Android開發(fā)者拿到的是iOS的設(shè)計稿（我知道這個情況實在太普遍了），要知道你要針對的屏幕和設(shè)計稿并不相同。舉個例子，你拿到了iPhone6的時間稿，其中的內(nèi)容區(qū)域距離邊框12dp，如果在Android上也是照搬尺寸，距邊框16dp，那么最終的還原質(zhì)量是不會太好的，假設(shè)16dp在iPhone6上的物理尺寸是x inch。拿Nexus5舉例，物理尺寸是(375 / 360) / (4.7 / 5.0) x ≈ 1.1x，也就是增大了10%。簡單說就是近似物理尺寸的Android設(shè)備屏幕普遍會“放大”iPhone設(shè)計稿的尺寸，所以對于“邊距/間隔”可以適當(dāng)縮小，比如：12dp可以使用10dp/8dp替代，以便保證更大的內(nèi)容顯示區(qū)域。
響應(yīng)可變屏幕
“響應(yīng)可變屏幕”是我想到的一個概念，是說不管是設(shè)計還是編碼階段，要有一個意識，屏幕的尺寸是會變的：可能等比例變大變小，也可能高度或?qū)挾葐为氉兓?/strong>。這其實是有意識針對多分辨率屏幕進(jìn)行布局的形象說法。
屏幕分辨率變化就會導(dǎo)致界面布局變化。要應(yīng)對這種變化，就要讓界面上的元素根據(jù)屏幕變化多少進(jìn)行特定的響應(yīng)。有點類似Web開發(fā)中的響應(yīng)式設(shè)計。
舉個例子，如下圖：
當(dāng)屏幕從iPhone6變成iPhone6plus的尺寸，第一種響應(yīng)方式就是不合理的，第二種方式就是合理的。各自的邏輯大家可以猜一下。
就像文章開頭的例子一樣，開發(fā)者對設(shè)計師意圖的正確理解是好的屏幕適配的重要原因。對此，我的建議是這樣的：
- 設(shè)計師和開發(fā)者都要有響應(yīng)可變屏幕的意識，開發(fā)者要站在設(shè)計師的立場去思考對方是怎么考慮屏幕變化時的響應(yīng)的；設(shè)計師在解釋設(shè)計稿時，也可以有意識的針對不容易想到的地方多做說明。
- 盡量少的使用不能拉伸和擴展的界面，有意識的放置可變尺寸元素?？梢杂^察下iOS和Android的內(nèi)置應(yīng)用，幾乎所有App的所有界面上，都有可變尺寸元素的存在，比如一個可以滑動的列表或者可以伸縮的內(nèi)容，甚至整個頁面支持滾動。在考慮屏幕適配時，加入可變尺寸元素是性價比最高的布局方法。
- 平時多觀察其他App的處理方式。目前市場上成熟的App非常多，使用其他App時也可以思考下他們的界面是怎么做適配的，可以使用開發(fā)機或者模擬器在不同屏幕上檢驗自己的想法。
使用Sketch
Sketch非常適合移動UI的設(shè)計工作，不管是設(shè)計師和開發(fā)者，掌握Sketch的使用都是一個加分項。PS的領(lǐng)域是圖像處理，是duangduangduang~加特效，甚至是藝術(shù)創(chuàng)作；相比而言，Sketch在最初就是為了UI設(shè)計服務(wù)的（確切的說是為屏幕顯示內(nèi)容的設(shè)計服務(wù)的）。
- 更輕量、更快。矢量支持、像素預(yù)覽。樣式支持。新版還原生支持了類似Autolayout的布局。導(dǎo)出功能、實時預(yù)覽功能……
- 豐富的插件。推薦個：CraftManager，幫你填充占位內(nèi)容的工具。
- ……
簡單的描述Sketch的使用體驗，不僅僅是所見即所得，更像是直接在手機或者瀏覽器中設(shè)計。僅作為一個開發(fā)者，我就不多說了，大家感興趣就去體驗下吧。
