提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
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
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册