自娱自乐版:
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
专业版:
目前国内很多公司都还没有划分出前端组,有些甚至一人从头包到尾。即使有些跟潮流划分了前端和后端。但仍是职责不明,分工不合理,没有前后端的意识。昨晚看了淘宝小马对淘宝整个前端历史的讲述。这在国内应该算很不错的了,尤其是计划今年前端将扩招至90人,God,规模,分工将会多么的细致,所带来的又会是何等的专业呢?管理运维又将是如何?这不再是自娱自乐了,每一步都应该会使用到一些工具。
如今还是有很多开源软件可供选择,他们也是一样非常的优秀。像 Gimp, Firefox 相关插件。
由于自己平时都自娱自乐,只粗略玩过 Axure 和 Firefox 的插件 Pencil。今天本来想尝试胸毛使用的 Balsamiq Mockups,可惜公司网速不给力。于是 Google 了下,免费的网页原型工具介绍 这个介绍貌似不错。