androidui適配
『壹』 Android應用的UI設計圖要做多大解析度
Android應用的UI設計圖要做的解析度為:1920*1080;
一般來說安卓常見的解析度為:320*480;480*800;540*960;720*1280;1920*1080;
但對於UI設計來說,盡可能保持設計的解析度達到技術開發的標准,一般都以720*1280或1920*1080為主,但為了避免技術協調的沖突,則以1920*1080為主,不會出現大的錯誤。
『貳』 UI設計稿IOS和安卓如何適配
方案一
IOS與Android共用一套效果圖 1242*2208
IOS與Android常用的尺寸中,最大尺寸的為i6+的尺寸,即1242*2208px
IOS常用尺寸為1242*2208750*1334640*1136640*960
其中750*1334640*1136640*960同為@2x,1242*2208為@3x
所以750*1334640*1136640*960隻做一套640*1136就好了
Android常用尺寸為1080*1920720*1280480*800
他們之間相鄰是可以整除1.5的,也就是1080除以1.5等於720,720除以1.5等於480
即,這三個尺寸可以等比縮放大小,只做一套1080*1920就可以了。
那麼,問題來了。
IOS要做兩套尺寸,1242*2208與640*1136
Android要做一套尺寸,1080*1920
這樣不就是三套了嗎?
其實,i6+的尺寸1242*2208整除1.15就剛好等於1080*1920
也就是說,1242*2208與1080*1920是可以等比縮放的
那麼,i6+與Android的尺寸只做一套1242*2208就可以了。
現在就剩下IOS的640*1136
1242*2208可以直接縮放成640*1136嗎?
如果要等比縮放肯定不行,因為他們之間不能整除
但是,如果我們把1242*2208的尺寸直接放到PS里等比縮小寬度到640,會發現原本2208的高度變成了1138,也就是比1136多了2px,2px的誤差其實無關緊要了,硬著頭皮改成1136去!
現在,你會發現,裡面的圖標,其實1138跟1136的大小都是一樣的。
為什麼提到圖標呢?因為我們的交付物只要一套效果圖與五套切圖就好了。
一套效果圖1242*2208
五套切圖12426401080720480
最後,注意縮放後的圖標要細調一下。由於轉換有誤差,共用一套效果圖是有一定的風險的,例如UI細節上的風險。開發前,設計師與技術人員要先共同確認此適配方案,全程溝通,及時改正UI方面的問題。
方案二
IOS與Android共用一套效果圖750*1334
上面提到,750*1334640*1136640*960同為@2x,所以750跟640用同一套圖標,同一套字體就可以了,至於其他的尺寸大小,只要跟著尺寸延伸就沒問題了。
750*1334應用到1242*2208,則需要把@2x的圖標放大導出成@3x,也就是把字體圖標放大1.5倍,其餘的,直接放大到1242就行了。
至於Android的版本,我個人的做法是把750*1334直接換算成為1080*1920,因為只有1px之差,我就忽略了。換算出了1080*1920,那麼Android的其他尺寸也就好辦啦~同樣,我們的交付物只要一套效果圖與五套切圖就好了。
一套效果圖750*1334
五套切圖12426401080720480
方案三
IOS與Android各做兩套效果圖
原理跟方案一、二差不多,但為了追求細節上的完美,可以多做一套效果圖,即兩套效果圖
1242*2208與640*1136
1242*2208適配i6+Android三種尺寸
1242*2208整除1.15等於1080*1920
1080*1920整除1.5等於720*1280
720*1280整除1.5等於480*800
640*1136適配i6i5i5s等尺寸
方案四
如果需要更完美,那就需要做三套效果圖了
1242*2208640*11361080*1920
還可以再加一套640*960
總之,分開做的越多套效果圖,出來的效果就越精細。反之,看起來可以就行了。
『叄』 IOS與Android的UI設配方案
IOS與Android共用一套設計效果圖 1242*2208
IOS與 Android常用的尺寸中,最大尺寸為6p的尺寸,即1242*2208px
IOS常用尺寸: 1242*2208 750*1334 640*1136 640*960,其中750*1334 640*1136 640*960 同為@2x 1242*2208為@3x,所以750*1334 640*1136 640*960隻做一套640*1136就好。
Android 常用尺寸:1080*1920 720*1080 480*800,他們之間相鄰是可以整除1.5的,也就是1080除以1.5等於720,720除以1.5等於480,即這三個尺寸可以等比縮放大小,只做一套1080*1920就可以。
那麼問題來了。
IOS要做兩套尺寸,1242*2208與640*1136
Android要做一套尺寸,1080*1920
這樣不就是三套設計圖了嗎?設計師們會被氣死的?
其實,6p的尺寸1242*2208整除1.15就剛好就等於1080*1920,也就是說,1242*2208與1080*1920是可以等比縮放的。
現在就剩下IOS的640*1136。
那麼就有人問,那IOS的1242*2208可以直接等比縮放成640*1136。答案是不可以的,因為他們之間不能整除的,但是我們把1242*2208的設計圖直接在Photoshop裡面直接等不縮放到寬度為640的尺寸,我們會發現原本的2208變成了1138,也就是說比1136多了2個像素,2個像素的誤差對於沒有有強迫證的也就無所謂了,2個像素的誤差我們會將1138硬改成1136,現在你會發現,裡面的圖標,1136跟1138大小其實是一樣。
為什麼提到圖標呢?因為我們交付的物只需要一套效果圖與五套切圖就好了。即
一套效果圖 1242*2208
五套切圖 1242*2208 640*1136 1080*1920 720*1080 480*800
最後注意縮放的圖標要細調一下,由於轉換有誤差,共用一套效果圖是有一定風險的,例如UI細節上的風險。開發前,設計師與開發人員要先共同確認此適配方案,要全程溝通,及時改正UI方面的問題。
IOS與Android共用一套設計效果圖 750*1334
上面提到過,750*1334 640*1136 640*960 同為@2x,所以750跟640用同一套圖標,同一套字體,至於其他尺寸大小,只要跟著尺寸延伸就沒問題啦。尺寸750*1334應用1242*2208,則需要把@2x導出成@3x,也就是把字體放大1.5倍,其餘的直接放到1242就可以啦。
至於Android版本,我個人的做法是把750*1334直接換算成1080*1920,因為只有1PX像素只差,直接忽略。換算出1080*1920,Android的其他尺寸就按他們之間的規律處理就可以啦。
因為我們交付的物只需要一套效果圖與五套切圖就好了。即
一套效果圖 750*1334
五套切圖 1242*2208 640*1136 1080*1920 720*1080 480*800
IOS與Android各做兩套設計效果圖
原理跟方案一、二差不多,但為了追求細節上的完美,可以多做一套設計圖,即兩套設計圖:1242*2208和640*1136.
1242*2208適配6P、Android三種尺寸。
1242*2208整除1.5等於1080*1920:
1080*1920整除1.5等於720*1280:
720*1280整除1.5等於480*800:
640*1136適配6 5 5S等尺寸。
如果追求完美,那就需要三套圖。即:
1242*2208 640*1136 1080*1920
還可以加上一套640*960,總之分開做越多套,出來的效果圖就會越精細,反之,你懂得,不過這也取決設計師本人和公司領導的決策,會不會給那麼多時間。不說廢話了,希望能幫到各位!
『肆』 安卓系統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設計師的我們,如果一點設計規范不遵守,全靠自己想當然,那就別發給前端人員啦,他也看不懂。