Group items tagged

栅格设计系统（又称网格设计系统、标准尺寸系统、程序版面设计、瑞士平面设计风格、国际主义平面设计风格），是一种平面设计的方法与风格。运用固定的格子设计版面布局，其风格工整简洁，在二战后大受欢迎，已成为今日出版物设计的主流风格之一。

网页栅格系统下的定义为：以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。

信息架构设计的思考方式1. 自上而下，在定义网站的整体结构前，先广泛了解商业意图和用户需求，最后来才考虑具体内容之间的关联。2. 自下而上，先理解内容的联系，通过遍历，剧情设计等手段，让该系统能够满足特殊用户的需求，然后才考虑更高层次的结构需要支持这些需求。

分阶段的方式建立有效的信息架构1. 理解客户需求，背景和用户需求，阅读所有的现有文件，与利益群体作沟通，并且做出内容清单。 2. 引导测试用户参与卡片分类活动。 3. 通过卡型分类活动评估之前设计的分类，从中寻找分类的趋势。     合理划分类别的重点和相关的次序，通过分析找到工作流程的梳理过程。4. 做一个信息架构的草案出来。 5. 使用卡片评估的方式来测试设计出来的架构。     我们的卡片是每个流程的重点，信息架构草图是流程的框架，两者结合验证工作的重点是否有偏离；有计划还可以请相关人员进行可用性测试，对用户角色调研起到很重要的补充；6. 不要对第一次设计就成功带有过多的期望，寻找合适的措辞和分级可能会需要好几次重复的设计与评估。     可以分三次考虑，首先，初稿，了解信息架构的粗框架，类似与uml图示； 再次，从下到上的梳理用户的需求和流程的衔接；最后，从上到下，整理导航和系统使用框架，确定信息架构； 7. 把信息架构记录成网站的地图，当然这不是最终的网站地图，只有页面设计都完成以后，网站地图才会定稿。8. 使用剧情设计测试你的网站设计。(情景模拟)9. 让开发团队的其他成员也参与剧情设计和遍历，并且与他们分享测试的结果。10. 如果有可以，在进行正式开发之前，多做一些纸面原形或者低拟真原形的测试。.       通过visio制作demo 11. 建立一些文档，把关键的用户操作点都标注起来，这样可以给视觉设计和程序开发人员一些提示，保持开发能够充分利用前期设计的结果。

设计过程中的产品有很多方法来记录信息架构设计的结果和收获，这里有几种常用的：1. 网站地图，它可以很好的表述一个网站的组织结构，但不一定要反映导航的结构。2. 带有注释的页面设计，页面设计决定了页面上的导航，内容，功能等元素，视觉设计和程序开发者可以根据这些注释更好的理解设计意图建立整个站点。3. 内容矩阵，站点所有的页面都放在一个内容矩阵里，并且为每一个页面都定义了应该显示的内容。4. 页面模板，页面模板在设计大型的站点或者企业内部站点的时候才会需要，它定义了某一类页面的内容的类型，全局的导航，栏目内的导航灯等。这个东西使用最多的就是CMS，内容管理系统。

理性 基于科学考虑的功能性图形设计也就是我们经常讨论的GUI，它主要服务于系统化平台的交互系统，协助、指导用户顺利完成期望的任务流程，一般我们接触到的视觉设计元素包括： 图片按钮； 导航设计； Banner动画或静态设计； 表单样式设计； 表格、数据、文字表现设计； logo设计 以及图形化不强的页面文字排版、空白布局设计

为什么现在有很多GUI都想转行做UI或ID(interaction design)，而忽视视觉设计的价值？我觉得这里面有下面几个原因： 市场恶性竞争，促使视觉审美下降，从而导致创意制作的贬值。所以，除去个别优秀的视觉设计师，处于中间或下层的设计师很容易失去自我价值的鼓舞而放弃自己的初衷，希望能够寻觅一个新的行业方向。而根据现在的市场需求，UI、ID应该是一个比如容易切入的方向，毕竟通过理论的补充，可以在很短时间内有效的提高设计师自身的设计理念而适应新的行业需求。 还有一个原因也是上面提到的市场需求决定了设计师对可用性和用户体验的关注，目前大多数设计师都服务于综合性媒体的网络公司，这样也就局限了他们创意设计的需求，取而代之的更多是对实用性，高效性的页面设计要求，所以学习相关的理论知识以适应公司发展需求是非常容易理解的， 最后就是设计师本身的自我定位，据我所知，国内目前并没有一个很好的针对网页视觉设计或用户中心设计的专业培训，所以，入行的设计师未必都有很好教育背景，大多都是因为兴趣爱好或市场需求而不断调整自己在整个行业中的角色，就业的需求，再加上诸如UCDCHINA理论资源的不断涌入，让很多本就不成熟或说对自己职业方向不明确的设计师，看到新的适合空间，所以这样的转行也是完全可以理解的。

