您好,歡迎光臨蘇州高端網站建設公司極簡慕楓

您當前位置: 蘇州網站建設 > 新聞動態 > 江蘇網站建設報價:AndroidUI設計切圖規范與常見尺寸

江蘇網站建設報價:AndroidUI設計切圖規范與常見尺寸

江蘇網站建設報價

之前分享過《UI設計基礎概念》的知識,今天我們來復習下上周所講的Android UI中的常用尺寸,在復習的過程中,再跟大家分享一下Android UI切圖規范吧。

mf_5d2d381c8e41a.jpg

一、手機尺寸

說到用戶界面Android,您應該談談手機尺寸:

[320x480px]

由于市場份額較小,新手機的價格不會很高,而且屏幕通常非常小。

[480x800px、480x854px、540x960px]

低端機器的第一個屏幕以英寸為單位,目前很少。

[720x1280px]

也就是說,我們通常會觀看720P視頻,有些人會根據此分辨率進行設計。

[1080x1920px],[1440x2560px]

這里要強調的是:目前1080x1920和2560×1440都是xxhdpi,適應時難免會出現錯誤,下次轉換我會談到2K高清或1080P視頻,我們需要承認那些像素。今天更常見,大多數設計圖紙的尺寸為1080.

mf_5d2d381ce596c.png

主流尺寸-也是主流設計尺寸

二、手機字體

 自從Ice Cream Sandwich發布以來,Roboto都是Android系統的默認字體集。在這個版本中,將Roboto做了進一步全面優化,以適配更多平臺。寬度和圓度都輕微提高,從而提升了清晰度,并且看起來更加愉悅。

Android系統字體有:

Droid Sans,Droid Serif,Droid Sans Mono ,, RobotoCondensed-Regular.ttf

Clockopia.ttf系統默認預留時鐘源

系統默認為英文字體

英文系統默認粗字體

系統默認為中文字體

三、

設計基礎尺寸

標準尺寸:(xxhdpi)1080x1920,(xhdpi)720 x 1280.Android超過了iPhone的尺寸,適應它相對比較麻煩。在設計中,設計尺寸一般為1080x1920px。

mf_5d2d381cf3cfe.png

    在Android設計尺寸規范沒有iPhone那樣具體的規范,這也決定了安卓的靈活性更強,發揮的空間也越大?,F在安卓的手機最近的幾版新系統的許多交互細節都超越了iPhone。Google Play上顯示的啟動器圖標是512x512像素。移動設備上的啟動器圖標是48x48 dp。手機的動作欄圖標應為32x32 dp。通知圖標必須是24x24 dp。小圖標應為16x16dp。

四、切圖與命名

文件包命名規則是:項目名字+切圖+作者名字+日期

江蘇網站建設報價1. 切圖說明

圖像名稱中沒有中文,特殊符號或空格。這些字母必須是小寫字母。許多名稱可以是縮寫,并且這些技術通常被歸類為這樣。

推薦的命名方法是:Module_Category_Function_State.png(狀態為:點擊狀態,點擊狀態,禁用狀態,選擇狀態等)

如:home_bg_nologin.png

2.常用縮寫

Ic ---- icon(圖標在app),bg ---- background,di ---- divider(主要用于劃分行,不僅包括列表視圖中的分隔符,還包括設計中的行) normal),sl ---- selector,avg ---- media,ctrl ---- control,from ---- delete,doc ---- document,err ---- error,inc ---- increment,info- --- training,img ---- image,lib ---- library,msg ---- message,pwd ---- password,pos ---- position

主要功能接口是應用程序界面中的活動,可以在產品中包含許多活動

然后,每個頁面的主要功能基本上可以包括:導航,選項卡/工具欄,菜單。

3.后綴

Ni  - 正常狀態

壓制 - 按下或按下效果

例如,(btn)按鈕:home_btn_select_nor.png/home_btn_select_pressed.png

4.注意事項

(1)剪切圖需要幾組分辨率圖:例如1080 * 1920,720 * 1280.將它們放在不同的文件夾中,相同的圖像和兩個文件夾中的名稱必須相同。

(2)對于需要頁面空間大小的開發人員,我們可以使用“Assistor PS”,“MarkMan”等軟件來測量和測量相應的顏色值(提前和開發通信需求,我們可以節省設計師)大部分時間和最終開發的修正時間)。

(3)當分配給Android開發人員時,當同一模塊的內容不同時,請確保背景大小相同并用空格填充。例如,上圖中的四個圖標切割圖像的大小以確保一致性,透明度為空白,頁面內容始終不同,設計是內容與內容之間關系的視覺指導。形狀。設計規范是服務的形式,形式的本質是解決內容。

五、

切圖工具推薦

1. Cutterman

PS加載項非常方便,但它與沒有綠色的PS安裝版本不兼容,PS版本相對較高。 CS 6未得到維護和更新。建議安裝PS CC及更高版本的完整官方版本。

mf_5d2d381d0c5ea.png

2. Assistor PS

PS圖標附加組件,但獨立于PS的附加組件也稱為工件。 PS Assistor的其他輔助功能也非常好,例如參考線輔助,圓角尺寸和磁鐵功能。

mf_5d2d381d220f4.png

3. 藍湖

支持Sketch,Photoshop和Adobe XD。

只需使用藍湖 Sketch/Photoshop/Adobe XD插件來標記生成和加載設計所需的剪切;在設計詳細信息頁面上,您的工程師只需單擊一下即可下載多個切割文件。

mf_5d2d381d2e89a.png

還可以選擇【開啟切圖壓縮】,點擊【下載切圖】,就可以將無損壓縮的切圖下載下來。

mf_5d2d381d4a859.png

上一個:江蘇網站建設制作公司:企業網絡營銷中有哪些常見誤區
下一個:江蘇網站建設設計:零基礎如何開始學習ui設計

聯系電話 400-6065-301

微信咨詢 寒總監

麻将怎么打视频教程