安卓app界面設計按什麼尺寸
⑴ 安卓手機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
⑵ App後台尺寸是多少
你問的是app界面設計尺寸是多少嗎?
不同手機的APP界面尺寸是不一樣的。iphone 5:設計尺寸是640px*1136px安卓的與蘋果的不一樣有兩種尺寸,460*800 px和1280*720 pxo
app的界面設計要根據手機的尺寸而來的,而且是要設計成那種多個款式的才能夠滿足,所以不能夠將app的界面設計的尺寸弄死。
⑶ 安卓/ios中,app設計時常見的尺寸有哪些
大家都知道手機採用的:一個是蘋果的iOS系統,另一個就是谷歌公司的安卓系統。華為的鴻蒙系統雖然早就上線,但是還沒有真正運用在手機移動端上,小阿在這里期待著,希望有一天也能寫「華為『鴻蒙系統』的界面尺寸規范。」
這兩者之間有一個明顯的區別就是iOS系統是非開源的,簡單來說就是不能別隨意改動的,連圖標都是必須帶圓角的,對交互設計師很友好的。
主標題的字體大小設置一般是32-36左右,加粗居中。列表中的文字就要小一些,字體大小為30,不會加粗。輔助性字體大小一般24-26。說明文字一般不會小於22,最小設置為20,再小就看不到啦。
另外需要注意的一點是所有的字型大小設置都必須為偶數,上下級內容字型大小極差關系為2-4號。
⑷ app界面設計尺寸規范大全
原型設計尺寸
☆ 狀態欄(status bar):就是電量條,其高度為:20px;
☆ 導航欄(navigation):就是頂部導航,有線其高度為:45px;沒有線高度就是44px;
☆ 主菜單欄(submenu,tab):就是標簽欄,底部導航,其高度為:46px;
☆ 信號格:5 * 5
☆ wifi 圖片:11 * 9
☆ 鎖:11 * 11
☆ 導航:8 * 8
☆ 電量:22 * 9
☆ 閃電:5 * 8
☆ 狀態欄中的文字:10px
☆ 頂部導航欄的圖標尺寸為16x16px左右,底部標簽欄的圖標尺寸為23 x 23px左右。
☆ 導航欄的文字大小最大值是14px,底部標簽欄的圖標下方的文字大小為10px。
☆ 內容區域的文字大小是:10px, 12px,14px,16px。
① 文字黑色:#282828
② 文字深灰色:#656565
③ 文字淺灰色:#989898
④ 邊框淺灰色:#C3C3C3
⑤ 背景淡灰色:#f2f2f2
⑥ 按鈕背景純白色:#ffffff
A、疏遠距離:比如,所有元素距離手機屏幕最左邊的距離。
B、親密距離:比如,左邊圖標與右邊文字之間的距離。
1、iPhone6手機模型尺寸:429x881px
2、界面尺寸布局:滿屏尺寸375x667px
3、高度電量條高度20px,導航欄高度44px,標簽欄高度46px;
4、各區域圖標大小導航欄圖標16px,底部標簽欄圖標23px;
5、各區域文字大小電量條-文字10px,導航欄-文字14px,標簽欄-文字10px;
6、常用的文字大小:16px,14px,12px,10px;
7、常用的顏色:背景淺灰色:#f2f2f2, 文字深黑色: #323232,邊框色深灰:#CCCCCC;
8、常用可點擊區域的高度(比如搜索區域):28px;
9、單行文字的背景框的高度:44px,雙行則為:88px,三行則為:132px;
10、常用間距:親密距離:10px;疏遠距離:15px,其它距離:5px,22px等;
⑸ 安卓系統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是像素的意思, 不同設備顯示效果相同。
安卓各屏幕密度關系如下:
3、圖標
不同手機品牌的圖標的標志是不一樣的,對應不同大小屏幕的尺寸如下:
應用圖標的尺寸:
快捷圖標的尺寸:
系統圖標的尺寸:
4、應用欄的尺寸
從左到右依次是:① 應用欄高度:56dp;應用欄左右內邊距為16dp;應用欄圖標上下左內邊距為16dp;應用欄標題左內邊距為72dp;應用欄標題下邊距:20dp;
②應用欄高度為128dp;
③操作欄高度為56dp;標題欄高度:80dp;標題欄底部內邊距:8dp;描述區域高度:72dp;描述區底部內邊距:16dp。
5、列表高度
垂直邊框、水平外邊距、邊框左右外邊距各16dp;帶有圖標或者頭像的內容有72dp的左邊距。
垂直邊距
①狀態欄:24dp;②工具欄:56dp;③子標題:48dp;④列表項:72dp
垂直邊框、水平外邊距、邊框左右外邊距各16dp;帶有圖標或者頭像的內容有72dp的左邊距。
垂直邊距
①狀態欄:24dp;②工具欄:56dp;③標題和列表項:48dp;④子標題:48dp;⑤內容區域間距離為8dp
6、界面適配
安卓多屏幕支持的基礎是它能夠管理應用程序的布局和點陣圖可繪制對象的渲染以適當的方式對當前屏幕配置的能力。該系統處理的大部分工作由布局縮放以適合屏幕尺寸/密度和縮放點陣圖可繪制在屏幕密度正確呈現您的應用程序在每個屏幕的配置,來優化用戶界面設計,帶來更良好的用戶體驗。
如何做到安卓界面適配呢?大家一定要很清楚的了解解析度、屏幕大小、密度的關系;明白實際密度和系統密度的關系,dp、sp、px的區別;明白dp與px的轉換。這里不做過多闡述,後期寫一篇具體的~
安卓的界面規范就講到這里,要明白設計界面規范的意義是確保設計的統一性與合理性,規范維護的是項目的統一,為了項目利益最大化,高效化。所以作為UI設計師的我們,如果一點設計規范不遵守,全靠自己想當然,那就別發給前端人員啦,他也看不懂。
⑹ 做手機界面設計的尺寸是多少
從設計方面來看,做手機界面設計的尺寸一般分為iPhone和Android兩種設備。如果以iPhone為設計設備,尺寸一般是使用750x1334,1125 x 2436,1242 x 2208這三種尺寸設計都可以,750x1334是2倍圖設計,1125x2346和1242x2208都是3倍圖來進行設計。
如果是用PS做設計稿就用750*1334,如果是用SKetch或者XD來設計,常見是用1倍尺寸來說,也就是375*667或者375*812(iPhone X)。
如果以Android為設備進行設計,尺寸一般使用720x1280,1080x1920進行設計第一種是2倍圖,第二種是3倍圖。
設計注意事項:
尺寸問題: 480X800,540X960,720X1280,1080X1920象素尺寸是較常見的手機屏幕尺寸,在設計時可以根據實際產品要求進行設計,更大的屏幕可以有更多的交互表現和視覺元素的支持,較為自由。
色彩問題: 由於手機lcd本身的限制,在色彩的還原程度上沒有pc如此完善,因此在選用色彩時要根據使用的屏幕進行調節。
可實現性問題: 受到硬體運算速度和內存的影響,以及不可預計的後台程序開發難度,過於復雜的效果將很難進行實現,與程序工程師和ui工程師,硬體工程師的溝通顯得尤為重要。
想要了解更多關於手機界面設計的相關信息推薦選擇Pixso協同設計。Pixso可以多人雲端協作設計,實時同步字型大小、邊框、顏色等各種細節。Pixso不僅是一站式產品設計協作工具,更是一款專業的UI/UX設計工具,更多矢量網格、布爾運算、樣式創建、智能排版等高階功能,使設計師真正專注於創造本身。
⑺ 移動應用界面設計的尺寸設置及規范
一、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自己對比調節字體大小。
⑻ iphone和android的app界面尺寸是多少
iPhone 界面尺寸:320x480、640x960、640x1136
iPad 界面尺寸:1024x768、2048x1536