從微軟得到的教訓：十個要避免的網站設計陷阱

今天，我們將分析大名鼎鼎的軟體公司的網頁設計做法和傾向，看看我們是否可以學到一些東西，以避免在我們自己工作的失誤。

同意或不同意我的看法，隨時在下面評論建議。 作為專業設計師，你的觀點是有價值的，我期待著你的想法。

如果你討厭文章充滿吹毛求疵般的嘮叨，我很抱歉，這個文章偶爾會有點挑剔。 我通常喜歡讚揚好的設計而不是批評壞的設計，但是當大衛.阿普爾亞德和我決定寫一個微軟設計傾向分析的文章後，好像不得不見識一下什麼是雜亂，醜陋，甚至（或者）失敗的東西。

為了避免評論淪入口舌之爭，我在下面的分析中不會提及蘋果或者跟蘋果單獨對比。 這並不是因為PC對MAC是最沒爭論的，而是因為我們只是想看看那些我們認為真的缺乏實踐的網站設計和開發。 微軟是一個很成功的公司，這不會因為有些問題而掩蓋。 實際上，正如後面指出的，微軟在某些網站團隊中有一些很優秀的設計師，我們只是提出，應該有一個更高更全面的品質控制。

出於這樣的考慮，讓我們來分析微軟一些缺少設計和開發實踐的地方，從中你可以受益于這種知識

蘋果和Adobe之間最近的摩擦讓我們認識到，依賴完全封閉的協力廠商外掛程式創建網站最終會導致一些嚴重的後果。 微軟似乎要重蹈這樣的錯誤，網站越來越多的依賴Silverlight。

我流覽微軟的網站準備這篇文章的資料是，是經常受到快顯視窗的騷擾，通知我系統沒有安裝Silverlight因此不能用原本的方式流覽這些網頁。 我的疑問是，「為什麼要走這條路呢？ 」 特別是對於一些簡單的幻燈片效果的話，可以用的技術遍地都是。 誠然，這是微軟自己的Silverlight，所以從良好的商業意識出發要支援它，但這並不意味著加入他們就是最好的選擇。

無論你是否是Silverlight的粉絲，我的建議是如果你網站的功能依賴于任何Silverlight或類似技術，要非常謹慎。 有關繼續採用Flash開發網站是否更加合理的爭論還在持續升溫，像Silverlight這樣的二線系統的採用變得更具賭博性。 如有可能，請堅持跨瀏覽器，符合標準的代碼和工具——別要求你的訪客額外的操作或者安裝。

這是我對微軟最大的抱怨，因為它看起來就像設計得很草率。 毫無疑問，儘量減小檔案大小而增加實用性和保持圖片清晰清楚之間是一條狹窄的路，但我還是不禁覺得，相比那些專業的網站，微軟似乎更傾向于顯示醜陋的鋸齒狀的JPG。

撥號上網使用者數量已經逐年減少，可接受的圖像尺寸已經越來越大。 不過這也不意味著你可以不用再注意儘量把有必要小尺寸的圖片尺寸弄小，但現在這裡，設計的分量變得這麼重，解析度過小會大大降低了網站的外觀品質，圖片變得弄巧成拙！

這會是很諷刺的，本來你希望使用圖片讓你的網站更好看，但在這個過程中，最終降低了你的美感。 如果可能，在不同的顯示器預覽你處理的圖片，要注意有多少失真，多少人工痕跡你可以接受的。

有時你按照常規的設計規則，到最後還是有些東西似乎視覺欠佳。 流覽微軟的網站我就遇到很多這樣的頁面，例如下面這個，儘管嘗試使用了基於排列的組織，看起來還是那麼淩亂。

那麼問題在哪裡呢？ 簡單地說，在於這裡一個相對狹小的空間裡要放一大堆東西。 即使他們肯定的已經試圖對內容排版，還通過圖示增強視覺可讀性，最終結果仍然是相當失衡。

如果你仔細看看，你會發現這頁面的四個欄目似乎是由四個不同的人來設計的，只是把它們都擠在一起。 左邊的圖片相對於右邊看起來真的的沉重，文字顏色有點斷斷續續，內容是笨拙交錯，各列之間缺乏足夠的空白喘息空間，難看出它們的版面獨立性。

這裡得到的教訓是要包裝你頁面的欄目資訊時，小心內容資訊過於龐雜。 毫無疑問，有很多情況下都會要求增加更多的內容，但應在統一和諧且有吸引力的方式組織處理，比如下面這個漂亮的例子（來自非微軟的網站）。

