小白兔.白又白 » 学习笔记

设计的协作与沟通

小白兔 — Mon, 22 Mar 2010 02:48:22 +0000

如何确认产品构想和方向?

获取新信息转化为设计方案

搞明白设计的原始动机是什么（方案背后的目标）

如何传达设计思路？

运用专业词汇，如色彩搭配中的明暗对比度等

出2套或多套方案，用比稿的方法。

设计过程中找他人参与，询问他人意见（如开发人员等）

如何讲述设计方案？

邮件（思路、要点）

GUI软件

给出设计方案之前，带领团队重温一下产品目标

重点讲述我为什么要做这个，而不是我要怎么做。

可以先用界面原型让同事确定方案。（在Axure中先建立网站地图，空白页面用流程图来填补）

你如何管理他们的需求？

Google Docs、Excel、Bugzilla、JIRA

你的设计规范与工具？

Visio、Axure、MindManager、FreeMind

其他

在抱怨领导不了解具体工作的时候，请反思你每次的工作汇报内容是否有价值。

说别人不对时要拿出更好的解决方案。

讲述设计方案时，面对种种质疑和问题，首先自己心中要明确产品的目标，并学会分辨哪些问题是目标之外的问题。

设计过程应该占 60%，而界面原型是为了剩下的40%。

设计规范除了告诉设计人员“能怎么做”，同时也要告诉他们“不能怎么做”。

开门见山——《瞬间之美》

小白兔 — Mon, 08 Mar 2010 09:43:12 +0000

我曾经与一个小型的在线教育软件公司和作为某家知名航空公司开发一套学习管理系统（Learning Management System, LSM）。这套系统能让该公司各机场数以千计的工人随时学习并了解最新的安全措施，同时掌握新技术以提高自身的技能水平。

这些工人中绝大部分都没有接受过大学教育，因此人力资源部门认为所有的内容都必须为他们提供透彻的解释。尽管这个想法颇有些自以为是的施舍意味，但是在评审设计的时候它反而帮了我的忙。

为什么说欢迎辞没有用

该系统首页设计包括一大段文字作为欢迎辞。它解释说明用户可以在线指定课程，从而帮助他们学习新知识，并且了解最新安全规章。如图：

我敢肯定你在网上看到过类似的信息起码有一百万次了。但有多少次你去读过呢？

Jakob Nielson 在他的专栏“废话文本：保留、删减还是去掉？”一文中指出，人们通常不会在网页上阅读文字，他们只是扫描。如果是更长的介绍性文字，人们往往会直接忽略。也就是说，篇幅短的文字才更有可能吸引一部分注意力（假设它真的有用），从而有助于用户理解他们正在看什么。

在大信息量的站点里我们会专注于阅读，然而当探索一个新的Web应用程序时则与之相反。我们会寻找那些显著的线索，目的是为了了解这个网站是干什么的，它是如何运转的，以及弄明白要想使用它，我们需要做什么事情。换句话说，我们考虑的是做，而不是读。我们希望将事情搞定，因此采取的每一个步骤都是为了完成某件事情，不管这件事情是什么。

比如说，看到这个欢迎辞的时候，我立刻绕过它，把注意力集中在课程立标中去。那才是这个页面最主要的交互元素。

为扫描而设计

不过最后我还是扫了一眼欢迎辞，因为评审这个设计是我的工作。但是当我扫过这些文字的时候，看到的是如图所示的内容：

你阅读欢迎辞是看到的内容大概与此非常相似。我们更感兴趣的是要完成什么事情，而不是阅读一段毫无目的、对达成目标毫无帮助的文字。

第一个问题就出在这段文字的标题是“欢迎”，这就好像公司在某个节假日派对上打开办公室的大门迎接客人。但是这里不是个节假日派对，而是个网站。浏览者们也并不是客人，而是有好多工作要忙的人。的安全课程中断自己的正常生活，或者为了获得升值的机会而被迫学习某项新技术。

他们并不关心自己是否受欢迎，他们关心的是找到某个课程。

所以首先，让我们给他们一些自信，把标题改成Find a course可以让他们知道自己打开了正确的页面。如图：

好多了，但是那一大段愚蠢的文字还在那儿，我们来把它变得更有用一些。

“赶快行动”词组

“赶快行动”词组是用来激发人们做出某种行为的一组字词。它近似于一种命令，比如“回你的房间去”，但又不会那么缺乏友善。

你曾经见过它们，可能也不少于一百万次了。它们一般被陈述成这样：“保存更改”“阅读更多”以及“登录网站”。

它们还易于扫描。因此使用动宾词组能够准确的告诉用户即将发生什么，同时还能让他们感到自己才是软件的指挥者。

使用Find a course作为页面标题能够帮助用户了解在这个页面上他们要干些什么，但是那一大堆文字却没能提供多少具体内容。

因此下一步我需要去掉这些文字，然后用更简练、明确的话替代，并且在里面包含“赶快行动”的陈述。

在这个案例中，想要解释页面的主要目的，我要使用的文字连一个段落都不到。很多时候所需要的仅仅只是一句话而已，在解释你在页面中能干什么的同时就能说明它的目的、好处和使用方法。

经过慎重考虑——花了大概5秒钟的时间——我开始设法扭转现有的局面：把两大段文字的内容全部去掉，然后写上很简单的一句话。如图：

非常好。做到这样也并不困难，不是吗？

