WEB设计经验 -来自microsoft.com设计主管

web|设计

 作为设计主管,Peter Stern 已经领导 microsoft.com 重新设计了主页并且开发了五个不同的交互工具,这些工具被用于下载中心、产品目录、配置文件中心、 搜索 和注册等联机功能。 他为几个内部工具设计了用户界面,并且正致力于创建将于今年晚些时候发布的下一代主页。
  从头衔上,您可能认为我主要关心的是 microsoft.com Web 站点几千个网页的版面设计。的确,这些确实是我所关注的。视觉上的吸引力是重要的,但是这仅仅是工作的一小部分。而最终的目的是确保整个站点运转正常。

  我的意思是,人们通常在访问 microsoft.com 时,并未将它当作艺术作品来赞赏。而是为了获得有关产品的信息,或者有一些技术问题需要咨询,或是阅读有关开发商的期刊。所以网站的设计应该尽量清楚和有条理,以便他们能够容易地找到所需信息。

  设计站点

  在进行 Web 设计时--在设计过程中--形式应该服从功能。这种方法应用于我们站点的整个设计过程中。当然,我们有最新的 Web 工具,并且能够将各种可视的小配件上载到网页上。但是我们认为这样做将不利于为访问者提供有效的服务。

  事实上,我经常发现一些站点未将重点放在功能上。常见的错误包括:

  用户界面元素不一致。例如,同一个控件在不同的页面上功能不同,或者同一个功能对应几个用户界面控件。

  导航栏位置不一致。决定站点的哪些页和功能需要在站点的任何页上都可被访问到。这就是应该保持一致性的“全局导航栏”。

  不太注意或根本不注意基本的图形设计原则。例如排版式样、色彩和版面的设计。

  相关元素和功能的随意分组。注意将元素放置在网页上的位置和目的。这可帮助访问者从其它相邻的选择和位置来推断某个链接的功能。

  使网页过于庞大以至使访问者需要通过典型的调制解调器速度的 Internet 连接进行长时间的下载。这并不是说不应该使用图形,但是您需要对它们进行精挑细选,然后用适当的压缩和颜色索引优化它们。

  现在的 Web 站点仍然存在很多问题,这并不奇怪。毕竟,Web 设计“艺术”相对来说还是个新生事物。在四、五年以前,Web 页甚至是普通的。那时,人们好像认为他们的 Web 站点将会吸引访问者只是因为它们存在--并且,可能在某些情况下这种方法确实有效。但是这些站点一般很难看,并且更重要的是,它们真的难以使用。接下来便进入“看看我们能做些什么”阶段,在网页中加入了大量的动画、声音文件以及其它附加件,导致访问者需要长时间地进行下载,但是并未获得多少实实在在的内容。

  如今的 Web 设计师们已经吸取了前人的经验和教训。好的站点倾向于简化和快速,同时在功能上有所提高。这是 Microsoft 的目标,而且我们最先承认自己所犯的错误(参阅“Microsoft 的 Web 简史”看一看以前的主页设计)。

  设计错误并不总是显而易见的。有时在设计上对一个小元素的移动或更改将有很少或根本没有影响。但是,在其它情况下,它可能确实会对页面功能有所影响。而且如果说我们从过去几年学到了一些东西,那就是小的改动会使 Web 页的运行方式有很大的不同。

  明确的流程

  若要避免类似问题,我们为新服务(例如“搜索”)的创建或关键的 Web 页(如主页)设计了一个明确的流程。 每个项目都是在一定的基础上开始的,即我们有一个受益于我们站点上的页面、部分或用户界面元素的产品或服务。在早期的产品计划阶段(第 1 阶段),我被要求设计一些初级模型:大致描述页面、部分或功能的草图。然后产品项目组检查产品计划建议,看看此项服务是否可以为 microsoft.com 的访问者真正带来一些实惠。

  如果答案是“可以”,那么此项目会获得批准,我们开始写项目说明书(第 2 阶段)。我们在第 1 阶段的草图和概念基础上创建并提出一个更为完整的计划。这时,我们一般还会开始可用性测试(一般会有书面的模型)以了解潜在用户将对计划中的设计做出何种反应。 在最后开发阶段(第 3 阶段),我们创建运行计划服务的 Web 原型,并且进行全面的可用性测试以及内部复查。然后完成站点的代码,修改程序错误,最后站点通过实际运转的 Web 站点向客户发布。

  正如您所见到的,可用性在整个流程中扮演着重要的角色(参阅“创建有效的 Web 界面需要认真计划”)。我们可以为用户运行某项任务计时,这样我们就可以在产品以后的版本中对比相同的测试。我们可以使用这种方法进行度量,以确定一个功能的重新设计是否为客户带来任何真正的价值。

  还有,我们将仔细地观察以了解可用性对象是否可以计算出如何正确使用新功能--我们称为“可发现性”的方法。有时这为我们提供了一些挑战。例如:在我们的站点上,在 搜索引擎 中键入一个词组或字会产生一列结果。然后我们请用户选择在这些结果中进行搜索,以便进行更细的搜索并且导向某一页或资源。但是即使“在结果范围内搜索”被明显地标记在深色标签上,很少有人熟悉它。一些用户认为他们正开始新的搜索,并且可能毫无结果。我们正在解决这个问题以确保客户可以利用 microsoft.com 上所有丰富的功能来提高他们对此站点的认识。

  选项“在结果范围内搜索”看上去很直观,但不是非常易发现的。此问题一直是困扰我们的设计的问题之一。

  最后阶段

  大体来讲,站点设计是在发生冲突的需要之间求得平衡的艺术。一方面,我要将站点设计得尽量简单易用。另一方面,我要确保站点中所有强大的工具可为经验丰富的用户所用。与此同时,我还要为内部客户服务--Microsoft 产品项目组--他们对服务有特殊的需要。所以每天我都要解决一些非常困难的问题,经常处于很紧迫的情形中。我发现这种工作是鼓舞人心和有趣的。

  这个职业非常需要更熟练的专业人员。我是经过一系列非常不一般的过程--在大学学习图形艺术,然后在多媒体公司设计 CD-ROM,最后加入 Microsoft 并开发应用程序--才获得这个职位的。非常奇怪的是,当我申请(并获得)这份工作时,我以前从来没有设计过 Web 页。但是我广泛的设计经历已经证明是非常有用的,并且我自认为已经验证了格言“成功的设计就是成功的设计”(不论是什么媒体)。许多设计问题对 Web 来说是独一无二的,解决这些问题的方法对于任何媒体都是一样的。

  对于那些准 Web 设计师我的建议是,他们也应该尽可能地扩大设计背景。今天应该确保将一些 Web 工作作为互动设计培训的一部分--大多数好的设计学校已将其加入课程中。但是在排版、色彩理论、版面设计以及生产等方面的扎实的技术将仍然特别有价值。 在未来,Web 设计师们仍将会继续被要求给页面增加更丰富的多媒体内容,从而为 Web 站点的可视性和可操作性增加了新一级的复杂性和技术要求。作为 CD-ROM/多媒体设计师,要求我必须具有图形设计、视频、音频制作、动画等方面的知识和创作能力。我的预言是,Web 设计师也将向这些领域发展。

  对于属于 microsoft.com 的我们--以及在 Internet 上的其它地方--那应该是一个非常有趣的未来。

  了解您的观众

