现在Web Grid依然非常流行，可以了解到Grid最早的出现是为了打印排版的规范性。
而如今的Grid在网页上出现也是为了规范性？
难道人云亦云，大家说好才是真的好？
Grid的分法我就不详细的说明了，在这里讨论一下Web Grid System可以有哪些重要的用途。
一开始我觉得Grid只是一快事构建与多人协助所用的方法，只要开发人员都应用统一的标准，可以很好的控制代码统一，易于维护。
但是实际应用中发现不仅要追求“黄金分割”这样以美学为标准的Grid，其实Grid System还有一个更重要的用途，可以统一页面之间广告的展示。
我们都知道，在网页上经常会因为不同的大小，所以经常改变广告位，这对于现在这种没有Web AD标准来说，非常头痛。
而在一个网站内部来说同样存在这个问题，一个大型网站必然有很多种不同布局的页面，这些面会被不同的部门所应用，但是里面的广告内部有时几乎不变或穿插很大。为了以一种最好的广告尺寸来应对多页面布局的方法—Grid System。

Yahoo ad流行的尺寸
在设计网站之-初，根据原型业务部门的反馈并且与设计师等沟通后，需要对网站页面进行统计与规划，布局由为重要，这将是以后网站可持续发展的一个根基。
可以想象一个大型网站，其广告数量是相当的惊人的，你说可以改，没问题，但是谁能去改几万张的图片！

在这里采用了20-10-33的栅格，选取几种主要的布局分别为：
200-770
440-530
320-650
这三种“二栏”布局又都可以拆分为
200-440-320
再加上嵌套的布局，可以很达到10多种，基本可以按需分配。
而其中关键的“广告位”则可以选取
770（黄金广告位）
200-200（方块）
440-120
300-250
这些广告（除黄金广告）都可以做到页面之间的通用性，展示的频率增加了，那效益自然要增加。
这里值得一提的是黄金广告位，为什么这里不设计为分两栏？因为黄金广告位的目的是为了更大的展示，而这个页面，应该是访问的最多（首页与SEO方向）所以才能称为黄金，看着舒服买家买的也爽啊~^_^~哈哈
Yahoo的前端工程师Nate Koechley说过前端工程师是企业的价值的体现，将价值最大化。
题外话：
理解是一个团队的最关键一点，大家之间因为专业的差异会变得陌生，分工越细使得分化越利害，这不是一个良好的团队。
在理解业务与开发人员之间的问题之后，需要大家都必须了解对方的角色，当然这需要时间的考验。

不过，对于小型网站来说其实并不需要这么复杂，这样会增加开发成本，但是对于大型网站，其页面不尽相同数量之多，开发人员也多，这样一个协调的“标准”是必须的，只有这样才能保证设计的质量，如果大家都可以熟练的应用那么在合作之间可以减少很多不必要的摩擦，使得开发的过程变成一个快乐的过程。

Axure做为原型开发的软件，经过一段时间的应用，感觉的确非常强大，不论从模块划分、特效、基础搭建、多人协助等都比较出色。
如果熟练应用的话，可以在很短的时间内把业务思路整理清晰。
为什么需要原型？
我认为这是个非常有趣的问题，原型的开发无疑要加长整体的开发时间，并且在这段开发时间内很不稳定，会经常改动，变动之大，可能几次需要从头再来。
原型可以使业务流更加紧凑，更容易发现业务中的遗漏，可以减轻开发的迭代次数，减少开发与测试时间，更可以减少版本迭代数这个比较关键，是保证质量的前提（向老板汇报时不希望总是Bug吧！）
如何应用原型？（原型的开发步骤）
制作原型的工具很多，Axure只是其中之一，Microsoft Expression Blend 3、Visio与Balsamiq Mockups甚至是Word与PPT等，太多了。
但是我觉得Axure并不适用于原型的第一阶段。其原因在于操作Axure绝对比拿一支笔与一张纸要费事的多的多！！！
第一阶段：整理需求
首先我们需要一个比较清晰的思路（功能），并对其进行总结与规划。

第二阶段：数据可视化
工具：纸笔或Balsamiq Mockups等。
要求：能快速描绘与设计出需求方提出的基本意思，整理并图形化。

简单的草图可以让思维快速变换，并且印象深刻。非常适合在前期头脑风暴与第一期草图（内部供稿）使用。
在这个期间需要交互人员不断的与用户或需求部门的相关人员（统称超级用户super user）进行迭代并确认相应的模块是否已经基本健全，并且有预留一定的宽展性。
 
经过不交互人员与超级用户（super user）不断的交流后，一个草稿就基本完成。
在这里值得一提的是Microsoft Expression Blend 3用来制作前期交互草稿非常棒

这个SketchFlow Map对整理整个结构有非常好的作用：

有时间还要好好再研究一下~

