成人亚洲综合,日韩高清一区二区三区五区七区,三级网址日本,亚洲激情成人,av成人在线电影,亚洲免费成人在线,超清首页国产亚洲丝袜

之前的知識科普說了好些基礎(chǔ)的概念，本篇將會結(jié)合之前我們講到的數(shù)個(gè)概念來談?wù)剤D為什么要這樣切，標(biāo)注為什么要這樣做。

iOS 的切圖與標(biāo)注

跑 iOS 的設(shè)備主要兩種，iPhone 和 iPad。（iPod touch就不討論了，基本上跟 iPhone 一樣。）

iPhones

iPhone 方面我們從非 retina 顯示屏的 iPhone3G/S 講到 iPhone 7/Plus。

○蘋果在推出 iPhone 4/S 的時(shí)候首次為自己的智能手機(jī)產(chǎn)品配備 retina 顯示屏。需要注意的是它的屏幕尺寸與 iPhone 3G/S 一樣，都是 3.5 寸，但分辨率卻整整提升了四倍，也就是說同樣大的屏幕塞進(jìn)去了四倍的像素，PPI 是前者的兩倍，達(dá)到了 326，視網(wǎng)膜屏第一次被用在 iPhone 之上。

○iPhone 5/S/C 的屏幕達(dá)到了 4 英寸。值得注意的是，iPhone 5/S/C 屏幕橫向還是與 iPhone 4/S 一樣保持有 640 顆像素，橫向物理尺寸也沒變，同樣都是 2.0 英寸，變的是縱向的尺寸。屏幕邊長了一點(diǎn)點(diǎn)，PPI 維持不變。

○iPhone 6/7（Plus）屏幕分別為 4.7 英寸和 5.5 英寸。前所未有的尺寸，前所未有的分大小屏，前所未有邏輯分辨率，同時(shí)也是前所未有的物理分辨率。非 Plus 機(jī)型維持了 326 PPI，而 Plus 則去到了 401 PPI。更大的屏幕，更高的分辨率，iOS的設(shè)計(jì)師也是從這個(gè)時(shí)候開始需要輸出 @3x 的切圖了。

關(guān)于 Plus 機(jī)型，不得不仔細(xì)說說它的一個(gè)小特點(diǎn)

說到在 iPhone 6/7 上，系統(tǒng)會根據(jù) 350*667pt 的邏輯畫布進(jìn)行一個(gè)二倍渲染，變成 750*1334 之后再將界面投射到屏幕上面去。Plus 機(jī)型也差不多，它的邏輯畫布的最佳大小是 414*736pt（由于與非 Plus 機(jī)型的邏輯分辨率并不太懸殊，所以平時(shí)我們只是用一倍畫稿進(jìn)行設(shè)計(jì)也沒有產(chǎn)生太大的問題，誤差將由程序員使用一些技術(shù)上的布局手段減?。?然后系統(tǒng)進(jìn)行了一次三倍的渲染變?yōu)?1242*2208px。但 Plus 機(jī)型的分辨率是 1080*1920px 的，邏輯畫布渲染出來的大小怎么跟這個(gè)不一樣，那還怎么準(zhǔn)確投射，充滿整個(gè)屏幕??！

在 Plus 機(jī)型上，渲染出來的 1242*2208px 會先降低采樣變成 1080*1920px 然后再投射到屏幕上面去。我們還是來看圖吧。

1080*1920px 相較于 1242*2208px 大約縮小了 15%，那么很多尺寸都會出現(xiàn)小數(shù)，比如說 131.3244px 這樣惡心數(shù)字，出現(xiàn)小數(shù)的話圖片的邊緣就會出現(xiàn)模糊的狀況，而 Plus 機(jī)型上幾乎所有圖片都不是整數(shù)的，但得益于高分辨率的 retina 顯示屏，我們的肉眼可能看不出來端倪（湊近一點(diǎn)看的話有可能能夠看得出來大家不妨試試）。絕大部分情況下 Plus 的降低采樣機(jī)制不會對我們的設(shè)計(jì)造成什么太過巨大的影響，記得輸出 @3X 圖即可，不過要說的是，越是細(xì)小的元素影響就會越大。

iPads

iPad 方面我們從非 retina 顯示屏的第一代 iPad 到想要代替電腦的 12.9寸的 iPad Pro 再到 iPad mini 1/2/3/4。

○蘋果在推出第二代 iPad 的時(shí)候?yàn)?iPad 配備上了 retina 顯示屏。iPad 2/Air/Air 2/Pro 都維持了 2048*1536 的分辨率，PPI 一直保持在 264。7.9英寸的 iPad 的屏幕一直維持了這樣的配置。

○說出來你可能不信，除了第一代的 iPad mini 是非 retina 顯示屏之外，其他（2 至 4 代）mini 的屏幕的分辨率都跟 7.9 英寸的 iPad 一模一樣，物理分辨率都是 2048*1536，邏輯分辨率都是 768*1024，而由于屏幕變成了 7.9 英寸，所以 PPI 去到了 326。

