UI/UX｜第一次設計App：寫給菜逼的新手指南 - Medium

設計人生第一個App 之前，我做足了功課。

我惡補了iOS 的Human Interface Guidelines（HIG）和Material Design Guidelines，看了各種設計思考的文章， ... UIUXDesignToolPMCareerResourceAAPDPickedFollowusonFacebookUI/UX｜第一次設計App：寫給菜逼的新手指南H.Ching｜林筱晴FollowDec12,2019·11minread設計人生第一個App之前，我做足了功課。

我惡補了iOS的HumanInterfaceGuidelines（HIG）和MaterialDesignGuidelines，看了各種設計思考的文章，還把整個產品的flow都想了個十遍。

結果打開軟體第一件事就直接難倒我：1x是什麼啊！？（汗）是1x-3x、mdpi-xxxhdpi全部都要畫嗎！！！而且手機尺寸這麼多，到底要做多大啊啊啊啊啊啊啊啊！！！那天一翻兩瞪眼我才明白，學怎麼設計App，只有學習設計思考和UX思維並不夠。

所以今天，我們不談設計思考、使用流程、UserPersona……一個菜逼有了產品設計的基礎之後，還缺少的臨門一腳（其實有三腳），也就是我接下來這篇文章要寫的東西，是這些：我該選擇用哪一套設計軟體？到底什麼是1x、2x和3x（還有mdpi、hdpi、xhdpi…）？我需要每一種機型和尺寸都出設計稿嗎？警語：如果你有一定程度的經驗，那麼這篇文章並不適合你。

如果你是剛要開始踏入App設計領域的菜逼八，那麼請進！我會一步一步帶你突破我當年遇到的三大門檻。

1：我該選擇用哪一套設計軟體？UXTOOLS2019DesignToolsSurvey中列出的比較表格（僅擷取前8名）上圖是UXTOOLS2019DesignToolsSurvey排出的UI設計工具比較表，我先用紅框把最需要看的部分框起來。

以價格來說，前三名的Figma和AdobeXd都有免費版（限縮部分功能），Sketch也有為期一個月的完整版免費試用，很適合還在摸索階段的小菜逼。

值得一提的是，如果你已經有用Adobe系列軟體，在CreativeCloud裡面也可以找到完整版的Xd，不用再額外付費唷～Windows使用者最適合用Figma或AdobeXd；如果獨立作業，不需要和其他設計師合作，那麼就不需要考慮Collaboration的功能。

Symbols就是可以把東西變成元件，不斷重複使用的功能，現在已經幾乎是各家軟體必備；而Prototyping的功能雖然幾乎都是綠色勾勾，但仔細看還是有分複雜程度的，目前最強大的應該是InVision、FramerX、AdobeXd和Axure。

如果上面的表格對你來說還是太複雜了，那麼我這邊簡單放幾種判斷法：A.我目前不想付錢：AdobeXd/Figma有免費版B.我有其他Adobe軟體：AdobeXd有包含在CC裡C.我沒有Mac：Figma/AdobeXd支援Windows使用者D.我需要和別的設計師遠端合作：Figma/AdobeXd的協作功能夠強E.我只需要做基本的Prototype：Sketch/Figma有基礎的點到點原型F.我想要做很完整的Prototype：AdobeXd/Axure可以做完整複雜的動畫和流程demoG.我想要做很炫砲的Prototype：花一點時間練習，InVision/FramerX/AdobeXd都可以做出厲害的原型（配合Auto-animate的功能，Xd現在也可以做出非常炫砲的動畫囉～）我自己是用AdobeXd，原因是我本來就很熟AdobeAi和Ps，同樣是Adobe家族，Xd的繪圖邏輯和快捷非常直覺且相似，容易上手。

它可以用相對少的時間和力氣，做出非常複雜的動畫和原型，配合App直接顯示在自己的手機上，用來展示給老闆或客戶看，或是自己用來測試都很適合。

2.到底什麼是1x、2x和3x（還有mdpi、hdpi、xhdpi…）？用iPhone6/7/8的機型來舉例：iPhone6/7/8的尺寸是375*667pt，但因為它屬於2x的機型，所以實際尺寸要各乘以兩倍，也就是750*1334px。

聽起來好像有點虛幻，對不對？關於dpi/pt/dp/px的由來與換算方式，AkaneLee有整理過一篇很清楚的文章，可以參考這個連結。

簡單來說，pt是iOS裝置專屬的尺寸，所以剛才說「iPhone6/7/8的尺寸是375*667pt」就是蘋果定義出來的大小。

在1x的裝置上，pt:px=1:1，也就是說1pt=1px。

在2x的裝置上，1pt可以塞2個px，也就是說同樣在375*667pt尺寸的裝置上，1x的裝置是375*667px，而2x的裝置則是有750*1334px！（3x以此類推）Android的dp基本上也是同樣的道理，只是倍率比較多種，這邊我用一個簡單的表格來說明ldpi到xxxhdpi所代表的倍數：講了這麼多，到頭來，比較多px到底可以做什麼呢？圖片取自AppleHIG—ImageSizeandResolution當1pt裡面的px密度越高，畫面就可以越細緻，就像上圖的圓一樣，越多px，形狀越完整，弧線也越圓滑。

這就是高解析度螢幕的原理。

