導航:首頁 > 操作系統 > androidui設計尺寸規范

androidui設計尺寸規范

發布時間:2023-01-06 06:35:27

android常用UI尺寸規范

在信息流的設計中,左右的間距會保持一致,通常設定為32px,從而保證有足夠的留白,如圖所示。信息流中的文本、圖片和頭像都會依據間距進行左右對齊,以此來保證頁面的規則性。

在1080px×1920px的設計圖中,文字要有主次。把字型大小大小分為3個級別,例如主文案的昵稱會設置為46px,描述文字會設置為36px,而最小字型大小的時間等信息文字的大小會設置為30px,如圖所示。

❷ Android和IOS開發圖標、啟動頁尺寸

最近項目在做android和ios的項目,設計師讓我給出圖標的尺寸,於是查了一下尺寸。

第一步:產品經理和UI設計師制定好UI規范,然後開始做圖標做顏色做尺寸等一系列和APP界面強相關的工作,以最常見的「back」按鈕為例,UI設計師從無到有的具體實現步驟:
①在coreldraw或者Sketch中製作好「矢量圖標「—返回,此時的長寬單位是毫米;
②保存輸出為「PNG點陣圖圖片」—返回,此時的長寬單位是px(像素);
③指定好此圖標的內外邊距,此時的邊距單位是px(像素);
④最終此圖標圖片交到開發者手中,做好圖片的放置和內外邊距的實現。開發這在這個過程中會遇到一個問題:內外邊距是由px為單位的距離,但是在實際開發中「dp」做為單位的更加常見,所以就會涉及到「px」「dp」互轉的封裝類,專門用來實現這個過程,同時還要注意不同解析度屏幕的適配。

(1)px,平常我們所說的手機的解析度是1920×1080,這就是像素數量,也就是1920px×1080px,代表手機高度上有1920個像素點,寬度上有1080個像素點,每個像素點的單位是px。
(2)dp,dp是為了開發者便於做不同屏幕的適配而引入的開發單位,具體來說就是為了使得開發者設置的長度能夠根據不同屏幕(解析度/尺寸也就是dpi)獲得不同的像素(px)數量。比如:我將一個控制項設置長度為1dp,那麼在160dpi上該控制項長度為1px,在240dpi的屏幕上該控制項的長度為1 240/160=1.5個px。也就是dp會隨著不同屏幕而改變控制項長度的像素數量。
(3)DPI,用戶實際判別手機屏幕的顯示好壞,除了解析度還要考慮屏幕的寬高(英寸),也就是用dpi,即每英寸多少像素來評價屏幕的顯示效果。(不然假如手機解析度是1920×1080,但是屏幕是幾十寸的,那顯示效果將不會很好,甚至你有可能看到小的像素塊,那將更影響視覺效果。)
三、Android開發中圖標尺寸總結(務必掌握):
(1)dpi、解析度與圖標尺寸的關系L DPI ( 120 DPI )—解析度240 320px,其啟動圖標大小為 36 x 36 pxM DPI (160 DPI )—解析度320 480px,其啟動圖標大小為 48 x 48 pxH DPI ( 240 DPI )—解析度480 800px,其啟動圖標大小為 72 x 72 pxXH DPI ( 320 DPI )—解析度1280 720px,其啟動圖標大小為 96 x 96 pxXXH DPI( 480 DPI )—解析度1920 1080px,其啟動圖標大小為144 x 144 pxXXXH DPI( 640 DPI )—解析度3840*2160px,其啟動圖標大小為192 x 192 px
(2)開發中「px」到「dp」從 px 換算成 dp 要知道它是以什麼 dpi 標准來設計的,換句話說,就是要根據不用解析度的屏幕,根據換算關系表得到相應的 dp 。 例如: 以 xxhdpi 標准設計的 UI,其中一個切圖的解析度是 600 px * 360 px ,根據換算關系表可知,在 xxhdpi 標准下,1 dp = 3 px ,則其對應的 dp 是 200 dp * 120 dp 。換算關系表如下:(兩次標紅 請重點關注)

36 x 36 48 x 48 64 x 64 72 x 72 96 x 96 144 x 144 192 x 192

具體的圖標尺寸可以打開xcode ,在項目目錄下找到Assets.xcassets文件,這個文件裡面標識出了所需要的圖標尺寸,下面標識的是基本尺寸,2x就是底部尺寸x2 ,即下面的尺寸為80pt和120pt

看了一下新的蘋果開發文檔和Xcode給的AppIcon坑,發現又新增了一些尺寸的圖標。在這里整理一下最新的最全的icon尺寸。

itunes中使用的icon

1024 * 1024

iPhone: iOS7-10桌面圖標

60 * 60

120 * 120 @2x

180 * 180 @3x