感性、个性 再说说基于视觉艺术考虑的视觉冲击设计，这类型的设计自由空间大，没有太多理论约束，更多体现出个性元素的概念，其多运用于概念产品、时尚产品、游戏娱乐等独立站点或个人Portfolio Gallery站点里。 上图是来自http://www.rhythmoflines.co.uk/   尽管我们不断推崇务实的简约设计概念，但是另类的创新艺术表现还是不时的冲击着我们不断变化的行业趋势。这类设计的好处在于： 容易创新出新型的交互设计模式； 增加产品自身的品牌价值，也就是我们所说的“化腐朽为神奇” 深刻的视觉冲击，有利于品牌形象的传播； 具有艺术收藏性，树立流派典范； 激励不同类型的设计尝试； 不过如果从实用性来考虑，它可能也会存在下面的不利之处： 生存周期相对较短，也就是高投入未必能带来长期利用率； 浏览文件大，需要更多下载时间，如果平衡的不好，很容易起到负面效果； 兼容性考虑不够，比如插件要求，分辨率要求等； 目标群体的局限性； 总的来说，根据具体运用和项目的商业策略的不同，我们在设计管理上也应该做相应的平衡，是提高有效的视觉传达？还是个性品牌的冲击？ 这就如同我们在科学与艺术直接需要平衡点一样。

我们使用网站，这一切的活动事实上都是在围绕着一个东西：信息。扩展开来，我们的一切活动都是在围绕着信息做交互。

心理学家齐客森米哈里(Mihaly Csikszentmihalyi)将这种关注的注意力称为“精神能量 psychic energy”。就像我们日常生活中的能量一样，没有能量就没法工作，每次工作就会消耗能量。我们都应该有过这样的体验：有段时间，我们会全身心地投入到 某种事情中，将我们的集中注意力完全集中在这件事情上，所谓的废寝忘食。齐客森米哈里把这个状态称为“心流 flow”。心流是：忘我、忘记时间、忘记其他所有不相关的东西，完全沉静在某项事物或情境中。

我们并不需要去学习专门的课程或者使用新的软件来为心流而设计。事实上你也许已经踏上了为心流而设计的道路。开始心流设计之路，就是去考虑每一步交互之后应该出现的结果，然后，去掉那些影响用户达到这个预期结果的所有阻碍。

IE Tab浏览器兼容是所有Web开发者都要考虑的问题,IE Tab能够让您再Firefox中以IE的渲染方式来呈现页面,并且可以方便的在两者之间切换。

Style Sheet Chooser IIStyle Sheet Chooser II 允许浏览者或开发者迅速的在为同一页面编写的不同样式之间来回的切换,甚至能够保证被选择样式应用到该站点的全部页面上. Style Sheet Chooser II 会覆盖Firefox内置的样式表切换器[style-sheet-switcher].你可以用多种方式来调用它:a. 通过"查看"[View]->"页面样式"[Page Style]下面的选项;b. 通过工具栏[Toolbar]的一键切换;c. 通过状态栏[Status Bar]的图标按钮;小提示: 是否在状态栏和工具栏中显示图标,可以在扩展偏好[Extension Preference]中设置

CSSViewer一款小巧的CSS属性查看器,随着鼠标的移动显示当前所指示元素的CSS样式信息,其中包括了所有从父级元素继承而来,用户自定义以及浏览器自定义的样式信息. 同Style Sheet Chooser II 一样,你也可以通过在工具栏添加该扩展的图标按钮来激活/禁用该扩展。

内容指标指的是衡量访问者的活动的指标，商业指标是指衡量访问者活动转化为商业利润的指标

