在这篇文章中， 我们将讨论八种有用的布局解决方案和技术， 这些将有助你创建一个干净的组织有序的内容布局。 这八种技术包括sliders （滑动器）, tabs（选项卡）, progressive layout （前进式布局）, structured grids（结构化网格）, modal windows（弹出窗口）, rollover elements （翻滚元素）, accordions （手风琴） and mega drop-down-menus （大的下拉菜单）.

你可能也对下面几个相关的文章感兴趣：

• 5 Useful Coding Solutions For Designers and Developers （对设计师跟开发人员有用的5种编码方案）
  
• 40 Creative Design Layouts: Getting Out Of The Box（40个有创意的设计布局：抛开盒子）
• Web Design Trends For 2009（2009年网页设计的趋势）

1. Sliders and Carousels （滑动器和旋转木马）

滑动器，也称为旋转木马， 是一种组织有序，可交互的并且可流畅表达信息的方式。 滑动器是一种非常流行的技术因为确实非常实用。你可以把大量的内容放在一个固定紧凑的区域， 如果没有滑动器， 这些内容不得不被放在页面的某些地方，在很多情况下， 你可能并没有空间给他。 当需要的时候你可能想要显示一些信息。silders 可以帮助用户一次只关注一个内容块，这很有用并且很方便。 这就是slider为什么会迟早会派上用场。

Examples of Sliders 滑动器的例子

Thumbnails and icons in the navigation area  缩略图和图标在导航区

当你要设计一个内容滑动器或者图片幻灯片时， 最好是通过在导航区域使用一些图标或者一些缩略图给用户一个简单直观的导航。缩略图和图标给用户一些简介，说明他们在幻灯片中 并且给出一些可用的导航的选项。（比如， 一个幻灯片， 可以有垂直跟水平导航）。 除了这些， 用户可以从滑动器里面快速的选择特定的页面。

在Coda site的一个滑动器的应用， 你可以看到一些tabs（选项卡）在滑动器的上方。 他们创造了一种滑动器/选项卡的混合元素。 这是一个非常棒的想法， 因为通过看缩略图， 用户可以简单的找到一个页面。 而且，图标增加了一种非常强烈，难忘记并且清楚的视觉支持。 除了图标和标签， 你也可以用一些缩略图甚至数字达到同样的目的。

Slider is used for navigation in product items 滑动器被来产品展示导航

与上面的例子不同， 滑动器（slider）不仅可以被用来显示大块的信息， 而且也可以帮组用户以一种方便的方式浏览成千上万的产品。 这里有个例子，SourceBits（见下图） 用了多个选择器（sliders）（一个垂直的一个水平的）提供给用户一个引人的方式去浏览CD封面的。

滑动器（slider）在两边各有一个圆形的按钮指明是怎么样导航的。 很平滑的过渡，因此滑动器（slider）看起来非常吸引人而且使用起来很舒服。 而且你还可以发现每个插图间有很好的空隙， 因此可以简单的点击每一个单独的图标并且有很好的组织。 每一个物品也有非常棒的镭射悬停效果。

Vertical content sliders with large horizontal “clickbars” 拥有水平的大点击条垂直内容滑动器

让我们看一下滑动器（slider）在QuickSnapper的使用。  功能性的垂直滑动器（slider）完美的使用在布局里。 滑动器（slider）里面有大量的物品快照。 这样的有序安排让用户很容易在元素内找到物品。这个滑动器（slider）最好的部分是上下的两个按钮， 他们扩展了滑动器的宽度。 这大按钮使滑动器（slider）变的更简单使用。

这里有一个例子， 如果你选中其中一个展示产品，然后决定去看看别的物品， 你可以简单的点击上面或下面的大按钮去浏览。 这非常方便而且友好。 并且， 如果你去网站试一下， 你会发现这些按钮非常的好，激活跟焦点效果 看上去很棒并且增强了可用性。

Slider Scripts 滑动器脚本

你可以实现这些技术用下面一些脚本，技术和教程:

• Slick Accessible Slideshow using jQuery
• Coda-Slider 1.1.1
• jquery.scrollable 1.0.2
• Create an Amazon Books Widget with jQuery and XML
• Agile Carousel
• Easy Image or Content Slider
• Slider Gallery
• Coda Slider Effect
• iCarousel

2. Tabbed Navigation Elements 选项卡导航元素

基本上选项卡（tabs）导航是一种跟滑动器很类似的技术。 你可以在紧凑的区域保持大量的数据，而这个区域远远小于你通常所需要的大小。选项卡（tabs）导航是一个惯例，大家都在使用他， 并且有一些不用的方式去实现它。这里我们将专注于使用选项卡导航元素在一个页面，而不是用他（tabs）来做网站主要内容导航。一个选项卡（tab）元素明显的分割不同的内容块， 而又把他们同时放在一个很小的区域。

Examples of Tab Elements 选项卡元素的例子

Distinctive backgrounds, large clickable areas, clear separation特殊的背景，可点击的大块，清楚的隔离

第一个例子来自 Mac Pro website 的“Performance” section。这是一个良好构建的选项卡（tabs）元素的完美例子。 在这些选项卡（tab）上面的标签是可读的， 有大的点击区域，并且很好到做到了视觉隔离， 因此他们看起来是绝大多数用户做期盼的样子。并且 你可以看到当前打开的选项卡（tabs）的背景与显示主要内容的区域的背景是一致的， 而没有激活的选项卡用稍微更深的背景并用阴影来增加他的深度， 看起来是藏在激活选项卡的后面。 这是非常简单的效果但是非常有效。

Clean tabs with separation of buttons 独立按钮的整洁选项卡

这里有另外一个用紧凑的方式充分利用选项卡（tabs）去表达信息的例子。 Atebits 的布局已经创建好, 这里没有很大的空间可以显示多个内容块。 因此，他们把三个章节放在选项卡里， 保持整洁有序。 当前打开的选项卡与主要内容区域的颜色是一样的， 而未激活的选项卡用的深一点的灰色背景。 你会注意到选项卡之间的一个好的分隔进一步的定义了每一个的按钮。一个细微的斜角被用来清楚的分隔按钮。

Clean separation of the entire tab set 这个选项卡集合的清晰分离
Fontcase 有另外一个非常好的有着现代感的选项卡集。 尽管这样的设计没有隔离每个选项卡，但是激活的选项有一个清楚的边界与未激活的分开。 而且你可以看到这里这个选项卡集有分别在上线有一个边界。 这些选项卡用图标和空格来支持文字， 使选项卡变得更容易使用。

Tab Scripts 选项卡的脚本

你可以实现这些技术用下面一些脚本，技术和教程:

• Create a Slick Tabbed Content Area using CSS & jQuery
• JavaScript tabifier
• Yetii - A JavaScript Tab Interface
• Tabbed Page Interface
• Updated JQuery Nested Tab Set
• Scriptaculous Tabs
• Accordian Tabs

3. Modal Windows 弹出窗口

