页面检查项Checklist

Checklist

制作前

在拿到设计稿准备制作前,先检查好以下是否资料齐全:

(1)用于分享到社交圈的缩略图、文案标题、文案正文。

这里的缩略图建议使用250×250,分享方法请见这篇文章:《移动端页面分享拉取缩略图和文本》

(2)若有按钮,请确认是否有按钮的各种状态。

这里的状态包括normal,hover,disable,甚至更多状态active,focus,link。

(3)是否有适应矮屏的不同要求。

以iphone4和iphone5s为例,屏幕尺寸是320×480和320×568,当屏幕是矮屏的时候得先确定好元素位置是否能有位置显示。

(4)确认好链接色,包括hover(active)状态时候的颜色。

制作中

(1)考虑是否可复用公用组件。

例如下面,公用的触屏活动空间头部和尾部。

(2)切图时宽高要设为偶数。

设计稿一般是retina版本设计的,那么切出来的图都是@2x的2倍图,需要使用工具来直接生成1倍图用在非retina的机器上,就需要考虑到偶数宽高的问题。若@2x的图是奇数宽高,那么就会造成生成雪碧图之后定位错误的问题。

(3)导出切图的时候要注意选择图片格式,尽量使用png8。

移动端页面需要考虑所有资源的体积问题,而图片一般是页面的最大资源。在导出图片之前,先看看图片是否色彩丰富的图片,分两种情况:

<1>若色彩并不丰富,则可以直接考虑导出成png8格式,在选项里可以选择“图案”或者“杂色”(如下图),具体选哪种需要两种情况都导出试试,一般能确保画质,命名直接原名即可,例如logo@2x.png和logo.png,拖CssGaga的时候会自动压缩;

<2>若色彩很丰富,png8会有失真,则需要考虑导出成png24的图片,并在图片的末尾处加上.32的标记(CssGaga会对没有.32的标记图片自动压缩并转png8),例如logo.32@2x.png和logo.32.png。并且需要把切好的图用智图来手动压缩,已确保体积不会太大。

(4)若页面元素太多,不宜全部合成同一张雪碧图,应该分拆雪碧图。

这张页面,因为太多动画层的缘故,图片太多,不宜合成同一张雪碧图。若使用其他制作雪碧图工具,需要考虑把雪碧图拆分成几张。若使用CssGaga的自动化雪碧图,需要这样处理分拆雪碧图:

<1>将需要拆分出来的页面变成import进来的css文件;

<2>在每个拆分的css文件头部加上#CssGaga{background-image:none},以表明该css不合并到主雪碧图中。

还是例子的页面,是这样处理的:

然后每个import的css头部加上#CssGaga{background-image:none}

最后会生成以下几张雪碧图:m-animate-1-imp.32.png,m-animate-2-imp.32.png,m-animate-3-imp.32.png,m-animate-4-imp.32.png,m-style.32.png。

可见,前四张就是分拆的雪碧图,最后一张是主界面主雪碧图。

(5)制作多屏滚动页面的时候需要在下方加上翻页的箭头,并在箭头处加上点击下翻页面,并令其热区尽量大。

(6)确保在页面加上社交分享的处理。

有了缩略图,标题,文案,需要把以上材料写进meta标签(兼容Q空间、手Q)和配置微信的js(兼容微信),具体查看这篇文章

(7)若图片资源过大,需要加上loading确保资源加载的时候用户能得到更好的反馈。

还是例子页面

(8)加入点击流分析。

考虑到有时候页面制作没有前台参与,我们也需要写上报数据的接口。目前前台还是使用tcss的上报,因此我们只需要沿用他们的上报可以了。

有2种办法:

<1>使用前台的框架loader.js,这个框架会自动引入sea.js和对应lib,上报只需要写:

<2>使用tcisd.js,然后确定好上报的域名,然后写:

(9)IOS设备会把数字变成电话链接。
加上meta标签解决:

制作后

(1)测试多手机的表现兼容。

需要测试图片的表现(是否拉取正确的图片),点击的跳转,动画的流畅度。

注意不同分辨率,不同尺寸,不同系统,不同浏览器。

PS:我的机型测试顺序:iphone5s>iphone4>三星>小米>oppo;浏览器测试顺序:微信内置>QQ浏览器>Chrome>自带>UC。

(2)测试分享功能,是否正确拉取文本、缩略图、跳转链接。

需要对微信、手Q、空间进行测试。



4 thoughts on “页面检查项Checklist”

发表评论

电子邮件地址不会被公开。 必填项已用*标注