設計師用Sketch做設計稿時是用1倍圖還是用2倍圖做

設計師用Sketch做設計稿時是用1倍圖還是用2倍圖做

相信很多人跟我一樣一直在糾結到底用一倍圖做ui設計還是二倍圖？國外的設計師喜歡用一倍，國內的設計師比較多用二倍，實際上兩種選擇都有自己的好處，今天就打算給大家拋磚引玉一下。

375x667px ：一倍圖（@1x）；750x1334px：二倍圖（@2x）;

1.PS和Sketch的差別

PS是光柵影象( Raster Image )（光柵圖也叫做點陣圖、點陣圖、畫素圖 ）。所以Photoshop十分依賴DPI，AI和Photoshop不同的是，它是獨立於DPI的，因為它依賴向量圖。與光柵圖相反，影象生成採用向量圖，依靠數學公式計算，以程式設計方式重新調節大小並且不會損失圖片質量。

Sketch 是一款向量繪圖應用，這意味著你在調整形狀的時候一定程度上可任意縮放。

ps畫板

Sketch畫板

Sketch官方給出預設畫板尺寸是一倍圖尺寸，PS給出的是二倍圖尺寸，原理上面已經簡單講解過。所以如果做iOS 的ui設計的時候，PS一般用二倍圖來設計（750x1334px），Sketch可以選擇一倍圖（375x667px）或二倍圖（750x1334px）來設計。

2.@1x設計的理由

Medium上有篇文章專門講述了用@1x設計的理由，我就吸取其精華，然後結合實際情況給大家講解一下

1) ：少量數學計算

相對來說可以減少一定的數學計算，如果@2x設計時轉換@3x需要乘以1.5，相對來說轉換會比較麻煩。但是@1x設計稿如果要轉換隻要相應的乘以2和3即可得到對應的@2x和@3x。

2) ：安卓和iOS共用一套

iOS 設計尺寸375x667px，安卓360x640px；安卓和iOS可以共用字型、圖示和間距。可以更加方便裡做好統一的設計規範。

3) ：快速匯出

安卓

iOS

sketch42版本可以在Prefences—Presets裡面設定好預定的匯出尺寸，快速匯出的優勢其實已經相對來說不復存在了，但是一倍圖匯出相對於二倍圖匯出比較直觀，3x的字尾@3x，2x的字尾@2x，一一對應，不容易搞錯。而且當你點選Export的右上角“+”的時候，預設都是整數倍數匯出，匯出仍然更加快速便捷。

如果你是二倍圖做設計，可以設定成如下圖

@2x匯出預設

4) ：與開發溝通無礙

Zeplin和Sketch Measure是兩款優秀的標註外掛，都可以設定當前設計稿的Density（解析度），所以其實一倍圖和二倍圖並沒有太大的區別，唯一要注意開發視角看到的一定是轉換成一倍圖的標註。

舉個例子：如果退出按鈕高度：375x44px（@1x）,750x88px（@2x)，開發看到的都是如下的標註，所以二倍圖設計稿的童鞋需要在跟開發交流的過程中要心裡默默的除以2.

開發視角

5) ：圖片尺寸和檔案更小

如果用一倍圖的時候，設計稿中難免會有需要填充圖片的地方，所以一倍圖的圖片所需尺寸必然會比二倍圖小很多，不提倡用剪下蒙版的方式來放置圖片（除非你對圖片的呈現視角有很強的需求），一般可以通過填充來放置圖片，可以讓圖層更加乾淨簡潔。二倍圖設計的童鞋可以通過File—Reduce File Size或者裁切圖片來縮小圖片大小來達到減少檔案大小。檔案大了以後，尤其圖片很多的時候，會佔用很多記憶體，導致卡頓。一倍圖設計稿匯出二倍圖的時候注意圖片有模糊的可能。

圖片匯入

6) ：圖示尺寸、圖片和間距尺寸更加自由

二倍圖設計時，圖示尺寸必須為偶數，這樣才能保證@3x也是整數。圖片尺寸可以為奇數只要被2除盡即可，不一定要偶數。

例如，圖示：image@2x.png（40x40px）image@3x.png（60x60px）

一倍圖設計時，圖示尺寸可以為奇數，間距可以不是整數。（小數位都是0.5），但是儘量都是整數比較好。

例如，圖示：image.png（15x15px），圖片：170.5x170.5px；

7) ：更適合國際化趨勢

國外設計師的設計稿、平臺設計規範以及大部分原始檔素材用一倍圖來做的居多，Sketch自帶的模板都是一倍圖設計的，呼叫iOS和Android的官方控制元件相對來說會快很多，省去了縮放的麻煩。而且不管Apple和Google引入新的螢幕密度都不需要你重新轉換。

8) ：更省空間

一倍圖時，一個Page頁可以放置更多的畫板，但是二倍圖設計時，放置同樣數量的畫板會顯得比較臃腫。越多的畫板在同一個Page頁可以更加方便的設計師管理頁面，保證設計規範執行更加到位。

9) ：安慰劑效應

二倍圖設計時容易讓設計師誤以為二倍圖會提供更多的空間來填滿元素，這樣可能會導致點選目標區域變小，字型變小最終導致可讀性變差。

10) ：跨平臺更加方便

使用一倍圖匯入到目前主流的可互動原型軟體（Origami、Flinto、Principle、Form等）內製作可互動原型會有更好的體驗。

2.@1x和@2x對比

二倍圖設計預設匯出的圖片是 2x 高清的，可直接使用。

二倍圖匯出時省去了點選+號 再選 2x ，操作方便。

二倍圖做設計時，如果有iPhone 6 可以截優秀APP的圖直接PS量取尺寸而不用除以2。

用一倍圖的設計稿尺寸，1px的線繪製會用到0.5px，會出現間距對齊的問題！

用一倍圖的設計稿尺寸，如果列表高度為奇數時，對齊後會出現討人的小數點！