弹出窗口（Modal windows），或者浮动窗口（floating windows）， 是一种在没有足够空间的布局里面非常棒的表达补充信息的方式。 在弹出窗口里， 你可以呈现一个大一点的图片， 额外的内容， 警告，贴士，视频等等， 让用户可以更容易的注意到。当你放信息在一个弹出窗口的时候， 你需要让你的用户清楚怎么去关闭这个窗口。

还有很重要的一点， 触发弹出窗口的一个链接，缩略图，图标或者是任何图像元素应该与弹出窗口的内容紧密相关。 一个类似的图标，标题，或者是视觉效果能帮助用户建立原始链接跟打开窗口之间的关联。

Examples of Modal Windows 弹出窗口的例子

Modal windows for logins and signups  为了注册和登录的弹出窗口

最常在弹出窗口中用到的元素（区别于传统的媒体文件像图片，音频，视频，屏幕截图等） 是登录和注册窗口。当你使用一个浮动窗口为了登录/注册， 你正在为每一个页面上节省大量的空间。 而且， 用户不用仅仅只是为了登录去载入一个完全新的页面。 他们能在任何页面登录而不让他们当前的会话被打断。 当然， 如果设计师确定登录或者注册过程可以用ajax在幕后实现。

Grooveshark 用一个很好的注册窗口在网站上的每一个页面。注意登录按钮（login-button）在注册窗口（signup-Window）并不打开一个新的页面， 而是用登录的表单替代注册的表单。 这是非常方便而且友好的方式。

Fade out the page or/and use a drop shadow 渐出页面或者用一个阴影

如果你将要使用一个弹出窗口， 渐出窗口背后的页面是很重要的。 可以使用半透明背景， 投影，或者两者同时。 通过做这些， 你做了两个重要的设计决定。 第一， 你带领你的用户关注于弹出窗口，并且远离窗口后面的页面。

另外， 你增加了页面的深度并且是弹出窗口跟页面隔离， 这让窗口看起来是真的物理上的浮动。 在下面的屏幕快照 (KissMetrics) , 你可以看到一个登录表单包含在一个浮动窗口中， 后面的页面褪色模糊。顺便说一下，注意取消/登录按钮也设计的非常好。

 RealMacSoftware 用一个在窗口背后的阴影代替整个页面的褪色。这个技术也很好的增加了深度和隔离感。

Modal Scripts 弹出的脚本

你可以实现这些技术用下面一些脚本，技术和教程:

• Fancy Lightbox
• Lightbx 2
• Facebook Image/Content Viewer
• Woork Mootools Lightbox
• nyroModal JQuery Plugin
• JQuery Alert Dialog
• LightWindow
• ThickBox 3.1

4. Rollover Elements 滚动翻转元素

一个滚动翻转的元素（Rollover Elements）是当今越来越流行的一个设计元素， 特别是在公司的网站，工作档案和产品的网站。 他的主要的思想是当用户的鼠标悬停在某些元素上，例如一个按钮， 一些内容将自动的弹出显示在页面上。 下面有一些例子帮助你更好的理解它是怎么工作的

Examples of Rollovers 翻滚的例子

Rollover tabs 翻转的标签项

下面你可以从Miro’s homepage 网站的截屏里看到他们哟你了一个设计很好的打的翻转元素（Rollover Elements）。 这个元素跟滑动器类似， 但是并不是用一个按钮去滑过这些页面， 这个滑动自动的发生。

Subtle rollover hover elements 细小的翻转悬停元素
TaoEffect 是一个很好的用翻转元素（Rollover Elements）非常漂亮的表达附加信息的一个例子。（这个效果第一次是在coda的网站上使用的名单是这里我们用这个例子代替）这些信息用一种非常友好的方式呈现，你所有要做的就是让你的鼠标悬停在这个按钮上。

如果你访问这个网站，你可以看到这个翻转是非常好并且很流畅的动态过度。这个打开的过程是用一个垂直的渐变的扫出。最后你可以看到背景是半透明。同时也用突出的边界去增加与其他的内容的隔离度。

A content map with rollover elements 用翻转元素的内容地图
OneHub 用翻转元素（rollover elements）实现另外一种效果。类似于一个地图， 这个页面被分成很多快提示。 当用户鼠标悬停在某一个提示上时，附加信息就会自动的现实出来。 这个效果对于想要展示产品的特性或者给用户更多的解释和说明的网站非常有用。

Rollover element integrated in a slideshow 整合在幻灯片中的翻转元素

SquaredEye给出了另外一种有趣的设计方式。 旋转木马式的菜单让用户可以用翻转元素预览上一个和下一个页面。 在一些情况下这种方法非常的有用。

Tooltip/Hover Element Scripts 提示框/悬停元素脚本

你可以实现这些技术用下面一些脚本，技术和教程:

• Prototip 2
• Coda Popup Bubbles
• Build a Better Tooltip with jQuery Awesomeness
• jQuery plugin: Tooltip
• Create a Simple, Powerful Product Highlighter with MooTools
• Easiest Tooltip and Image Preview Using jQuery

5. Progressive Layouts  前进式布局

一个前进的布局（Progressive Layouts）是一种用一定顺序去描述一系列内容块的方式， 它不是通常的组织内容的方式，但是也有很多网站使用它。 一个前进的布局（Progressive Layouts）能帮助用户容易的浏览一个长的系列。

Examples of Progressive Layouts 前进式布局的例子

An entire site consists of progressive pages 一个有前进式页面构成的网站

 Sursly.com (见下面)的整个作品集的呈现是基于前进式的布局（Progressive Layouts）。 你可以在每一页的右上角看到一个go的按钮。 我们可以通过它之前面的页面找到它。这个页面的前进系统是导航栏和菜单的替代品。 当然，这样布局的主要的缺点是很难去导航甚至很难实现交互的目的。

尽管在这种布局里面每个单独的页面可用锚点来标记书签， 但是他很难让一些随机用户立刻得到一个可用导航选项的整体映像。 除此之外， 这个布局通常只用在单向的导航-前进。 从可用性的角度来看， 这并不好。

Progressive Vertical Page 垂直前进式页面
Danny Blackman (例子见下) 用前进式的布局（Progressive Layouts）展示了一个作品集。这些独立的元素全部都垂直的呈现在一个页面上。 自动滚动的功能可以带领用户从一个页面的元素到另外一个元素。而且， 没有使用菜单和主导航， 仅仅用按钮带领用户从一个到下一个或者返回。

ScrollTo Script 滚动的脚本

• ScrollTo - 这是一个Jquery的插件， 可以用在垂直前进的布局里面，就像上面那个例子一样。

6. Grids 网格

没有一个讲布局的文章可以不提到网格。网格经常被认为是任何平衡的，有序的和简洁的网页布局的一个基本部分。很多设计师用他们来给用户提供一种更为有效的交流大量信息的方式。 网格可以不用任何其他的技术来显示信息。 一个好的网格系统能把一个页面的所有信息放在一个流畅的布局里面， 但是也能考虑到每个不同块的可读性和可扫读性。

在下面的网站里， 你可以看到它使用了一个非常精确的网格布局。这整个网站只有一个内容页面， 因此这个页面就要展示相当多的信息。 然而，这些信息被组织在一个整洁的两列网格里面， 创立了一个非常精确，明显和固定的有大量间隙的布局； 而且内容是可读和可扫描的。

