UI设计技巧，移动页面怎么提高还原度

UI设计从设计稿到前端，这是产品流程过程中很重要的一个阶段，这个部分决定了设计师的设计稿是否实用。本文品索教育小编将为大家来详细介绍UI设计技巧之移动页面怎么提高还原度，希望大家能够更好地将之运用在实践中。

UI设计技巧之移动页面怎么提高还原度

移动设备尺寸

网上专门讲解移动设备尺寸的文章很多，事实上，移动设备种类之多简直是噩梦一般。所以，实际在设计或者开发过程中，往往只是选择几种设备作为基准来进行设计和开发，而对于其他情况，则采用一些适配策略覆盖。

目前主流的，是以 iPhone4 的 640x960px 或者 iPhone6 plus 的 1242x2208px 为基准设计，其他设备均采取适配策略。我们先假定设计稿是按 640x960px 的规范输出，先来看看前端的常用适配方案。

前端适配方案

前端的适配方案大致分为四种：1，根据 meta 按比例缩放；2，根据页面宽度百分比适应；3，基于媒体查询的响应式方案；4，REM缩放方案。

1，根据 meta 按比例缩放

这种方案的实现更偏技术，大致原理是根据 设备的分辨率及像素比 等信息，计算出页面的缩放（scale）数值，来进行等比缩放。最终的效果就是基于 640x960px 的设计稿再进行等比缩放，这种实现比较适合某些图片较多的活动页面开发，可以使用设计稿上的绝对像素值进行开发，即设计稿上是 200px 则 CSS 代码中的数值也是 200px。

当然，这种方案也有致命的缺点，即脚本计算的结果很难覆盖全部设备，对于一些计算不准确，或者分辨率像素比未知的设备，很容易整个页面异常放大或缩小，直接暴露严重 BUG。综上，这种缩放方案可以总结出以下基本特征：

效果：按设计稿等比缩放

场景：图片较多的活动页面开发

优点：可以直接按照设计稿像素值开发

缺点：许多设备无法覆盖，不断填坑

2，根据页面宽度百分比适应

曾经很长的一段时间，我们都采用百分比适配方案。例如微信购物入口中的京东购物，目前仍然采用这种方案。

这种方案的主要表现就是，在比基准设备（如 640x960px）宽的设备上，页面元素的 横向宽度 是按百分比自适应的，但是 高度不会变化。所以，无论遇到什么设备，只需要在宽度上进行兼容即可满足，而文本图片等内容，也可以按照宽度自适应，尽可能充分利用屏幕空间。

而开发时，由于 iPhone 以及许多 Android 机都具有高分辨率屏幕，比如 iPhone4S 的 Retina 屏幕实际像素点是物理像素的 两倍。所以，我们开发时要在 640x960px 的设计稿尺寸的基础上除以 2，比如设计稿上的高度是 200px，则 CSS 中就是 height:100px;

关于 Retina 屏幕的基本知识，建议大家自己查找资料，我只挑重点。

效果：按设计稿尺寸除以2，元素宽度使用百分比实现

场景：平台型页面，页面布局不是很复杂

优点：可以适应几乎所有设备

缺点：横向拉宽会使布局比例失调，且复杂结构百分比实现有难度

3，基于媒体查询的响应式方案

响应式设计，曾经乃至现在都是非常时髦的概念，不过在实际应用中，响应式设计还是有其相对狭隘的应用场景。一般除了一些创新的小公司，或者某些专题网站之外，很少会用一套代码来适配所有终端。比如 PC，Mobile，Pad 甚至 iWatch 等，全都用一套代码来适配显然是不科学的。

目前普遍的观点是，响应式设计更适合专题页面，或者没有资源来针对各个终端进行单独开发的团队来使用。

响应式设计主要遵循 Mobile First，要针对不同设备给出不同设计方案，并设置合适的 断点，结合百分比方案，来在不同的设备显示不同的布局。

效果：不同设备表现可能截然不同

场景：专题网站，小团队低成本开发

优点：不通设备可以发挥更多的想象力

缺点：要出多套设计，且内容可能需要取舍

4，REM缩放方案

REM 方案的原理跟 meta 方案非常相似，只不过是更加粗暴地根据设备的宽度来调整缩放。与 meta 方案不同的是，REM 方案并不是缩放整个页面，而是页面上所有的尺寸都是与根元素（html）的字体大小相关的，我们只是根据不同设备来调整根元素字体大小，则所有尺寸随之变化。

效果：按照设计稿等比缩放

场景：活动页面及部分平台页面

优点：开发方便，适应性好

缺点：等比缩放超大会显得不精致，脚本计算晚页面可能跳动

以上便是关于UI设计技巧之移动页面怎么提高还原度，作为设计师，只需要知道大概的计算方式，以及基本的适配方案就可以了。最后，也是最重要的，你的团队一定要有设计规范，并且有与之对应的开发规范，这样才能真正的实现无缝对接。