网站分析的商业指标 平均订货额　Average Order Amount (AOA) 计算公式：平均订货额＝总销售额／总订货数 指标意义：用来衡量网站销售状况的好坏 指标用法：将网站的访问者转化为买家当然是很重要的，同样重要的是激励买家在每次访问是购买更多的产品。跟踪这个指标可以找到更好的改进方法。 转化率　Conversion Rate (CR) 计算公式：转化率＝总订货数／总访问量 指标意义：这是一个比较重要的指标，衡量网站的对每个访问者的销售情况 指标用法：通过这个指标你可以看到即使一些微小的变化都可能给网站的收入带来巨大的变化。如果你还能够区分出新、旧访问者所产生的订单，那么就可以细化这个指标，对新旧客户进行分别的统计。 每访问者销售额　Sales Per Visit (SPV) 计算公式：每访问者销售额＝总销售额／总访问数 指标意义：这个指标也是用来衡量网站的市场效率 指标用法：这个指标和转化率差不多，只是表现形式不同。 单笔订单成本　Cost per Order (CPO) 计算公式：单笔订单成本＝总的市场营销开支／总订货数 指标意义：衡量平均的订货成本 指标用法：每笔订单的营销成本对于网站的盈利和现金流都是非常关键的。营销成本的计算各人有不同的标准，有些把全年的网站营运费用摊入到每月的成本中，有些则不这么做，关键要看那种最适合自己的情况。如果能够在不增加市场营销成本的情况下提高转化率，这个指标就应该会下降。 再订货率　Repeat Order Rate (ROR) 计算公式：再订货率＝现有客户订单数／总订单数 指标意义：用来衡量网站对客户的吸引力 指标用法：这个指标的高低和客户服务有很大关系，只有满意的用户产品体验和服务才能提高这个指标。 单个访问者成本　Cost Per Visit (CPV) 计算公式：单个访问者成本＝市场营销费用／总访问数 指标意义：用来衡量网站的流量成本 指标用法：这个指标衡量的是你的市场效率，目标是要降低这个指标而提高SPV，为此要将无效的市场营销费用削减，增加有效的市场投入。 订单获取差额　Order Acquisition Gap (OAG) 计算公式：订单获取差额＝单个访问者成本(CPV)－单笔订单成本(CPO) 指标意义：这是一个衡量市场效率的指标，代表着网站所带来的访问者和转化的访问者之间的差异 指标用法：指标的值应是一个负值，这是一个测量从非访问者中获得客户的成本。有两种方法来降低这个差额，当你增强了网站的销售能力，CPO就会下降，这个差额就会缩小，说明网站转化现有流量的能力得到了加强；同样的，CPV可能升高而CPO保持不变或降低，这个差额也会缩小，表明网站所吸引的流量都具有较高的转化率，这种情形通常发生在启用了PPC(pay per click)的计划。 订单获取率　Order Acquisition Ratio (OAR) 计算公式：订单获取率＝单笔订单成本(CPO)／单个访问者成本(CPV) 指标意义：用另一种形式来体现市场效率 指标用法：用比率的形式往往比较容易为管理阶层所理解，尤其是财务人员。 每笔产出　Contribution per Order (CON) 计算公式：每笔产出＝（平均订货数Ｘ平均边际收益）－每笔订单成本 指标意义：每笔订单给你带来的现金增加净值 指标用法：公司的财务总监总是对这个指标感兴趣的，代表了你花了多少钱来赚多少钱。 投资回报率　Return on Investment (ROI) 计算公式： 投资回报率＝每笔产出(CON) /每笔订单成本 (CPO) 指标意义： 用来衡量你的广告的投资回报 指标用法：比较你的广告的回报率，应该把钱分配给有最高回报率的广告，但是这个回报率应当要有时间段的限制，比如“２５％ RIO/每周”和“２５％　RIO／每年”是有很大差别的。

