z 牛年格言

• 第一法言：欲望，了解你真正想吃的草是什么。
• 第二法言：核心，了解哪种草对你而言最重要。
• 第三法言：精深，与其吃十丛烂草，不如吃一丛美草。
• 第四法言：专注，当你在吃草时，你只是在吃草，你就能成为牛神。
• 第五法言：策略，如果我们不能跳过一个深水洼，就绕过它。
• 第六法言：决断，如果土狼惹翻你，想法子干掉它，不要等待信心的降临。
• 第七法言：自律，不要因为你的自我纵容吃坏了肚子。
• 第八法言：宽容，自已或他牛偶尔犯错，要委婉地批评和温和地鼓励。
• 第九法言：坦诚，对自己与他牛坦诚。如果喜欢一只美牛，就对她说我爱你。
• 第十法言：变通，要活出美丽的牛生，要不断学习、变通、成长。

水果群里的聊天记录

飞吧小猪 09:47:33

咋今天这么安静捏

飞吧小猪09:49:19

我今天很忧郁~~~

维生素~~~西~ 09:49:39

为啥呀?

西瓜宝宝@_@ 09:49:48

会多

飞吧小猪 09:50:45

节前忧郁症

维生素~~~西~ 09:51:27

是说得大吃大喝才能治愈嘛?

飞吧小猪 09:52:33

不，要你们请我大吃大喝才能治愈，而且要多次，避免复发

维生素~~~西~ 09:58:05

换话题了~~~~刚才聊的太血腥了,哈哈哈哈

 

FYI:10个实用的Web应用程序界面技巧

 10个实用的Web应用程序界面技巧

 

如今越来越多的应用程序被搬到了网上。因为没有平台或者安装上的限制，这种软件即服务的模式看起来相当诱人。Web应用程序界面设计的核心自然是Web设计，然而它的重点却主要放在了功能性上。要与桌面应用竞争的话，Web应用必须提供简单、直接、灵敏的用户界面，以便让用户们可以省时省力地把事情做完。

在过去的日子里面我们并没有讨论太多关于Web应用的事情，而现在该是时候让我们来看一看一些实用的技巧以及设计方案了。这些东西可以让我们的Web应用变得更加的用户友好，也更加漂亮。这篇文章列出了我们在现代Web应用的设计模式以及实用设计方案上所进行的扩展性研究的第一部分。下文中你将看到被许多成功的Web应用所采用的10个实用的界面设计以及最佳实践。

如果有什么好主意，好方法或者代码解决方案请在评论中提出来。我们第二部分的研究很快就要发布了：敬请关注RSS 和 Twitter 。

你也许也有兴趣读读这几篇相关的文章：

• 对设计者和开发者来说实用的5个代码解决方案
• 增强用户界面设计的10个实用技巧
• 高效设计的10项原则
• 高效设计的又五条原则
• 在Web设计中活用透明度

1. 按需的界面元素

在用户界面设计中，简单化是很重要的一部分。你在屏幕上放越多的控件，你的用户就要花越多的时间来弄明白怎么使用这个界面。当可选择的东西少下来之后，那些可用的功能就显得很明朗了。然而简化界面并不是那么容易的一件事情，尤其是当你不想因此而限制了应用程序的功能性时。

当你点击Kontain的搜索文本框时，一个类似的下拉菜单就出现了。所以如果你想缩小你的搜索范围，你可以用这个菜单来选择你想要找的内容的各类。把这些选项隐藏起来就使搜索框得以简化。

有一个方法很简单，那就是把高级的功能给隐藏起来。找出你界面中最常用的那些功能，然后把剩下的都藏好。你可以用弹出式的菜单或者控件来实现这一功能，这在桌面软件中是非常常见的。比方说你的搜索栏有一些高级的过滤器，就可以把它们放进搜索栏后面的一个特殊的下拉菜单中。如果用户需要过滤器，他们只需用鼠标点几下就可以使用了。然而决定留下什么隐藏什么就不那么简单了，这取决于这些控件有多重要，被使用到的频率又有多高。

当你点击CollabFinder中的搜索链接时，并不会跳到另一个页面去。相反的，一个控件拉了下来，你可以在此直接开始搜索。

 

2. 专业化控件

选择适合当前情况的界面控件很重要。不同的情况可以用不同的方式来处理，而某些控件在处理特定情况的时候就比别的要好。

Backpack在选择一个提醒时间的时候有一个简洁的日历控件。

比如说要选择一个日期的话，你可以通过下拉列表来分别选择日、月、年。然而同一个你可以直接点击并选择日期的日历控件比起来，下拉菜单就显得不那么高效了。日历控件还可以帮你更轻松地选择日期、星期、月份（特别是区分工作日和周末），因此可以让你的决定带有更多的信息量，也比用简单的下拉列表要来得快。

MyBankTracker的APY计算器用了一个很方便的滑动选择器可以让你尝试不同的组合。

另一个很棒的例子就是滑动选择器。当然，你总是可以手动输入数字的，但是在某些情况下滑动选择器控件好多了。不仅仅因为它们很容易使用――只要点点拖拖就行了――而且你可以看到你的选择在最小值和最大值的范围里处在一个什么位置。

 