调查一下究竟哪些人在访问您的站点,以及他们为什么要访问。新手或不定期上网的 Web 用户与软件开发商相比有非常不同的兴趣和站点需要。 使您的站点对访问者来说有所帮助。

  为您的观众提供所需的信息

使导航元素保持一致,并且确保对访问率最高的区域进行明显的标记,是它们易于被找到。

  使用清楚的消息

  确保用户了解此页面的上下文,并且知道需要他们做些什么。如果在注册过程中您要用户输入姓名,那么就直截了当地说。不要让访问者自己计算什么,他们会感到沮丧,于是转到其它更简单的站点(例如您的竞争对手的站点!)。

  保持一致性

  虽然更改不同 Web 页的外观并不难,但这并不意味着您应该这么做。将主要功能--例如返回“主页”的链接或者执行一个搜索--放在每页的相同位置。在 microsoft.com 上,黑色全局导航工具栏的位置在四十多万页上都是一样的。

  使站点可用

  牢记设计和测试站点的可用性。确保用户可容易地执行任务以获得所需信息。估算任务时间和任务完成率,然后努力进行改善。如果新的设计没有在这些方面获得改善,那么就不要实施它。重新从草图(或最初的计划)开始并尝试其它方法。

  保持简洁

  说起来容易做起来难。尝试征求反馈意见。 有时新人可以很容易找到解决方案。

  尝试新的东西

  不要害怕打破常规,尝试一些完全不同的东西。如果您不试试,永远不会找到真正的答案。

时间: 2024-09-15 08:40:52

WEB设计经验 -来自microsoft.com设计主管的相关文章

忘记web的经验:以场景设计优先

有丰富的PC互联网产品设计经验的产品经理转型做移动产品设计,若照搬原有经验可能行不通,会犯错误.很多时候需要放下"包袱",忘掉经验,从头开始. 有时候经验是一种负担,比如你恰巧拥有比较成熟的互联网经验,却又必须向移动互联网转型的时候.曾经在网站产品设计上,我们积累了很多的方法论.然而正是这些方法论让我们在设计移动 App 的时候掉进坑里无数.以下是我从坑里爬出来得出的一点感悟. 忘记web的经验:以场景设计优先 发布界面(左:3.0版,右:3.5版) 在 Web 的时代,我们更多的关注

WEB设计经验 -来自微软设计主管