iPhone: iOS5-6桌面App圖標

57 * 57

114 * 114 @2x

iPad: iOS7-10桌面圖標

76 * 76

152 * 152 @2x

iPad: iOS5-6桌面圖標

72 * 72

144 * 144 @2x

iPhone: iOS5-6的搜索 iOS5-10的設置

iPad: iOS5-10的設置

29 * 29

58 * 58 @2x

87 * 87 @3x

iPad: iOS5-6系統搜索圖標

50 * 50

100 * 100 @2x

iPhone、iPad: iOS7-10系統搜索圖標

40 * 40

80 * 80 @2x

120 * 120 @3x

iPhone、iPad: iOS7-10通知欄圖標

20 * 20

40 * 40 @2x

80 * 80 @3x

iPad Pro: App桌面圖標

167 * 167 @2x

iPhone匯總:

1024 * 1024

120 * 120

180 * 180

20 * 20

40 * 40

80 * 80

29 * 29

58 * 58

87 * 87

57 * 57 (iOS5-6)

114 * 114 (iOS5-6)

iPad匯總:

1024 * 1024

76 * 76

152 * 152

20 * 20

40 * 40

80 * 80

120 * 120

29 * 29

58 * 58

72 * 72 (iOS5-6)

144 * 144 (iOS5-6)

50 * 50 (iOS5-6)

100 * 100 (iOS5-6)

167 * 167 (iPad Pro)

APP啟動頁,即LaunchImages,需要五張不同尺寸大小的圖,切記一定要選擇png格式,否則打包時報錯,導致APP適配失敗。
五張圖的大小即:320 480、640 960、640 1136、750 1334、1242 2208 828 1792 1125 2436 1242 2688
分別對應的iphone屏幕尺寸:iphone 3GS、iphone4(s)、iphone5(c、s)、iphone6(s)、iphone 6(s) plus 、iphoneX(S)、iphoneXR、iphoneXs Max.
具體步驟:
第一步:

1.點擊工程目錄中的Images.xcassets,點擊左側邊欄的LaunchImages(如果沒有,在空白處右擊創建一個)
2.然後在xcode最右側的邊欄處選擇你的APP是否要對ipad、橫豎屏、以及低版本的iOS系統做支持。

第二步:

將填好的圖片配置到工程中的啟動頁選項中
點擊項目目錄的工程 -> target -> General -> App Icons And Launch Images
將Launch Images Source的選項設置為LaunchImages,切記當APP不是用LaunchScreen.xib來配置啟動頁時,LaunchScreen File的選擇狀態一定為空!否則編譯無法通過

如果此時還沒有顯示的話,那麼你先刪除app,然後再運行一下項目看看

參考網站:
https://blog.csdn.net/weixin_41101173/article/details/79644613
https://blog.csdn.net/it_male/article/details/80434269

❸ 手機UI設計的基本規范

大家都知道手機採用的:一個是蘋果的iOS系統,另一個就是谷歌公司的安卓系統。華為的鴻蒙系統雖然早就上線,但是還沒有真正運用在手機移動端上,小阿在這里期待著,希望有一天也能寫「華為『鴻蒙系統』的界面尺寸規范。」

這兩者之間有一個明顯的區別就是iOS系統是非開源的,簡單來說就是不能別隨意改動的,連圖標都是必須帶圓角的,對交互設計師很友好的。

垂直邊距

①狀態欄:24dp;②工具欄:56dp;③標題和列表項:48dp;④子標題:48dp;⑤內容區域間距離為8dp

6、切圖

上周我們講到iPhone 6與iPhone 6 Plus約是1.5的關系,而xhdpi的Android手機屏幕與xxdpi的屏幕剛好是1.5倍的關系,所以iPhone 6 Plus和xxhdip也可以共用一套切圖,掌握好尺寸關系,能讓工作變得簡單很多。

7、界面適配

安卓多屏幕支持的基礎是它能夠管理應用程序的布局和點陣圖可繪制對象的渲染以適當的方式對當前屏幕配置的能力。該系統處理的大部分工作由布局縮放以適合屏幕尺寸/密度和縮放點陣圖可繪制在屏幕密度正確呈現您的應用程序在每個屏幕的配置,來優化用戶界面設計,帶來更良好的用戶體驗。

如何做到安卓界面適配呢?大家一定要很清楚的了解解析度、屏幕大小、密度的關系;明白實際密度和系統密度的關系,dp、sp、px的區別;明白dp與px的轉換。這里不做過多闡述,後期寫一篇具體的~

安卓的界面規范就講到這里,要明白設計界面規范的意義是確保設計的統一性與合理性,規范維護的是項目的統一,為了項目利益最大化,高效化。所以作為UI設計師的我們,如果一點設計規范不遵守,全靠自己想當然,那就別發給前端人員啦,他也看不懂。