新的页面版本直入主题，这样我们不会浪费用户的任何时间。

但不幸的是，事情并不那么简单。

客户不愿意放弃欢迎辞里面的文字。很显然，市场部的某个人为了它殚精竭虑，而且确实花费了相当多的时间考虑如何让措辞完美。

“如果用户需要更多的信息怎么办？”他们问道。

“他们不会。”我回答。

这种争论似乎无法得出合适的结论。

最后结束这场争论的确是这样一句话：

“这些人只有高中文化水平，如果他们读了这些我才会吃惊呢。”（嘿嘿冷笑）

该公司人力资源部门对自己员工智能水平的判断，我对其完全持保留态度。然而这样一来事情变得好像缩减文本成了他们的主意。

他们采用了我的设计，而据我所知，该网页从没有出现过人们不知道如何使用或者不明白他能做什么等方面的问题。

对于用户来说，一个简短的句子远比一大段文字要来的有意义，即使这段文字的文笔很好。重要的并不是我们提供的信息量有多大，而是我们能否给他们提供真正需要的信息。

标签云里抬头看路——《瞬间之美》

小白兔 — Sun, 07 Mar 2010 07:42:16 +0000

我曾经提到有位设计师带着他设计的博客模板来找我。这个设计里面有一个带有标签云的工具栏，此外还有两个按钮：一个是按标签云显示，另一个是按列表显示。

那位设计师根据自己的想法已经做了非常深入的设计。最开始他建立了一个简单的链接列表，并且按照链接所指向的内容热门程度进行了排序。如图：

下一步，他通过某种程序算法调整了列表中每一个链接的字体大小。链接所指向的内容越受欢迎，该链接的字体就越大。为了强调字体大小不同，他把列表按照字母顺序重新排列。如图：

然后，它去掉了标签项之间的断行，使它们排列在一起成为图中所示的一片“标签云”

由于这个系统既能支持标签云的显示方式，又能按普通列表的方式显示，因此最后他在界面下方加上了一个Cloud按钮和一个List按钮，使之可以在这两种视图之间相互切换。如图：

咋看上去这是个好主意。

你的创新是否有效

这个设计的创新之处在于它提供了两种视图。在此之前，别的网站都没有在前云中进行这种尝试。而且这位设计师赞同的这个想法是源自这个模板开发者的意见。

“程序员告诉我用户可能会希望切换视图”他说。

经过一番考虑，我认为应该更注重于提高品质，而不是一味的创新。与其硬要在标签云里强塞入一些所谓的新贡献，还不如让它就那样好好呆着。我们最起码已经把链接列表改善成了标签云的形式，不是吗？这对于提高品质来说已经足够了，况且添加几个按钮也有些画蛇添足。

我想那些知道标签云是怎么回事的人会从这种视图中获得方便，而那些不理解标签云的人所看到的仍旧是一个链接列表。这种视图并未使任何人受损，也没有违反规则。

我不认为用户会在页面中浪费时间——瞪着工具栏看半天，然后琢磨到底是该用标签云还是列表。这里并不是必须得遵循用户习惯方式的重要特性，它只是一个简单的列表链接而已。所以我告诉那位设计师去掉那些按钮，只显示标签云就行了。

我相信我的观点是正确的。但同时我也相信当时自己考虑的还不够透彻。

什么时候该说不

很有趣的是，标签云和之前“环境的提示”的概念有一点点背离。单纯从技术上来说，它们起到的功能和“环境的提示”中排序的链接列表一样，通过视觉上的不同来传达更多的含义。但是使用标签云需要一个前提，而前面所说的排序列表却不需要。

那就是知识。

如果真正想从标签云中获得方便，就需要先弄明白为什么有链接比其他的要大，或者比其他的颜色更深。而这些问题就颇值得商榷了。

我观察过的绝大部分用户在碰到标签云的时候，都不明白为什么有些链接比其他的要大。只有极少数的人才会去猜它的原因，而其中有只有更少的一部分人真正在乎这一点。而即使单击了某个标签也无法增进他们的理解。

这个事实意味着你完全可以抛弃标签云的形式。毕竟，用户也确实没有必要理解它蕴含的逻辑意义。他们最终还是得到了一个链接列表，不是吗？

从技术上来说，是这样的。但是标签链接一般来说都很短，基本上只包括1-2个单词，而且很少能把它们自身的含义表述清楚。

以上所有这些事实告诉我们，几乎没有多少人能真正明白标签云的含义。我和那位设计师说用户不会花时间关心如何个性化显示那一组链接，我只对了一半。

当然，他可以在这个标签部分加上明确的标题，例如“最受欢迎的主题”。他也可以加上一些说明性文字告诉用户链接所指向的内容越受欢迎，该链接的字体就越大。

但是，我应该告诉他直接把整个标签云去掉，仅仅显示一个短列表，按照受欢迎程度排序即可。为什么呢？

因为在这个世界上不存在任何理由强迫用户思考，无论对于一个页面、一个场景，还是一个博客模板。

我们没有理由要求用户学习了解为什么有些链接比其他的要大。用户也没有理由被迫花精力去学习标签云，更不用说去探究它的重要性了。

Flickr的用户经常会上传大量的图片以便和家人及朋友分享。而在LibraryThing，一个图书编目网站，用户会为自己的图书归档并编制目录。在这些例子中，标签云确实有助于用户学习曲线的升高。它能让用户粗略的看到人们是如何使用网站的，并且为他们快速的提供评估信息。但是对于博客来说，大部分浏览者只会短暂的停留，看一两篇日志，然后离开。所以，博客绝对不是一个强迫用户学习新潮交互方式的好地方。