3. Disable pressed buttons禁用点过的按钮

在表单使用上Web应用常碰到的问题之一就是提交的过程。在一个简单的表单里，如果你在快速点多次"提交"按钮的话，这个表单也会被提交多次。这样所带来的不良后果是它会创建同一项目的多个副本。要防止重复提交并不是很难，但是在大多数Web应用中却是非常重要的。

防止这种行为分成两个层面：客户端及服务器端。我们并不讨论服务器端的事情，因为这随着你使用的编程语言和后台架构不同而有所变化。你所做的就是对于任何提交过来的数据，都检查它是否重复，如果重复的话就阻止住它。

Yammer在你的新消息提交的时候把"更新"按钮禁掉。

客户端要做的事情就简单多了。你要做的只不过是在"提交"按钮被点击的时候把它禁用。最简单的方法就是用一段JavaScript代码：

<input type="submit" value="Submit" onclick="this.disabled=true" />

当然了，我们会建议你也要实现服务器端的检查以确定能拦住这些重复数据。

 

4. 给模态窗口加上阴影

给弹出菜单或者窗口加上阴影可不仅仅是为了吸引眼球。这些阴影通过增加菜单或者窗口的维度来使它们变得醒目，同时也能来把这块区域变暗以阻止下方内容的干扰。

这个技巧在传统的桌面应用中已经根深蒂固了，它帮助用户把注意力放到出现的窗口上。由于在Web应用上，大多数模态窗口并不是很容易和主内容区分开，而阴影则让它们看起来离用户更近一点，因为这样窗口看起来就像在一个三维的空间中并且位于页面其它内容的上方。

Digg的登录窗口有一个很宽的阴影，它挡住了正文页面对弹出窗口的影响。

要达到这个效果，设计者们通常会创建一个容器，用一张透明的PNG图像作为其背景，并把内容放在这个容器中。而在这个盒子的四周则设有等宽的内间隔。另一个方法就是用一个一张带透明边框的背景图片，并且用绝对定位来进行定位。这也就是Digg的实现方法――这就是他们使用的图片（dialog.png）。而以下则是他们使用的HTML代码和CSS样式：

(X)HTML:

	<div id="container">  		<div style="display: block; top: 236px; opacity: 1;" class="dialog">  			<div class="body">          		<div class="content">          			...          		</div>          	</div>          </div>        </div>  

CSS:

.dialog {      position: absolute;      left: 50%;      margin-left: -315px;      width: 630px;      z-index: 100001;    }  .dialog .body {      background: url(/img/dialog.png) 0 0; /* semi-transparent .png image */      padding: 40px 13px 10px 40px;  }  

另一种选择是，你也可以使用基于JavaScript的阴影效果，这用到了我们在之前讨论过的CSS3的属性。需要注意的是IE并不支持这些属性。

Basecamp项目切换器用到了一个大的淡色阴影来使菜单醒目。

 

5. 告诉你该干些什么的空白状态

很重要的一点是你不光要用一些样本数据来进行测试，还要确保它在暂时还没有数据的时候也能看起来不错并且有所帮助。

当这个页面上还没有信息或者查询的时候，我们可以把一些有用的消息放入空白处来告诉用户该从哪里开始。比如说，一个项目管理应用程序的主页上可以列出用户的项目，但是如果还没项目的话，你就可以在上面放一个链接指向创建项目的页面。即使在页面上已经有一个可以实现此功能的按钮了，再加一点点帮助信息也坏不到哪去。

Campaign Monitor在你准备开始创建一个电子邮件活动的时候把你指向正确的位置。

这一技巧可以促动用户去尝试各项服务，并且在注册之后继续使用服务。给用户展现应用程序的每一个步骤说不定可以帮助他们理解应用程序所提供的优点，以及这些对他们是否实用。给用户展现一些最重要的选项也很好，但是只要那些最重要的就够了――给他们看太多选项并没有什么意义。请牢记，用户通常只想知道一个大体，知道他们能从中得到些什么，他们可不想了解细节的问题――他们没时间，也没兴趣。

使用空白状态来促动用户，你可以大大地减少那些立马离开的人数，并且帮助你的潜在用户了解你的系统是怎么运作的。

如果你还没创建过表格的话，Wufoo的表单页面有一个很大的、友好的消息，上面邀请你来新建一个表格。

 

6. 鼠标按下的按钮状态

许多Web应用都有自定义样式的按钮。这些是用加了自定义的图片作为背景的链接或者是输入按钮做出来的。默认的输入按钮在许多情况下也许并不那么合适，而文本链接有时候则太难以察觉了。所以挑战来了，当你把你的链接弄得和按钮长得一样的时候，它们的表现应该也和按钮一样――这包括当用户点击链接时的一个按下的状态。

这不仅仅是视觉上的调整。即时给出反馈可以让应用程序看起来更加敏捷，并且让用户体验更加接近于桌面应用。

你可以通过配置CSS中链接的active伪类来添加一个按下的按钮状态。比方说，如果你的链接有一个add_task_button的样式，你可以去更改它的活动样式add_task_button:active。

Buttons in Highrise中的按钮就有一个按下时的状态，这让用户对反应速度感到很满意。

 

