2018新版UI設計規範（完整版）

來自專欄 PS視覺設計

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中文版的地址

https://www.mdui.org/design/

Android的英文版地址

https://material.io/

最新系統版本：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年的設計師，如果你真的用心工作了，一個人可以實實在在的頂起來一個項目。

我們上面說，為進入大廠做準備。在這個階段，可以考慮進入一些中大型企業，提升個人的綜合能力、拓展人脈。

部分企業也比較喜歡要這個階段的設計師，有工作能力，職業道路又剛開始，搞不好可以在公司培養起來。

此階段的目的：提升綜合能力、拓展人脈圈子

這時的個人專業水平其實已經不是問題，繼續在工作中磨練積累就可以了；

這裡需要的是打開個人在職場上的道路。

說實話，即使是互聯網行業，搞技術除了要保證自身技術過硬之外，會不會發展人脈，能不能提升綜合能力才是最後職業道路能不能走遠走高的決定因素。

提升綜合能力：

與各部門的溝通能力、對設計資源的協調能力、在公司業務上的話語能力、對項目的把控能力等等，都算綜合能力，這是對內部的能力。

不要以為對設計師來說，我悶著頭接需求，做設計就可以了。

這樣的設計師，也許你可以踏踏實實當個接需求的小設計，但你永遠也只是一個這類的設計，對於有更高更強的職業追求的人來說，沒有幫助。

所以，張開嘴、邁開腿，一步一步嘗試去推動自身進步吧，這個沒什麼技術性方法，必須要自己親自去做。

拓展人脈圈子：

人脈對個人職業道路的幫助，遠遠要比專業能力的幫助要大的多，這是對外的能力。

設計師的圈子，說實話不算大。搞技術的，本身就坐辦公室，而做設計的人本身性格也有一部分原因，但還是請你努力拓展自己的人脈。

對於自身的專業圈子，努力分享自己的設計經驗、工作心得，總結自己的體會，發布到各類設計專業論壇上，積極的幫助別人，這都算一種拓展方式。

時間久了，就會結識非常多的設計界朋友，設計大牛也會逐漸注意到你，這些都是你職業道路上的寶貴資源。

還可以認識幾個不錯的獵頭朋友，有好的職位，他們都會優先想到你的。

作者自述

這也是我寫的最後一篇關於基礎規範類文章，也算是整理一下工作到現在的基礎常識類內容，以後不再寫這類基礎文章了。

人總要進步的，設計師還是要靠乾貨作品來撐腰的，對吧。

以後發的內容都是我做過的實際商業項目，我會把設計經驗和工作方法融入到這些作品實例里來寫，這總比我單純講理論知識要強。

如何獲取？

回復sketch全套教程領取

相關文章

我要進群

iOS設計尺寸規範

Android設計尺寸規範

小程序設計規範

平面設計基礎常識匯總

令人驚嘆的網頁設計長什麼樣？

超贊的27個高質量免費圖片網站

UI界面靈感借鑒

H5十大雲端神器「仙」界有名

120G頂級C4D教程強勢來襲

你和大神之間只差一份高級進階教程

Web UI 網頁設計規範

iPhone X 人機交互指南及其設計細節

一款APP從設計到切圖標註適配全記錄

2018年網頁設計的19個趨勢！

21世紀最強設計配色方法

7種UI設計趨勢超流行

8大史詩級海報設計技巧

WUI | 極簡網頁界面設計

2018現役最全的14種平面設計風格

設計報價 | 一個LOGO該如何報價？

10個讓人上癮的設計神器

全鏈路UI設計師了解一下