提醒:本文发表于 2015-08-06 23:29:43,文中所描述的信息可能已发生改变,请仅作参考使用。

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

我全职从事前端职业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项目为例(顺带做个软广,花椒直播程序员看妹子的天堂)。

花椒设计稿1

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

  • 页面主要区块划分
  • 定义主要区块absolute|fixed和层级
  • 识别CSS3绘制与图片
  • 定义细节的布局方式

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!-- 播放器和聊天 -->
<section class="palyer-box">
<div class="player-info"></div>
<div class="player-ct">
<video poster="..."></video>
</div>
<div class="chat-ct">
<ul class="chat-message-list"></ul>
<div class="chat-message-send"></div>
</div>
</section>

<!-- 作品列表 -->
<section class="list-of-works">
<h3 class="video-head"></h3>
<ul class="videos">
<li class="video-item"></li>
<li class="video-item"></li>
<li class="video-item"></li>
</ul>
</section>

<!-- 下载条,fixed定位 -->
<div class="download-toolbar"></div>

对于细节部分也是可以先定结构,再写CSS样式。

对于页面中的图片,识别出那些才是需要使用“真正”的图片,比如右侧的这几个分享按钮,背景和圆角使用CSS3绘制,只有中间的icon才可能需要使用图片。

花椒设计稿2

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

1
2
3
<a class="share-icon share-weixin">
<i class="fa fa-weixin fa-2"></i>
</a>
1
2
3
4
5
6
7
8
9
10
.share-icon {
display: inline-block;
width: 46px;
height: 46px;
border-radius: 23px 23px;
background-color: #6bd201;
}

.share-icon>a {
color: #fff;
}

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

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

语义化页面生产

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

语义化页面生产的要点:

  • 严格遵守先结构后样式
  • 声明语义化的页面结构
  • 合理的使用CSS3与图片

结束语

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

--EOF-- 最后更新时间:2015-08-07 13:53:18

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