我們再看一次剛才iPhone的例子：iPhone6/7/8的尺寸是375*667pt，由於屬於2x裝置所以實際尺寸是750*1334px。

而iPhoneX/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的差異嗎？以iPhone6/7/8為例，無論設計稿做1x（375*667px）還是2x（750*1334px）還是3x（1125*2001px），最後轉換成pt時，都是375*667pt呀～而工程師在開發app的時候看的單位就是pt，也就是說無論設計稿做大做小，工程師看到的規格：全．部．都．一．樣。

所以三種倍率都做，根本沒有意義囉～二、那畫面上用到的icon和插圖呢？傳統上，設計師做完一個icon之後，還要再做成各種倍率提供給工程師使用。

但現在，利用Sketch、AdobeXd這一類的UI繪圖軟體，就可以直接把做好的icon輸出成其他倍率了。

如果上傳到Zeplin、Sympli這一類的協作工具，工程師也可以直接透過它們下載到所有倍率的icon圖檔，還可以選擇要png還是svg，很簡單又方便～AdobeXd輸出的畫面，可以選擇為哪一類型的裝置輸出，以及原稿尺寸是1x、2x還是3x。

如果用到的圖檔是點陣圖，建議一開始就做最大倍率（3x/xxxhdpi），這樣工程師拿到後只要等比例縮小就可以用了。

有時候遇到比較精細、高要求的圖片，我會特別為每一種倍率個別製作，但這種情況比較少見。

大部份時候，只要有最高倍率的點陣圖就可以囉～三、每一種手機和平板的機型都要做嗎？市面上手機機型那麼多，到底要選擇哪一隻手機的規格當作設計稿的尺寸呢？難道每一隻機型都要做一份嗎？光是iPhone、iPad的尺寸就眼花撩亂，Android的機型還比iOS多好幾倍呢～首先，我自己的做法是iPhone、iPad、Androidphone、Androidtablet各做一份設計稿，就已經非常足夠了。

機型我偏好選擇小的手機當基準，但同時也要考量到市場的通用性。

舉iPhone為例，目前iPhone5/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.iPhoneXR—414*896pt）的尺寸做設計稿後，縮小到小螢幕（e.g.iPhone8—375*667pt）時常見的狀況：我們會發現，在大螢幕上做設計稿時，因為空間大、尺寸夠，所以很容易以為間距、文字大小或是按鈕位置都很有餘裕。

沒想到這樣的spec放到小螢幕時卻出現文字換行、CTA看不見、間距被壓縮等種種悲劇！由儉入奢易，由奢入儉難，如果一開始就為每一吋空間都極其珍貴的小螢幕設計，這些spec到了大螢幕上通常就非常有餘裕了。

反過來想，小螢幕做到大螢幕就一定不會出問題了嗎？有時候，在小尺寸上做的設計稿看似很完美，到了大螢幕上會發現物件不夠填滿畫面，導致下方一片空蕩蕩（噢不～）。

當然，還是有很多解決方法，例如將這一頁的物件調整為上下置中。

靠不斷嘗試、累積經驗，最後就會找到最適合自己的方法囉～條條大路通羅馬，設計沒有唯一正解初踏入AppUI設計的世界，要知道的第一件事情就是萬事都有千百種方法可以做到。

最適合我的方法不一定會最適合你，所以這篇文章主要是希望在你一下子遇到N種選項、焦慮徬徨時，當作小小的引導。

當你開始越來越熟練的時候，也許會發現有更適合自己的軟體或做法，找到更多屬於自己的小撇步和訣竅。

當你成功打開人生第一個AppUI的設計稿、畫出人生第一個介面之後，就可以繼續學習更深度的設計思考、UX思維，培養自己的美感，做出屬於自己的作品囉！好了，努力看完這篇文章的你，肯定是個很有毅力和決心的小菜逼。

現在就去脫離菜逼的身份吧！如果有任何建議與補充，歡迎在底下留言討論！也歡迎發問問題，我會盡量回答～下次見～林筱晴H.Ching-UI/UX/平面設計師林筱晴H.Ching-UI/UX/平面設計師,Taipei,Taiwan.4.6Klikes.個人獨立工作室，專長UI/UX、logo、活動視覺及各項平面設計。

www.facebook.comhttps://medium.com/as-a-product-designerAAPD — AsAProductDesignerAAPD…4.6K5UIDesignUIDesignUXDesignUX4.6K claps4.6K5AAPD — AsAProductDesignerAAPD專注於分享數位產品設計的相關資訊，並且致力在平台上創造更多的交流與互動，我們關注UI設計、UX設計、設計師的個人成長、設計趨勢與產業動態等，希望透過這些知識的傳遞，能夠降低每位設計師成長的過程中所遇到的阻礙。

歡迎來信投稿：[email protected]｜林筱晴Follow為設計癡迷的實戰派UI/UX設計師——理論是拿來用的！派不上用場的理論都是空談。

//Contactmeat:[email protected] — AsAProductDesignerAAPD專注於分享數位產品設計的相關資訊，並且致力在平台上創造更多的交流與互動，我們關注UI設計、UX設計、設計師的個人成長、設計趨勢與產業動態等，希望透過這些知識的傳遞，能夠降低每位設計師成長的過程中所遇到的阻礙。

歡迎來信投稿：[email protected]