［譯］移動開發中用 1x 視覺稿設計的好處

<b>本文講的是［譯］移動開發中用 1x 視覺稿設計的好處，</b>

那我就開門見山了：我确信你們很多人都已經知道 1x 設計的好處了。但是呢，言語和風聲總不會那麼一緻。在移動裝置上，到底是使用 1x 設計稿更好，還是 2x 設計稿，一直沒有達成共識。

進行低像素，非 retina 的設計是反直覺的。實際上，我已經有很長時間沒有見過 iPhone 3GS 了。

那時，1：1 比例的設計使我們可以很友善的在裝置上預覽我們的草稿，我們使用 iPhone 5 和 Nexus 5 來做測試，那些低于 2x 和 3x 的設計稿，在螢幕上都是模糊不清的。

抗拒改變 — 正因為我們所有的設計都是 2x，重新設計他們是一份費力的事情。（後來我們把它們全部重新設計成 1x 了）

這些理由真令人傷感，但卻都不能和 1x 設計的好處相媲美。

關于到底是 1x 設計更好，還是 2x 設計更好其實已經沒必要再争論了。鑒于我從沒見過任何一個關于 1x 好處的列舉，我把這些好處在下面列出來了。

如果你要設計非 1x 的設計稿，那麼你就要步入那條無休無止的為不同分辨率轉換像素尺寸的道路了。

不信啊，你上呗 —— 在 2x 分辨率下把這些下面這些 pixel 轉換到 point：36px 的字型大小，左右各是 40px 内邊距，上下則是 20px。你算完了，好那在 3x 分辨率下面再試一次吧。

你覺得這一切很有趣嗎？

并不，我也一樣。而且如果像素還不是偶數的話，那簡直是一場災難。“那啥，請在那上面加上 16.66pt 的縮進。”

額的神啊。這節省了多少時間。所有的設計都在 iOS 和 Android 之間無縫銜接，字型大小，圖示，空白。你懂的，就是那些設計指南裡的好東西，非常容易的就重用上了。

好了，現在假設我在按 2x 來設計稿子，并且打算把它導出為資源 (assets) 。對于 iOS，你需要按照 .5x、1x 和1.5x 導出（實際上是 1x、2x 和 3x）。毫無邏輯可言。對于 Android 來說，則有五個不同的值，即 .5x、.75x、1x、1.5x、2x（實際上是1x、1.5x、2x、3x、4x）。

當你按照 1x 設計時，事情就變簡單了，1x 就是 1x，

下面是在 Sketch 裡面 1x 設計稿和 2x 設計稿的導出界面的比較：

你的設計難道不應該和寫代碼實作它的人在相同的次元麼？是的，當然應該。工程師們都用 point，不用 pixel。

工程師用 point（不用 pixel），是以 1x 的 Sketch 設計對我們來說剛剛好，我們可以直接在 Sketch 裡面找到需要的值而不需使用比例系數（scale factors）。

比方說，如果用 2x 的 Sketch 檔案，iOS 工程師就會按照下面的步驟執行： —— 在 sketch 裡檢視一個 UI 元素的值，比方說是 50 —— 接下來開始算：50（元素在 sketch 裡的值）/ 2（設計稿對應的系數）= —— 在代碼裡寫上 25。

現在，我們用 <code>1x</code> ，我們看到 25 ，就是 25。

（作者注：是的，我們的工程師直接用 Sketch，酷斃了！）

不僅工程師會愛上你，實際上還使得設計中犯得錯誤更少了。那些關于像素調整的不必要的品控都可以避免掉了。

記得我之前說 Sketch 裡的 1x 的設計圖預覽會變得模糊不清麼？其實那早就不是問題啦。現在所有一切都可以無縫的在裝置上預覽了。

對于 Android 裝置來說，也可以 Photoshop 和 Skala 達到同樣的效果。Duang！一切都可以完美縮放了！

這樣你的設計檔案會更小，特别是當你還使用了位圖（bitmap）的時候。在 Sketch 裡，如果一個頁面 (page) 裡包含了過多的畫闆 (artboard) ，延遲就是一個很頭疼的事情了，而更小的畫闆意味着更好的表現。

按照非 1x 下設計總給人一種随意的感覺，總有更多新的螢幕分辨率會出現。隻有 1x 的設計才是恒久遠的。

-

在 2x 和 3x 設計時往往會給人一種錯覺，那就是“我還有很多的空間”。特别是對于那些剛入行的設計師來說，他們會在高像素的空間裡放入更多的内容，容易造成點選區域過小或者顯示不清晰的問題。而按照 1x 設計則避免了這樣的影響。

Designing for 2x can also cause designers to experience a placebo effect: designing at 2x is quite appealing, visually, and can mask. However, a baseline of 1x is still the optimal “starting point” in and I actually think our designs benefit from this constraint (a design that “works” at 1x will also “work” 2x; we avoid fooling ourselves into thinking that 2x provides more space to “cram” elements). The temptation to design for higher resolutions can cause tap targets to shrink, type sizes to decrease, legibility to suffer, etc.. Designing at 1x can help protect from that.

本段引用，譯文如下：

按照 2x 的設計也容易給人造成一種假象：在視覺上，2x 的設計的确更具誘惑。但是， 1x 設計仍然是設計的“出發點”，我甚至認為，1x 的設計正是受益于它的限制（ 1x 的設計在 2x 下仍然是可用的；避免了讓自己誤以為還有更多空間可以“塞下”更過的元素）。在更高的分辨率下做設計會導緻可以點選的空間縮水，可以輸入的空間變少，内容的辨認度下降等等…按照 1x 設計則幫助我們規避了這些問題。

以上。客官，您請随便用。如果我有漏掉的，還請客官補充。

<b></b>

<b>原文釋出時間為：2016年07月10日</b>

<b>本文來自雲栖社群合作夥伴掘金，了解相關資訊可以關注掘金網站。</b>