7. Link to the sign-up page from the log-in page在登录页面放置注册页面的链接

没有在你的应用程序上注册过的人们总是难免会来到登录界面的。他们很有可能想试试看你的应用程序，但是不能马上找到一个注册页面。也许他们想试一试那些只有注册过的用户才能使用的功能。

没有Delicious的账号吗？没问题，在Deliious的登录界面上就放了一个注册链接。

Goplan在登录页面上放了一个漂亮彩色的按钮，指向注册页面。

在你的登录页面上放一个注册链接可以使这一切变得简单。如果他们没有账号的话，他们无须去找这个注册页面。我们的研究也证实：（在100家Web表单值得关注的流行网站中）有18%都在登录表单旁边放了一个注册表单或者是通往注册表单的链接（YouTube、Reddit、Digg、Lulu、Metacafe等）。

 

8. 上下文相关的导航

还有很重要的一点就是在每一个的上下文中想一想用户希望看到些什么，以及他们需要些什么。你没必要在哪里都显示同一个导航控件，因为并不是所有的情况下用户都会需要它的。

上下文相关控件的一个最好的例子就是Microsoft Office 2007界面中的一个改变――原先的工具栏被Ribbon控件所代替了。Ribbon中的每一个选项卡都放置了与某一特定活动相关的控件，比如说编辑段落、校正或者写作。Web应用也可以从类似的上下文相关的控件中得益，因为这些控件给你看到了一个更加清爽的界面――它只展现用户所需要的，而并非全部内容。

Lighthouse有一个熟悉的选项卡式的导航菜单；然而在每个选项卡下它还有一个二级的菜单。这一级的菜单只显示与当前的活动选项相关的一些项目。

 

9. 给关键功能更多关注

并不是所有的控件都有着同样的重要性。比如说，在创建一个项目的时候，你可能会有两个选项："创建"和"取消"。"创建"链接就更重要一点，因为这是用户在大多数情况下会去做的事情。只有很少的情况下他们才需要取消这一操作。所以如果把这两个控件并排放置的话，你就不能同时给它们相同的重要性。

在Lighthouse中的"创建"按钮。你可以看到在它旁边有一个文本的"取消"链接。按钮不光体现出了重要性，而且有一个更大的可点击范围，而且因为它有边框，也就更加容易被关注。

要把强调放在"创建"链接上面的话，我们可以为它使用不同的样式，或者是使用不同类型的控件。有些应用程序在创建的时候使用表单输入按钮，而把取消动作当成文本链接。这不仅仅给了创建按钮更多的可点击空间，还让用户在寻找创建按钮时能把目光放在按钮身上。

10. 嵌入视频

如果说图像和文本是用来沟通和教会你的用户使用你应用程序特性的一个好方法的话，视频就是更好的选择了。在网上，视频这种方式在近几年来已经积攒了大量人气。对于Web应用来说，视频通常用于当作展示产品特性的屏幕录像，尽管这并不是使用视频的唯一方法。

GoodBarry在首页上放一了段视频来展示其产品。它使用屏幕录像的方法来告诉用户从哪里开始。

MailChimp的管理面板上就有一段教程视频用于帮助新用户。

有些Web应用在应用程序内部使用视频来告诉用户如何使用某些特性。用视频来演示你的产品该如何使用真的很棒，因为相比于一整页的文字来说视频更加直观，也清楚多――用户们一看就知道该做些什么。

FYI:区分UI设计中的装饰元素和意义元素

区分UI设计中的装饰元素和意义元素

简介

用户体验专家yummy翻译的一篇文章，与我共享此文，在译言上与UI设计师们进行交流。

UI设计有很多细节问题可以研究和细细品味，设计中一个小小的不同就会产生不同的暗示意，本文就某网站的一项细节设置进行了细致的分析。

UI设计是艺术和科学的结合体，细节决定成败。

区分UI设计中的装饰元素和意义元素

作为界面设计师，总是希望作品好看而且有道理。屏幕上每个元素都应当看起来舒服，界面也不能只是艺术品。界面要承担工作。界面要能提供信息，清晰说明动作的可能过程。如果设计师够熟练，视觉吸引和功能，漂亮与清晰，装饰和意义，这两个因素经常共存。但是，我们希望设计看起来是什么样子和客户如何理解设计，这两者之间会存在着冲突。我最近在 GitHub网站就碰到了装饰与意义的问题。

GitHub网站全局导航

登录到GitHub，全局导航出现在头部分右侧。圆角矩形包裹了全局导航块。

观察一下包裹全局导航块的圆角矩形。其外侧是灰色边框，整个全局导航块呈淡蓝色背景。边框和背景属于装饰性。它们为导航块增添了风格和视觉趣味。为了帮助你看清楚边框和背景的装饰性质，下面有两张图，上一张是原图，下一张没有边框和背景。

两张图看起来都很舒服，功能也没有变化。你会说两者之间的区别只是审美角度、或者个人观点问题，没必要再讨论。但是，事情没这么简单。容器元素包裹链接远远不是风格问题。装饰容器实际上改变了链接的意义，正如我们下面会讨论的，装饰容器给GitHub造成了问题。想明白为什么，先来了解容器元素如何影响客户理解设计。

