图层的规划

上一节,我们说到可以将页面内的元素分为:

  • 背景
  • 动态内容
  • 静态内容
  • 交互区域

在设计合并图层时,也可以按照这个规则来合并,我们以最新一期的Chanel No 10距离:

这个合并图层,其实已经很好了,那么是否可以更优化呢?
答案是肯定的,我们以卡片页为例

这个页面中:

背景


他是由纯色及顶部的

组合而成,在输出文件时,可以将两者合并;

静态元素


目前是卡面合并为了一个元素,而其中包含了静态、动态、交互按钮。我们可以做如下处理:

这一部分作为静态元素

动态元素


这一块,是在播放时才显示,如果没有播放时,他是空白的,看着比较奇怪。
如果做以下动态效果,可能体验会好一些

未播放时,呈现上图效果,点击播放,卡片边长,文案显示。

所以,文案部分,即为动态元素,他改变了页面的布局。
这一元素可以单独做一个图层。

交互按钮

底部的播放按钮及音浪,也应独立为两个元素。

切图

(班门弄斧了,设计小哥哥/姐姐,随便看看就好)
切图,如果源文件时 XD、 PS、Sketch,可以使用蓝湖快速切图、标注
sos.lanhuapp.com
其他文件,如AI、CDR,无这类自动化应用。
根据上一步做好的图层,仅需将指定图层收集到资源导出。

即可快速导出静态、动态、交互。
而将所有静态、动态、交互图层关掉,直接快速导出,即可完成背景层的导出。

这里应注意的是,PNG要比JPG大很多,为了优化用户体验,我们建议背景使用JPG,而其他元素使用png。
同时,文字作为文字时,体积极小,而作为图片,则变大很多。
但是纯文字,无法很好的使用指定字体且无法很好的控制换行,所以,如果对排版有要求,则不能使用文字,只能使用图片。
一个替代的解决办法就是,将文字与其他图层直接合并,比如、背景。

命名规范

这里先不用管了

文档更新时间: 2019-01-10 16:01   作者:admin