一份詳盡的移動端UI設(shè)計規(guī)范（全是干貨哦?。?/h1>
時間：2023-09-24 12:24:01 | 來源：網(wǎng)站運營
時間：2023-09-24 12:24:01 來源：網(wǎng)站運營
一份詳盡的移動端UI設(shè)計規(guī)范（全是干貨哦！）：文章中匯總了包括切圖、 標注、 字體 、圖層命名等很多干貨信息
移動端UI設(shè)計規(guī)范
MrXiong的專欄 - 博客頻道 - CSDN.NET 里邊很多好文章
標注的細節(jié)（標注不是萬能的，還是有需要對設(shè)計進行備注的地方，讓開發(fā)知道設(shè)計意圖，并且還原設(shè)計，所以需要使用備注進行說明，包括設(shè)計意圖）
.對于細節(jié)的檢查：任何元素的坐標及尺寸，都必須不能有小數(shù)點。都是整數(shù)。（分割線除外，有些單倍設(shè)計需要0.5pt的分割線。）
————————————————————————
有個細節(jié)需要注意！sketch進行切圖會只切內(nèi)容大小。所以需要對切片進行調(diào)整。
——————————————————————————————————、、、
圖層命名規(guī)則：
1、
2、
——————————————————
圖標 和 圖片的標注 ：
1.圖標的大小和圖標的可點擊區(qū)域不一定一致也就是說，圖標可以做的很小，但是為了保證點擊的準確性和流暢性，工程師可以把可點擊區(qū)域設(shè)置的很大，這樣標注和切圖的時候就要注意，
標注的是可點擊區(qū)域的大小，切圖切的也是可點擊區(qū)域的大小，也就是用透明區(qū)域去補上，否則圖片會模糊。
2.
圖片需要標注寬高，因為工程師要設(shè)置圖片區(qū)域，從后臺調(diào)取，可以這么說，軟件里除了橫屏撐滿的圖，基本上所有的圖片都要標注寬高。3.上述圖標出現(xiàn)了45px的單數(shù)，因為軟件自動吸附上去了顯示了圖標本身的尺寸，切圖的時候記得輸出個偶數(shù)尺寸的切片
4.另外記住，
同一模塊的圖標切片大小保持一致棗棗棗棗棗安卓的呢？？？ 這種切圖方式你會嗎？簡單6步幫UI設(shè)計師高效完成切圖
莫急，安卓的其實已經(jīng)出來了，咱們只需要把iOS的@2x的圖拷貝一份，然后建個文件夾命名為android，拷貝進去，去掉命名后面的@2x就可以了，有人會問，就這樣？
還記得上面提到的5/5s、6/6s的屏幕分辨率是326ppi吧？而，安卓的320dpi分辨率對應(yīng)下的，1dp=2px，尺寸是720*1280，他們的分辨率是接近的，那么咱們直接就可以共用@2x的圖給安卓使用，不過需要去掉后面的@2x，并且只需要提供一套切圖就可以了，至于其他的安卓尺寸，就交給安卓開發(fā)工程師解決了，他們會使用點九的方式進行適配。
不過，需要注意一下的是，點九是有限制的，一般適用于button、對話框、背景這樣的地方，不規(guī)則的icon在應(yīng)用的時候，如果在大屏里面有虛邊的情況，需要切大圖給到開發(fā)進行替換；當然，你也可以用Cutterman進行輸出切圖，不過命名后面需要去掉.png，看個人的習慣選擇輸出軟件。
棗棗棗棗棗棗棗關(guān)于字體大小的問題頂部操作欄文字大小 34-38px
標題文字大小 28-34px
正文文字大小 26-30px
輔助性文字大小 20-24px
Tab bar文字大小 20px
文字大小只是一個范圍，這要根據(jù)設(shè)計的視覺效果來決定，不要死記硬背，但是切記，字體大小要用偶數(shù)。
——————————————、
切圖
4) iOS（@2x,@3x）Android（1080）切圖
5) 發(fā)送郵件給到開發(fā)并抄送相關(guān)產(chǎn)品負責人，再當面和開發(fā)溝通確認下標注切圖確保沒有問題.
設(shè)計我是以iPhone6尺寸進行設(shè)計的，大屏手機越來越主流，所以我的標注圖就是6為基準，6的切圖為iOS@2x圖，當@2x圖制作完成之后，我會等比放大150%,生成@3x圖，這里需要注意一下，3x圖可能會有半像素，所以要手動都調(diào)整下 .
iOS這塊完成之后我會產(chǎn)出安卓的，以iphone6為基準，向上放大144，產(chǎn)出安卓1080的進行標注，切圖只出1080的，向下等比進行適配.
——————————————
標注規(guī)范 UI設(shè)計教程（標注與切圖片）－提供Assistorps的免費下載鏈接|UI|APP界面|蛋卷妹 - 原創(chuàng)作品 - 站酷 (ZCOOL)
圖標設(shè)計的大小 藝龍旅行無線視覺規(guī)范|UI|APP界面|現(xiàn)妙明心 - 原創(chuàng)作品 - 站酷 (ZCOOL)
sketch 一鍵切圖和標注
iOS 圖標最小可點擊區(qū)域：44*44px
——————————————
以上圈出來的就是需要切出來的，廣告欄的是獲取已經(jīng)做好的廣告圖所以不用切，只需要標注出大小就行，QQ的頭像都是用戶可以自定義的，程序會直接獲取用戶設(shè)置的頭像，所以也不用切，只需要確定大小。
-_____
下載幾個sketch源文件 看一下里邊的圖標是否是 縮小2倍的結(jié)果 然后用measure插件 導(dǎo)出來看看里邊切圖是怎樣的 標注間距是圖標大小呢 還是圖標旁邊距離
匯總 備忘錄中的UI技術(shù)問題 在每個技術(shù)問題后邊附上 答案鏈接
————————————————————————————————
圖標尺寸 和 啟動圖輸出尺寸：
關(guān)鍵詞：規(guī)范,干貨,設(shè)計,詳盡,移動
在線咨詢