UI设计黄金法则

1. 网页用户界面（WUI - web user interface） 

最佳设计经验与准则

• 以主页为基准，建立标准的层级结构
• 保持布局的一致性
• 将大版本的内容或过于复杂的任务分解为多个页面显示
• 将导航的选项限制在6个以内
• 为长时间的后台服务提供用户反馈
• 谨慎使用能吸引用户注意力的技巧

用户体验要素

• 使用优化过的高品质图片和图形
• 支持用户快速浏览器信息块内容
• 使用醒目的菜单和链接
• 避免页面刷新和持续的动画
• 使用准确高效的文字表达
• 力求简洁并善用留白

参考网站 www.freshbooks.com/

2. 无障碍网页（Accessible Web）

　　这种网页是适合残障人士使用的网页界面。 无障碍网页界面需要应对的四个主要障碍是： 视觉障碍、听觉障碍、行动障碍和认知障碍。

最佳设计经验和准则

• 使用语义化的HTML设计导航、内容和文本
• 在CSS里编写可以改变样式、字体大小等的脚本元素
• 前景色和背景色实现良好的对比效果。

用户体验要素

• 使用精简有意义的内容，保证词汇简单，段落短小精悍。
• 使用简单的、机器易读的词语，如‘home page’， 而不是‘homepage’。
• 一个页面一个表单，避免混淆内容。　　

3. 网站 （website）

　　网站是公司或者个人在网上的形象展示。 设计网站时要关注于用户的首要任务，规划网站内容，吸引访客，支持尽可能多的浏览器和平台。

最佳设计经验和准则

• 标志和公司名要醒目。
• 把标志颜色作为网站的配色主题，最多使用3种颜色。
• 创建信息丰富的网页标题、统一的头文件，规划出标志区域，页脚和导航。
• 通过良好的背景色对比平衡页面中的内容、图片和留白。
• 给出清晰的标签和网站架构导航。

用户体验要素

• 注意网站性能，页面加载时间应该足够快。
• 支持多种浏览器。
• 通过论坛、建议和反馈等功能来手机浏览器的意见。
• 如果提供搜索功能，保证他在显眼的位置并支持错误拼写。
• 允许调整文字大小，并提供打印选项。
• 避免弹出式窗口、框架和插件。

参考网站： sumagency.com 

　　此网站的设计非常美观，使用了网站标志的颜色作为主体色，导航设计明晰，在文字和图片之间留了很多空白区域， 所有的标题区、页脚和标志区域都用了统一的视觉风格。

4. 主页（Homepage）

　　主页是登录网站最先加载的页面。 

最佳设计经验与准则

• 在页面的视觉层次上使用独特的设计。
• 重点强调与用户相关的内容，采用以用户为中心的设计。
• 使用简单、清晰、易于理解的内容，避免使用缩写、感叹词和全部大写的英文字母。
• 避免页面滚动，把重要内容固定在滚动区域上显示。
• 避免使用需要安装浏览器插件的文件，如PDF和Flash文件等。

用户体验要素

• 清爽悦目、极致简约的设计。
• 保证用户很快找到并使用帮助功能。
• 避免采用带有纹理的、平铺式的背景。
• 清晰可见的联系信息。

5. 个人网站（Personal Website）

　　即以个人信息为主的网站。 个人网站是一个人在网络上的名片。它可以是独立的页面、静态网站，也可以是个人日记或博客。。。

最佳设计经验和准则

• 把姓名当做标志 --- 这是你的个人品牌符号。
• 把网页标题作为快速访问信息，方便被搜索引擎搜到。
• 对简历和其他需要下载的文件，使用不带空格的文件名称。
• 使用易读的格式化字体、标题和项目符号。
• 添加能体现个人风格特点的照片、证书和奖项的扫描件。
• 保持内容简介明了、大方得体。

用户体验要素

• 在主页的第一屏上写一些可以让人眼前一亮的东西。
• 能轻松访问联系信息。
• 测试所有的链接和文件下载是否可用。
• 不要使用框架、广告条或弹出窗口。
• 未完成的页面不要提供链接，不要出现‘正在维护中’之类的页面。

推荐网站 --- iLakshmi.com

　　