网站分析的内容指标 转换率　Take Rates (Conversions Rates) 计算公式：转换率＝进行了相应的动作的访问量／总访问量 指标意义：衡量网站内容对访问者的吸引程度以及网站的宣传效果 指标用法：当你在不同的地方测试新闻订阅、下载链接或注册会员，你可以使用不同的链接的名称、订阅的方式、广告的放置、付费搜索链接、付费广告(PPC)等等，看看那种方式是能够保持转换率在上升？如何增强来访者和网站内容的相关性？如果这个值上升，说明相关性增强了，反之，则是减弱。 回访者比率　Repeat Visitor Share 计算公式：回访者比率＝回访者数／独立访问者数 指标意义：衡量网站内容对访问者的吸引程度和网站的实用性，你的网站是否有令人感兴趣的内容使访问者再次回到你的网站。 指标用法：基于访问时长的设定和产生报告的时间段，这个指标可能会有很大的不同。绝大多数的网站都希望访问者回访，因此都希望这个值在不断提高，如果这个值在下降，说明网站的内容或产品的质量没有加强。需要注意的是，一旦你选定了一个时长和时间段，就要使用相同的参数来产生你的报告，否则就失去比较的意义。 积极访问者比率　Heavy User Share 计算公式：积极用户比率＝访问超过１１页的用户／总的访问数 指标意义：衡量有多少访问者是对网站的内容高度的兴趣 指标用法：如果你的网站针对正确的目标受众并且网站使用方便，你可以看到这个指标应该是不断的上升。如果你的网站是内容型的，你可以针对不同类别的内容来区分不同的积极访问者，当然你也可以定义２０页以上的才算是积极的访问者。 忠实访问者比率　Committed Visitor Share 计算公式：访问时间在１９分钟以上的用户数／总用户数 指标意义：和上一个指标的意义相同，只是使用停留的时间取代浏览页数，取决于网站的目标，你可以使用两个中的一个或结合使用。 指标用法：访问者时长这个指标有很大的争议，这个指标应结合其它的指标一起使用，例如转换率，但总体来说，较长的访问时长意味着用户喜欢呆在你的网站，高的忠实访问率当然是较好的。同样的，访问时长也可以根据不同的需要自行设定。 忠实访问者指数　Committed Visitor Index 计算公式：忠实访问者指数＝大于１９分钟的访问页数／大于１９分钟的访问者数 指标意义：指的是每个长时间访问者的平均访问页数，这是一个重要的指标，它结合了页数和时间。 指标用法：如果这个指数较低，那意味着有较长的访问时间但是较低的访问页面（也许访问者正好离开吃饭去了）。通常都希望看到这个指数有较高的值，如果你修改了网站，增加了网站的功能和资料，吸引更多的忠实访问者留在网站并浏览内容，这个指数就会上升。 忠实访问者量　Committed Visitor Volume 计算公式：忠实访问者量＝大于１９分钟的访问页数／总的访问页数 指标意义：长时间的访问者所访问的页面占所有访问页面数的量 指标用法：对于一个靠广告驱动的网站，这个指标尤其值得注意，因为它代表了总体的页面访问质量。如果你有１００００的访问页数却仅有１％的忠实访问者率，这意味着你可能吸引了错误的访问者，这些访问者没有啥价值，他们仅仅看一眼你的网页就离开了。这是你应该考虑是否广告的词语产生了误解。 访问者参与指数　Visitor Engagement Index 计算公式：访问者参与指数＝总访问数／独立访问者数 指标意义：这个指标是每个访问者的平均会话(session)，代表着部分访问者的多次访问的趋势。 指标用法：与回访者比率不同，这个指标代表着回访者的强烈度，如果有一个非常正确的目标受众不断的回访网站，这个指数将大大高于１；如果没有回访者，指数将趋近于１，意味着每一个访问者都有一个新的会话。这个指数的高低取决于网站的目标，大部分的内容型和商业性的网站都希望每个访问者在每周／每月有多个会话(session)；客户服务尤其是投诉之类的页面或网站则希望这个指数尽可能地接近于１。 回弹率（所有页面）Reject Rate／Bounce Rate 计算公式：回弹率（所有页面）＝单页面访问数／总访问数 指标意义：代表着访问者看到的仅有的一页的比率 指标意义：这个指标对于最高的进入页面有很重要的意义，因为流量就是从这些页面产生的，当你对网站的导航或布局设计进行调整时尤其要注意到这个参数。总而你是希望这个比率不断地下降。 回弹率（首页）Reject Rate／Bounce Rate 计算公式：回弹率（首页）＝仅仅访问首页的访问数／所有从首页开始的访问数 指标意义：这个指标代表所有从首页开始的访问者中仅仅看了首页的访问者比率 指标意义：这个指标是所有内容型指标中最重要的一个，通常我们认为首页是最高的进入页面（当然，如果你的网站有其他更高的进入页面，那么也应该把它加入到追踪的目标中）。对任意一个网站，我们可以想象，如果访问者对首页或最常见的进入页面都是一掠而过，说明网站在某一方面有问题。 如果针对的目标市场是正确的，说明是访问者不能找到他想要的东西，或者是网页的设计上有问题（包括页面布局、网速、链接的文字等等）；如果网站设计是可行易用的，网站的内容可以很容易地找到，那么问题可能出在访问者的质量上，即市场问题。 浏览用户比率　Scanning Visitor Share 计算公式：浏览用户比率＝少于１分钟的访问者数／总访问数 指标意义：这个指标一定程度上衡量网页的吸引程度。 指标用法：大部分的网站都希望访问者停留超过一分钟，如果这个指标的值太高，那么就应该考虑一下网页的内容是否过于简单，网站的导航菜单是否需要改进。 浏览用户指数　Scanning Visitor Index 计算公式：浏览用户指数＝少于１分钟的访问页面数／少于１分钟的访问者数 指标意义：一分钟内的访问者平均访问页数 指标用法：这个指数也接近于１，说明访问者对网站越没兴趣，他们仅仅是瞄一眼就离开了。这也许是导航的问题，如果你对导航系统进行了显著的改进，应该可以看到这个指数在上升；如果指数还是下降，应该是网站的目标市场及使用功能有问题，应该着手解决。 将浏览用户比率和浏览用户指数结合起来使用，可以看出用户是在浏览有用的信息还是厌烦而离开。 浏览用户量　Scanning Visitor Volume 计算公式：浏览用户量＝少于１分钟的浏览页数／所有浏览页数 指标意义：在一分钟内完成的访问页面数的比率 指标用法：根据网站的目标的不同，这个指标的高低有不同的要求，大部分的网站希望这个指标降低。如果是搞广告驱动的网站，这个指标太高对于长期的目标是不利的，因为这意味着尽管你通过广告吸引了许多的访问者，产生很高的访问页数，但是访问者的质量却是不高的，所能带来的收益也就会受到影响

