《雅虎用户体验设计指南》由会员分享，可在线阅读，更多相关《雅虎用户体验设计指南（71页珍藏版）》请在金锄头文库上搜索。
1、 内部资料，切勿外传 Yahoo! 用户体验设计指南 译自”Yahoo! User Experience Guide v2.0”.技术部BI组 2008年11月第一部分：以用户为中心的设计21.1 什么是用户为中心的设计？21.2 UCD的商业价值51.3 应用UCD7第二部分：设计原理102.1 人性化的界面设计原理102.2 可视化设计原理142.3 可视化语言282.4 设计时普遍需要考虑的问题31第三部分 Yahoo！设计版式介绍323.1 页面类型（重要）323.2 页面结构和页面整体设计原理323.3 局部页面设计原理433.4 颜色583.5 字体593.6 图形和图标603.7
2、 行为623.8 技术643.9 书写字体、语言和术语653.10 广告68第一部分：以用户为中心的设计1.1 什么是用户为中心的设计？以用户为中心的设计（UCD）是一种增加产品易用性、提升用户体验的设计方法。UCD的关键在于理解用户他们所处的环境、他们的目的是什么、达成目标必须完成哪些任务、他们的技能和能力如何。整个设计过程必须基于实际数据用户的输入和反馈，以保证设计不是基于产品开发团队的假想即假想用户会怎么做。由于UCD简化了收集用户反馈的流程，并将之集成到设计过程中去，因此保证了交互系统设计的有效性。UCD意味着，产品开发团队首先“观察用户”，并和用户一起开展随后的所有工作。在整个设计过
3、程中，用户会对产品原型进行评估，并判断产品是否满足了他们的要求。经过反复的评估和设计，使得产品技术满足用户需求。UCD会描述用户的所有体验，而不仅仅是用户在页面上所看见的。它将用户的目标与产品功能应用联系起来，而不是接受需求后就直接开发产品。UCD要保证产品是有用的、易用的、并且是用户需要的；它不仅仅是最终的HTML、程序代码或可执行程序。需要注意的是，UCD和市场调研是不同的，UCD和市场调研可互为补充。市场调研通常回答“应该做什么产品？”，市场调研能知道用户需要什么，什么促使用户购买，他们会为什么产品付钱，以及什么决定了他们的消费习惯。用户体验，则从另一个方面入手，它解决：用户实际上会怎么
4、做，什么使得产品简单或复杂、易用或不易用。因此，用户体验更适合回答“产品应当如何设计？”图1：将一个新产品/技术的采纳者根据他们采纳的时间分为五类人：创新的扩散曲线创新者（Innovators） 他们是勇敢的先行者，自觉推动创新。 创新者在创新交流过程中，发挥着非常重要的作用。早期采用者（Early Adopters） 他们是受人尊敬的社会人士，是公众意见领袖，他们乐意引领时尚、尝试新鲜事物，但行为谨慎。早期采用人群（Early Majority） 他们是有思想的一群人，也比较谨慎，但他们较之普通人群更愿意、更早地接受变革。后期采用人群（Late Majority） 他们是持怀疑态度的一群人，
5、只有当社会大众普遍接受了新鲜事物的时候，他们才会采用。迟缓者（Laggards） 他们是保守传统的一群人，习惯于因循守旧，对新鲜事物吹毛求疵，只有当新的发展成为主流、成为传统时，他们才会被动接受。这个划分对于新产品/新技术的推广者来说非常重要，针对不同的人群要采用不同的推广策略。将Rogers 创新的扩散曲线和AU模型关联起来的话，关键点还是主导设计，主导设计是被大多数人接受的设计，它出现于上图中黑圈附近。注：更多内容参见：http:/ UCD的商业价值 长期来说，UCD可以节省成本人们通常会误解UCD将引起设计开发拖延、雇佣UCD团队会增加成本。但实际上并非如此。在长期来看，采用UCD是可以
6、节省成本的。在软件的整个生命周期中，80%的成本来自于发布后的维护费用。在维护费用中，80%是由于没能满足或没能预见用户的需求。如果能在早期就解决易用性问题，相对产品设计后期才考虑这个问题可以节省约1/4的成本。更进一步，着急上线不能满足用户需求或不便于使用的产品，在后期可能会带来更多的维护成本。 UCD降低客服成本由于提高了产品的易用性，客户支持的成本将降低。例子：1998年，Yahoo客服被询问最多的问题是：我怎么发布广告？我怎么编辑/删除我的广告?仅从日志数据进行分析，产品团队理解不了如何改进产品。而从用户体验测试中，明白了为什么用户会提出这样的问题。当页面开始下载时，用户就已经开始滚动
7、页面以跳过横幅广告，同时也跳过了页面顶部的广告操作功能。经过页面改版之后，就解决了这个问题。假设每个电话给公司带来8美元的成本，可以看到易用性研究是多么重要。图2：右图为改版后页面。UCD帮助达成商业目标由于设计开发团队了解用户、了解他们的环境、技能、能力，因此产品就能最好的满足用户的需要，并帮助用户达成目标，这样的产品就能很好的帮助公司达成其商业目标。 Yahoo shopping的例子：1998-2000年，用户的网购行为被广泛研究。Yahoo! Shopping 1998上线, 网站就像是一个产品页面，搜索结果不显示产品的图片。团队认为这样可以使得下载速度更快，因而受到用户的好评。但实际
8、上用户在这里很难查找商品和商户。图3：左图为1998年版，右图为2001新版。突出图片，方便用户查找。 UCD增加企业内部的效率和生产力为内部用户开发的产品，UCD能提高企业整体的效率和生产力。例如，UCD能减少错误，促使组织更稳定，降低成本，减少培训，支持，服务，产品文档等等。设计的一致性设计的一致性是设计的一个最基本原则，不仅仅是因为这样比较美观，还因为它使得产品的易用性提高了。如果产品设计能保持一致性，用户就可以更快的学习系统的可视化语言；由于用户可以利用他们过去所学到的知识，他们能更有效的使用整个系统。设计的一致性不仅仅改善了产品的易用性，它还对品牌构建有价值。保持设计的一致性，可以让
9、用户能感受到系统是一个独立的实体，因此Yahoo旗下的所有产品都应当维持设计的一致性，以便它们看起来是统一的。1.3 应用UCD有效的界面设计不能仅仅是套用指南和规则。要做出确实有用和易用的产品，必须遵循以用户为中心的思想和设计方法。恰当的技能组合、团队结构和开发过程都是必不可少的。（1）团队构成几乎没有人能拥有UE所需要的所有技能，因此需要构建团队，使得每个人都有其专业技能。下面介绍所需要的技术和人员。交互设计师设计产品概念原型，并保证其是前后一致的、好理解的。他们提出的解决方案，应当支持整个产品设计开发过程，而不是割裂的模块。交互设计必须考虑任务需求，以及用户的技能、知识和能力。交互设计师
10、通常拥有如下背景：人机交互、人类学、图形设计、工业设计或其他类似的学科背景。可视化设计师是图形设计的专家，拥有将产品概念原型和产品美化及交互设计结合起来的技能。他们是版面设计、排版、着色和插图方面的专家。他们设计产品页面，使得网站更形象、更美观、和整个站点保持形象的一致性。用户研究员（易用性工程师）收集用户操作的定性数据。他们研究的特点是：研究的是定性数据，而不是像数据挖掘那样研究定量数据；强调观察用户的行为，而不是问用户“你们怎么做？”；以理解用户意图为中心，而不是仅仅观察他们怎么做。页面开发工程师能快速的创建产品的测试版及界面，并在实际产品正式开发前供测试使用。主要依赖计算机技术和编程能力
11、。（2）产品设计的周期有效的设计过程包括以下几个方面：研究、设计、创作原型、测试和反复。研究基于用户的设计表明产品开发团队了解他们的目标用户。对用户准确的理解，来源于广泛的定性和定量研究，它帮助团队识别市场细分和用户需求、行为和态度。设计把设计引入开发过程的一个基础前提是：设计是开发的基础。如果基础出了问题，那么在开始编写代码后就很难改正了。在整个设计过程中，不仅仅要定义目标和产品特征，还需要定义目标用户是谁，他们有什么目标，他们如何使用产品，以及任务是什么。设计需要考虑产品的商业目标，因此首先确定商业目标是尤为重要的。在此过程中，团队需要考虑产品的目标，通常产品目标比产品的特征描述的更加清楚
12、。产品原型由于产品是从概念构架和交互模型中进化而来的，因此设计产品原型非常重要。产品原型不仅仅帮助团队进行设计沟通，还对设计的可视化及了解整个任务流程有帮助，还有助于在设计过程中收集用户反馈。 铅笔和纸画出来的原型保真度较低，用于肉眼观察产品任务的组织结构和概念创意，并且采集用户对此的反馈。保真度高的原型需要更多操作，帮助团队收集用户人机交互的反馈。测试在设计过程中进行用户测试有很多好处。用户测试的反馈可以对当前设计、未来发布和实际产品提出更多的指导，并且有可能得到提高整个网站易用性的一般性结论。还能让开发团队更深入的理解用户的感觉、满意度、对产品的疑问、产品存在的问题等。反复几乎没有一个产品
13、团队可以在第一次设计的时候就明确找到最好的解决办法。因此，要给团队充分的时间来反复进行上述操作，使得他们有机会基于用户反馈而不断改善其设计。在编写代码之前花越多的时间来优化设计，在产品开发的实际阶段就能节省越多的时间。图4 产品设计流程P:产品开发者E：工程师ID：交互设计师UR：易用性研究员VD：可视化设计师第二部分：设计原理2.1 人性化的界面设计原理（1）系统状态的可视化通过界面，用户能清晰的了解当前交互的状态。需要给用户以适当的反馈，让其了解目前进行到什么程度了。对于那些需要长时间响应的操作，反馈尤其重要。反映时间在0.1秒内，用户会认为系统是即时响应的；1秒内有反映，用户就能不间断操
14、作；10秒是保持用户对当前对话框关注的时间上限。若延迟太长，用户会在等待的期间去做其他的事情，因此清晰的反馈给用户“系统将在什么时候完成当前任务”是非常重要的。如果不能预计时间，那么就需要不断的给用户反馈，以免用户认为程序出错或停止了。图5和图6，左图是比较好的反馈，右图则不能让用户知道目前的进度。（2）将现实世界和设计联系起来只要有可能，设计应当尽量反映目标用户的生活经验。包括：使用相似的语言模式，避免不必要的术语，适当的时候使用熟悉的比喻，遵循现实世界的习惯。但是使用比喻也存在其缺陷，即用户可能会根据比喻进行延伸，这样的延伸可能超过了产品设计的范围，这导致产品不能满足用户的预期。1996年Yahoo! Shopping第一次上线的时候，每个商家的商品放在一个的购物车中，当用户想要付帐时，他们必须对每个商店的产品分别确认购买。由于Yahoo! 购物车是作为一个整体呈现的，通过用户调查，发现用户希望可以一次确认购买所有的物品。但是出于技术和商业方面的考虑，并没有改变页面设计以符合用户的这一预期。在1998年产品修改了页面，更清楚的向用户传递了“每个商店的产品需要逐一确认购买”这一事实