6. 单页网站（Single-Page Website）

　　即只有一个页面的网站。

最佳设计经验和准则

• 让标志和单行相对位置固定。
• 给页面中的联系信息配上地图。
• 让标志和导航相对位置固定。

用户体验要素

• 如果需要展示很多图片，请使用幻灯片展示。
• 确保返回顶部按钮始终处于正常状态。
• 为内容使用‘显示/隐藏’和‘显示全部/部分’的选项，以实现更好的可用性。

　　推荐网站：http://unicrow.com/

7. 博客（blog）

　　博客是一个动态网站，专门放置用户的个人日记或者某个团队的动态信息。

　　

最佳设计经验和准则

• 创建具有吸引力的自定义页眉和层次分明的主题设计， 实现独特的视觉感受。
• 使用用户熟悉的字体，保持文字格式整齐、可读。
• 为网站页面和搜索框使用浅色背景。
• 使用不超过1024像素的布局，尽可能支持更多的电脑浏览。
• 提供显示日历、日志归档和最近动态的侧边栏。
• 设计引人注意的‘联系’和‘订阅’链接，使得访客可以快速做出行动。

用户体验要素

• 优化博客主页使用的图片，以提升加载速度。
• 使用简单易用的导航（不超过6个），页面不要太长，以提升加载速度。
• 在简介界面提供作者的照片和真实的任务小传。
• 允许实时共享和评论。

8. 博客发布模板（Blogger Template）

　　blogger.com 为发布博客文章预先设定的布局样式。　　

最佳设计经验和准则

• 为所有的布局元素加入样式，包括标头、链接、表格、粗体、斜体等。
• 允许设计师改变模板中的颜色和字体。
• 限制页脚中品牌标志的数量。
• 在不同的浏览器和移动设备上测试模板的兼容性。

用户体验要素

• 在顶部标题栏使用高质量图片。
• 注意主题颜色的搭配（互补色和对比色）。
• 将主题中使用的颜色减到最少。
• 利用社交网站的共享内容实现更好的用户体验。

9. WordPress主题

最佳设计经验与准则

• 从最基本的两栏或三栏布局主题开始。
• 使用流动式布局，以适应不同浏览器的窗口大小。
• 提供改变页头颜色和背景图片的颜色的功能。
• 从侧边栏恰当的使用小工具、标签云和RSS。
• 保证用户能轻松添加访客统计小工具和网页广告。
• 在标头模板中提供搜索引擎优化元标签。

用户体验要素

• 主题采用两色或者三色配色方案，内容使用可读性强的字体。
• 提供带有不同语言的国际化和本土化主题。
• 使用HTML、CSS和PHP编程时注意代码规范，便于开发人员维护。
• 针对特定网站类型（如教育、摄影）提供主题。

10. 商品目录（Catalog）

　　商品目录是个可视化的商品列表，旨在帮助客户找到要买的东西。 有时也被成为产品分类或者产品列表页。

最佳设计经验与准则

• 为产品创建简洁美观的展览列表（网格视图）或者垂直列表（列表视图）。
• 为用户提供友好和智能化的搜索服务，提供关键字、型号、类别等选项。
• 将物品按照类目和品牌进一步分类，以促进用户继续浏览。
• 通过提供产品信息、产品缩略图、产品价格和是否可购买等选项帮助使用者选购。

用户体验要素

• 快速响应是十分必要的，所以默认列表项数应该尽可能少，针对小带宽不超过24项。
• 保证浏览器和搜索所得结果的相似性，减少体验过程中的混乱感。
• 干净、整洁、专业的布局能够赢得购物者的信任。

11. 产品页面

　　产品页面的信息非常丰富，旨在帮助顾客决定是否购买某一件产品，这意味着它是一个涵盖了所有用户需要信息的单个页面，其中包括与产品相关的图片、规格、尺寸、颜色、折扣、运费、成本、自定义选项等等。

最佳设计经验与准则

• 使用两栏布局 --- 左边显示图片，右边显示其他信息。
• 在一个页面上显示产品的所有信息，这样用户就不用浪费时间来回寻找。
• 为产品信息使用项目符号列表，以便快速访问。
• 通过面包屑导航可以返回产品目录，这样使用户可以选择其他商品。
• ‘添加到购物车’按钮应该足够明显，这样可以鼓励消费者购物。

