一款APP從設計稿到切圖(2018版)
Part 1 設計前的準備工作
①合適的設計工具
我個人是很推薦使用Sketch做UI設計的，軟體本身已經提供了大量的IOS和Android系統設計資源，配合各類外掛，幾乎無所不能。
相比於Sketch來說，體型胖了點，在UI設計上略遜一籌。不過因為Sketch是OS X獨佔，所以因為平臺限制的原因，用PS設計也沒有問題。我很久沒用它做UI設計了，也沒啥可推薦的了。
②做好版本管理、檔案歸檔的工作
專業水平不僅體現在設計能力之上，優秀的管理能力也是重要的職業素養。合理規劃好設計版本，進行明確的檔案歸檔工作，有助於提高設計師的工作效率。這裡不贅述了，每個人有自己的版本管理方式，不過目標只有一個： 清晰高效 。
Part 2 關於手機的基礎概念
這裡的概念性內容不要強行記憶，理解即可，它是做移動UI設計的理論常識。
①基礎常識：手機解析度、螢幕尺寸、螢幕密度
手機解析度：
手機螢幕的畫素點數。比如750*1334、720*1280等等，細分還有物理解析度和邏輯解析度，這裡不擴充套件講解了，想了解自行百度吧。
手機解析度牽扯到的就是工作時設計稿的尺寸，只要記住設計尺寸就可以了。
螢幕尺寸：
手機對角線的物理尺寸，單位是英寸。IPhone 6/7/8的尺寸就是4.7英寸……
螢幕尺寸和設計其實關係不大，主要是用來計算螢幕密度的。
螢幕密度(DPI或PPI)：
每英寸的畫素點數。簡單理解就是螢幕密度越大，畫面越逼真細膩。
下面是螢幕密度的計算方法，範例是5英寸，解析度為1920*1080的手機：
螢幕密度牽扯最多的是安卓系統，安卓手機螢幕本身的密度種類非常多，這也是導致了安卓系統需要提供多套切圖的原因。(使用SVG格式圖片可以解決多套切圖和適配的問題，這個我們下面會提到)
Part 3 基礎設計規範——IOS系統
這是蘋果的開發者官網： ofollow,noindex">傳送門
這裡有持續更新的最新設計規範和資源模板，雖然是全英文的，但並不影響閱讀。
設計師應該學會從官方獲得設計資料，這比其他途徑獲得的資料更加全面和權威。
最新系統版本：IOS 11.4.1
中文字型：蘋方黑體
英文字型：San Francisco
官方系統設計模板下載： Apple Design Resources
官方系統設計字型下載：點我下載
下圖是截止到目前，可能還需要支援的機型和對應的設計尺寸：
① 設計稿尺寸
只推薦 750*1334的尺寸 來做設計稿，這是向上向下都最容易適配的尺寸，包括用這個尺寸去適配Android版。
除了IPhone X的比例特殊外，其他的IPhone比例幾乎差不多的，比較容易適配。
使用Sketch設計：
使用375 * 667尺寸即可，開發在Xcode裡也是使用這個尺寸。
匯出的@2x圖適配IPhone 5/5S/5C/SE 6/6S/7/8
匯出的@3x圖適配Iphone 6/6S/7/8 Plus IPhone X
使用Photoshop設計：
畫布就建成750 * 1334尺寸的即可，在這個前提之下，
匯出原尺寸圖片加字尾@2x，適配IPhone 5/5S/5C/SE 6/6S/7/8
匯出1.5倍圖片加字尾@3x，適配IPhone 6/6S/7/8 Plus IPhone X
②常用資料
下面的內容蘋果官方提供的模板文件其實都有對應的資料，可以去官網下載。
字號使用建議(這個不是硬性規定，根據視覺效果酌情使用)
導航文字 34-38px
標題文字 28-34px
正文文字 26-30px
輔助文字 20-24px
Tab bar文字 20px
圖示尺寸建議
APP應用圖示，建議使用1024*1024尺寸去做，逐級縮小去應用到各種場景中。
SKetch已經提供了IOS和Android系統的APP尺寸圖示模板，直接使用就可以了。
③ 界適配
程式內部的功能介面： 這種介面通過寫成自適應的介面可以很好的適配各種機型；如果有特殊的佈局要求，也可以讓開發根據特定機型去調整，不需要單獨為各類機型再做設計稿。
覆蓋全屏類的介面： 比如閃屏、啟動頁、引導介面、插畫頁面等等，這類覆蓋全屏的介面必須要單獨為IPhone X的比例重新繪製或者調整設計稿。
其他的IPhone機型，遇到這種介面，整體放大縮小、微調之後按照各機型的設計尺寸輸出對應的切圖就可以了。
IPhone X的安全區域： IPhone X的安全區域就是扣除頂部劉海狀態列和底部虛擬home鍵之後，中間的內容顯示區域。如果你不得不使用IPhoneX的尺寸做設計稿，請一定設定好參考線，不要把內容做進這兩塊區域內部。
④ 介面標註切圖
標註切圖純粹是重複性勞動，但還要花費大量時間。不過現在配合SKetch外掛，基本上實現了標註切圖的自動化，所以效率已經提升了非常多了。
這裡就不用例項說明了，有需要可以檢視之前的文章。
———————— 簡單理解標註切圖的原理 ————————
1. 簡單理解APP構成：
下圖是IOS開發工具Xcode裡的一個空白頁面，圖片的文字標註請仔細閱讀。
本質上，開發寫APP介面和設計做設計稿是一樣的，只不過兩者實現方法不同。
APP的構成遠遠要比上圖寫的複雜的多，我們這裡使用最簡單的理解方式。
2. 設計稿的標註
根據上圖我們可以理解設計稿和程式之間的關係：
設計稿裡的按鈕、文字、圖示、列表、背景色、線條等等所有的設計元素，
在Xcode裡都有對應的控制元件，設計元素必須使用對應控制元件，才能在APP的介面裡顯示出來。
設計稿的標註，實質上是標註的各類控制元件的屬性以及相對於其他控制元件的關係：
設計稿中：
文字的自身屬性：顏色、字號、字型、行間距、對齊方式、透明度；
圖片的自身屬性：寬高、間距、距離、透明度。
程式的對應控制元件：
Label的自身屬性：顏色、字號、字型、行間距、對齊方式、透明度；
Image View的自身屬性：寬高、間距、距離、透明度。
實際上各類控制元件的屬性也要比這個複雜的多，這裡是最簡單理解的舉例說明。
另外關於切圖標註的工具：
本地化工具我個人推薦外掛Sketch Measure，幾乎很少需要手工標註，匯出HTML後，扔給開發，他們想看什麼屬性自己點選檢視就是了，所以我們這裡瞭解下標註原理就行。
而對於一些習慣使用線上工具的朋友，我個人推薦使用Mockplus的 iDoc(點這裡使用) ，這是一個產品設計協作平臺。
簡單來說呢，這是一個把原型圖，互動稿，設計稿，切圖標註都整合到一起的工具。基本上團隊所有人都可以在這個線上工具裡共同協作，對溝通和效率起到了很大的提升作用。
它的核心功能包括：智慧標註、一鍵切圖、多樣批註、互動原型、全貌畫板、團隊管理等等，非常適合公司的整個團隊進行協作開發。
各位根據自身，情況靈活運用吧。
Sketch Measure去Sketch.im下載
3. 設計稿的切圖
———————— 切圖輸出套數 ————————
IOS目前常用的還是輸出2套PNG圖片。@2x、@3x的字尾，是為了在Xcode匯入圖片資源時，識別對應機型所用的圖片。
Xcode裡提供了相應的位置，相同命名圖片會根據字尾填入到對應的位置。
———————— 切圖輸出格式 ————————
目前Sketch提供了PNG、JPG、TIFF、WebP、PDF、EPS、SVG格式。
但是對於UI設計來說，常用的圖片格式就以下幾種：
PNG 常用圖片格式，沒什麼解釋的，目前大部分產品還在使用此格式；
WebP 安卓的圖片格式，同等質量圖片下體積非常小，非常推薦給安卓使用；
SVG 向量格式，完美解決適配問題，但也有部分缺點。
想具體瞭解WebP和SVG，可以檢視之前的文章。
———————— 切圖輸出規範 ————————
前提：同一型別、位置的切圖，請保證切圖尺寸、規格一致，圖片尺寸為偶數大小。
1.有操作功能、可點選的功能性切圖： 最小點選區域問題
蘋果官方提供的能準確點選的最小點選區域：88 * 88，單位px。
小於這個範圍也可以點選，但是點選不靈敏，體驗較差。
對於比這個範圍小的可點選按鈕，周圍需要用透明區域填充後再輸出切圖。
解釋下為什麼用透明區域填充來擴大點選區域範圍：
圖示這東西，對設計師來說沒區別，都是圖片。
但對開發來說，可操作和不可操作的圖示是兩種型別的控制元件，圖示的樣式不過是傳給該控制元件的顯示圖片罷了。
可操作的功能圖示在Xcode對應控制元件是UIButton。
對控制元件來說，如果不在程式碼裡明確固定控制元件的大小、點選區域等等各類屬性，設計師傳給我多大的圖，這個控制元件就會被這張圖撐到多大。
你給我一張40*40的按鈕切圖，如果開發什麼都不做，那這個UIButton在手機介面裡就被撐到40*40的大小。
我也可以在Xcode裡寫幾行程式碼，固定圖片的大小就是40*40，擴大UIButton這個控制元件的大小變成88*88，這樣這個控制元件的點選區域也擴大了。
但是一張規範的切圖就能解決的事情，為什麼還要在程式碼裡再手動加幾行呢？
一個可點選按鈕需要加一行程式碼，整個APP就可能多加上百行上千行的程式碼。
規範的切圖也是可以提升產品開發效率的。
2.非功能性切圖，比如列表圖示、說明圖示等，按統一規格的最小尺寸切。
這麼切還可以減少一些程式因圖片資源大小導致的體積大小問題。
這類切圖，對應的是UIImageView控制元件，就是一張圖片，無操作，只是佔位和顯示。
所以你按照相同規格，最小尺寸切就可以了。
有朋友問：一定要切正方形的嗎？如果圖示都是30*20的，那我統一切30*20的行不行
答案是：可以，這個沒有完全的硬性規定。雖然我是設計師，但也會去寫一些IOS程式。正方形規格切圖就是為了方便開發，當然還是推薦你使用正方形規格來切圖。
但實際開發過程中，只要保證同一位置，切圖規格統一就可以。
切圖輸出狀態：
同一按鈕、元素的不同狀態，要明確命名對應狀態之後，分別輸出對應圖片。
下圖示例按鈕的選中狀態多出現在遊戲APP中，這裡僅表示說明。
———————— 切圖的命名規則 ————————
不要使用中文、特殊字元，請使用英文、下劃線、數字對切圖命名，數字不要打頭。
命名方式儘量清晰，推薦採用： 種類_位置_功能_狀態
示例說明：[email protected]
開發看到就會明白：這是位於首頁，處於正常狀態的搜尋按鈕2倍切圖。
Part 4 基礎設計規範——Android系統
這是Android Material Design中文版的地址： 傳送門
Android的官方地址資料不容易過去看啊，這裡也就不放官網的地址了。
最新系統版本：Android 9.0
中文字型：思源黑體
英文字型：Robot
Android這裡就不放下載地址了，因為官方的下載連結可能不是所有人都上的去。
Android不整理各類機型的尺寸規範了，資料零散，難以整理。所以我們從螢幕密度這裡理解設計規範就可以了。
①Android手機螢幕密度
上文我們提過螢幕密度的計算方式，安卓手機因為各種螢幕尺寸和解析度，導致如果單純按照數值計算，可能螢幕密度種類會多到讓設計師崩潰。
所以為了解決這個問題，安卓手機出廠時，螢幕有自己初始的固定密度，系統會根據這些螢幕密度自行適配，下圖是對應的螢幕密度表：
②Android的開發單位以及設計尺寸
正因為Android手機解析度多樣，為了保證同一設計在不同螢幕密度的手機上顯示效果一致，Android系統使用了下面兩個單位：
dp ：android開發單位，相當於比例換算單位。使用該單位，可以保證控制元件在不同密度的螢幕上按照比例解析顯示成相同視覺效果；
sp ：android開發文字單位，和dp類似，也是為了保證文字在不同密度的螢幕上顯示相同的效果。
當螢幕密度為MDPI（160DPI）時，1dp=1px
當螢幕密度為MDPI（160DPI）時，1sp=1px
按照上面兩個公式的換算，同樣dp大小的圖片在不同螢幕密度的手機上如下圖所示，
基本可以保證圖片顯示效果在各類手機上相同。
設計稿尺寸：
通過上面的分析，在xHDPI這個密度等級下，倍數關係為2，推薦使用 720*1280尺寸 做設計稿，換算方便，適配容易。
不過目前的現狀是，如果公司的產品有IOS和Android兩個版本，基本上設計師只會做IOS的版本，然後套用給Android，這樣做也是可以的。兩者的切圖，在這個設計尺寸之下是可以通用的。
③設計稿的標註
推薦使用dp和sp進行標註。但是呢，如果你用720*1280做設計，使用畫素單位標註，現在也不會影響什麼。
因為前面已經提到過IOS的標註了，這裡也就不再贅述了。
④設計稿的切圖
理論上，對於Android系統來說，如果你想完美適配各種機型，應該為不同的螢幕密度提供不同尺寸大小的切圖，而Android的開發工具也為不同的螢幕密度提供了對應的資原始檔夾。
但實際上，並不需要提供上面密度表那麼多套的切圖，程式安裝包的大小基本就是由於圖片佔用了太多的位置。
所以需要提供多少套圖片，請和公司的開發溝通，確定你們的產品實際支援哪些螢幕密度。
圖片格式：WebP和SVG
我個人是推薦現在為Android系統使用WebP格式，體積小，顯示效果好；
而SVG這種向量圖片格式完美解決了Android多套切圖的問題，一套切圖，完美適配各種螢幕密度。
最小可點選區域：
48dp ：這和IOS的最小點選區域性質是一樣的，都是考慮到手指點選的靈敏性的問題，設計可點選控制元件的時候要考慮到這一點。
更多的注意事項和IOS切圖是相同的，這裡不再贅述了。
Part 5 UI設計師的職業道路
如今的移動UI設計行業已經很成熟了，針對移動UI設計的便捷工具層出不窮；移動UI設計的理論體系知識也已經漸漸完善。但這些都是外部因素，社會發展了，我們跟著一起向前適應就好了；
但對於設計師工作能力的提升，還需要有明確的方法體系，更要有清晰的職業規劃！
很多設計師工作了幾年，卻一直在原地踏步，苦苦掙扎，甚至沒有職業目標。
目前我工作5年，就從我自身的體會來分享我自己的方式，當然精英設計怪就別跟我較真了，我代表的是那90%還在向上努力爬的普通設計怪~
工作能力，不僅僅指的是自身的專業技術水平，還包含了各種綜合性能力，請務必對自己有明確的職業規劃和能力發展軌跡。
工作0~2年
這個階段對於新人來說，是一個設計能力和工作經驗的快速積累過程，不誇張的說，這兩年內的經驗可以決定你之後的職業發展道路是否順利。
此階段目的：提升設計專業能力、完善理論知識、積累實際專案經驗
這個階段就別想著一專多能了，先把那個“一專”搞好就可以了，當然不是不讓你學習別的知識，而是說重心應該發在提升目前的專業能力上。
提升設計能力：
一方面，通過公司的實際商業專案提升能力，這個沒什麼可說的；
另一方面，業餘時間務必進行大量的作品練習，無論是臨摹、還是重設計都可以，目的就是一個： 量大 從優！
臨摹請用高質量作品，臨摹一堆垃圾還不如不做，臨摹請務必做到99%以上的相似度，不然那不叫臨摹，臨摹的過程是考驗軟體功力、設計技法能否完美複製的過程。
重設計請使用成熟知名產品，不要重設計一堆垃圾應用，成熟產品每個介面的佈局、樣式、功能、邏輯都是經過深思熟慮後呈現給你的。
重設計的目的是要體會產品背後反映的設計意圖，不是為了重設計而重設計。
所以重設計之前請自己思考原產品這麼做的目的再動手。
完善理論知識：
沒有理論體系方法的支援，在設計道路上是走不遠的。
現在關於UI設計的知識網站已經很多了，當然不侷限在這類專業性網站上。
人人都是PM、UI中國、25學堂等等很多這類網站都是學習理論知識的好地方。
當然，你也可以關注我嘛~（給自己打個廣告，吼吼~）
工作2~3年
3年對於網際網路從業者是一個坎兒，其實這是相對於職業規劃來說的。
通過前兩年的積累，對於UI設計本職工作已經可以勝任了，接下來的要考慮的是個人的職業發展規劃了。
此階段目的：拓展技能、明確職業目標、為進大廠做準備
拓展技能：
這個階段可以考慮“一專多能”的多能了，作為UI設計師，可以學習的東西實在太多了，互動、動效、產品設計、開發等等。
不要求你達到那些專業從業者的地步，你要學到專業程度，還幹什麼UI設計啊。
目的是為了拓展自己的技能樹，為自己提供更多的競爭力，這個習慣要一直保持伴隨之後的工作……
明確職業目標：
設計師最怕的就是迷茫，如果說前兩年因為剛入行，對行業，對自身都不完全瞭解，那情有可原。但工作兩年後，對自身的情況再不清醒那就說不過去了。
可以從以下方面考慮：
是始終堅持在一線崗位的設計技術大牛，還是想做設計管理者，亦或者想從UI設計師轉職成互動設計、產品設計等等。
工作兩年已經對自身，對行業有理解了，自己的能力是否適合設計崗位，對設計的熱愛是否能經久不變都可以作為參考調節了。
為進入大廠做準備：
剛工作，可能限制於能力實力問題，委身於小公司。
但是！雖然我們身在小公司，但心要在BATJ TMD，
Apple、Google也不是不可以！
Skr！Skr！
這階段可以為大廠準備一下，當然不是讓你工作兩年多就去面試啊，如果你的能力特別突出，就當我放屁吧~
意思是，可以以進入大廠為目標，綜合性的考慮自身的缺陷並儘量彌補。
千萬別以為就在小公司將就著幹吧，反正拿的錢也差不多，大公司的滋味你是體會不到的。
拿同樣的薪水，在小公司和大公司的感受可是完全不同的，小公司對個人的眼界、人脈、能力提升的幫助都不可能和大公司相提並論。
工作3~5年
對網際網路人來說，3年一個坎，5年一個坎，都是職業規劃的節點時間。
3到5年的設計師，如果你真的用心工作了，一個人可以實實在在的頂起來一個專案。
我們上面說，為進入大廠做準備。在這個階段，可以考慮進入一些中大型企業，提升個人的綜合能力、拓展人脈。
部分企業也比較喜歡要這個階段的設計師，有工作能力，職業道路又剛開始，搞不好可以在公司培養起來。
此階段的目的：提升綜合能力、拓展人脈圈子
這時的個人專業水平其實已經不是問題，繼續在工作中磨練積累就可以了；
這裡需要的是打開個人在職場上的道路。
說實話，即使是網際網路行業，搞技術除了要保證自身技術過硬之外，會不會發展人脈，能不能提升綜合能力才是最後職業道路能不能走遠走高的決定因素。
提升綜合能力：
與各部門的溝通能力、對設計資源的協調能力、在公司業務上的話語能力、對專案的把控能力等等，都算綜合能力，這是對內部的能力。
不要以為對設計師來說，我悶著頭接需求，做設計就可以了。
這樣的設計師，也許你可以踏踏實實當個接需求的小設計，但你永遠也只是一個這類的設計，對於有更高更強的職業追求的人來說，沒有幫助。
所以，張開嘴、邁開腿，一步一步嘗試去推動自身進步吧，這個沒什麼技術性方法，必須要自己親自去做。
拓展人脈圈子：
人脈對個人職業道路的幫助，遠遠要比專業能力的幫助要大的多，這是對外的能力。
設計師的圈子，說實話不算大。搞技術的，本身就坐辦公室，而做設計的人本身性格也有一部分原因，但還是請你努力拓展自己的人脈。
對於自身的專業圈子，努力分享自己的設計經驗、工作心得，總結自己的體會，釋出到各類設計專業論壇上，積極的幫助別人，這都算一種拓展方式。
時間久了，就會結識非常多的設計界朋友，設計大牛也會逐漸注意到你，這些都是你職業道路上的寶貴資源。
還可以認識幾個不錯的獵頭朋友，有好的職位，他們都會優先想到你的。
這也是我寫的最後一篇關於基礎規範類文章，也算是整理一下工作到現在的基礎常識類內容，以後不再寫這類基礎文章了。
人總要進步的，設計師還是要靠乾貨作品來撐腰的，對吧。
以後發的內容都是我做過的實際商業專案，我會把設計經驗和工作方法融入到這些作品例項裡來寫，這總比我單純講理論知識要強。
本文經作者授權轉載。
原文地址: https://www.ui.cn/detail/378664.html
原作者：精分青年滷大溼，懂互動、愛設計、可程式設計的全棧設計師；目前就職於某軟體技術企業，任職UI設計師，互動設計師。在通訊、安防、智慧TV、企業管理、直播等產品領域都有涉獵。喜歡總結分享自己的工作經驗和感悟，喜歡的話可關注大溼，UI中國ID：精分青年滷大溼。
推薦：檢視最受歡迎的 301 個設計網站 → http://hao.shejidaren.com
交流：結交更多有才華的設計師？請加入UI設計QQ群，與50000名設計師交流設計。