為什麼Sketch做設計用一倍圖？
很多同學經常有這樣的疑問“為什麼Sketch預置的畫板尺寸比PS裡的要小？”，“為什麼大部分人用Sketch做圖採用一倍圖？”今天就跟大家聊聊這其中的原因。
Sketch與PS的區別
由於Sketch是向量繪圖工具，與PS點陣圖處理軟體不同的地方在於：Sketch影象生成採用向量圖，在調整形狀的時候可以進行縮放而不會損失質量。Sketch中iPhone8預設畫板是一倍圖尺寸375*667，PS中iPhone8預設為二倍圖尺寸750*1334。
PX與PT的關係
px是畫素，屬於相對單位，而pt是點，是iOS開發過程中使用的單位，屬於絕對單位。什麼意思呢？就是說pt的值是不變的，px會隨著螢幕畫素密度的不同而發生變化。
iOS開發為了不同解析度的裝置統一正常顯示，會提供三種不同尺寸的切圖：一倍圖@1x、二倍圖@2x、三倍圖@3x。一倍圖中px與pt數值相等，二倍圖中px數值是pt的2倍，三倍圖中px數值是pt的3倍。
比如我們看iPhone8（二倍圖）與iPhone8 Plus（三倍圖）的手機微信截圖：iPhone8中“朋友圈”字號為34px，在iPhone8 Plus中“朋友圈”字號為51px，字號對比為2：3，
但是iOS開發人員在寫程式碼的時候，輸入的是統一的字號數值17pt。
所以我們能夠發現，px是相對單位，pt是絕對單位。
設計採用一倍圖的好處
1、與開發溝通無障礙
與我們設計師不同的地方在於，如果我們使用750*1334做圖，在當前設計稿上標註px尺寸的話，開發工程師依然要在開發環境中換算為@1x尺寸的，比如標註了一個文字30px，開發在程式碼裡寫的時候會默默除以2，也就是15pt。
如果我們在Sketch裡使用一倍圖375*667來做圖，開發直接把資料拿過去用就行，就不用除以2了，更加方便。
2、換算方便
如果是以二倍圖設計，在換算三倍圖時需要乘以1.5，相對比較麻煩。如果以@1x設計，在換算的時候只需要乘以2和3就可以得到@2x、@3x了。
3、檔案體積更小
用Sketch做一倍圖時，一個Page頁面可以放置更多的畫板，畫板越多越方便設計師管理頁面，保證設計規範執行更加到位。在Sketch裡同時操作十幾個畫板很輕鬆，而基於點陣圖處理的PS就沒這麼流暢了，在PS裡放七八個畫板就已經有些吃力了，檔案體積以及對系統資源的消耗也很大，有時候卡的那叫一個心塞…
4、便於呼叫控制元件素材
Sketch自帶的模版都是一倍圖尺寸的，採用一倍圖進行設計時，呼叫iOS和Android的系統控制元件直接使用就可以了。很多平臺上的Sketch原始檔素材也是一倍圖尺寸的居多。
5、控制元件尺寸、間距把握更加自由
眾所周知，我們採用二倍圖尺寸進行設計時，需要保證控制元件大小、間距均為偶數，這樣換算到三倍圖時也是整數的。
當採用一倍圖設計時，尺寸可以為奇數的，因為只要乘2和3就行，都是整數的，在做圖的時候更加自由。
6、匯出切圖方便
我們可以在Sketch預設裡設定好匯出的規格尺寸，一倍圖匯出比二倍圖更直觀，三倍圖的字尾就是@3x，二倍圖的字尾就是@2x，整數倍的匯出非常快捷。
注意一倍圖中分割線的處理方式
我們在二倍圖750*1334裡繪製1px高的分割線，在一倍圖375*667中會變成0.5px，直接繪製高度0.5px的Rectangle會出現不好對齊的情況。
在Sketch提供的iOS模版中，分割線是繪製了一條高度為1px的Rectangle，將Fill去掉，加上Inner Shadows，Y為0.5，其餘值為0。
所以我們在繪製“上分割線”的時候，畫一條高度為1px的Rectangle，用Inner Shadows，X為0，Y為0.5，Blur和Spread均為0。
在繪製“下分割線”的時候，用Inner Shadows，X為0，Y為-0.5，Blur和Spread均為0。
通過這樣的方式可以很好的將0.5高度的分割線進行圖層對齊。
總結
如果你在使用PS做圖的話一般用二倍圖設計，使用Sketch做圖大部分採用一倍圖（當然也可以用二倍圖）。UI設計師使用一倍圖為基準進行介面設計，主要是因為方便，便於理解。對開發來講也不需要進行二次換算，效率也會得到提高。如果你是剛從PS轉Sketch的設計師，希望這篇文章能夠幫到你(•̀ᴗ•́)و。