2021-11-21 資深UI設計者
1.準備工作
設計工具
Sketch
精不精通Sketch，就看插件用的溜不溜，推薦個網站：http://sketch.cm/
無論是學習Sketch，還是搜插件、找素材，都是Sketch使用者的優選項。
Sketch是OS X平臺獨占，需要下載Sketch可以到這個網站去下載。
這里推薦個Mac平臺應用的下載網站，使用Mac的小伙伴可以去這里下：http://xclient.info/
我個人是很推薦使用Sketch做UI設計的，軟件本身已經提供了大量的IOS和Android系統設計資源，配合各類插件，幾乎無所不能。
Photoshop
相比于Sketch來說，體型胖了點，在UI設計上略遜一籌。不過因為Sketch是OS X獨占，所以因為平臺限制的原因，用PS設計也沒有問題。
我很久沒用它做UI設計了，也沒啥可推薦的了。
Adobe XD
全稱為Adobe Experience Design；這是一款集原型、設計和交互于一體的小清新時代風格的設計軟件。雖然有人說，Adobe XD將會是Skech的勁敵。然而在windows系統當中，Adobe XD的確是產品原型設計領域最順手的設計軟件。它使用簡單，界面整潔，雖然之前一直使用的是Axure 8.0，但看來，Adobe XD在界面、素材以及設計操作上的確甩了Axure好幾條街，至少它成功的吸引到了我。
做好版本管理、文件歸檔的工作
專業水平不僅體現在設計能力之上，優秀的管理能力也是重要的職業素養。
合理規劃好設計版本，進行明確的文件歸檔工作，有助于提高設計師的工作效率。
這里不贅述了，每個人有自己的版本管理方式，不過目標只有一個：清晰高效。
2.關于手機的基礎概念
這里的概念性內容不要強行記憶，理解即可，它是做移動UI設計的理論常識。
手機分辨率
手機屏幕的像素點數。比如750*1334、720*1280等等，細分還有物理分辨率和邏輯分辨率，這里不擴展講解了，想了解自行百度吧。
手機分辨率牽扯到的就是工作時設計稿的尺寸，只要記住設計尺寸就可以了。
屏幕尺寸
手機對角線的物理尺寸，單位是英寸。IPhone 6/7/8的尺寸就是4.7英寸……
屏幕尺寸和設計其實關系不大，主要是用來計算屏幕密度的。
屏幕密度(DPI或PPI)
每英寸的像素點數。簡單理解就是屏幕密度越大，畫面越逼真細膩。
下面是屏幕密度的計算方法，范例是5英寸，分辨率為1920*1080的手機：
屏幕密度牽扯最多的是安卓系統，安卓手機屏幕本身的密度種類非常多，這也是導致了安卓系統需要提供多套切圖的原因。(使用SVG格式圖片可以解決多套切圖和適配的問題，這個我們下面會提到)
3.基礎設計規范——IOS系統
這是蘋果的開發者官網：https://developer.apple.com/
這里有持續更新的最新設計規范和資源模板，雖然是全英文的，但并不影響閱讀。
設計師應該學會從官方獲得設計資料，這比其他途徑獲得的資料更加全面和權威。
最新系統版本：IOS 11.4.1
中文字體：蘋方黑體
英文字體：San Francisco
官方系統設計模板下載：
https://developer.apple.com/design/resources/
官方系統設計字體下載：
https://developer.apple.com/fonts/
下圖是截止到目前，可能還需要支持的機型和對應的設計尺寸：
設計稿尺寸
只推薦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的尺寸做設計稿，請一定設置好參考線，不要把內容做進這兩塊區域內部。
IPhone X規范：iPhone X 人機交互指南及其設計細節
簡單理解APP構成
下圖是IOS開發工具Xcode里的一個空白頁面，圖片的文字標注請仔細閱讀。
本質上，開發寫APP界面和設計做設計稿是一樣的，只不過兩者實現方法不同。
APP的構成遠遠要比上圖寫的復雜的多，我們這里使用最簡單的理解方式。
設計稿的標注
根據上圖我們可以理解設計稿和程序之間的關系：
設計稿里的按鈕、文字、圖標、列表、背景色、線條等等所有的設計元素，
在Xcode里都有對應的控件，設計元素必須使用對應控件，才能在APP的界面里顯示出來。
設計稿的標注，實質上是標注的各類控件的屬性以及相對于其他控件的關系：
設計稿中：
文字的自身屬性：顏色、字號、字體、行間距、對齊方式、透明度；
圖片的自身屬性：寬高、間距、距離、透明度。
至于標注在上篇文章有詳解：一款APP從設計到切圖標注適配全記錄，這里就不累贅了！
程序的對應控件
Label的自身屬性：顏色、字號、字體、行間距、對齊方式、透明度；
Image View的自身屬性：寬高、間距、距離、透明度。
實際上各類控件的屬性也要比這個復雜的多，這里是最簡單理解的舉例說明。
如今使用本地化插件Sketch Measure，幾乎不用手工標注，標注導出HTML后，扔給開發，他們想看什么屬性自己點擊查看就是了，所以我們這里了解下標注原理就行。
而一些線上工具的插件，比如藍湖、墨刀、Mockplus等等，功能更加豐富，各位根據自身情況靈活運用吧。
Sketch Measure去http://Sketch.im下載
設計稿的切圖
IOS目前常用的還是輸出2套PNG圖片。@2x、@3x的后綴，是為了在Xcode導入圖片資源時，識別對應機型所用的圖片。
Xcode里提供了相應的位置，相同命名圖片會根據后綴填入到對應的位置。
目前Sketch提供了PNG、JPG、TIFF、WebP、PDF、EPS、SVG格式。
但是對于UI設計來說，常用的圖片格式就以下幾種：
PNG 常用圖片格式，沒什么解釋的，目前大部分產品還在使用此格式；
WebP 安卓的圖片格式，同等質量圖片下體積非常小，非常推薦給安卓使用；
SVG 矢量格式，完美解決適配問題，但也有部分缺點。
想具體了解WebP和SVG，可以查看之前的文章。
切圖輸出規范
前提：同一類型、位置的切圖，請保證切圖尺寸、規格一致，圖片尺寸為偶數大小。
1.有操作功能、可點擊的功能性切圖：最小點擊區域問題
蘋果官方提供的能準確點擊的最小點擊區域：88 * 88px;
小于這個范圍也可以點擊，但是點擊不靈敏，體驗較差。
對于比這個范圍小的可點擊按鈕，周圍需要用透明區域填充后再輸出切圖。
解釋下為什么用透明區域填充來擴大點擊區域范圍：
圖標這東西，對設計師來說沒區別，都是圖片。
但對開發來說，可操作和不可操作的圖標是兩種類型的控件，圖標的樣式不過是傳給該控件的顯示圖片罷了。
可操作的功能圖標在Xcode對應控件是UIButton。
對控件來說，如果不在代碼里明確固定控件的大小、點擊區域等等各類屬性，設計師傳給我多大的圖，這個控件就會被這張圖撐到多大。
你給我一張40*40的按鈕切圖，如果開發什么都不做，那這個UIButton在手機界面里就被撐到40*40的大小。
我也可以在Xcode里寫幾行代碼，固定圖片的大小就是40*40，擴大UIButton這個控件的大小變成88*88，這樣這個控件的點擊區域也擴大了。
但是一張規范的切圖就能解決的事情，為什么還要在代碼里再手動加幾行呢？
一個可點擊按鈕需要加一行代碼，整個APP就可能多加上百行上千行的代碼。
規范的切圖也是可以提升產品開發效率的。
2.非功能性切圖，比如列表圖標、說明圖標等，按統一規格的最小尺寸切。
這么切還可以減少一些程序因圖片資源大小導致的體積大小問題。
這類切圖，對應的是UIImageView控件，就是一張圖片，無操作，只是占位和顯示。
所以你按照相同規格，最小尺寸切就可以了。
有朋友問：一定要切正方形的嗎？如果圖標都是30*20的，那我統一切30*20的行不行
答案是：可以，這個沒有完全的硬性規定。雖然我是設計師，但也會去寫一些IOS程序。正方形規格切圖就是為了方便開發，當然還是推薦你使用正方形規格來切圖。
但實際開發過程中，只要保證同一位置，切圖規格統一就可以。
切圖輸出狀態：
同一按鈕、元素的不同狀態，要明確命名對應狀態之后，分別輸出對應圖片。
下圖示例按鈕的選中狀態多出現在游戲APP中，這里僅表示說明。
命名規范
不要使用中文、特殊字符，請使用英文、下劃線、數字對切圖命名，數字不要打頭。
命名方式盡量清晰，推薦采用：種類_位置_功能_狀態
示例說明：
btn_homepage_seach_normal@2x.png
開發看到就會明白：這是位于首頁，處于正常狀態的搜索按鈕2倍切圖。
4.基礎設計規范——Android系統
這是Android Material Design中文版的地址
Android的英文版地址
最新系統版本：Android 9.0
中文字體：思源黑體
英文字體：Robot
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切圖是相同的，這里不再贅述了。
5.UI設計師的職業道路
如今的移動UI設計行業已經很成熟了，針對移動UI設計的便捷工具層出不窮；移動UI設計的理論體系知識也已經漸漸完善。但這些都是外部因素，社會發展了，我們跟著一起向前適應就好了；
但對于設計師工作能力的提升，還需要有明確的方法體系，更要有清晰的職業規劃！
很多設計師工作了幾年，卻一直在原地踏步，苦苦掙扎，甚至沒有職業目標。
目前我工作5年，就從我自身的體會來分享我自己的方式，當然資深的、精英設計就別跟我較真了，我代表的是那90%還在向上努力爬的普通設計師~
工作能力，不僅僅指的是自身的專業技術水平，還包含了各種綜合性能力，請務必對自己有明確的職業規劃和能力發展軌跡。
工作0~2年
這個階段對于新人來說，是一個設計能力和工作經驗的快速積累過程，不夸張的說，這兩年內的經驗可以決定你之后的職業發展道路是否順利。
此階段目的：提升設計專業能力、完善理論知識、積累實際項目經驗
這個階段就別想著一專多能了，先把那個“一專”搞好就可以了，當然不是不讓你學習別的知識，而是說重心應該發在提升目前的專業能力上。
提升設計能力：
一方面，通過公司的實際商業項目提升能力，這個沒什么可說的；
另一方面，業余時間務必進行大量的作品練習，無論是臨摹、還是重設計都可以，目的就是一個：量大 從優！
臨摹請用高質量作品，臨摹一堆垃圾還不如不做，臨摹請務必做到99%以上的相似度，不然那不叫臨摹，臨摹的過程是考驗軟件功力、設計技法能否完美復制的過程。
重設計請使用成熟知名產品，不要重設計一堆垃圾應用，成熟產品每個界面的布局、樣式、功能、邏輯都是經過深思熟慮后呈現給你的。
重設計的目的是要體會產品背后反映的設計意圖，不是為了重設計而重設計。
所以重設計之前請自己思考原產品這么做的目的再動手。
完善理論知識：
沒有理論體系方法的支持，在設計道路上是走不遠的。
現在關于UI設計的知識網站已經很多了，當然不局限在這類專業性網站上。
人人都是PM、UI中國、25學堂等等很多這類網站都是學習理論知識的好地方。
當然，你也可以關注我嘛~（給自己打個廣告，吼吼~）
工作2~3年
3年對于互聯網從業者是一個坎兒，其實這是相對于職業規劃來說的。
通過前兩年的積累，對于UI設計本職工作已經可以勝任了，接下來的要考慮的是個人的職業發展規劃了。
此階段目的：拓展技能、明確職業目標、為進大廠做準備
拓展技能：
這個階段可以考慮“一專多能”的多能了，作為UI設計師，可以學習的東西實在太多了，交互、動效、產品設計、開發等等。
不要求你達到那些專業從業者的地步，你要學到專業程度，還干什么UI設計啊。
目的是為了拓展自己的技能樹，為自己提供更多的競爭力，這個習慣要一直保持伴隨之后的工作……
明確職業目標：
設計師最怕的就是迷茫，如果說前兩年因為剛入行，對行業，對自身都不完全了解，那情有可原。但工作兩年后，對自身的情況再不清醒那就說不過去了。
可以從以下方面考慮：
是始終堅持在一線崗位的設計技術大牛，還是想做設計管理者，亦或者想從UI設計師轉職成交互設計、產品設計等等。
工作兩年已經對自身，對行業有理解了，自己的能力是否適合設計崗位，對設計的熱愛是否能經久不變都可以作為參考調節了。
為進入大廠做準備：
剛工作，可能限制于能力實力問題，委身于小公司。
但是！雖然我們身在小公司，但心要在BAT CAO TMD，
Apple、Google也不是不可以！
Skr！Skr！
這階段可以為大廠準備一下，當然不是讓你工作兩年多就去面試啊，如果你的能力特別突出，就當我放屁吧~
意思是，可以以進入大廠為目標，綜合性的考慮自身的缺陷并盡量彌補。
千萬別以為就在小公司將就著干吧，反正拿的錢也差不多，大公司的滋味你是體會不到的。
拿同樣的薪水，在小公司和大公司的感受可是完全不同的，小公司對個人的眼界、人脈、能力提升的幫助都不可能和大公司相提并論。
工作3~5年
對互聯網人來說，3年一個坎，5年一個坎，都是職業規劃的節點時間。
3到5年的設計師，如果你真的用心工作了，一個人可以實實在在的頂起來一個項目。
我們上面說，為進入大廠做準備。在這個階段，可以考慮進入一些中大型企業，提升個人的綜合能力、拓展人脈。
部分企業也比較喜歡要這個階段的設計師，有工作能力，職業道路又剛開始，搞不好可以在公司培養起來。
此階段的目的：提升綜合能力、拓展人脈圈子
這時的個人專業水平其實已經不是問題，繼續在工作中磨練積累就可以了；
這里需要的是打開個人在職場上的道路。
說實話，即使是互聯網行業，搞技術除了要保證自身技術過硬之外，會不會發展人脈，能不能提升綜合能力才是最后職業道路能不能走遠走高的決定因素。
提升綜合能力：
與各部門的溝通能力、對設計資源的協調能力、在公司業務上的話語能力、對項目的把控能力等等，都算綜合能力，這是對內部的能力。
不要以為對設計師來說，我悶著頭接需求，做設計就可以了。
這樣的設計師，也許你可以踏踏實實當個接需求的小設計，但你永遠也只是一個這類的設計，對于有更高更強的職業追求的人來說，沒有幫助。
所以，張開嘴、邁開腿，一步一步嘗試去推動自身進步吧，這個沒什么技術性方法，必須要自己親自去做。
拓展人脈圈子：
人脈對個人職業道路的幫助，遠遠要比專業能力的幫助要大的多，這是對外的能力。
設計師的圈子，說實話不算大。搞技術的，本身就坐辦公室，而做設計的人本身性格也有一部分原因，但還是請你努力拓展自己的人脈。
對于自身的專業圈子，努力分享自己的設計經驗、工作心得，總結自己的體會，發布到各類設計專業論壇上，積極的幫助別人，這都算一種拓展方式。
時間久了，就會結識非常多的設計界朋友，設計大牛也會逐漸注意到你，這些都是你職業道路上的寶貴資源。
還可以認識幾個不錯的獵頭朋友，有好的職位，他們都會優先想到你的。
作者自述
這也是我寫的最后一篇關于基礎規范類文章，也算是整理一下工作到現在的基礎常識類內容，以后不再寫這類基礎文章了。
人總要進步的，設計師還是要靠干貨作品來撐腰的，對吧。
以后發的內容都是我做過的實際商業項目，我會把設計經驗和工作方法融入到這些作品實例里來寫，這總比我單純講理論知識要強。
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( 91whvog3.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務