Using different backgrounds to separate sections of a grid 用不同的背景来分割网格区域

当你创立一个格子的时候， 你可能要放大量的信息在一个非常紧凑的区域。 你需要保持整洁有序， 但是却没有足够的空白空间。因此你可以对每一个格子使用不同的背景。 你可以用很少的内间距来而不用在两个格子之间留空隙， 而且看起来也不错。Valleycreek.org (见下图)， 你可以看到这个非常的策略被用来创立一个良好结构的布局。 你可以看到一个非常的细的线被用来分割不同的格子， 除了这些， 颜色的对比也可以提供非常清晰的分隔。

Grid Generators, Templates, and Tools 网格生成器，模板，和工具

• Grid System Generator
• Variable Grid Systems Generator
• 960 Grid System
• Grid Designer
• Grid Calculator
• 50 Useful Design Tools For Beautiful Web Typography (including grid-resources)

7. Accordions 手风琴

手风琴式菜单和滑动器跟选项卡是基于同样的概念：他们把大量的信息压缩到一个更小的区域里面。手风琴是块状的以垂直的或者水平的方式组织起来， 就像一个选显卡被点击， 一个内容块滑到另外一个 —— 手风琴的菜单一样， 因此得名。

Examples of Accordions 手风琴的例子

Functionality and large clickable areas 功能性的可点击的大块
Alex Cohaniuc 用了一个精心设计的手风琴菜单。 把所有的作品集里面的作品放在一个手风琴中是非常明智，因为他隐藏了（非必要的）一些关于项目的详细信息而且只在必要的时候显示他们。 这个手风琴设计的非常好的原因如下， 首先你可以注意到每一个画布的标题头非常大，更容易点击。 而且，你能看到每一个标题头用一个三角形的标记去说明是否这个手风琴键被打开了。最后，在这个设计中，当前的风琴键的标题头用了一个非常不同的背景色。

Horizontal content slider 水平的内容滑动器
Jason Reed 用一个手风琴把整个网站的所有内容放在一个页面里面。 这个手风琴用和页面其他的部分相同的风格和元素而不是用一些外观完全不一样的元素。 另外， 这个手风琴是水平的（尽管导航选项也有垂直的）。 而且， 我们来看下选项卡。首先， 你会看到在选项卡之间有大量的间隙。 这些选项卡，标题头， 并没有向上个例子那样分隔开， 因此就用大量的空间被用来作为分隔。而且， 可读的大的标签被放在手风琴里面。 这些小的细节非常重要， 因为用户需要精确的知道每个标签项里面是什么内容。

Accordions containing images and information 包括图片和信息的手风琴
Marius Roosendaal 用另外一个非常出色的垂直手风琴设计展示作品图片。 每一个内容块用一张图片展示一个作品。 然而每一个图片都有一个文字标签。你可以看到一个小的按钮用来显示/隐藏它的描述。你也会发现可以链接到一个有更大更详细的作品的弹出窗口。 你不能再在这个小手风琴里面显示大量的信息， 因此惯用的做法就是放一个链接可以带领你看到更多的信息。

Accordion Scripts 手风琴脚本

你可以实现这些技术用下面一些脚本，技术和教程:

• Create a Simple, Intelligent Accordion Effect Using Prototype and Scriptaculous
• Apple.com Downoads Page Slide out and drawer effect
• UI/API/1.7.1/Accordion JQuery Plugin
• JQuery UI Accordion
• Simple JQuery Accordion menu
• JQuery Accordion Madness
• jQuery Examples - Horizontal Accordion

8. Mega-Drop-Down-Menus 大下拉菜单

导航不一定是一个链接的简单集合； 最近他被彻底改造不仅仅只是导航选择项， 而是一个网站内容的层次结构。 因此大下拉菜单通常被用在电子商务或者产品的布局里来展示产品的详细信息。 像这样的菜单是一个新的趋势， 并且非常快能被用户发现。 因为他能立刻提供给用户想要的信息， 不需要任何的点击， 这个跟翻转元素（rollover elements）的概念很相似。

Examples of Mega-Drop-Down-Menus 大下拉菜单的例子

一个大下拉菜单的经典例子是 Ruby On Rails Guide 的索引（Guide Index）。 这个菜单被用来作为组织良好，表达清晰的二级导航菜单。  跟上级的菜单不一样的是，这个菜单在右手边有一个转换器按钮来触发下拉菜单。 还可以注意到有一个很柔和的阴影增加菜单的深度， 让他凸现出来。

Multi-level menus with information 包含信息的多层菜单
Porsche (见下图)是上面所讲技术的一个非常完美的例子， 保时捷 （Porsche）的首页 包含一个多级菜单，使用户可以浏览所有的保时捷生产的汽车不需要任何点击。在第三层，有一个显示选定汽车的信息的窗口。这个窗口包含汽车相关的图片，链接还有一些概要信息。 当然， 一个大的内容块也是一个可以点击的区域， 因此所有的细节特性可以立刻被点击。 为了更好的理解这项技术， 点击下面的图片访问整个页面。 

Search results displayed in a drop-down-list 搜索结果显示在一个下拉菜单里

与这个技术相关的一个趋势是包含搜索结果在一个下来菜单里的策略。这个技术被用在 Media Temple Knowledge Base. 设计师选用展示信息在一个下拉菜单里面而不是用一个全新的页面去显示搜索结果， 这样结果可以随着你的输入而更新。 然而，注意这样一个事实，不应该忘记提供一个链接，跳转到一个提供全面的搜索结果的页面。

Providing extra information in drop-downs 在下来菜单中提供额外的信息

再次，在 Gateway.com上你可以看到一个大菜单被用来展示与产品相关的信息并附有链接。 在下拉菜单中的产品被组织的很好， 图片被用来增加视觉支持。 这个菜单也提供了大量的信息， 例如每个电脑的价格。 这能帮助用户在浏览那个页面之前选择产品， 因为很多潜在的客户可能主要关心的是价钱 --至少在购买的最初阶段。 像这样的大菜单最终使导航更容易而且提供了一种显示用户所寻找信息的更好的方式。

Menu Scripts 菜单脚本

• Animated Drop Down Menu with jQuery
• Superfish v1.4.8 - JQuery Drop Down Menu
• Make a Mega Drop-Down Menu with jQuery
• How to Make a Smooth Animated Menu with jQuery
• Designing the Digg Header: How To & Download
• Create a multilevel Dropdown menu with CSS and improve it via jQuery

Further Resources 更多资源

你可能对下列文章也感兴趣:

• 5 Useful Coding Solutions For Designers and Developers
• Designing Drop-Down Menus: Examples and Best Practices
• Slideshows in Web Design: Where And How To Use Them
• 40 Creative Design Layouts: Getting Out Of The Box
• Web Design Trends For 2009
• Table Layouts vs. Div Layouts: From Hell To… Hell?

About the author 关于作者

