app端UI的製圖規範

ios和Android切圖尺寸規則


UI交付給研發的資料有:

·注圖(以 **750 \1334* 尺寸爲基準標註

·2x切圖(640 & 750爲寬度尺寸爲基準切圖

·3x切圖(1280爲寬度尺寸爲基準切圖



iphone設備尺寸

切圖命名規則


命名的基本原則: 

1.爲了讓切圖便於管理,依圖片性質命名。

2.當圖片要做給 Retina 屏幕使用時,只要在副檔名前加上「@2x」就可以了。三倍的圖副檔名【@3x】

3.不要把數字或符號當成檔名的開頭,如 3-icon.png 、+abc.png之類。


根據屏幕圖片尺寸

標註圖


備註:以下素材圖是依ios設備爲例,標註的內容適用於Android設備

·H5頁面上的標註:

如果界面是用H5來實現的話,標註的單位要用px值進行標註。

·顏色標註:

兩種色值表達都標上(16進制&RGB)。


顏色標註

·文字標註:

兩種色值表達都標上(16進制&RGB)。


文字標註

頁面標註

·按鈕區域:

背景圖片名稱、區域位置、區域尺寸、透明度,圓弧度。


按鈕標註

·圖標區域:

背景圖片名稱、區域位置、區域尺寸、透明度,圓弧度。


區域標註

·文字區域:

文字標註、區域位置、區域尺寸。


文字區域標註

·間距:兩個相鄰區域之間的距離。


間距標註

·線條:寬度,顏色(16進制 & RGB)。

發佈了22 篇原創文章 · 獲贊 7 · 訪問量 2萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章