主要内容
规划您的网页
如何把一个空白页变成你梦想中的网页呢?你可以马上开始编写 HTML 和 CSS —— 在这个过程中随心更改内容,删除不喜欢的东西,添加你突然想到的主意,并重新排列页面的某些部分。
然而,这并不总是最好的办法,因为它可能会浪费大量的时间来编写 HTML 和 CSS,以至于你可能会放弃。作为替代,你应该在实际构建网页之前对其进行规划。你可以规划出内容、布局,甚至外观和感觉。
头脑风暴
计划任何事情的第一步通常是头脑风暴 —— 找出你可能想做的任何事情。你通过在纸上绘制思维导图、在文档中记录笔记或把笔记的后记放在板子上来集思广益。
你可以自己集思广益,或者 —— 如果你想成倍增加想法的范围 —— 找一个合作者和你一起头脑风暴。当你和合作者进行头脑风暴时,使用 "是的,并且" 的方法。不要把注意力集中在对你的合作者的想法不起作用的事情上;把重点放在那些可能有效以及相关的事情上。
在你产生了很多想法之后,你需要决定你真正想追求的是哪些想法。确定你最喜欢的点子的优先次序 —— 开始将它们列到计划中 —— 并且放弃其它的点子。你也可以将它们先记下来,以便将来再用。
纸上原型
下一步很好的是创建一个纸上原型 —— 把你的网页画在纸上。它是网页组件的草图,内容的涂鸦和元素的框。
下面是 SF quiche(查找鸡蛋馅饼) 的纸上原型,这是一个 web 应用程序,可以发现新的鸡蛋馅饼:
由于在纸上绘制原型不需要太多时间,因此你可以快速迭代,而不用停留在原始设计上。你还可以同时制作几个不同的原型,甚至还可以为网站的多个页面制作原型。
制作原型后,你可能需要执行一些用户测试。向朋友展示原型,然后问他们先点击什么,或者眼睛先看哪。看看他们是否有其他反馈。
框架
一旦你觉得你的纸上原型差不多了,你就可以把他们变成框架了。框架就像一个原型,但它通常是在电脑上绘制的,因此更精确。 框架由表示页面每个部分的方框组成,并且会根据需要加上少量文本和图标。例如,下面就是我们的 SF quiche(查找鸡蛋馅饼)的框架:
这个框架是在一个流行的在线原型工具 "Balsamiq" 中创建的。你还可以使用办公工具中的形状工具 (如 Powerpoint/Keynote) 或使用 Photoshop, Gimp, 或 InDesign 等设计应用程序来制作框架。你还可以在线搜索更多原型工具。请记住,许多框架应用程序都需要花很多钱来使用。
一旦你做了框架,你可能需要做另一轮的用户测试。一些框架工具可以让你分享你的框架以供他人评论。还有一些工具,如 InvisionApp,让你可以创建交互式框架,让你点击屏幕可以去到新页面。