马特 克罗宁 （Matt Cronin）是一个狂热的平面设计师， 网页设计师/开发人员，程序员，摄影师， 数字艺术家 等等。 他也很享受写作， 而且为Smashing Magazine写了很多的文章。她现在为一个VAEOU的公司工作， 这个公司不久将有新的服务   Follow Matt on Twitter.

原文链接：http://www.smashingmagazine.com/2009/05/19/8-layout-solutions-to-improve-your-designs/
译文来自：http://www.yeeyan.com/articles/view/orangedan/41943和http://www.yeeyan.com/articles/view/orangedan/42446 译者Twitter @d4ny1

在针对某个产品进行讨论的过程中，经常会听到类似这样的一句话，“用户会点击这个，然后怎么怎么用”。每当这个时候，我最想做的就是马上找几个用户来做可用性实验，用事实来证明当前的推理是否是正确的。因为我们在很多时候并不代表用户。用户经常会做出一些你完全意料不到的结果。

那么，所谓的用户习惯又是怎么来的呢？很讽刺的，用户习惯其实也是分析师的常识、经验和主观判断出的。因为做数据调研，定量的信息告诉你发生了什么，它真实、精确，但缺少细节，无法看清和解释问题的根源。定性的信息告诉你为什么会发生，它灵活、快速、细节丰富，但缺乏普遍性，且描述性细节多过可统计的数据。所以在准确的数据之后，依赖的是分析师的常识、经验和主观判断。

回到主题，那么用户的习惯到底是怎么样的,一些专业的分析师通过常年的调研，得出了这样的结果，也许他不能解释用户习惯，但它确实可以帮助我们在设计时进行判断。

      用户不用的功能，就不该存在
      用户在互联网上的行为习惯=日常商店中的顾客们
      用户视觉流程为F型
      用户扫视浏览,然后快速捕捉到他想要的
      这里的用户没耐心,且必须立即被满足
      把认知负荷降到<0.
      用户不做最优的抉择,他们通常留在第一个较好的
      用户遵从他们的直觉
      用户富有控制欲,但绝对不能让他感到他很笨
      他们依赖网站呈现的连续导向内容.前提是第一个吸引的,第二个不错,第三个还行的,第四个有起色的,第五个更好的.
      用户很讨厌出乎他们预料
      导航不是地图,他没有图例
      别玩文字功夫,那样更糟(注册就是注册,不是”点这开始体验”)
      用户刚到不了解你的时候,千万别让他留下什么.
      滚动条是最糟的交互.
      视觉设计,不是美化,是导向用户看内容的.
      最好的页面,应该是纯文本的(我知道图象比文字更吸引,也知道文字太多会枯燥!但没有理由请你相信我!)
      留下空白(简称留白)
      视觉层次
      尽量少地使用视觉元素
      象征型不如直接写文字,直接写文字不如象型图加文字
      商场的货架规律摆放
      遵从规范，你将获得用户的信心，信赖，信任，且证明你的可靠
      常常测试,不停测试,今天会与昨天不同
      不要找到理由才测试
      不要触犯主流(非主流是在玩个性)
      填写你理解的关键字
      别和用户玩捉迷藏
      试试让交互设计作视觉设计,让视觉设计作交互设计,但千万别让程序员去碰这两样
      宁可问完全不懂的人,也不要去问了如指掌的人
      任何交到交互设计师手上的项目就要透明.如果老板对你保守秘密,你就辞职走人吧
      不要自以为是
      最好的体验是什么都不让用户做
      相信用户,他们其实真的确实不笨
      给用户反应.确保他们所做的一切都有回应
      告诉用户,有些事我们帮你做了
      让用户知道他在哪
      那个常点的按钮一直在那
      新的技术只用在无关痛痒的地方
      告诉用户下一步会怎样
      你的产品如果程序员在开发时间上用了两年,那么用户只要两秒钟就会用
      可以先这样,千万不可以永远这样
      交互设计流程是圆形的,因为圆形没有最远的两个点

1.) 他们发起“探索会议”。在你的项目开始之前，他们和你坐在一起，试着了解你的领域。他们关注工作流程和架构，而且懂得对你的品牌提出正确的问题。每一次会议重点关注于提取用户目标和用户故事。这些都和随之而来的下一步有密切关系：

2.）他们关注用户的故事。他们努力的去发现产品中的“用户痛点”，而不是功能特性。大多数探索会议都集中于从你那儿尽可能多地获取这些用户故事。但很微妙的一点是，他们会试着同时改变你的思维模式：重点关注用户而不是特性，他们貌似一直在暗示这一点，即便他们很少直接说出来。

3.）他们做用户调查。这无疑是很重要而且最最不同的。碰头会开过之后，你们的UX专家是不是回到工作室画几张草图就行了？真正的专家不是这样──他们对自己未知的事情抱有一种明智的尊重，他们甚至在开始线框图之前就坚持在用户工作的地方进行现场观察。

4.) 他们通常不是视觉设计师。视觉设计师很重要，用户体验的视觉呈现当然也很重要。但是同样的，程序员也很重要，软件安全和性能也一样重要。一个真正的用户体验专家可能出身于设计师或程序员，但现在他们彻底不同了。他们不依靠photoshop、fireworks或Eclipse──他们的工作更象心理学家，试图理解用户的思考方式。他们在逐渐成长的人际交互领域或古老的信息架构领域有丰富经验。

5.）最后，他们深知良好的用户体验如同客户服务。用户体验是为用户提供的服务，用户同时也是客户。所以用户体验实际上是客户服务的一种个性化服务。想象一下，你的用户体验专家不回电话、开会迟到、邮件也写不好、无法及时充分的为你或他们的客户提供良好体验，那么他们也同样无法给你的客户提供良好的体验。

Whitney Quesenbery用5个E开头的单词来描述可用性的5个维度，分别是：Effective，Efficient，Engaging，Error Tolerant，Easy to Learn。
Effective

指的是效力。如果一个系统或者设备无法让用户完成他想要做的工作，无论任务难易或者所花费时间的长短，那么这个系统的效力是很低的。如果我们想测量系统的效力，需要先定义什么是成功的完成一个任务，不管是直接或者曲折的。
Efficient

指的是效率，这个很容易理解。完成任务的时间是衡量效率的主要指标。
Egaging

指的是满意程度，包含了这个界面在多大程度上吸引用户去使用，以及使用中的愉悦感觉，当然还有使用后的满意程度。
Error Tolerant

指的是系统防止错误以及从错误中恢复的能力。
Easy to learn

指的是可学性。某些系统的使用的频率很低，用户可能隔很久才会再用一次。怎么保证用户事隔很久之后还能很容易的再次使用这个系统呢？可学性是一个重要的指标。

Effective
The completeness and accuracy with which users achieve their goals.
Effective is the first E. If a user cannot actually do the thing he or she set out to do, it
probably doesn’t matter whether the experience was short or long, easy or hard. In the end,
they have failed to complete their tasks or meet their goals. If we want to be able to
measure effectiveness, we have to know how people define success or usefulness, whether this is
relatively straight forward or more subtle.
返回

