標籤：

用 Sketch 做 iOS 設計時，一般選用哪個尺寸？

01-05

用 Sketch 的同學們，請教個問題，做 iOS 時，一般選哪個尺寸做？為什麼？我直接用 iPhone 6 Plus 的尺寸做行嗎？是不是導出圖片時命名要改？

童鞋，你這個問題問的不專業啊，尺寸什麼的是要看具體項目，要和開發人員一同制定一個標準。

都用Sketch了，當然導出的時候選下2x 或者 3x咯。

Sketch自帶IOS UI KIT，是基於IP6解析度的

（連Material Design都有，看看這template良心大大滴，控制項都做成symbol了）

輸出的時候X2就是IP6的像素尺寸了，裝個他家的Mirror 預覽妥妥的。

團隊目前默認使用 iPhone 6 的 1x 尺寸來做設計。

主要原因如下：

  1. 1x 尺寸下做設計，輸出方便，直接輸出 2x 資源給 iPhone 5 和 iPhone 6 用，輸出 3x 資源給到 iPhone 6 Plus 用。

  2. 選擇的 iPhone 6 的 1x 尺寸，向上適配 6P 向下適配 5 會比較方便。

    我們看下下圖，這是 3 個屏幕實際像素尺寸的對比，如果要在這個尺寸下作適配，因為尺寸差異大，導致不夠直觀。需要把同樣的原件 （圖標文字這些）放大後才可以去做適配，相對麻煩。

    再來看看看 1x 資源來做設計的效果。幾個尺寸比較接近，用相同尺寸的原件。原件可以在幾個界面之間直接拖動，調整間距就好。

-----------------------------------------------------------------------------------

一個用 375x667做的設計稿 用Sketch Mirror在不同機型上預覽效果。

白色區域為可以看到的設計稿區域。

-----------------------------------------------------------------------------------

注意的細節：

  1. 界面中需要用到點陣圖的時候，比如頭像，商品圖。這些圖片為了保證輸出和預覽的時候清晰，需要用 3X 的點陣圖，縮小後用。
  2. 清晰的適配規範，標註規範，需要和開發同學一起達成共識。

    1. 適配一般情況下，圖片等比拉伸。比如 Banner 圖片
    2. 導航和菜單中的圖標常規下都是固定尺寸。
    3. 文字區域一般都是自適應。

看了下大家的答案，然後再從作為一個產品汪的角度去理解了下題主碰到的真正問題和提問題的真正用意，對你的問題做了以下拆解：

  1. 使用 Sketch 設計 iOS 應用時，究竟是應該使用什麼尺寸的畫布畫效果圖是最高效的？

  2. 是否可以直接使用 iPhone 6 Plus 的尺寸做效果圖，用來適配其他尺寸的機型？

如果我對問題理解得不對，請自動忽略後面的內容。

如果你覺得好像是這麼回事，那麼相信回答了第一個問題，第二個問題就迎刃而解了。下面我談一下自己實踐後的見解。

問題一：使用 Sketch 設計 iOS 應用時，究竟是應該使用什麼尺寸的畫布畫效果圖是最高效的？

先說結論：我在開始一個新的 iOS 應用設計時，我個人一直採用的是 iPhone 6 的 4.7 inch，即 750*1334。

為什麼？因為效率！！！

我們都知道現在的 iOS 畫效果圖（注意：是畫效果圖！畫效果圖時使用的解析度不都是採用設備本身的顯示解析度）時，尺寸有以下五種（三類）：

@1x：3.5 inch（320*480）

@2x：3.5 inch（640*960）、4 inch（640*1136）、4.7 inch（750*1334）

@3x：5.5 inch（1242*2208）。

這裡要特別說明下，@1x 已經是上個時代 iPhone 的切圖標準，只適用於包括 iPhone 3GS 之前的機型，所以我很任性地把這種情況剔除在外了。剩下的那些，按照屏幕寬度分類的話，可以分成小、中、大三中尺寸，分別是：

小 —— @2x：3.5 inch（640*960）、4 inch（640*1136）

中 —— @2x：4.7 inch（750*1334）

大 —— @3x：5.5 inch（1242*2208）