所以作為UI設計,必須要要遵守設計規范,這樣才能做到設計有道可尋,希望以上回答對你了解手機界面設計規范有所幫助。

❹ 安卓手機ui設計尺寸規范

眾所周知,安卓系統是開源的,國內又有超多的手機廠商,小米、魅族、華為、oppo、三星等,每一個品牌有屬於自己的UI設計規范,但是我們主要分析UI界面尺寸規范。
1、字體
安卓系統中文採用的是思源黑體,英文字體為robot字體。
只使用偶數單位 24 pt,28 pt,36 pt等字體大小
2、mdpi、hdpi、 xhdpi、xxhdpi、xxxhdpi、dp、px到底是什麼意思?
講圖標之前先來分析一下一排英文的意思:
mdpi、hdpi、 xhdpi、xxhdpi、xxxhdpi都是表示的屏幕密度大小,依次數值越大,其解析度越高。常用的是xxhdpi和xxxhdpi。
dp是安卓系統專用的長度單位,設備獨立像素的意思。不同設備有不同的顯示效果,這個和設備硬體有關。多為圖標使用,文字則用sp(放大像素),主要用於字體顯示best for textsize。
px是像素的意思, 不同設備顯示效果相同。
從左到右依次是:① 應用欄高度:56dp;應用欄左右內邊距為16dp;應用欄圖標上下左內邊距為16dp;應用欄標題左內邊距為72dp;應用欄標題下邊距:20dp;
②應用欄高度為128dp;
③操作欄高度為56dp;標題欄高度:80dp;標題欄底部內邊距:8dp;描述區域高度:72dp;描述區底部內邊距:16dp。
5、列表高度
垂直邊框、水平外邊距、邊框左右外邊距各16dp;帶有圖標或者頭像的內容有72dp的左邊距。
垂直邊距
①狀態欄:24dp;②工具欄:56dp;③子標題:48dp;④列表項:72dp

❺ android app界面設計規范(dpi,dp,px等)

PPI(Pixels per inch):每英寸所擁有的像素數,即像素密度。
DPI(dots per inch):即每英寸上,所能印刷的網點數,一般稱為像素密度。ppi計算公式:ppi = 屏幕對角線像素數/屏幕對角線英寸數,通過勾股定理計算屏幕對角線像素數。
Screen Size(屏幕尺寸):手機屏幕尺寸大小,如3英寸、4英寸、4.3英寸、5.7英寸,指的是對角線的長度。
DIP(device independent pixel):即dip/dp,設備獨立像素。 1px = 1dp density(由dpi決定)
Resolution(解析度):指手機屏幕垂直和水平方向上的像素個數。eg解析度480
800,指該設備垂直方向有800個像素點,水平方向有480個像素點。
px(Pixel像素):相同像素的ui,在不同解析度的設備上效果不同。在小解析度設備上會放大導致失真,大解析度上被縮小。

Android Design里把主流設備的 dpi 歸成了四個檔次: 120 dpi、160 dpi、240 dpi、320 dpi ,具體見如下表格。
實際開發當中,我們經常需要對這幾個尺寸進行相互轉換(比如先在某個解析度下完成設計,然後縮放到其他尺寸微調後輸出),一般按照 dpi 之間的比例即 2:1.5:1:0.75 來給界面中的元素來進行尺寸定義。
也就是說如果以 160 dpi 作為基準的話,只要尺寸的 DP 是 4 的公倍數,XHDPI 下乘以 2,HDPI 下乘以 1.5,LDPI 下乘以 0.75 即可滿足所有尺寸下都是整數 pixel 。但假設以 240 dpi 作為標准,那需要 DP 是 3 的公倍數,XHDPI 下乘以 1.333,MDPI 下乘以 0.666 ,LDPI 下除以 2。而以 LDPI 和 XHDPI 為基準就更復雜了。同時第一款Android設備(HTC的T-Mobile G1)是屬於160dpi的。鑒於以上各種原因, 標准dpi=160

谷歌官方對dp的解釋如下:
A virtual pixel unit that you should use when defining UI layout, to express layout dimensions or position in a density-independent way.
The density-independent pixel is equivalent to one physical pixel on a 160 dpi screen, which is the baseline density assumed by the system for a "medium" density screen. At runtime, the system transparently handles any scaling of the dp units, as necessary, based on the actual density of the screen in use. The conversion of dp units to screen pixels is simple: px = dp * (dpi / 160). For example, on a 240 dpi screen, 1 dp equals 1.5 physical pixels. You should always use dp units when defining your application's UI, to ensure proper display of your UI on screens with different densities.

