web 开发：网页设计步骤及工具推荐

末蓝、 2022-05-14 21:14 157阅读 0赞

**自娱自乐版：**

**1.原型设计**

通过和搭档的交流，在脑海中，你便可以知道你需要做什么，你们的需求大概是什么，需要几个页面。这时，你便可以找张纸，找支笔开始框架、轮廓、布局的勾勒。这对自娱自乐是非常有效的，因为你的原型设计不需要经过众多人的评审，不需要提供给客户，不需要具体的表现出每一个链接的跳转，每一个按钮的结果。这一切只需在你原型的空白处加以简单的注释。

到这里，貌似原型已经设计完毕。 No，接下来的一步非常重要。自娱自乐的时候，约束、文档会比较欠缺，这可能会导致你所表达的想法并非和我理解的一致。这时，交流和确认就是必须的了。它不仅可以再次确认你们的共识,还可以让需求更加明确、定位更清晰，乃至碰撞出更好的想法。

至此，可以不断的重复这一环节，直至你的原型出壳。

*工具推荐*：纸+笔

**2.风格确认**

原型出来后，便需要一个漂亮的界面。在五花八门的模版中，你可能眼花缭乱、“意识模糊”、失去了确认的能力。每每看到优秀的模版就会觉得“嗯，不错，就用它了。。。但这里有点美中不足”。花费了大量时间可能毫无结果。亦可能想着自己去创作，摸心自问，你真的有那个能力么？也许你从配色到 PS，再到用户体验都会，但你毕竟不够专业。这时便需不去在乎“模仿、山寨”的头衔，大胆的采用“拿来主义”，许多成功人士不也是这样“站在巨人的肩膀上”么 ^^

“拿来”也要有一定的范围，要不如同大海捞针。在原型确认，主题明确，用户群体定位后。便可以确定整个应用的风格、色调，进一步缩小“拿来”范围。找到合适的模版即可采取其优点，摒弃其不足。对于不足之处，如有能力可进行适当的自我创作尝试,否则可采用配色的基本常识进行改进。

至此，可以得到一个平面的设计了。

*模版参考网站*：

http://www.qianduan.net/

http://www.freecsstemplates.org/css-templates/

http://www.instantshift.com/2009/09/29/99-high-quality-free-xhtmlcss-templates/

http://www.cglink.net/cglink\_link/cglink\_49.htm

http://www.wordpressthemespark.com/

http://www.openwebdesign.org/

*图标下载网址*：

http://findicons.com/

http://ajaxload.info/\#preview

http://www.iconfinder.com/

*工具推荐*：

http://www.sumopaint.com/app

http://www.aviary.com

**专业版:**

目前国内很多公司都还没有划分出前端组，有些甚至一人从头包到尾。即使有些跟潮流划分了前端和后端。但仍是职责不明，分工不合理，没有前后端的意识。昨晚看了淘宝小马对[淘宝整个前端历史的讲述][Link 1]。这在国内应该算很不错的了，尤其是计划今年前端将扩招至90人，God，规模，分工将会多么的细致，所带来的又会是何等的专业呢？管理运维又将是如何？这不再是自娱自乐了，每一步都应该会使用到一些工具。

如今还是有很多开源软件可供选择，他们也是一样非常的优秀。像 Gimp， Firefox 相关插件。

由于自己平时都自娱自乐，只粗略玩过 Axure 和 Firefox 的插件 Pencil。今天本来想尝试[胸毛][Link 2]使用的 Balsamiq Mockups，可惜公司网速不给力。于是 Google 了下，[免费的网页原型工具介绍][Link 3] 这个介绍貌似不错。

本文是使用 [B3log Solo][] 从 [Vanessa][] 进行同步发布的

原文地址： [http://vanessa.b3log.org/webpage-tool-step][http_vanessa.b3log.org_webpage-tool-step]

[Link 1]: http://www.infoq.com/cn/presentations/zzx-taobao-front-end
[Link 2]: http://www.lyzane.com
[Link 3]: http://www.ued6.com/ued-982-1-1.html
[B3log Solo]: http://b3log-solo.googlecode.com/
[Vanessa]: http://vanessa.b3log.org
[http_vanessa.b3log.org_webpage-tool-step]: http://vanessa.b3log.org/webpage-tool-step