web|设计|微软 从头衔上,您可能认为我主要关心的是 microsoft.com Web 站点几千个网页的版面设计.的确,这些确实是我所关注的.视觉上的吸引力是重要的,但是这仅仅是工作的一小部分.而最终的目的是确保整个站点运转正常. 我的意思是,人们通常在访问 microsoft.com 时,并未将它当作艺术作品来赞赏.而是为了获得有关产品的信息,或者有一些技术问题需要咨询,或是阅读有关开发商的期刊.所以网站的设计应该尽量清楚和有条理,以便他们能够容易地找到所需信息. 设计站点 在进行 Web

用户界面设计经验分享:界面设计技巧分享

如此有用的文章我已记不得是什么时候发现的了,但在看完的那一刻便想将之翻译,分享给大家自己也受用. 时间过了很久,来到了2014年,终于静下心来花了大把时间连同图片一起译成了中文.像我这样业余的翻译六级分数只够及格的程序员,不敢说做到信雅达,但求意思到位. 1 尽量使用单列而不是多列布局 单列布局能够让对全局有更好的掌控.同时用户也可以一目了然内容.而多列而已则会有分散用户注意力的风险使你的主旨无法很好表达.最好的做法是用一个有逻辑的叙述来引导用户并且在文末给出你的操作按钮. 2 放出礼品往往更具

网页设计经验分享:网站的设计流程

文章描述:网页设计流程-实例说明. 对于很多刚入行的网页设计来说,总有很多迷惘和不安,特别是在设计过程中,遇到反复修改,更是有想揍人的冲动,有句话怎么说来着,每一次网页设计师背后,都有一群指点江山的大神.这里,就说一下我过往的一些经验,以及一个网站的设计流程,尽量让更多的新人少走弯路,踏入网页设计这一行业. 注明: 本文来自站酷网 - 由半醉人间 原创

设计经验分享:创意图标设计实例

小xiao说说创意图标设计心得 很开心可以和导师阿坚在08gui大赛中一起去完成<fight>的图标设计,在这个过程中真的是受益匪浅!这里我谈一下在这个过程的一些小小心得. 首先在创作初期,我先描述了自己的想法,主要的设计方向是一套骷髅主题的图标,阿坚并没有赞成或反对这个想法,只是叫我先去画草稿给他看.这就是最开始的手稿: 画出来的骷髅没有任何特色,不知为何下手去美化和添加这个骷髅的性格特征,此时阿坚示范了用"液化"工具,随意的对这个骷髅进行了一些变形: 接下来是上色的阶段

设计经验分享:怎样才能设计最成功的标志

怎样才能做好一个标志? 最成功的标志都有一些共同的特点,以下几点最重要的原则. 一个成功的标志不仅仅需要创意或技巧.因为标志最终是要配合各种场合,所以无论用在什么地方,它都必须表现良好.这可以说是一个难以平衡的过程,但无论如何,你必须达到这一点.你要考虑的就是如何让标志发挥作用,看一下以下的一些指引对你的设计是否有帮助? 1 .它必须简单 过于复杂的设计会产生沟通的障碍,所以在标志中不要显得于过拥挤:如果将绿地.旗子.线路.高尔夫球手.岛形元素.边界.圆环.弧形字体集合在一个标志中,成了一个大杂

产品设计经验:产品推荐系统的设计

文章描述:产品推荐分2种,一种是以营销为目的,一种是真心觉得好.今天只谈第一种. 产品推荐分2种,一种是以营销为目的,一种是真心觉得好.今天只谈第一种.之前我们也做过一个,自认为不错,客户和客服的反馈也好,可惜没能正式上线,至今hold.思路很简单,"客户告诉我们他愿意花多少钱[X],希望得到什么效果[Y],我们帮他们选择合适的路径[P]."其中,X相对容易获得,Y则因本身的多样性需要先做细分,抽象成可量化的特征.然后对每个特征,选取路径P1.P2--Pn,做组合分析,最后是将所有的Y

设计经验分享:如何设计文字标志

上文:设计经验分享:怎样才能设计最成功的标志 [译者的话] 虽然在我们网站已经有很多篇谈论标志设计的文章,但对我们有帮助的文章不怕多.在设计一个标志时我们或许会认为"创意"是最重要的,但事实上,有一些基本原则比创意更重要.这些原则对于日后设计一个成功的标志是必不可少的. 如何设计文字标 文字标是指不包含图形的标志,设计这种标志其实可以很简单! 一个标志如果不包含图形或图片即称之为文字标,这类标志设计起来相对比较容易.文字标是使用最广泛的一类标志,事实上,很多国际性大公司都在使用这种标志

[精华]web架构设计经验分享!

经验|经验分享|精华|设计|web架构 本人作为一位web工程师,着眼最多之处莫过于 性能与架构,本次幸得参与sd2.0大会,得以与同行广泛交流,于此二方面,有些心得,不敢独享,与众博友分享,本文是这次参会与众同撩交流的心得,有兴趣者可以查看视频 架构设计的几个心得: 一,不要过设计:never over design 这是一个常常被提及的话题,但是只要想想你的架构里有多少功能是根本没有用到,或者最后废弃的,就能明白其重要性了,初涉架构设计,往往倾向于设计大而化 一的架构,希望设计出具有无比扩展