如同刚才所说的，用户只会在页面短暂的逗留，而不会考虑如何个性化设置链接的显示方式。我也从来没看到过哪位用户会在第一次碰到标签云的时候花时间学习它的功能特性。往好了说，它会迫使用户在不必要的地方思考；往坏了说，用户很可能因此而困惑，甚至烦恼。

这才是我当时应该告诉那位设计师的结论。

链接生来不平等——《瞬间之美》

小白兔 — Fri, 05 Mar 2010 15:10:01 +0000

链接这种最简单、最基础的设计也是能够改进的。最近，在创建一个链接列表时，我找到了一个这样的机会。

在这个例子中，我需要在一家公司的内部网首页上创建一个标题列表，让该公司呼叫中心的雇员们随时了解最新事件。这些标题的链接有点类似新闻列表，需要按时间顺序显示，但一次只需显示5条信息。

我从最普通的设计开始，创建了一个简单的链接列表，如图：

下一步考虑如何让用户看明白这些从上到下的标题链接是按照什么顺序排列的。在这个呼叫中心里，最新的事件往往是最重要的事件。

我可以在旁边放一些说明性文字来做到这一点，比如“本列表按照从最新到最老的顺序排列”。但是这样需要花费用户更多的精力去阅读。对于Web应用来说，不必要的阅读是人们最不愿意去做的事情。

所以我才用了另一种方案。我把标题从1-5进行了标号，觉得这样差不多算是大功告成了，如图：

对列表项目进行编号基本上能表现出它们排列的顺序，但是列表看上去仍然很单调。这让我想当头疼，因为即使每一个项目都编了号，它们彼此之间还是太相像了。

在这个呼叫中心里，最新的事件往往最为重要。它通常意味着公司某个环节发生了突发性事件，需要尽快通知客户或消费者。这些事件可能是售后服务资源短缺，也可能是计费系统暂时性故障，也可能是其他事情，它们都需要呼叫中心的雇员在第一时间内获得上述信息。

而在这样一个单调的列表里，每一个链接和其他链接如此相似，它怎样才能凸显那个No.1的重要性呢？

最近在Boxes and Arrows上读到了一篇名为“环境的提示”的文章，作者是Ross Howard，我从中获得了些许灵感。

让环境提示成为引导的线索

Howard在文章中提到，在日本的城际铁路线上，每一个站台都会在列车进站后播放自己独特的音乐旋律。因为那些经常乘坐同一线路的乘客会在乘车途中感到无聊，他们会看书、读报纸，或者打开笔记本电脑工作，而不一定会去关注每一站的站牌或列车的语音播报。而到达每一站都提前播放一段独有的音乐旋律，能有效的引起乘客的注意，从而提早准备下车。

Howard把这种音乐广播称之为环境的提示。列车线路中还包括其他的环境特征，例如隧道、每个展台的外观等。而这些音乐旋律和它们一起帮助乘客在脑海里构建一张虚拟的乘车路线图，从而避免坐过站。

用环境做提示这个想法引起了我的兴趣，因为它表示当用户在网站上完成某项任务时，很可能是一种无意识的举动。在这个企业内部网上，最有帮助的事情莫过于让用户很容易的找到正确信息。于是我尝试把环境提示这一概念应用到链接列表中。

我舍弃了列表编号，同时根据文章发布的时间顺序改变了每一个链接的字体大小。最新发布的链接字体最大，下面的链接字体依次变小，以此表现列表中的文章越来越陈旧，其重要程度也越来越低，如图：

这样一来，事情发生了很大变化。较大的字从较小的文字中凸显出来，使得列表中的一个链接的重要性一目了然。另一方面，更大的字体显得更为沉重，颜色也更深，这使得它们的表现力更为突出。

展现岁月的印记

设计的时候，我突然想起设计师Bredan Daws曾经在他的Analog In, Digital Out一书中谈到过岁月感的问题。Daws多愁善感地回忆他在刚接触电脑时曾经读过的一本小册子，那上面不小心留下了一些喝茶时溅落的污迹。他以此谈到在数字领域中岁月感的匮乏。数字化的文件不会溅上茶污，这一点相对于实体化的真实文件来说是一个巨大的优势，即它们在创建多年后依然保存如新。但这同时也意味着从满是茶污的物品上获得的怀旧之情已经永远一是在数字世界中了。

当时这个想法让我浮想联翩。这很自然，因为——哇喔！想想你能在网页上变出怎样的戏法！

网页上无法表现岁月感这个问题确实一直在困扰着我，但我从没想过那些古老的东西需要以某种方式让它们看起来古老。没错，许多网页的文章都会显示日期来表明它们的原始发布时间，但是仅此一个表明年代的迹象通常很轻易就会被忽略，而且还有很多网页根本就不显示日期——没有任何表明年代之处。

比如说，我三年前写的一篇文章，没准在今天就会变成某个搜索条件下的第一条搜索结果。而如果文章中没有标明发布日期的话，又怎样才能让人搞清楚它们不是昨天才发布的呢？

因此，我不时会收到几封电子邮件问我一些三年来从没再想过的问题。这些问题非常新，然而我以前的回答……可能就会显得有些迟钝了。

