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