用户体验要素

• 为产品配上高质量的照片，在突出位置显示。
• 提供不同角度的产品照片和更丰富的观察视角。
• 使用添加到购物车而不是购买按钮。

12. 购物车

最佳设计经验和准则

• 使用醒目、美观的结账按钮，鼓励顾客购买。
• 为购物车页面使用网站统一的配色方案，在页面顶端提供清晰可见的导航栏。
• 计算预付款总额，创建清晰明了的购物总览。
• 在购物车页面显示可以点击的产品缩略图，便于顾客重新考虑。
• 用空购物车为第一次购物的访客演示如何购物。

用户体验要素

• 提供简洁的增加或者减少购物车中商品的办法。
• 购物车界面要整洁，消除一切干扰信息。
• 告知用户产品所提供的安全性保障。
• 浏览更多商品时，在页面右上角提供购物车的快速预览。

推荐网站：Walmart.com && Amazon.com

13. 支付（checkout）

　　这是电子商务的最后一环，也是买卖交易行为发生的地方。在这里，买方使用类似信用卡的在线支付手段为购物车内的商品付款，并得到一张收据。 

最佳设计经验和准则

• 提供进度指示器（进度显示），告知用户目前付款流程的进度。
• 在付款流程中使用没有任何干扰额其他链接的导航，这也被称为封闭式付款。
• 保证用户随时可以查看购物车中的信息。

用户体验要素

• 在线聊天可以让用户即时获得帮助。
• 使用更少的步骤、使用默认选项。
• 对于一次性的购买行为，单页的付款流程更优。
• 重视买家对安全性、送退货和售后服务的关注。

14.  用户账户、注册（User Account / Registration ）

　　为了享受个性化服务而在网站上进行登记的过程。账户的创建是挖掘潜在客户群的第一步。 用户创建账户之后，企业就可以以此创建用户数据库，并进行品牌推广。 

最佳设计经验和准则

• 为使账户创建更简单，请使用单页注册表单。
• 在注册页面清除说明注册的诸多好处。
• 把需要填写的注册信息最简化。
• 提供及时的验证和帮助，以避免用户错误输入或丢失数据。
• 给出明确的隐私权政策。

用户体验要素

• 在每一个注册栏内部都提供描述性的帮助信息，给出有效输入的示例。
• 使用邮箱地址或者唯一的用户名会让注册变得简单。
• 如果使用邮箱地址作为登录名，那么要让用户明白应该创建新的密码（而不是使用原来的邮箱密码）。
• 保证针对老用户的登录和针对新用户的注册选项有明显的区别。
• 解释清楚注册行为如何能够帮助用户更快地购物，考虑提供注册奖励。

15. 登录（Login）

　　一种用户识别在线用户的安全机制。

最佳设计经验与准则

• 在登录表单和忘记密码表单中显示网站标志。、
• 在用户登录以后，用他的登录名向他问好，并提供退出选项。
• 在同一页面，利用色彩、文本等多种方式明确告知用户验证信息。
• 使用验证码控制 --- 用户必须识别图片中的文字，以确认是否是用户在登录。
• 登录帮助表单为用户找回用户名/密码。

用户体验要素

• 在登录名或者密码错误时动清除错误提示，账户被锁定时采用同样的处理方式。
• 当用户忘记密码时，提供可以快速重置密码的方式。
• 在登录页显示最佳安全防范或防钓鱼网站警示。 
• 在首页放置一个登陆表单。
• 支持用户只利用键盘访问登陆表单，确保Tab键按照逻辑顺序切换当前的焦点。

16. 用户个人资料（User Profile）

　　用户在网络社区的数字描述。由一组个人数据组成，包括名字/昵称、照片/头像、简短的个人介绍、职业、爱好和其他兴趣等，这些能说明在线社区的某个用户。 

最佳设计经验与准则

• 使用单页布局让用户完善个人资料。
• 把用户的照片/虚拟形象和社区同级放置在页面的顶端。
• 在同一页面内为用户提供修改个人资料的编辑选项。
• 为书签、联系方式和用户链接提供醒目的操作引导按钮。