Efficient
The speed (with accuracy) with which this work can be done.
Efficiency may be something that is carefully defined, for example in a call center where
operators are measured on the number of calls they can handle in a day. It may be a
subjective judgement of when a task is taking “too long” or “too many clicks.”
返回

Engaging
How pleasant, satisfying or interesting an interface is to use
“Engaging” replaces “satisfaction,” looking for a word that suggests the ways that the
interface can draw someone into a site or a task. It also looks at the quality of the
interaction, or how well the user can connect with the way the product is presented and
organized.
返回

Error Tolerant
How well the product prevents errors, and helps the user recover from any that do
occur
It would be lovely to say “error free” or “prevents errors” but mistakes and accidents and
misunderstandings will happen. The cat nudges the mouse as you click. You misread a link
and need to find your way back, or enter a number with a typo. The real test is how helpful
the interface is when an error does occur.
返回

Easy to Learn
How well the product supports both initial orientation and deeper learning
A product may be used just once, once in a while, or on a daily basis. It may support a task
that is easy or complex; and the user may be an expert or a novice in this task. But every
time it is used the interface must be remembered or relearned, and new areas of the
product may be explored over time.
返回

这是来自 TOXEL 的一组 Web 设计资源大全，包括字体，CSS 资源，Logo 设计资源，图标，设计启发，教程，Photoshop 素材下载，以及 WordPress 资源。每个类别又包含数十套该类别下的具体资源，可能是有关 Web 设计的终极资源了。强烈推荐！

字体

- 60 套公司用设计字体 [Smashing Magazine]

- 20 套免费手写字体与资源 [Fuel Your Creativity]

- 50 套专业Web设计与印刷用字体 [Noupe]

- 15 套漂亮的高质量免费字体 [Smashing Magazine]

- 21 套来自 DeviantArt 的艺术字体 [Designflavr]

- 设计专业人士使用的7套最佳字体 [Just Creative Design]

- 45 套符合现代设计趋势的免费漂亮字体 [Six Revisions]

CSS

- 50 个强大的 CSS 实用工具 [Smashing Magazine]

- 30 套 CSS 小炒资料 [All Web Design Resources]

- CSS 编辑器评测 [Smashing Magazine]

- CSS 高手的 10 个原则 [NETTUTS]

- 2008 最佳 CSS 设计（中文） [Web Designer Wall]

- 40 个 CSS 生成器 [All Web Design Resources]

- 重置你的CSS [Six Revisions]

- 实现干净代码的12条定律（中文） [Smashing Magazine]

Logo 设计

- 81 个最佳 Logo 设计资源 [Logo Design Love]

- 最佳Logo设计资源 [Just Creative Design]

- 105 个Logo设计资源 [Elite By Design]

- 35 个令人目眩的黑白 Logo [Siah Design]

- 50 套能够带来启发的 Logo [Fuel Your Creativity]

- 2008 年 33 个不俗的 Logo 重设计 [Smashing Apps]

- 30 个精彩的矢量 Logo 设计 [VECTORTUTS]

- 10 个成功的 Logo 设计 [Logo Design Love]

图标

- 2008年50套最漂亮的图标 [Noupe]

- 40 套漂亮的免费图标 [Six Revisions]

- 22 套全新高品质免费图标 [Elite By Design]

- 40 套超漂亮的图标 [Noupe]

设计启发

- 50 个漂亮的博客设计 [Smashing Magazine]

- 40 个有创意的按钮 [PSDTUTS]

- 60 个非常 Cool 非常有创意的 404 页面 [Hongkiat]

- 30 个漂亮的 Web 设计例子 [Six Revisions]

- 2008年40个具有启发性的 Web 设计 [CrazyLeaf Design Blog]

- 50 个漂亮的导航菜单 [Vandelay Website Design]

- Web 设计中的57个矢量字符 [CSSLeak]

- 50 个漂亮的，有创意的展示类站点设计 [Smashing Magazine]

- 40 个漂亮的暗色系 CSS 设计 [Toxel]

- 40 个漂亮的手画 Web 设计 [CSSBuilt]

- 79 个精彩的专辑封面 [Inspiredology]

- 40 套有创意的名片设计 [Toxel]

- 纹理与图样设计展示 [Smashing Magazine]

- 54 幅令人灵魂出窍的数字画 [PSDTUTS]

- 50 个出色的博客页脚设计 [Hongkiat]

- 24 个漂亮的，有创意的网站 Header 设计 [Toxel]

- 富有灵感的 PDF 杂志设计 [Smashing Magazine]

教程

- 41 个最好的 Photoshop 效果教程 [Hongkiat]

- 30 个漂亮的 Photoshop 文字效果教程 [Six Revisions]

- 70 个 Photoshop 美容教程 [Smashing Magazine]

- 50 个很棒的 Photoshop 教程 [PSDTUTS]

- 30 个 Fireworks 教程 [Arbent]

- Adobe Fireworks 教程与下载 [Smashing Magazine]

- 40 个 Wacom 数字画板教程 [DesignM.ag]

- 50 个出色的 AJAX 教程 [Smashing Magazine]

- 50 个富有创意的 Photoshop 文字效果教程 [PSDTUTS]

- 23 个不可思议的 Photoshop 教程 [Elite By Design]

- Adobe Illustrator 教程 [Smashing Magazine]

Photoshop 资源下载

- Photoshop Custom Shapes 集 [Smashing Magazine]

- 20 个 Photoshop 印刷作品与画笔资源 [PSDTUTS]

- 75 个超高分辨率 Photoshop 画笔 [Elite By Design]

- 50 个不可或缺的 Photoshop 画笔 [Smashing Magazine]

- 200 套 Photoshop 画笔 [You the Designer]

- 50 套免费的 Photoshop Pattern [Emma Alvarez]

- 55 套免费的画笔与矢量图 [Web Resources Depot]

- 40 套 Photoshop 万圣节主题画笔 [PSDFan]

WordPress

- 100 出色的 Wordpress 免费主题 [Smashing Magazine]

- 30 个最实用的 Wordpress 技巧 [Hongkiat]

- 45 套免费的 Wordpress 网格布局主题 [WPZOOM]

- 45 套必须要看到 WordPress 主题 [Noupe]

- 20 套 Wordpress 公司网站主题 [Blogsessive]

- 24 套高质量免费 Wordpress 主题 [Toxel]

- 21 套令人耳目一新的免费Wordpress主题 [Smashing Apps]

- 50 套漂亮的免费 Wordpress 主题 [Six Revisions]

- 10 个寻找免费 Wordpress 主题的地方 [UPrinting]

- 50 个最好的 Wordpress 主题 [CrazyLeaf Design Blog]

- 10 个 Wordpress 实用 RSS 技巧 [Smashing Magazine]

- 45 个出色的免费 Wordpress 主题 [DzineBlog]

本文原文来源：http://www.toxel.com/design/2008/12/19/top-75-best-design-resources-of-2008/
中文来源：COMSHARP CMS 官方网站

这是一个著名的模型，把UCD过程中的每个工作步骤和内容都完整而流畅的概括进来。很大程度上帮助我理清了UCD相关的混乱头绪。以这个模型为基础，我整理了一个比较可行的UCD流程。

