?寫在前面的話??

很多剛入行的UI設計師開始接觸移動端UI設計的時候，對于基礎的界面尺寸規范可能會有一定的模糊認知，導致做出來的界面往往會感覺不是那么和諧，卻也不知道怎么去完善和改進。

對于大多數的剛入行者來說，如果不是有天賦的那種設計師，了解常用的一些尺寸規范和方法，才能更好的形成自己的專業概念。

?1、設計軟件??

sketch

作為現在做UI的主流軟件，sketch不僅操作便利、易于上手，軟件本身也非常輕便，對于電腦的型號也沒有很大的要求，當然，只要是蘋果電腦即可。除此之外，sketch自身所含括的UI組件和iOS的系統設計資源也是非常加分的附加值。

推薦兩個網站：https://oursketch.com/ —無論是學習Sketch，還是搜插件、找素材，都是一個寶庫。

另外一個網站是https://xclient.info/ —下載各種Mac系統的軟件網站平臺。

photoshop

無所不能的ps，不管是Mac還是Windows，沒有平臺的限制，能實現的效果多樣化。弊端在于，軟件體型太大，在做UI設計的時候對尺寸標準的判定不是很友好。好在，現在網上關于ps的插件資源已經很豐富，不管是切圖還是標準，都有對應都插件，用起來也還是很方便的。

綜合考慮，有條件的話做UI我還是比較推薦用Mac平臺。

?2、移動端系統的相關概念??

手機分辨率：

每個手機屏幕不一樣對應像素大小也不一樣。其實所有的畫面都是由一個個的小點組成的，這一個個的小點就稱之為像素。一塊方形的屏幕橫向有多少個點，豎向有多少個點，相乘之后的數值就是這塊屏幕的像素(數碼相機的像素也是這么乘積出來的)。

屏幕尺寸：

為了方便表示屏幕的大小，通常用橫向像素×豎向像素的方式來表示，例如電腦屏幕中很常見的1024×768像素，以及手機屏幕中很常見的240×320像素。

而所謂的4:3、16:9、16:10、21:9這些比值其實就是 分辨率中橫向像素與豎向像素的比值 。

4：3是我們最初所用的分辨率尺寸比，以前的電腦屏幕幾乎都是4:3；隨后寬屏顯示器出現，16:10開始流行，比較常見的分辨率有1280×800像素。

比如手機對角線的物理尺寸，單位是英寸，iPhone SE(4英寸)、iPhone 6s/7/8(4.7英寸)、iPhone 6s/7/8 Plus(5.5英寸)、iPhone X(5.8英寸)。

?3、界面設計基礎規范——iOS??

屏幕設計尺寸

蘋果手機采用的是Retina視網膜屏幕，其中iPhone 6s/7/8 Plus和iPhone X采用的是3倍率的分辨率，其他都是采用的2倍率的分辨率，無論是欄高度還是應用圖標，設計師提供給開發人員的切片大小，前者始終是后者的1.5倍，并分別以@3x和@2x在文件名結尾命名，程序再根據不同分辨率自動加載@3x或者@2x的切片。

在開始圖稿的時候以什么樣的尺寸來建立畫布呢？狀態欄、導航欄、標簽欄、工具欄等，它們的高度又分別是多少呢？別著急，我用一張圖來說明：

通過上面的圖片應該可以大致了解蘋果手機的各個型號的尺寸，在用sketch的時候，推薦使用375 * 667的尺寸；導出切圖的時候加后綴@2x和@3x，即是原始尺寸的2倍和3倍圖。

在用photoshop的時候，畫布就建成750 * 1334尺寸的。導出切圖的時候加后綴@2x和@3x，和sketch不一樣的是，導出的是原始尺寸和3倍尺寸圖。

字體使用規范導航文字 ? ? ? ? ?34-38px標題文字 ? ? ? ? ?28-34px正文文字 ? ? ? ? ?26-30px輔助文字 ? ? ? ? ?20-24pxTab bar文字 ? ? 20px當然，這個不是硬性的使用規定，要根據產品屬性酌情設定，另外需要注意的一點是所有的字號設置都必須為偶數，上下級內容字號極差關系為2-4號。關于字體：在iOS 9推出之前設計師普遍采用華文黑體、思源、冬青等字體進行設計，iOS 9推出了蘋果自己的字體——蘋方！自此之后蘋方字體被廣泛應用于移動端設計中。

關于字體顏色和是否加粗：字體的顏色設置我們一般很少用純黑色，一般用深灰色和淺灰色、細體和粗體(注意要用字體本身的字重，不能用PS的加粗功能)來區分重要信息和次要信息，進行信息層級的劃分。

APP應用圖標尺寸

APP應用圖標，建議使用1024*1024尺寸去做，逐級縮小去應用到各種場景中。SKetch已經提供了IOS和Android系統的APP尺寸圖標模板，直接使用就可以了。

切圖規范

當界面設計定稿之后，設計師需要對圖標進行切片提供給開發工程師，通常我們只需要對icon進行切圖即可，文字、線條和一些標準的幾何形狀是不需要切圖的，例如搜索框只需要在標注中描述它的尺寸、圓角大小、背景色值、不透明度即可，開發工程師可以用代碼實現這種效果。

