如果在不仔细考虑网站架构的情况下就去做一个网站,这就像在没有规划行程前而去贸然旅行。你可能最终到了你的目的终点,但是你可能也不知道在这过程中,你已经走过了多少的弯路。做网站适用同样的道理。在开工之前,好好的规划你的网站架构是非常有必要的:一方面使得设计流程清晰规范,另一方面更加有效的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

website architecture的更多相关文章

  1. [Architecture] 系统架构正交分解法

    [Architecture] 系统架构正交分解法 前言 随着企业成长,支持企业业务的软件,也会越来越庞大与复杂.当系统复杂到一定程度,开发人员会发现很多系统架构的设计细节,很难有条理.有组织的用一张大 ...

  2. [Architecture Design] CLK Architecture

    CLK.Prototype.Architecture 最近找数据,看到了博客园在不久之前,办了一个架构分享的活动:.Net项目分层与文件夹结构大全.看完之后觉得获益良多,接着也忍不住手痒,开始整理属于 ...

  3. Agile software architecture design document style..( sketches and no UMLs)

    http://www.infoq.com/articles/agile-software-architecture-sketches-NoUML If you're working in an agi ...

  4. What is AMQP? and the architecture

    What is AMQP? (Advanced Message Queuing Protocol) When two applications need to communicate there ar ...

  5. 可扩展的Web系统和分布式系统(Scalable Web Architecture and Distributed Systems)

    Open source software has become a fundamental building block for some of the biggest websites. And a ...

  6. Foundations of RESTful Architecture

    Introduction The Representational State Transfer (REST) architectural style is not a technology you ...

  7. What is Web Application Architecture? How It Works, Trends, Best Practices and More

    At Stackify, we understand the amount of effort that goes into creating great applications. That’s w ...

  8. Pattern: Microservice Architecture

    Microservice Architecture pattern http://microservices.io/patterns/microservices.html Context You ar ...

  9. Scalable Web Architecture and Distributed Systems

    转自:http://aosabook.org/en/distsys.html Scalable Web Architecture and Distributed Systems Kate Matsud ...

随机推荐

  1. 使用PHP_UML生成代码的UML图

    在读别人代码的时候, 在没有详细文档的时候, 如何快速的看清整个代码的结构(类结构), 就成为了一个现实的问题. 今天我就介绍一种, 自动生成UML图的方法. 假设, 我有一个项目文件夹:laruen ...

  2. NumPy的array

    1.numpy包中的array数组,用于弥补列表可以存储任意的数据类型的不足,因为有时候我们需要存储某种类型的数据在数组中,这才是数组的本来内涵.我们通过向numpy.array()函数中传递pyth ...

  3. 初识layer 快速入门

    http://layer.layui.com/hello.html 如果,你初识layer,你对她不知所措,你甚至不知如何绑定事件… 那或许你应该用秒做单位,去认识她. 开始了解 第一步:部署 下载l ...

  4. visual studio 2012 Github

    前言 一直以来都想使用Git来管理自己平时积累的小代码,就是除了工作之外的代码了.有时候自己搞个小代码,在公司写了,就要通过U盘或者网盘等等一系列工具进行Copy,然后回家才能继续在原来的基础上作业. ...

  5. iOS验证码倒计时(GCD实现)

    + (void)verificationCode:(void(^)())blockYes blockNo:(void(^)(id time))blockNo { __block ; //倒计时时间 d ...

  6. Windows 回调监控 <二>

    在之前的文章Windows 回调监控 <一> 总结了关于CreateProcessNotify,CreateProcessNotifyEx和LoadImageNotify一些用法,之后产生 ...

  7. 【HDU 5030】Rabbit's String (二分+后缀数组)

    Rabbit's String Problem Description Long long ago, there lived a lot of rabbits in the forest. One d ...

  8. Yarn中如何生成状态机图

    原文 http://xiguada.org/yarn_state_picture/ 在Hadoop2.0系列的版本里,采用了状态机的方式处理ResourceManager,NodeManager,Ma ...

  9. 网络安装之Redhat衍生版

    GNU/Linux开源,这个意义实在是非常的广泛,目前在distrowatch上表现活跃的300个发行版代表了GNU/Linux的主流,然而细心的Linux爱好者会发现CentOS-based dis ...

  10. 阿里巴巴fastJson进行json数据解析

    1.生成JsonObject:将Java bean转换成易于处理和传输的strig的key value形式. 2.解析JsonObject:将收到的字符串转换成JsonObejct这种对象形式,Jso ...