用户体验要素

• 把社区成员的真实名字和用户名放在一起。
• 允许用户自定义HTML表现元素，自定义内容。
• 迎合初级用户并帮助他们过渡到高级用户。
• 为所有加入社区的用户准备一个默认的虚拟形象。

推荐网站：https://foursquare.com/

17. 在线论坛（Online Forums）

　　为用户讨论问题、提问、与其他用户互动提供支持的网站。

最佳设计经验与准则

• 允许用户通过简单的邮箱登录或者以游客的身份参与讨论。
• 把最活跃的谈论帖排在主题列表中的地位。
• 支持带表情符号的全功能型文本输入，使用户的互动交流形式更为丰富。
• 显示注册、在线以及活跃用户的统计数据。

用户体验要素

• 根据用户活动为每个县城显示统计数据。
• 提供专门用户和管理员展开交流的区域。
• 保持论坛的实时性和动态性。

18. 评论嵌套

　　针对会话中的一系列评论进行逻辑分组。它按照降序排列，并根据逻辑缩进显示，以便在顶部展示最新的评论，在评论跟帖中显示最近的回复。

最佳设计经验和准则

• 在评论中显示用户头像或者图片。
• 提供能吸引用户参与的、丰富的讨论主题。
• 为评论嵌套提供收起全部评论内容的功能。
• 使用不同的背景颜色来区分不同用户的评论。
• 统计各个评论嵌套中的评论数。
• 为评论回复页面提供富文本选项。

用户体验要素

• 优化页面以显示更多评论内容。
• 提供快速回复选项。
• 提供和某个评论回复进行互动、评分和点赞的功能。
• 为不同类型的评论，例如新闻、休闲娱乐和提问等提供标准化的图标。
• 给出评论时间。

19. 网站地图（Sitemap）

　　展示一个网站的总体和层级结构的网页。用户能够通过超链接便捷访问个页面。 无论是对于用户还是搜索引擎，它都起着索引的作用。 

最佳设计经验与准则

• 在网站导航中保留网站地图链接。
• 按标准结构建设网站地图。
• 分层树形结构 --- 链接从首页开始。
• 分类式 --- 带有标题和链接的简单链表。
• 网站地图使用简单的静态HTML网页表现。
• 使用描述性的文字内容，提供丰富多彩的关键词。
• 利用网站的页眉和页脚体现统一的设计风格。

用户体验要素

• 采用易于使用且有条理的分类，帮助用户找到所需的页面。
• 尽可能少的使用图片，避免动画、广告以及富互联网应用。
• 在error404页面上提供网站地图。
• 避免为网站地图使用打页面。
• 如果你在页脚使用网站地图，确保其高度不超过页面的三分之一。

20. 资源中心、帮助中心（Resource Center / Help Center）

　　网站的参考内容，为访问者提供详细的网站信息。它是用于高速访问者关于公司、产品或者服务情况的地方。它通常可以解答用户遇到的常见问题，向他们提供快速信息、术语汇编和有用的下载内容。 他是个非常好的工具，能够提升品牌认知度和在用户心中的形象。

最佳设计经验与准则

• 布局要简单，除了图标和截屏外，尽量少使用图像。
• 定期更新信息，做到动态化。
• 引导用户展开操作。
• 常见问题和词汇页面使用易于理解的标题和易于访问的链接。
• 为用户之间互动提供论坛。
• 为用户进一步查询提供可达性指南和联系信息。

用户体验要素

• 保持资源中心的布局简单，与所有子页面的设计风格统一。
• 提供易于查找的词汇且内容详细的词汇表。
• 常见问题和术语汇编均使用单页面布局。
• 不要出现广告条。
• 在常见问题页面的顶端提供问题列表，并为每个回答建立锚链接。

 21. 知识库（KB --- Knowledgebase）

　　展示特定知识域相关信息的网站。 

最佳设计经验和准则

• 用信息块实现简洁的知识库主页布局。 