当然迫于条件的限制，我们不可能有机会去做用户研究相关的工作，通常是从竞争对手的分析中来获得关于用户的理解和灵感。用Jesse James Garrett的话说，在相同领域做相似的事情的研发团队，所服务的用户必定具有某种程度的相似性。按照产品分析和设计套路倒推，解剖优秀产品的设计策略，可能是快速建立用户认识的窍门。可能有人觉得理解用户是市场的事，显然这是片面的。其实理解用户能够在以用户为中心的设计过程中帮助设计决策，如果没有这个认识，很可能会在后面的设计决策和讨论中陷入个人英雄主义的表演和政治博弈之中。当然，寻找用户还能使我们收获更多的领域知识，整理对手的优缺点，并能在后续的概念设计、交互设计和原型设计中提供极大的参考价值。

这个流程不是一个快速开发的流程，虽然在用户分析中投机取巧节省了一点时间，但是在交互设计阶段需要消耗相当的努力和创造激情，当然还有时间和成本。在急于看到成果和关心“成本”的队伍中，很容易被一笔带过或敷衍了事，很多人习惯以看到界面设计框线图作为设计成果的标志，呵呵，画框线图其实是很简单的。缺少慎重的交互分析基础的框线图，很容易浮于形式而缺少内涵。

和朋友们交流一下吧！

六个阶段，每个阶段又有关键的工作内容和要求。

第一阶段：基础调研

竞争产品分析
寻找市场上的竞争产品，挑选3-5款进行解剖分析。整理竞争产品的功能规格；并分析规格代表的需求，需求背后的用户和用户目标；分析竞争产品的功能结构和交互设计，从产品设计的角度解释其优点、缺点及其原因，成为我们产品设计的第一手参考资料。

领域调研
结合上述分析基础和资料，纵观领域竞争格局、市场状况，利用网络论坛、关键字搜索等手段获得更多用户反馈、观点、前瞻性需求。

产出物：相应的对比分析文档和领域调研报告

第二阶段：产品分析

产品定位
从软件提供者的角度分析产品推出的意义和重点关注的方面，实际考量、丰满决策层的idea，明确列出产品定位，通过讨论修缮取得决策层的认可；

用户分析
结合竞争产品的分析资料，采用定性分析的方法，获得对产品目标用户在概念层面的认识；

产品概述
以软件提供的身份，以最简短的文字，向用户介绍产品，突出产品对用户的价值。避免功能点的简单罗列，而应该在归纳总结的基础上突出重点；

功能需求规格整理
在归纳关键功能的基础上，结合竞争产品规格整理的领域认识，从逻辑上梳理需求规格列表，重在逻辑关系清楚、组织和层级关系清晰。划定项目（设计和研发）范围；

产出物：用户分析文档和产品概述、功能规格列表

第三阶段：交互设计（功能结构和交互流程设计）

产品概念模型分析
从产品功能逻辑入手，结合对常见软件的经验积累和竞争产品的认识，加上对用户的理解，为产品设计一个尽量接近用户对产品运行方式理解的概念模型，成为产品设计的基础框架；

功能结构图
在产品概念模型的基础上丰富交互组件，并理顺交互组件之间的结构关系；

使用场景分析
模拟典型用户执行关键功能达到其目标的使用场景；

交互流程分析
模拟在上述概念模型和功能结构决定的产品框架之中，支持使用场景的关键操作过程（即鼠标点击步骤和屏幕引导路径）；

产出物：产品设计文档的交互设计部分

第四阶段：原型设计（信息架构和界面原型设计）

信息架构和界面原型设计
设计产品界面中应该包含的控件数量和类型、控件之间的逻辑和组织关系，以支持用户对控件或控件组所代表的功能的理解，对用户操作的明确引导；所有界面设计成为一套完整的可模拟的产品原型；

设计要点说明
对界面设计的重点添加说明，帮助涉众对设计的理解；

产出物：产品设计文档的原型设计部分

第五阶段：详细设计（详细设计和交互逻辑表述）

详细设计
完善设计细节、交互文本和信息设计（Message box）；

控件和交互逻辑表述
对界面控件/控件组/窗口的属性和行为进行标准化定义，梳理完整的交互逻辑，用状态迁移图或伪代码形式表示；

产出物：产品设计文档的详细设计部分

第六阶段：设计维护（研发跟踪和设计维护）

语言文档整理
设计通过评审之后，把产品中所有的交互文本整理成excel文档，预备研发工作；

研发跟踪维护
进入研发阶段后负责为研发工程师解释设计方案、问题修改、文档完善、Bug跟踪等；

产出物：产品语言文档，设计调整维护

转自：http://hi.baidu.com/interaction_design/blog/item/2f610b4e7c0fe0ccd1c86ae6.html，谢谢分享！

It is much easier to criticize somebody else’s work than to create something cool yourself. But if you apply a systematic approach to criticizing, make a numbered list and prepare illustrations, it will be regarded as a fully-fledged analysis! In my opinion, icon design is undergoing a transitional period. On the one hand, screen resolutions are increasing, hence enhancing icons. On the other hand, we still have good old pixels. Icons sized 16×16 and even smaller are still widely used. And so, here are the most commonly observed mistakes in icon design…

#1 Insufficient differentiation between icons

Sometimes within one set of icons, we have icons that look alike and it is very hard to understand what is what. If you miss the legends, you can very easily get the icons mixed up.
1.图标间差异不充分
有时，在一套图标中，我们的一些图标看起来很像，这让人很难分辨出哪个是哪个。如果你不注意说明，你会很容易把这些图标混在一起。

Icons from the Utilities section in Mac OS X. I am always getting them confused and launching the wrong application.
MacOS X中的图标。我经常把他们搞混以致选错程序。

The problem is aggravated by having small size icons displayed on screen.
问题在显示小图标时变得更严重。

#2 Too many elements in one icon

The simpler and more laconic the icon, the better. It is preferable to keep the number of objects in a single icon to a minimum.

Nevertheless, Microsoft’s designers, inspired by the new format of icons featured in Windows Vista, decided to go big and drew bloated icons to justify their bloated budget:
2.图标中元素过多
图标越简单、简洁，就越好。把一个图标中的元素控制到尽可能少的数量是很可取的。
然而，微软的设计师们，受到windows vista新的图标设计特征的启示，决定设计巨大、肿胀的图标来证明他们拥有庞大的预算。

Each icon presents us with a mini-story with an intertwined plot. The problem is that in small size you are unable to work out what is depicted. Even in larger sizes, it is not always that easy to decipher the icons.
每个图标用复杂的构图给我们展现出微小的信息，问题在于在使用小图标时你无法搞清它在描述什么。甚至使用在大图标时，有时也不是那么容易搞清图标的含义。

#3 Unnecessary elements

An icon should be easy to read. The fewer elements it has, the better. It is better if the whole image is relevant and not only part of it. Therefore, you have to pay attention to the context of using icons.

