1.標簽中的註意事項
壹般來說,要定位壹個圖標,妳只需要給出上/下邊距和左/右邊距。
標記可點擊範圍外的圖標距離。
壹般顏色和字體應分開標註。
壹般的模塊只需要單獨標註,比如導航欄。
壹般手機的可視區域寬度是固定的,長度可以滑出邊界,所以在標註物體寬度時,可以按比例說明。
如果要標註的內容是上下居中、左右居中或者等比例,就沒有必要標註。
在畫清單並且每壹項都壹樣的時候,就標註壹項,如果每壹項略有不同,就標註差異?部分
壹張完整的圖片交付時,不需要適配模型,只需給高清圖(1920*1080),註意壓縮。
背景是純色的時候,給優值就行了(iOS的RGB色值,Android的16色值)。
圖標應該給出可點擊的區域。
如果圖標在不同頁面重復出現,大小差別不大,直接給出最大的裁剪,並在圓形圖標中註明大小,程序會根據要求進行縮放。
可點擊按鈕通常有兩種狀態:正常/點擊(選中)。
如果按鈕只有矩形、圓角矩形、圓形和橢圓形,則給出尺寸和顏色值,可以編程。
漸變效果可以通過程序實現,只給出起始和結束顏色值和範圍。
2.西夏文命名規範
背景:bg_xxx.png
按鈕:normal.png/BTN BTN XXX select.png XXX。
圖片:img_xxx.png
標簽:tab_xxx.png
Icon: icon_xxx.png
圖片:pht_xxx.png
導航:nav_xxx.png
圖標:tip_xxx.png
菜單:menu_xxx.png
側邊欄:sidebar_xxx.png
二、iOS應用屏幕適配
1應該有多少款。iOS適應,哪個型號分辨率是最好的設計尺寸?
2016-3
IOS只需要兼容iPhone4,就可以完美兼容iphone5及以上。
如果根據矢量圖制作設計圖,則按照1X的尺寸繪制,後期放大到2X、3x;如果按照傳統px畫圖用最大尺寸(3X)作為畫布。
以3X為畫布(1242*2208)很難記憶和整除。我們可以直接把1280(640*2)作為寬度,完美的縮放到1X和2X。
2X->;3X用1.5計算大小和字體大小可以得到更好的結果。
2.界面尺寸
設備分辨率狀態欄高度導航欄高度標簽欄高度
iphone 6 plus 1242 * 2208 px 60 px 132 px 146 px
iphone 6750 * 1334 px 40 px 88 px 98 px
iphone 5/5s/5c 640 * 1136 px 40 px88 px 98 px
iphone 4/4s 640 * 960 px 40 px88 px 98 px
ipad 3/4/Air/Air 2/mini 22048 * 1536 px 40 px 88 px 98 px
ipad 1/21024 * 768 px 20 px 44 px 49 px
iPad mini 1024 * 768 px 20 px 44 px 49 px
在導航欄的背景圖中,如果考慮狀態欄的背景,背景圖的大小是導航欄px+狀態欄px,如果只改變導航欄的顏色,只需要導航欄px。
3.圖標大小
設備App Store程序應用主屏幕spotlight搜索選項卡欄工具欄和導航欄。
iphone 6 plus 1024 * 1024 px 180 * 180 px 144 * 144 px 87 * 87 px75 * 75px 66 * 66px
iphone 61024 * 1024 px 120 * 120 px 144 * 144 px 58 * 58 px 75 * 75px 44 * 44px
iphone 5/5s/5c 1024 * 1024 px 120 * 120 px 144 * 144 px 58 * 58px 75 * 75px 44 * 44px
iphone 4/4s 1024 * 1024 px 120 * 120 px 144 * 144 px 58 * 58 px75 * 75px 44 * 44px
ipad 3/4/Air/Air 2/mini 21024 * 1024 px 180 * 144 * 144 px 100 * 100 px 50 * 50px 44 * 44px
ipad 1/21024 * 1024 px 90 * 90px 72 * 72px 50 * 50px 25 * 25px 22 * 22px
iPad mini 1024 * 1024 px 90 * 90px 72 * 72px 50 * 50px 25 * 25px 22 * 22px
按鈕裁剪建議將圖片裁剪成相同的寬度和高度,像素必須>;=88,*88px,當圖片本身的寬度或高度不足時,添加空白像素(透明像素)。壹般來說,正常狀態下只需要按下按鈕就可以切圖了。
(不推薦等比例放大用於自適應)
4.參考
聯合設備索引
詳細完整版APP切割流程和APP切割命名規範
APP地圖切割詳細規範終極指南
iOS和Android應用程序界面設計規範
應用程序接口命名和文件排列規範
三、安卓應用屏幕適配
1.以px為基本單位的缺陷
對比上圖可以知道,ppi越低圖片顯示越大,ppi越高圖片顯示越小,導致不同手機上顯示的圖片布局不均勻!
以dp為單位,所有機器統壹顯示。
2.衡量屏幕清晰度的單位-屏幕密度(dpi==ppi)
計算公式:屏幕dpi = √(屏幕長度2+屏幕寬度2)/屏幕尺寸。
名字密度代表分辨率,安卓單位,像素換算。
mdpi 120 dpi ~ 160 dpi 320 * 4801dp = 1px
hdpi 160 dpi ~ 240 dpi 480 * 8001dp = 1.5 px
xhdpi 240 dpi ~ 320 dpi 720 * 12801dp = 2px
xxhdpi 320 dpi ~ 480 dpi 720 * 1280/1080 * 19201dp = 3px
xxxhdpi 480 dpi ~ 640 dpi 2k ~ 4k 1dp = 4px
屏幕大小開始圖標動作欄圖標上下文圖標系統通知圖標(白色)最細的筆畫
320 * 480 px48 * 48px 32 * 32px 16 * 16 px24 * 24px不小於2px。
480 * 800 px/480 * 854 px/540 * 960 px72 * 72px 48 * 48px 24 * 24px 36 * 36px不小於3 px。
720 * 1280 px96 * 96px 64 * 64 px32 * 32px 48 * 48px不小於4 px。
1080 * 1920 px 144 * 144 px 96 * 96 px48 * 48 px72 * 72px不小於6 px。
3.應該適應幾款?
2016-3
得出結論,只需要適配高端的XXHDPI(720 * 1280/1080 * 1920)和低端的hdpi(480*800)。
4.測量單位和邊框
可觸摸控件均以48dp為單位。
為什麽是48dp?壹般48dp在設備上的物理尺寸是9mm(會有壹些變化)。這正好在touch control的推薦尺寸範圍內(7-10mm),而且這個尺寸更加準確,便於用戶用手指觸摸。(xxhdpi標準是144px)
請註意,邊框元素之間的空白應該是8dp。
示例:
5.字體排版
Roboto是Android系統默認的字體集,字體大小單位是sp(可縮放像素)。
根據安卓設計規範,建議使用數字12、14、16、20、34,字體粗細可以調節。
spHDPIXHDPIXXHDPI
12sp18px24px36px:
14sp21px28px42px
16sp24px32px48px
18sp27px36px54px
20sp30px40px60px
34sp51px68px102px
(註意:字體大小要均勻,不允許有小數位)
6.9-制作補丁圖
什麽是9補丁圖?
為什麽要做9補丁格式的圖?
適應各種手機屏幕拉伸圖片的需求,有效縮小圖片尺寸。
什麽時候用?
當發現圖片是背景並可能被拉伸時,或者當圖片太大時。
如何制作patch9圖
在圖片外層添加壹個全透明像素,在透明像素區域花四個純黑邊緣。
1.帶寬度的可擴展區域
2.高度可拉伸區域
3.垂直內容區域
4.水平內容區域
8.參考
聯合設備索引
Android設計指南簡體中文版4.x
材料設計中文版
安卓設計中的9.png