從Microsoft.com開始，打開了龐大的導航下拉式功能表，選擇網站不同地方訪問，你會發現，無論哪個連結，你點擊出來的頁面相比主頁是相當不同，即使在同一個下拉式功能表出來的頁面都是如此大差別。

流覽微軟的網站就像玩一個旋轉的輪盤賭。 你已幾乎猜不到你要去的地方和所期待的下一個頁面。 部分頁面有swooshy（優美風格的曲線）背景，而其它頁面則是漸變的背景，甚至是發散的圓環。 大多數網頁似乎傾向于藍色，但又不是相同的藍，也有一些網頁完全忽略了藍色傾向。

問題是，不管你網站是2頁或者200頁，一致性還是必需的。 在有限的時間內對一個網站的運作方式和介面變得熟悉時，使用者會感到更加舒適。 每隔幾頁就給一些截然不同的東西會使流覽更加混亂，使用者體驗也變得很低效。

除此之外，創造一個強有力的統一的品牌就是一個良好的業務，因為它説明客戶以更獨立的方式去聯想你公司。 當然了，微軟有許多不同的品牌，這些分站都是從主頁延伸出來的，但即使是Microsoft.com核心的網頁中，圖片風格和導航方法似乎大大不同。

看看剪貼畫在微軟Office很無可避免的存在，這個建議會顯然是有點荒謬。 但是，ICON設計自1995年以來已經走了很長的路，是時候放棄圖片中你看到的那種特定風格了。

上面這些從微軟網頁拿來的例子讓我感到雞皮疙瘩，尤其是那個醜陋的「Beginner Developer」 標誌。 我搞不懂一個回力標為什麼要攻擊一個神奇的植物，懸浮著顯示器是協助攻擊還是逃離現場？ 我所知道的是，視覺傳達在這裡是一團糟。

這就是為什麼CSS畫廊像我們自己一樣存在世上的主要原因。 不這樣的話你就可以竊取別人的設計，但這樣你就可以一瞥你正在開發的設計十年來的發展狀況。 流覽這些CSS畫廊，就像在商場流行服飾店一樣去，以顯示給你的瘋狂姑姑她沒必要穿得好像要去參加Sunny和Cher的表演。

記得時刻保持自由無疆界，從自我開始超越于流行設計。 世界都在變化，小心過於固執保守。

微軟網站的另一個不容忽視的傾向就是文本總是不斷的破壞行列，很明顯的溢出邊界.

這是一個相當容易解決的問題，僅僅需要一點努力和注意。 只是一定要會利用免費工具像Adobe的瀏覽器實驗室，以確保你的佈局在主流瀏覽器都不會被破壞。

在談到跨瀏覽器的一致性時，無可否認的CSS佈局像一個棘手的野獸，不過那樣的小錯會讓你網站的品質下降，所以還是很值得你花時間去解決的。

有時，一個給定頁面交給我，要我指出設計的毛病來是一個挑戰。 例如，在下面的網頁，原本我想找這個小視窗使用的碴——點擊時不會變大，但我看頁面越久，我就對這個頁面的佈局的用意感到困惑。

如果你熟悉基本的設計理論，你知道，學習貫徹穩固一致的路線是優秀的網頁佈局的關鍵。 如上圖所示網站的左，中，右的視覺對齊奇怪的混合，聯結頂部留出的不尷不尬的空白，為內容資訊呈現了一個怪異視覺流。

此外，如果流覽上面這個頁面，你會看到整個內容似乎試圖在頁面居中，但由於中間橫穿過一個區帶，使得頁面似乎中心偏右了。

如下圖，免費設計博客喜歡放大量的廣告，這是給我們的收入方式，以支援繼續提供內容服務。 不過如果你運行的是一個專業商務網站，你想減少內容消息並專業化廣告，你就必須仔細考慮了。

Microsoft.com的頁面充滿了各種廣告，實實在在的降低了網頁上的美感。 有時，這些廣告是直接指向到其他微軟的網頁，有時是指向其他公司或合作夥伴。 導航你的網站到其他下屬網站這種概念是無可厚非的，但如何去實現這就有很大的區別了。

有一個事實就是，現在大多數線民都學會了辨認，忽略甚至可能反感橫幅廣告。 這並不是說，這種類型的廣告在適當的目標和設計下也沒有效果，更不是說微軟使用者根本不去點擊，我實在覺得可疑的是，就沒有更好的處理辦法了麼？

