作為設(shè)計(jì)主管,Peter Stern 已經(jīng)領(lǐng)導(dǎo) microsoft.com 重新設(shè)計(jì)了主頁(yè)并且開(kāi)發(fā)了五個(gè)不同的交互工具,這些工具被用于下載中心、產(chǎn)品目錄、配置文件中心、 搜索 和注冊(cè)等聯(lián)機(jī)功能。 他為幾個(gè)內(nèi)部工具設(shè)計(jì)了用戶界面,并且正致力于創(chuàng)建將于今年晚些時(shí)候發(fā)布的下一代主頁(yè)。
從頭銜上,您可能認(rèn)為我主要關(guān)心的是 microsoft.com Web 站點(diǎn)幾千個(gè)網(wǎng)頁(yè)的版面設(shè)計(jì)。的確,這些確實(shí)是我所關(guān)注的。視覺(jué)上的吸引力是重要的,但是這僅僅是工作的一小部分。而最終的目的是確保整個(gè)站點(diǎn)運(yùn)轉(zhuǎn)正常。
我的意思是,人們通常在訪問(wèn) microsoft.com 時(shí),并未將它當(dāng)作藝術(shù)作品來(lái)贊賞。而是為了獲得有關(guān)產(chǎn)品的信息,或者有一些技術(shù)問(wèn)題需要咨詢,或是閱讀有關(guān)開(kāi)發(fā)商的期刊。所以網(wǎng)站的設(shè)計(jì)應(yīng)該盡量清楚和有條理,以便他們能夠容易地找到所需信息。
設(shè)計(jì)站點(diǎn)
在進(jìn)行 Web 設(shè)計(jì)時(shí)--在設(shè)計(jì)過(guò)程中--形式應(yīng)該服從功能。這種方法應(yīng)用于我們站點(diǎn)的整個(gè)設(shè)計(jì)過(guò)程中。當(dāng)然,我們有最新的 Web 工具,并且能夠?qū)⒏鞣N可視的小配件上載到網(wǎng)頁(yè)上。但是我們認(rèn)為這樣做將不利于為訪問(wèn)者提供有效的服務(wù)。
事實(shí)上,我經(jīng)常發(fā)現(xiàn)一些站點(diǎn)未將重點(diǎn)放在功能上。常見(jiàn)的錯(cuò)誤包括:
用戶界面元素不一致。例如,同一個(gè)控件在不同的頁(yè)面上功能不同,或者同一個(gè)功能對(duì)應(yīng)幾個(gè)用戶界面控件。
導(dǎo)航欄位置不一致。決定站點(diǎn)的哪些頁(yè)和功能需要在站點(diǎn)的任何頁(yè)上都可被訪問(wèn)到。這就是應(yīng)該保持一致性的“全局導(dǎo)航欄”。
不太注意或根本不注意基本的圖形設(shè)計(jì)原則。例如排版式樣、色彩和版面的設(shè)計(jì)。
相關(guān)元素和功能的隨意分組。注意將元素放置在網(wǎng)頁(yè)上的位置和目的。這可幫助訪問(wèn)者從其它相鄰的選擇和位置來(lái)推斷某個(gè)鏈接的功能。
使網(wǎng)頁(yè)過(guò)于龐大以至使訪問(wèn)者需要通過(guò)典型的調(diào)制解調(diào)器速度的 Internet 連接進(jìn)行長(zhǎng)時(shí)間的下載。這并不是說(shuō)不應(yīng)該使用圖形,但是您需要對(duì)它們進(jìn)行精挑細(xì)選,然后用適當(dāng)?shù)膲嚎s和顏色索引優(yōu)化它們。
現(xiàn)在的 Web 站點(diǎn)仍然存在很多問(wèn)題,這并不奇怪。畢竟,Web 設(shè)計(jì)“藝術(shù)”相對(duì)來(lái)說(shuō)還是個(gè)新生事物。在四、五年以前,Web 頁(yè)甚至是普通的。那時(shí),人們好像認(rèn)為他們的 Web 站點(diǎn)將會(huì)吸引訪問(wèn)者只是因?yàn)樗鼈兇嬖?-并且,可能在某些情況下這種方法確實(shí)有效。但是這些站點(diǎn)一般很難看,并且更重要的是,它們真的難以使用。接下來(lái)便進(jìn)入“看看我們能做些什么”階段,在網(wǎng)頁(yè)中加入了大量的動(dòng)畫(huà)、聲音文件以及其它附加件,導(dǎo)致訪問(wèn)者需要長(zhǎng)時(shí)間地進(jìn)行下載,但是并未獲得多少實(shí)實(shí)在在的內(nèi)容。
如今的 Web 設(shè)計(jì)師們已經(jīng)吸取了前人的經(jīng)驗(yàn)和教訓(xùn)。好的站點(diǎn)傾向于簡(jiǎn)化和快速,同時(shí)在功能上有所提高。這是 Microsoft 的目標(biāo),而且我們最先承認(rèn)自己所犯的錯(cuò)誤(參閱“Microsoft 的 Web 簡(jiǎn)史”看一看以前的主頁(yè)設(shè)計(jì))。
設(shè)計(jì)錯(cuò)誤并不總是顯而易見(jiàn)的。有時(shí)在設(shè)計(jì)上對(duì)一個(gè)小元素的移動(dòng)或更改將有很少或根本沒(méi)有影響。但是,在其它情況下,它可能確實(shí)會(huì)對(duì)頁(yè)面功能有所影響。而且如果說(shuō)我們從過(guò)去幾年學(xué)到了一些東西,那就是小的改動(dòng)會(huì)使 Web 頁(yè)的運(yùn)行方式有很大的不同。
明確的流程
若要避免類似問(wèn)題,我們?yōu)樾路?wù)(例如“搜索”)的創(chuàng)建或關(guān)鍵的 Web 頁(yè)(如主頁(yè))設(shè)計(jì)了一個(gè)明確的流程。 每個(gè)項(xiàng)目都是在一定的基礎(chǔ)上開(kāi)始的,即我們有一個(gè)受益于我們站點(diǎn)上的頁(yè)面、部分或用戶界面元素的產(chǎn)品或服務(wù)。在早期的產(chǎn)品計(jì)劃階段(第 1 階段),我被要求設(shè)計(jì)一些初級(jí)模型:大致描述頁(yè)面、部分或功能的草圖。然后產(chǎn)品項(xiàng)目組檢查產(chǎn)品計(jì)劃建議,看看此項(xiàng)服務(wù)是否可以為 microsoft.com 的訪問(wèn)者真正帶來(lái)一些實(shí)惠。
如果答案是“可以”,那么此項(xiàng)目會(huì)獲得批準(zhǔn),我們開(kāi)始寫(xiě)項(xiàng)目說(shuō)明書(shū)(第 2 階段)。我們?cè)诘?1 階段的草圖和概念基礎(chǔ)上創(chuàng)建并提出一個(gè)更為完整的計(jì)劃。這時(shí),我們一般還會(huì)開(kāi)始可用性測(cè)試(一般會(huì)有書(shū)面的模型)以了解潛在用戶將對(duì)計(jì)劃中的設(shè)計(jì)做出何種反應(yīng)。 在最后開(kāi)發(fā)階段(第 3 階段),我們創(chuàng)建運(yùn)行計(jì)劃服務(wù)的 Web 原型,并且進(jìn)行全面的可用性測(cè)試以及內(nèi)部復(fù)查。然后完成站點(diǎn)的代碼,修改程序錯(cuò)誤,最后站點(diǎn)通過(guò)實(shí)際運(yùn)轉(zhuǎn)的 Web 站點(diǎn)向客戶發(fā)布。
正如您所見(jiàn)到的,可用性在整個(gè)流程中扮演著重要的角色(參閱“創(chuàng)建有效的 Web 界面需要認(rèn)真計(jì)劃”)。我們可以為用戶運(yùn)行某項(xiàng)任務(wù)計(jì)時(shí),這樣我們就可以在產(chǎn)品以后的版本中對(duì)比相同的測(cè)試。我們可以使用這種方法進(jìn)行度量,以確定一個(gè)功能的重新設(shè)計(jì)是否為客戶帶來(lái)任何真正的價(jià)值。
還有,我們將仔細(xì)地觀察以了解可用性對(duì)象是否可以計(jì)算出如何正確使用新功能--我們稱為“可發(fā)現(xiàn)性”的方法。有時(shí)這為我們提供了一些挑戰(zhàn)。例如:在我們的站點(diǎn)上,在 搜索引擎 中鍵入一個(gè)詞組或字會(huì)產(chǎn)生一列結(jié)果。然后我們請(qǐng)用戶選擇在這些結(jié)果中進(jìn)行搜索,以便進(jìn)行更細(xì)的搜索并且導(dǎo)向某一頁(yè)或資源。但是即使“在結(jié)果范圍內(nèi)搜索”被明顯地標(biāo)記在深色標(biāo)簽上,很少有人熟悉它。一些用戶認(rèn)為他們正開(kāi)始新的搜索,并且可能毫無(wú)結(jié)果。我們正在解決這個(gè)問(wèn)題以確??蛻艨梢岳?microsoft.com 上所有豐富的功能來(lái)提高他們對(duì)此站點(diǎn)的認(rèn)識(shí)。
選項(xiàng)“在結(jié)果范圍內(nèi)搜索”看上去很直觀,但不是非常易發(fā)現(xiàn)的。此問(wèn)題一直是困擾我們的設(shè)計(jì)的問(wèn)題之一。
最后階段
大體來(lái)講,站點(diǎn)設(shè)計(jì)是在發(fā)生沖突的需要之間求得平衡的藝術(shù)。一方面,我要將站點(diǎn)設(shè)計(jì)得盡量簡(jiǎn)單易用。另一方面,我要確保站點(diǎn)中所有強(qiáng)大的工具可為經(jīng)驗(yàn)豐富的用戶所用。與此同時(shí),我還要為內(nèi)部客戶服務(wù)--Microsoft 產(chǎn)品項(xiàng)目組--他們對(duì)服務(wù)有特殊的需要。所以每天我都要解決一些非常困難的問(wèn)題,經(jīng)常處于很緊迫的情形中。我發(fā)現(xiàn)這種工作是鼓舞人心和有趣的。
這個(gè)職業(yè)非常需要更熟練的專業(yè)人員。我是經(jīng)過(guò)一系列非常不一般的過(guò)程--在大學(xué)學(xué)習(xí)圖形藝術(shù),然后在多媒體公司設(shè)計(jì) CD-ROM,最后加入 Microsoft 并開(kāi)發(fā)應(yīng)用程序--才獲得這個(gè)職位的。非常奇怪的是,當(dāng)我申請(qǐng)(并獲得)這份工作時(shí),我以前從來(lái)沒(méi)有設(shè)計(jì)過(guò) Web 頁(yè)。但是我廣泛的設(shè)計(jì)經(jīng)歷已經(jīng)證明是非常有用的,并且我自認(rèn)為已經(jīng)驗(yàn)證了格言“成功的設(shè)計(jì)就是成功的設(shè)計(jì)”(不論是什么媒體)。許多設(shè)計(jì)問(wèn)題對(duì) Web 來(lái)說(shuō)是獨(dú)一無(wú)二的,解決這些問(wèn)題的方法對(duì)于任何媒體都是一樣的。
對(duì)于那些準(zhǔn) Web 設(shè)計(jì)師我的建議是,他們也應(yīng)該盡可能地?cái)U(kuò)大設(shè)計(jì)背景。今天應(yīng)該確保將一些 Web 工作作為互動(dòng)設(shè)計(jì)培訓(xùn)的一部分--大多數(shù)好的設(shè)計(jì)學(xué)校已將其加入課程中。但是在排版、色彩理論、版面設(shè)計(jì)以及生產(chǎn)等方面的扎實(shí)的技術(shù)將仍然特別有價(jià)值。 在未來(lái),Web 設(shè)計(jì)師們?nèi)詫?huì)繼續(xù)被要求給頁(yè)面增加更豐富的多媒體內(nèi)容,從而為 Web 站點(diǎn)的可視性和可操作性增加了新一級(jí)的復(fù)雜性和技術(shù)要求。作為 CD-ROM/多媒體設(shè)計(jì)師,要求我必須具有圖形設(shè)計(jì)、視頻、音頻制作、動(dòng)畫(huà)等方面的知識(shí)和創(chuàng)作能力。我的預(yù)言是,Web 設(shè)計(jì)師也將向這些領(lǐng)域發(fā)展。
對(duì)于屬于 microsoft.com 的我們--以及在 Internet 上的其它地方--那應(yīng)該是一個(gè)非常有趣的未來(lái)。
了解您的觀眾
調(diào)查一下究竟哪些人在訪問(wèn)您的站點(diǎn),以及他們?yōu)槭裁匆L問(wèn)。新手或不定期上網(wǎng)的 Web 用戶與軟件開(kāi)發(fā)商相比有非常不同的興趣和站點(diǎn)需要。 使您的站點(diǎn)對(duì)訪問(wèn)者來(lái)說(shuō)有所幫助。
為您的觀眾提供所需的信息
使導(dǎo)航元素保持一致,并且確保對(duì)訪問(wèn)率最高的區(qū)域進(jìn)行明顯的標(biāo)記,是它們易于被找到。
使用清楚的消息
確保用戶了解此頁(yè)面的上下文,并且知道需要他們做些什么。如果在注冊(cè)過(guò)程中您要用戶輸入姓名,那么就直截了當(dāng)?shù)卣f(shuō)。不要讓訪問(wèn)者自己計(jì)算什么,他們會(huì)感到沮喪,于是轉(zhuǎn)到其它更簡(jiǎn)單的站點(diǎn)(例如您的競(jìng)爭(zhēng)對(duì)手的站點(diǎn)!)。
保持一致性
雖然更改不同 Web 頁(yè)的外觀并不難,但這并不意味著您應(yīng)該這么做。將主要功能--例如返回“主頁(yè)”的鏈接或者執(zhí)行一個(gè)搜索--放在每頁(yè)的相同位置。在 microsoft.com 上,黑色全局導(dǎo)航工具欄的位置在四十多萬(wàn)頁(yè)上都是一樣的。
使站點(diǎn)可用
牢記設(shè)計(jì)和測(cè)試站點(diǎn)的可用性。確保用戶可容易地執(zhí)行任務(wù)以獲得所需信息。估算任務(wù)時(shí)間和任務(wù)完成率,然后努力進(jìn)行改善。如果新的設(shè)計(jì)沒(méi)有在這些方面獲得改善,那么就不要實(shí)施它。重新從草圖(或最初的計(jì)劃)開(kāi)始并嘗試其它方法。
保持簡(jiǎn)潔
說(shuō)起來(lái)容易做起來(lái)難。嘗試征求反饋意見(jiàn)。 有時(shí)新人可以很容易找到解決方案。
嘗試新的東西
不要害怕打破常規(guī),嘗試一些完全不同的東西。如果您不試試,永遠(yuǎn)不會(huì)找到真正的答案。