• 避免使用踏跺图像、短片和广告。
• 为更加详细的查询提供高级搜索功能。
• 为新用户开辟专区。
• 支持用户在文章页面展开互动交流、评论以及评级。
• 利用图标和样式为不同类型信息增加视觉提示。

用户体验要素

• 布局尽可能简单，将重点放在内容上。
• 为所有的文章页面使用相同的布局。
• 使用面包屑导航，便于用户返回知识库首页。
• 使用浅色背景，遵循内容的无障碍访问准则。

22. 维基（WiKi）

　　可以被所有的互联网用户浏览和修改的网站。即人们聚集到这里可以汇聚信息，任何人都可以创建新页面或者编辑该网页的现有页面。 它支持人们在同一个页面上协同工作，并且不需要任何关于创建、编辑页面的特殊知识。

最佳设计经验和准则

• 页面的主要区域用来放置内容。
• 所有类别下的所有页面具有简单且统一的结构。
• 限制使用HTML框架、样式表和JavaScript脚本。
• 避免出现Flash、网页广告以及任何其他形式的广告。

用户体验要素

• 使用简单，基于文本的配色方案和易读的字体。
• 避免使用任何标题性图片和丰富的图像化导航控制。
• 支持纯文本编辑同时也允许使用高级的富文本格式。

23. 在线调查

　　一种从网站访客中收集信息的网络工具。

最佳设计经验与准则

• 针对即时投票： 使用带有单选按钮或者复选框的客观问题，在投票后就显示投票结果，对选项进行随机排序，以避免出现边缘答案。
• 对于单页调查要有明确的知识。（完成/结束按钮）
• 针对带有进度条的多页调查： 提前告知调查所需的时间，避免将大量的问题放在一个表格里。调查页面的首页保持整洁，每一页显示相同数量的问题，并采用统一的布局。

用户体验要素

• 把问题的长度限定在一行。
• 赋予用户选择回答或者不回答主观题的权利。
• 让用户知道调查表里还有多少问题。
• 把所有内容放在一页上显示。

24. 评分程序(Rating App)

　　对产品进行在线评分或投票的程序。 即让用户对产品质量展开评价，它从现有的客户反馈信息用于改进产品，同时也能为潜在消费者提供重要信息。 五分评分系统最为常见。 

最佳设计经验与准则

• 评分系统的三种不同状态：
  • 当前状态，已有的评分结果。
  • 激活状态，用户选择星标进行评分时的状态。
  • 评分后状态，用户对产品评分后的状态。
•  把评分系统无缝地集成在网站中，占用最少的空间。
• 利用Ajax（不需要刷新页面）在后台计算评分结果。
• 通过设计鼓励用户进行评分，保证评分系统的易用性。 

 用户体验要素

• 在用户评分时和评分后显示评分系统的状态。
• 用柱形（柱状图）显示所有类型的评分结果。

25. 富互联网应用程序（RIA --- Rich Internet Application）

　　RIA能够为网页实现交互动作，提供独特且颇具吸引力的功能，并且能保证在多个浏览器上显示出统一的UI界面。 RIA的用法通常有两种：要么作为网页上提供丰富功能的独立系统；要么整个网页使用RIA开发。

最佳设计经验与准则

• 加载RIA时显示进度条。
• 确保RIA应用程序在不同的浏览器和平台上都有固定的尺寸。
• 使用渐变、透明效果以及高质量图像。
• 注意RIA还应该具备全屏选项。

用户体验要素

• RIA应该有高质量的图像和流畅的动画。
• 用RIA显示具有良好动态效果以及交互功能的数据。
• 提供视觉效果丰富的用户界面，根据用户行为的变化阿里改变界面状态。
• 使用最流行的色彩搭配和对比效果。

推荐网站：http://gotmilk.com 非常舒服的界面

26. 网络小工具（Web Widget）

　　能够嵌入到网站、博客和社交媒体中的网络应用程序。可以是访问计数器、时钟、日历，也可以是向用户推送特定内容之类简单的功能。用户可以访问提供小工具的网站，在自定义小工具的过程中生成HTML代码，然后通过代码把自己的小工具嵌入到自己的网站中。

最佳设计经验与准则

