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的页面。
两这个规则是不一样的，因为屏幕的大小是有所区别的。