androidicon尺寸
㈠ 移動應用界面設計的尺寸設置及規范
一、android篇
1、android解析度
Android的多解析度,一向是設計師和開發者非常頭疼的事兒。盡管如此,對於多分辨造成的復雜問題,也是大家要優先解決的。Android支持多種不同的dpi模式:ldpi 、mdpi 、hdpi 、xhdpi 、xxhdpi 、xxxhdpi
注意,ppi、dpi 是密度單位,不是度量單位 :
dpi主要應用於輸出,重點是列印設備上;ppi對於設計師應該比較熟悉,photoshop畫布的解析度常設置為72像素/英寸,這個單位其實就是ppi 。盡管概念不同,但是對於移動設備的顯示屏,可以看作ppi=dpi 。
ppi的運算方式是:PPI = √(長度像素數² + 寬度像素數²) / 屏幕對角線英寸數。即:長、寬各自平方之和的開方,再除以屏幕對角線的英寸數。
以iphone5為例,其ppi=√(1136px² + 640px²)/4 in=326ppi(視網膜Retina屏)
對於android手機,一個不確切的分法是,720 x 1280 的手機很可能接近 320 dpi (xhdpi模式),480 x 800 的手機很可能接近 240 dpi (hdpi模式),而320 x 480 的手機則很接近 160 dpi(mdpi模式)。
2、單位換算方法
android開發中,文字大小的單位是sp,非文字的尺寸單位用dp,但是我們在設計稿用的單位是px。這些單位如何換算,是設計師、開發者需要了解的關鍵。
簡單理解的話,px(像素)是我們UI設計師在PS里使用的,同時也是手機屏幕上所顯示的,dp是開發寫layout的時候使用的尺寸單位。
為什麼要把sp和dp代替px? 原因是他們不會因為ppi的變化而變化,在相同物理尺寸和不同ppi下,他們呈現的高度大小是相同。也就是說更接近物理呈現,而px則不行。
根據單位換算方法,可總結出:
當運行在mdpi下時,1dp=1px :也就是說設計師在PS里定義一個item高48px,開發就會定義該item高48dp ;
當運行在hdpi模式下時,1dp=1.5px :也就是說設計師在PS里定義一個item高72px,開發就會定義該item高48dp ;
當運行在xhdpi模式下時,1dp=2px :也就是說設計師在PS里定義一個item高96px,開發就會定義該item高48dp ;
當你的app需要適配多個dpi模式的時候,請參考圖1的比例進行換算 。
3、設計稿基本元素的尺寸設置
為了適應多解析度的手機,理想的方式是為每種解析度做一套設計稿,包括所用到的icon、設計稿標注等。但在實際開發中,這種方法耗時耗力。所以通常會選擇折中的方法。
方法一 :在標准基礎上(比如xhdpi)開始,然後放大或縮小,以適應到其他尺寸。不足之處是,對於更高解析度的手機,圖標被放大後會導致質量不高。
方法二: 以最高解析度為基準設計,然後縮小適應到所需的小解析度上。缺點是,圖標等若都最大尺寸,載入時速度慢且耗費流量較多,對於小解析度的用戶也不夠好。
結合友盟的解析度佔比數據、也為了方便換算到android開發中的尺寸單位, 推薦設計稿的畫布尺寸選用 720X1280 ,解析度仍舊為72ppi(像素/英寸)。
在android規范中對於導航欄、工具欄等的尺寸沒有明確的規定。但根據48dp原則,以及一些主流的android應用的截圖分析,總結一下尺寸要求:
狀態欄高度 :50 px
導航欄、操作欄高度 :96 px=48dp x 2
主菜單欄高度 :96 px
內容區域高度 :1038 px (1280-50-96-96=1038)
Android最近出的手機都幾乎去掉了實體鍵,把功能鍵移到了屏幕中,高度也和菜單欄一樣為:96 px
4、圖標和字體大小(來自官方規範文檔)
a、啟動圖標(home頁或app列表頁)
整體大小為48 x 48 dp
b、操作欄圖標,代表用戶在app中可以使用到的最重要的圖標
整體大小為32 x 32 dp ,圖形實際區域為 24 x 24 dp
c、小圖標/場景圖標,提供操作或特定項目的狀態。
比如gmail app的星型標記、一些內容展開收起用到的向下向上的圖標等。整體大小為16 x 16 dp ,圖形實際區域為 12 x 12 dp 。
d、通知圖標
如果app有通知,要提供一個有新通知時顯示在狀態欄的通知圖標。整體大小為24 x 24 dp ,圖形實際區域為 22 x 22 dp 。
註:android規范提供的尺寸單位是dp,若設計稿尺寸設為720 x 1280 ,圖標大小需在規范要求的尺寸數字上乘以2。比如操作欄圖標32 x 32 dp ,則設計稿上應該是64 x 64 px 。
e、字體大小
Android規范中的要求如下:
前面提到Android開發中的字型大小單位是sp,而換算關系是 sp*ppi/160 = px 。所以720 x 1280尺寸的設計稿上,字體大小可選擇為 24px 、28px 、32px 、36px ,主要根據文字的重要程度來選擇,特殊情況下也可能選擇更大或更小的字體。
f、其他尺寸要求
通常把48dp作為可觸摸的UI元件的標准。
為什麼要用48dp呢?一般來說,48dp轉化為一個物理尺寸約9毫米。通常建議目標大小為7-10毫米,以方便用戶手指能准確並且舒適觸摸目標區域 。
如果你設計的元素高和寬至少48dp,你就可以保證:
(1)觸摸目標絕不會比建議的最低目標(7mm)小,無論在什麼屏幕上顯示。
(2)在整體信息密度和觸摸目標大小之間取得了一個很好的平衡。
另外,每個UI元素之間的空白通常是8dp 。
二、iOS篇
1、解析度
iPhone 界面尺寸:
iPad 界面尺寸:1024×768、2048×1536
(以上單位都是像素,至於解析度一般網頁UI和移動UI基本上都只要 72 ppi)
2、單位換算px、pt
這里需要先區分pt、px,pt(磅值)是物理長度單位,指的是72分之一英寸。手機上看來同一大小的字磅值是一樣的,但是換算成不同解析度手機的字型大小px值不一樣。(px=pt*ppi/72)
iPhone在出retina屏(也就是4S)之前的屏幕像素是320x480px,屏幕密度是163ppi,4S的屏幕像素是640x960px,屏幕密度是326ppi,翻了一倍。iPhone5的ppi沒有變化,兼容性方面要增加類似首屏畫面等程序上的判斷。
在iPhone界面上元素的定位、尺寸是通過一個單位point,而非px,屏幕上固定有320x480pt,retina屏兩倍的解析度改變的只是pt和px之間的比例而已,這樣就能實現不改變程序,只上傳兩套圖片就兼容兩個解析度。
****在設計的時候並不是每個尺寸都要做一套,尺寸按自己的手機尺寸來設計,比較方便預覽效果,一般用 640×960 或者 640×1136 的尺寸設計。其中設計稿的畫布解析度設為默認的72ppi(此時1px=1pt ),所以設計師可以統一採用px為單位。
開發拿到設計稿時,將上面標注的以px為單位的字型大小大小、圖像尺寸除以2,就是非retina屏上的pt值,這樣在retina屏上也可以根據此pt值換算對應的px大小,以確保不同的解析度下有合適的效果。****
3、基本元素的尺寸設置
iPhone的APP界面一般由四個元素組成,分別是:狀態欄、導航欄、主菜單欄以及中間的內容區域。
這里取用 640×960 的尺寸設計,那我們就說說在這個尺寸下這些元素的尺寸:
狀態欄:就是我們經常說的信號、運營商、電量等顯示手機狀態的區域,其高度為:40 px
導航欄:顯示當前界面的名稱,包含相應的功能或者頁面間跳轉的按鈕,其高度為:88 px
主菜單欄:類似於頁面的主菜單,提供整個應用的分類內容的快速跳轉,其高度為:98 px
內容區域:展示應用提供的相應內容,整個應用中布局變更最為頻繁的,其高度為:734 px=960-40-88-98
以上尺寸適用於 iPhone 4、4S,iPhone5/5s 的 640×11136 的尺寸,其實就是中間的內容區域高度增加到:910 px,其他尺寸也同上。
4、常用圖像、圖標大小(來自官方規範文檔)
單位:像素
5、字體大小
iOS交互設計規範文檔上,對字體大小沒有做嚴格的數值規定,只提供了一些指導原則:
單位:點pt
– 即便用戶選擇了最小文字大小,文字也不應小於 22 點。作為對照,正文樣式在大字型大小下使用 34 點字體大小作為默認文字大小設置。
– 通常來說,每一檔文字大小設置的字體大小和行間距的差異是 2 點。例外情況是兩個標題樣式,在最小、小和中等設置時都使用相同字體大小、行間距和字間距。
– 在最小的三種文字大小中,字間距相對寬闊;在最大的三種文字大小中,字間距相對緊密。
– 標題和正文樣式使用一樣的字體大小。為了將其和正文樣式區分,標題樣式使用加粗效果。
– 導航控制器中的文字使用和大號的正文樣式文字大小(明確來說,是 34 點)。
– 文本通常使用常規體和中等大小,而不是用細體和粗體。
網路用戶體驗做過的一個小調查:
單位:像素px
還有個方法就是找你覺得好的APP應用,手機截圖後放進PS自己對比調節字體大小。
㈡ Android發布主流應用市場icon&應用截圖尺寸
*應用小圖標:尺寸:16 * 16、大小20K以內、PNG格式。
*應用圖標:尺寸:512 * 512、大小200K以內、PNG格式
*應用截圖:請上傳4-5張截圖(尺寸保持一致),單張圖片不超過1M。截圖不能小於320*480像素, 推薦480*800像素。JPG、PNG格式。
*應用圖標:圖標需為正方形。大小:2MB 以內;尺寸:216*216px;格式:PNG、 WEBP。
*應用截圖和視頻:您可以在這里上傳應用詳情頁展示的素材。介紹截圖是必填素材,其他素材可選填,如果您提交了其他素材可能會讓該應用在華為應用市場客戶端有更好的展示效果。
豎向截圖:需上傳 3~5 張。大小:2MB 以內;尺寸:450*800px;格式:PNG、 JPG、 JPEG、 WEBP。(推薦使用豎向截圖)
*應用圖標:請確保上傳的圖標和APK內的圖標一致(512 X 512,png格式)
*應用截圖:請至少上傳3張圖片,至多5張截圖,大小不大於5M,1080*1920。
*icon:要求與安裝包中圖標一致。尺寸:512*512px,圖片格式:PNG,小於1M。
*上傳豎版截圖:請上傳3-5張截圖,支持JPG、PNG格式。截圖尺寸要求:1080*1920,單張圖片不能超過1M。請去除截圖中的頂部狀態欄的通知圖標,圖片中不得使用其他品牌的手機作為邊框或宣傳圖
*應用icon:支持jpg/png格式,尺寸要求長等於寬,不低於256*256,不超過512*512,大小50k以內,僅支持直角圖標,
*上傳截圖:上傳3-5張清晰截圖。尺寸為豎圖480*800,格式為jpg/png,每張圖片尺寸一致,單張圖片不超過2MB)
*icon:PNG 格式,512 X 512 像素,小於 1024 KB。
*截圖:JPG/PNG 格式,最小 320 像素,最大 3840 像素,圖片比例 2:1,至少需要4個圖片,最多可上傳8個。可以注冊4~8張圖片,圖片將會按照您的注冊順序進行展示。
*應用圖標:要求與安裝包中圖標一致。尺寸:512*512PX,圓角半徑弧度:70PX,圖片格式:PNG。
應用截圖: 請上傳4-5張截圖(尺寸保持一致),支持JPG、PNG格式。截圖尺寸要求:不小於800*480(480*800),單張圖片不能超過3M。請去除截圖中的頂部通知欄。
*應用圖標:尺寸512x512,格式PNG,小於1M。
*應用截圖:請上傳至少 3 張圖片,規格:1280 x 720或720 x 1280,1800 x 1012或1012 x 1800,1920 x 1080或1080 x 1920,2560 x 1440或1440 x 2560
圖片請勿出現與應用實際功能無關的內容
圖片請勿出現重復、拉伸、壓縮、模糊、黑(白)邊、黑(白)角
圖片請勿出現第三方應用市場LOGO或其他品牌手機外觀素材,推薦使用魅族手機外觀素材
*應用圖標
請上傳PNG格式的圖標,尺寸:200X200 px,大小:小於800KB。
請開發者重點關注以下注意事項,大部分應用曾因此不合規被拒絕:
1.提交應用圖標必須與渠道包內解析圖標保持一致
2.應用圖標必須為透明背景,不可存在白邊、藍邊等特殊情況
*應用截圖
請上傳JPG或PNG格式的圖片,最小尺寸:800 X480 px,單張圖片小於1M。
請開發者重點關注以下注意事項,大部分應用曾因此不合規被拒絕:
1.截圖數量:4-6張(每張截圖不得相同,且需保持尺寸一致);
2.截圖必須與軟體實際運行內容一致;
3.截圖中不得含有與App本身無關的應用圖標;
4.截圖不得為應用啟動畫面;
5.請務必上傳豎版截圖
㈢ Android UI規范是什麼
從事UI設計行業的朋友都知道,每一張設計稿都是有規范尺寸的,並且IOS的和Android還不同,IOS UI設計規范為375*667 1x的尺寸,那麼Android UI規范是什麼呢,下面讓我們一起來了解一下。
- 01
在做Android UI設計的時候,畫布的尺寸我們一般都是選擇360*640 1x,也就是說是選擇720*1280這個尺寸。
- 02
我們從上到下來進行了解,最上邊的是狀態欄,狀態欄的高度是25。
- 03
在狀態欄中肯定就是信號、電源以及時間這些了,每個Android定製系統的擺放樣式都不同,這一點不用糾結。
- 04
狀態欄下邊就是導航欄了,導航欄起到的是導航作用,高度是45px。
- 05
導航欄中間一般都是有文字來起到提醒作用的,導航文字的大小一般都是18px。
- 06
在最下方就是我們的標簽欄了,標簽欄的作用就是給用戶提供切換界面的作用,標簽欄的高度為50px。
- 07
在標簽欄中擺放的肯定就是我們的ICON圖標了,要注意,圖標的切圖點擊區域不能夠小於24px。
- 08
一些ICON圖標的下方還會有文本,這里文本的大小一般就是10或者是11px了,因為范圍有限。
特別提示
本文尺寸均為1x。
㈣ Android知識點——Glide獲取圖片寬高
先很負責任的說一下,這個內容也是網路來的,但是很不負責任的是,當初只記錄解決方案,忘了記錄是查看的哪篇博客了,這里先對不知道借鑒的誰表示感謝。無法分享鏈接,就厚著臉皮把(轉)字去掉了,請大家諒解。
先提供一下 Android知識點——目錄 的鏈接,然後讓我們進入正題。
實際上,這篇博客所說的內容並不是所有人都可以用到,畢竟大多數時候,我們只需要展示圖片,而並不需要知道圖片的寬高;有的時候我們只需要知道展示的寬高(即ImageView)的寬高,不需要知道圖片資源的實際尺寸。
但是需求千千萬萬嘛,以程序員的腦洞,怎麼能想到產品的腦洞究竟有多大呢?我這里就遇到了一個需求,那就是需要在一個可縮放的圖片上標注icon(類似地圖上的marker)。這還不算完,畢竟在找到的圖片縮放控制項 PhotoView 中,我們點擊到圖片上後,是有點擊點位在整個圖片上的百分比坐標回調的。而多端通過百分比是很容易就能在圖片中獲取到相同的點位,並回顯出對應的icon的(沒辦法,誰讓我找的是方便計算百分比的呢),結果Web端優先做了這部分功能,使用的是在原圖上的具體坐標。這樣我百分比的計劃自然就落空了,只能想辦法計算出具體的點位。
因此獲取圖片的原始尺寸就是一個必不可少的環節,我剛剛網路了一下,查到 wangke_king 的 Android獲取圖片的寬度和高度 中使用的方法是:
我這里沒有親測過,不過應該是沒有問題,但是很遺憾我們的需求是在網路圖片上做測量,所以這個方法也無法使用,不過如果其他有類似本地圖片需求的,不妨嘗試一下。而我之前找到的解決方案為:
首先說明,上述的方法是可以實現圖片的尺寸測量的,只是有一個小小的問題,那就是想要計算出Drawable的寬高,需要必須等到圖片載入完成之後,嘗試了使用view.post(),監聽組件載入完成,但是並不是每次都能獲取到Drawable的寬高,因此當初的解決方案是寫了個兩秒鍾的定時器,每50毫秒測量一次,直到獲取到值為止。這樣的解決方案可謂是相當無腦了,而且還要消耗很多不必要的資源。
還好皇天不負有心人啊,終於找到了通過Glide獲取圖片寬高的方式:
這樣我們就可以通過回調,在Glide將網路圖片注入到對應的圖片組件的時候,得到圖片的Bitmap,然後在通過Bitmap來獲取圖片的寬高。但是需要注意的一點是,Bitmap的泛型是需要手動去設置的哦。
另外SimpleTarget現在已經過時,暫時還沒有查到。我搜索過SimpleTarget過時使用什麼替換,有一些說法是使用BitmapImageViewTarget ,不過下面是實際測試結果。
圖片鏈接:
網路圖片-景色
測量結果:
圖片信息:
如果不是我使用有誤的話,BitmapImageViewTarget 是無法替換SimpleTarget ,實現測量圖片原始寬高的功能的。