如你所見，微軟網站如果要導航使用者到他們的行動電話和其他專案，簡單的方法就是設置了一個混亂，非標準（智慧設計）的廣告系統貫穿整個網站。 不過，似乎將廣告內容整合到網站一體，隨著使用者的關注，會有一個很不錯的點擊率。

另外，這種整合將使設計更加統一和諧。 因為他們更寧願增加一個單元而不是分割一個欄目。 對了，這也許是我可以理解的微軟「效率成本」做法的方案，但我要告誡一下別讓他們誤導你。 大部分情況下，你設計的網站不會是像微軟一樣的兆級網路，因此更適於踏實的統籌的設計，可避免過多廣告造成的視覺混亂。

顯然，有很多類型的網站這並不適合出現廣告。 你要考慮清楚你網站是銷售產品或服務，還是需要額外的收入和廣告的騷擾。

在印刷設計，設計師在每一頁都安排「生息區」，通常的做法是在頁面邊緣加入矩形區域，定義出放置內容的安全範圍，避免頁面太擠逼或頁邊擁擠。 大多數網頁設計師都會直覺上這樣做，很明顯的你不希望內容太散，因而擠到了瀏覽器側邊。

然而，正如上面截圖顯示，微軟的一些網頁似乎並沒有看重這方面的意見。 相反，頁面的內容總是不在任何空白或者邊緣就開始（至少在我使用的瀏覽器上是這樣）。

左邊的導航版，讓人感覺不是內置在這個頁面的，感覺好像截斷了（是了，這樣的情況還可能是由於一個事實：我沒有IE）。 這個例子的教訓就是：永遠要留意瀏覽器視窗的邊緣。 除非你是為了某種明顯的視覺效果而打破規則。 將你的內容，尤其是交互和連結，放在有邊緣的安全範圍，這樣使用者使用的時候不會感到很擠。

如果你細看一下上面的截圖，你可以看到微軟的設計師一些失敗例子，他們根本沒有考慮到這些頁面的文字區塊在主流瀏覽器是否浮動正常。 這是微軟很有趣的傾向，許多網頁設計師，終日挖空心思的為IE瀏覽器而作特別的適應，但一家微軟這樣的大公司顯然不能這麼無所謂的，不去在其他系統情況下檢查他們自己的工作。

儘管上述關於微軟網頁設計的負面評價很多，我還是驚喜地發現，他們其實也有不少網站和網頁看起來很漂亮迷人。

網站的很多地方讓我相信微軟真的用心考慮佈局，色彩選擇，跨瀏覽器相容，上面是其中兩個例子。 這些可以看到，微軟這個大染缸中的某處還有不乏才華的人，可以説明微軟走出衰退的設計。

這些設計師，無論他們是誰，應該提升到合適的職位，讓他們能夠建立共同協作，並制定每個微軟網頁設計師要遵循一致標準。 他們可以在一個內容混亂似迷宮一樣的地方，建立很多很明顯屬於同一企業的漂亮網站，從而建立強大網路品牌。

最後我給的建議是，找到你自己公司這種類型的優秀人才，給他們一個鼓勵聲音，而不是讓他在團隊中悲哀的埋沒了才華，任命最強設計師和開發人員到合適的職位，在那裡他們可以影響每個角落的視覺溝通關聯到特定的品牌。

這樣可以有效地通過建立明確的，一貫的，嚴格的品牌指導策略，並將不同品牌的策略分發給每一個設計人員和開發人員。

總之，儘管微軟擁有不少極有才華的網頁設計師，這些人的工作成果幾乎被那些大量的不符合標準的內容所淹沒，而這些標準，我們覺得即使只工作一年多設計師和開發人員新手都可以期望做到的。

幸運的是，我們可以拿微軟作為教訓，以清楚說明這些工作方式是錯誤的。 在說到工作成品的品質時，絕不要悲觀的認為，你僅僅是一個單槍匹馬的自由職業者或小型的設計公司，就不能勝過那些大型企業和設計公司。

我發現，世界各地在家裡辦公的設計師中，要找到比坐在大公司大桌子前的設計師更優秀的實在很容易。 你要享受這樣的事實：你不必去協調和控制數百個設計師的工作品質。 儘量運用你擁有的少量資源結合你個人天馬行空無邊無際的創意和動力，去創造一些優美的功能強的設計，創造一些網路上最優秀的網站。

來源：  designshack

編譯：MazingTech