如果在不仔细考虑网站架构的情况下就去做一个网站，这就像在没有规划行程前而去贸然旅行。你可能最终到了你的目的终点，但是你可能也不知道在这过程中，你已经走过了多少的弯路。做网站适用同样的道理。在开工之前，好好的规划你的网站架构是非常有必要的：一方面使得设计流程清晰规范，另一方面更加有效的layout，SEO优化设计等都可以在这个阶段有所考量。

• sitemap

sitemap是网站组织的指南。她是能在你的网站上的所有元素的可视化反映，表明了有哪些链接，分别指向哪些页面，这些页面是如何连接在一起的，你如何从这个页面到达另外一个页面等。这实际上最终将形成网站的XML sitemap，并且可以直接向搜索引擎提交，但是在早期设计阶段，这个sitemap只是指引进一步设计的模板参考

• wireframe

这是一个非常基本的对于页面究竟会长成什么样的概念化的反映。这是一个并不工作的mockup(模型)，仅仅用于初略给出一些想法：哪一个元素应该放在页面的哪一个位置。。。比如，logo, sign-in,search box, main nav, sub nav, main content, callout, dynamic content, widget, slider等等

wireframe通常描述了页面的layout或者网站内容的安排，包括界面元素，导航系统以及他们是如何一起工作的。其存在的目的通常是用于描述商业目标或者创意。wireframe通常缺少印刷格式，色彩，图形等，因为其存在的原因主要是功能，行为，以及内容的优先级。换句话说，他主要聚焦于what a screen does, not what it looks like. wifeframe甚至可以由铅笔素描或者白板绘画形成，当然，现在也有很多用于生成wireframe的online软件。wireframe通常由busness analysts,user experience designer, developer, visual designer或者其他的interaction designer, infromation architecture人员来制作。wireframe focus on: the rance of functions available, the relative priorities of the information and functions, the rules for displaying certain kinds of information, the effect of different scenarios of the display. 她市一中快速page prototype的方法。wireframe通常存在于high-level structural work--like flowcharts or site maps---/and screen design.在网站制作的流程中，wireframe是将我们的概念可视化。

• interaction

互动交互图模拟了人们是如何使用你的网站的。她描述了人们在使用您的网站时的切实用户体验。虽然wireframe可能指示一个contact page是实实在在存在的，interactions图将可视化用户在使用那个contactpage时的情景。她将展示当用户submit contact form时，他们将被重定向到哪个页面，并且展示当出错时会发生什么。

Website架构设计是web design的第一步。他在网站的基本概念成型后开始：你应该知道了你的网站要完成什么商业目标，你的网站的用户是些什么人，你知道他们喜欢什么。这样你就需要决定如何使用你提供的产品来满足这些人的需求。随后在architecture结束后，你可能需要website prototyping这个流程，这样你将有一个可以工作的原型，并且可以邀请用户来测试她，在得到用户关于原型机的feedback后，user experience design就需要精细地调整用户体验了。

http://www.webbizideas.com/architecture