當前位置:成語大全網 - 古籍善本 - APP界面標註和圖紙裁剪的註意事項

APP界面標註和圖紙裁剪的註意事項

首先,介紹壹下App屏幕適配的常識

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