如果网页中表现出岁月的印记，那么读到这篇三年前文章的用户就能很清楚的知道它是很久以前发表的，于是就会转去其他地方搜索更新一些的信息，或者至少调整一下要发给我的问题。

在参考了Brendan的想法之后，我决定让这个链接列表的设计更进一步，努力传达出每个连接时更新还是更旧。毕竟在这个项目中，越新意味着越重要。

但如何能让链接看起来很旧呢？

我根据从新到旧的顺序修改链接列表，使得它的颜色由深至浅，如图：

最终的调整创造出一种效果，即从最新的链接开始逐渐向下淡化。而这也使得表以更为清晰：第一条链接最重要，从它开始，链接的重要程度逐条递减。

非常好。这个正是我一直想要的。

这种环境提示在最终的网页中是不是真的起到了明显的作用？或许并没有，会不会有人因为列表最后的链接字体太小而烦恼？有可能，但是因为浏览器字体的大小可调，所以这种情况也不太会发生。我是不是在劝说你应当立即把这一招用在自己的网页上？

仅仅只在它真正会起作用的时候。

在这个案例中，我做的一些设计较之以前的设计确实改进了不少，而我的出发点仅仅只是为用户提供向导。为创建明确的路线而做的任何事情对用户都是有益的。他们只需要扫一眼页面就能自动理解链接顺序的含义，只凭直觉，而不需要思考和检验。

告诉软件该做什么——《瞬间之美》

小白兔 — Fri, 05 Mar 2010 10:01:32 +0000

在你第一次使用某个Web应用产品时，熟悉它的关键在于是否能理解整个站点的内部结构。而最初的几个瞬间对于是否能形成美好的第一印象至关重要。

令人迷惑的术语和拙劣的组织结构，将会在几秒钟内把我们从满怀希望和兴致勃勃带往灰心、失败和挫折。所以很快在网站中找到方向的重要性是毋庸质疑的。

我曾经参与过一个项目，需要重新设计一个面向网站建设者的“所见即所得”式的Web应用程序。这个程序有些类似Google Page Creator，它让用户仅需操作可视化的编辑工具就能创建和编辑网页，而无需手写代码。

然而，与Page Creator 不同，这个产品已经存在可很长一段时间，经历过好几次大的改动。站点的功能越来越多，站点的导航也变得越来越繁冗。网站建设者只是随意的将新的界面元素添加到网页中，结果用户越来越难完成任务。

对于一个用户达好几万人的Web应用程序来说，这种状态可不乐观。

开发团队和我在一起工作了好几周，对该产品做了一次全面检修。导航功能只是其中的一小部分，但却又是非常重要的一部分。

告诉软件该做什么

在我准备着手设计整个产品的导航（或者称之为持久导航）时，它看起来其实相当简单：只包含两个按钮标签，分别是Home和Site。然而展开Site标签后，却出现了一大堆应用功能选项，而且和菜单项之间毫无顺序。如图：

真正的下拉菜单要比这里显示的长很多，但这已经足够让你发现问题了。每一个菜单项都为了一个完全不同的目的而通往一项完全不同的任务。例如，Creat new page 和 Edit contact information 选项，很明显互相之间毫无关系。没有一个用户会这么想：我要编辑联系信息，所以应该到 Site 菜单里面找。但事实上这两个选项就像两只走丢的小狗一样紧紧的靠在一起。

这些不同类型的动作应该以更自然的形式进行分组。从这个菜单往下看，我发现了一些彼此相关的名词。诸如 Web page, New page 和 Navigation 等都是可以创建和编辑的站点组成部分，而 Templates and colors 以及 Fonts 则与网站的外观有关联。于是我把这些菜单选项分成了几个部分，使之更好的反映了它们彼此间的自然联系，然后对它们分类标识。新的栏目标签如图：

这些新的分类标签把一开始的选项列表划分成好几组，分别包含了站点个元素、扩展功能（例如论坛），以及网站样式。然后，重新检查，看看每个菜单在新的标签下表现如何。在做这些的时候，我还去掉了每个菜单项前面的动词，比如 Edit, Manage 等等，只留下了简单的词组，这样它们可以更容易的被用户扫描到用户只需浏览下图中的列表，就可以很轻易的找出 Web page, Navigation，或者任何其它选项。

分组看上去变得更有意义了。然而，就像你所看到的，我同时也创建了一个怪里怪气的“废料箱”菜单，我称之为Misc.

每个应用程序都应该有一个废料箱，对吧？

是的，我也不喜欢它。在头5秒钟内它貌似还有点意义，但随即我就意识到这玩意儿很令人厌恶。首先，我很想找一个更好的名词去表现 Misc. 里面的项目，而随后我发现是否有好名词这一点根本不是问题所在。

每个人都想当指挥

软件并不是为了我们能单击那些按钮而存在。它是为了我们能完成任务而存在。这样我们才能做事情。

所以，导航栏不应该是陈列在一排按钮上的一串名词，而应该帮助我们感觉自己正在做一些事情，让我们找到当司机的感觉。

我们人类不喜欢感觉到自己正按软件的要求去做事情。在决定采取某个行为的瞬间，我们希望由自己控制软件，由自己告诉他应该做什么，而不是相反。任何违反这一意愿的软件都会让人感到愚蠢而糟糕，结果会敬而远之。