容器影响所包含元素

容器中放置链接，暗示了容器和链接之间的关系。从技术而言，容器给链接加上了范围（scope）。网络应用工具中经常出现的编辑（edit）链接，是大家都熟悉的例子。

上面两个编辑链接都被容器限制了范围。浏览者期望上一个编辑链接用来编辑Michael Bluth，因为这个链接和Michael Bluth出现在同一个框中。两个链接一样，容器在发挥作用。

这个道理如何应用到GitHub全局导航？repositories（项目的意思，译者注）中的all链接有问题。GitHub有两种信息，一种是任何人都可以浏览的repositories，另一种是用户自己的repositories。这就是我们在其导航设计中发现的问题。

GitHub的装饰设计暗示了repositories链接有范围限制

全局导航块包裹在边框中，”all”链接受到当前用户的限制。点击链接，应当期望看到属于当前用户的repositories。

与没有边框的版本相比。”all”链接是指Michael的repositories，还是只所有用户的repositories列表，不清楚。

不只是装饰：GitHub上的行为令人困惑

GitHub全局导航起初看起来只是装饰或 者风格问题。现在我们明白了美学决定还会影响浏览者如何理解设计。就GitHub而言，repositories链接受到限制，并没有与行为相符。点击 ”all”链接，实际出现的并不是当前用户的repositories，而是所有用户的公共repositories列表。如果想看当前用户的 repositories，需要点击avatar图标旁边的用户名字。真够折腾！

重新设计应考虑范围

如何重新设计，才能消除困惑？一种方法，去掉容器，重新排列元素，消除repository链接受到当前用户限制的暗示。

这种重新设计利用视觉原则，影响如何理解导航块的方式。将avatar图标移动到右侧，去掉边框，repository链接与当前用户之间相关的假设不再存在。

另一种方法，保留原设计中的装饰容器，利用文案说明限制范围。

第二种重新设计采用两个链接，”all”和”mine”，来区分所有repositories列表和只属于当前用户的repositories列表。无论是采用视觉原则还是文字，两种重新设计的方案都消除了”all”链接的模糊性，设置了清晰期望。

GitHub提供的服务很好，我知道我有点吹毛求疵。UI是微妙游戏。大脑和眼睛的功能敏感精妙。作为设计师，应当非常谨慎，有些时候我们为眼睛设计，而忘记了大脑。希望这些例子能帮助你对两种元素更敏感—装饰元素和改变界面意义的元素。

FYI:Google的价值观

我们的价值观

永不满足，力求最佳
Google 创始人之一 Larry Page 指出：“完美的搜索引擎需要做到确解用户之意，切返用户之需”。就搜索技术的现状而言，我们需要通过研究、开发和革新来实现长远的发展。Google 致力于成为这一技术领域的开拓者。 尽管 Google 已是全球公认的业界领先的搜索技术公司，但其目标是为所有信息搜寻者提供更高标准的服务，无论用户是坐在波士顿的台式机旁，还是正在驾车穿过波恩，或是漫步在曼谷街头。

为了实现这个目标，Google 一直在孜孜不倦地追求技术创新，突破现有技术的限制，随时随地为人们提供快速准确而又简单易用的搜索服务。要完全了解 Google，您需要了解 Google 在重新定义个人、企业和技术人员对互联网的看法的整个过程的方方面面。

---

Google 发现的十大真理

---

1. 以用户为中心，其他一切纷至沓来。

创建伊始，Google 即以提供最佳的用户体验为其中心任务。虽然很多公司主张客户利益优先，但难以抗拒各种诱惑，往往会牺牲客户的少量利益来增加股东价值。 Google 的一贯态度是：如果所做的更改不会给网站访问者带来任何优势，则将坚定不移地予以拒绝：

• 界面清晰易用；网页加载迅速；绝对不出售搜索结果中的排名位置。
• 在网站上刊登的广告应提供相关的内容，且不会影响用户的体验。

Google 始终秉持着用户第一的理念，因而从网上赢得了最忠诚的用户群体。 用户群体的增长并不是通过电视广告活动，而是通过用户的交口称颂来实现的。

2. 最好的方式是将一件事情做到极致。

Google 要做的就是搜索。拥有世界上最大的研发队伍之一，心无旁骛地攻克搜索问题，我们知道自己擅长什么，也知道如何可以做得更好。通过持之以恒地对难题进行反复 的探索，我们始终能够解决复杂难题，并不断地改进已被公认为 Web 上为数百万用户提供快捷、完美的信息搜索体验的最佳服务。得益于努力改善搜索服务，我们可以将掌握的知识应用于新产品，其中包括 Gmail、Google 桌面和 Google Maps。在改善搜索服务的同时，我们也在不断推出新产品*，我们的愿望是将搜索的强大功能应用于以前未曾探索的领域，并帮助用户更多地访问及利用其生活 中不断扩展的信息。

3. 快比慢好。