• 保证小工具有良好的视觉吸引力和易用性。
• 通过四个步骤自定义小工具。
  • 通过验证用户ID个性化定制任务导向。
  • 自动以小工具的外观布局、配色和字体。
  • 预览小工具，显示新的自定义小工具。
  • 发布生成的代码，用户就可以将其引入到自己的网页中。
•  有效地利用空间，不要显示太多的数据。
• 尽可能少地使用标记，不要出现网页广告。

用户体验要素

• 一个小工具聚焦于一项功能。
• 利用默认布局和数据明确地表示小工具的功能。
• 设定合理的默认值，使用户可以很快的使用小工具。
• 通过统一的、无边界的设计使其所有网站都可以完美结合。
• 在使用小工具时，避免要求用户登录、注册或者填写email地址。
• 通过社交媒体共享各种插件，支持在线共享和书签功能。
• 允许用户对默认尺寸进行自定义，使其与侧边导航栏的大小相匹配。

27. 书籍内容预览工具（Book Widget）

　　书籍内容预览工具允许用户在购买之前预先预览部分内容。即可以查看书籍的封面、封底、目录、试读页、内容索引等，还可以在书中查找特定的内容。

最佳设计经验与准则

• 为可预览的书籍页面提供易于用户访问的入口和导航。
• 利用‘上一页’和‘下一页’按钮实现对书籍页面的简易操作。
• 提供带有放大和缩小功能的全屏浏览方式。
• 提供在书中搜索关键字的功能。
• 提供购买书籍的选项。

用户体验要素

• 通过页面切换动画是体现迅速翻页。
• 可预览的内容越多，对用户来说越有用。
• 迅速加载书籍内容。

28. 网页广告

　　网页广告是在网络中插入广告的图像插件。 网页广告是意图增加网站流量的特殊网页控件类型。 一般情况下都采用较大长宽比的幅面（很宽或者很高），包含丰富的图形、动画，有时还插入一些音频、视频和交互元素。简单的网页广告可以是三张轮转图像的组合。

最佳设计经验和准则

• 充分利用丰富的图形和动态内容，如一个网页广告可以播放不同的广告。
• 在网页广告中显示出明显的品牌识别元素和引导操作的元素。
• 在网页广告中使用URL。
• 对于旋转式网页广告，数量保持在3~5个框架之内。 
• 大广告不超过40KB，小广告10~20KB。
• 建议动画时间是15s。

用户体验要素

• 避免华而不实的内容、不稳定的动画和过度明亮的色彩。
• 在使用媒体内容时，让用户可以控制音频和视音频的开始播放和结束。
• 在广告中不要使用太多的语言，7个单词是合适的。

推荐网站：http://www.iab.net/

29. 网页幻灯片演示（Web Slideshow）

 　　按照预定义顺序展示一系列选定的图像或者幻灯片的应用程序。 

　　

最佳设计经验与准则

• 支持用户控制幻灯片演示程序。
• 把导航控件布局在幻灯片内容之外的区域。
• 把幻灯片控制按钮设计的易于操作。
• 流畅的幻灯片切换效果。
• 为图片/媒体的幻灯片演示提供缩略图。

用户体验要素

• 如果幻灯片演示内容超过4项，提供演示内容总数和直接跳到某项内容的操作方式。
• 针对图片幻灯片使用半透明的、引入注目的UI控件。
• 为切换到下一项演示内容提供视觉反馈。
• 支持自动播放到下一项演示内容，持续时间可以设置为3s或者更长。

30. HTML5APP 

　　使用最新的网页技术让网页拥有APP般的使用体验。

最佳设计经验与准则

• 在单个页面内完成应用程序的布局。
• 了解相关目标设备的设计约束，包括屏幕尺寸、观看距离、链接方式。
• 探测目标设备，使布局适应设备要求。
• 使用音频/视频元素，把FLASH作为后备选项。

用户体验要素

• 用简约的设计确保可以跨平台使用。
• 使用现金的SVG图形技术。
• 对于不支持的浏览器要适当的降低性能。
• 使用单栏板式支持移动设备浏览。 

 31. 可缩放用户界面（ZUI --- Zooming User Interface）