看看你的身边，你会发现很多软件的导航都设计成让用户感觉自己才是主人。从微软的 Word 到 Adobe 的 Illustrator，它们的菜单所包含的选项都是为了用户去做某件事情，例如 Edit 和 View。

这些菜单不是基于对象，而是基于任务的。这才是它们应该有的样子。

我们关注并重组了菜单中的对象，但其实我应该关注这个程序中所需要完成的任务类型。为了做到这一点，那些术语应当显示为动宾词组，而不仅仅只是又丑又过时的名词。

也许你已经明白了，所谓动宾词组就是动词-名词的简单组合，以动词开头并以名词结尾。通过这种形式构成的词语，我们就能告诉软件我们希望做哪种动作，以及这个动作所针对的对象是什么。这让我们感觉自己正在指挥软件：我们是领导者，而不是被领导者。

如果没有动词，菜单就很愚蠢而糟糕。

为了补救这一问题，我把由名词主导的按钮标签改成了由动词主导的标签。如图：

不再是为了任务去选择 Style –> Fonts，你现在可以告诉软件你想 Manage Fonts。按钮标签是动词，而菜单选项是名词。

现在用户可以感觉到自己在指挥软件。现在他们能够去 Design 导航栏或者某个存在的网页、Creat 论坛或新页面，以及 Customize 站点的结构、文件等。

顺便谁一句，如果用户希望为网页中的文本选择某个字体，我也会建议使用Style –> Fonts。但在这个项目中，用户希望的却是管理各种可用字体，以便于能转化为图片显示，而不受其他浏览者系统字体的限制。

对于用户来说，他们对站点保持兴趣的关键在于能否获得方向感，能否得到所需要的信息，以及能否完成任务。清晰的导航结构不仅有助于用户了解网站能做些什么，还能知道如何去做。

运用动宾词组，按钮和链接就能有效的告诉用户能做什么。同时也使得用户感到自己是指挥者：是用户告诉应用程序去做什么，而不是反过来。

创建产品导航时，请确保你是以用户为出发点，而不是以系统为出发点。用户不是工具，系统才是。

引导用户的视线——《瞬间之美》

小白兔 — Fri, 05 Mar 2010 06:37:37 +0000

我发现，如果把注册区域移到主要图片展示区的下面，就能创造出一种被称为是Diagonal Balance（对角线平衡）的和谐状态。这个设计理念源自于“古腾堡”图标。

人们在浏览页面或布局的时候，实现往往区域从左上角移到右下角，就好像页面的布局设计有某种自然引力一样。因为人们通常都是从左至右、由上往下的阅读，久而久之视线自然会沿着这一路径移动。古腾堡图标简单的描述了这一阅读轨迹规律。

古腾堡图表中，左上角是第一视觉落点区（Primary Optical Area, POA），而右下角是最终视觉落点区（Terminal Anchor, TA）。与之相对，右上角和左下角是视觉盲点。因此，采用对角线平衡通常都是一个好设计所需要考虑的因素，因为设计师遵从了用户习惯性的眼动规律。

简单来说，为了实现“对角线平衡”的布局设计，我们可以运用视觉元素来创建一条虚拟的“线”，让用户的实现跟随它从左上到右下呈对角线似的移动。这条对角线就像箭头一样指向最终视觉落点。

举个例子，在Mini汽车的美国官网首页上，动画里个元素出现的先后顺序同样也采取了对角线设计。首先，网站的Logo标识出现在页面的左上角，如图：

然后页面上划出了一个矩形线框，从左上角到右下角以动画形式出现，如图：

最后，一系列Mini Cooper的小车模从右下角驶入屏幕，如图：

我们常见的对话框也同样遵循了从左至右、由上往下的视觉规律，如图：

为了把这一方式应用到客户的主页上，我交换了注册区和图片展示区的位置，使站点 logo 和 Sign Up Now按钮之间形成了一条对角线，如图：

然而，为了让这个社区的页面真正的焕发光彩，我还需要加入一点颜色。

使用颜色来吸引注意

颜色能把人的注意力吸引到特定的元素上去，而且效果非常奇妙，尤其当某个元素的颜色与其它的形成反差时更是如此。相对于一致性来说，人类对物体间的差异性更为敏感。因此在页面中加入一些颜色，可以非常有效的把浏览者的视线引导到我们希望他们看到的地方。

为了着重强调在首页中采用对角线平衡设计，我把站点 logo的主色调蓝色应用到了 Sign Up Now 按钮上，然后把它也设置为主要图片展示区域的背景颜色。

随后，我决定页面中的其他元素将不会再用到海蓝色。

通过使用相同颜色将三个元素捆绑到一起，用户的视线将由站点 logo 引导到充满趣味的相关内容（特色图片区），然后在移动到 Sign Up Now 按钮。

因此，从最初简单的布局设计开始（只是把需要的栏目堆放到了页面上，而没有做其他考虑），我逐步的做了一些小小的变动，创建了一条对角线，从而支持了用户由左上到右下的视觉自然规律。采用视觉移动的自然轨迹意味着最终的设计将有助于用户更快的熟悉站点，并且指引用户下一步该做什么，这样会让页面更加友好。换句话说，设计让用户对网站产生了美好的第一印象。

对角线平衡法则并不一定适用于每个页面设计，因此不必强制遵守。但是如果发现对角线平衡可能有助于强调整个页面意图，不妨考虑一试。另外，当你在开始某个设计的时候，时刻想着对角线平衡法则，很多情况下它都会发挥作用。

