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

    事件类型定义: package org.apache.hadoop.event; public enum JobEventType { JOB_KILL, JOB_INIT, JOB_START } ...

  2. win7/8下VirtualBox虚拟Ubuntu共享文件夹设置

    实验环境: 主机:win8.1 虚拟机软件:VirtualBox4.3 虚拟的主机:centos6.5 final 亲测可用! 1. 安装增强功能包(VBoxGuestAdditions)  打开虚拟 ...

  3. svg琐碎01

    svg中的<g>主要用来做分组的定位,使用transform="translate(xOffset,yOffset)" 更改起始坐标. transform中的坐标是相对 ...

  4. 金融证券协议FIX/FAST/STEP

    金融信息交换协议FIX是适用于实时证券.金融电子交易的数据通信标准.它是把各类证券金融业务需求流程格式化,使之成为一个可用计 算机语言描述的功能流程,并在每个业务功能接口上统一交换格式.STEP(Se ...

  5. JavaScript 堆内存分析新工具 OneHeap

    OneHeap 关注于运行中的 JavaScript 内存信息的展示,用可视化的方式还原了 HeapGraph,有助于理解 v8 内存管理. 背景 JavaScript 运行过程中的大部分数据都保存在 ...

  6. codeforces 463D Gargari and Permutations(dp)

    题目 参考网上的代码的... //要找到所有序列中的最长的公共子序列, //定义状态dp[i]为在第一个序列中前i个数字中的最长公共子序列的长度, //状态转移方程为dp[i]=max(dp[i],d ...

  7. hdu 4725

    The Shortest Path in Nya Graph Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K ...

  8. POJ 2531 Network Saboteur (枚举+剪枝)

    题意:给你一个图,图中点之间会有边权,现在问题是把图分成两部分,使得两部分之间边权之和最大. 目前我所知道的有四种做法: 方法一:状态压缩 #include <iostream> #inc ...

  9. HDU 1392 Surround the Trees (Graham求凸包周长)

    题目链接 题意 : 让你找出最小的凸包周长 . 思路 : 用Graham求出凸包,然后对每条边求长即可. Graham详解 #include <stdio.h> #include < ...

  10. ExtJs之Ext.form.field.TimePicker DatePicker组合框

    <!DOCTYPE html> <html> <head> <title>ExtJs</title> <meta http-equiv ...