Web Design For Developers 翻译 第一章

自从回来之后就没有认真更新过这里了,学校的事情和GRE十分之闹心,我都差点忘记自己还有个博客了。上周跟图灵的编辑沟通了一下,又拿到了一本书的翻译活。跟上次比,这次是一整本书,内容自己也更熟悉一些,希望能在三个月时间里弄出来一本高质量的书稿吧。书的名字是Web Design For Developers,讲了一些很实用的网页设计技巧和技术,适合所有阶段的人阅读。这里先放出第一章的试译,权当预告和广告。同时代表着本博的每周一更新的正式恢复。

第一章  简介

如果你曾经写过Web应用程序并想让它变得更漂亮,如果你想知道你钟意的网页是如何用CSS拼凑起来的,那么这本书就是为你准备的。但是如果你想问的是要舔多少下才能把巧克力夹心糖的糖心舔出来,本书就无能为力了,Wikipedia才是你应该去的地方。

这本书是为没有设计背景的程序员们准备的,它涵盖了网页设计的主要过程。在那些光鲜亮丽错综复杂的网页背后,是网页设计师们辛勤的汗水。设计网页就像用Java、Ruby或者C#写程序一样,只有遵守一定的规则和良好的习惯,你才能实现自己的设想。

1.1说在前面的话…

好的网页设计不仅仅指漂亮的页面,像色彩、字体、板式和可用性等等一些概念也是设计的一部分。只有当这些元素都被考虑到的时候,设计出来的页面才会让用户眼前一亮。也许你挑对了颜色和渐变的搭配,却没有顾及到字体的可读性,设计出来的仍然是一个糟糕的页面;也许你能在Photoshop或者GIMP1中做出一个好看的图像,但是对HTML和CSS的陌生,让你无法在浏览器中实现你的设计。如果你的标记语言结构混乱,JavaScript就会漏洞百出;如果你不对页面做优化,搜索引擎可能就会忽视它;如果你完全没有考虑可访问性和可用性,用户们甚至会厌恶你的页面。

另外,创意同样是成功的网页设计中不可或缺的一环。因此我希望在做本书中的练习的时候,你能尽量发挥创意。在书中,我会展示完整的网页设计流程,希望你不会被我所说的东西所限制,能在本书的指导下形成自己的风格,比如选择自己的字体和颜色。这样,你才能从理论中学到自己的东西。我希望你设计出来的网页可以跟我举的例子完全不同。

编程经验有助于你设计出一个吸引眼球的页面。书的前半部份是一个设计的世界,你会学到颜色、字体等方面的知识,这些概念是网页设计的基础;另外,这部分还会介绍设计师们常用的工具和技术。在有了足够的理论储备之后,如何写代码将成为本书的主要内容。毕竟,这是一本给程序员看的设计书,对吧?

1.2网页设计实战

让我们来跟着网页设计师Ron来学习网页设计的主要流程吧。Ron是一个很忙的网页设计师,他刚刚从一个客户那里接了一个设计小网页的活。

明确要求

Ron的新客户是一个房产中介,她要做一个小型的内容管理系统来组织房产信息。跟这个叫Kim的中介碰过一次头之后,Ron就开始在纸上画首页的草图。根据客户的需求,Ron做了好几个设计,并从中选出了3个他认为最能满足Kim要求的方案。

然后Ron跟Kim又碰了一次头,Kim从三个方案中选了一个,并提出了一些修改建议。讨论到配色的问题时,Kim要求主题色调必须是蓝、灰和白,这样就能跟她名片的样式协调。

Photoshop时间

第二次会面之后的下午,Ron就开始在电脑前摆弄Photoshop了。他很快就按照Kim要求的方案和色彩做出了一个页面样式:从素材库里挑出了几张图片——全是免版税的图;然后尝试了几种不同的灰和蓝的组合,直到满意为止;最后从Photoshop里把图片导出,发给了Kim。

一个星期之后,Ron联系了Kim,问她对目前为止的工作有何建议。Kim说等她度完了假就会给他答复,让Kim再等一周左右。

代码时间

一周后,Ron接到了Kim的电话,她对现在的样式很满意,并说可以进行下一步工作了。Ron松了一口气,然后开始在自己喜欢的文本编辑器中写代码,把样式图变成网页。

Ron从简单的HTML开始,确定页面的框架和内容,然后在Photoshop中把Banner2和其他一些图像切出来放到HTML文件中。

做完这些之后,Ron写了一些CSS代码;CSS代码可以将页面的整个内容组织起来。最终,他把一个竖版的页面框架变成了色彩明亮的双栏布局。

在Firefox浏览器中,他做的网页就跟样式图里的一模一样,很漂亮。但是同样的网页在IE6中就面目全非了。

好在Ron曾经遇到过同样的情况,他娴熟地在专门针对IE的样式表中插入几行代码。终于,所有的事情都搞定了,Ron把网页发给了Kim。

一切就绪

Kim很喜欢那个首页,于是Ron开始做其他的页面。因为已经确定了颜色搭配、图像和样式风格,剩下的工作就很简单了。Ron自己也很开心,因为他的客户对他的工作很满意。

现实不一定总是如此美好

这一次Ron很走运,遇到了一个容易相处的客户,然而并不是所有的客户都这样。这本书将以YourFoodBox.com为例进行讲解,它的老板们就很难缠,你马上就能见识到了。

YourFoodbox.com

有一个资金非常充足的公司要做一个大全式的菜谱分享网站,用户可以在网站上查找数以千记的各式菜谱,并创建自己的菜谱。你刚刚做好网页设计,在一周之内网站就要上线了,于是你将做好的东西给网站的老板们看。结果他们虽然对功能部分没有意见,却不能忍受网站的外观。他们可能会说“感觉差点什么”,“不能吸引眼球”之类的话。而且,他们一定不会提出具体的修改意见。你必须运用自己收集客户要求的经验,来尽量满足他们的需求。

本书里有几章会告诉你如何面对这种很常见的情况。你还会学到包括配色、字体、按钮设计、图像优化和网格模板设计等在内的一系列页面设计知识。你不但会了解如何让Web表单看起来更美观,还会接触到种类繁多的窍门,这些窍门能让你的页面做到完美地跨浏览器、跨平台。在完成页面搭建之后,搜索引擎优化和页面容内优化的技巧则能帮助你的页面在搜索结果里名列前茅,并且运行起来更顺畅。

同时,你还会了解网站可访问性的重要性,你需要让尽可能多的用户能更方便地使用你的网页,要照顾到生理有缺陷的人群的使用。这一点在商业上很重要,同时从我的个人角度来讲,我也很在意可访问性,因为我,我父亲和我女儿都是先天性白内障患者。当然,本书后半部分才会深入涉及可访问性的问题,但是在那之前的某些例子中,我可能会提到与可访问性及可用性相关的一些概念。

准备好了吗?

虽然摆在我们面前的是很长一条路,但是我们目标明确。那么,就让我们从现有YourFoodBox.com页面的缺陷开始,看看我们的客户都有什么修改要求吧。