ui設計手機網頁怎麼適配

1、ui設計師在設計android版本的應用時，如何適配不同的解析度？謝謝大家 急用

由於安卓機型的雜，亂，多，導致適配很難。
基本上都是以主流手機解析度為基礎，做出幾套不同的方案。

2、UI設計稿IOS和安卓如何適配

方案一

IOS與共用一套效果圖 1242*2208

IOS與Android常用的尺寸中，最大尺寸的為i6+的尺寸，即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*1280  480*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

五套切圖     1242   640   1080    720   480  

最後，注意縮放後的圖標要細調一下。由於轉換有誤差，共用一套效果圖是有一定的風險的，例如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   640   1080    720   480  

方案三

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  適配i6 i5 i5s等尺寸

方案四

如果需要更完美，那就需要做三套效果圖了

1242*2208    640*1136   1080*1920  

還可以再加一套640*960

總之，分開做的越多套效果圖，出來的效果就越精細。反之，看起來可以就行了。

3、APP的UI設計，有沒有辦法一套切圖適配所有解析度

有一個誤區！UI設計的解析度適配不是美術設計師的工作，而是前端開發人員的工作，美專術人員屬只要提供主要屏幕的圖紙即可，其他解析度前端開發人員在編寫代碼的時候會自動適配。
但是美術設計人員需要做好以下工作，否則前端人員無計可施！
1.設計頁面的時候所有的圖標原素必須提供AI格式或者SVG格式的矢量源文件，否則適配屏幕的時候會出現點陣圖的鋸齒。
2.進行UI界面設計的時候要滿足，無限橫向平鋪延伸性，避免用復雜的點陣圖做界面縮放。
3.充分去理解扁平化設計。
做好以上幾點，就無需擔心屏幕適配問題，如果你本身是美術兼前端開發，就就得研究SVG代碼的使用了，相關知識屬於H5+CSS編碼技術，你可以去了解下。

4、UI設計，手機圖標的設計尺寸問題

手機軟來件安卓和蘋果自的也是不一樣的，屏幕不一樣，圖標大小也不一樣，手機圖標尺寸是單位是DP，安卓一般是72DP，比如720*1280的圖標要做到144PX，如果是1920*1080要達到216PX。希望能夠幫到你

5、安卓ui設計一稿適配用什麼尺寸

在做ui設計界面時選擇的尺寸是當前市面上最流行的尺寸，目前andriod尺寸720*1280應用最多，比較方便適配其他尺寸的

6、做手機網頁要考慮哪幾種尺寸呀

1、如果是比較復雜的頁面，我們只需要第一屏撐滿全屏，可以使用此方法。單獨定義html和body的樣式。【html,body{width:100%;height:100%;}】。

2、然後給DIV添加嵌套樣式【.bg{width: 100%;height: 100%;background: #ff0000;}】並在DIV中引入bgCSS【<div class="bg"></div>】保存頁面後可以看到此時div也撐滿屏幕了。

3、為了方便觀察，我們在添加一個不同顏色的DIV【<div class="content"></div>】並定義CSS【width: 10rem;height: 5rem;background: #ffea00;】。保存後網上滑屏，可以看到後添加的DIV也可以正常顯示啦。

4、在瀏覽器開發者模式下，可以切換手機的型號，不同型號手機屏幕比例是不一樣的哦，可以看到，從普通的16:9的屏幕切換到iphone7時，屏幕雖然變長了，但是下面的黃色div是不會顯示出來的。

5、切換到最新的全面屏iphoneX時，依然是紅色的div撐滿全屏的。

6、上滑屏幕後才會看到下面的其他div模塊，這樣就可以實現想要的效果了。

7、ui設計師需要做適配嗎

需要的。
UI即抄User Interface（用戶襲界面）的簡稱。泛指用戶的操作界面，包含移動APP，網頁，智能穿戴設備等。UI設計主要指界面的樣式，美觀程度。而使用上，對軟體的人機交互、操作邏輯、界面美觀的整體設計則是同樣重要的另一個門道。

8、手機端網頁設計尺寸多少

iPhone手機網頁的設計尺寸

iPhone5尺寸是640x1136px解析度是326PPI
iPhone4和iPhone4S尺寸是640x960px解析度是326PPI
iPhone和iPodTouch第一代、第二代、第三代尺寸是320x480px解析度是163PPI

安卓網頁的設計尺寸

320dp：一個普通的手機屏幕（240X320，320×480，480X800）
480dp：一個中間平板電腦像（480×800）
600dp：7寸平板電腦（600×1024）
720dp：10寸平板電腦（720×1280，800×1280）

ipad網頁的設計尺寸

iPad第三代第四代尺寸是2048x1536px解析度是264PPI
iPad第一代第二代尺寸是1024x768px解析度是132PPI
iPad Mini尺寸是1024x768px解析度是163PPI

9、請教手機ui設計如何支持不同屏幕的解析度？比如我在10寸屏上的設計如何完美移植到5寸以下屏幕？

程序自適應不同解析度時會出現 圖片拉伸、輸入框or按鈕長度改變、元素回疊壓、文字折行顯答示等變化

如果你很幸運的在設計一份界面布局非常簡單的產品，各元素在自適應小屏後沒有打亂你原有結構的話，就可以輕松一點出一份設計~但如果各元素自適應後讓界面顯得很2，那你就得考慮出兩份設計嘍~所以建議你在設計時盡量選用自適應後不會讓界面亂套的控制項，這樣也許就可以出一份設計了。

另附別的地方看到的基礎知識給你鞏固一下，希望有所啟發：）

手機屏幕尺寸分為物理尺寸和顯示解析度。 

顯示解析度指的是屏幕圖像的精密度，是指屏幕所能顯示的像素的多少。 

顯示精度是每英寸上可以顯示像素（DPI）。 

NOKIA，N78的物理尺寸為2.4英寸，顯示解析度為240*320像素；HTC T7278的物理尺寸為2.8英寸，顯示解析度為480*640像素。兩款手機顯示精度不同，同樣100*100像素大小的圖片在這兩款手機上看到的效果也不同，同樣大小的圖片在HTC T7278看起來要比NOKIA N78小的多。

10、網頁UI設計和手機UI設計的區別是什麼

網頁UI設計，面對的對象是網頁，各種的網頁。
手機UI設計，面對的對象是手機端APP的頁面。
兩這個規則是不一樣的，因為屏幕的大小是有所區別的。