UI/UX｜第一次設計 App：寫給菜逼的新手指南
設計人生第一個 App 之前，我做足了功課。我惡補了 iOS 的 Human Interface Guidelines（HIG）和 Material Design Guidelines，看了各種設計思考的文章，還把整個產品的 flow 都想了個十遍。
結果打開軟體第一件事就直接難倒我：1x 是什麼啊！？（汗）是 1x-3x、mdpi-xxxhdpi 全部都要畫嗎！！！而且手機尺寸這麼多，到底要做多大啊啊啊啊啊啊啊啊！！！
那天一翻兩瞪眼我才明白，學怎麼設計 App，只有學習設計思考和 UX 思維並不夠。所以今天，我們不談設計思考、使用流程、User Persona…… 一個菜逼有了產品設計的基礎之後，還缺少的臨門一腳（其實有三腳），也就是我接下來這篇文章要寫的東西，是這些：
- 我該選擇用哪一套設計軟體？
- 到底什麼是 1x、2x 和 3x（還有 mdpi、hdpi、xhdpi…）？
- 我需要每一種機型和尺寸都出設計稿嗎？
警語：如果你有一定程度的經驗，那麼這篇文章並不適合你。
如果你是剛要開始踏入 App 設計領域的菜逼八，那麼請進！我會一步一步帶你突破我當年遇到的三大門檻。
1：我該選擇用哪一套設計軟體？
上圖是 UXTOOLS 2019 Design Tools Survey 排出的 UI 設計工具比較表，我先用紅框把最需要看的部分框起來。以價格來說，前三名的 Figma 和 Adobe Xd 都有免費版（限縮部分功能），Sketch 也有為期一個月的完整版免費試用，很適合還在摸索階段的小菜逼。值得一提的是，如果你已經有用 Adobe 系列軟體，在 Creative Cloud 裡面也可以找到完整版的 Xd，不用再額外付費唷～
Windows 使用者最適合用 Figma 或 Adobe Xd；如果獨立作業，不需要和其他設計師合作，那麼就不需要考慮 Collaboration 的功能。Symbols 就是可以把東西變成元件，不斷重複使用的功能，現在已經幾乎是各家軟體必備；而 Prototyping 的功能雖然幾乎都是綠色勾勾，但仔細看還是有分複雜程度的，目前最強大的應該是 InVision、Framer X、Adobe Xd 和 Axure。
如果上面的表格對你來說還是太複雜了，那麼我這邊簡單放幾種判斷法：
A. 我目前不想付錢：Adobe Xd / Figma 有免費版
B. 我有其他 Adobe 軟體：Adobe Xd 有包含在 CC 裡
C. 我沒有 Mac：Figma / Adobe Xd 支援 Windows 使用者
D. 我需要和別的設計師遠端合作：Figma / Adobe Xd 的協作功能夠強
E. 我只需要做基本的 Prototype：Sketch / Figma 有基礎的點到點原型
F. 我想要做很完整的 Prototype：Adobe Xd / Axure 可以做完整複雜的動畫和流程 demo
G. 我想要做很炫砲的 Prototype：花一點時間練習，InVision / Framer X / Adobe Xd 都可以做出厲害的原型（配合 Auto-animate 的功能，Xd 現在也可以做出非常炫砲的動畫囉～）
我自己是用 Adobe Xd，原因是我本來就很熟 Adobe Ai 和 Ps，同樣是 Adobe 家族，Xd 的繪圖邏輯和快捷非常直覺且相似，容易上手。它可以用相對少的時間和力氣，做出非常複雜的動畫和原型，配合 App 直接顯示在自己的手機上，用來展示給老闆或客戶看，或是自己用來測試都很適合。
2. 到底什麼是 1x、2x 和 3x（還有 mdpi、hdpi、xhdpi…）？
用 iPhone 6/7/8 的機型來舉例：iPhone 6/7/8 的尺寸是 375*667 pt，但因為它屬於 2x 的機型，所以實際尺寸要各乘以兩倍，也就是 750*1334 px。聽起來好像有點虛幻，對不對？
關於 dpi / pt / dp / px 的由來與換算方式，Akane Lee 有整理過一篇很清楚的文章，可以參考這個連結。簡單來說，pt 是 iOS 裝置專屬的尺寸，所以剛才說「iPhone 6/7/8 的尺寸是 375*667 pt」就是蘋果定義出來的大小。
在 1x 的裝置上，pt:px = 1:1，也就是說 1pt = 1px。在 2x 的裝置上， 1pt 可以塞 2 個 px，也就是說同樣在 375*667 pt 尺寸的裝置上，1x 的裝置是 375*667 px，而 2x 的裝置則是有 750*1334 px！（3x 以此類推）
Android 的 dp 基本上也是同樣的道理，只是倍率比較多種，這邊我用一個簡單的表格來說明 ldpi 到 xxxhdpi 所代表的倍數：
講了這麼多，到頭來，比較多 px 到底可以做什麼呢？
當 1pt 裡面的 px 密度越高，畫面就可以越細緻，就像上圖的圓一樣，越多 px，形狀越完整，弧線也越圓滑。這就是高解析度螢幕的原理。我們再看一次剛才 iPhone 的例子：
iPhone 6/7/8 的尺寸是 375*667 pt，由於屬於 2x 裝置所以實際尺寸是 750*1334 px。而 iPhone X/Xs/11Pro 的尺寸看似和 6/7/8 差不多，但因為它是 3x 的裝置，所以實際尺寸瞬間就比 6/7/8 大很多，解析度也高了一階。
終於了解 1x、2x 和 3x 的差異以後，我們遇到了一個難題：繪圖軟體只能用 px 當單位，不能用 pt，那這樣我應該畫 375*667 還是 750*1334？
答案是：其實目前兩種都有人用！業界目前比較主流的有兩派：用 1x 尺寸設計，以及用 2x 尺寸設計（用 3x 尺寸設計的人比較少見，所以這邊先不談）。但我個人推薦你用 1x 的倍率設計，下面告訴你為什麼 ⬇⬇⬇
1x & 2x 大比較
A. 縮放倍率
1x：一個 15*15px 的方形，2x = 30*30px，3x = 45*45px
無論哪一種倍數放大都不會出現小數點。
2x：一個 15*15px 的方形，1x = 7.5*7.5px，3x = 22.5*22.5px。
在 2x 倍率做設計稿，如果用奇數，跑到 1x 和 3x 的時候就會有一堆小數點！選擇 2x 尺寸做稿的話，把所有元素尺寸都設偶數，可以避免這個問題。
想想，如果在 1x 和 2x 的設計稿上畫一條 0.5px 的線，按倍率縮放以後會發生什麼事情？
→ 1x = 0.5px，2x = 1px，3x = 1.5px → 好像還 OK
→ 2x = 0.5px，1x = 0.25px，3x = 0.75px → 小數點已經出現兩位數了！
B. 向量素材
在 2x 尺寸做向量素材——例如 icon——最容易遇到的瓶頸就是不小心將素材做得太細緻了。如前面所提到的，解析度越低的裝置像素密度越低，因此在 2x 畫面上看起來很棒的 icon 到了 1x 裝置不一定會如預期。反過來，在 1x 上沒有問題的 icon 到 2x 通常也不會有問題。
為什麼向量素材也會有失真的問題？
因為即便用向量素材，到了螢幕上依舊要用像素顯示，所以並不是用向量圖就絕對不會失真唷～
C. 機型考量
目前市面上最爛的 iPhone 也是 2x 起跳，實際上已經不存在 1x 裝置。這是有些人選擇直接用 2x 尺寸設計的最大原因。
綜合上面幾種考量，其實用 1x 開始設計，對於新手來說出錯的機率是比較小的，換算也很方便，不過這還是很看個人做圖的習慣囉！
3. 我需要每一種機型和尺寸都出設計稿嗎？
這個問題真的很多人問，不過你可以放心，答案是：不用！
一、1x、2x、3x 都要各出一份設計稿嗎？
剛才我們不是花了很多時間了解 1x、2x、3x 的差異嗎？以 iPhone 6/7/8 為例，無論設計稿做 1x（375*667px）還是 2x（750*1334px）還是 3x（1125*2001px），最後轉換成 pt 時，都是 375*667pt 呀～
而工程師在開發 app 的時候看的單位就是 pt，也就是說無論設計稿做大做小，工程師看到的規格：全．部．都．一．樣。所以三種倍率都做，根本沒有意義囉～
二、那畫面上用到的 icon 和插圖呢？
傳統上，設計師做完一個 icon 之後，還要再做成各種倍率提供給工程師使用。但現在，利用 Sketch、Adobe Xd 這一類的 UI 繪圖軟體，就可以直接把做好的 icon 輸出成其他倍率了。如果上傳到 Zeplin、Sympli 這一類的協作工具，工程師也可以直接透過它們下載到所有倍率的 icon 圖檔，還可以選擇要 png 還是 svg，很簡單又方便～
如果用到的圖檔是點陣圖，建議一開始就做最大倍率（3x / xxxhdpi），這樣工程師拿到後只要等比例縮小就可以用了。有時候遇到比較精細、高要求的圖片，我會特別為每一種倍率個別製作，但這種情況比較少見。大部份時候，只要有最高倍率的點陣圖就可以囉～
三、每一種手機和平板的機型都要做嗎？
市面上手機機型那麼多，到底要選擇哪一隻手機的規格當作設計稿的尺寸呢？難道每一隻機型都要做一份嗎？
首先，我自己的做法是 iPhone、iPad、Android phone、Android tablet 各做一份設計稿，就已經非常足夠了。
機型我偏好選擇小的手機當基準，但同時也要考量到市場的通用性。舉 iPhone 為例，目前 iPhone 5/5s/SE 以下的機型已經很少見了，所以比較普遍的 iPhone 中最小的機型就是 6/7/8（375*667pt）。以下是我選用的所有尺寸：
iOS —— 375*667pt (1x)、768*1024pt (1x)
Android —— 360*640dp (mdpi)、600*800dp (mdpi)
四、為什麼選擇尺寸小的機型，而不是最新的機型？
隨著各牌手機的尺寸與型號不斷更新，今天選擇最新機型，四個月後可能又是舊款手機了。如果跟隨著最新的機型做 UI 設計，我們會被迫不斷地配合新機重畫設計稿。
下圖是用大螢幕（e.g. iPhone XR — 414*896pt）的尺寸做設計稿後，縮小到小螢幕（e.g. iPhone 8 — 375*667pt）時常見的狀況：
我們會發現，在大螢幕上做設計稿時，因為空間大、尺寸夠，所以很容易以為間距、文字大小或是按鈕位置都很有餘裕。沒想到這樣的 spec 放到小螢幕時卻出現文字換行、CTA 看不見、間距被壓縮等種種悲劇！由儉入奢易，由奢入儉難，如果一開始就為每一吋空間都極其珍貴的小螢幕設計，這些 spec 到了大螢幕上通常就非常有餘裕了。
反過來想，小螢幕做到大螢幕就一定不會出問題了嗎？
有時候，在小尺寸上做的設計稿看似很完美，到了大螢幕上會發現物件不夠填滿畫面，導致下方一片空蕩蕩（噢不～）。當然，還是有很多解決方法，例如將這一頁的物件調整為上下置中。靠不斷嘗試、累積經驗，最後就會找到最適合自己的方法囉～
條條大路通羅馬，設計沒有唯一正解
初踏入 App UI 設計的世界，要知道的第一件事情就是萬事都有千百種方法可以做到。最適合我的方法不一定會最適合你，所以這篇文章主要是希望在你一下子遇到 N 種選項、焦慮徬徨時，當作小小的引導。當你開始越來越熟練的時候，也許會發現有更適合自己的軟體或做法，找到更多屬於自己的小撇步和訣竅。
當你成功打開人生第一個 App UI 的設計稿、畫出人生第一個介面之後，就可以繼續學習更深度的設計思考、UX 思維，培養自己的美感，做出屬於自己的作品囉！
好了，努力看完這篇文章的你，肯定是個很有毅力和決心的小菜逼。現在就去脫離菜逼的身份吧！如果有任何建議與補充，歡迎在底下留言討論！也歡迎發問問題，我會盡量回答～下次見～