　　利用缩放功能进行交互的界面。 即用户可以通过放大或缩小图像查看到细节或者总览全局，用户可以在虚拟的仕途上沿着连个方向移动图像，也可以根据自己的兴趣放大观察特定的元素。 

最佳设计经验与准则

• 提供反应灵敏的用户界面。
• 在用户界面中显示不显眼的控制项。
• 允许用户通过鼠标来放大或者缩小，移动鼠标进行平移页面。
• 提供设置缩放等级的选项。

用户体验要素

• 为放大和缩小视图提供平滑的过渡效果。
• 使用半透明按钮。
• 先用默认的屏幕缩放级别预览大图片。

 

32. 任务追踪系统（Task Tracking System）

　　用户在项目中管理团队工作的在线应用程序。此程序可以使得分隔两地的团队相互完成一项任务。

最佳设计经验与准则

• 为每个用户提供关于项目的个性化视图。
• 为用户分配单独的信息列表，提供各种类型的事项、错误和特征。
• 只显示与特定错误相关的信息，并支持筛选和排序。
• 支持对数据进行过滤和排序操作。

用户体验要素

• 优化显示方案，提供尽可能多的信息。
• 保持用户界面简洁易于使用。
• 主题和样式极尽简约，注重数据 。
• 使用标准的信息显示面板，在单页内完成项目设置。

33. 内容管理系统（CMS --- Content Management System）

　　基于网页的、用于创建、编辑或发布网络内容的系统。

最佳设计经验与准则

• 提供简单并基于网页的访问方式。
• 提供灵活的内容编辑方式和简单的工作流程来发布内容。
• 可以自定义网站主题、背景和风格。
• 允许管理者改变网站主题和风格。
• 用所见即所得的编辑器来预览更改的内容。

用户体验要素

• 提供用来管理所有页面和内容的操作面板。
• 为创建和管理内容提供易于使用的界面。
• 支持在发布之前预览内容。
• 允许快速发布和定时发布。

34. 基于Ajax技术的网络应用程序

　　一种在客户端网页使用Ajax技术的及时响应式网络应用程序。ajax来营造桌面应用程序的感觉。 

最佳设计经验与准则

• 支持用户触发ajax技术。
• 启动后台进程时告知用户。
• 为后台进程使用类似于进度条和加载动画的指示器。
• 寻找新的导航方式： 浏览器的导航操作不能应用于Ajax的更新。

用户体验要素

• 不需要重新加载页面就可以实现电脑桌面般的用户体验。
• 清晰明确地说明服务器的呼叫和更新状态，这一点非常重要。

35. 社交网络设计

　　为社交而设计的网络应用程序。 鼓励用户相互对话，推动社区的发展，还使用户体验到归属感，社交网络设计在WEB2.0网站中非常流行。

最佳设计经验与准则

• 围绕用户之前的互动创建充满活力的社区。
• 允许用户查找和联系现有通讯录中的联系人和朋友圈。
• 用户可以自定义内容详细的个人资料页。
• 向参与的用户显示实时的内容更新 。
• 根据用户的设置和选择对用户进行分组，允许用户在网上建立私人团体和公众团体。

用户体验要素

• 根据用户所处位置来提供交互内容。
• 支持用户轻松容易地从手机访问社交网络。
• 允许在网络上即刻分享内容。
• 用私人邮箱以外的方式让群体之前的交流更加便利。

推荐网站： stackoverflow.com

 36. 搜索引擎优化（SEO）网页

　　为了获得更好的搜索引擎排名而设计的网页排名。 

最佳设计经验与准则

• 在URL前端带有最重要的关键词。如网址为：http://mysite.com/Search-Engine-Optimized-Web-Page.html
• 找出网页的一级和二级关键词并将他们使用在内容中。
• 使用标题标签和大写来强调标题。
• 分层级组织内容，使用易读的文字。
• 遵循文字、链接、图像和多媒体等内容的无障碍访问指南。 

用户体验要素

• 采用独特的网页标题、内容和组织加过来创造更靠前的访问排名。
• 通过加入商务要素提升排名。、
• 通过提供案例分析和教程下载获得更多访问量。
• 为多媒体和说明添加可选择性的文字。

推荐网站: http://silverlightfun.com/ 该网站尊村SEO设计原则。