簡單來說,以160dpi的設備為准,該設備上1dp = 1px;如果屏幕密度大,1dip代表的px就多,比如在320dpi的屏幕上,1dip=2px(即1dp代表2個像素)。在app開發時,最好用dp來做界面的布局,以保證適配不同屏幕密度的手機。

dp和px的換算公式:

我的理解,該公式表示px的數值等於dp的數值*(設備dpi/160)
注意,px、dp是單位,但density沒單位。

applyDimension的源碼如下,可參考:

android的尺寸眾多,建議使用解析度為 720x1280 的尺寸設計。這個尺寸 720x1280中顯示完美,在 1080x1920 中看起來也比較清晰;切圖後的圖片文件大小也適中,應用的內存消耗也不會過高。

app啟動圖標為48*48dp,對應各dpi設備,圖像資源像素如下:

| mdpi | hdpi | xhdpi | xxhdpi |
| ---:| ---: | ---:| ---:| ---:|
|48 48px|72 72px|94 96px|144px 144px|

操作欄圖標為32*32dp,對應各dpi設備,圖像資源像素如下:其中圖形區域尺寸是24*24dp,可參考平時ui切圖會有部分留白。

| mdpi | hdpi | xhdpi | xxhdpi |
| ---:| ---: | ---:| ---:| ---:|
|32 32px|48 48px|64 64px|96px 96px|

通知欄圖標為24*24dp,對應各dpi設備,圖標像素如下:

| mdpi | hdpi | xhdpi | xxhdpi |
| ---:| ---: | ---:| ---:| ---:|
|24 24px|36 36px|48 48px|72px 72px|

某些場景需要用到小圖標,大小應當是16*16dp,其中圖形區域尺寸12*12dp。

| mdpi | hdpi | xhdpi | xxhdpi |
| ---:| ---: | ---:| ---:| ---:|
|16 16px|24 24px|32 32px|48px 48px|

❻ androidapp界面設計按什麼尺寸

androidapp界面設計是按720*1280的,切圖上可以點9切圖做到所有手機的適配。

狀態欄、導航欄和主菜單欄,以720*1280的尺寸來設計,那麼狀態欄的高度應為50px,導航欄的高度96px,主菜單欄的高度96px,因為是開源的系統,這里的數值也只能作為參考。

Android為了區別於IOS,從4.0開始提出了一套HOLO的UI風格設計風格,鼓勵將底部的主菜單欄放到導航欄下面,從而避免點擊下方材料誤點虛擬按鍵,很多APP的新版中也採用了這一風格。

(6)androii設計尺寸規范擴展閱讀:

注意事項:

1、通常情況要定位一個Icon只需給出上/下邊距,左/右邊距,標注圖標距離只需標到可點擊范圍外

通用型顏色、字體單獨標明一份,通用型模塊只需單獨標明一份,如導航欄。

2、手機可視區域通常為寬度固定,長度超出邊界可滑動,所以標注物體寬度時可按比例說明,如果要標注內容上下居中,左右居中,或等比可不標注。

3、當交付的是一張完整圖片時,不需做機型適配,只需給高清圖(1920*1080)即可,注意進行壓縮

4、若圖標在不同頁面重復出現,且尺寸相差不大,直接給出最大一份切圖,並在圓形圖標明尺寸,程序會根據需求縮放。

5、當背景是純色時只需給出色值,Android使用16進制色值。

參考資料來源:網路-Android

參考資料來源:網路-界面設計

參考資料來源:網路-狀態欄

參考資料來源:網路-導航欄

參考資料來源:網路-開源系統

參考資料來源:網路-切圖

參考資料來源:網路-UI設計

閱讀全文

與androidui設計尺寸規范相關的資料

熱點內容
電腦文件夾文字可以改顏色嗎 瀏覽:801
吉安程序員招聘 瀏覽:166
不能下載的單片機 瀏覽:940
程序員子女昌平二中考出來的名校 瀏覽:677
令牌桶演算法實現 瀏覽:74
tc腳本文件夾 瀏覽:732
學會繪畫pdf 瀏覽:954
隱身俠加密寶手機版 瀏覽:135
農行app怎麼辦理簽約手續 瀏覽:185
汽車壓力解壓神器 瀏覽:307
家用冰箱壓縮機有風扇嗎 瀏覽:647
安卓qq年齡怎麼看 瀏覽:839
屏幕跳屏亂點app怎麼解決 瀏覽:414
turbo加速器android 瀏覽:432
洪尚秀的電影哪裡哪個app能看 瀏覽:151
百度網站加密視頻怎麼下載 瀏覽:135
台州ug產品編程培訓班 瀏覽:866
Javalinux字體 瀏覽:520
77萬年會程序員補貼 瀏覽:610
滅火是由近及源碼 瀏覽:158