○12.9 英寸的 iPad Pro 配備的超大屏幕的物理分辨率為 2732*2048，邏輯分辨率為 1366*1023 ，而 PPI 則去到了 264。由于邏輯分辨率與其他機(jī)型實(shí)在太過懸殊，我們沒辦法還用跟普通 iPad 一樣的畫稿來做設(shè)計(jì)，是的老鐵，你最好重開一稿重新設(shè)計(jì)。

有些小伙伴可能會留意到，無論是 iPhone 還是 iPad,好幾代了屏幕的參數(shù)好像沒怎么變化過，PPI 不是越高越好嗎？蘋果是好久沒升級自己屏幕，一塊祖?zhèn)髌聊缓鲇葡M(fèi)者？不是的，因?yàn)槿搜蹖τ谙袼孛芏鹊囊髸鶕?jù)人眼距離屏幕的距離變化而變化，RMBP 的 PPI 是 109，被手機(jī)完爆，但是我們平時(shí)用起來還是覺得非常清晰銳利，因?yàn)槲覀冇秒娔X的時(shí)候眼睛距離屏幕會比手機(jī)遠(yuǎn)，不需要那么高的像素密度也可以消除顆粒感。相應(yīng)的使用距離配制相應(yīng)的 PPI，所謂夠用就好。過高的 PPI 并不會帶來多大的畫質(zhì)提升，反而會導(dǎo)致一連串不好的后果，加大處理器渲染負(fù)擔(dān)，加大電池負(fù)擔(dān)，不利于設(shè)計(jì)開發(fā)人員設(shè)計(jì)，屏幕的制造成本也會增加。早年安卓陣營出現(xiàn)了一些 2K 屏甚至 4K 屏的產(chǎn)品，現(xiàn)已銷聲匿跡，消費(fèi)者根本不需要這么高分辨率的屏幕。蘋果在相應(yīng)的設(shè)備（無論從電腦到智能手機(jī)再到智能手表）上維持一個(gè)穩(wěn)定的 PPI 是很明智的選擇，穩(wěn)定的屏幕參數(shù)非常非常有助于設(shè)計(jì)開發(fā)人員工作的開展，這種穩(wěn)定性對開發(fā)者造成的便利恐怕超過了所有人的想象的。

標(biāo)注與切圖——以 Chrome 瀏覽器為例

在蘋果尚未推出 Plus 機(jī)型的那段時(shí)間里設(shè)計(jì)師們一般都只需要輸出一倍圖和二倍圖。一倍圖針對的是沒有配備 retina 顯示屏的 iPhone 而二倍圖針對的是配備 retina 顯示屏的 iPhone。Plus 機(jī)型推出后就開始要輸出三倍圖了，且不配備 retina 顯示屏的 iPhone 已經(jīng)過于老舊，不再需要考慮。一般我們會在文件名后面加上 @2X 或 @3X 的后綴以標(biāo)明文件的尺寸，就如上圖所示，這是 iOS 的規(guī)范，還是值得準(zhǔn)守一波的。

至于 iPad 版本，規(guī)則也差不太多，只是 iPad 不需要三倍切圖。

總結(jié)

○@2X，@3X，相應(yīng)的素材請務(wù)必加上相應(yīng)的后綴。

○針對目前市面上的的屏幕尺寸而言，一倍圖已經(jīng)沒有必要再輸出了，而二倍、三倍圖則必須要輸出。

○二倍三倍圖的文件名必須是一樣的，不然會被開發(fā)砍死。

○以一倍畫稿做設(shè)計(jì)，以一倍畫稿輸出標(biāo)注文檔，最后輸出二倍、三倍圖。

○如無特殊情況，請確保文件都是 .png 格式。

○一倍畫稿輸出的標(biāo)注文檔的單位應(yīng)該為 pt，而不是 px。

Android 的切圖與標(biāo)注

MDPI, HDPI, XHDPI, XXHDPI 以及 XXXHDPI

大家都知道 Android 是一個(gè)開源系統(tǒng)，不像 iOS 只有蘋果自家的機(jī)器能跑，屏幕尺寸一直以來也比較穩(wěn)定，而運(yùn)行 Android 系統(tǒng)的設(shè)備的屏幕卻各式各樣非常跳脫，這也就是以往大家經(jīng)常說 Android 設(shè)備碎片化嚴(yán)重的原因之一。不過這種碎片化嚴(yán)重的情況來到今天已經(jīng)改善了非常之多，縱使 Google 對于 Andorid 開源的策略從來沒有變過，但 OEM 們開始不約而同地開始使用不那么“奇形怪狀”的屏幕了，且某些低分辨率的機(jī)型隨著時(shí)日變遷也已經(jīng)被淘汰殆盡了。倒是 iOS 在推出 Plus 機(jī)型之后 iOS 屏幕碎片化的問題也開始凸顯起來了，個(gè)人認(rèn)為目前兩大平臺的屏幕碎片化問題都存在且大家都差不多，大家在對 Android 產(chǎn)品進(jìn)行設(shè)計(jì)的時(shí)候大可不必那么擔(dān)心。