在這里安利一個網站：藍湖https://lanhuapp.com 它是一款產品文檔和設計圖的共享平臺,幫助互聯網團隊更好地管理文檔和設計圖。

可以在線展示Axure,自動生成設計圖標注,與團隊共享設計圖,展示頁面之間的跳轉關系。可以直接在官網下載插件安裝即可使用，方便設計師和開發人員、產品經理之間的有效溝通。

切圖輸出規范

蘋果官方提供的能準確點擊的最小點擊區域：88 * 88，單位px。小于這個范圍也可以點擊，但是點擊不靈敏，體驗較差。對于比這個范圍小的可點擊按鈕，周圍需要用透明區域填充后再輸出切圖。

非功能性切圖，比如列表圖標、說明圖標等，按統一規格的最小尺寸切。這些無實際功能的圖標，按照統一規格的尺寸來切，而且最好保證尺寸為偶數。

按鈕輸出的時候要注意的是不同狀態下的情況要分開說明。

切圖命名規范

設計師切圖是直接給開發人員使用的，所以要按照一定的格式命名能減輕溝通成本，命名方式盡量清晰；

推薦采用：種類_位置_功能_狀態，示例說明：btn_homepage_seach_normal@2x.png，這樣可以一目了然，這是位于首頁，處于正常狀態的搜索按鈕2倍切圖。不要使用中文、特殊字符，請使用英文、下劃線、數字對切圖命名，數字不要打頭。

?4、界面設計基礎規范——Android系統??

屏幕設計尺寸

如果想一稿適配ios，那就新建720×1280 ?分辨率72，像素/英寸。如果單獨設計安卓MD新規范的，那就新建1080×1920 ?分辨率72，像素/英寸。

正因為Android手機分辨率多樣，為了保證同一設計在不同屏幕密度的手機上顯示效果一致，Android系統使用了下面兩個單位：

dp：android開發單位，相當于比例換算單位。使用該單位，可以保證控件在不同密度的屏幕上按照比例解析顯示成相同視覺效果；

sp：android開發文字單位，和dp類似，也是為了保證文字在不同密度的屏幕上顯示相同的效果。

當屏幕密度為MDPI(160DPI)時，1dp=1px

當屏幕密度為MDPI(160DPI)時，1sp=1px

建立圖稿常見一般常用做法：

直接把ios的設計稿照搬過來，只不過狀態欄，導航欄，標簽欄按照安卓的來。

720 x 1280 設計稿尺寸，按照傳統老辦法做的話，狀態欄高度：48 px，導航欄高度：96 px，標簽欄高度：96 px

最新規范MD的做法：

8dp原則 ??柵格系統的最小單位是8dp，一切距離、尺寸都應該是8dp的整數倍。

如果按照最新的Material Design規范設計的話，可以按照下面官方的規范。

字體使用規范

中文字體：思源黑體Source Han Sans / Noto(是一個字體，叫法不同而已)

英文字體：Roboto

注意：安卓的字號單位是SP

720×1280常見的字體大小：

24px、26px、28px、30px、32px、34px，36px等等。記住是偶數的，最小字號20px。

界面里的小圖標常見的尺寸：24px、32px，48px等，記住4的倍數比較好。

注意圖標的尺寸要統一尺寸，以眼睛觀察為主調整尺寸看上去一樣。方形的比圓形的看著要大，需要調整下。

推薦兩個在線圖標網站：1.http://www.iconfont.cn/

阿里圖標庫 ?2.https://www.materialpalette.com/icons??

設計標注、切圖：

標注的時候，如果是720×1280尺寸設計的，就選對應的xhdpi，如果是1080×1920尺寸設計的，就選對應的xxhdpi。

切圖推薦使用用Cutterman，選中下面所示，根據需要選擇不同分辨率的導出。輸出支持Android平臺的各種分辨率大小圖片，比如XXHPDI，XHDPI，HDPI啊之類的，通通自動化輸出，為你節省出更多的時間。

至于切圖命名可以參考上面iOS系統的規范。

?5.總結??

很多時候UI的工作輸出后是開發工程師提供參考，因此最好和和開發工程師進行溝通，了解他們的工作方式，標注完成之后宣講你的注意事項，以更快捷高效的完成工作，并且最大限度的完成視覺高的還原。希望我們不僅僅只是一名作圖的設計，還是一名懂得交互和產品的好設計，多積累多看好的設計，才能更大程度提高自身的設計功底。//術心//是一個專業做設計分享的公號，每天晚上10:00-10:30，給各位分享設計經驗、解決設計問題、了解設計資訊、分享設計教程，為你捋直設計之路————推薦閱讀下面是一些精選的內容，大家可以好好看看，有移動端界面設計尺寸規范，還有大廠一線設計師的設計經驗分享，還有一線運營人員分享的5個月30萬粉絲的公眾號運營經驗，你想要的都在這里，快來看嘍！！！微信訂閱號“術心”訂閱號成立三年有余，在這三年時間中，承蒙十萬余名粉絲的厚愛，讓我有動力堅持每天分享設計干貨，相信未來我們會越來越好，我們的群體會越來越壯大，去幫助更多的設計師朋友，加油！你點的每一次「在看」，//就是對我最大的支持//

總結

以上是生活随笔為你收集整理的android接口类命名规范_超全面的UI基础设计规范来啦，还不收藏 ~的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。