If you're seeing this message, it means we're having trouble loading external resources on our website.

如果你被网页过滤器挡住,请确保域名*.kastatic.org*.kasandbox.org 没有被阻止.

主要内容

规划您的网页

如何把一个空白页变成你梦想中的网页呢?你可以马上开始编写 HTML 和 CSS —— 在这个过程中随心更改内容,删除不喜欢的东西,添加你突然想到的主意,并重新排列页面的某些部分。
然而,这并不总是最好的办法,因为它可能会浪费大量的时间来编写 HTML 和 CSS,以至于你可能会放弃。作为替代,你应该在实际构建网页之前对其进行规划。你可以规划出内容、布局,甚至外观和感觉。

头脑风暴

计划任何事情的第一步通常是头脑风暴 —— 找出你可能想做的任何事情。你通过在纸上绘制思维导图、在文档中记录笔记或把笔记的后记放在板子上来集思广益。
你可以自己集思广益,或者 —— 如果你想成倍增加想法的范围 —— 找一个合作者和你一起头脑风暴。当你和合作者进行头脑风暴时,使用 "是的,并且" 的方法。不要把注意力集中在对你的合作者的想法不起作用的事情上;把重点放在那些可能有效以及相关的事情上。
在你产生了很多想法之后,你需要决定你真正想追求的是哪些想法。确定你最喜欢的点子的优先次序 —— 开始将它们列到计划中 —— 并且放弃其它的点子。你也可以将它们先记下来,以便将来再用。

纸上原型

下一步很好的是创建一个纸上原型 —— 把你的网页画在纸上。它是网页组件的草图,内容的涂鸦和元素的框。
下面是 SF quiche(查找鸡蛋馅饼) 的纸上原型,这是一个 web 应用程序,可以发现新的鸡蛋馅饼:
SF quiche(查找鸡蛋馅饼) 的纸上原型的图片
由于在纸上绘制原型不需要太多时间,因此你可以快速迭代,而不用停留在原始设计上。你还可以同时制作几个不同的原型,甚至还可以为网站的多个页面制作原型。
制作原型后,你可能需要执行一些用户测试。向朋友展示原型,然后问他们先点击什么,或者眼睛先看哪。看看他们是否有其他反馈。

框架

一旦你觉得你的纸上原型差不多了,你就可以把他们变成框架了。框架就像一个原型,但它通常是在电脑上绘制的,因此更精确。 框架由表示页面每个部分的方框组成,并且会根据需要加上少量文本和图标。例如,下面就是我们的 SF quiche(查找鸡蛋馅饼)的框架:
SF quiche 应用程序的框架的屏幕截图
这个框架是在一个流行的在线原型工具 "Balsamiq" 中创建的。你还可以使用办公工具中的形状工具 (如 Powerpoint/Keynote) 或使用 Photoshop, Gimp, 或 InDesign 等设计应用程序来制作框架。你还可以在线搜索更多原型工具。请记住,许多框架应用程序都需要花很多钱来使用。
一旦你做了框架,你可能需要做另一轮的用户测试。一些框架工具可以让你分享你的框架以供他人评论。还有一些工具,如 InvisionApp,让你可以创建交互式框架,让你点击屏幕可以去到新页面。

想加入讨论吗?

尚无帖子。
你会英语吗?单击此处查看更多可汗学院英文版的讨论.