屏幕适配那些事（03）几点建议

发表于

屏幕适配是一个老生常谈的问题了，我用这三篇博客和大家讨论点屏幕适配相关的干货。

“如果方向错了，走得越远，偏离目标越远。”对于屏幕适配，设计稿就是“目标”，开发者对于设计稿的理解就是“方向”。很多适配糟糕的界面并不源于“糟糕的设计”或者“糟糕的实现”，而是因为设计师设计出了不可适配的界面或者开发者没有理解适配意图。

这里给出一些建议，希望帮助到大家，如果你有其他好的建议，也希望能分享出来，欢迎讨论。

使用逻辑分辨率

设计稿使用逻辑分辨率是是很重要的一点。推荐逻辑分辨率并不是因为我作为一个开发者懒得进行单位转换，而是Android和iOS在进行UI布局时都是使用逻辑像素为单位，使用逻辑像素作为设计稿的单位除了上面说的减少单位转换，还可以减少很多不必要的麻烦。

  1. 使用像素为单位，设计师可能轻松设置出13px这样的尺寸。这种尺寸在多个分辨率之间转换和缩放时，就会在个别屏幕上出现“半像素”。素质好的设备，会让边缘看起来发“虚”，素质不好的屏幕，就可能出现“彩边”。然后，你再想想一下线条充满半像素的图标……而使用逻辑分辨率就几乎不会有这个问题，大部分屏幕的逻辑像素密度都是整数，对逻辑像素为单位的尺寸放大渲染时，同样总能得到整数。
  2. 像素对齐切图。如果使用逻辑分辨率，对于图标的像素对齐，只需要考虑单像素对齐即可；如果以某个特定的屏幕像素分辨率进行设计，很容易出现难以进行像素对齐的图标。应用开发中，一般会有一个规范的图标尺寸，就像一个边界，比如14或16，这样能保证所有图标都能看起来“重量相同”；而且为了防止缩放出现虚边，一般都是偶数。还拿刚才的尺寸举例，如果设计稿尺寸为iPhone6的分辨率，要切出一个13px的图标，就很尴尬了，这里可以将图标缩放到偶数，再进行切图（我平时就是这么干的）。
  3. 更麻烦的问题是如果设计稿不使用甚至不考虑逻辑像素密度，会出现下面的情况：一组线框风格的图标，在逻辑像素密度为2的设计稿上，描边宽度为2，在逻辑像素密度为3的设计稿上，描边宽度也为2，这就导致冲突——同一组图标，不同的图标描边宽度不同（视觉重量不同）。很可能在你切一组图标到一半的时候，发现宽度不对，之前切的图全都要重新来过，甚至重新放到项目里。

给设计师的建议：

  1. 使用逻辑分辨率作为设计稿画布尺寸。比如375×667，这是iPhone 6的逻辑分辨率。

  2. 规范图标尺寸，可以参考一些UI模板，比如Sketch内置的Material Design模板，其中对于图标会有Symbol的处理。不仅切图方便，设计时也可以方便使用外边框进行对齐，进行规范布局。

    material_design_icon

  3. 尽量不在布局中使用px单位，针对特殊布局元素，需要使用1px或者2px的地方，比如极细的分割线，要进行标注。

给开发者的建议：

  1. 使用dp作为单位。
  2. 规范切图，对可避免的半像素要及时反馈给设计师重绘或者微调后切图。
  3. 如果Android开发者拿到的是iOS的设计稿（我知道这个情况实在太普遍了），要知道你要针对的屏幕和设计稿并不相同。举个例子，你拿到了iPhone6的时间稿，其中的内容区域距离边框12dp，如果在Android上也是照搬尺寸，距边框16dp，那么最终的还原质量是不会太好的，假设16dp在iPhone6上的物理尺寸是x inch。拿Nexus5举例，物理尺寸是(375 / 360) / (4.7 / 5.0) x ≈ 1.1x，也就是增大了10%。简单说就是近似物理尺寸的Android设备屏幕普遍会“放大”iPhone设计稿的尺寸，所以对于“边距/间隔”可以适当缩小，比如：12dp可以使用10dp/8dp替代，以便保证更大的内容显示区域。

响应可变屏幕

“响应可变屏幕”是我想到的一个概念，是说不管是设计还是编码阶段，要有一个意识，屏幕的尺寸是会变的：可能等比例变大变小，也可能高度或宽度单独变化。这其实是有意识针对多分辨率屏幕进行布局的形象说法。

屏幕分辨率变化就会导致界面布局变化。要应对这种变化，就要让界面上的元素根据屏幕变化多少进行特定的响应。有点类似Web开发中的响应式设计。

举个例子，如下图： layout

当屏幕从iPhone6变成iPhone6plus的尺寸，第一种响应方式就是不合理的，第二种方式就是合理的。各自的逻辑大家可以猜一下。

就像文章开头的例子一样，开发者对设计师意图的正确理解是好的屏幕适配的重要原因。对此，我的建议是这样的：

  1. 设计师和开发者都要有响应可变屏幕的意识，开发者要站在设计师的立场去思考对方是怎么考虑屏幕变化时的响应的；设计师在解释设计稿时，也可以有意识的针对不容易想到的地方多做说明。
  2. 尽量少的使用不能拉伸和扩展的界面，有意识的放置可变尺寸元素。可以观察下iOS和Android的内置应用，几乎所有App的所有界面上，都有可变尺寸元素的存在，比如一个可以滑动的列表或者可以伸缩的内容，甚至整个页面支持滚动。在考虑屏幕适配时，加入可变尺寸元素是性价比最高的布局方法。
  3. 平时多观察其他App的处理方式。目前市场上成熟的App非常多，使用其他App时也可以思考下他们的界面是怎么做适配的，可以使用开发机或者模拟器在不同屏幕上检验自己的想法。

使用Sketch

Sketch非常适合移动UI的设计工作，不管是设计师和开发者，掌握Sketch的使用都是一个加分项。PS的领域是图像处理，是duang~duang~duang~加特效，甚至是艺术创作；相比而言，Sketch在最初就是为了UI设计服务的（确切的说是为屏幕显示内容的设计服务的）。

  • 更轻量、更快。矢量支持、像素预览。样式支持。新版还原生支持了类似Autolayout的布局。导出功能、实时预览功能……
  • 丰富的插件。推荐个：CraftManager，帮你填充占位内容的工具。
  • ……

简单的描述Sketch的使用体验，不仅仅是所见即所得，更像是直接在手机或者浏览器中设计。仅作为一个开发者，我就不多说了，大家感兴趣就去体验下吧。