Posts Tagged ‘Web’
“高品质”是所有人追求的目标，在网页设计的世界中也不例外。不过何为“品质”，如何判断一项设计的品质是好还是坏？笔者恰好有一套找出网页设计中品质焦点的方法。一旦你了解到如何判断一项高品质的设计究竟好在哪里，你就掌握了让自己的设计更趋完美的大量技巧。
这里，为大家列一些要点，并附上相应的例子，分享在其他优秀网页设计中寻找“高品质”的过程。
1、留白
在好的网页设计中我最留意的是那些对设计元素之间留白的聪明运用。留心不同内容区块之间的间距和排列方式，能让你的设计的整体感官大不一样，从而提升设计的品质。
我觉得处理好留白的关键是从整体上感知设计元素。把设计稿缩小观看会是个好办法。
出色的留白处理的实例：Good.Is
页面整洁而有开放感，全都得益于设计师对文字和图像之间留白量的准确把握。
Digital Mash
在大空白上展示的元素往往更具吸引力。Digital Mash的网站创造了极佳的亲和力。
Creatica Daily的大量空白
优秀的留白运用又一次让网页内容成为焦点。每篇文章中都有大量内容，不过该站点的设计师们并不惮于给这么多内容之间填上大量留白。并不是说你的文字不够多，就不能用很多留白。
Postbox上也有很多空白
仔细观察Postbox的网站，你能看到边缘处的留白应该如何处理。它的方框边缘有60像素的边内留白。听起来似乎挺大的，实际看起来效果却好极了。
留白时的错误
大家在设计留白时的最常见问题就是各个区块的内容到边缘距离太小。不论你的设计多么有风格，如果你硬要把东西塞得紧紧的，这些风格连同设计的品质，就都流失了。
留白不够的例子
我们已经看到PostBox的网站那些大留白创造了多么动人的效果，所以下面我们修改一下它的页面，看看减少留白会是什么效果。品质感明显下降了。留白的影响就有这么大。
高效控制留白的技巧
各种不同情况下，留白要求都不尽相同。你需要不断训练自己，做到对留白所能带来的改变时刻心中有数，从而有效地利用留白满足设计需求。这要靠个人感觉的，不过都能从实践中锻炼出来。
·使用网格辅助设计：利用网格当然能帮助你理解元素之间的空白。
·不断尝试：不断尝试—失败—尝试，直到找到最佳方案。
·留白并不是浪费空间：空白并不总是等着你去填充的。
·没错，少就是多：与其用尽心思填满某个区域，不如就把它留空，只保留至关重要的信息就好。
有 一个方法能够看出某人在完成一项网页设计时是否真的用心了。有时候创造奇迹的就是一些小细节，一些别人几乎无法察觉的细节。我所说的 “像素级的完美”就是指在线条、边缘和边框描边上仔细推敲。与其就用一条单一的线，不如多加一些细节。细节可以是细微的渐变，也完全可以只是一条1像素宽 的细线（用作表现阴影或高光）。有了这些细节， 你的设计会大不一样。有些设计师在这方面特擅长：Collis Ta’eed，David Leggett以及Wolfgang Bartelme。
像素级完美细节的实例：Envato的细节鉴赏
下 图的Example 1(例子1)中，绿色内容框的边缘有一条更亮的绿色线。而Example 2处，区块内边缘有柔和的渐变阴影，而边缘之上还有一像素的白色描边。这做法非常聪明，用阴影来强调高光。后面的绿色区域有非常柔和细微的光影效果，有助 于将注意力吸引到下面的白色区块中那清新脆爽的细节上去。尽管这种做法并不是总能让设计看起来更加精致，不过它们的确能帮助你赋予设计以三维的真实感。于 是设计元素就成了镶嵌在页面上的宝石，而不是平铺在上面的一张毫无动感的纸。
Tutorial9.Net上的细节
David Leggett 对于如何制造单像素顶边条有很深的理解。他最近重新设计的tutorial9集合了很多非常棒的像素化技巧。Example 1处你能看到，他是如何仅仅通过添加一条1像素的高光，而将导航标签变得更有质感。Example 2处使用的技巧则更多了。相机图标的投影，下方白色区域的阴影与高光，以及导航条上的1像素高光。
RedBrick Health：按钮和分割线上的完美像素级细节
这个漂亮的导航菜单，由Ryan Scherf创造，是使用完美像素级细节提升设计品质的绝佳实例。红色按钮有1像素的高亮，链接之间的分割线也有同等的品质与细节。正如你所看到的，他没有满足于只用一条灰色线分割，Ryan还在下面添加了一条1像素宽的高光线，避免了设计看起来过于平坦。
完美像素级细节也适用于Grunge风格：AvalonStar
译注：Grunge风格有“做旧”、“迷幻摇滚”、“做脏”等几层意思在里面，算是平面艺术中的一个流派。
下 面的例子是漂亮的AvalonStar：Distortion（扭曲）主题博客，有着极赞的grunge风格。不过，即便是肮脏做旧的 grunge风，利用1像素高光也能创造大不同。下图的Example 1处，上面的棕色区域有一个渐变阴影，下面的绿色区块的顶部则有着一条1像素高亮线。阴影与1像素线的结合，让这些区块显得更为精致。
完美细节小贴士
要在这一技巧上达到完美，不断的实践尤为重要。如您所见，一条1像素线这么简单的东西就能给设计添加非常酷的深度感。你甚至不一定要用到那些倒角或渐变，费尽心力做一些实实在在的置于某对象之上的效果。
·一定要注重细节：小细节完善内容感官是关键。
·思考像素级问题：描边、渐变、线条、阴影等等，不用太宽大也能有效增强设计
·前后对比：应用效果后注意与没有这种效果之前进行对比。如此你就能知道这些细节到底带来了哪些改观。
3、文字排列与字体选用的诀窍
尽 管设计师大都不会亲自撰写网站的实际内容，不过他们对于内容的整体品质仍然至关重要。设计师的作用就是要保证内容的展现方式足够易读。有很多方法能保证你 的字体易读易用，不过我不会给大家列一些该做什么或者不能做什么的规矩和条款，我带给大家的是一些聪明运用字体的实例和分析。
仔细考虑了字体的实例：The Netsetter上大而漂亮的字体
网页设计中，标题很重要，对于博客设计来说尤为如此。最近流行在标题上使用大而粗的字体。这样做有很多好处，不仅能提高特定内容区块的可用性，而且有助于组织设计中的空间和结构。 Netsetter在这方面做得非常好，如您所见，标题字体很大，周围有大量留白，十分易读。
Viget：行间空白和字符间距
Viget的网站是字体究竟对网页设计有多重要的完美实例。下面的截图来自他们的作品集 展示页，再一次展示了大字体是如何帮助创建开放空间的。即使是这种清爽的细线体，他们也使用了宽阔的空白。另一个值得称道的地方是他们对于行高(line height)[行间空白]的的绝妙选择。行间距被设定得比默认值大很多，大大增强了文字可读性。也许下次你可以在自己的设计中也试一试这个技巧。
Web Design Ledger：配合情绪的字体
要找到完美的字体需要不断的尝试和失败，或者你还可以根据字体所代表的“情绪”来选择字体。下面的例子，Web Design Ledger， 在给人以复古和做旧感的同时，也饱含开放的情绪与现代感。他成功的关键就在于选择了能唤起人们相应情绪的字体。Henry Jones (该站的设计师) 为标题选择了一种流行的传统衬线字体：Georgia，为怀旧复古风的实现提供了很大裨益。现代感则来自与标题完全不同的字体——主内容使用的 Helvetica字体，一种无衬线的、滑溜的、开放的字体。
网页设计中字体选用的快速决断
看了上面这么多好例子，将来你选用起字体来应该会更加得心应手。不过，为什么他们给人的感觉这么好？下一次在你自己的设计中，你又该如何运用？
·是否可读？不要怕尝试粗大的字体
·你可否考虑过间距？间距对于可读性有很大决定作用
·你的字体带给人什么情绪？确保字体选择适合你的设计风格
这方面还有大量值得关注的地方，不过我不是这方面的专家，我也只是刚刚学会了如何鉴赏那些用得极好的字体而已。
4、元素的组织
设计师这一职业对很多人都有吸引力，因为那些制造创意的过程，实在是十分有趣。我知道组织内容的过程就没有那么有趣了，不过一旦你养成了组织内容的好习惯，你就会发现其实它也没有想象中那么枯燥。组织内容的方式总是需要看情况而定，比如说，这站点是什么类型？某项特定内容在页面上的重要性如何？
如何放置内容，以及放到哪里，可能的排列组合实在太多了。不过还是有一些技巧可循的。最基础的就是，先决定你的设计需要达到的效果。例如，你是在做卖东西的网站吗？是要做内容展示吗？或者是在做一个用户注册页？推广页面？等等……
靠设计做买卖: 37Signals
看看这个广受欢迎的37 signals的网站。他们的东西能卖这么好，可不是靠的运气。他们的网站让你尽可能容易地了解了他们的产品，帮你做出最终决定。你所看见的东西都被精妙地设计而呈现。
如图中所示，他们提供了四大理由让你购买他们的产品。吸引注意力(Attention)是第一步，他们做了一个黑色区块，放上关于产品的简单介绍，并且使用了粗大的标题。接着，他们通过一些漂亮的插画把 你的兴趣(Interest)吸引到对产品优点的介绍上。再然后，他们想要让你产生购买需求(Desire)，这能通过放置客户评论引言和产品获奖证书来 实现。在这一实例中，他们是通过几个“What our Customers have to say”（我们的客户如是说）的视频来实现的。最后要实现的即促成购买行动(Action)； 37Signals的网站上有大量行动点(action points，即引导用户进行下一步操作的链接)贯穿于整个页面，由于页面很长，页面底部还放置了更多的行动点。
为内容(Blog)而设计：Well Medicated
设计博客页面时的情况则大不一样了。你不用花力气劝说你的用户信任你的产品，你的“产品”已经展示在他们面前—— 也就是你的博客内容。你要做的就是确保用户能轻松阅读你的文章，探索内容，与你和你的博客产生联系。
内 容(Content)应该是博客中出现在读者眼前的首要部分（之一）。在下面的例子中，一个粉红色粗体字的标题，很好地吸引了你的注意力，引导你直接关注 文章内容。左侧放了张大小合适的预览图，右边则是两三段文章摘要，和一个“继续阅读”的链接。当然，也有标准的日期和作者信息。这简直就是我心目“内容设 计”的完美实例。注意力(Attention)可以被引导到任何有趣的事物上。在这个例子中，漂亮的 RSS订阅按钮成为了焦点。且不说这个焦点让读者产生了与内容的联系感，它还能帮助网站获得更多的订阅量。鼓励你的读者探索你的内容相当简单，只需在边栏 上加一些最新文章或最受欢迎文章的链接列表，或者制作一个下拉菜单，或者组织一个其他你想要推送的内容的高效列表。做起来很简单，效果却足够有效，尤其是 对博客来说。博客是一个私人领地，通过不同的途径告诉读者你的联系方式(Connect)，能帮助他们了解你，也说不定会带来意外的好处。
组织内容小贴士
你当然可能会遇到需要打破常规，选用非同寻常方式的时候，不过你还是可以遵循这些简单技巧，以保证内容结构和阅读顺序的良好。
·你为何而设计？如前所述，确定设计的目标。
·利用网格：网格帮助你发挥页面的最大潜能。
·测试元素位置：以访问者的角度考察内容的易用性。
·移除所有不必要元素：不必要的东西都应该被消灭，或者至少不要放到显眼的地方。
·注意力的均衡：有些东西需要被简单化，好让另外的事物闪耀光辉。
5、自我克制与精妙细节
设计师总是在寻找制造冲击力的方式，总是想做一个独一无二的设计，创造些前所未有的效果。不过有时候通过自我克制也能形成冲击力。量变产生质变，过多的“好”也会带出不好的结果。好的设计师晓得平衡点在哪里，并且能避免让过多的特殊效果毁了一项设计。
Things网站上的柔和渐变
对 于我访问过的站点，我总是很关注他们的细微渐变。听起来可能有点恼火，不过我就是忍不住要去研究别人的那些小细节，以积累我将来设计时的灵感。渐变是最被 滥用的设计方法之一，不过运用成功的话，还是能让设计增色不少，它所能提供的真实感和深度感是其他技巧所不能达到的。大部分人都不太注意渐变，不过别人对 渐变的运用确实是我最好的灵感来源。
Icon Dock上的投影
Icon Dock的网站简直就是各种精妙细节聚在一起开大会。像素级高光，渐变，以及投影。不过在这里我们只关注它的投影。不是很大，透明度也被调高，小心翼翼地烘托着内容区块，让其成为真正的焦点。实在漂亮~
精细的背景材质：Scouting For Girls
材 质性背景要么成全你的设计，要么毁掉你的设计。很多复杂的背景除了分散读者注意力，没有带来任何好处。最终使得设计品质大为降低。所以，最好还是一直保持 你的背景材质细微而柔和。Scouting for Girls的网站在运用材质打造整体风格和设计品质方面做得极好。
做旧与撕碎的启发：Viget Advance
我 从来不觉得越细微越好，任何细节的“细度”都以可见为前提。可能人们并没有清楚地意识到，不过这些细节必定确实产生了影响。博客Viget Advance的例子中，在做旧与撕碎效果方面，能给我们一点启发。只是非常细微的做旧，不过如果没有这效果，这张人造纸就会显得平淡无奇，枯燥乏味了。 正是这些小小的“不完美”让这画面显得更可信，更真实。
WebDesignerWall上的水彩效果
使用水彩效果的时候，关键是要确保颜色混合得足够柔和，浓淡变化适宜，而且…足够“水”。水彩效果为你的设计提供很多好处：精细而和谐的多种色彩，感染力极强的材质感……正因如此，越来越多的设计师选择了在他们的设计中创造水彩效果。
精妙的植物：Dara’s Garden
下面是一个充满智慧的关于精妙植物细节的设计。网上还有很多更加栩栩如生的植物图案，而且也非常漂亮，不过这个例子中，我关注的是背景上那些更清淡更微妙的细节。这个例子展现了细节的重要性，柔和的色彩，做旧的效果，唤起你对细节的感知，不过却并不形成为主要焦点。
运用精妙细节的小贴士
我认为，精妙细节能让一项好的设计升华为灿烂夺目的设计。如果你还在寻找让设计与众不同的方法，精妙细节是个不错的尝试方向。 以下是关于运用精妙细节的小贴士：
·创建细节图层：不要在一个笔刷或材质上吊死，多加些图层，多做点细节。
·尝试不同透明度和色彩：有时候只有 3% 的不透明度也能产生正面影响。
·拒绝缩手缩脚：不要担心太多细微，或者太不明显。
6、 发挥色彩的全部潜能
设计师一般喜欢按照自己的品味来选择颜色，这可实在太不专业了。要决定哪种颜色是最适用的，你的脑子里想的应该一直是品牌需求，然后选好色彩的搭配组合，指定其专属的主题和目标情绪。
网页设计中色彩运用的绝妙例子，无趣并不代表无色：Oypro
Oypro的 网站让我喜欢的地方是，他们告诉了我们，一项“无聊”的行业相应的设计并不一定也得“无聊”。通常企业的网站都不允许设计师有太多视觉创意上的发挥。保持 简单、单调、淡彩色成了不成文的规定。不过Oypro的例子证明，不用束缚自己，你也能创造出一个有足够“企业感”的网站。
让色彩相互联系：Tennessee Summertime
Summertime in Tennessee(田纳西州夏日观光) 是一个充满活力的、明亮的，非常温暖的站点。所有一切看起来都是为了推送夏日活动而设计。该站点使用了非常多不同色相的高饱和度色，但每一种颜色都切中要 害，没有一种是不适合主题的。高品质设计的色彩搭配必定与其要呈现的服务或产品密切关联。好的设计并不总是需要费尽心力选一些出奇制胜的颜色，那些最明显 最该用的颜色反而能创造更好的效果。比如说Hell Design(地狱设计)，不用象征地狱的火红色简直说不过去。
背景还可以大作文章：Saturized Studio
只 涂一层单调的背景色可没法让你的设计变得有趣。有一点变化的背影才是最好的背景。此例中我们看到，漂亮的橙/红色被运用到各种各样的光照和渐变效果中。这 种为背景增加变化的做法，有效避免了平淡和沉闷。另一个需要特别注意的地方是，暗深橙色背景与上层明亮内容区的对比产生了非常戏剧化的漂亮的视觉冲击。
在网页设计中运用颜色的小贴士
颜色永远是值得探索和尝试的区域。尝试不同的组合变化能为设计带来无限可能。不过选择颜色和色彩搭配时，应该做到对下面的要点心中有数：
·尝试突破：无趣的主题并不一定得使用无趣的色彩组合。
·多变：尝试在你多彩的背景上使用渐变、重复图案、笔刷，光有颜色可不容易让设计显得好看。
·坚持主题：确保你的用色与你需要呈现的产品/服务有关联。
7、做别人没做过的事
最好的网站中有一些非同寻常的，奇怪的，甚至可以算得上诡异的设计。不过那些挑战传统的尝试说不定会已经改变了传统的定义。话说回来，要做到完全原创，创造出没人做过的东西实在是设计过程中最难做的事。
打破常规之后，成功与失败只有一步之遥。你要么做出令人惊艳的聪明设计，要么做出一堆垃圾饱受批评。别人从来不这么做是有原因的，因为有些点子实在是糟透了。要从人们知道并喜欢的区域走出来，你得非常勇敢才行。下面是一些相关实例：
MB Dragan 上的独特导航
不是你通常所见的站点导航，但看起来还是一个网站，同那些标准导航同样的好。这样做有点冒险，但结果非常符合该网站特质。十分切题的设计，很难让人不欣赏这导航与整个设计之间的配合呼应。
Visualbox(视觉盒子)非常视觉化的导航
Visualbox的网站只有一个目标，向你展示他们充满智慧的作品。所以他们没有用多少文字，你第一眼看到的就是他们的名字和作品选集。鼠标滑过预览图片时，会显示出项目名称，点击时会带你滑到页面中该项目的相应位置。这是非常高效而实用的解决方案，而且比简单地堆一个列表出来要吸引人得多。
废话不多说的Nikola Mircic
假 设你是位交互设计师，你需要别人看了你的作品，能感动得雇用你。Nikola Mircic为我们展示了“直截了当”对建造一个令人难忘的站点有多大的作用。一打开他的站点，各种风格的作品就向你问好，他的名字和职业放在页顶的醒目 位置，当然，联系链接没少。没有大量多余文字来劝说你雇佣他，作品本身就证明了他的实力。当然，点击作品缩略图会出现一个详细介绍页，里面就有足够的文字 了。实在喜欢他组织内容的方式。
实践新鲜想法的小贴士
上面的例子并不是为了“激发”你的独特创意，只是一些我发现的一些很独特的站点，仅此而已。事实上，你也不应该到处搜寻，寻找新想法的灵感，因为这样你的点子也是受别人的启发，与完全创新是相悖的。所以如果你打算做真的非同寻常的东西出来，就赶快忘掉这一部分！
保证事物之间的联系：如果你打算做一些特别特别特立独行的事，先问问自己“真的有必要吗?”，“这样说得过去么？”，“和品牌诉求符合吗？”……如果答案是肯定的，再采取行动！
忘掉所有已知事物：好吧其实也并不是所有，基本原则还是要的。话说回来，也没必要从全新的想法里面寻找灵感，因为那样很容易误入歧途。
保证品质和水准：基本上我觉得如果你的新想法足够好，判断品质究竟如何对你来说应该很容易。
来源: 7招提升网页设计品质
文章转载自：菠菜博 [http://www.bbon.cn]
一个高效的 Web 设计者，不可能只是依靠仅有的几个常用设计工具在工作，他一定有一个自己收藏的工具箱，这些有效的工具，可以配合设计师更好更高效地完成既定工作，因为这些小工具的功能针对性更强，可以更合理地帮助设计师进行高效的开发。
所以，这里为有类似需求的 Web 设计师整理了常用的25个设计工具，包括在线色彩搭配工具、CSS框架工具、Javascript工具、浏览器兼容性工具等。收藏起来作为日常工作的补充，相信不久你就会离不了它们了。
1. HTML Entity Character Lookup
一个 HTML 字符查询功能，可以帮助用户更快地找到某些特殊字符。
HTML Entity Character Lookup
2. Blueprint CSS framework
一个优秀的 CSS 框架，更合理的设计组织 Web页面。
3. Typetester
The Typetester 是一个在线字体比对应用，帮助用户更合理地选择适合的字体。
4. Em Calculator
Em Calculator 是一个简洁的JavaScript工具，帮助用户实现可扩展的可访问性的 CSS 设计。
5. Web Developer Toolbar
一个Firefox插件，是Web开发人员必备的工具。
6. MeasureIt
一个Firefox插件，用来测量Web页面中某个原色的高度和宽度。
7. ColorZilla
一个高级拾色器。非常实用。
8. Firebug
Firebug，一个整合到 Firefox 浏览器的插件，可以在浏览器状态下，调试你的网站，包括 CSS, HTML, JavaScript等，
9. Designers Toolbox
一个不能缺少的 Web 设计工具箱，提供Web文档大小和印刷尺寸等必备信息。
10. What the Font?
提交一张图片，让 WhatTheFont 找到最匹配的。
11. Easy Web Form Builder
一个在线Web 表单设计生成工具，可以整合网站数据。
12. Browser Shots
在线浏览器兼容性测试工具。
13. Icon Finder
一个优秀的在线Icon图标搜索引擎，帮助你更快地找到所需的图标素材。
14. Button Browser
又一个精致按钮图标设计工具。
15. Rounded Corner
DIV圆角工具，几个简单的数据，就可以生成对应的HtmL圆角代码。
16. BlogFlux Button Maker
在线Web按钮设计工具。
17. Vecteezy
下载或其免费的Icon图标、矢量图形素材.
18. Background Image Maker
在线创建背景图工具。
19. Photoshop Brushes
Photoshop brushes ，免费下载Photoshop笔刷。
20. Tartan Maker
Tartan Maker，一个创意应用，对热爱时尚设计的用户是个吸引。
21. Color Schemer
ColorSchemer 是一个专业的色彩搭配应用服务，在线为用户提供专业的高级色彩调试。
22. Webs
免费创建自己的网站。
23. Sampa
每天都有成千上万的人用Sampa创建个人网站、家庭网站或者幼儿网站。
24. Format Pixel
创建在线杂志、小册子、目录表、简历等。
25. Weebox
基于Flash的网站创建在线工具。
文章转载自：菠菜博 [http://www.bbon.cn]
开发web应用程序是一件非常辛苦的事情，你需要花大把大把的时间来做无数的事情。假如你不运用有条理的方法，尤其是在复杂的项目中，你会承受忽视项目，不能按时完成，浪费时间一无所获的风险。
这篇文章中，结构化过程的插图可以帮助你运用简化的方法更加节省时间更加有效的建立你的web开发程序。
下载 Woork Papers N1幻灯片 |你需要知道的开发Web应用程序的结构化过程
工序的主要阶段
一般的web应用程序开发流程分为五个主要的阶段:
1. 明确需求
2. 设计
3. 执行
4. 测试
5. 发行
规划与跟踪监测是一个“跨阶段”的跟随开发发展的过程，定义一个在项目执行期间你需要跟踪监测的项目计划活动名单，并且每项活动需要定义一套行之有效的信息报告来进行跟踪监测，例如：
- 拥有者
- 持续的时间
- 所耗
- …
看一看这些前一段我所写的文章，怎样使用Excel或者Google制表软件设计制作项目实施计划：
How to organize a project plan 怎样组织项目规划
Excel Gantt chart template Excel图表设计绘制模板
Implement a project plan and manage activities with Google Spreadsheets 使用google电子表格实施并灵活管理项目规划
1. 需求定义
在这第一阶段你必须确定范围和Web应用程序的需求，在你的应用程序中必须做的，主要特点和技术要求：
范围
为了确定Web应用程序的范围,足以编制一份明确说明适用功能的详细清单。目前重要的不是“如何”实现他们，而是“什么”需要实现！
需求
需求分析需求分析是一个开发过程的关键组成部分。在这一步中你需要估计潜在流量，选择一个服务器端语言（ PHP， ASP， Coldfusion …),数据库，选择一个托管服务…这里需要非常注意不要高估 /低估预期！准确的平衡的预估时间，成本和目标之间每件事情！
2. 设计
在需求定义阶段，你需要明确的规划“设计”你的应用。在这个阶段，可以按照以下步骤：
设计: 应用图
应用图包含对应用有意义的和必要的结构信息：页面（用区块表示）和他们之间的主要关联。你的应用图可以像这样：
通过这种方式，您拥有了有关一些“位置” （页）和“路径” （关系页）的图，您可以非常容易的遵循它，逐页，以执行应用程序的下一阶段。运用这种方式，可以节省大量的时间，并明确什么是你需要执行的。
设计: 数据库
Ok,现在到了设计数据库的时候了。一个简单的实现方法是使用实体关系（ER）模型 。一般来说，你可以俺咋好下面的顺序：定义第一个表确定第一个表，而不是属性和关系的表格。您的ER模型将是这样的：
1:1表示集的关系（在这种情况下，例如1用户只能分派1的任务， 1个用户只生活在一个城市） 。欲了解更多有关这一主题的内容，来看看我的旧文章：
Define the entities-relationships model 定义实体关系模型
A correct approach to define relationships between database tables 正确对待，以定义数据库表格关系
10 Useful articles about Database design 十篇有用的数据库设计文章
设计: 页面结构
下一步工作是设计大体的页面结构，用名称命名确定所有的主要部分 (例如 #header, #navbar, #mainContent, #sidebar).
设计: 服务端语言
使用面向对象的开发方法进行开发，你可以定义类，函数和所有你所需要的，记住… 那不是“执行”只是下一阶段实施的“指南”.
设计: JS 框架
这一步选择JavaScript 框架(jQuery, Scriptaculous, MooTools…), 通过确定主要的特点和所需实施的效果（拖放，动画效果… ）编制简单的关于在一个或多个网页中有关联的每一个具体功能应用图的列表。
次点设计阶段已完成。让我们实施吧！
3. 实施
Ok.. 现在是真正的挑战的开始，因为“执行”才是实现应用。您可以划分这一阶段为以下几个步骤:
执行: 数据库
创建一个新数据库，写SQL代码定义表，属性和关系。看看下面的，过去我致力于一些有关此主题的文章的链接，以获取更多信息：
How to use PHP and SQL to create DB tables and relationships 怎样使用PHP创建DB表和关系
Create tables and relationships with SQL 使用SQL创建表和关系
执行: HTML
使用在设计阶段定义的页面结构实施 HTML 代码:
<div id=”navbar”> </div>
<div id=”mainContent”> </div>
<div id=”sidebar”> </div>
<div id=”footer”> </div>
此时添加所有在设计阶段定义的所需要的HTML元素。例如，如果mainContent部分包含一个标题，文字和文章的标签后，添加这些内容：
This is the moment to add all HTML elements you need in sections identified during Design phase. For example if the sections mainContent contains a post with a title, a text body and post tags, add these elements:
<div id=”navbar”> </div>
<div id=”mainContent”>
<p><!– Text body –></p>
<small><!– Post tags –></small>
</div>
<div id=”sidebar”> </div>
<div id=”footer”> </div>
实施: CSS
当主体结构已经准备就绪，开始编写CSS代码添加样式。如果您需要一些如何撰写更好的CSS代码建议，请看看这些文章：
CSS coding: semantic approach in naming convention CSS编码：语义的方法命名惯例
Useful guidelines to improve CSS coding and maintainability 有益的改善的CSS编码和可维护性的指南
实施: 服务器端语言
实施应用类，应用功能,DB互动，查询，以及一切需要服务器端的实现的交互。
实施: JavaScript
使用在设计阶段选择的框架（ jQuery ， Scriptaculous ， MooTools …)来实施Ajax的功能（拖放，动画效果… ）
4. 测试
在这一阶段需要“强调”的是。你的应用程序能在各种条件下执行（例如使用不同的浏览器） 。您的目标是在最后释放前检测和修复所有的应用程序错误。
请记住，这一过程需要有条理，需要极大的耐心！试验的每个页面和每个功能（在这种情况下还可以帮助理顺应用图） 。如果您测试过程中发现一个bug ，修复它修改代码并继续进行最后的代码审核（一个不可告人的测试）。
5. 发布
最后你准备好发布了！在测试文件夹中发布并做最后的测试，假如一切都OK的话，那就进行最后的发布吧。
在Scribd上，阅读与下载此篇文章
下载 Woork Papers N1幻灯片 |你需要知道的开发Web应用程序的结构化过程
That’s all. 希望这篇文章能帮助到那些朋友，并要求我对这个主题做补充。
如果您有任何建议，以改善这一过程，请添加评论！谢谢： ）
VIA:Structured process you must know to develop a web application
文章转载自：菠菜博 [http://www.bbon.cn]
本书着重分析了目前网站建设中存在的一些问题，以及“Web标准”思想的产生、发展和推广，并从技术细节上讲解了网站实际制作和开发的过程中如何向Web 标准过渡，如何采用和符合Web标准。
本书的出版目的就是帮助读者理解Web标准，创建出用最低的费用达到最多的用户，并维持最长时间的网站，并且提供一些相关的技术和技巧。
本书是为了希望自己的网站成本变得更低，运行得更好，访问者更多的网页设计师、开发者、网站所有者及管理者写的。
畅销书作者、网页设计师、Web标准的“传教士”Jeffrey Zeldman已经对他震撼业界的经典书籍《网站重构——应用Web标准进行设计（第1版）》进行了升级更新。新版（现在原版书是全彩的）增加了在第1版出版之后各浏览器的发展动态以及为适应标准化设计所做的最新改进。
作者用幽默诙谐语言，把复杂的事情讲得简单明了，引人入胜。书的核心依然是指导我们如何建立一个显示的速度更快、能访问的用户更多、设计和维护成本更低的网站。Jeffrey Zeldman用他敏锐的分析来帮助我们了解Web标准如何促进搜索引擎变得更友好，以及Web 2.O的应用给网络媒体带来的新的活力。读者也将从本书学习到最新的、兼容多浏览器的CSS布局技术，学习到使Web内容有更好的易用性（accessible）的方法并将从中获益匪浅。
文章转载自：菠菜博 [http://www.bbon.cn]
作为设计主管，Peter Stern 已经领导 microsoft.com 重新设计了主页并且开发了五个不同的交互工具，这些工具被用于下载中心、产品目录、配置文件中心、 搜索 和注册等联机功能。 他为几个内部工具设计了用户界面，并且正致力于创建将于今年晚些时候发布的下一代主页。
从头衔上，您可能认为我主要关心的是 microsoft.com Web 站点几千个网页的版面设计。的确，这些确实是我所关注的。视觉上的吸引力是重要的，但是这仅仅是工作的一小部分。而最终的目的是确保整个站点运转正常。
我的意思是，人们通常在访问 microsoft.com 时，并未将它当作艺术作品来赞赏。而是为了获得有关产品的信息，或者有一些技术问题需要咨询，或是阅读有关开发商的期刊。所以网站的设计应该尽量清楚和有条理，以便他们能够容易地找到所需信息。
设计站点
在进行 Web 设计时–在设计过程中–形式应该服从功能。这种方法应用于我们站点的整个设计过程中。当然，我们有最新的 Web 工具，并且能够将各种可视的小配件上载到网页上。但是我们认为这样做将不利于为访问者提供有效的服务。
事实上，我经常发现一些站点未将重点放在功能上。常见的错误包括：
用户界面元素不一致。例如，同一个控件在不同的页面上功能不同，或者同一个功能对应几个用户界面控件。
导航栏位置不一致。决定站点的哪些页和功能需要在站点的任何页上都可被访问到。这就是应该保持一致性的“全局导航栏”。
不太注意或根本不注意基本的图形设计原则。例如排版式样、色彩和版面的设计。
相关元素和功能的随意分组。注意将元素放置在网页上的位置和目的。这可帮助访问者从其它相邻的选择和位置来推断某个链接的功能。
使网页过于庞大以至使访问者需要通过典型的调制解调器速度的 Internet 连接进行长时间的下载。这并不是说不应该使用图形，但是您需要对它们进行精挑细选，然后用适当的压缩和颜色索引优化它们。
现在的 Web 站点仍然存在很多问题，这并不奇怪。毕竟，Web 设计“艺术”相对来说还是个新生事物。在四、五年以前，Web 页甚至是普通的。那时，人们好像认为他们的 Web 站点将会吸引访问者只是因为它们存在–并且，可能在某些情况下这种方法确实有效。但是这些站点一般很难看，并且更重要的是，它们真的难以使用。接下来便 进入“看看我们能做些什么”阶段，在网页中加入了大量的动画、声音文件以及其它附加件，导致访问者需要长时间地进行下载，但是并未获得多少实实在在的内 容。
如今的 Web 设计师们已经吸取了前人的经验和教训。好的站点倾向于简化和快速，同时在功能上有所提高。这是 Microsoft 的目标，而且我们最先承认自己所犯的错误（参阅“Microsoft 的 Web 简史”看一看以前的主页设计）。
设计错误并不总是显而易见的。有时在设计上对一个小元素的移动或更改将有很少或根本没有影响。但是，在其它情况下，它可能确实会对页面功能有所影响。而且如果说我们从过去几年学到了一些东西，那就是小的改动会使 Web 页的运行方式有很大的不同。
明确的流程
若要避免类似问题，我们为新服务（例如“搜索”）的创建或关键的 Web 页（如主页）设计了一个明确的流程。 每个项目都是在一定的基础上开始的，即我们有一个受益于我们站点上的页面、部分或用户界面元素的产品或服务。在早期的产品计划阶段（第 1 阶段），我被要求设计一些初级模型：大致描述页面、部分或功能的草图。然后产品项目组检查产品计划建议，看看此项服务是否可以为 microsoft.com 的访问者真正带来一些实惠。
如果答案是“可以”，那么此项目会获得批准，我们开始写项目说明书（第 2 阶段）。我们在第 1 阶段的草图和概念基础上创建并提出一个更为完整的计划。这时，我们一般还会开始可用性测试（一般会有书面的模型）以了解潜在用户将对计划中的设计做出何种 反应。 在最后开发阶段（第 3 阶段），我们创建运行计划服务的 Web 原型，并且进行全面的可用性测试以及内部复查。然后完成站点的代码，修改程序错误，最后站点通过实际运转的 Web 站点向客户发布。
正 如您所见到的，可用性在整个流程中扮演着重要的角色（参阅“创建有效的 Web 界面需要认真计划”）。我们可以为用户运行某项任务计时，这样我们就可以在产品以后的版本中对比相同的测试。我们可以使用这种方法进行度量，以确定一个功 能的重新设计是否为客户带来任何真正的价值。
还有，我们将仔细地观察以了解可用性对象是否可以计算出如何正确使用新功能–我们称为“可 发现性”的方法。有时这为我们提供了一些挑战。例如：在我们的站点上，在 搜索引擎 中键入一个词组或字会产生一列结果。然后我们请用户选择在这些结果中进行搜索，以便进行更细的搜索并且导向某一页或资源。但是即使“在结果范围内搜索”被 明显地标记在深色标签上，很少有人熟悉它。一些用户认为他们正开始新的搜索，并且可能毫无结果。我们正在解决这个问题以确保客户可以利用 microsoft.com 上所有丰富的功能来提高他们对此站点的认识。
选项“在结果范围内搜索”看上去很直观，但不是非常易发现的。此问题一直是困扰我们的设计的问题之一。
最后阶段
大体来讲，站点设计是在发生冲突的需要之间求得平衡的艺术。一方面，我要将站点设计得尽量简单易用。另一方面，我要确保站点中所有强大的工具可为经验丰 富的用户所用。与此同时，我还要为内部客户服务–Microsoft 产品项目组–他们对服务有特殊的需要。所以每天我都要解决一些非常困难的问题，经常处于很紧迫的情形中。我发现这种工作是鼓舞人心和有趣的。
这个职业非常需要更熟练的专业人员。我是经过一系列非常不一般的过程–在大学学习图形艺术，然后在多媒体公司设计 CD-ROM，最后加入 Microsoft 并开发应用程序–才获得这个职位的。非常奇怪的是，当我申请（并获得）这份工作时，我以前从来没有设计过 Web 页。但是我广泛的设计经历已经证明是非常有用的，并且我自认为已经验证了格言“成功的设计就是成功的设计”（不论是什么媒体）。许多设计问题对 Web 来说是独一无二的，解决这些问题的方法对于任何媒体都是一样的。
对于那些准 Web 设计师我的建议是，他们也应该尽可能地扩大设计背景。今天应该确保将一些 Web 工作作为互动设计培训的一部分–大多数好的设计学校已将其加入课程中。但是在排版、色彩理论、版面设计以及生产等方面的扎实的技术将仍然特别有价值。 在未来，Web 设计师们仍将会继续被要求给页面增加更丰富的多媒体内容，从而为 Web 站点的可视性和可操作性增加了新一级的复杂性和技术要求。作为 CD-ROM/多媒体设计师，要求我必须具有图形设计、视频、音频制作、动画等方面的知识和创作能力。我的预言是，Web 设计师也将向这些领域发展。
对于属于 microsoft.com 的我们–以及在 Internet 上的其它地方–那应该是一个非常有趣的未来。
了解您的观众
调查一下究竟哪些人在访问您的站点，以及他们为什么要访问。新手或不定期上网的 Web 用户与软件开发商相比有非常不同的兴趣和站点需要。 使您的站点对访问者来说有所帮助。
为您的观众提供所需的信息
使导航元素保持一致，并且确保对访问率最高的区域进行明显的标记，是它们易于被找到。
使用清楚的消息
确保用户了解此页面的上下文，并且知道需要他们做些什么。如果在注册过程中您要用户输入姓名，那么就直截了当地说。不要让访问者自己计算什么，他们会感到沮丧，于是转到其它更简单的站点（例如您的竞争对手的站点！）。
保持一致性
虽然更改不同 Web 页的外观并不难，但这并不意味着您应该这么做。将主要功能–例如返回“主页”的链接或者执行一个搜索–放在每页的相同位置。在 microsoft.com 上，黑色全局导航工具栏的位置在四十多万页上都是一样的。
使站点可用
牢记设计和测试站点的可用性。确保用户可容易地执行任务以获得所需信息。估算任务时间和任务完成率，然后努力进行改善。如果新的设计没有在这些方面获得改善，那么就不要实施它。重新从草图（或最初的计划）开始并尝试其它方法。
保持简洁
说起来容易做起来难。尝试征求反馈意见。 有时新人可以很容易找到解决方案。
尝试新的东西
不要害怕打破常规，尝试一些完全不同的东西。如果您不试试，永远不会找到真正的答案。
文章转载自：菠菜博 [http://www.bbon.cn]