WEB设计经验

作为设计主管，Peter Stern 已经领导 microsoft.com 重新设计了主页并且开发了五个不同的交互工具，这些工具被用于下载中心、产品目录、配置文件中心、 搜索 和注册等联机功能。 他为几个内部工具设计了用户界面，并且正致力于创建将于今年晚些时候发布的下一代主页。   ; T1 P: M4 {) J" o5 l6 t

+ @4 i2 N* g: g  u  m! P3 v4 b; x从头衔上，您可能认为我主要关心的是 microsoft.com Web 站点几千个网页的版面设计。的确，这些确实是我所关注的。视觉上的吸引力是重要的，但是这仅仅是工作的一小部分。而最终的目的是确保整个站点运转正常。   
. D% a& }5 X; m0 S- D/ p* Y
1 B1 r- X1 a% o我的意思是，人们通常在访问 microsoft.com 时，并未将它当作艺术作品来赞赏。而是为了获得有关产品的信息，或者有一些技术问题需要咨询，或是阅读有关开发商的期刊。所以网站的设计应该尽量清楚和有条理，以便他们能够容易地找到所需信息。   1 S1 ]" ]  ?' m3 W

- Z" ?6 ^! J, o- F$ j$ E9 K! x% D设计站点   
' p8 M, Y" {$ q4 q. }, V; n% f+ [7 L' y% x  s  U
在进行 Web 设计时--在设计过程中--形式应该服从功能。这种方法应用于我们站点的整个设计过程中。当然，我们有最新的 Web 工具，并且能够将各种可视的小配件上载到网页上。但是我们认为这样做将不利于为访问者提供有效的服务。   
  t0 C- G8 b" y2 h5 C- `5 o9 l7 e! \7 \. P0 c  U4 `6 `
事实上，我经常发现一些站点未将重点放在功能上。常见的错误包括：   
) w3 O- p, j+ w1 {, R2 ~& D2 P6 y, N6 d. z
用户界面元素不一致。例如，同一个控件在不同的页面上功能不同，或者同一个功能对应几个用户界面控件。   
! V# ^2 f0 X" M- W/ }8 Y
8 f7 t4 w% c$ @- ~0 C0 A5 u导航栏位置不一致。决定站点的哪些页和功能需要在站点的任何页上都可被访问到。这就是应该保持一致性的“全局导航栏”。   2 R5 {9 q, Q, O' F. S0 h

! A" b: k! X2 }5 n9 k& I/ i& T不太注意或根本不注意基本的图形设计原则。例如排版式样、色彩和版面的设计。   $ x9 M8 Q7 y. T4 L: B

9 E" u" U3 Z6 j; U) h+ n相关元素和功能的随意分组。注意将元素放置在网页上的位置和目的。这可帮助访问者从其它相邻的选择和位置来推断某个链接的功能。   
6 q9 \- r8 {' A- Y7 \, P0 {7 r5 u% e; a
使网页过于庞大以至使访问者需要通过典型的调制解调器速度的 Internet 连接进行长时间的下载。这并不是说不应该使用图形，但是您需要对它们进行精挑细选，然后用适当的压缩和颜色索引优化它们。   
. l* x* w  c$ s, S
3 b9 k0 G5 M& E现在的 Web 站点仍然存在很多问题，这并不奇怪。毕竟，Web 设计“艺术”相对来说还是个新生事物。在四、五年以前，Web 页甚至是普通的。那时，人们好像认为他们的 Web 站点将会吸引访问者只是因为它们存在--并且，可能在某些情况下这种方法确实有效。但是这些站点一般很难看，并且更重要的是，它们真的难以使用。接下来便进入“看看我们能做些什么”阶段，在网页中加入了大量的动画、声音文件以及其它附加件，导致访问者需要长时间地进行下载，但是并未获得多少实实在在的内容。   
1 v# Q6 J/ m. x7 U1 ^7 D1 S; |2 r* N2 _1 g# T+ k9 v. u. U
如今的 Web 设计师们已经吸取了前人的经验和教训。好的站点倾向于简化和快速，同时在功能上有所提高。这是 Microsoft 的目标，而且我们最先承认自己所犯的错误（参阅“Microsoft 的 Web 简史”看一看以前的主页设计）。   - q* Y1 s: N$ S  b
, C( T, g9 y5 W. J4 p3 ]0 n7 Z! w/ P5 P0 t
设计错误并不总是显而易见的。有时在设计上对一个小元素的移动或更改将有很少或根本没有影响。但是，在其它情况下，它可能确实会对页面功能有所影响。而且如果说我们从过去几年学到了一些东西，那就是小的改动会使 Web 页的运行方式有很大的不同。   
  e; _  ]. Y0 K# I- N, X. n) G; r8 s; i
明确的流程   
4 }) F8 S5 I; j% I# m
1 J/ [1 G( ^+ f$ i' B若要避免类似问题，我们为新服务（例如“搜索”）的创建或关键的 Web 页（如主页）设计了一个明确的流程。 每个项目都是在一定的基础上开始的，即我们有一个受益于我们站点上的页面、部分或用户界面元素的产品或服务。在早期的产品计划阶段（第 1 阶段），我被要求设计一些初级模型：大致描述页面、部分或功能的草图。然后产品项目组检查产品计划建议，看看此项服务是否可以为 microsoft.com 的访问者真正带来一些实惠。   
) s7 l  h' D9 k9 \) ]
; t. i% m! X, i6 J7 |, Q如果答案是“可以”，那么此项目会获得批准，我们开始写项目说明书（第 2 阶段）。我们在第 1 阶段的草图和概念基础上创建并提出一个更为完整的计划。这时，我们一般还会开始可用性测试（一般会有书面的模型）以了解潜在用户将对计划中的设计做出何种反应。 在最后开发阶段（第 3 阶段），我们创建运行计划服务的 Web 原型，并且进行全面的可用性测试以及内部复查。然后完成站点的代码，修改程序错误，最后站点通过实际运转的 Web 站点向客户发布。   
5 n; B1 X9 \+ |( s1 M+ t/ Z
0 \5 V$ M$ r* z; q7 s; W正如您所见到的，可用性在整个流程中扮演着重要的角色（参阅“创建有效的 Web 界面需要认真计划”）。我们可以为用户运行某项任务计时，这样我们就可以在产品以后的版本中对比相同的测试。我们可以使用这种方法进行度量，以确定一个功能的重新设计是否为客户带来任何真正的价值。   : s1 a9 x$ \% }4 N. b

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

7 X9 a, T0 O' ?( B9 h选项“在结果范围内搜索”看上去很直观，但不是非常易发现的。此问题一直是困扰我们的设计的问题之一。   0 M+ P/ |# O; e. s* T
2 h2 i( h! W) h7 r6 t' U( `
最后阶段   - q0 ^6 Z2 O; v) r: L7 d
; G+ j! h% j; V3 a# W2 H  t
大体来讲，站点设计是在发生冲突的需要之间求得平衡的艺术。一方面，我要将站点设计得尽量简单易用。另一方面，我要确保站点中所有强大的工具可为经验丰富的用户所用。与此同时，我还要为内部客户服务--Microsoft 产品项目组--他们对服务有特殊的需要。所以每天我都要解决一些非常困难的问题，经常处于很紧迫的情形中。我发现这种工作是鼓舞人心和有趣的。   % ^$ l$ Q' A/ B% ]1 U! u7 l) r, U

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