與 iOS 相似的是，設(shè)計(jì)師們同樣也是需要輸出不同倍率的切圖，只不過需要輸出的倍率更多罷了。程序員將會把所有不同倍率的切圖都裝在同一個(gè)安裝包里面，在運(yùn)行的時(shí)候系統(tǒng)會根據(jù)屏幕的分辨率來自動(dòng)選用正確倍率的切圖。

坦率地講，假如我們要糾結(jié)到每塊屏幕的邏輯分辨率的話，那么Android 陣營的碎片化真的是無比嚴(yán)重，但是我們知道，只要邏輯分辨率差的不太遠(yuǎn)的話，我們能夠用同一個(gè)稿來進(jìn)行設(shè)計(jì)、輸出切圖，其中的誤差必不可能避免但將會在一個(gè)可接受的范圍之內(nèi)。對于Android 產(chǎn)品來說，一般我們都使用 360*640px 作為一倍稿進(jìn)行設(shè)計(jì)。

目前為止還需要我們輸出切圖的分辨率有五種：代表 1 倍的 MDPI, 1.5 倍的 hdpi, 2 倍的 xhdpi, 3 倍的 xxhdpi 以及 4倍的 xxxhdpi（三星最近發(fā)布的 S8 就是這個(gè)倍率）。ldpi 和 tvdpi 以及可以不予考慮了。有一點(diǎn)需要提出的是，被淘汰的 tvdpi 這種分辨率目前被很廣泛地使用到了 運(yùn)行 Android 系統(tǒng)的可穿戴設(shè)備上，例如前陣子很火的 Moto 360 智能手表，假如要設(shè)計(jì)手表上面的產(chǎn)品的話那么就得輸出這個(gè)倍率的切圖。

下面給出一張圖，讓大家看看各個(gè)檔次的 DPI 的代表機(jī)型，某些機(jī)型年輕一點(diǎn)的小同學(xué)（例如我自己）可能連聽都沒過，大家看看就好，開拓開拓眼界，無需過分在意。

標(biāo)注與切圖——以 Chrome 瀏覽器為例

與 iOS 一樣，我還是建議大家使用一倍稿進(jìn)行設(shè)計(jì)，然后再輸出各種倍率的切圖就好，但是 Android 系統(tǒng)要求圖片資源的命名與管理圖片資源的方式是和 iOS 是完全不同的。

上篇我們簡單的介紹了下 iOS 的圖片資源的命名方式，很簡單，就是文件名加上 @2X、@3X 這樣的小標(biāo)記。然而來到了 Andorid 平臺我們就不這樣命名了。

以下這張長圖是 Android 工程文件管理圖片資源的方式，我們可以看到里面有從 drawable-hdpi 到 drawable-xxxhdpi 數(shù)個(gè)文件夾，你沒猜錯(cuò)，這些文件夾里面就放著設(shè)計(jì)師們精心設(shè)計(jì)出來的各種 .png 切圖。

Android 系統(tǒng)會自動(dòng)根據(jù)屏幕的屬性來選擇使用哪個(gè)文件夾里面的那套切圖。譬如說在新出的蓋樂世 S8 上面運(yùn)行的話，那么系統(tǒng)就會自動(dòng)選擇使用 drawable-xxxhdpi 文件夾里面的圖，新出的小米 6 的話，就會自動(dòng)選用 drawable-xxhdpi 文件夾里面的圖。

并且，我們輸出的圖片的名字全部都要是一樣的，安裝不同的倍率進(jìn)行導(dǎo)出，并且不能帶有后綴或其他標(biāo)記，同個(gè)圖切出來不同倍率五張資源，分別被放入了相應(yīng)的文件夾里面。使用神奇 Sketch Measure 進(jìn)行批量導(dǎo)出，程序員會跪著感謝你的。

看起來可能會是這樣的：

○drawable-mdpi/[文件名].png

○drawable-xhdpi/[文件名].png

○drawable-xxhdpi/[文件名].png

○drawable-xxxhdpi/[文件名].png

以下拿運(yùn)行于 Android 平板 Nexus9 上的 Chrome 瀏覽器作為例子。Chrome 的安裝包里面帶有了這五種倍率的切圖，然而運(yùn)行在 Nexus9 這臺平板電腦之上的時(shí)候，它選用了 xhdpi 這一檔分辨率的切圖來對自己進(jìn)行適配。

總結(jié)

○說是說有七種分辨率的圖要切，但是就目前市面上的設(shè)備來講你只要關(guān)注 mdpi、hdpi、xhdpi、xxhdpi、 xxxhdpi 這五種已經(jīng)夠了。如針對可穿戴設(shè)備的話，那可能會用到 tvdpi。

○360*640px 作為一倍稿進(jìn)行設(shè)計(jì)。

○做標(biāo)注時(shí)使用 dp 作為單位（iOS 使用的是 pt，但實(shí)際上差不多一個(gè)意思）

○輸出 .png 格式的圖片資源。

○記住命名規(guī)則，同個(gè)圖片資源的各個(gè)倍率的文件名都是一樣。

-end-