Google 相信瞬间带来的喜悦。 您需要解答的时候，是希望马上会得到解答的。这点是勿庸置疑的吧？ Google 可能是世界上唯一一个努力让其用户尽快离开自己网站的公司。Google 执着地消减自己网页上的每一个多余的比特和字节，不断地提高服务环境的效率，并一次次地打破自己创造的速度记录。其他人认为大型服务器是处理海量数据的最 快捷方式。但 Google 却发现联网的 PC 机速度更快。在他人已接受搜索算法所决定的明显速度限制时，Google 却写出了新的算法，证明了速度无限的真理。 Google 一直在不断地努力，让速度再快一点。

4. 网络需要民主的作风。

Google 之所以成功，原因在于它依赖数以百万计的向网站发布信息的用户来确定哪些网站提供的内容具有价值。Google 不依赖一组编辑人员或仅仅根据某个词汇出现的频率来为每个网页评级，而是采用一项突破性技术，即 PageRank™。PageRank 对一个网页所链接的所有网站进行评估，为它们分配一个值（在一定程度上参照了与相应网站链接的网站）。通过分析网络的整体结构，Google 能够确定哪些网站被最对其信息感兴趣的用户“投票”评为最佳信息来源。随着网络规模不断增长，每一个新网站将成为另一个信息点，同时也是要记入的另一张选 票，该技术也会不断地得到改善。

5. 您不必坐在台式机前也能获得所需的答案。

世界的流动性越来越强，人们很难再局限于一个固定的角落。无论是通过 PDA，还是无线电话，甚至是在汽车里，人们都希望随时获得所需的信息。Google 在这一领域开发了多种创新技术，其中包括 Google Number Search。通过这一技术，人们从具有上网功能的手机以及即时转换系统（将以 HTML 格式编写的网页转换为手机浏览器可以读取的格式）上查找数据时，可以大大减少键击次数。 借助于这一系统，人们能够从 Palm PDA、Japanese i-mode、J-Sky 和 EZWeb 等原先不能显示网页内容的设备上打开数十亿个网页，以查看网页内容。尽管搜索引擎在任何地方都可以帮助用户找到所需的信息，但 Google 仍然在不断地探索新技术和提供新的解决方案。

6. 您可以通过正当途径赚钱。

Google 是一个企业。它通过以下两种方式来获取收入：向其他公司提供搜索技术；向广告客户提供在 Google 或网络的其他网站上刊登广告的 服务。然而，您可能从未在 Google 上看到过广告。这是因为，除非广告与所显示的搜索结果页内容相关，否则 Google 不允许在我们的搜索结果页上展示任何广告。因此，只有某些搜索才会在搜索结果的上方或右侧显示赞助商链接。Google 坚信，仅当广告与您要查找的内容相关时，才会为您提供有用的信息。

Google 同样也证明了广告不必过分渲染也能够切实有效。Google 不接受弹出式广告，因为这会干扰用户查看所请求的内容。我们发现，文字广告 (AdWords) 的内容在与其读者相关时，所带来的点击率要比随机显示的广告高得多。Google 的优化小组与广告客户合作，以提高广告系列在有效期内的点击率。因为点击率越高，表明广告与用户感兴趣的内容的相关性越高。 任何广告客户，无论其规模大小，都可以利用这一针对性强的媒介。既可以通过我们的自助式广告服务计划在数分钟内在线投放广告，也可以在 Google 广告服务代表的帮助下发布广告。

在 Google 上刊登的广告总是明确地标记为“赞助商链接”。不损害我们搜索结果的完整性是 Google 的核心价值观。我们绝对不会操纵排名位置来将我们的合作伙伴放在搜索结果中排名较高的位置。没有人能够购买更高的 PageRank（网页评级）。我们的用户信赖 Google 的客观公正性，任何短期利益都不能够构成破坏这种信任的理由。

成千上万的广告客户使用我们的 Google AdWords 计划来推广他们的产品，我们相信 AdWords 是同类计划中规模最大的一个。此外，成千上万的网站管理人员利用我们的 Google AdSense 计划，刊登与其网站内容相关的广告，以增加收入和改善用户的体验。

7. 信息始终在不断地累加。

当 Google 索引中包含的互联网上的 HTML 网页超过任何其他搜索服务之后，我们的工程师开始将精力转到那些不太容易获得的信息上。有时只是合并新数据库的问题，如添加电话号码、地址查询以及企业目 录。有时却需要更多的创造性工作，如增添可搜索超过 10 亿张图片的功能，或增添对原始格式为 PDF 文件的网页进行查看的方式。 由于 PDF 格式的大量使用，我们需要扩展所搜索的文件类型的列表，以支持使用 Microsoft Word、Excel 和 PowerPoint 等多种格式创建的文档。为了满足无线用户的需要，Google 开发了一种独一无二的技术，可将 HTML 格式的文件转换为移动设备可读取的格式。该列表不会就此终止，因为 Google 的研究人员将持续不断地探索新的方式，将全球范围内的所有信息提供给寻找答案的用户。

8. 对信息的需求超越了国界。