- V! |' Y4 y  G& V0 c对于那些准 Web 设计师我的建议是，他们也应该尽可能地扩大设计背景。今天应该确保将一些 Web 工作作为互动设计培训的一部分--大多数好的设计学校已将其加入课程中。但是在排版、色彩理论、版面设计以及生产等方面的扎实的技术将仍然特别有价值。 在未来，Web 设计师们仍将会继续被要求给页面增加更丰富的多媒体内容，从而为 Web 站点的可视性和可操作性增加了新一级的复杂性和技术要求。作为 CD-ROM/多媒体设计师，要求我必须具有图形设计、视频、音频制作、动画等方面的知识和创作能力。我的预言是，Web 设计师也将向这些领域发展。   ) M! M# _2 v% c2 d( j; K& j: R$ K
1 v0 Y3 W) M9 T- G/ F. Q
对于属于 microsoft.com 的我们--以及在 Internet 上的其它地方--那应该是一个非常有趣的未来。   2 ^3 k: j' j! B

' T% t5 I, y2 m9 E. g. g了解您的观众   
2 y9 p0 Y1 r2 I! r' M
, I4 G7 W" o' e+ B3 Y  n& o调查一下究竟哪些人在访问您的站点，以及他们为什么要访问。新手或不定期上网的 Web 用户与软件开发商相比有非常不同的兴趣和站点需要。 使您的站点对访问者来说有所帮助。   
( g. B8 Y  R: i: N( W, W4 q0 S4 U8 e1 ~  P/ E& G
为您的观众提供所需的信息   
: O% D7 G4 A3 @* d. _% C2 w9 w  C5 b( S) h; R  E# v8 M
使导航元素保持一致，并且确保对访问率最高的区域进行明显的标记，是它们易于被找到。   
# D  \" k6 g3 ]' m0 w' d" r( d9 _* @6 N  \7 ^% S
使用清楚的消息   
" e( r  C% y1 ~- M0 A- P2 {2 C8 z9 [% E6 ]' [
确保用户了解此页面的上下文，并且知道需要他们做些什么。如果在注册过程中您要用户输入姓名，那么就直截了当地说。不要让访问者自己计算什么，他们会感到沮丧，于是转到其它更简单的站点（例如您的竞争对手的站点！）。   % M: M4 Z& q: @4 i

+ D0 K: Q( b& P' T5 E- u$ Z保持一致性   
& p" a# K9 ?1 [% Y1 i6 k8 T# }4 F, @& R" T' H5 S9 W$ m
虽然更改不同 Web 页的外观并不难，但这并不意味着您应该这么做。将主要功能--例如返回“主页”的链接或者执行一个搜索--放在每页的相同位置。在 microsoft.com 上，黑色全局导航工具栏的位置在四十多万页上都是一样的。   ! f7 ]2 m1 B/ J
, p9 y2 b) V, a& }
使站点可用   7 m) n* J. ~$ }0 s) k5 E4 {
( Z! r" L8 L7 ~# _; E
牢记设计和测试站点的可用性。确保用户可容易地执行任务以获得所需信息。估算任务时间和任务完成率，然后努力进行改善。如果新的设计没有在这些方面获得改善，那么就不要实施它。重新从草图（或最初的计划）开始并尝试其它方法。   
8 L, N' d" a) u) J7 q; V4 W
/ t* q7 z. G  A7 {* l1 k/ c. d4 f保持简洁   ; j, D& _0 a$ N- o; n$ ]: [8 a
) t+ I% P' a2 m9 Y
说起来容易做起来难。尝试征求反馈意见。 有时新人可以很容易找到解决方案。   : k; D6 ?6 }1 x/ y3 A, s
8 R% C, T: b9 L; t3 D' R
尝试新的东西   
: N3 U/ @. b: l' ]* s4 c. r/ g6 A( N3 |2 s
不要害怕打破常规，尝试一些完全不同的东西。如果您不试试，永远不会找到真正的答案。