Let us take for instance some database icons:
3.不必要的元素。
图标应该被轻松识读。图标元素越少越好。最好让整个图像具有相关性，而不是只是一部分。因此，你必须注意使用这些图标的环境。
让我们看看数据库中图标的例子：

At first glance everything looks alright.

But if this application (or a separate toolbar) deals only with databases, we can (and should) remove the unnecessary part:
一眼扫过，没什么问题。

但是如果这个应用程序（或者独立工具栏）仅仅与数据库有关，你可以（也理应）去掉不必要的部分。

The sense is not lost here but the icons become much more discernible.

Here is a real-life example of unnecessary elements occurring in BeOS 5 icons:
含义没有丢失，可是图标更好辨识了。
这是个BeOS5图标中使用不必要元素的鲜活例子。

Ticks here are absolutely superfluous. By the way, why are they done in red?
这里的对号绝对多余，另外，它们为什么是红色的？

#4 Lack of unity of style within a set of icons

It is a unity of style that unites several icons into a set. The uniting property can be any of the following: color scheme, perspective, size, drawing technique or a combination of several such properties. If there are only a few icons in the set, the designer can keep some rules in his head. If there are many icons in the set and there are several designers working on them (for instance, icons for an operating system), then special instructions are created. Such instructions describe in detail how to draw an icon so that it fits straight into the set.
4.一套图标的风格缺乏一致性
图标风格上的一致使得多个图标称为一套。一致性可以是以下的任何一种。色彩设计、透视、大小、绘画技巧或以上多种的结合。如果一套中只有一些图标，那么设计者可以把一些规则记在脑中。可是如果一套中有许多图标，或者有好几个设计者在绘制（比如制作操作系统的图标），那么就要制定一些特别的规则。这些规则需要从细节描述如何绘制图标，从而使其契合这个系列。

A multitude of styles in the shell32.dll file in Windows XP. This is the default set of icons suggested to a user wishing to change an icon.

#5 Unnecessary perspective and shadows in small icons

Progress does not stand still: interfaces have gained the potential to display semi-transparent objects, lost the limitation on the number of colors and there is now a trend towards 3D icons. But is it really all that useful? Not always! Especially if we are talking about icons sized 16×16 or smaller.

For example, let us take the application manager from GNOME 2.2.0 (RedHat 9):
5.小图标中使用不必要的透视和阴影
事物一直在发展：界面中已经可以呈现出半透明物体了。没有了颜色使用数量的限制，目前有向3D图标发展的趋势。可是，这真的有用吗？不一定！尤其是在16X16乃至更小的图标中。
举例来说，让我们看看GNOME 2.2.0 (RedHat 9)的应用程序管理器。

Perspective in icons of such minute size is unnecessary and even counter-productive.

And here is the application manager from Windows XP:
在这么小的图标中使用透视画法没有必要，甚至是事与愿违
这是XP的应用程序管理器

As standard, icons in Windows XP are given a two-pixel black shadow; but in 16×16 size the shadow appears too large and makes the icons look dirty. The Address Book icon looks especially bad in this set.
作为标准，XP中的图标是用了2个像素的阴影，但是在16X16的图标中，这种阴影显得太大了，而且让图标显得很脏。地址簿在这种形式中显得特别差。

#6 Overly original metaphors

Selecting what is to be displayed in an icon is always a compromise between recognizability and originality. Before a metaphor (image) is developed for an icon it is wise to see how it is done in other products. Maybe the best solution lies not in coming up with something original but rather in adopting the existing solution.

An example of excessive originality is the bin icon in OS/2 Warp 4, which is not actually a bin at all but a shredder.
6.过于原创的隐喻
在选择图标要表现的内容时，要兼顾易识别性和原创性。在一个隐喻（比喻）使用前，看看它在其他产品中的表现是明智的。也许最好的方式不是选择原创而是接受已有的方法。
OS/2 Warp4中回收站的过度创意就是一个例子。它实际上不是一个回收站，而是一个碎纸机。

Another problem with choosing a shredder is that there is no one well-known type of shredder out there. The icon appears very much like a printer with an octopus hidden inside. What is more, it is absolutely unclear how a full bin would be displayed according to this metaphor.

#7 National or social characteristics not being taken into account

It is always necessary to take into account the conditions in which your icon is going to be used. An important aspect here is national characteristics. Cultural traditions, surroundings and gestures can differ radically from country to country.

Let us suggest that we need to draw an icon for working with e-mail. It makes perfect sense to use a metaphor of real paper mail. A mailbox for example.
7.没有考虑国家和社会特征
考虑到你的图标将被运用到的环境是十分必要的。一个重要的方面就是国家特征。文化传统，环境，手势在不同国家的意思可能完全不同。
让我们设想一下，如果我们要画一个关于电子邮件的图标。使用一个真实邮箱的创意是绝好的。例如以下邮箱：

These images are courtesy of the Wikipedia article entitled Post box.

The answer can be found in the manual on creating icons for Mac OS X: "Use universal imagery that people will easily recognize. Avoid focusing on a secondary aspect of an element. For example, for a mail icon, a rural mailbox would be less recognizable than a postage stamp."
这些邮箱图片选自维基辞典。
答案可以在MacOS X图标创作指南中找到。“使用可以被轻松识读出的全球通用图像。避免注重在一个元素的次要方面。例如：一个电子邮件图标，使用一个乡村邮筒比使用一枚邮票难认。”

The idea of using a stamp is great but the use of the eagle red-tailed hawk image is definitely questionable.

However, you need to account not only for national features… That reminds me of something funny. Once, we needed an icon for a data filter, which is often portrayed using the metaphor of a funnel. It was drawn like this:
使用一个邮票的创意很好，可是使用一个红尾鵟的图像显然是有问题的。
然而，你不仅仅要考虑国家元素。这让我想到了一些有趣的事。曾经，我们需要一个数据过滤器的图标。它一般被做成一个漏斗。它是这样画的：

The client’s response was as follows: "I do not really understand why for a filter, you drew an icon shaped like a Martini glass!"

#8 Images of real interface elements in icons

The manual on creating icons for Mac OS X warns us: “Avoid using Aqua interface elements in your icons; they could be confused with the actual interface.” But all in vain! For instance, take a look at the following icon:
委托人这样表示：“我难以理解到它是一个过滤器，你画了一个形状类似马提尼酒杯的图标。”

8.在图标中单纯使用界面化图标。
MacOS X的图标创作指南告诉我们：“避免在你的图标中使用Mac Aqua界面元素。他们会对真正的界面元素感到困惑。”但一切都是徒劳。比如说，看看下面的图标：

You reach out to click on the radio button but end up clicking the whole icon!

Here is an interesting example from the OmniWeb browser interface:
你本要点击收音机图标，可是结果点击了整个图标。
这是OmniWeb浏览器界面的有趣例子：

Pay attention to the Previous and Next buttons, a rare type of button with legends underneath. Oops! They are not buttons at all, they are icons!

#9 Text inside icons

This mistake is commonly seen in application icons. Clearly the first thing that comes to mind when working on an application icon is to adapt the application’s logo. What is so bad about the text inside the icon? Firstly, it is directly language-related and so impedes localization. Secondly, if the icon is small, it is impossible to read the text. Thirdly, in the case of application icons, this text is repeated in the name of the application.
注意向前和向后的按钮，少见的有说明文字在下面的图标。哦！它们根本不是按钮，他们是图标！

