建站常識
WEB設計經(jīng)驗-來自microsoft.com設計主管
2006-06-23 14:01:00
作為設計主管,Peter Stern 已經(jīng)領導 microsoft.com 重新設計了主頁并且開發(fā)了五個不同的交互工具,這些工具被用于下載中心、產(chǎn)品目錄、配置文件中心、 搜索 和注冊等聯(lián)機功能。 他為幾個內(nèi)部工具設計了用戶界面,并且正致力于創(chuàng)建將于今年晚些時候發(fā)布的下一代主頁。
從頭銜上,您可能認為我主要關(guān)心的是 microsoft.com Web 站點幾千個網(wǎng)頁的版面設計。的確,這些確實是我所關(guān)注的。視覺上的吸引力是重要的,但是這僅僅是工作的一小部分。而最終的目的是確保整個站點運轉(zhuǎn)正常。
我的意思是,人們通常在訪問 microsoft.com 時,并未將它當作藝術(shù)作品來贊賞。而是為了獲得有關(guān)產(chǎn)品的信息,或者有一些技術(shù)問題需要咨詢,或是閱讀有關(guān)開發(fā)商的期刊。所以網(wǎng)站的設計應該盡量清楚和有條理,以便他們能夠容易地找到所需信息。
設計站點
在進行 Web 設計時--在設計過程中--形式應該服從功能。這種方法應用于我們站點的整個設計過程中。當然,我們有最新的 Web 工具,并且能夠?qū)⒏鞣N可視的小配件上載到網(wǎng)頁上。但是我們認為這樣做將不利于為訪問者提供有效的服務。
事實上,我經(jīng)常發(fā)現(xiàn)一些站點未將重點放在功能上。常見的錯誤包括:
用戶界面元素不一致。例如,同一個控件在不同的頁面上功能不同,或者同一個功能對應幾個用戶界面控件。
導航欄位置不一致。決定站點的哪些頁和功能需要在站點的任何頁上都可被訪問到。這就是應該保持一致性的“全局導航欄”。
不太注意或根本不注意基本的圖形設計原則,例如排版式樣、色彩和版面的設計。
相關(guān)元素和功能的隨意分組。注意將元素放置在網(wǎng)頁上的位置和目的。這可幫助訪問者從其它相鄰的選擇和位置來推斷某個鏈接的功能。
使網(wǎng)頁過于龐大以至使訪問者需要通過典型的調(diào)制解調(diào)器速度的 Internet 連接進行長時間的下載。這并不是說不應該使用圖形,但是您需要對它們進行精挑細選,然后用適當?shù)膲嚎s和顏色索引優(yōu)化它們。
現(xiàn)在的 Web 站點仍然存在很多問題,這并不奇怪。畢竟,Web 設計“藝術(shù)”相對來說還是個新生事物。在四、五年以前,Web 頁甚至是普通的。那時,人們好像認為他們的 Web 站點將會吸引訪問者只是因為它們存在--并且,可能在某些情況下這種方法確實有效。但是這些站點一般很難看,并且更重要的是,它們真的難以使用。接下來便進入“看看我們能做些什么”階段,在網(wǎng)頁中加入了大量的動畫、聲音文件以及其它附加件,導致訪問者需要長時間地進行下載,但是并未獲得多少實實在在的內(nèi)容。
如今的 Web 設計師們已經(jīng)吸取了前人的經(jīng)驗和教訓。好的站點傾向于簡化和快速,同時在功能上有所提高。這是 Microsoft 的目標,而且我們最先承認自己所犯的錯誤(參閱“Microsoft 的 Web 簡史”看一看以前的主頁設計)。
設計錯誤并不總是顯而易見的。有時在設計上對一個小元素的移動或更改將有很少或根本沒有影響。但是,在其它情況下,它可能確實會對頁面功能有所影響。而且如果說我們從過去幾年學到了一些東西,那就是小的改動會使 Web 頁的運行方式有很大的不同。
明確的流程
若要避免類似問題,我們?yōu)樾路?例如“搜索”)的創(chuàng)建或關(guān)鍵的 Web 頁(如主頁)設計了一個明確的流程。 每個項目都是在一定的基礎上開始的,即我們有一個受益于我們站點上的頁面、部分或用戶界面元素的產(chǎn)品或服務。在早期的產(chǎn)品計劃階段(第 1 階段),我被要求設計一些初級模型:大致描述頁面、部分或功能的草圖。然后產(chǎn)品項目組檢查產(chǎn)品計劃建議,看看此項服務是否可以為 microsoft.com 的訪問者真正帶來一些實惠。
如果答案是“可以”,那么此項目會獲得批準,我們開始寫項目說明書(第 2 階段)。我們在第 1 階段的草圖和概念基礎上創(chuàng)建并提出一個更為完整的計劃。這時,我們一般還會開始可用性測試(一般會有書面的模型)以了解潛在用戶將對計劃中的設計做出何種反應。 在最后開發(fā)階段(第 3 階段),我們創(chuàng)建運行計劃服務的 Web 原型,并且進行全面的可用性測試以及內(nèi)部復查。然后完成站點的代碼,修改程序錯誤,最后站點通過實際運轉(zhuǎn)的 Web 站點向客戶發(fā)布。
正如您所見到的,可用性在整個流程中扮演著重要的角色(參閱“創(chuàng)建有效的 Web 界面需要認真計劃”)。我們可以為用戶運行某項任務計時,這樣我們就可以在產(chǎn)品以后的版本中對比相同的測試。我們可以使用這種方法進行度量,以確定一個功能的重新設計是否為客戶帶來任何真正的價值。
還有,我們將仔細地觀察以了解可用性對象是否可以計算出如何正確使用新功能--我們稱為“可發(fā)現(xiàn)性”的方法。有時這為我們提供了一些挑戰(zhàn)。例如:在我們的站點上,在 搜索引擎 中鍵入一個詞組或字會產(chǎn)生一列結(jié)果。然后我們請用戶選擇在這些結(jié)果中進行搜索,以便進行更細的搜索并且導向某一頁或資源。但是即使“在結(jié)果范圍內(nèi)搜索”被明顯地標記在深色標簽上,很少有人熟悉它。一些用戶認為他們正開始新的搜索,并且可能毫無結(jié)果。我們正在解決這個問題以確保客戶可以利用 microsoft.com 上所有豐富的功能來提高他們對此站點的認識。
選項“在結(jié)果范圍內(nèi)搜索”看上去很直觀,但不是非常易發(fā)現(xiàn)的。此問題一直是困擾我們的設計的問題之一。
最后階段
大體來講,站點設計是在發(fā)生沖突的需要之間求得平衡的藝術(shù)。一方面,我要將站點設計得盡量簡單易用。另一方面,我要確保站點中所有強大的工具可為經(jīng)驗豐富的用戶所用。與此同時,我還要為內(nèi)部客戶服務--Microsoft 產(chǎn)品項目組--他們對服務有特殊的需要。所以每天我都要解決一些非常困難的問題,經(jīng)常處于很緊迫的情形中。我發(fā)現(xiàn)這種工作是鼓舞人心和有趣的。
這個職業(yè)非常需要更熟練的專業(yè)人員。我是經(jīng)過一系列非常不一般的過程--在大學學習圖形藝術(shù),然后在多媒體公司設計 CD-ROM,最后加入 Microsoft 并開發(fā)應用程序--才獲得這個職位的。非常奇怪的是,當我申請(并獲得)這份工作時,我以前從來沒有設計過 Web 頁。但是我廣泛的設計經(jīng)歷已經(jīng)證明是非常有用的,并且我自認為已經(jīng)驗證了格言“成功的設計就是成功的設計”(不論是什么媒體)。許多設計問題對 Web 來說是獨一無二的,解決這些問題的方法對于任何媒體都是一樣的。
對于那些準 Web 設計師我的建議是,他們也應該盡可能地擴大設計背景。今天應該確保將一些 Web 工作作為互動設計培訓的一部分--大多數(shù)好的設計學校已將其加入課程中。但是在排版、色彩理論、版面設計以及生產(chǎn)等方面的扎實的技術(shù)將仍然特別有價值。 在未來,Web 設計師們?nèi)詫^續(xù)被要求給頁面增加更豐富的多媒體內(nèi)容,從而為 Web 站點的可視性和可操作性增加了新一級的復雜性和技術(shù)要求。作為 CD-ROM/多媒體設計師,要求我必須具有圖形設計、視頻、音頻制作、動畫等方面的知識和創(chuàng)作能力。我的預言是,Web 設計師也將向這些領域發(fā)展。
對于屬于 microsoft.com 的我們--以及在 Internet 上的其它地方--那應該是一個非常有趣的未來。
了解您的觀眾。調(diào)查一下究竟哪些人在訪問您的站點,以及他們?yōu)槭裁匆L問。新手或不定期上網(wǎng)的 Web 用戶與軟件開發(fā)商相比有非常不同的興趣和站點需要。 使您的站點對訪問者來說有所幫助。
為您的觀眾提供所需的信息。使導航元素保持一致,并且確保對訪問率最高的區(qū)域進行明顯的標記,是它們易于被找到。
使用清楚的消息
確保用戶了解此頁面的上下文,并且知道需要他們做些什么。如果在注冊過程中您要用戶輸入姓名,那么就直截了當?shù)卣f。不要讓訪問者自己計算什么,他們會感到沮喪,于是轉(zhuǎn)到其它更簡單的站點(例如您的競爭對手的站點!)。
保持一致性
雖然更改不同 Web 頁的外觀并不難,但這并不意味著您應該這么做。將主要功能--例如返回“主頁”的鏈接或者執(zhí)行一個搜索--放在每頁的相同位置。在 microsoft.com 上,黑色全局導航工具欄的位置在四十多萬頁上都是一樣的。
使站點可用
牢記設計和測試站點的可用性。確保用戶可容易地執(zhí)行任務以獲得所需信息。估算任務時間和任務完成率,然后努力進行改善。如果新的設計沒有在這些方面獲得改善,那么就不要實施它。重新從草圖(或最初的計劃)開始并嘗試其它方法。
保持簡潔
說起來容易做起來難。嘗試征求反饋意見。 有時新人可以很容易找到解決方案。
嘗試新的東西
不要害怕打破常規(guī),嘗試一些完全不同的東西。如果您不試試,永遠不會找到真正的答案。
近期更新
- [2023-06-25 23:22:29] 優(yōu)秀網(wǎng)站設計的五大特點
- [2023-04-27 14:05:55] Html 5 響應式網(wǎng)站設計制作
- [2023-04-10 11:07:30] 網(wǎng)站建設制作流程知多少
- [2022-10-14 10:11:30] 做網(wǎng)站設計應該更看重框架搭建還是視覺觀感?
- [2022-08-09 15:57:48] 以“產(chǎn)品”思維搭建網(wǎng)站!
- [2022-08-08 09:12:57] 一家公司的網(wǎng)站應該有哪些板塊內(nèi)容?
- [2022-08-05 09:28:06] 企業(yè)網(wǎng)站建設為什么要設置新聞板塊?
- [2022-07-04 15:58:06] 網(wǎng)站首頁設計的好看,這個網(wǎng)站就成功了一大半!
- [2022-05-20 09:34:19] 網(wǎng)站后臺管理系統(tǒng)是什么?有什么作用?
- [2022-05-17 11:29:32] 作為消費者,應該如何選擇一家水平高的網(wǎng)站建設公司
- [2022-05-17 11:27:01] 高端網(wǎng)站定制與模板化網(wǎng)站應該怎么選擇?
- [2022-04-22 16:00:41] 現(xiàn)在高端的網(wǎng)站設計都有哪些新的趨勢?
延伸閱讀
- [2010-06-24 08:15:00] 視覺設計師成長的三個階段
- [2011-10-21 14:34:04] 支付寶將向全球開放 國外用戶可購物淘寶
- [2017-02-17 10:51:00] 三星Note7手機爆炸的原因
- [2016-11-25 16:04:27] 外媒:微信小程序欲干掉蘋果App Store 統(tǒng)治中國市場
- [2005-12-29 21:28:00] 為你的網(wǎng)頁綻放最炫目的特效
- [2010-10-15 22:17:00] 理解網(wǎng)頁中的視覺層次
- [2007-03-14 12:01:00] 按"右箭頭"按鈕,往左移
- [2010-11-12 08:27:00] 20K的糾結(jié) 騰訊游戲flash廣告設計的現(xiàn)狀與未來
- [2008-02-13 22:18:00] 網(wǎng)站主頁的優(yōu)化
- [2007-07-03 14:51:00] 談用戶體驗,別落下商業(yè)利益
- [2010-03-31 12:14:00] 設計中的色彩:藍色
- [2009-11-13 14:19:00] 《Web信息架構(gòu)》-標簽系統(tǒng)
解決方案
輪胎行業(yè)網(wǎng)站設計解決方案 機械行業(yè)網(wǎng)站設計解決方案 房地產(chǎn)行業(yè)網(wǎng)站設計解決方案 科技企業(yè)網(wǎng)站設計解決方案 電子家電網(wǎng)站設計解決方案 食品行業(yè)網(wǎng)站設計解決方案 集團公司網(wǎng)站設計解決方案 企事業(yè)單位網(wǎng)站設計解決方案 外貿(mào)行業(yè)網(wǎng)站設計解決方案 健身運動網(wǎng)站設計解決方案 美容與化妝品網(wǎng)站設計解決方案 建筑設計行業(yè)網(wǎng)站設計解決方案 物流行業(yè)網(wǎng)站設計解決方案
TAGS關(guān)鍵字
企業(yè)網(wǎng)站為什么要備案 網(wǎng)站開發(fā) 圖形網(wǎng)格 搜索引擎蜘蛛 扁平化設計 青島抖音小程序開發(fā) 青島網(wǎng)頁制作 SEO優(yōu)化 微信開發(fā) 網(wǎng)站交互設計 IT資訊 網(wǎng)站設計資訊 微網(wǎng)站 視覺靈感 網(wǎng)站的速度 青島好的網(wǎng)站優(yōu)化公司 審美 營銷型網(wǎng)站建設 程序開發(fā) 建站常識 微官網(wǎng) 空白和簡潔的設計 網(wǎng)站推廣 營銷型網(wǎng)站 網(wǎng)站SEO 平面設計 高端網(wǎng)站設計 微信營銷的優(yōu)勢 企業(yè)網(wǎng)站 網(wǎng)站動畫