大家的時間都是有限的，意味著我們需要從三種尺寸裡面只選擇一種尺寸畫效果圖。我之所以選擇「中」（即 4.7 inch，iPhone 6），是因為從布局角度而言，選擇一個中間的尺寸能夠幫我們最有效地把握界面設計的整體視覺。當把這種視覺移植到「小」和「大」的屏幕上時，不會有太大的視覺差異，不需要再多花時間重做布局。

當然，如果不這麼乾的話，就會碰到下面兩種情況：選擇「小」作為視覺標準，會使得按照「小」的 feel 去做「大」屏幕時，整個視覺布局會顯得中間擁擠，兩邊空曠；使用「大」作為視覺標準，移植到「小」屏幕之後會發現很多元素根本塞不進屏幕。

選擇「中」，我只要稍微將個別「小」和「大」的效果圖作微調，無需大動干戈，就能大致完成對於所有屏幕尺寸的適配。對於大多數的基礎頁面而言，只要在「中」上面看著順眼，在「小」和「大」上面基本沒問題。在完成效果圖設計之後，只要直接標出 Spec 交給開發，你會發現大多數頁面不再需要在「小」和「大」尺寸上面另作調整，一切看起來都是辣么和諧（不得不佩服 Apple 對於這個細節考慮得各種周全，所以定下了這三種尺寸）。

說白了，選擇「中」（ iPhone 6 ）的目的就是為了節約時間，提高效率！

問題二：是否可以直接使用 iPhone 6 Plus 的尺寸做效果圖，用來適配其他尺寸的機型？

你問我是否可以？當然可以！尤其是你的手機是 iPhone 6 Plus 的時候，尤為推薦，因為 Sketch 這個軟體的牛逼之處在於可以和 Sketch Mirror 同時使用，大屏幕裡面顯示「大」的效果圖，看起來整個人就舒服啊！畫 UI 的最終目標不就是圖個舒服么？哎，其實做什麼事情都是這個目的……

但是，如果你使用的是「大」尺寸進行效果圖設計的話，你需要將每個頁面都落實成「小」，等於要把你的效果圖通通重新再畫一遍。不理解？你把「大」的尺寸的 Spec 給開發後，去 iPhone 5 或者 iPhone 5S 上面跑跑看，就造了。如果再在 iPhone 4 和 iPhone 4S 上面跑，簡直尼瑪 xxxxxxxx！！！

所以，沒有對錯，只有利弊。你有時間，慢慢玩，當然可以。或者，不用太在意所有用戶的體驗，也可以～～～

iPhone Development 101: Sizes of iPhone UI Elements

我也不想說起來我很厲害似的，都是看別人的

更新：用 1x 的好處

相對應的使用 1x 視覺稿的好處建議大家看這裡，我覺得文章里 第3點 和 第8點 說服力比較強，特別是第8點：在 1x 下做設計可以避免把界面占的太滿，不像 2x 給人的感覺有很大空間可以發揮，這樣可以再設計之處就對小屏幕有全面的考慮（比較 iPhone 4/5 的尺寸還是有很大用戶比例的）

原文請看：https://medium.com/shyp-design/design-at-1x-its-a-fact-249c5b896536

----

用 2x 的好處：

作為前端切圖的經驗之談，我們通常用 2x 的設計稿尺寸（比如 iPhone 6 的設計稿用 750px 而非 375px）

使用 2x 視覺稿尺寸的一些好處：

  • 默認導出的圖片是 2x 高清的，可直接使用
  • 導出時省去了點擊 + 號 再選 2x 的操作
  • 方便上下游交接，下游拿到 750px 的稿子（100% 縮放比例下預覽）時可以很明顯的了解到是 2x 的稿子，無需多言，所有標註都會自行 除以 2 使用
  • 另外如果用 1x 的設計稿尺寸，1像素的線繪製的時候需要用 0.5 這個取值，不是默認值，較為繁瑣。

相對不便之處：

  • 如果要同時導出 1x 和 2x，會遇到圖片文件重命名的問題，因為選擇的時候 1x + 0.5x 會被命名為 xxx@0.5.png 和 xxx.png 並非最終要的名字，不過用 Better Rename 9.app 這個 App 可以批量修改，也能接受。

Sketch鼓勵用1倍尺寸設計ios app，程序布局也都是基於1倍尺寸布局，而且這樣的設計稿子，如果程序用的是png切圖，就不用擔心會出現像素對不齊的問題，如果用PDF切圖也是非常不錯的，矢量切圖，iOS7以上的用戶IOS系統會自動補全其他兩個切圖。所以盡量用1倍設計，用PDF矢量切圖對應ios開發。安卓還得用png....