9.图标中的文字
这个错误在应用程序图标中很常见。明显，当使用一个应用程序图标时首先跃入脑海的是应用程序的logo。把文字放到图标里多不好啊！首先，它受限于语言而阻碍了本土化。其次，如果图标很小，读出文字就很难。第三，在有应用程序图标存在的情况下，这个文字在应用程序名字中重复了。

#10 Outside the pixel framework

As a rule, this problem occurs if you use a vector editor for drawing icons. In large size everything looks pretty and clear; but in reality the icons are small, and under rasterization anti-aliasing frets the objects’ borders.
10.边沿像素
作为一个规则，这个问题在你使用矢量绘图工具绘图时存在。在大的尺寸下，每样都很美丽和清楚。但实际上这些图标很小，并且物体边沿需要完成反锯齿栅格化处理。

本文引自：http://turbomilk.com/truestories/cookbook/criticism/10-mistakes-in-icon-design/
翻译：zEPHIRUz 来自iconfans

忽略了用户

开发者常常只设计他们自己知道的，而非用户知道的东西。这个古老的问题在软件开发的多个领域发生，例如测试、文档编写等等。设计界面时这样会更有害，因为用户在使用产品的时候会立刻感到一点不熟、无所适从。这个错误是最应努力避免的。

由用户控制

GUI设计者倾向于控制程序是显而易见的，在程序中通过使菜单项和控件变灰或变黑，不断的试图控制用户的走向。控制用户同事件驱动的程序设计风格是极端矛盾的，事件驱动要求是用户而非软件来决定什么事件应该发生。作为开发者，如果你花费了大量的时间在动态的控制控件的变灰和变黑中，就需要反省一下自己的设计方法和实现。可能你正在试图控制用户，而他不希望被控制。在业务变化越来越快的今天，用户界面的弹性将成为适应改变的关键方法。允许用户用各种方式甚至是你自己都想不到的方式使用程序，有点令人心里不安，但这会让你作为开发者很有成就感，同时赋予用户更大的权利。

顶层有太多的功能特性

看一下1985年产的录像机，然后再看一下1995年产的。你一定会为这两款录像机界面上的差异感到震惊。1985年的那款在前面板上会有各种各样易用的按钮，很多按钮会因为你几年前丢了说明书而永远不知道它们是干什么用的。1995年的那款可能只有大家常用的几个按钮：播放、快进、倒带、停止和弹出。这款可能比十年前那款有更多的功能，但这些功能将被隐藏在弹出式面板或滑门之后，你需要的时候才去用它们，而不是放在表面上。

同样，你应该只选择常用和易用的功能，避免把所有的东西都放到第一屏或者在工具条上放不常用的按钮。多做一点分析，看看那些功能可以放到隐藏的面板而非前面板。

成功的用户界面（GUI）

现在，让我们谈谈一些成功的GUI设计。成功的GUI设计具有很多共同的特征。最重要的，出色的图形用户界面（GUI）应该是非常带有直觉特征的。实现这些的一个方式是尽可能的采用现实世界中的抽象（暗示、隐喻）。例如，我最近看到一个用Visa卡和Master（万事达）卡图标做为按钮图标的程序，这个按钮用来指示用户如何付款，这个图形立刻使用户产生一种直觉并帮助他们更快的学会使用程序。

出色的用户图形界面的另一个重要特征是速度，更专业一点说，是响应速度。很多速度问题的处理是通过GUI而非硬件。根据应用程序的类型，速度可能是决定程序是否被用户群接受的成败关键。例如，如果你的程序是面向在线事务处理（OLTP）的，操作太慢很快就会导致用户产生放弃系统的念头。

你可以用几种方法使用户界面上显得很快的样子。除非绝对必要，不要重绘屏幕。另一个方法是使这个屏幕的所有区域同时可用，而非一个区域一个区域的来。另外，根据用户的熟练程度，应该在用户界面中加入一些功能，这些功能可以让熟练用户在不同的区域快速的输入数据。这些功能包括重复功能、快捷键、带有有意义的图标的按钮等等，所有这些可以使速度快的用户可以控制界面并加快数据的输入。

应该怎样和不该怎样

每个好的开发者都应该把目标定在尽可能的设计最好的图形用户界面。 但如何把这个目标变成现实呢？下文中，在各个章节给出了图形用户界面设计的规范（标准）。

同任何出色的专业人士一样，你需要一些可重复的成功设计法则。我们就是用这里提供的法则为我们的客户服务并教授了超过20000名的国内国际GUI设计专业的学生。这些规范也会对你有帮助的。

对人的理解

程序必须反映用户的视角和行为。要充分理解用户开发者首先要理解人，因为我们都具有共同的特征。人类通过辨别比通过记忆学习起来更容易。要经常试着提供一个数据列表给用户，而非让用户凭记忆自己输入数据。普通人能记住2000到3000单词，但却可以认出50000单词。

留意不同的视角

很多设计者在设计图标或程序整个行为的时候会不自觉的陷入视角陷阱。最近我看到一个图标，它用于在一个会计系统中指明汇总。为了标示这个功能，设计者花了很多心思在画一个把桂圆组合到一起的图标。不幸的是，这个系统的用户对这个图标的喻意更本就没有一点概念，虽然它从设计者的视角来看是非常直观的。保留图标列表中给出了标准图标，如图一所示，可以帮助你消除这些问题。（原Html文件中就没图，估计老外也时兴转载）

清楚一致的设计

很多GUI程序对最终用户常常不够清楚。一个增强程序清楚表述能力的有效方法是使用列表中的保留字进行开发。用户中最常见的抱怨是某个术语表述的不清楚或不一致。我常常看见开发者们激烈的争论按钮或菜单项上用那个术语更合适，而同时就在一墙之隔的另一群开发者也在争论同样的问题，在程序发布之后，一个屏幕上可能写着“项目”，而下一屏却写着“产品”，而第三屏又变成了“货物”，可是其实这三个术语是指的同一个东西。这种一致性的缺乏导致用户非常迷惑并产生操作失误。

图二给出了保留字列表的一个例子。一个开发小组应该用更多的保留字来完善和扩充这个表。

同常见软件保持一致性的设计

出色的用户界面在程序中将实现同用户以前用过的其它成功软件一致的动作。写商用程序软件的时候应该尽可能的给用户提供这种一致性。例如，EmbassySuit和CourtyardMarriot连锁旅店增长的非常快，因为商务旅行者知道这些连锁的旅店能为他们提供相似的客房和其它大体差不多的服务。最次也使得商务旅行者不必每到一个新的城市都为找新旅店发愁。你的软件的商务用户有同样的需求。你程序中提供的每个新的特色都可能让用户感到焦躁，迫使他们反复试验或着给你的维护小组打昂贵的长途电话。

转自http://hi.baidu.com/liujg/blog/item/9e5cacc2fe41ea1d0ff47749.html