反 Box 式布局 单页布局 多栏布局  巨型插图与多变背景 更多留白 社会网络元素 讲解式导航菜单 Status elements (Flickr, Twitter et al) 动态 Tab  超大搜索框 Category visuals 作者头像图标 （这也算？-译者） 图标和视觉引导 Tag 索引 (取代 Tag 云) 插图风格 水彩风格 手写风格 怀旧风格 有机纹理或照片背景 证章风格 价格标签风格  条带风格

《Communicating Design》里面也有10种~ Personas 角色设计文档 Usability Test Plan 可用性测试计划 Usability Reports 可用性报告 Competitive Analysis 竞争分析 Concept Model 概念模型（概念图） Content Inventory 内容清单 Site Maps 站点地图 Flow Charts 流程图（交互流程图） Wireframes 线框图 Screen Designs 视觉设计、原型设计等

5、6、7可以在小型项目中结合，大型的项目中还是要适当分开。 交互原型可以以交互设计说明书的附件形式存在

1、产品概念文档(项目策划书) 主要是对市场需求进行合理的科学的推导，得出新产品机遇，并对产品定位以及未来的发展方向进行概念性阐述。产品概念文档主要用来对新产品进行宣讲，让项目团队对将要开发的产品有一个概念上的理解，在思想上达成一致。 2、用户调研报告 主要有两类，一类是产品概念形成之初，研究人员进行的需求调研而输出的报告。主要是为产品概念的提出提供科学的依据，为需求的推导寻找佐证。另外一类是项目开发过程中，对设计中不确定以及有分歧的地方进行用户测试，得出结果并输出用户测试报告。 3、产品需求列表 这个列表并不一定是文档，但是他非常重要。它是将新产品拆分成几个大的模块，并将这几个大模块再细拆分成各个功能点后形成的功能列表。它的用途是将整个产品的工作量化，利于设计师、开发人员、测试人员评估自己的工作量，利于开发过程中对各个功能点进行跟踪，不遗漏，利于产品测试时对产品进行全面覆盖。 4、产品说明书 产品说明书是目前很多公司中最常见，他主要包括产品功能的详细描述，产品所需要的开发、运行环境，性能要求等等。准确的讲，这份文档并不应该包含具体的交互内容。这个文档面向的是项目的全体成员。 5、交互设计说明书 交互设计说明书对整个产品的界面结构、交互流程进行详细的描述。它一般包括需求分解、竞争产品分析、流程说明、页面布局说明等内容。交互设计说明书的格式众多，灵活性也相当高，但目的都是将产品的结构和及流程形象化。交互设计说明书主要面向开发人员和测试人员。 很多公司将交互设计说明书和产品说明书结合在一起进行撰写，其实这种做法并不是十分合理。通常情况下，产品和设计结合的文档结构非常庞大，非常不利于查阅，也不利于撰写，而且这种结合文档的很多内容对特定人员是无用的。 6、交互设计规范 交互设计规范主要是用来规范新产品中常规的功能、操作等内容，比如页面的标题规范、界面快捷键操作的规范、提示反馈信息的规范等等。 7、视觉设计规范 视觉设计规范主要是规范新产品中一些视觉元件的样式、页面边距相对边距、通用界面的页面框架等等，开发人员根据规范就可以自行开发一些通用界面。 8、开发文档 开发文档包括一些需求分析、系统架构分析、数据库分析、开发日志等等内容。开发文档主要用来作为开发团队的技术沉淀。 9、测试用例 测试用例指对新产品进行测试任务的描述，体现测试方案、方法、技术和策略。内容包括测试目标、测试环境、输入数据、测试步骤、预期结果、测试脚本等，并形成文档。 10、产品评估报告 产品开发完成后，应由测试人员撰写一份评估报告，对产品功能的实现情况、性能情况、bug解决率等问题进行综合说明和评估，来确定新产品是否符合发布标准。 上面的这十类文档是非常理想化的项目中才具备的，也并不是适用于所有的项目开发，但是，产品说明书、交互设计说明书、测试用例等几类文档是一个项目中不可能缺少的，他们是一个项目有效运行的核心文档。