推薦使用iPhone6作為基礎尺寸做設計，然後向上針對iPhone6 Plus和向下針對iPhone5的布局比例調整都會要簡單一些。

理論上來說都是可以等比例拉伸或縮放來適配其他兩種屏幕的解析度，但是實際情況都是需要針對不同的屏幕尺寸做布局上的比例調整。

關於切圖，推薦使用@1x的pdf矢量切圖，sketch做出來的都是矢量的，所以不用擔心切圖問題，選用pdf矢量切圖，就更不用再麻煩的去切三套圖了

個人覺得還是375*667這個尺寸做起來方便，不用擔心距離或者大小出現單數的可能，還有就是切圖不用換算 非常方便。

以1334*750px作為設計標準尺寸的原由：

1.從中間尺寸向上或向下匹配的時候界面調整的幅度最小，最方便適配。

2.大屏時代依然以小尺寸為設計尺寸，會限制設計師的設計視角

3.設計安卓版本時只需做最小的設計調整，提升設計效率。

個人的習慣是使用 iPhone 6 的 @1x 尺寸來做。

原因如下：

1. 出來的整個文件大小會減小很多，試過用2倍的，文件大了以後，尤其圖片很多的時候，會佔用很多內存，導致卡頓

2. 1倍可以很方便的出圖到1.5倍、2倍、3倍，如果用2倍來做設計的話，如果要出圖給安卓 hdpi 設備的1.5倍圖片，要乘以0.75，很彆扭

3. 之前合作的工程師開發都是用1倍的單位的，這樣的話，源文件工程師也不需要換算單位了

以iPhone6尺寸做設計。

都是矢量的，@2x @3x 無所謂呀，而Sketch @2x 的圖 1.5倍就可以了。

一般而言，我有特別的做法：

App設計時，我用一個『正方形』作Artboard的，不分iPhone / iPad what。

--- 8 Jan15 補充 ---

因為界面上的按鈕都是置於屏幕上相對位置，正方形的Artboard??

其實Xcode 6 的「Universal Storyboard」是正方形的，在Sketch中Export後，再直接在Xcode上預覧不同設備顯示，最快得到結果。

Artboard=750平方px

用點陣圖軟體 建議用 ip6尺寸 750*1334， sketch的話 感覺1x更方便一些。

在做設計前我想應該先去了解一下dp、px、pt之間的單位關係。（就不科普了，baidu一搜多的很。）

-------------------------------

x2是iPhone7的尺寸 x3是iPhone7+的尺寸 我一般就用x1的尺寸做

之前都是x2的尺寸在photoshop里做的

再用mark man 1:1的標註，但實際發現ios開發在執行過程中也是要除2來換算。（舉個例子。比如你是以750x1334的尺寸做了一個界面，裡面的icon尺寸是40x40px，但給到開發後他們寫代碼時會將40除以2，也就是以20x20來寫。）

且經常會發現開發出來的實際界面和你的設計稿完全是兩碼事。

所以後面改換sketch設計，都是在x1的基礎上，最後用sketch measure里的導出規範功能直接倒出html的文件給到開發。

當然設計中的所有icon要切好，導出html之後在界面右側可以看到切好的icon會自動生成3個size，分別就是x1、x2、x3的size。這樣既方便開發儘可能的還原你的設計稿，也省去了你標註的麻煩。

剛接觸sketch，平時使用ps,但是這個問題剛好前兩天剛看講sketch的書裡面專門說過

做設計選用iphone6尺寸，但在sketch顯示尺寸是iphone6的一半

因為sketch是矢量的，這樣既能保證了用6的布局，又不會在切圖中有不清晰的情況。

而且切圖命名@1X，2x,3x也剛好和設計尺寸一倍，兩倍，三倍相匹配。

這樣做同樣為標註帶來好處，因為你標註的數字也剛好和開發1:1對應，不用開發在用你標註的像素除以2了（我還沒用sketch）標註過，如果哪裡說錯了，歡迎指正

我們的設計稿是按照 @2x，然後使用插件 Sketch Export Assets 導出

先按照項目需求，再看團隊中開發人員的習慣；在設計的時候建議你選用與測試機相同的大小。一般常用的@2x

推薦閱讀：

TAG:Sketch |