尽管 Google 的总部位于加利福尼亚州，但我们的办事处遍布全球，我们的宗旨是帮助全世界的用户获得所需的信息。为了实现这一目标，我们维护着十多个互联网域；在我们所 提供的搜索结果中，超过一半提供给美国境外的用户。用户可以根据自己的喜好，从 Google 支持的 35 种语言中任选一种来展示搜索结果。此外，我们还提供翻译功能，无论用户的母语是哪种语言，都可以搜索到所需的内容；不喜欢使用英语搜索的用户可以将 Google 界面自定义为大约 100 种语言中的任意一种。 为了更快地补充新语种，Google 为志愿者提供机会帮助做一些翻译工作，Google.com 网站上提供了供翻译使用的自动工具。这一流程大大改善了我们为用户（甚至位于地球上最偏远角落的用户）提供的服务的种类和质量。

9. 没有西装革履也一样严肃认真。

Google 的创始人一再声明公司所重视的惟有搜索。他们创建公司的理念是工作应具有挑战性，而挑战可以带来乐趣。正是由于这一点，Google 的企业文化不同于其他公司，而并不是因为这里到处都有熔岩灯和大橡胶球。同样，对于我们的在线服务，Google 始终将用户放在首位；而对于日常生活，Google Inc. 将自己的员工放在首位。我们重视团队的功绩，并为个人的成就而倍感自豪，这些都促成了公司的全面成功。新想法经过交流和试验，然后以惊人的速度投入实际应 用。 其他公司的会议可能会占用几个小时，而在这里通常只不过是在排队购买午餐时的一次聊天，写代码的人和写检查程序的人之间不存在任何屏障。这种畅所欲言的环 境提高了员工的工作效率，并促进了员工之间的友爱，而这种氛围又因肩负数以百万计的人们对 Google 搜索结果的信赖而进一步加强。为希望做出重大贡献的人员提供适当的工具，他们定然不负您的期望。

10. 只是优秀还不够。

为 您提供的服务始终超出人们的预期。Google 不会将最好视为终点，而是看作一个新的起点。通过创新和反复探索，Google 选择行之有效的技术，并以异乎寻常的方式不断进行改进。搜索对于拼写正确的文字没有问题，对于拼写错误的文字会怎样呢？ 我们的工程师透视用户的需求并相应地开发错别字改正程序，就像知道用户在想什么一样。在 WAP 手机上进行搜索时的时间太长？我们的无线技术部门开发了 Google Number Search，将每个字母击键三次减少为只击一次。尽管我们的客户群体数以百万计，Google 仍然能够迅速找到发生冲突的位置，随即加以解决。但是，Google 与众不同的一点，就是在全球用户还未明确意识到自己的需求之前为其做出周密考虑，并开发出富于创新的工具和产品来满足他们的需要。 这种永不满足现状的态度就是深藏在世界上最佳搜索引擎背后的终极驱动力量。

---

* 全面披露的更新：四年前，在首次写下这“10 件事情”时，我们曾说过“Google 不做星座预测，不做财经咨询，也不做聊天”。随着时间的推移，我们对可提供服务范围的看法也有所发展 - 比如说，Web 搜索并不是用户访问或使用信息的唯一方式 - 还有那些当时看来不可思议的产品现在却已成为我们整个计划中至关重要的环节。这并不能说明我们已经放弃了自己的核心任务，只是随着我们在其改进的道路上不 断前行，地平线上那些看似模糊的目标也变得更为清晰可辨（当然，也可以说，这样的模糊目标也是越来越多。）

翻译：表单设计的最佳体验

文档《UI12_LukeW_WebForms》，下载http://www.kaixin001.com/group/file.php?gid=34746&fid=194697 （开心网群的）

翻译来自：http://www.yeeyan.com/articles/view/8217/3893

为什么表单设计非常重要？

- 表单是用户与网站之间进行“对话”的方式
- 从商业上
- 使用户能够实现购买行为
- 使商家实现销售利润最大化
- 从交互的角度
- 使用户能够参与
- 使商家能够增加用户并形成社区
- 从参与角度
- 使用户能够操作和贡献内容
- 使商家可以积累内容和数据

设计原则
- 使痛苦减少到最小
- 没有人喜欢填写表单
- 聪明的默认值，在线校验，输入的容错性
- 清晰的完成路径
- 考虑用户的背景和使用情景
- 用户的熟练程度
- 用户使用的频繁度
- 确保交流的连续性
- 错误，帮助和成功
- 单一声音，减少噪音

对效果的分析
- 易用性测试
- 错误，提示，帮助，完成率，每次任务花费时间，满意度分值
- 眼球跟踪
- 完成时间，关注点,扫视路径
- 用户帮助
- 最重要的问题，事故次数
- 最好的体验
- 常用解决方案，独特的方法
- 在线跟踪
- 完成率，进入点，退出点，页面元素的使用,输入的数据

设计模式
信息+互动+反馈

信息
- 布局
- 标签位置
- 内容分组
- 输入
- 格式，必填项目
- 动作
- 首要动作和次要动作
- 帮助和提示
- 视觉层级

标签顶端对齐方式
- 当被收集的数据是熟悉的
- 最少的完成时间
- 需要更大的垂直空间
- 间距和对比对于有效的视觉扫描很关键
- 对于本地化和复杂的输入有更高的灵活性

标签右对齐方式
- 标签和输入框有清晰的联系
- 需要较少的垂直空间
- 由于左侧的不对齐，快速扫描所有标签变得比较困难
- 很快的完成时间