1. “帮助页面“只是狭义的”帮助“，广义的“帮助”应该无处不在，它协助用户了解和使用网站

2 用户更喜欢在实践中学习，而不是通过“帮助页面”

3. “帮助”的设计应该从整个信息架构建设开始

1—logo：基本logo特征，符合logo设计基础（平面设计通用）显示器效果：清晰度，最小尺寸（因显示器分辨率而带来的，等同线下平面设计的印刷效果）2—文字：内容等级决定字体、字号大小、粗细；状态决定颜色（默认或者根据网站特殊统一）3—广告、内容图片：尺寸样式的定位，同一页面的和谐性，图片的优化，位置的节奏，大小对比。4—icon：品牌性，表达准确合理，设计手法（依据品牌性），一致性，作用：吸引，醒目，方便识别、理解、操作、记忆。5—可点击（button)：区别（不可点击），根据人的生活经验：厚度，可按，质感（实体联想），色彩（品牌性、统一性、对比性）；统一的样式大小（依据里面文字的内边距统一）6—背景图片：氛围效果营造，同产品的统一性，优化（品质大小，色彩信息，实现方案），7—图文排版：主图次文，图文节奏，空隙，模块化。8—当前状态：放大（形状），变色（反色、对比色、明度纯度区别色），链进链出后指定内容提示。9—交互控件：样式合理准确性（人对系统默认的认知和生活常规认知），状态（视觉表现样式和动作过程优化），创意。10—loading：内容关联性（loading前后的内容关联），无聊等待的乐趣，体积、面积优化，创意。11—用户反馈_ 成功、出错、提示、无结果：文案（明确、合理、人性化、创意），图形（明确、醒目、色彩的心理认知准确度）。12—动画效果：过程合理（模拟真实环境的合理化），连续，节奏感，用户日常动作表现，音效配合，创意。13—首尾设计：首（品牌宣传、自身特点、明确内容、气氛表达、创意。尾：呼应、节奏（与首），创意。14—适应屏设计（全屏设计）：最大最小屏幕的考虑（文字、图片的位置、折行效果）15—固定尺寸的栅格设计：合理的单元格（考虑黄金分割），单元格面积节奏，边距统一性16—demo设计样稿：对内容最多最少的考虑。17—页面：品牌性，基调元素一致性，复用性，节奏感、面积感，视觉第一吸引，引导浏览，点线面关系，素描原理（运用素描的基本规律来做页面）。18—阅读：背景对阅读（视力）的舒适度，内容与背景的对比舒适度

用户界面 I Like Your Color 输入URL然后它会抓出其中的颜色并用16进制表示。 CSS Multi-element Rollover Generator 使用CSS和一个图片创建出一个翻转按钮的样式。 CSS Rounded Box Generator Ruthsarian Layouts 6个CSS页面布局模板，包括颜色、标题等。 Bluerobot Layout Reservoir 2栏和3栏的CSS布局框架 Glish CSS Layout techniques 2、3、 4栏的CSS布局框架 The Layout-o-matic 输入页宽、栏数和padding，它会自动生成CSS和HTML的布局框架。 Little Boxes w3cn.org上提供的那些布局模板 Open Source Web Design 各种免费的完整页面模板 Web Builders’ Toolkit 更多的模版资源 Iconico Online CSS Scrollbar Color Changer List-u-Like 一个CSS菜单生成器：轻松创建采用li并兼容各种浏览器的导航菜单。 Nifty Corners: 无需图片的圆角矩形 Round Corner Stone/Icon (rcsi) V1.0 增强的圆角矩形 Xylescope 无需下载其他站点就能轻松分析其CSS代码。 W3C Core Styles Checkliste zur Webseitengestaltung Testseite zur Zeilenbreite