第三阶段：高精原型制件（业务测试）
已经有前面的简单可视化分析，进一步就可以制作出具有高交互与精度的原型来让一些用户（user）测试一下。进而再收集数据确定业务流程。
 
由Axure制作的原型可以达到比较高的仿真度，这样可以让用户有比较良好的体验，这些收集得来的数据可以再一步分析，精确业务流程并与对其进行合理的简化与优化。达到真正为用户着想的作法。
最后一步：迭代（基本完成）
以上所有的参与人员都是由前端组成员包括UI设计师、交互设计师等所有组员完成的成果，其中全程合作将是保证整个原型开发的顺利进行的关键。由其是交互人员与超级用户之间的交流更是重中之重，是原型成败的关键！
至此原型的开发应该可以告一段落。整个开发可以画做这么一张图：

是一个不折不扣的循环式开发。
不论对于Server端开发还是对Font End开发都是非常有好处的，实现一种理论上的MVC开发。但是其时间也是比较长，所以不是适合所有项目，一些小型项目或者对业务与其他方面都非常熟悉并团队较小每个人对业务已经可以达到行云流水一般，直接进入敏捷（XP）开发会更有效率。
欢迎大家指正与交流！
Y.Jiajia’s email: will.yuan[a]ymail.com

做为前端组的一员，我们到底是需要对产品或需求有怎么样的理解?
我们需要什么样的资料来整理思路？
时常开发时遇到的问题是如何做好产品？
第一：需要理解需求
但是不可能去要求前端的每一位人员（包括设计）去理解DFD图或UML图，这些图虽然可以表达出大量的信息，但是说实话，真正理解的人并不多，也许你是这方面的高手。
对于抽象的数据与文字，更多的方法，我们是画一些草图，这样，可以方便工作流中的每位同事对相同事物的共通理解，减少产生奇异的几率。

第二：需要确定实例与权重
对于功能的理解已经到位时，我们需要再进入细化，那就是功能的权重叠加法。
页面功能太多时，需要有主线+分支的方法进行量化，要定义好目标与结果。
最终达到目的后进行反推，用分支把方法串连起来形成一个整体。
 
第三：测试人员要清楚自己的角色定位
测试人员与设计人员一样，需要把自己的定位弄清楚，不可盲目的去测试软件的好与坏。
所以测试人员需要清晰自己的角色目标与角色结果，然后进行分批的测试。
第四：没人想把自己当傻瓜
所有的用户都希望有简单与再简单的功能与界面，但是如果只有一张白纸，不是所有人都能画出梵高的画。

所以需要我们去为其编制一套流程，我们要引着他们一步一步的走，最终达到他们的目的地。
还是那句：我们需要简单的界面，但是不需要更简单的界面。

用Firefox打开Google时，首先只有Logo与搜索，其他的功能都隐藏了，但是当你点一下空白处，或是等待10秒，便会出现以前的界面。
Google在官方博客中表示，将会让所有网民看到新主 页。Google在文章中说：“对于绝大多数访问Google主页的人来说，他们的目的是搜索，这种简洁、最精简的界面给他们提供了最需要的东西。”
据博文称，Google推出了十个版本的新主页，隐藏不同的要素，观察了网民的反应，最终决定了“淡入”方向。
一个小举动，却又表示了Google在对用户体验方面的不断改进。

网页设计背景
网页设计是从围绕以屏幕为基础的用户交互工具的软件图形用户界面设计发展而来。 
网页设计包括更广泛的设计实践领域，并吸收多学科的技术与知识，虽然它无法在这些学科各自的范围界限内被完全理解。

设计的定位
设计来源于许多各类的社会活动、并成为它们之间的媒介。设计与艺术有着本质性的不同，而两者又不断相互作用。
 
注：限制条件
1.显示器 2.浏览器 3.现代技术