标签左对齐方式
- 当需要的数据不熟悉时
- 标签的扫描比较容易
- 标签与输入框的联系不紧密
- 改变标签长度可能对布局产生破坏和削弱

眼球跟踪
- 2006年7月matteo panzo的研究
- 左对齐
- 容易将标签与输入框联系起来
- 标签和输入框之间的距离让用户花费更多时间
- 右对齐
- 减少了将近一半的注视次数
- 表单完成时间减少了一半
- 顶端对齐
- 让用户一眼捕捉到标签和输入框
- 最少的完成时间

最好的体验
- 减少完成时间以及熟悉的数据输入：上对齐
- 如果希望节省垂直空间：右对齐
- 对于用户不熟悉或者高级的数据项：左对齐

必填项目
- 必填项的指示在以下情况下最有用：
- 输入项很多
- 很少是必填项目
- 使用户能够通过扫描表单知道什么需要填写
- 选填项指示在以下情况下最有用：
- 很少的项目是选填项
- 当所有项目都是必填项时指示就没有用处

最好的体验
- 尽量避免选填项
- 必填项多，则标明选填项目
- 选填项多，则标明必填项
- 文字最好，但*经常被用于必填项目
- 将标识和标签连在一起

输入域长度
- 输入域长度可以提供有价值的affordances
- 适当的域长度为输入提供足够的空间
- 混乱的域长度可能给表单增加视觉噪音

最好的体验
- 如果可能，use field length as an affordance
- 否则，考虑一个一致的长度提供足够的输入空间

内容分组
- 内容关系提供了结构化组织表单的方式
- 分组提供了
- 一种在高层次上扫描必需信息的方式
- 表单内信息关系的联系

太多的内容分组会导致额外的视觉噪音，降低可读性
最小化分组的好处：减少视觉噪音，更直接的完成路径

最好的体验
- 将表单内关联的内容进行分组
- 使用最少数量的视觉元素来表达关系

动作
- 不是所有的表单动作是平等的
- 重置、取消、返回一般来说是次要的操作，很多时候不是必须的
- 保存、下一步、提交是首要的操作：对于表单的完成起直接作用
- 动作的视觉呈现需要与他们的重要性相匹配

最好的体验
- 如果可能，避免次要动作
- 否则，用清晰的视觉识别来区分主要和次要动作

帮助和提示
- 在下面的情况下，帮助提示是有用的：
- 要求用户输入不熟悉的数据时
- 用户对于为什么数据被要求填写可能有疑问
- 推荐用户使用某种提供数据的方式
- 某些数据是选填的
- 然而，过度使用帮助和提示会很快overwhelm表单
- 在下面的情况下，你也许需要考虑动态提示
- 自动的内文提醒
- 用户触发的内文提醒
- 用户触发的段落提醒

最好的体验
- 除非必要，尽量少的使用帮助、提示
- 明显和与数据输入区最相邻的帮助是最有效的
- 当收集很多用户不熟悉的数据时，考虑使用动态提示系统

交互
- 用户完成的路径
- 使用键盘的tab键进行控制
- 逐步出现
- 依赖性出现

完成路径
- 每个表单的首要目标都是希望用户填完
- 每一个输入项目需要考虑和操作
- 去掉所有不必要的数据输入要求
- 提供灵活的数据输入
- 提供清晰的路径
- 提供聪明的默认值

最好的体验
- 去掉所有不必要的数据请求
- 使用聪明的默认值
- 给用户提供灵活的数据输入选择
- 清晰的完成路径
- 对于长表单，提供进度和保存功能

tabbing
- 许多用户通过tab在表单项目之间跳转
- 合理的html将保证跳转正确工作
- 多列式的表单结构可能与tabbing顺序相冲突

最好的体验
- 记得考虑tabbing
- 使用tabindex属性来控制tabbing顺序
- 当设计表单布局时考虑tabbing预期

阶段性提醒
- 不是所有用户一次需要所有可选项
- 合理使用的阶段性提醒提供了额外的选项
- 高级选项
- 进阶操作

最好的体验
- 根据用户需求的优先级来安排阶段性提醒
- 最有效的方法是让用户来触发
- 使用一致的提醒方式

依赖性选择输入
- 有时候一个数据需要与其他的数据输入相关联
- 某项输入触发更多的选项
- 某项输入触发更清楚的需求

依赖型显现输入
- 页面级别
- 需要额外的步骤
- 区块标签
- 通常容易被忽略
- 默认值很重要
- 手指区块标签
- 需要遵循完成路径
- 区块选择项
- 有效将信息分组
- 隐藏了额外的选项
- 下方暴露和行间暴露
- 有让用户迷惑的潜在危险
- 当选择/选中时激活
- 次要选择的关联性被削弱

最好的体验
- 在首选项之间保持清晰的关系
- 将额外输入项与他们的触发器之间保持清晰的关联
- 避免“跳跃”造成首选项之间关联的减弱

反馈
- 文中校验
- 一致性
- 错误
- 提示形式和解决方案
- 进度
- 提示形式
- 成功
- 校验

文中校验
- 当数据输入时提供直接的反馈
- 输入校验
- 建议正确的输入
- 帮助用户不超出限制
- 如：
- 密码提示
- 用户名选取
- 正确输入下拉提示
- 最大允许字符计算