易用性检查 Accessibility Valet Demonstrator Bobby Online Service Cynthia Says OCAWA Web Accessibility Expert Torquemada 使用工具对页面进行一个完整的易用性分析方法测试，以快速辨别页面中哪些部分存在错误。 UI Site check 一个站点检查工具，只需要输入你的网址，便可以列出几十个验证器和易用性工具。 WAVE 3.5 Accessibility Tool 可以提供你页面上的易用性细节和错误方面的有用信息。他会用红黄绿蓝等几种图标来表示需要改进的页面部分。这些图标代表了你页面上有关结构、内容、可用性和易用性方面的问题细节。你可以清楚地看到当前页面上哪些位置存在问题。 Web-based Site Usability Checker WebXACT Quality & Accessibility Check 一个免费的在线服务，让你对单个页面进行质量、易用性和保密性问题的测试。 Will the browser apply the rule(s)? TAW - Test accessibilidad web

整理和优化 CSS Formatter and Optimiser 能让你选择你的CSS更易读还是更小。 CSS Compressor 使用这个工具可以压缩你的CSS使之提高载入速度和节约带宽。 Online CSS Compressor 多种途径来清理并压缩你的CSS，牺牲了可读性来获得相当程度的优化和尺寸的减少。 CSS Compressor CSS Syntax Checker for BBEdit and TextWrangler CSSTidy CSSTidy 是一个开源的CSS解释器和优化工具 CSS Tweak ~ Web Based CSS Tweaker! CSS Tweak 会优化你的CSS以减少文件大小和下载时间。 Clean CSS - Optmize and Format your CSS Format CSS Online 自动格式化你的CSS使之便于阅读和编辑 Online CSS Optimizer CSS Optimizer 优化并减少CSS的文件尺寸 Online CSS Optimiser/Optimizer 这个工具用于优化CSS代码。 Tabifier 使HTML和CSS代码变漂亮。 Webucator 有一个CSS参考手册，你还可以在上面测试你的CSS代码 CSS Centricle CSS hack浏览器兼容一览表 （就是w3cn.org 上的那个）

信息架构和任务分解结合起来做。

从人物角色开始。 你的主要角色的主要任务是什么？“搜索一套适合她的房子”？“浏览最新上市的汽车信息”？接着，她的次要任务是什么？“查看好友的更新”？然后，你的次要角色的主要任务是什么？“留意感兴趣的汽车促销信息”？……此时的任务分解不需要做得太细，只要做到心里有数就可以了。 接下来，把每一个任务点扩展成一个页面，想想用户在进行到这一步的时候，最需要看到、用到的是什么信息。比如，在搜索房屋的时候，主要角色最关心哪些属性？是房屋面积？位置？均价？装修？还是别的？ 然后，再以这几个最关键的页面为出发点，把主要角色的次要任务叠加上去，然后是次要角色的主要任务（有点拗口），一个页面的信息架构就自然而然地出现了。 但是，这个过程会遗漏信息架构中一个很重要的部分——导航。根据Jesse James Garrett在《THE ELEMENTS OF USER EXPERIENCE》一书中的定义，导航应该完成三个任务： 导航必须提供有意义的跳转链接； 导航必须要传达出各链接之间的重要级别和相互联系； 导航必须要传达出与用户当前所浏览页面的关系。

希腊Web 设计师Christos Chiotis 发表在 CssGlobe 的一篇文章，讲述了黄金分割率在 CSS 中的应用。黄金分割率是一个应用广泛的数学常数，大约为 1.6180339887。黄金分割率用在 Web 设计中，可以为设计带来更多视觉上的和谐。在一个简单的两栏式页面布局中，使用两个容器，第一个容器用来显示主要内容，第二个容器显示侧条。比如，页面宽度为 960 px，使用黄金分割率，主内容容器的宽度应该为 960 / 1.62 = 593 px，而侧条的宽度为 960-593=367 px。

在 Web 排版与布局中可以使用以下基本 CSS 设置line-height = font-size * 1.62paragraph margin = paragraph line-height * 1.62 / 2header’s margin-top = headers line-height * 1.62

Amazon 商品列表页的翻页 是五个网站中唯一一个区分访问过、没访问过的链接的颜色； 不需要“上一页”、“下一页”的时候就不显示； 第一页的链接永远存在； 告知用户列表总数量和当前显示的数量（Amazon有些页面将数量显示在列表顶部）； 不提供所有的页，上图中 400 页是极限，400 页之后的内容可以通过分类选择来缩小范围（同时给出提示）

Google 搜索结果的翻页 富有创意的设计； 不需要“上一页”、“下一页”的时候就不显示； “上一页”“下一页”的链接区域很大，容易点； 不提供所有的页，上图中 100 页是极限，100 页之后的内容或许可以更换关键词重新搜索，但是没有提示。