发现页面布局——《瞬间之美》

小白兔 — Fri, 05 Mar 2010 03:56:48 +0000

前不久有一位客户来找我，带着一大堆关于首页设计的需求。它在设计一个专门面向平面设计师的社区网站。他已经完成了一项困难的工作，就是精简了需求列表，只保留了那些真正有用、确实与网站用户相关的部分。而我所要做的就是把这份列表转变成美好的第一印象。

由于这个网站主要针对平面设计师，因此它的首页需要一个中心区域突出显示大量富有特色的图片，同时还需要一些小区域来安排用户的账号信息、网站特色项目以及登录框。当然，页面中还需要包括那常见元素，如网站logo、欢迎辞、导航栏、搜索框以及页脚信息等。

另外，就算这些相对来说尚可应付，网站首页还需要放置一些关于业界和站点本身的头条新闻以及摘录片段。

仅展示图片一项就将占据很大一块的页面空间。要将其他所有栏目都加进来，同时还要包括新闻区域，就显得有些棘手了。别忘了，即使首页的所有这些部分都能完美的展现，能让用户得到他们想要的东西，但毕竟这个站点主要的业务是吸引浏览者们注册并成为该社区的成员。因此我需要一种设计诱使用户注意到Sing Up Now按钮，同时让他们想要去单击它。

发现页面布局

我已开始努力尝试去发现页面的布局。对于页面设计而言，布局是其中最基础的元素。

我在这里用到了“发现”这个词，因为页面的布局设计并不一定出自于设计师本身。当我想到页面布局的时候，经常会联想到Bob Ross。这个画家最让人津津乐道的一点，就是它能将随意洒到画布上的颜料加工成一副满是“快乐的树”的风景画。他总是根据绘图的进展随机应变，决定下一步该做什么。

明白了吧，不是你选择页面布局，而是它选择了你。

布局是内容组织的必然结果，我会秉承最基本的（同时也是相当复杂的）设计方法。简单来说，我把所有的栏目区域都扔到显示屏上，然后移来移去不断调整让它们彼此协调。

这个过程有点类似玩拼图游戏，只不过没有盒子封面那张最终完成的图作提示，而且拼图的每一个部分都能任意改变大小。

我最先考虑的是主要图片展示的部分，因为它需要的区域最大。与此同时我也颇为得意的创建了一个宽宽的区域防治新闻，因为它需要空间显示文章的摘录片段。至于My account、Navigation以及Featured item，我把它们平等对待，放在了页面左侧。

几分钟后，我得到了第一个版本。

这时我突然感觉到新闻部分似乎太宽了。这个宽度能让我显示很长的头条，也能放很多摘录内容，但同时它也不便于继续划分区域，分别去显示关于站点的内容和关于业界的内容。为了纠正这一点，我把该区域分开为两列，如图：

__________________________________________________________________________________________________

现在页面开始成型了。整个网页更突出了站点的主要目的——展示社区成员的艺术创作以及相关新闻。所以我确信自己的方向正确。恩，继续前进。

我知道首页的主要目的是吸引（或者说诱使）用户注册，因此我把注意力放在了注册区域。

一般来说注册区域都需要一些颇具号召力的标语和一个按钮。所以我随便写了一些字，做了一个按钮，然后把它们丢进去。如图：

就这么简单

【转】2009年前端技术领域回顾

小白兔 — Mon, 08 Feb 2010 08:00:37 +0000

在过去的2009年，如果你关注前端技术发展动态的话，可能会积累一大堆信息，有的保存在书签里，有的在推特上，有的在你的博客里。整理整理挺有意思，当初看到那些文章那些事儿的小小兴奋，又会油然而生。或许，经过一年的沉淀，再次回顾会有新的思考和启发吧。

Javascript开源库/框架