网页与软件的不同
软件毕竟是带有明确任务的、关注文件处理领域的工具（是一种“带来”的模式）。 而网络在应用方面更为广泛。一般来说，内容导向性经任务导向性体现得更多，因此建立的客户服务模式不是“带来”，而是转向，也就是说用户可以运用动态链接获取不断更新的信息网页。这一点与图书馆学和信息设计学有相近的实际意义。
网页设计与交互体验
“适合人体”原则-大约在二次世界大站时期演化为人体工程学（人性因素），其驱动力量来源于我们在与机器设备的接触中所遇到过最复杂、最困难、最危险的挑战：驾驶飞行器。
“适合思想”原则-传统的交互方式来源于物质实体，而电脑科学则依靠于设计。 如：开车的有开车的思维模式，来帮助他们了解车辆的行驶趋势，这与电脑的优势在于，车内的发动机，传动装置和驾驶杆都是实体。
在电脑方面则需要有一套思维模式来适用从Hotmail到Google等许多不同的系统。这些系统有一个共同点，都在电脑里运行并且目前来讲都是基于键盘与鼠标。
对于表单的设计，如果一次出现多于7项时会开始下降，基于这点原因AT&T公司的贝尔实验室研发了3+4的电话号码构成模式，并最终被确认为美国能用模式。
一切都要得益于自然世界的经验，人类与数字处理系统的交互也按类似的步骤实现。 在人机交互中，基本上当某个软件用户对一个操作的反应等待时间超过1秒，他便会感到不适。从这一点出发，就是一个需要前端解决的重要问题，也是上网体验的一个重要因素。
最好的交互体验在哪里可以找到？
游戏设计！
玩家的动作与屏显反应之间的系统是创造非凡游戏体验的关键（即使对于非操作者而言）。—-街头霸王II 销售额接近美国大片 这就是为何Wii为何如此的成功！
暴雪娱乐的副总裁Rob Pardo在游戏开发者大会GDC2009上表示微软和索尼应当适应型的游戏方式和游戏机制，并做出相应的改进。他建议两家公司学习任天堂，改进自己的游戏机。他说道：“如果（索尼和微软）不能适应新的游戏方式和游戏机制，那就不要推出新的游戏机了，要不我们得到的只能是糟糕的游戏机。”
Rob Pardo也点出了《魔兽世界》至今没有登陆家用机平台的原因。这些游戏平台设计时就没有考虑某一些类型的游戏。“有很多我们开发的这类型游戏（大型网游）没办法在游戏主机在运行，就是因为这类设备不支持。RTS游戏在游戏主机上表现不佳也是这个原因。要是我是主机开发商，我会坐下来好好研究如何让我开发的主机能够支持所有的游戏。那才是一个真正酷的主机。
网页设计项目工作流程

 
部分内容节选自：What Is Web Design。

《第一财经周刊》做了一件很有意义的工作，该杂志找到多达1028个公司人，让他们填写一份有167个问题的冗长问卷（全是主观题），并且把这些题目按照11个行业、58种产品或服务分类统计。
调查样本主要为在京、沪、广、深等城市公司工作的年轻公司人。其中男性465人，女性563人。年龄在25岁到30岁的公司人占据了主要比例，他们共有514人；年龄在20岁至25岁的有265人，30岁至35岁之间有211人，35岁以上的38人。
接受调查的这个群体—一线城市为主的公司人—他们所拥有的话语权、消费能力和对潮流的把握，那么这种变化可能更应该引起相关品牌的重视。因为这群人代表了城市消费的主要力量，他们既是优秀品牌现在可以倚靠的中坚，也是决定这些品牌未来地位的关键。他们是一群适应了快节奏的人，他们是一群喜欢尝试新产品新服务的人，并且，有一点一定要特别记住，他们还是左右潮流的人。
调查中，对所有产品都用三个问题来限定：1、你现在使用的该产品品牌是什么？2、你已经弃用的该产品品牌是什么？3、你未来打算购买的该产品品牌是什么？
按照通俗的解释，这三个问题大致可以体现一个市场各品牌当前、过去、未来的市场占有率。不过我们更愿意说，这些百分比体现了品牌与公司人关系的变化趋势。
看一些互联网从业者可能感兴趣的：
浏览器：IE的黄昏 IE 遨游 Firefox
微软的IE仍然是公司人首选的互联网浏览器，占公司人用户的46.53%—尽管他们中的很多人都抱怨IE的运行速度慢、弹出插件多，但看在它是唯一能支持网银平台的浏览器的份上也就都忍了。排名第二的是遨游（19.1%），它同样采用IE内核。近年崛起的FireFox和谷歌Chrome浏览器也迅速获得了大量用户，它们的使用率分别达到10.57%和7.68%，超过腾讯TT浏览器的6.62%。 但在弃用调查中，竟有70.34%的用户声称他们准备弃用IE—这是个惊人的数据。同样居于前列的还有同属IE内核的遨游和腾讯TT。而谷歌Chrome浏览器在公司人考虑使用的浏览器中挤进了前三。这不能不说是IE的忧郁—浏览器已经是微软在互联网领域的最后一块阵地了，公司人真的要放弃它吗？
门户网站：新浪回归 新浪 搜狐 网易 人们讨论新浪合并分众业务的时间并不是太长。现在还是让我们回归到新浪的本位—一家新闻类门户网站。 在集合了全国数百家主要媒体资源，以及建立起流水线一般的编辑流程之后，新浪仍然是眼下最受公司人欢迎的网络门户，用户首选的比例为40.73%；与新浪的综合性相比，搜狐让人印象深刻的地方恐怕在于它在部分内容上的精耕细作，比如体育和娱乐；网易也是老牌门户之一，最近两年在社会新闻、商业编辑上的进步明显，而且资讯页面与其占有大量用户的信箱有着不错的结合。但无论是搜狐还是网易，与第一名新浪相比仍差距较大，其用户首选比例分别为11.46%和9.79%。
搜索引擎：百度谷歌之争 百度 [...]