Chapter1创建好看的网页

—— 布局与设计

小试牛刀 下面是 Red Latern 站点的页面，浏览一遍这张截图，然后用你的专业知识评价它。比如哪些是你喜欢的，哪些是不喜欢的。你是否看到了什么问题？

小试牛刀Logo 很酷，但似乎和布局没有联系

有大量空间浪费在页面顶部，可能要继续往下才能看到菜单和内容

这张图一点也不吸引人，灰色的寺庙和灰色的山，虽然很带“禅”意，但并不能准确表达“这个公司是年轻、活跃、激动人心的 Web 设计先驱者“

只有一栏？就这么多内容？喂，略显平淡了吧，对于一个 Web 设计公司来说！

这可是首页，不应该有些攫取潜在用户的元素？例如新计划和特色项目。

对比不鲜明，比如菜单按钮和背景图片，再比如主要的文字和灰的底色

从哪里开始？

那个 ... 该怎么开始呢 ...oh 我知道了！无论如何，先用 HTML 先写出结构，再是 ... 嗯对，用 CSS 美化，啊哈，搞定！

在你看来他是怎样的一个 Web 设计师？

从哪里开始？ 开什么玩笑！我怎么会知道从哪里开始？我有一大堆事要做，所以你得告诉我从哪里入手！

如果你问自己“从哪里开始？”、“怎样达到那样的效果”这类问题而不是马上打开一个 HTML 编辑器。 这可是个好现象！

答案：你需要基于工作流的

“ 设计过程”

画出你的蓝图

当你决定建造你家的时候你会怎么规划？

HOME

厨房 客厅 卧室

床 衣柜

画出你的蓝图Red Latern 的信息结构（ Information Architecture ）这样一棵“倒

过来的树”，Products 是 Home 的分支

或者倒立过来看，这个结构就真的很像“树”了 :D

Print Books 是 Products 的分支 Art 和 Craft又是 Pr

int Books 的分支

把你的结构分散，并根据层次结构放到这个“树”里

小试牛刀 根据 Jane 的这张便签我们来看看还有哪些内容是需要加到网站上的

来自： Jane主题：站点目录

我们需要一个分区来放 Red Latern 的新元素和更新信息。

毫无疑问我们还需要一个分区来展示我们将要开展的工作有多棒！

当然还需要一个提供联系方式的页面，没有联系方式哪来的客户？

最好能有一部分是关于公司的，就比如“我们致力于……”

最关键的是我们要确信看的人知道我们是搞 Web 设计的！

没有傻问题

Q ：信息结构图一定要像树形吗？A ：没有必要。但是最常见的 Web 设计结构就是树形。事实上只要结构清晰合理即可

Q ：我们提供设计的客户们总是很清楚网站需要哪些部分？A ：是……又不完全是。人们很清楚自己要什么但是很难表达得专业，所以需要你去理解和组织。

Q ：能不能省略规划信息结构这一步？A ：不可以。当你的站点变得复杂时，有一个信息结构图显得极为重要。

Q ：信息结构是不是很像 sitemap ？或者就是？A ：信息结构图传达的是逻辑结构而 sitemap展现的是超链接之间的关系，不过必要时可以拿信息结构来作为sitemap 的参考。

小试牛刀 好吧，我们所需要的导航

部分就是一些指向信息结构图里的按钮对不对？嗯，可以开始干活了

为 Red Latern 设计一个导航栏并画出草图，然后想想那种风格的导航栏适合 Red Latern 。

亲身体验把你的设计放到实际情况中进行比较……

菜单式

标签式

垂直菜单

来点不一样的设计：http://www.mezzoblue.com/zengarden/alldesigns/

鼠标经过按钮时会有变化，且比较美观

标签式可以节约大量的空间

这样的菜单可以让你很快回到上一个页面， 所以能吸引你在 Amazon逛很久 :-)

小试牛刀

那么就按这个来！信息结构，导航栏的草图……看起来真像是教科书上的内容！我没看到实质性的东西！

画出整个页面布局的草图！

小试牛刀和旧的 Red Latern太类似 ...

分两栏的设计，把 Red Latern的作品缩略图放在右边

纯文本替换了标签式菜单，分栏的内容也左右互换了

三栏的设计，并把 Logo右置

和 #4 类似，把垂直导航栏放到左边

亲身体验

一些设计资源：应酷传播 http://www.ingcoo.com/站酷 http://www.zcool.com.cn/素材中国 http://www.sccnn.com/禅意花园 http://www.csszengarden.com/

界面出色的网站：http://studio7designs.com/http://newicemedia.com/ http://www.desyn.in/http://www.42angels.com/http://www.risermedia.com/http://capitalcamp.org/

两个轻博客的登陆页：http://zhan.renren.com/loginhttp://qing.weibo.com/login.html

小试牛刀

你现在知道了 Jane 需要一个什么布局，抓紧时间让你的布局展现出来！拿起彩笔和纸吧，也许带横格的纸会很有帮助！

小试牛刀把 Logo放在主内容的“下层”，并遮住一些

城市景观的示意图，我们最后会放一张实景图在这里

顶部的空间留给导航栏图片下方可是显眼的位置，可以用来展示最重要的内容

暂时不需要标题和文字，我们用色块和线条来代替

周围这些红色可以迅速提升页面的个性

把公司能提供的各种套餐和资费放在这里，让客户知道公司能做什么

把设计变成产品！

Coding Time ！

先用简单代码搭建一个产品“原型”是十分有益的！纸上的设计再好看，你得考虑是否能很好的用代码构建并展示在浏览器里。

同时，你的客户 Jane 看到“原型”也会对你的工作比较放心

到 Head First寻找“原型”http://www.headfirstlabs.com/books/hfwd/ch01

激动人心的时刻：测试阶段！在浏览器里查看你的网站，一旦测试通过，就马上通知 Jane这样她可以很快给出一些建议和反馈。

激动人心的时刻：测试阶段！

调整：让页面变得“可扫读”

√ 清楚的头部信息

√ 图片缩小后展示

√ 使用 粗体 和 斜体 来强调一些词和词组

√ 为适当的内容制作列表菜单

小结： Web 设计是关于交互和用户体验的艺术！

旧的页面显得单调且缺少交互

新的设计把用户放在了设计的”中心“来重点考虑，这为 Red Latern 吸引了大量的客户！