最佳体验
- 当输入项的出错率很高时考虑文中校验
- 使用建议输入来减少歧义
- 沟通界限

报错
- 错误被用来保证所有数据项被正确提供
- 清晰的标签，affordances，帮助提示和校验可以帮助减少错误
- 但一些错误仍然会出现
- 用尽量少的步骤提供清晰的解决方案

最佳体验
- 当错误发生时提供清楚地交流：优先的位置和视觉反差
- 提供修正错误的方法
- 将错误信息与相关输入项关联起来
- 当错误发生时用视觉语言来double

进度
- 一些时候动作需要有执行的时间
- 表单提交
- 数据计算
- 上传
- 当动作进行中时提供反馈
- 例如：将提交按钮disable

最佳体验
- 提供任务的进度提示
- 当用户点击提交后，将其disable以避免重复的提交

成功
- 当成功完成表单时，在上下文中确认数据输入
- 在一个新页面中
- 在一个更新的表单中
- 通过以下形式提供反馈
- 消息（可移除）
- 动画的形式

最佳体验
- 当数据提交成功后给与清晰的交流
- 在数据提交的情境中提供反馈。

额外补充
- 避免改变用户提供的输入
- 用后来的输入
- 当错误发生时
- 如果获取信息是困难的，那么让用户知道比直接给用户一个表单更优先

可用性和标签形式
- 使用label标签将数据与标签关联
- 能够被screen reader正确识别
- 多数浏览器将带标签的文字处理为可点击：更大的动作
- 使用tabindex属性提供tabbing路径
- 提供tabbing顺序的控制
- 使表单可以通过键盘来导航
- 考虑为支持键盘输入提供accesskey属性
- 直接到达相关的输入项
- 考虑fieldset属性将内容分组

表单创建工具
- wufoo
- www.formassembly.com
- www.icebrrg.com

更多信息
- 功能性表单设计
- www.lukew.com/ff/
- site-seeing：A Visual Approach to Web Usability
- Wiley & Sons
- luke@lukew.com

文档的制成(2)

http://liubengda.blogspot.com/2008/12/1.html

接上

进入文档概述的部分了

这个部分是对于需求进行基本的描述，很重要！特别是对于资源申请上，不要老抱怨自己的boss不给自己足够的资源导致了项目质量下降，要先问问自己你写的文档是否能足够引起他的兴趣？boss一般是不看你的功能有多炫的，而且一个好的产品评介不在于功能是否够炫够多。好好利用这个部分。

第一部分：意图、目标、战略定义

第二部分：竟比分析、数据佐证

第三部分：产品模型、用户流程描述、商业（运营）模型

以上是三个主要部分，看来好像挺深奥的，其实说白了就是描述要干什么和为什么？切入基本的产品模型描述和用户流程描述，让大家知道我们要怎么做？以前在项目制的团队里，一个需求沟通会进行了7-8次可是总是感觉开发人员对于产品缺乏整体认识，缺失是不是在这呢？是不是在没交代清楚前我们就过早的进入了功能和细节上？

好了，我们来继续丰满这些东西~有些内容是必须要提的。

1.用户或受众的描述，包括用户特点，主要倾向。配合同行或同类产品的竟比，分析一下他们的用户构成，没有竟比资料可以分析一下市场数据，因为我们要先明确做出来的东西是给什么人用的。

另外，一定要区分用户角色，一般的互联网产品不可能只有一个用户角色，例如一个论坛做出来可能针对的受众就包括用户，高级用户，版主，系统管理员，编辑等。用户不但只包括互联网那些ip，记得你的同事也是你的用户，因为你的产品需要维护和管理操作。应该注意每个用户的物理身份，尽量穷举可能存在的用户状态和用户行为，以穷举用户行为来进行需求文档撰写其实也是一个很好的文档制成方法。

2. 假定和约束

是否存在假定条件、要求，是否存在约束条件、要求

3. 风险评估

列举预期或已知的风险及对应方案。

4. 背景支持

包括术语、名词、定义解释及文档规定；参考资料；关联文档；专家或咨询专员支持。

好了，概述部分大概就是这样了。

下个部分是，详细规则说明及需求描述，这部分基本上就没啥可说的了，辅助Axure或页面保真模型对相关用户行为和产品流程描述清楚就可以了。

一般只主要分清YES&NO状态，人机交互的作用结果，包括反馈，记录，传递等。不需要像技术人员一样描述数据传递的情况，其实就简简单单的说明用户行为和结果即可，就好像当一个用户点击了一个链接，新打开一个页面，是图片列表页一样。

这个部分，我实在没啥好说的，看图说话，写的有条理，注意功能包含关系即可。

对了，提一句用word文档请使用文档结构图，有效的使用章节标题，会让你的文档制作事半功倍。

另外，在整体文档中对于可能预期的扩展功能做一下描述，这也是产品评估的重要内容之一。

制成记录和备注，个人习惯拿来将这个项目中关键点的邮件和会议纪要整理在里面。

文档模板下载：http://www.kaixin001.com/group/file.php?gid=34746&fid=193957