Ⅰ android UI規范是什麼
從事UI設計行業的朋友都知道,每一張設計稿都是有規范尺寸的,並且IOS的和Android還不同,IOS UI設計規范為375*667 1x的尺寸,那麼Android UI規范是什麼呢,下面讓我們一起來了解一下。
在做Android UI設計的時候,畫布的尺寸我們一般都是選擇360*640 1x,也就是說是選擇720*1280這個尺寸。
我們從上到下來進行了解,最上邊的是狀態欄,狀態欄的高度是25。
在狀態欄中肯定就是信號、電源以及時間這些了,每個Android定製系統的擺放樣式都不同,這一點不用糾結。
狀態欄下邊就是導航欄了,導航欄起到的是導航作用,高度是45px。
導航欄中間一般都是有文字來起到提醒作用的,導航文字的大小一般都是18px。
在最下方就是我們的標簽欄了,標簽欄的作用就是給用戶提供切換界面的作用,標簽欄的高度為50px。
在標簽欄中擺放的肯定就是我們的ICON圖標了,要注意,圖標的切圖點擊區域不能夠小於24px。
一些ICON圖標的下方還會有文本,這里文本的大小一般就是10或者是11px了,因為范圍有限。
本文尺寸均為1x。
Ⅱ 設計安卓APP,成品圖標模糊,是切圖問題嗎,切圖需要注意什麼
一.android版
在做android版本設計的時候,尺寸有很多種,這時我們要以一種尺寸為基準,那這個基準尺寸是480px*800px,設計圖完成之後就開始切圖了,我拿我之前設計的一張圖為例子講解下:
當看到上邊這張設計圖的時候,我們首先分析下應該給技術切哪些圖(為了避免以後少改動,建議切圖之前最好和技術先溝通下,怎麼切);
1、底部欄目的icon和背景:
這個一般有2種切法:(有默認和選中之後的效果)
2、頂部欄目的背景切圖:
由於頂部導航欄的是漸變樣式,所以切圖只需要切一小條,技術來平鋪拉伸就可以~(PS:如果是花紋背景,就必須切整條了,因為花紋切一小條就會被拉伸了~)
3、標注文字大小和行間距:(以這張圖為例子,我標注好了,請看下圖)
需要注意的:
A:android主要有3種屏,即:
QVGA和WQVGA屏density=120;
HVGA屏density=160;
WVGA屏density=240;
B:apk的資源包中,
當屏幕density=240時使用hdpi標簽的資源
當屏幕density=160時使用mdpi標簽的資源
當屏幕density=120時使用ldpi標簽的資源;
C:我們標注的是PX,但是技術的演算法是DP,所以需要PX和DP進行轉化,PX和DP的轉化主要跟密度有關系,當密度density=160即(屏幕尺寸:320*480)時,1PX=1DP;當密度density=240即(屏幕尺寸:480*800)時,1PX=0.75DP;當屏幕的尺寸大於480*800的時候,密度都按照240計算即可;當密度density=120即(屏幕尺寸:240*320)時,這個現在幾乎沒有人用了,所以我也不知道轉化公式,如果您知道,可以留言告訴我啊~
注意:因為我們做的是基於480*800尺寸的,大家都知道android的尺寸太多了,要想適配現在流行的尺寸,比如:640*960;720*1280等,唯一的解決辦法就是圖標可以根據不同尺寸各做一套,也就是圖標需要做480、640和720共3套圖標,不過如果你們的產品的要求不嚴格,做一套就可以,只不過是在大於480尺寸的屏幕上有些圖標被拉大變虛而已~
二.ios版
在做ios版本設計的時候,尺寸有3種,分別是:320*480、640*960、640*1136;這時我們要以一種尺寸為基準,那這個基準尺寸是640px*960px,設計圖完成之後就開始切圖了,我拿我之前設計的一張圖為例子講解下:
當看到上邊這張設計圖的時候,我們首先分析下應該給技術切哪些圖(為了避免以後少改動,建議切圖之前最好和技術先溝通下,怎麼切);
1、底部欄目的icon和背景:
這個一般有2種切法:(有默認和選中之後的效果)
2、頂部欄目的背景切圖:
由於頂部導航欄的是多顏色的,所以只能切一整條給技術,商圈的圖標要單獨切出來
3、二級標題欄目的切圖:
4、主體欄目的切圖:
5、標注文字大小和行間距:(以這張圖為例子,我標注好了,請看下圖)
需要注意的:
A:我們標注的尺寸是像素px,技術那邊的實際運用到技術中的是像素的一半,即像素的一半=技術的尺寸;例如:「分類」2個字,我標準的是36px,技術那邊的尺寸就是18px;
B:所有文字,行間距的標注的尺寸都是偶數;因為技術那邊都是根據我們的尺寸除以2;
C:顏色的標注有的技術要求16進制,有的技術要求RGB,由於頁面的限制所以我只標注了16進制的,按16進制和RGB都標注的是最好的~
注意:因為我們做的基於640*960尺寸的,ios共有3套尺寸,因為640*960和640*1136的寬度是不變的,所以圖標沒有變化重新切,只是行間距需要調整下;320*480尺寸的是640*960的一半,所以技術完全可以根據你標注的640的尺寸做就可以~
三.android和ios的轉化關系
因為ios的尺寸是640*960,android當密度等於120即(320*480)時,1PX=1DP,所以android和ios的標注像素之間的換算關:即ios像素尺寸*1/2=android dp尺寸;
2.如果你們的產品同時做android和ios,你只想標注一套尺寸的時候,就可以標注ios版的標注去計算即可。
Ⅲ 如何設計android4.4規范的像素1080x1920的界面
剛開始接觸UI的時候,碰到的最多的就是尺寸問題,什麼畫布要建多大、文字該用多大才合適、我要做幾套界面才可以?什麼七七八八的也著實讓人有些頭疼。
1、尺寸及解析度
iPhone 界面尺寸:320x480、640x960、640x1136
iPad 界面尺寸:1024x768、2048x1536
(以上單位都是像素哦,至於解析度一般網頁UI和移動UI基本上都只要 72 ppi)
當然,在設計的時候並不是每個尺寸都要做一套,尺寸按自己的手機尺寸來設計,比較方便預覽效果,一般用 640x960 或者 640x1136 的尺寸設計。
P.S. 作圖的時候確保都是用形狀工具(快捷鍵:U)畫的,這樣更方便後期的切圖或尺寸變更~
2、界面基本組成元素
iPhone的APP界面一般由四個元素組成,分別是:狀態欄、導航欄、主菜單欄以及中間的內容區域
這里取用 640x960 的尺寸設計,那我們就說說在這個尺寸下這些元素的尺寸:
狀態欄:就是我們經常說的信號、運營商、電量等顯示手機狀態的區域,其高度為:40 px
導航欄:顯示當前界面的名稱,包含相應的功能或者頁面間跳轉的按鈕,其高度為:88 px
主菜單欄:類似於頁面的主菜單,提供整個應用的分類內容的快速跳轉,其高度為:98 px
內容區域:展示應用提供的相應內容,整個應用中布局變更最為頻繁的,其高度為:734 px