页面切图（Web Publishing）

页面切图、设计和开发有什么区别？

设计决定页面长什么样，页面切图把这个样子转换成浏览器能读懂的代码，开发则负责做出像预约 · 支付这样需要保存和处理数据的功能。小型网站里，一个人往往会同时负责好几个环节。

页面切图主要用到三种语言。HTML 负责标题 · 文字 · 照片等内容的骨架，CSS 负责颜色 · 大小 · 布局等外观，JavaScript 负责展开菜单 · 切换照片这类动态效果。

页面切图对您很重要，因为顾客真正看到的不是设计稿，而是切图完成后的页面。同样的设计稿，切图做得细致，网站在手机上就会更易读、更快。

如果是没有预约 · 支付功能的介绍型网站，只靠设计和页面切图就能完成。反过来，如果要加入预约 · 支付，就要多一道把开发好的功能接到切图页面上的工序，周期也会变长。

怎么判断页面切图做得好不好？

页面切图的质量，与其看外观是否和设计稿一致，不如看它在各种屏幕和情况下会不会错乱。即使页面看起来一样，代码写法不同，搜索曝光和加载速度也会不同。

这些标准肉眼不容易直接看出来，您很难自己检查，但只要问服务商“按什么标准检查过”就足够了。也可以把网址输入 Google 免费提供的 PageSpeed Insights，一起看看速度检测结果。

网页无障碍并不只是为有障碍的顾客准备的。文字和背景颜色对比足够、按钮名称清楚的页面，对在阳光下看手机的顾客、把字体调大使用的老年顾客也同样友好。

• 标题 · 小标题是否使用了真正的标题标签，让搜索引擎和读屏软件能读懂页面结构
• 在手机 · 平板 · 电脑任何宽度下，文字和照片都不会重叠
• 照片是否经过压缩，在网速慢的情况下也能很快打开
• 按钮是否大到能用手指轻松点按
• 在手机设置里调大字体后，内容是否不会被截断

图片说明文字（alt）该怎么写？

图片说明文字（alt）是一句简短的话，用来向看不到图片的人传达图片内容。图片打不开时，或顾客用读屏软件“听”网站时，读出来的就是这句话。

写成“照片”“图片1”这样，等于什么信息都没传达。如果是咖啡店的菜单照片，就要具体写出照片里看到的东西，比如“一块草莓奶油蛋糕和一杯美式咖啡”。

Google 也在图片搜索指南中把 alt 说明为传达图片信息最重要的属性。不过，硬塞一串关键词反而不好，请用自然的句子描述照片。像装饰花纹这类没有实际意义的图片，说明留空才是对的。

切图完成的页面怎么检查？

页面切图的结果只在一台设备上看，很容易漏掉问题。按下面的顺序检查，10~15分钟就能发现大部分问题。

发现问题时，请连同截图一起告诉服务商是在哪台设备、哪个页面上出现的。切图问题常常只在特定机型或特定屏幕宽度下出现，有设备名称就能修得快得多。

检查时，把设计稿放在旁边对照会更方便。不过屏幕宽度不同造成的细微差异是正常的，请重点看有没有信息缺失或顺序颠倒的地方。

1. 01用您自己的手机和家人 · 员工的其他机型手机打开同一个页面。
2. 02把手机横过来，看看布局会不会乱。
3. 03在手机设置里调大字号后，再打开看看。
4. 04在电脑上慢慢缩小浏览器窗口，看看各个区块是怎么往下排列的。
5. 05关掉 Wi-Fi，用流量打开，看看照片会不会加载得太慢。
6. 06把所有菜单 · 按钮 · 电话号码链接都点一遍。

页面切图阶段常见的问题有哪些？

最常见的问题是：设计稿里的简短临时文字换成实际的长文字后，内容溢出了区块。比如美发店的项目名称很长，或者工坊的课程介绍很长，在手机上会多次换行，导致布局晃动。

价格表、时间表这类格子多的表格，在手机上很容易向侧面溢出而被截断。这类内容可能需要换一种排版，比如在手机上改成卡片形式展示。

像工坊商品详情这类照片多的页面，如果采用“快滚动到时才加载照片”的方式（懒加载），首屏会更快。不妨问问服务商，照片多的页面是怎么保证速度的。

• 直接上传体积很大的原图，导致首屏打开很慢
• 手机上弹窗遮住整个屏幕，很难找到关闭按钮
• 字体文件太大，文字很晚才显示出来
• 只在电脑上显示的信息，在手机上被漏掉了

关于页面切图，该问网站制作公司哪些问题？

页面切图不需要您单独挑选，但问问他们的标准，就能知道服务商承诺的是什么样的质量。

上线后，如果手机系统或浏览器更新了，偶尔页面显示会发生变化。顺便确认一下这种情况是否包含在维护管理里帮您修复。

也要问问手机页面是在同一个网站里用响应式网页来适配，还是另外单独做一套手机专用页面。如果是单独做的，以后修改内容时可能两边都要改。

• 在哪些设备和浏览器上做检查
• 是否压缩照片体积并检测速度
• 是否加入图片说明文字（alt） · 标题结构等搜索 · 无障碍的基础设置
• 以后修改价格 · 营业时间等文字时，由谁、怎么改