相信很多人跟我一樣一直在糾結(jié)到底用一倍圖做UI設(shè)計(jì)還是二倍圖？國(guó)外的設(shè)計(jì)師喜歡用一倍，國(guó)內(nèi)的設(shè)計(jì)師比較多用二倍，實(shí)際上兩種選擇都有自己的好處，今天就打算給大家拋磚引玉一下。
375x667px ：一倍圖（@1x）；750x1334px：二倍圖（@2x）;
1.PS和Sketch的差別
PS是光柵圖像( Raster Image )（光柵圖也叫做位圖、點(diǎn)陣圖、像素圖 ）。所以Photoshop十分依賴DPI，AI和Photoshop不同的是，它是獨(dú)立于DPI的，因?yàn)樗蕾囀噶繄D。與光柵圖相反，圖像生成采用矢量圖，依靠數(shù)學(xué)公式計(jì)算，以編程方式重新調(diào)節(jié)大小并且不會(huì)損失圖片質(zhì)量。
Sketch 是一款矢量繪圖應(yīng)用，這意味著你在調(diào)整形狀的時(shí)候一定程度上可任意縮放。
Sketch官方給出默認(rèn)畫板尺寸是一倍圖尺寸，PS給出的是二倍圖尺寸，原理上面已經(jīng)簡(jiǎn)單講解過。所以如果做iOS 的UI設(shè)計(jì)的時(shí)候，PS一般用二倍圖來設(shè)計(jì)（750x1334px），Sketch可以選擇一倍圖（375x667px）或二倍圖（750x1334px）來設(shè)計(jì)。
2.@1x設(shè)計(jì)的理由
Medium上有篇文章專門講述了用@1x設(shè)計(jì)的理由，我就吸取其精華，然后結(jié)合實(shí)際情況給大家講解一下
1) ：少量數(shù)學(xué)計(jì)算
相對(duì)來說可以減少一定的數(shù)學(xué)計(jì)算，如果@2x設(shè)計(jì)時(shí)轉(zhuǎn)換@3x需要乘以1.5，相對(duì)來說轉(zhuǎn)換會(huì)比較麻煩。但是@1x設(shè)計(jì)稿如果要轉(zhuǎn)換只要相應(yīng)的乘以2和3即可得到對(duì)應(yīng)的@2x和@3x。
2) ：安卓和iOS共用一套
iOS 設(shè)計(jì)尺寸375x667px，安卓360x640px；安卓和iOS可以共用字體、圖標(biāo)和間距。可以更加方便里做好統(tǒng)一的設(shè)計(jì)規(guī)范。
3) ：快速導(dǎo)出
sketch42版本可以在Prefences—Presets里面設(shè)置好預(yù)定的導(dǎo)出尺寸，快速導(dǎo)出的優(yōu)勢(shì)其實(shí)已經(jīng)相對(duì)來說不復(fù)存在了，但是一倍圖導(dǎo)出相對(duì)于二倍圖導(dǎo)出比較直觀，3x的后綴@3x，2x的后綴@2x，一一對(duì)應(yīng)，不容易搞錯(cuò)。而且當(dāng)你點(diǎn)擊Export的右上角“+”的時(shí)候，默認(rèn)都是整數(shù)倍數(shù)導(dǎo)出，導(dǎo)出仍然更加快速便捷。
如果你是二倍圖做設(shè)計(jì)，可以設(shè)置成如下圖
4) ：與開發(fā)溝通無礙
Zeplin和Sketch Measure是兩款優(yōu)秀的標(biāo)注插件，都可以設(shè)置當(dāng)前設(shè)計(jì)稿的Density（分辨率），所以其實(shí)一倍圖和二倍圖并沒有太大的區(qū)別，唯一要注意開發(fā)視角看到的一定是轉(zhuǎn)換成一倍圖的標(biāo)注。
舉個(gè)例子：如果退出按鈕高度：375x44px（@1x）,750x88px（@2x)，開發(fā)看到的都是如下的標(biāo)注，所以二倍圖設(shè)計(jì)稿的童鞋需要在跟開發(fā)交流的過程中要心里默默的除以2.
5) ：圖片尺寸和文件更小
如果用一倍圖的時(shí)候，設(shè)計(jì)稿中難免會(huì)有需要填充圖片的地方，所以一倍圖的圖片所需尺寸必然會(huì)比二倍圖小很多，不提倡用剪切蒙版的方式來放置圖片（除非你對(duì)圖片的呈現(xiàn)視角有很強(qiáng)的需求），一般可以通過填充來放置圖片，可以讓圖層更加干凈簡(jiǎn)潔。二倍圖設(shè)計(jì)的童鞋可以通過File—Reduce File Size或者裁切圖片來縮小圖片大小來達(dá)到減少文件大小。文件大了以后，尤其圖片很多的時(shí)候，會(huì)占用很多內(nèi)存，導(dǎo)致卡頓。一倍圖設(shè)計(jì)稿導(dǎo)出二倍圖的時(shí)候注意圖片有模糊的可能。
6) ：圖標(biāo)尺寸、圖片和間距尺寸更加自由
二倍圖設(shè)計(jì)時(shí)，圖標(biāo)尺寸必須為偶數(shù)，這樣才能保證@3x也是整數(shù)。圖片尺寸可以為奇數(shù)只要被2除盡即可，不一定要偶數(shù)。
例如，圖標(biāo)：image@2x.png（40x40px）image@3x.png（60x60px）
一倍圖設(shè)計(jì)時(shí)，圖標(biāo)尺寸可以為奇數(shù)，間距可以不是整數(shù)。（小數(shù)位都是0.5），但是盡量都是整數(shù)比較好。
例如，圖標(biāo)：image.png（15x15px），圖片：170.5x170.5px；
7) ：更適合國(guó)際化趨勢(shì)
國(guó)外設(shè)計(jì)師的設(shè)計(jì)稿、平臺(tái)設(shè)計(jì)規(guī)范以及大部分源文件素材用一倍圖來做的居多，Sketch自帶的模板都是一倍圖設(shè)計(jì)的，調(diào)用iOS和Android的官方控件相對(duì)來說會(huì)快很多，省去了縮放的麻煩。而且不管Apple和Google引入新的屏幕密度都不需要你重新轉(zhuǎn)換。
8) ：更省空間
一倍圖時(shí)，一個(gè)Page頁可以放置更多的畫板，但是二倍圖設(shè)計(jì)時(shí)，放置同樣數(shù)量的畫板會(huì)顯得比較臃腫。越多的畫板在同一個(gè)Page頁可以更加方便的設(shè)計(jì)師管理頁面，保證設(shè)計(jì)規(guī)范執(zhí)行更加到位。
9) ：安慰劑效應(yīng)
二倍圖設(shè)計(jì)時(shí)容易讓設(shè)計(jì)師誤以為二倍圖會(huì)提供更多的空間來填滿元素，這樣可能會(huì)導(dǎo)致點(diǎn)擊目標(biāo)區(qū)域變小，字體變小最終導(dǎo)致可讀性變差。
10) ：跨平臺(tái)更加方便
使用一倍圖導(dǎo)入到目前主流的可交互原型軟件（Origami、Flinto、Principle、Form等）內(nèi)制作可交互原型會(huì)有更好的體驗(yàn)。
2.@1x和@2x對(duì)比
二倍圖設(shè)計(jì)默認(rèn)導(dǎo)出的圖片是 2x 高清的，可直接使用。
二倍圖導(dǎo)出時(shí)省去了點(diǎn)擊+號(hào) 再選 2x ，操作方便。
二倍圖做設(shè)計(jì)時(shí)，如果有iPhone 6 可以截優(yōu)秀APP的圖直接PS量取尺寸而不用除以2。
用一倍圖的設(shè)計(jì)稿尺寸，1px的線繪制會(huì)用到0.5px，會(huì)出現(xiàn)間距對(duì)齊的問題！
用一倍圖的設(shè)計(jì)稿尺寸，如果列表高度為奇數(shù)時(shí)，對(duì)齊后會(huì)出現(xiàn)討人的小數(shù)點(diǎn)！
總結(jié)
其實(shí)說了這么多，最終的選擇權(quán)在你，我個(gè)人的做法是，如果是公司項(xiàng)目建議用一倍圖做設(shè)計(jì)，如果只是單純做幾個(gè)UI界面，完全可以用二倍圖，因?yàn)椴挥瞄_發(fā)，而且圖片都是高清的。如果你看完了，有疑問或者有意見，可以馬上提出來，互相探討才能進(jìn)步，我不能保證文章沒有一處錯(cuò)誤，所以愛思考的你趕緊留言吧，這是我寫文章的初衷。
參考文獻(xiàn)：
https://zhuanlan.zhihu.com/p/25278453
https://medium.com/shyp-design/design-at-1x-its-a-fact-249c5b896536#.ba1jjoihp