09年，Javascript框架发展到了成熟期，几个老牌库都发布了新版本：
2月－ jQuery 1.3.2发布，YUI 2.7.0发布
9月－ Prototype 1.6.1发布，YUI 2.8.0发布，YUI 3.0.0 GA发布
10月－ Script.aculo.us 1.8.3发布，MooTools 1.2.4发布
12月－ Dojo 1.4发布，jQuery 1.4 alpha 1发布
随着Javascript库越来越成熟，库的自身发展也面临难以突破的瓶颈。大多只是继续修复bug，兼容新版的浏览器，提升性能，功能的增加变得越来越有限。这里面变化最大的要算YUI 3，和传统的库不同YUI 3更注重前端开发的组织和结构。这种框架思想的转变，也许是未来发展的方向。基于开源Javascript库的开发模式已经被普遍接受，所以09年很少再出现像jQuery、YUI这样的公用库，但是越来越多的专用库纷纷出现，像图形处理和3D的库，如: GLGE(http://www.glge.org，一个WebGL库)、Raphaël(http://raphaeljs.com，一个跨浏览器操作SVG的库)、SVG Web(http://code.google.com/p/svgweb，一个提供SVG跨浏览器支持的库)等。像手机应用方面的库，如 PhoneGap(http://phonegap.com)、jQTouch(http://www.jqtouch.com)等。
1月，白宫网站（http://www.whitehouse.gov）改版，使用开源的jQuery库，华丽的交互效果，成为史上最酷的政府网站。
7月，BBC开源了内部的库Glow(http://www.bbc.co.uk/glow/)，很像jQuery的库，向后兼容IE5.5。发布后立刻遭到jQuery作者John Resig的猛烈批评。
11月，Google也开源了内部的库Closure Library(http://code.google.com/closure/library)。虽然随后陆续有人批评它的代码细节有不少低效的地方，但丝毫不影响它是一个功能强大的库，而且在库的模块化设计方面很有特点。

浏览器

新的浏览器大战实际上成了Javascript引擎大战。从08年Chrome的V8挑起“事端”开始，09年各个浏览器厂商纷纷换新的引擎。 6月，Firefox3.5携新的Javascript引擎TraceMonkey发布，同期Safari4.0.1正式版发布，引擎换成Nitro。 12月，Opera10.5 alpha版发布，引擎换成Carakan。纷纷叫板V8。作为前端开发者还是很乐意看到这么激烈的竞争场面。相反，09年初众人瞩目的IE8发布，全面兼容CSS2.1，在标准支持方面进步不少。但仍对HTML5、CSS3、Canvas紧闭大门。IE6的市场占有率虽然持续下滑，但仍占据很高的比例，越来越成为前端开发的障碍。Facebook、Youtube和Twitter等热门网站相继抛弃对IE6的支持，提示用户升级浏览器。

Web标准

7月，W3C终止XHTML2.0的工作，转向HTML5。HTML5并不是一套完全不同的标准，而是在HTML的基础上扩展了更多有用的标签，如video、audio等，同时增加新的离线存储、跨文档通讯等机制，这些都有利于开发更强大的Web应用，所以受到广大开发者和浏览器厂商的青睐。虽然HTML5的草案还在制订中，但几乎所有最新的浏览器都有不同程度的支持，IE8也开始支持跨文档通讯。2010年HTML5势必还会有更大的发展，围绕它的话题不会中断。
12月，ECMA-262正式命名为ECMAScript，ECMAScript第5版标准几乎全票通过。

前端会议

09年给我留下深刻印象的一些技术会议：
2009/3/18-20，Mix09
官网：http://visitmix.com
视频资料：http://videos.visitmix.com/MIX09
2009/4/24-25，JSConf 2009
官网：http://jsconf.us/2009
2009/11/7-8，JSConf(柏林) 2009

官网及会议资料：http://jsconf.eu/2009
2009/6/22-24，Velocity 2009
官网：http://en.oreilly.com/velocity2009
2009/9/14-16，Ajax Experience 2009
官网：http://ajaxexperience.techtarget.com/conference/index.html
会议资料: http://www.slideshare.net/ajaxexperience2009/slideshows
官网：http://yuilibrary.com/yuiconf2009/
2009/11/20，FullFrontal 2009
官网：http://2009.full-frontal.org/
2009/12/19，第四届D2前端技术论坛
官网：http://www.d2forum.org/d2/4/
09年前端领域着实涌现不少令人惊喜的技术和事件，对于前端开发者来说要不断更新自己的知识否则很快就Out了。同时，也可以看出前端技术的发展那是相当的快。2010年这种发展势头不会减缓，期待经历更精彩的一年！

「风格」与「设计」

小白兔 — Mon, 21 Dec 2009 05:28:30 +0000

这是著名网页设计师杰夫·齐曼（Jeffrey Zeldman）给 Adobe 设计中心的「对话框」栏目写的文章。相信国内跟网页设计有关的人——无论甲方还是乙方——读完都会心有戚戚焉。齐曼不但在网页设计领域卓然成家，更写得一手好文章。能读英文者，请移步 Adobe 设计中心网站阅读原文。
文：Jeffrey Zeldman

我的父亲是个业余画家，我的童年就是被他的那些美术书籍塑造的。跟很多小孩一样，我对「纯粹的再现」十分着迷。那些巨细无遗的版画——搏斗中的角斗士，风景如画的村庄，日出时的罗马废墟——每每让我瞠目结舌、口不能言。当时我对艺术的理解就是「画功好」。在那年幼而懵懂的日子里，细节越丰富、蚀刻的线条越密集、树叶越多，这艺术家就越棒。稍后我邂逅了漫画，再往后是美术馆。麦菲·派瑞（Maxfield Parrish）让我想嗑药，也让我明白自己永远当不了画家。保罗·克利（Paul Klee）在我看来是个不会画画的烂艺术家。安迪·沃霍尔是个骗子，因为他的作品都是助手做的。

今天我仍不敢说自己明白了艺术是怎么一回事，但我的确知道自己早年那些想法与艺术的本质毫无关系，而仅仅和纯粹的视觉刺激有关。艺术，和迪士尼或马戏团一样，是一种奇观。但敬亭山看多了也会厌，棉花糖吃多了也会腻，我也渐渐从感官刺激升级到了风格层面。史蒂夫·狄可（Steve Ditko）的蜘蛛侠。波普艺术。摇滚乐，还有骚灵乐，然后是朋克专辑的封面。我开始对「风格」上瘾。我分不清好坏，但我知道什么东西够酷。

今天很多年轻网页设计师看待自己这门手艺的视角，和我以前看待流行文化的视角是一样的。要么酷，要么烂。他们错把风格当成了设计，而其实两者是完全不一样的东西。设计是发生于各个层面的沟通。它告诉你身在何处，你现在能做什么，并且让这个「做」的过程尽量方便。风格意味着重复，它是关于「风格感」的沟通。用视觉语汇说，风格是设计的一个方面；用商业语汇说，风格是有关品牌特性的沟通。

风格有时也会传达出设计师对设计主体的厌恶。「这东西太闷了，所以在这儿加了点条纹，这里有个下拉式菜单。总之你要知道以我的能力做这种小活儿绰绰有余。」在这个意义上，风格是一种地下语言，只能在同侪之间传递，和网站的访客或目的无关。的确，这种风格上的花样还有可能与站点的目的相悖。然后，研究网站可用性的大师就会现身，把癖恋风格造成的恶果归咎于设计。

风格先行的设计师如果有幸能只选那些符合他们的风格偏好的活儿来接的话，也不是不能成功，可惜大部分网页设计师没有这种待遇。不过，他们仍然热衷于将顶尖设计师的风格语汇应用到手头的项目上。于是我们看到做得像锐舞派对宣传单张那样的电子商务网站，或是一个以传递信息为目的的网站充斥着奇怪的导语。（少数这类的导语读起来很炫，但通常是搞错了方向，而且不合时宜。）

万维网曾经像一本电话簿。现在它更像一张设计作品大全。更准确地说，像是二十位知名设计师的作品大全。年轻设计师以他们的弟子自居，反复拷贝他们的风格。视觉设计和「以沟通为目的的设计」之间的界线在这些设计师身上荡然无存。同样，他们也没搞清真正的风格和山寨风格之间的区别：前者源自项目的本质，后者则像是硬接在项目上的义肢。

癖恋风格的网站会令访客迷惑，令用户和为这网站付了钱的公司受害。如果设计师不是从「这个网站是做给谁用的？」和「他们用它来干嘛？」出发，我们只能得到没有意义的美丽外表。正是这种设计令「美」蒙尘——至少在某些圈子如此。

问题在于，我们的社会迷恋表象（并且害怕窥视表象之下的东西）。人们会因为一双球鞋的样子很酷就为它一掷千金，Beck 的歌能用来当广告配乐。在这样的消费文化里，炫和酷就是标价最高的商品。

对于某些客户以及太多的年轻设计师而言，用 Flash 做的多媒体站成了网页设计的同义词。网页上如果没有点带响的和会动的就不会好到哪去——酷就更加别提了。用 Flash (SWF 文件) 做的项目佳作频出，并终于成了各种大奖的宠儿——尤其是那些老牌的高姿态奖项。在那些颁奖礼中，「数字作品」总是被安排在前面，后面才是用上百万美元堆出来的电视广告。评委们对电视广告在概念和制作水准上的期待超过了商业电影。自然，他们也希望网站能有那种将他们掀翻在地的力量。

只要评委们用的是最新版的浏览器、宽屏 G5、奔腾处理器和 T1 专线，那些利用最新技术做出来的突破性花哨实验就能继续得奖。当然，前提是他们必须在视觉设计和编程水平上达到了奖项的要求。我们在此谈的不是烂设计，我们谈的是最高水准的设计，但，这只是设计的一个类别。

我的大部分同事都在设计这样的网站。他们的成就令我惊叹。他们获奖是实至名归，我也为他们喝彩。但我也有我的担忧。

我担忧，因为这一类设计虽然适用于某些场合，但在更多的场合中并不恰当，而它已经成为唯一一种能获奖的网页设计。正因如此，它也成为年轻设计师争相模仿的对象。他们不只在个人项目（很棒的个人项目）里模仿，接商业项目时也是如此。对于后者，这可能会造成伤害。

我担忧，因为分不清风格与设计的年轻设计师学到了大师们的技巧和风格，但未必学会了如何利用网站这一媒介来沟通。《黑客帝国》里的「子弹时间」很棒，但用在纪录片就不合适了。由于大部分网页设计都是为了传递信息（至少本应如此），这种在信息类网站里大批移植他人风格的做法并没有促进这一媒介，相反让它愈发令人困惑。

我担忧，因为有些设计师会永远无法形成自己的风格，更别提针对不同的项目发展出适合品牌形象的风格了。这是因为负责招聘的人往往缺乏批判性的语汇，且会给那些简历看起来很酷很炫的人安排完全不适合的工作。（「以你的才华，完全可以把他们盖了。」）因为，理解品牌塑造、懂得用设计去沟通、知道风格与设计的区别的传统设计师迟早会进入这一市场。届时，那些没有机会理解网页设计奥义的年轻设计师就会丢掉饭碗。

我也为这媒介本身担忧，因为在漂亮的外表和高度的可用性之间存在一大片中间地带，大部分网页都属此类，但这一类的网页设计师却少之又少。专注这种设计的好处也越来越少，因为它虽然令用户愉悦，却无法获得业界肯定，除了一张支票以外，设计师可谓别无所获。（「天，加载速度好快，又那么好用，而且在我爸的老戴尔电脑上的 IE 3 里看都没问题。」你听说过有评委说这样的话吗？嗯，我也没有。）

我最担忧的是用户。商业性的网页开发已经发展了十多年，但用户还是不能轻松有效地找到想要的东西，他们还是不懂，为什么在网页上阅读这么不舒服，而阅读却是大部分人在网上的主要活动。

只要我们的社会把风格置于设计之上，把表象置于实质之上，这种状况就不会改善。当然，每隔四年，当我走向投票箱时，都会想到同样的问题。

（翻译：李如一）

流程图一枚

小白兔 — Fri, 18 Dec 2009 06:21:31 +0000

根据阿里UED的工作流程图，自己画了一幅。