2022-6-1 博博
做一全套的APP設計，流程是：
1、界面設計：設計IOS界面；設計Android界面。
2、切圖：切IOS的2倍圖和3倍圖；切Android的hdpi,xhdpi,xxhdpi這三個尺寸的圖。
3、標注：以px為單位標注IOS界面的尺寸；以dp為單位標andriod的尺寸。
----------------------------------------------------------------------
IOS端_界面設計
————————
一、界面設計：
1、【界面分類】：IOS有 iphone5/5s/5c、 iphone6\6 plus、iphone7\7 plus、iphone8\8 plus、iphoneX等分辨率。
2、【設計方法】： 以iphone8為標準進行界面設計，讓開發進行適配。即750px*1334px以基準（72像素\英寸）。
3、【設計標準】：750*1334界面——狀態欄40px； 導航欄88px；標簽欄98px；工具欄88px；文字最大34px; 最小18px；常用28px。
————————
二、切圖：（所有開發寫不出來的都得切，如icon, 默認頭像，背景圖等）
1、【切圖尺寸】：IOS 只用切【二倍圖】和【三倍圖】。注意：有些button, 需要更改顏色，切一個“被點擊的狀態”（如btn-xxx-pressed@2x,btn-xxxx-pressed@3x）。
2、【切圖命名】：如btn-xxxx@2x,btn-xxx@3x(按紐); img-xxx@2x,img-xxxx@3x(圖像); bg-xxx@2x,bg-xxx@3x(背景圖)
3、【方法一】：【photoshop圖層-右鍵-導出為...】
設置大小（@1x+@2x)；設置好icon的畫布尺寸（如導航欄上的幾個icon的畫布尺寸應保持一致）
【方法二】：【sketch-選中icon-右下角-make exportable】
（如需切相同尺寸的icon，需建立相同尺寸的畫布，并選擇整個畫布整體導出）
————————
三、標注：
1、【標注內容】：顏色＼長寬＼字號＼距離；
2、【標注單位】：IOS的標注以px為單位進行標注。（注意：數字最好為偶數）
3、【標注軟件一】: 標注神器－parker/markman，標注前請在“設置”里將單位改為px；
【標注軟件二（強烈推薦）】：zeplin軟件——無需標注，只需將界面導入zeplin，開發直接訪問zeplin，即可查看所有的尺寸、間距、色值、字體、字號等。
下載地址：https://zeplin.io/，軟件圖標和界面如下：
Android設計：
————————
一、界面設計：
1、【界面分類】：Android的尺寸非常多，非常雜?？偟恼f來，就分為這幾種模式：idpi, mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi。
2、【設計方法】：以xhdpi為基準進行界面設計，讓開發進行適配。即以720px*1280px為標準(72像素\英寸)。
3、【設計標準】： 720px*1280px界面——狀態欄50px, 導航欄96px，標簽欄96px，工具欄96px，實體鍵96px；文字最大36px;最小18px；常用28px。
————————
二、切圖：
1、【分類】：Android 的切圖需要切三個尺寸的：hdpi, xhdpi, xxhdpi。
2、【方法一】：切圖神器－cutterman，也可以一鍵切出hdpi, xhdpi, xxhdpi三個尺寸的圖, 而且還可以切出“點九圖”。
【方法二】：photoshop、sketch、illustrator皆可直接導出icon。
————————
三、標注：
1、【單位】：Android的標注以dp為單位。（parker里, 在“設置”里將單位改為dp）
2、【標注軟件】：同上，推薦zeplin軟件（建立文件夾時需選擇安卓版本）
----------------------------------------------------------------------
補充 _ 2019/4/10:
目前流行的是以【一倍圖】的分辨率來進行設計，也就是sketch、PS、AI上給的分辨率：
iPhone 8的分辨率是750*1334，而sketch、PS、AI上iPhone 8給的分辨率是375*667.
意思是設計平臺鼓勵設計師用一倍圖來設計，一方面是因為開發環境是以一倍圖的環境來開發的，因此一倍圖的設計稿無需開發再進行換算。
另一方面是icon導出時：@2x就是iPhone 8的尺寸、@3x就是plus的尺寸。利于icon尺寸的整數換算。
所以推薦大家用【一倍圖】的分辨率來設計。icon切圖分別導出2倍圖和3倍圖供開發使用。（而且sketch提供的IOS控件也是1倍圖的尺寸啊～～）
轉載請注明：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
