雅虎用户体验设计指南

YAHOO用户体验设计指南1技术部BI组2008年11月第一部分以用户为中心的设计211什么是用户为中心的设计212UCD的商业价值513应用UCD7第二部分设计原理1021人性化的界面设计原理1022可视化设计原理1423可视化语言2824设计时普遍需要考虑的问题31第三部分YAHOO设计版式介绍3231页面类型（重要）3232页面结构和页面整体设计原理3233局部页面设计原理4334颜色5835字体5936图形和图标6037行为6238技术6439书写字体、语言和术语65310广告681译自”YAHOOUSEREXPERIENCEGUIDEV20”第一部分以用户为中心的设计11什么是用户为中心的设计以用户为中心的设计（UCD）是一种增加产品易用性、提升用户体验的设计方法。UCD的关键在于理解用户他们所处的环境、他们的目的是什么、达成目标必须完成哪些任务、他们的技能和能力如何。整个设计过程必须基于实际数据用户的输入和反馈，以保证设计不是基于产品开发团队的假想即假想用户会怎么做。由于UCD简化了收集用户反馈的流程，并将之集成到设计过程中去，因此保证了交互系统设计的有效性。UCD意味着，产品开发团队首先“观察用户”，并和用户一起开展随后的所有工作。在整个设计过程中，用户会对产品原型进行评估，并判断产品是否满足了他们的要求。经过反复的评估和设计，使得产品技术满足用户需求。UCD会描述用户的所有体验，而不仅仅是用户在页面上所看见的。它将用户的目标与产品功能应用联系起来，而不是接受需求后就直接开发产品。UCD要保证产品是有用的、易用的、并且是用户需要的；它不仅仅是最终的HTML、程序代码或可执行程序。需要注意的是，UCD和市场调研是不同的，UCD和市场调研可互为补充。市场调研通常回答“应该做什么产品”，市场调研能知道用户需要什么，什么促使用户购买，他们会为什么产品付钱，以及什么决定了他们的消费习惯。用户体验，则从另一个方面入手，它解决用户实际上会怎么做，什么使得产品简单或复杂、易用或不易用。因此，用户体验更适合回答“产品应当如何设计”图1将一个新产品/技术的采纳者根据他们采纳的时间分为五类人创新的扩散曲线创新者（INNOVATORS）他们是勇敢的先行者，自觉推动创新。创新者在创新交流过程中，发挥着非常重要的作用。早期采用者（EARLYADOPTERS）他们是受人尊敬的社会人士，是公众意见领袖，他们乐意引领时尚、尝试新鲜事物，但行为谨慎。早期采用人群（EARLYMAJORITY）他们是有思想的一群人，也比较谨慎，但他们较之普通人群更愿意、更早地接受变革。后期采用人群（LATEMAJORITY）他们是持怀疑态度的一群人，只有当社会大众普遍接受了新鲜事物的时候，他们才会采用。迟缓者（LAGGARDS）他们是保守传统的一群人，习惯于因循守旧，对新鲜事物吹毛求疵，只有当新的发展成为主流、成为传统时，他们才会被动接受。这个划分对于新产品/新技术的推广者来说非常重要，针对不同的人群要采用不同的推广策略。将ROGERS创新的扩散曲线和AU模型关联起来的话，关键点还是主导设计，主导设计是被大多数人接受的设计，它出现于上图中黑圈附近。注更多内容参见HTTP/FXDBOKEECOM/5264926HTML鸿沟期是指产品吸引了早期接纳者后、赢得更多的客户之前的那段间歇期。在硅谷这样的现象不断重复新的技术出现，获得风险投资的支持，大量的媒体报道，然而最终这些新技术却失败了。这些新技术、新产品就是掉进了鸿沟，实际上每个新技术都会经历鸿沟，关键在于采取适当的策略“跨越鸿沟”。这个时期是个“令人极度绝望的时期”，大多数失败的产品都是在鸿沟结束了其整个生命周期。高科技产品的最大特点，也是市场营销最困难的地方，就是其“早期市场”（初期的小范围专业市场）与“大众市场”（中期的非专业大众市场）之间存在着“鸿沟”，能否顺利跨越“鸿沟”，决定了一个高科技产品的成败。12UCD的商业价值长期来说，UCD可以节省成本人们通常会误解UCD将引起设计开发拖延、雇佣UCD团队会增加成本。但实际上并非如此。在长期来看，采用UCD是可以节省成本的。在软件的整个生命周期中，80的成本来自于发布后的维护费用。在维护费用中，80是由于没能满足或没能预见用户的需求。如果能在早期就解决易用性问题，相对产品设计后期才考虑这个问题可以节省约1/4的成本。更进一步，着急上线不能满足用户需求或不便于使用的产品，在后期可能会带来更多的维护成本。UCD降低客服成本由于提高了产品的易用性，客户支持的成本将降低。例子1998年，YAHOO客服被询问最多的问题是我怎么发布广告我怎么编辑/删除我的广告仅从日志数据进行分析，产品团队理解不了如何改进产品。而从用户体验测试中，明白了为什么用户会提出这样的问题。当页面开始下载时，用户就已经开始滚动页面以跳过横幅广告，同时也跳过了页面顶部的广告操作功能。经过页面改版之后，就解决了这个问题。假设每个电话给公司带来8美元的成本，可以看到易用性研究是多么重要。图2右图为改版后页面。UCD帮助达成商业目标由于设计开发团队了解用户、了解他们的环境、技能、能力，因此产品就能最好的满足用户的需要，并帮助用户达成目标，这样的产品就能很好的帮助公司达成其商业目标。YAHOOSHOPPING的例子19982000年，用户的网购行为被广泛研究。YAHOOSHOPPING1998上线,网站就像是一个产品页面，搜索结果不显示产品的图片。团队认为这样可以使得下载速度更快，因而受到用户的好评。但实际上用户在这里很难查找商品和商户。图3左图为1998年版，右图为2001新版。突出图片，方便用户查找。UCD增加企业内部的效率和生产力为内部用户开发的产品，UCD能提高企业整体的效率和生产力。例如，UCD能减少错误，促使组织更稳定，降低成本，减少培训，支持，服务，产品文档等等。设计的一致性设计的一致性是设计的一个最基本原则，不仅仅是因为这样比较美观，还因为它使得产品的易用性提高了。如果产品设计能保持一致性，用户就可以更快的学习系统的可视化语言；由于用户可以利用他们过去所学到的知识，他们能更有效的使用整个系统。设计的一致性不仅仅改善了产品的易用性，它还对品牌构建有价值。保持设计的一致性，可以让用户能感受到系统是一个独立的实体，因此YAHOO旗下的所有产品都应当维持设计的一致性，以便它们看起来是统一的。13应用UCD有效的界面设计不能仅仅是套用指南和规则。要做出确实有用和易用的产品，必须遵循以用户为中心的思想和设计方法。恰当的技能组合、团队结构和开发过程都是必不可少的。（1）团队构成几乎没有人能拥有UE所需要的所有技能，因此需要构建团队，使得每个人都有其专业技能。下面介绍所需要的技术和人员。交互设计师设计产品概念原型，并保证其是前后一致的、好理解的。他们提出的解决方案，应当支持整个产品设计开发过程，而不是割裂的模块。交互设计必须考虑任务需求，以及用户的技能、知识和能力。交互设计师通常拥有如下背景人机交互、人类学、图形设计、工业设计或其他类似的学科背景。可视化设计师是图形设计的专家，拥有将产品概念原型和产品美化及交互设计结合起来的技能。他们是版面设计、排版、着色和插图方面的专家。他们设计产品页面，使得网站更形象、更美观、和整个站点保持形象的一致性。用户研究员（易用性工程师）收集用户操作的定性数据。他们研究的特点是研究的是定性数据，而不是像数据挖掘那样研究定量数据；强调观察用户的行为，而不是问用户“你们怎么做”；以理解用户意图为中心，而不是仅仅观察他们怎么做。页面开发工程师能快速的创建产品的测试版及界面，并在实际产品正式开发前供测试使用。主要依赖计算机技术和编程能力。（2）产品设计的周期有效的设计过程包括以下几个方面研究、设计、创作原型、测试和反复。研究基于用户的设计表明产品开发团队了解他们的目标用户。对用户准确的理解，来源于广泛的定性和定量研究，它帮助团队识别市场细分和用户需求、行为和态度。设计把设计引入开发过程的一个基础前提是设计是开发的基础。如果基础出了问题，那么在开始编写代码后就很难改正了。在整个设计过程中，不仅仅要定义目标和产品特征，还需要定义目标用户是谁，他们有什么目标，他们如何使用产品，以及任务是什么。设计需要考虑产品的商业目标，因此首先确定商业目标是尤为重要的。在此过程中，团队需要考虑产品的目标，通常产品目标比产品的特征描述的更加清楚。产品原型由于产品是从概念构架和交互模型中进化而来的，因此设计产品原型非常重要。产品原型不仅仅帮助团队进行设计沟通，还对设计的可视化及了解整个任务流程有帮助，还有助于在设计过程中收集用户反馈。铅笔和纸画出来的原型保真度较低，用于肉眼观察产品任务的组织结构和概念创意，并且采集用户对此的反馈。保真度高的原型需要更多操作，帮助团队收集用户人机交互的反馈。测试在设计过程中进行用户测试有很多好处。用户测试的反馈可以对当前设计、未来发布和实际产品提出更多的指导，并且有可能得到提高整个网站易用性的一般性结论。还能让开发团队更深入的理解用户的感觉、满意度、对产品的疑问、产品存在的问题等。反复几乎没有一个产品团队可以在第一次设计的时候就明确找到最好的解决办法。因此，要给团队充分的时间来反复进行上述操作，使得他们有机会基于用户反馈而不断改善其设计。在编写代码之前花越多的时间来优化设计，在产品开发的实际阶段就能节省越多的时间。图4产品设计流程项目开始公司目标P用户和任务分析IDUR技术决策E系统分析数据模型E任务模型I用户概念模型IDUR用户模型I纸版原型（ID）易用性测试（UR）数据流及可视化设计原型（IDVE）易用性测试（UR）开始设计E功能测试PEID易用性测试UR发布PP产品开发者E工程师ID交互设计师UR易用性研究员VD可视化设计师第二部分设计原理21人性化的界面设计原理（1）系统状态的可视化通过界面，用户能清晰的了解当前交互的状态。需要给用户以适当的反馈，让其了解目前进行到什么程度了。对于那些需要长时间响应的操作，反馈尤其重要。反映时间在01秒内，用户会认为系统是即时响应的；1秒内有反映，用户就能不间断操作；10秒是保持用户对当前对话框关注的时间上限。若延迟太长，用户会在等待的期间去做其他的事情，因此清晰的反馈给用户“系统将在什么时候完成当前任务”是非常重要的。如果不能预计时间，那么就需要不断的给用户反馈，以免用户认为程序出错或停止了。图5和图6，左图是比较好的反馈，右图则不能让用户知道目前的进度。（2）将现实世界和设计联系起来只要有可能，设计应当尽量反映目标用户的生活经验。包括使用相似的语言模式，避免不必要的术语，适当的时候使用熟悉的比喻，遵循现实世界的习惯。但是使用比喻也存在其缺陷，即用户可能会根据比喻进行延伸，这样的延伸可能超过了产品设计的范围，这导致产品不能满足用户的预期。1996年YAHOOSHOPPING第一次上线的时候，每个商家的商品放在一个的购物车中，当用户想要付帐时，他们必须对每个商店的产品分别确认购买。由于YAHOO购物车是作为一个整体呈现的，通过用户调查，发现用户希望可以一次确认购买所有的物品。但是出于技术和商业方面的考虑，并没有改变页面设计以符合用户的这一预期。在1998年产品修改了页面，更清楚的向用户传递了“每个商店的产品需要逐一确认购买”这一事实。图7和图8，左图为1996年版，右图为1998年修改后的页面。（3）尽量让用户来控制整个交互过程只要可能，就让用户来控制整个过程，让用户感觉到是他们在控制整个系统，除非他们有操作，否则系统状态就会保持不变。用户应当是交互的发起者，而不是接受者。应当避免令人惊讶的系统行为、冗长的数据输入、无法或很难获得必要的信息、不能提供必要的操作。（4）一致性和标准化在设计中保持一致性是重要的；同时，产品设计和目标用户可能熟悉的其他相关产品之间保持一致性也是很重要的。在相似的情况下，交互操作的顺序应当保持一致性。在一个设计中，术语和图表设计元素（颜色、排版、大小写、字体等）都必须保持一致性，以免用户对如何操作感到迷惑。由于用户通常会根据他们以往的经验来决定如何和系统互动，因此只要有可能就应当保持和其他相似系统的一致性。保证产品是一致性的产品内部一致和以前的版本一致和其他相关系统一致，例如目标用户使用的其他流行站点用语一致和用户的预期一致图9YAHOO的3个产品之间，从操作方式、排版、颜色的使用等方面都有很高的一致性。（5）适应性和效率设计应当有很好的适应性、能由用户定制，而且当用户逐渐掌握普通功能后，能提供其高级功能。例如提供解决同一个问题的多种方法、用户可以自主设定参数等。图10是YAHOO图片上传功能界面，当用户熟悉了产品页面之后，提供给用户一次上传多个文件的高级功能。（6）让用户识别而不是让用户记忆只要有可能，就尽量不要让用户去记住该如何操作（例如命令行），而是应当让用户从一系列选项中去识别应当如何操作。心理学的研究表明用户识别熟悉的事物比记忆它们的准确率高的多。（7）美观且简洁的设计研究表明当提供给用户适当的信息时，用户能够很好的应用产品。提供过多的选择，会使得用户因无从选择而感到迷惑。应当在满足用户需求的前提下，尽量采用最简洁的设计。此外，美观的视觉效果能提高用户的产品体验。（8）预防错误只要有可能，就要避免错误发生，这就需要预见用户可能在使用当前技术或产品时会遇到什么问题。使用UE能很好的了解用户首先会在什么地方遇到问题，接下来就可以据此来修正设计。让用户再次确认当前操作，这能有效的防止出错。但是过于频繁的让用户确认，会导致用户厌烦、降低用户使用产品的效率，甚至可能使得用户机械化的对待再次确认的对话框。（9）支持错误识别、诊断和修复由于任何技术都可能出现错误，因此向用户提供以下支持是必要的1当错误发生时能够识别是什么错误，如何发生的；2清楚的描述错误信息、帮助用户了解错误是什么；3帮助用户解决问题。这些方面的努力，可以帮助用户提高产品使用技能，提高用户满意度。图11网景4和IE4的错误提示。右图IE4提供了清晰的错误说明、提供错误的可能原因，并且给出解决问题的建议。（10）帮助及文档尽管只有很少的用户（通常是专业用户）使用帮助及文档，但还是要为用户提供这些。例如，当用户寻找产品概要时，应当提供目录列表或索引；用户测试和研究能帮助发现用户什么时候最可能使用帮助和文档、用户是如何使用它们的。22可视化设计原理（1）什么是可视化设计可视化设计给信息传达问题提供有效且美观的解决办法。应用在GUI（图形用户界面）设计和网页上，通过可视化设计，信息传达更加有效，因而能提高用户的使用体验。通过可视化设计，有助于用户识别同一品牌下的不同组成部分。人们主要通过视觉来操纵世界。由于人们面对的现实世界通常是视觉混乱的，眼睛已经发展出解决混乱的方法。我们关注视觉较舒适的东西，而对紊乱的东西感到迷惑。当看到那些混乱的东西，眼睛通常利用结构来搞清楚他们的意义。当网页显得很混乱时，人们往往缺少耐心。从混乱的页面中找出有效的信息需要用户付出更多的努力，用户常常因此感到挫败而离开。可视化设计旨在将混乱的页面组织起来，以便明晰其意义，这有效的减少了用户挫败感。（2）可视化设计的组成部分最简单的方法是讨论可视化设计的组成部分。可视化设计的组成部分包括在参考物的指定边界或框架下，可视化元素的组合和排列。使用边界可以让我们只关注给定区域的可视化元素构成，而不去考虑其所属的环境。因此我们可以只关注设计，而不用过多的考虑超越设计本身的其他可视化元素。例如，我们浏览页面时，不会去关注浏览器的图形芯片和控制栏，以及监视器两边杂乱的面板。（3）视觉平衡可视化设计的本质在于视觉平衡。眼睛希望看到事物最简单的形态，因此人们总是不自觉希望看到平衡、有规律的东西。平衡的事物指的是所有可视化元素看起来相互是视觉补偿的。一个东西让人感觉是稳定且完善的，就容易使人从视觉上感到舒适。不平衡的排版让人觉得是不稳定或有问题的，这使人们容易感到紧张。心理因素使得人们对这种紧张很敏感，进而觉得有什么东西出了问题，结果导致眼睛也受到影响。图12左边的圆靠近中间，使得人们想要把它往正方形的中间挪。右边的圆过于靠近边界，使得人们希望将边界往右边拉。两者都不平衡，都不是好的设计，使得人们想要转移视线。可视化设计的每个组成部分都包含有不同的元素，他们彼此相互作用。视觉的不平衡会影响每一个人，而不平衡的原因也不总是显而易见的。平衡性受到所有元素的视觉特征影响，同时也受到它们相互作用的影响，以及它们与整体相作用的影响。每个人都可以对简单的视觉组成部分应用设计的基本原理，但是对于复杂的设计问题则需要可视化设计工程师来完成。（4）视觉效果怎么能做到视觉平衡呢视觉效果是最需要考虑的事情。一个视觉元素的效果指的是在整体的视觉环境下，它引起关注的能力。尽管，以往的视觉经验会影响用户观察视觉元素的效果，我们仍然可以概括一些普适原则。有视觉效果的元素指的是，当其他事物保持不变的情况下，它的存在可以吸引用户的眼球。什么视觉特征会影响元素的视觉效果大小或面积其他因素保持不变时，越大则效果越明显。在例子中，大的方块效果好，更吸引眼球形状更简单的形状（例如圆形、正方形）比不规则形状的效果好。例子中，圆形比它右边的2个效果更好，尽管他们占用的面积一样，但我们更倾向于关注到圆形。孤立被更多空白环绕的事物其效果更明显。例子中，最右下角的方块更受关注图14大小、形状和孤立。对比度和颜色和背景对比度越大的元素其视觉效果越明显，饱和度、亮度和颜色同样对视觉效果有很大的影响。例如，红色比蓝色效果更明显，明亮的颜色比黑色或灰色在中性背景下效果更明显。垂直位置垂直位置更高的事物，其视觉效果更明显。这和环境方向或我们对上下的感觉有关。这也是印刷体的几何中心通常比他们的重心要低的原因。图15在同一个背景下，相同大小的方块中，和背景的颜色（或亮度）对比度更大的方块效果更明显（左图中，黑色方块效果最明显）；中图中，饱和度最大的红色，其效果最明显；右图中，字体的下半部通常较大，因为垂直位置较高的部分其效果更明显；可视化知识，与生俱来兴趣例如，一张脸的照片比一张普通事物的照片的效果更明显，因为对于人类来说，我们从心理上对其他人的脸更敏感。同样的，用户以往的经验会影响他们，因此如果能很好的了解用户，就可以利用他们的兴趣来影响视觉效果。图16YAHOOSHOPPING在右图中增加了背景，使得视觉效果更加明显了。图17上图是2个错误的视觉效果例子。左图中，黄色标注了右边栏，导致应当被用户关注的标题反而容易被忽略。右图中，层次实际上是无效的，内容比标题的视觉效果明显得多。特别的，红色的赞助商图表过于明显，使得它完全盖过了标题的视觉效果（5）视觉对比任何视觉元素之间完全没有任何对比或不同几乎是不可能的。只要存在2个视觉元素，由于视觉特征的不同，他们多少会形成一些对比。即使这2个元素是完全一样的，他们也会因为所处位置的不同而存在空间对比度。对比度增加了视觉深度，如果没有对比，则不可能创建一个能吸引眼球的事物，也没有明显的视觉层次。如果没有相应的对比，页面会显得很单调，不同内容无法区分。对比度增加了视觉深度，因为它引入了以前没有的视觉特征。引入的视觉特征越多，就越能定义页面上不同元素之间的关系，从用户界面的角度来说，就越容易定义页面的视觉层次。图18从左到右，对比度逐渐增加。左图，只有段落之间有空白，显得非常单调。中图，增加了图片以增加对比度，但是由于使用了同样的内容版式，因此也显得比较单调。右图则是不错的排版，采用了大图小图结合，背景颜色等，构建了清晰的视觉层次。视觉对比度是用来区分不同元素的。有效的视觉对比度指的是能够有效分辨不同的元素。换句话说，视觉元素必须有足够的对比度以便能和其他元素轻易区分。通过应用大小、形状、颜色、位置以及上述这些特征的组合，能够达到区分的目的。图19好的对比度设计用户界面设计，要求不同的设计元素之间在外观上很容易区分。各元素在设计上是可区分的，不能给用户区分他们带来困扰。当元素之间的区分度较小，用户通常不会认为它们是不同的，反而会认为细微的大小差异、未对准、字体大小是设计误差，因而影响用户对产品的满意度。图20第一个图的段落之间区分度最好，第二个图的字体之间区分度最好，第三个图的区分度最差，字体之间的差异最小，而段落又比较多，浏览它的时候最费力。第四个图显示了段落，但是没有对子段落做超连接，没有做超连接清晰的表示子段落是不需点击的。通过对比可以使得视觉突出，因此使得设计的特殊部分被关注。通常，可以用对比度来进行视觉效果的度量。当2个事物之间有很多对比，那意味着他们是截然不同的。差异可能是因为一个或多个视觉特征（如形状、大小、颜色、位置）的不同引起的，必须特别注意的是，对比需要前后一致。图21对比不足。“CALENDAR”的图标应该显示它是当前选中的，但是和其他图表的区分度太小，一眼看不出来。（6）从整体上把握设计理解可视化设计的最关键的概念在于事物的整体不是它的所有组成部分的和，各个组成部分之间是相互作用的。每个元素本身可能都是平衡的设计，但是当它们作为整体的一部分时，可能就会造成不平衡。整体的平衡取决于不同元素之间的相互作用。换句话说，在可视化设计中，任何事物都是相互联系的。好的可视化设计取决于与之相关的其他部分。图22结构太多，让人感觉完全没有进行页面设计，尽管每个部分单独拎出来都是没有问题的设计。（7）简洁的设计简洁的设计是构建统一整体的重要部分。为了最大化效率，设计应当整合它的各个组成部分。也就是说，只采用必要的视觉元素，以便使设计更清晰。使用多余的元素会对用户造成困扰。一流的设计能够百分百解决问题，同时还是高度简洁的。如果单一元素可以完成多项任务，那么使得设计更简洁。简洁的设计让用户更好理解、更容易使用。简洁、一致的设计是指一个方案解决一个问题；但是并非所有的设计问题都可以用一个简单的方案来解决。尝试用一个设计来解决多个问题是不可能的。首先应当提炼出问题，其次才是解决问题。图23字体和版式的差异太多，不仅不能帮助组织页面内容，反而成为了噪音。通常网页会使用很多种字体来组织内容。字体应当是清晰的，它们应当传递信息而不是干扰信息。（8）规则和重复使用相似的元素、保持空间排放的一致性，可以使设计视觉上是有规律的。采用多个相似元素，重复使用相同的特征（例如颜色、形状、大小，或这些的组合），使用相同的版式，这些做法都可以降低视觉的复杂度，同时强化整体的视觉结构。不规则规则间隔是否是标准的、是否对齐、大小和形状是否是有规律的，这些都会影响整体的规律性。如果重复出现的元素或特征不如其他元素视觉效果明显，则整个版式的规律性就不明显了；一旦重复采用了某个版式，破坏它会产生特别明显的对比，因而将用户的关注度完全吸引过去。规则的版式特别适合展示相近的内容。一旦用户习惯了某个版式展示某种内容，将来他们看到该版式时，就会期望看到其对应的内容。除了版式之外，其他视觉元素也同样存在上述效果。图24规则和重复。左图三个图中，用户看起来最清楚。因为它采用了完全相同的版式，此外标题和内容的格式也是完全一样的。中图版式混乱，标题的视觉效果太不明显，容易被用户忽视。右图形状和标题栏的颜色是一致的，因此尽管图的位置不同，但用户可以还是可以方便的区分5块内容。以一个页面来说，重复给用户以节奏感。而以“页面到页面”的多个页面链接来说，重复为用户提供一种可辨别的视觉系统/视觉语言。当重复使用有规律的风格、格式、设计元素时，用户就会感觉到整个网站设计的一致性。图25大小和形状的规则。左图，标题和内容格式是相同的，尽管3个框的宽度不同，但是这是由于其内容需要而进行的调整，并不会给用户带来不规则的感觉。右图，文字内容是相近的，但是其左右文字的宽度不同，用户看起来就感觉不协调。图264个链接的格式是完全一致的，且是有规律的排列的，给用户的感觉就是4块内容是同样重要的。（9）对齐用户对于未对齐的元素或不均匀的间距是非常敏感的。视觉对齐的话，能有效降低整体的视觉复杂度。排列整齐的元素使得整体页面看起来结构很好，同样也显得更有规律。任何元素都应该在一定程度上和其他元素是相连的，任何时候，都应该注意调整各元素对齐。看起来比较简单看起来很复杂在增加其他的分组元素或设计时（例如边框、背景颜色），应当先考虑如何设置对齐，因为分组元素可能会导致整体看起来更加复杂。要求用户填写信息的表格可以认为是一种“胁迫式UI”，有时候填写的信息太多甚至会赶走用户。因此可视化工程师遇到的一个挑战就是如何降低感觉上的复杂性，让用户更轻松的填写信息。图27对齐。左图没有纵轴，而且前3部分的内容其对话框的形式各不相同。整体显得很不平衡。右图，明确的分为2个部分，“可选部分”通过背景颜色和“必填部分”明确的区分开了。用户填写起来方便得多，整体感觉更好。在页面上，视觉元素按空间关系组成一个纵横交错的立体体系，成为页面视觉的子结构。通过这样的体系，能帮助设计师构建整个页面的统一框架，为他们提供了一种将不同元素联系起来的方法。但还是要尽可能少的采用子结构，因为过多的子结构容易让页面看起来混乱。和其他元素完全无关的元素看起来似乎是“漂浮”在整体页面上的，似乎和整个设计无关。通常会导致页面看起来组织的不够好。当然，另一方面来说，如果能利用这一视觉对比，有意识的设计出与整体链接松散的元素，也可能让用户更重视这一元素，起到很好的设计效果。图28未对齐的2个例子。左图，右侧的3个部分中，图都是右对齐的，但是他们彼此的图片大小和格式相差很多，导致看起来整体不一致。右图，大小不规则的图片导致用户看起来整体没有对齐，尽管从整体版式上来说是企图对齐的，但是由于图片本身的大小选择问题，而不得不放弃对齐。（10）视觉分组当我们开始看一个页面时，感观是不断深入的。首先，我们会关注大块的颜色和形状；接下来，我们开始将大块内容进行分解，拆分成更小的规则形状；最后，我们专著于某个特殊的部分，在这部分中我们会细致的阅读。好的设计应当遵循这样的规律，让用户从一个视觉组更换到另外一个视觉组时，比较轻松。设计页面时，需要仔细研究各个视觉分组的位置、背景颜色、边界和边框。风格上的相似性有助于将各个组的元素联系起来，但是通常各组的位置接近程度对各组元素的联系起到更大的作用。空白位置对于内容和功能的视觉分组是至关重要的。空白位置提供了和密集位置的明显对比。通常，在密集位置用户会期望找到设计关注点。不考虑页面可视性的设计者容易内容至上，页面空白较少。这是很常见的错误，会让用户感到页面整体组织的很差。空白对于整体的设计来说是很重要的组成部分，需要认真对待。一定程度的内容组分离是必不可少的，而要进行区分则必然要用到空白。当然也可以用边框来划分内容组，但是通常会导致滥用边框。在必要时，可以使用边框和背景颜色来进一步清楚的区分内容，例如图29中高级搜索中的应用。但是最好还是使用空白和空间联系这样的简单结构来进行区分。图29视觉分组。左图横向切分内容，空白和队列很明显的将不同的内容组织起来右图，将不同的内容分别采用边框，并分别配有标签。两者都是不错的分组方式，用户看起来很清晰（11）可视化层次可视化层次是指视觉元素的相互作用，或者他们在吸引用户眼球时是如何竞争的。大小、形状、对比度、颜色、位置、运动方式等都会影响元素之间的相互作用以及它们和整体的相互作用。相对来说，视觉效果最明显的元素占据了最主要的层次。视觉层次应当反映内容元素的重要性关系。由于视觉效果取决于整体，在某个页面上占据主要视觉效果的元素在其他页面未必如此。图30上下2个图，都采用了标题和链接的组织形式，都是横向排列且尽量占满了整行（最大化利用空间）。但是第一个图，靠左有个标题，中间还有个标题；而第二个图只在靠左有个标题。尽管都是采用的粗体无链接的方式，但是第一个图中间的那个标题让用户很迷惑。此外，第一个图中，字体的大小也不一致，因此导致第一个图整体看起来很混乱。视觉效果的突出应当和内容的重点相一致。和页面主要目的最相关的视觉元素应当最突出。也就是说，它们应当放在视觉层次的最顶端。应当考虑网页的逻辑性，这样每个页面都可以被识别，并且纳入更大的组织结构中。一个逻辑性很好的系统，不仅仅要清晰的识别出主要内容页面，还应当提供足够的前后联系，以便用户能理解网站内容之间的联系。图31明显的视觉层次感。至于页面顶端的系统名称产品品牌内容标题正文，一步步从普通到特殊引导用户的关注点。（12）阅读顺序在一个网页上，视觉层次可以被转化为阅读顺序。眼睛无法一次把所有东西都看完，所以占视觉主导地位的元素（也就是那些视觉效果最明显的元素）通常被第一时间阅读。基本上，阅读顺序就是页面上各种元素被看的时间顺序。仅仅用阅读顺序来衡量视觉要素的有效性是不科学的。当人们第一次看某个元素时，可能无法很快理解它，或者它无法维持用户的关注度。我们需要再一次强调，视觉效果取决于页面的整体设计和结构，整体的任何部分都是相互关联的，拿走任何元素之后，一切就都改变了。图32右图是左图的阅读顺序。（13）第一眼印象用户第一眼看到的内容取决于浏览器窗口的大小，第一屏的内容是用户对整个页面的最初印象，因此这个区域的视觉层次是至关重要的。所有重要的引导信息都应当包括在内。如果重要的信息被放在其他位置，它的作用就会明显降低。图33可以看到2个页面是一样的，但是当浏览器窗口大小改变，导致用户第一眼看到的东西变了以后，整个的浏览顺序也就改变了。通常大部分的网页都会有滚动条，也就是说用户第一眼通常都不能看完整个页面。如果用户第一眼没有明显的发现下面还有内容的话，甚至可能不会去浏览下一屏，而采用一些视觉切分，例如切断的图片或文字等，都能告诉用户下面还有内容。（14）习惯一些影响视觉效果的视觉习惯也跟随着互联网一起发展。最突出的莫过于超连接。由于带下划线的蓝色字体对用户来说和导航超链接几乎是同义的，因此这种形式现在的视觉效果比以前明显多了。另一方面，固定大小的横幅广告和无关广告是同义的，因此用户通常将广告看作是无关内容。由于使用一致的大小，位置也是固定的，因此横幅广告很容易被识别出来，进而用户对它们的关注度很低。（15）留白通常非页面设计人员总是试图将页面的整个空间填满，对他们来说可能不容易理解空白对于整个页面的重要作用，空白可以帮助用户直接将兴趣引向重要的内容，并且能帮助用户了解整体结构。如果完全没有空白，那么内容的分组和排列就很难做到。通常环绕元素的空白可以将不同元素整合起来，而元素之间的空白则可以将他们区分开。分离整合留出空白对于用户理解整个页面的结构有很大的帮助，就像用户的眼睛需要休息一样，页面的内容之间需要一定的空白以便和其他视觉元素进行区分。图34左图，整个页面都被内容充满了，完全没有任何空间，导致用户完全抓不到重点，而且页面结构荡然无存。右图，上下之间有一定的空白，因此结构性略好；但是横着的3个部分之间的间距太小，导致用户看起来比较累，如果间距大一些则效果要好的多。23可视化语言可视化语言指的是一系列定义好的视觉元素，以及这些元素之间相互作用的规则。可视化语言将版式和所表达的含义联系起来，在用户阅读内容之前，通过版式就能够了解含义。在多个设计中，采用一致的单一语言，可以使得界面更加可预期。用户习惯于某个可视化语言后，他们能更好的理解设计的逻辑，因此他们与界面之间的互动将更容易。仔细的考虑和规划开头和结尾，对于开发有效的可视化语言是有必要的。图35可视化语言。图35展示了如何在页面已有的可视化语言环境下，通过增加新的可视化元素，来构造更为特殊的可视化语言。目前所在的标签页，有前置效果；正在查看的文件夹，是斜体显示的；用户可以点击的超链接遵循了常规的习惯。（1）排版的应用文字是使用最多的沟通方式。很多人意识不到这点，因为文字通常是作为一种传播工具存在的。排版本身是没有意义的，它是用来传播信息的媒介。清楚的传达信息是最主要的目的，因此首先要保证的是可读性。在此基础上，再采用排版的各种可视化设计来构造更加吸引人的整体版式。传统排版学上的很多原则和经验都可以应用到网页的排版，但是还需要考虑一些互联网相关的内容，比如用户的互动（例如滚动条）、用户在网络上更倾向于浏览而不是精读。（2）文本和标题文本通常以段落格式为主，文章和故事大多采用这种形式。正文和标题（或副标题）的视觉区分通常是组织文本内容的基础。一般来说，标题会设置较大的字体，而且有足够的空白环绕它，以便很容易从一大堆文本中找到标题。图36标题用来表示不同内容的部分，同时还可以对内容添加标签。对于网页来说，标题通常会带有颜色，而且是可以点击的。一般来说，标题不仅仅通过排版，还通过添加一些视觉元素来着重表现。例如，增加背景颜色。但是，标题的效果还取决于是否对所有标题采用了一致的格式。一个有层次感的标题体系通常用来组织大量的内容，其视觉处理方式就应当反映与之相应的标题层次。（3）着色在一段文本中，应当保持着色的一致性。会影响着色的4个要素字体设计、词间距、字母间距、行间距。（4）文本对齐文本对齐的4种方式左对齐左边对齐，而右边不对齐右对齐左边不对齐，右边对齐居中两边对齐图37从左到右，依次是左对齐、右对齐、居中、两边对齐左对齐是网页的默认对齐方式，通常会有一致的左边界，用户阅读起来比较习惯因为没有统一的左边界，用户看完一行后需要寻找下一行的起点，右对齐的可读性较差，一般来说使用较少居中这种方式在网页设计的时候需要慎用，居中通常需要有相对明显的对称空间，以便用户了解这是专门居中对齐，而不是页面排版错误两边对齐为了在两边能够对齐，会给字母之间增加间距，因此对于宽度很小的页面要避免使用这种对齐方式一行的长度不应该超过整个窗口的宽度，不要设计宽度过大的页面。尽量采用一致的字体，如果要采用多种字体，那么必须选择相差较大的字体，以免用户认为是页面排版错误24设计时普遍需要考虑的问题除了人性化界面设计原则和可视化界面设计原则，考虑用户环境的其他方面也是很重要的。浏览器兼容性不同的浏览器版本对于各种计算机技术的支持是不一样的，在开始设计之前需要了解目标用户最常用的浏览器是什么，以便决定采用什么技术来实现产品设计。屏幕分辨率即使目前分辨率越来越高，也不意味着用户都会采用很宽的屏幕。而且即使用户都使用了宽屏幕，也不应该设计过宽的页面，因为人性化设计的研究显示用户在看宽度较小的内容上明显效率更高。访问速度用户总是期望能更快的访问，尽量减少等待时间，因此需要采用各种手段来加快访问速度。文化UE首先需要问的问题就是“你的目标用户是谁”。这不仅仅需要考虑用户的年龄、性别、使用计算机/互联网的经验等等，还需要考虑用户的文化；尤其是产品本土化时需要重点考虑的。隐私YAHOO有专门的隐私条款，需要关注用户隐私方面的内容和法律法规。可访问性必须保证系统是可访问的，用户在访问系统时不会经常遇到错误。第三部分YAHOO设计版式介绍31页面类型YAHOO提供的服务如邮箱、财经频道、体育频道等，被称为“产品”或“功能”。本文中提到的产品设计的指导方针，包括用户界面内容和可视化设计。通过这些页面传达YAHOO服务的内容和功能。本文中主要涉及产品页面。页面分为两类产品推荐页面登录页面和产品推荐页面。广告页面登录页面和产品推荐页面由于其产品推荐特性，页面上富含图片，广告词刺激用户登录使用各种推荐的服务。图42登录页面和产品推荐页面。登录页面与整个网站风格一致，登录页面的推荐区域以及产品推荐页面的颜色、布局、图形比普通页面更自由。广告页面结构简单、15屏、设计自由、视觉创意突出，不超过35KB。主要与口碑营销和公关效果相协调，与网站产品或服务联系不大，在图形和UI设计上几乎没有限制。32页面结构和页面整体设计原理页面布局的结构页面从上往下，内容从总体到细分。最重要的东西应该在800600分辨率的屏幕上显示在第一屏的上半部分，不用拖滚动条。随着用户从上往下浏览页面，内容和导航逐渐呈现，内容逐渐细分。接近页面底部，包含更多的共有内容，推荐用户继续访问或寻回之前访问的信息。图44通用YAHOO页面结构。一般的页面结构遵循下列顺序（从上到下）页眉（包括左上角LOGO、网站链接和帮助信息）横幅广告个性化栏（视情形使用）主标题栏正文底部链接（视情形使用）页脚（1）页眉页面左上角区域的设计规范链接到产品/频道的首页最大文件大小3K不要使用动画最大规格30040像素如果需要可使用图标用一条水平线，将其与页面其他部分分开页面右上角区域的设计规范包含YAHOO网站的站内链接，一般依次为产品/频道首页、YAHOO网站首页和帮助。如果是合作产品的页面，联合品牌的图片参见如下规范最大高度40像素最大宽度170像素（可以比雅虎的LOGO稍大一点，但不能大太多）透明的灰色和白色。不要在LOGO上使用花俏的阴影，只使用锯齿阴影。最大文件大小2K不要使用动画（2）个性化栏个性化栏出现在每个需要标出用户名字的页面，让用户知道我们对他/她的称呼。该栏在标题栏的正上方，包含几个指定链接用户的YAHOOID和帐号（如帐户信息、选项、登出、我的拍卖等）。不包含产品特殊功能的链接，如放置广告等，这种特色链接应该放置在其他位置。标题栏用淡灰色（DCDCDC）问候栏用问候栏写上“欢迎你，游客”（用户登录时以用户名代替游客）内容与边框间距使用CELLPADDING2，单元格之间间距/格线厚度CELLSPACING0（3）标题栏标题栏帮助创立站点的可视化语言。通过页面左上角的LOGO，建立了品牌。帮助导航告诉用户其在YAHOO站点的某个位置。也会帮助分隔横幅广告。标题栏必须包含产品的名字。从全局角度看，如果在标题栏上有水平导航链接（这种链接往往指向其他站点），用户点击导航访问其他站点，标题栏内容随之变化。但改变访问路径（还是在一个站点内访问）不能引起标题栏的变化。产品名用内容与边框间距使用CELLPADDING4，单元格之间间距/格线厚度CELLSPACING0除了产品/频道页面，在其余页面的标题栏最右侧，用浅色背景框嵌入“产品/频道首页”链接。标题栏的图片贺卡和购物频道具有一定季节性，在特定时间会产生大量访问。和线下商店张灯结彩过节一样，在重大节日，标题栏里的装饰图片可以增添节日气氛。但图片不能太花哨，以免干扰页面内容。由于创作和管理标题栏图片会花费较多资源，限制标题栏图片，只在重大节日使用或季节性使用。在季节性的特殊假期，如情人节、圣诞节等，可以用精细的图片和动画装饰首屏。（4）正文布局标题栏以下到页脚区域的页面内容（包括访问路径，如果有的话）都是正文内容。风格一致的页面布局，有助于引导用户找到页面上所需的信息。如果布局风格不一致，重要功能出现在用户没有预料到的位置，用户可能会忽略掉这些重要功能。当我们考虑某个页面的布局时，先问自己几个问题站点是什么类型的是体育、新闻或者音乐等涵盖大量内容的站点吗内容是否值得在页面顶部推荐是否有广告客户想在第一屏的上半部做广告，是否需要预留位置YAHOO网站的页面布局主要有下面几种单栏布局主要用于将用户注意力吸引到内容上的页面，导航相对简单。典型应用（1）产品推荐页面，目的是向用户营销一种产品或服务，多余的链接会干扰用户注意。（2）列表或搜索结果页面，列表表格需要一定宽度，不适宜添加侧边栏。双栏布局被称为“T形”页面，适用于页面上有大量的分层信息。左栏目录/树状浏览、导航、推荐要素、相关产品或资源；右栏内容模块或树状浏览。典型应用如照片和个人信息页面。因为有很多的图片推荐，三栏布局会显得页面较挤。文中为675或750PX的页面宽度，提供双栏和三栏布局中各列宽度像素，可供参考（54页、56页）。由于现在流行宽屏，可以按比例计算宽屏下的各列像素值。三栏布局左栏用户习惯从左往右阅读，左栏为基本导航栏；中栏重点内容，如醒目的新闻图片、热点社论内容等；如果是产品/频道首页，适合放置“跳转图标”或该站点的主要内容。右栏通常是广告、投票等，不要在此安排关键的导航链接报告写作当时流行的页面宽度是675或750PX，提到三栏布局会导致页面较挤。不过由于现在都是宽屏页面（960PX），采用三栏布局的较多。（5）正文版式页面宽度尽可能的固定页面宽度。固定宽度易于控制页面设计，且由于页面内容边缘的留白，页面看起来更好。搜索结果页面是一个例外，因为正确的搜索结果往往会超出固定宽度允许列数。然而，即使是搜索结果，也可以试着在使用100宽度前使用固定宽度。两种标准的固定宽度是675和750。模块宽度同一列中的模块宽度要相同。在三栏页面中，左栏宽度大于或等于右栏。模块风格同一列中模块的视觉效果要相同。如果右栏的第一个模块加了外框，该栏的后续模块也要加。同一列中的模块颜色和视觉效果应该一致，否则很乱，看不清。不同栏中的模块应该有所差异。例如图57，左图中左右两栏都是灰底，采用相同的视觉效果；右图中右栏白底、添加外框，使得页面的视觉感觉不同，更清爽。留白和空白区域的利用不同模块间留白研究页面上任意两个独立的部分或者任意两个模块之间的空白。如果页面不同元素间没有空白，页面会很混乱。插入一两个空行保证模块间有充分的空白。图58模块间的垂直方向空白。模块间建立一致的空白区域。标题栏间留白有时页面顶部需要设置多个标题栏。例如，除了包含产品名的主标题栏，还可能有一个个性化标题栏，下面可能还有浏览路径或子标题栏。再下面才是正文内容。检查浏览路径和正文之间的空白区域，如果没有留白，页面将会显得混乱。图59标题栏之间的空白。各栏间的水平方向留白仔细观察页面上各栏间的空白。如果空白区域很小，页面会很混乱。在各栏间用插入连续空格留白。构成页面内容的整个表格，使用CELLPADDING2CELLSPACING2。图60各栏间留白（6）第二标题栏第二标题栏，独立于与页面正文内容。若为三栏布局，是指中栏的标题栏；若为双栏布局，是指内容栏的标题栏。标题用该标题栏的配色方案DCDCDC为背景颜色，或者淡色阴影标题栏间距用CELLPADDING2CELLSPACING1标题文字左对齐图61第二标题栏与第一标题栏的颜色要有反差。左图第二标题栏为灰底，缺乏反差对比。右图改变第二标题栏的颜色和广告背景色，加强页面视觉效果。（7）底部链接底部链接出现在页脚上方，用于推荐YAHOO网站的其他产品/频道。图62底部链接（YAHOO全站点）图63底部链接（娱乐频道）（8）页脚所有页面都要有包含版权信息的页脚。YAHOO网站页面的页脚必须包含注明时间的版权信息（只注明本年度。随着页面的更新，19的写法会被淘汰）也存在例外情况如果页面是静态的或者更新频率低于一年一次，如帮助页面，可以在第二年使用新的版权信息。隐私政策的链接服务协议的链接免责声明（如果该页面用于收集数据）YAHOO网站页面的页脚可以包含合作者的版权信息帮助链接（“帮助”两个字足够，默认帮助信息与页面内容相关）反馈链接公司信息，推荐站点等链接短的免责声明YAHOO网站页面的页脚不应该包含过多的额外文字、指向相关站点或产品的重复链接。YAHOO页脚表示页面内容结束，而不是“页面底部”导航系统的开始。合作者的版权信息要与YAHOO的分行显示，不要合在一行里。正确COPYRIGHT2001YAHOOINCALLRIGHTSRESERVEDCOPYRIGHT2001REUTERSLIMITEDALLRIGHTSRESERVED错误COPYRIGHT2001YAHOOINCANDREU