Flickr 照片列表的翻页 “上一页”“下一页”永远显示，但不同情况显示不同样式； 按了“上一页”或“下一页”之后则边框加粗（成为重点），引导你继续往下点； 告知用户列表的总数量； 数量少得情况下，提供了“最后一页”的链接（图上没有）； 可以访问到所有的页，可惜如上图所示超过一定的页码，显示上有问题（IE 和 FF 都这样）。

　　步骤一：数据调查          数据可以带来什么？对于各页面及路径的pv(产品),uv(用户)的总结，可以得到产品使用情况的一个大致概貌。　 　　 缺乏什么？不了解用户，不了解过程。 　　步骤二：用户访谈 　　有什么好处？产品和用户之间的联系，就像一个黑匣子。对用户的访谈，就是一个试图打开黑匣子的过程。 　　打开了黑匣子，我们就可以改造他们之间的路径。从而使两者无缝融合。就像是研究dna，对结构的研究可以重塑基因。反映到产品上，就是我们可以以用户的心理模型去创造产品，或者是用富于创造的产品去影响用户。 　　步骤三：产品分析 　　即使了解用户，是否能提出有效的解决方案呢？此时，对于相关产品的研究就会作出帮助。如果说对用户的需求，可以对产品有纵深的认识。那么对产品的分析，有利于横向去加深去产品的理解。为什么做同一个功能，会产生出两种不同的产品？差异表现在大体，也体现在细节，通过不断的比较，会发现产品各功能间，产品和用户间千丝万缕的联系。 　　步骤四：产品定位 　　定位本应在一个产品做出之前决定，可为什么我会在此阶段提出这个步骤呢？事实上，因前面工作的铺垫。只有了解了用户，了解了相关产品后，定位才会更加明确。最初时，时时需要一个定位，却感觉模糊，在此刻，就清楚许多。能否改变，看造化了~~ 　　步骤五：功能确认 　　基于对用户和产品的分析，此时会提出一些新的功能。从产品长远的发展，对用户使用的引导，以及易用性综合考虑，慎审地推出每一项功能。 　　步骤六：信息架构 　　产品的印象开始在脑海里浮现。此时，将信息注入到产品结构中去。导航，管理等是很重要的几项，需要格外小心。另外，不同的页面有不同的信息，以及页面与页面间的信息跳转，甚至是产品间的跳转，每条信息都需要经过审核。如果对产品没有帮助，或者对用户是负担，都不要向里加。 　　步骤七：页面原型 　　就个人而言，在页面原型阶段，除了用visio来画结构图，还是不自觉得要用ps去协助找感觉，这个过程，对自己而言也是一个迭代的过程。当然，之前那些阶段，使整个产品的结构都在脑海里快成型了，这个只需要把它落实到纸上。 　　原型的确认，需要坚持。如果是你自己做了这个过程，而且每一点都是经过思考的。那么就去说服来自各方的反对。事实上，你要相信，人们相信思考的价值，只要你付出了，就有回报，最怕没有付出天天在那里抱怨。 　　步骤八：视觉设计 　　不必多说了。可能会比较多，icon，字体，区域的划分，模块的统一，css的定义，风格的设定~~~所有的一切，都要体现前面工作所得到的东西。 　　步骤清晰，但其实中间的过程可能更有意思。

（1）网站栏目结构合理，栏目设置不要过于复杂；（2）网站导航清晰且全站统一，通过任何一个网页可以逐级返回上一级栏目直到首页；（3）网页布局设计合理，网站设计符合用户浏览习惯；（4）重要文字信息尽可能出现在网页靠前位置；（5）字体清晰，CSS风格协调一致；（6）最多3次点击可到达产品详细内容页面；（7）通过网站任何一个网页不超过3次点击可达到站内其他任何一个网页；（8）遵照搜索引擎为管理员提供的网站优化指南，通过网站结构和内容等基本要素的优化为搜索引擎检索信息提供方便，不采用任何被搜索引擎视为垃圾信息的方法和欺骗搜索引擎的方式；（9）网站首页、栏目首页及产品内容页面均有一定的文字信息量；（10）每个网页有独立的、可概括说明该网页核心内容的网页标题；（11）每个网页有独立的、与该网页内容相关的META标签设计；（12）每个网页有独立的URL；（13）产品内容页面URL尽可能简短且体现出产品属性；（14）产品/企业新闻详细内容页面是独立网页不是弹出窗口；（15）对于产品品种多的企业网站，要有合理的产品分页方式；（16）网站内容保持适当的更新周期。