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

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

偶爾的數(shù)落

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

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

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

#1 謹防某些強制插件

蘋果和Adobe之間最近的摩擦讓我們認識到，依賴完全封閉的第三方插件創(chuàng)建網(wǎng)站最終會導致一些嚴重的后果。微軟似乎要重蹈這樣的錯誤，網(wǎng)站越來越多的依賴Silverlight。

我瀏覽微軟的站點準備這篇文章的資料是，是經常受到彈出窗口的騷擾，通知我系統(tǒng)沒有安裝Silverlight因此不能用原本的方式瀏覽這些網(wǎng)頁。我的疑問是，“為什么要走這條路呢？” 特別是對于一些簡單的幻燈片效果的話，可以用的技術遍地都是。誠然，這是微軟自己的Silverlight，所以從良好的商業(yè)意識出發(fā)要支持它，但這并不意味著加入他們就是最好的選擇。

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

#2 注意分辨率

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

撥號上網(wǎng)用戶數(shù)量已經逐年減少，可接受的圖像尺寸已經越來越大。不過這也不意味著你可以不用再注意盡量把有必要小尺寸的圖片尺寸弄小，但現(xiàn)在這里，設計的分量變得這么重，分辨率過小會大大降低了網(wǎng)站的外觀質量，圖片變得弄巧成拙！

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

#3 組織凌亂

有時你按照常規(guī)的設計規(guī)則，到最后還是有些東西似乎視覺欠佳。瀏覽微軟的網(wǎng)站我就遇到很多這樣的頁面，例如下面這個，盡管嘗試使用了基于排列的組織，看起來還是那么凌亂。

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

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

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

#4 矛盾

從Microsoft.com開始，打開了龐大的導航下拉菜單，選擇站點不同地方訪問，你會發(fā)現(xiàn)，無論哪個鏈接，你點擊出來的頁面相比主頁是相當不同，即使在同一個下拉菜單出來的頁面都是如此大差別。

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

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

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

#5 剪貼畫中心的設計

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

上面這些從微軟網(wǎng)頁拿來的例子讓我感到雞皮疙瘩，尤其是那個丑陋的“Beginner Developer” 標志。我搞不懂一個回力標為什么要攻擊一個神奇的植物，懸浮著顯示器是協(xié)助攻擊還是逃離現(xiàn)場？我所知道的是，視覺傳達在這里是一團糟。

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

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

#6 文本對齊與溢出

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

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

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

#7 缺乏對齊

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

如果你熟悉基本的設計理論，你知道，學習貫徹穩(wěn)固一致的路線是優(yōu)秀的網(wǎng)頁布局的關鍵。如上圖所示網(wǎng)站的左，中，右的視覺對齊奇怪的混合，聯(lián)結頂部留出的不尷不尬的空白，為內容信息呈現(xiàn)了一個怪異視覺流。

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

#8 廣告雜亂

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

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

有一個事實就是，現(xiàn)在大多數(shù)網(wǎng)民都學會了辨認，忽略甚至可能反感橫幅廣告。這并不是說，這種類型的廣告在適當?shù)哪繕撕驮O計下也沒有效果，更不是說微軟用戶根本不去點擊，我實在覺得可疑的是，就沒有更好的處理辦法了么？

如你所見，微軟網(wǎng)站如果要導航用戶到他們的移動電話和其他項目，簡單的方法就是設置了一個混亂，非標準（智能設計）的廣告系統(tǒng)貫穿整個網(wǎng)站。不過，似乎將廣告內容整合到網(wǎng)站一體，隨著用戶的關注，會有一個很不錯的點擊率。

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

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

#9 缺少留白的喘息空間

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

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

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

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

#10 未充分利用人才

盡管上述關于微軟網(wǎng)頁設計的負面評價很多，我還是驚喜地發(fā)現(xiàn)，他們其實也有不少網(wǎng)站和網(wǎng)頁看起來很漂亮迷人。

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

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

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

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

思考總結

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

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

我發(fā)現(xiàn)，世界各地在家里辦公的設計師中，要找到比坐在大公司大桌子前的設計師更優(yōu)秀的實在很容易。 你要享受這樣的事實：你不必去協(xié)調和控制數(shù)百個設計師的工作質量。盡量運用你擁有的少量資源結合你個人天馬行空無邊無際的創(chuàng)意和動力，去創(chuàng)造一些優(yōu)美的功能強的設計，創(chuàng)造一些網(wǎng)絡上最優(yōu)秀的站點。

來源：??designshack

編譯：MazingTech