• 名称和网站元信息包含有与Silverlight技术相关的关键词。
• 65字符长的标题 --- 独特的标题和明确的信息有利于提升搜索引擎排名。
• 作为最重要的文本，采用H1标签的一级标题使用大写字母。
• 为媒体和图像文件提供适当的提示字符有利于SEO排名。
• 使用H2标签的次重要二级标题。
• 包含有指导新手下载的PDF下载链接。
• 独特的标题和特定的话题增加了网站在搜索引擎排名中的重要性。
• 购买选项为页面加入了电子商务元素，同时提升了网站的排名。
• 超过1000个关键词，带有关键词的文本提高了网站排名。

37. WEB2.0用户界面设计

　　充满活力的网页元素设计。

最佳实践和设计指南

• 使用鲜艳的色彩和高级图形效果，包括 --- 透明度、阴影、光晕、圆角等。
• 使用较大的UI元素，以实现更好的交互。
• 使用大于正常尺寸的UI元素使得其脱颖而出。
• 使用带有透明效果的高级PNG图像。
• 为鼠标增加悬停添加图形效果，是交互元素具有互动性。

用户体验要素

• 使用图形丰富的背景壁纸。
• 使用鲜艳的颜色。
• 确保网站中的主题设计与WEB2.0一致。
• 需要注意的是，WEB2.0主题在社交中更为流行。

推荐网站： https://www.last.fm/

38. 面向服务的架构（SOA --- Service-Oriented Architecture Design）设计

 　　以服务的形式托管在网页的应用程序。

最佳实践和设计指南

• 在简洁的用户界面上清晰地定义所提供的服务。
• 在托管服务的网页中使用中性主题。
• 为网络服务提供的所有的API建立详细的帮助页面。
• 在网络服务页面上提供基本的定义和选项。
• 支持在网络上对表单进行测试。

用户体验要素

• 清晰地说明API的使用方式。
• 利用附带数据的表单测试样本为用户提供帮助。

推荐网站： validator.w3.org

 　　该网站是一项用户检查网页是否符合标记标准的在线服务。 它明确定义了所提供的关于网页的服务，还提供了一项基于表单的网络服务。 用户在表单中输入URL，提交之后，就可以检查页面上的错误。 系统对服务结果数据进行渲染之后，以XHTML文件的形式显示出来。

39. 信息图设计（Infographics Design）

　　数据的可视化呈现。 信息图就是用颜色、类别、图形、插图和图表来展示数据，具有极强的视觉冲击力。它充满了娱乐性，在单页内以易于用户理解的方式，视觉化地显示了数据总览。 信息图能够有效地显示信息，用以对比数据、显示统计结果，同时还具有趣味性。

 

最佳设计经验与准则

• 信息图最常用的尺寸： 垂直布局 800 X 2000 像素，便于嵌入博客，用于海报的水平布局为 1600 X 1000 像素。
• 利用 2 ~ 3 种颜色和轻微的渐变效果设计主题。
• 通过字体强调重点。
• 为文本内容使用无衬线字体。
• 为所有信息块使用矢量插图和图标。 

用户体验要素

• 尽量简化复杂的主题。
• 为文本和图表采用美观的配色。
• 使用清晰的图表和图形简练地显示数字。
• 以视觉化地方式展示信息，避免出现太多文字。

40. 自适应用户界面（Adaptive User Interface）

　　可以根据用户的特殊需求或者特殊的使用情景来进行自我调节的界面。它会根据设备不同显示用户自定义的界面，提供不同的界面尺寸和浏览器功能。 他能重新调整网站布局、缩放图像、重新布局菜单，以适应某一设备。

　　

最佳设计经验与准则

• 围绕内容逐渐优化网站的开发。

用户体验要素

• 允许通过内容实现导航
• 可访问的导航侧边栏。
• 提供跳到菜单的选项。
• 支持从键盘访问菜单。
• 正确的嵌套标题。

推荐网站： Anderssonwise.com

 　　此网站使用自适应网页设计针对不同的设备和浏览器尺寸定制网站的呈现方式。根据内容和设备大小，网站采用了流动布局，能及时响应用户的操作。