手机页面切图实战

曾几何时，大家习惯性的称呼页面制作为“切页面”，也为前端这个职业烙下了一个时代的印记。

我全职从事前端职业6年有余，现实中依然有人还在使用“切页面”这个词语，如果是非前端这么说也就一笑而过，对外只是一个称呼而已，就像HTML5被大家简称为 H5 一样，确实在多数时候，HTML5读起来非常拗口，不利于记忆，H5 简化了大家对HTML5的接受过程。

但如果“切页面”从同行的嘴里说出来，我则十分气愤，在当下我会认为他（她）不是一个专业的前端工程师。

为何叫“切页面”

最早可追溯的说法应该从 Firework 开始，早年（2005年以前）的Web开发远没有现在这么复杂，切页面更多意味着就是切图，在当时 Firework 则是一个非常好的页面制作工具，Firework 和 Dreamweaver 同属Macromedia家族成员（后来Macromedia公司被Adobe收购）。

HTML页面的基本生产过程，PhotoShop 产出的 PSD 可以由 Firework 处理成按区块分割的HTML页面，然后再经过 Dreamweaver 的加工，加上一些SEO优化和简单的JavaScript代码，一个页面就基本完成。这样的页面生产过程则被称之为“切页面”。

“切页面”过时了吗？

是的，我可以很肯定的告诉你，切页面已经完全不符合当下Web技术发展的趋势。

现代Web页面制作是一种以语义化为主导的页面生产过程，对与这个问题我在segmentfault上看到了一个比我回答得更好的答案，下面这段话摘自前端工程师每天只做切图与实现页面的工作吗?

请允许我说一句极端的话：以切图为导向的前端已经过时了。

以前做网站，我们多半的想法是把图做的很鲜艳、很有光泽、很精细，甚至“像素级”的去追究。图做好了，把图片本身当做按钮、元素、背景，往网页里一堆拉倒。这是一种发源于平面设计，以外观为主导的设计路线。

但现在做前端的趋势就是返璞归真，真的用浏览器的原生功能来实现外观。这是一种以语义为主导，追究代码表达明确目的，就算没有图片也能保证网站内容完整的新方法。好处：

节省带宽和流量

• 明确语义

• 全平台兼容（牺牲各平台“强求”一致的幻想）

• 全设备兼容（无需单独的“移动版”）

• 符合标准（这一点也等同于残障人6士友好）

• 视网膜屏幕的清晰

再加上响应式等新技术的应用，让做图+切图这项技术本身就已经行不通（或代价巨大）了。所以我认为以PSD为主导，以切图为手段的前端工程，虽然成熟，但已经落后了Web的新时代。

前端在设计风格上，最近几年提倡“扁平化”。当初（包括我自己）很多人只觉得难看，而不理解这样设计背后的理由。其实“扁平化”虽然是一种外观上的思想，但外观扁平简单了，在代码上就容易归于语义主导，从而更快的步入现代Web设计的节奏。所以“扁平化”其实在Web设计进化中，有着超越视觉感觉本身的哲学意味。

如何制作一个语义化的页面？

以我最近的一个移动Web项目为例（顺带做个软广，花椒直播程序员看妹子的天堂）。

对于上面这张设计稿，我会做下面几件事：

• 页面主要区块划分

• 定义主要区块absolute|fixed和层级

• 识别CSS3绘制与图片

• 定义细节的布局方式

这样就可以先写出大致的页面结构，以下是伪代码：

对于页面中的图片，识别出那些才是需要使用“真正”的图片，比如右侧的这几个分享按钮，背景和圆角使用CSS3绘制，只有中间的icon才可能需要使用图片。对于细节部分也是可以先定结构，再写CSS样式。

如果页面中使用了 Font Icon (Font Awesome) 或 SVG，那么完全不需要图片，用代码表示如下：

结合CSS3的特性（背景透明、阴影、渐变、圆角等）绘制图片还原设计稿，页面上真正需要使用到图片的地方不会很多。

PS：花椒线上运行的这个页面不是我开发的，我只是使用这个设计稿当做一个例子。

语义化页面生产

按照上面例子这样的过程制作的页面是语义化的、可读的，并能更好的适应移动Web（高级浏览器）特性，使得页面制作变得更加有趣。

语义化页面生产的要点：

• 严格遵守先结构后样式

• 声明语义化的页面结构

• 合理的使用CSS3与图片

结束语

任何一个成熟的技术总是会随着技术的更新而消逝，无论是切页面还是语义化页面，作为一个开发者，如果不努力适应新技术，那么就会和旧技术一起被时代抛弃。

原文链接：http://www.maxzhang.com/2015/08/那些年我们一起切过的页面/