UI设计不仅仅要完成界面的设计，还要对界面的最终UI效果负责。在标准化的工作流程中，我们往往需要在产品测试阶段完成视觉验收。在我以往的工作中，这一阶段常会出现各种页面还原度的问题，每次看到测试版页面都心凉一截，然后开始各种截图再标注，一个大的功能页面集最后可能会整理出不下100条视觉验收问题...然后很可能就是下面的情况：

       开发强哥：我X，这么多问题！你先等等吧，我还要改bug，先保证功能，你这些最后再改

       UI设计师：还不是你没按我的设计稿做，那好吧，上线前要改完

       ...

      UI设计师：强哥，改完没？

      开发强哥：改了一部分，时间来不及了，剩下的下次优化

      UI设计师：......

这时候我们就要溯源问题，为什么开发的页面与设计稿会差距这么大？到底是哪里出了问题呢，是开发不认真？能力不足？后来在浏览相关文章时，我突然找到了答案：啊！原来是标注出了问题。有时我们甚至不标注，直接把源文件甩给开发小哥哥，这几乎是部门内约定俗成的工作方式了，好像只要有了一张设计稿就万事大吉了。

如何标注？

前面已经说到我们没有页面标注，所以开发还原出现了很多问题，那么现在我们来加上标注，这时我们就需要注意不同屏幕适配的问题，若不考虑适配那么各个屏幕上显示的效果就会不如人意，页面还原依然会存在n多问题。

虽然我们通常理解适配是开发需要解决的问题，和UI设计师没有关系。但实际上需要我们去明确适配的方式，才能指导开发按我们预想的效果去实现页面。

不同情况的适配方式及如何在标注中说明适配方式

这里我们关于适配不做多余的解释，仅说明做为UI设计师我们需要知道的部分。

（什么物理像素、渲染像素、逻辑像素，pt、px...我们统统不管，哈哈哈～）

通常我们都会使用ios 750*1334的尺寸做为设计稿的尺寸，关于适配我们需要考虑的问题只有一个，即在其他屏幕尺寸下页面元素如何排布、显示怎样的效果。了解适配方式可有效帮我们解决这个问题：

（为了方便理解，我们仅变化屏幕宽度看不同方式的适配效果   ps:无论屏幕尺寸是多少，当换算到同一倍率下，本质都是屏幕宽高的不同，除一些需整屏显示的页面有高度要求，一般我们只考虑宽度就可以了）

文字流

屏幕越小一行能显示的文字越少，相同区域能显示的内容也越少；相对的，屏幕越大一行能显示的文字越多，相同区域能显示的内容也越多。

---标注：基础信息（字色、字号、是否加粗） + 适配方式（显示行数、截断方式）

例如：1）#333333   28px  加粗 最多显示三行 截断处显示...

           2）#666666   26px 不限行数

弹性控件

1. 仅元素间距变化，其他数值不变

---标注：变化的值不标注，仅标注不变的值。例如：

说明：

1）对于文字长度固定且判断大小屏幕都都完美显示的可不标适配方式
2）元素某区域内水平或垂直居中可不标间距
3）正方形可只标一个尺寸

2. 间距不变，不同屏幕宽度上显示内容多少不同。如左右滑动模块，tab导航等

---标注：间距、元素尺寸全部标注出来

3、不同屏幕宽度一行内显示的元素个数不同。如下图屏幕每增加或减少一个元素的宽度，一行内也相应增加或减少一个元素，需注意元素的排列方式，下图平均分布则要定义元素的最小间距。需要具体情况具体分析。

---标注：元素尺寸、间距、其他特殊说明。例如

等比缩放

元素无论在哪个屏幕下，间距和元素的宽高比不变，常用在图片的适配。当然并不是所有图片都需要等比缩放。

---标注：间距、元素宽高比。例如：

好了，不同屏幕的适配方式和标注方法我们就说完了。

总结

只要我们认真标注，明确了适配的方式，相信我们的设计稿一定能完美落地的～

最后，目前其实更多的是使用一些第三方插件或蓝湖、墨刀等一键生成标注，极大的提高了工作效率。但别忘了同时提供开发小哥哥一份适配说明哦～

Powered by Froala Editor