7條大型網站設計和維護的關鍵技巧

文中最後一段代碼Demo在譯言的編輯器中轉換有問題，可以移步至原文或者我博文*********

專案範圍和規模各不相同，他們帶來的挑戰各不相同一樣。 作為一個獨立的網頁設計師，我最大的職責就是負責FlashDen。 隨著成千上萬的活動使用者聊天，上傳和購物，網站處理著大額的金錢和巨大的流量。

設計，重構，維護和開發團隊的工作給了我一些能使事情變得更容易的用用的見解和技巧。 而且，就在昨天，我們開始了對網站最大的一次重構，著看上去是一次很好的機會來記錄我最有用的7個秘訣。

1. 可維護的設計和代碼

我給的第一條也是最條一條秘訣是設計網站保證可以輕鬆維護。 很多時候，當你設計一個網站，你可能為了美學犧牲一些東西。 例如，你可能使用一個圖片而文字或者樣式就可以應付。 或者你可能故意使用一個沒有空間縮放的功能表結構。 當網站變大時，這將將成為一個非常糟糕的設計。

當我兩年前建成FlashDen的第一個版本時，我使用圖片按鈕。 他們看起來很漂亮，但同時我被100多個不同的按鈕圖片庫拖累著，更談不上修改圖片了。 之後在接下來的幾個月中，當一個開發者需要一個新按鈕時候他們向我要一個新圖片。 不用說，我學到這個教訓很快，我們切換到一個單獨的按鈕類，雖然看上去不是很好，但是這種情況更能安心。

可維護性的另一面是考慮網站將會怎樣成長和變化。 比如，當一個新頁面增加時，它到哪裡去？ 我一直想要一個橫向的巡覽列，但是經過一些嘗試，我們限制地使用了加入子欄目的垂直的巡覽列，從而加入一個標籤結構到頁面來保證相關的頁面能被歸類到一起。 我不敢說這是世界上最好的巡覽列，但是它肯定能夠讓我們不用重新設計在一個新的節點加入網站的時候。

所以當你在設計大型網站時候，設法讓它變得簡單，你會為此而感到高興的！

2. 找出你的使用者群和任務

大型網站網站和小型網站的最大一個區別就是使用網站的不同使用者類型的數量。 例如在FlashDen上，有買家、作家、訪客、管理員和會員。 每個使用者組都有他們各自不同的目標和任務。 有時候他們的任務重疊，但是他們有很大的不同。

一個地方的使用者任務在相互對立的觀點最好的例子是在一個網頁。 網站上沒有任何一個地方不銜接的每個使用者組，並在其他地方是如此的重要，以確保每個人都會有他們想要的。 當然，你要小心，在服務一個使用者組你不忽略另一個。

在這次最新一次FlashDen重新設計時候，我所作工作最大的地方是主頁。 我做的第一件事情是給自己列出每個使用者組需要做的事情：

買家 – 在FlashDen上購買檔的人


流覽專案，搜索，訪問他們的個人主頁，存款，學習使用網站（新買家）作者 – 在FlashDen上賣商品的人


與其他會員聊天，在主頁上展示他們專案的功能，瞭解網站的新聞，快速的獲取他們的投資搭配和收益新訪客 – 潛在的買家/作者/會員，剛到網站的人


快速瞭解到網站是幹嘛的，起步教程，查看不同類別的檔和價格會員 – 不是真正的買家或作者，而是在社區中活躍


和其他會員聊天，查看網站新聞，流覽檔管理員/審稿人 – 我們的工作人員，管理檔的批准，主持論壇，參與大部分活動


快速批准檔，查看最新論壇主題，添加網站新聞

當你知道不同的使用者群體想要做什麼，那麼你可以設計一個網頁，解決了他們所有的需要。 不用說，這是隨著使用者組和任務數量指數級增加的困難的任務。 在該網站的其他網頁，你會經常為部分使用者組而苦惱，而在主頁上，他們卻又都集中在一起。 不用懷疑，主頁是你設計一個網站時候最重要的一項工作。

在你解決不同需求之前，你需要先考慮使用者群。 為了做到這個，你需要瞭解該網站是要實現的目標。

3. 瞭解網站目標

雖然每個使用者組會很自然地認為他們是最重要的，但是你應該根據他們的優先度來判別網站要實現的目標。 比如在FlashDen上，我們給候補人員列出下面幾條結論：

該網站的首要任務是為買家服務。 為買家服務可以帶來不斷的收入，同時也可以為作者群服務。 讓遊客更快的瞭解網站進而成為會員也是至關重要的。 FlashDen還處在一個比較新興的市場，不斷有新競爭對手出現，如何將註冊會員變成買家或者作者是相當重要的。 創作者是FlashDen的核心部分，他們也是非常重要，和其他使用者群不同的是，他們是網站堅定的擁護者。 註冊會員雖然沒有創作者或者買家這麼重要，但是他們也在為周邊的社群作出貢獻。 作為雇員，管理員/審稿人是相對最不重要的。

因此，從以上所說可以得出結論，網站服務的的使用者需求優先順序：訪客>買家>作者>成員「>管理員。

認識你的網站正在努力實現的卻是最終使用者執行緒的縫製任務一起，並告訴你什麼你應該嘗試把頁面上。

理解你的網站目的可以把你的所要作的任務貫穿在一起，並且能告訴你應該在頁面上放些什麼東西。 在每個關鍵性頁面你要能區分識別出使用者組、任務和優先順序別。 對於重要的頁面比如主頁我慎重的在紙上設計，而一些小的頁面則是在腦子裡面思考一下。

4. 設計，精煉，精煉，精煉 ...

在你找到你的使用者組別，任務，網站目標，優先順序別等等之後，到了設計的時間了！ 這是至關重要的步驟，因為在實際操作中，這一步可以大幅降低一些將必要的返工設計工作量。 每當我剛開始設計並沒有真正分析第一大網站，我已不可避免地要大量的返工，甚至整個螢幕交互介面。

很多設計師喜歡在這點用線框，這可以簡單地用線條和框勾勒大約內容應該顯示的地方。 我個人更喜歡一開始用Photoshop，因為我速度不夠快，這樣能讓我細緻地看到細節的改變。 我也認為詳細細節資訊設計比在紙上顯示更直觀。 簡單地改變顏色和背景顏色可以使整個網頁頁面元素立馬看上去更為重要。

一旦你有一個怎樣的資訊需要共同努力粗略的想法，你應該拿出一個工作的設計，一般是確定，然後再精煉，精煉，精煉。 我經常會起草5到6相同的外觀，然後在之上嘗試不同類型、大小、圖像，佈局的改動，背景等等，看看你對它的直觀感受。

不管你覺得第一個佈局有多好，我可以保證，在花費一段時間進行數次版本升級之後，你會發現了你原來的版本不是和你最初想到的那麼好。 有時你甚至拋棄整個設計並重新開始。 而如果你有一個良好的基礎，然後精煉細化能讓你有一個漂亮的成果。

5. 聽取別人的意見，自己下最後的主意

任何一個大型的工作中，你都會被其他很多意見所影響。 在開始FlashDen工作之前，我曾經與各種網站設計公司合作。 期間我也有不幸設計一些大型保險公司和一些政府組織。 我說不幸，因為當你到該客戶和牽扯很多利益的人打交道，同時在許多當時還不清楚真正的決策權的情況下作出錯誤決策。 這會導致無休止的會議，無窮無盡的變化，並極大的混淆你的眼光。

不管是什麼使用者，真正重要的只是得到他們的意見。 在大多數情況下，他們比你更知道了很多與業務有關的事。 但願他們比你還瞭解使用者，這些知識將能夠向你提供建設性的意見。

得到與你一起工作的開發團隊的意見也同樣重要。 在FlashDen我們很幸運，因為有兩個開發者在使用者介面和可用性設計方面經驗豐富。 隨著他們的投入，和其他團隊成員，向最終的產品提出了很多不同的想法。

但到最後，就是你這個設計專家作出最後決定的時候了。 如果你有一個難對付的客戶這可能會非常棘手，因為這些客戶往往認為他們應該作最後的決策。 如果是這樣的話，你需要想辦法向他們解釋，灌輸並且展示出你的選擇會帶來最好的收益。;有時候硬著頭皮把客戶的意見接受，並作為專案中的一個長期建設性功能。

6. 為將來做組織

當您為一個大網站編碼設計時，它是真正重要的是反復思考未來的變化。 如何管理您的檔和資料夾將極大地影響之後的工作。 例如最近我們決定建立一個著重音樂的FlashDen的姊妹網站，即AudioJungle。 為了簡化，這個網站是將使用相同的HTML，只是改變樣式來使它看起來像一個不同的網站。 這裡有一些事情要記住：

整理一個良好的資料夾結構


腳本，樣式表，介面的圖片，圖片內容，等等，都需要分開存放。 如果一個小網站，你也許可以把這些東西雜糅到一起，但在大型網站中，找到你需要的內容變得更為重要。 給你的檔使用有規則、良好的命名規範


沒有什麼比按名字「gd_l3.jpg」尋找一塊圖片更為糟糕。 你怎樣做即基本是個人的事，但我覺得使用通用命名描述性檔案名的首碼會有更大的説明。 比如：我可能會給頭部的每張圖片加上首碼’header_’，每一個背景加上’bg_’，頭部功能表中的背景可能稱為’header_bg_menu.jpg’。 首碼有一個好處，當您的檔按名稱排序，他們都出現在一起。 使用Subversion


這是被我們的開發人員逼得，但幸虧我們用了它！ Subversion可以追蹤檔案和檔案的變更，同時可以防止覆蓋其他設計者/開發者在同一個專案中的檔。 這需要一些時間來適應，但即使沒有開發者使用它的原因，在HTML / CSS的設計上用它也是值得的。 還不知道Subversion？ 趕緊去使用吧。 在你寫HTML和CSS深入思考寫法


很容易寫出垃圾HTML和CSS代碼，而且很難清除它們來獲得原先版本。 經過4個重設計，我仍然使用很多相同的CSS檔，必須規劃地清理不再使用的或者帶來混淆佈局定義CSS類。 通過大量的意見，甚至可能是多個樣式表，並確保你有良好的命名風格！ 早點開始瀏覽器差異相容工作


我在FlashDen這方面的工作聽失誤的，至今我們已經為此付出了很大的代價。 我最初的佈局設計在IE7上，直到我們完成整個網站才發現忽略了IE6。 之後我們已經加入IE瀏覽器條件式，和CSS Hack和其他解決方法。 在你建立一個龐大的網站時候，在頁面上只有少量元素時候可以更輕鬆的處理瀏覽器相容性，，所以不要重蹈覆轍！ 7. 確保可以簡單的擴展你的樣式表

網站越大，設計師就越有可能看到或修改每一個單獨頁面。 如果你是一個大型網站上唯一設計師 – 比如我 – 你可能不想在每個頁面上重定義。 因此，多花精力在樣式表上，可以通過預設的屬性讓頁面看起來不錯。

確保你定義了，等元素的預設樣式。


這樣的頁面可以自動呈現的不錯。 如果你想指望別人做這樣的事情，那麼不可避免的會和其他頁面產生差異

創建可讓開發人員重複使用的元素


比如在FlashDen上我們有一個CSS表類稱為「general_table」，可以確保一個不錯的填充資料時候使用的樣式。 當我有機會設計網頁樣式時候，我可以使用個性的表和資料高亮呈現的類型，但是很少會有開發人員吧頁面製作成全能的樣式去使用。

請確保您的網頁佈局有一個不錯的結構，即使他裡面只有文字。


總是會有些網頁還沒能往裡面添加圖像，可能看起來有點沉悶。 通過使用諸如標題樣式，工具條等等，你可以確保他們也很美觀，並且有一定的視覺風格。 有關FlashDen在大多數例子中，我們文字區塊總結如下：

Heading

Content

預設情況下，文字外面包圍著一個漂亮的邊框和標題。 這樣很容易和開發人員協調工作，文字和表現有了不錯的分離，使之看起來更具可讀性。 我們同時也有一個側邊欄元件，僅僅把文字內容額外包起來，但是這能使網頁看起來更加直觀。

經過設計師的設計，每一個頁面基本都是優化過的，但是他們可能不是那麼健壯，它仍然看起來很專業和統一。

你的觀點呢

所以這些都是我的秘訣，如果你在更大的網站從事你的工作，發表你的評論吧！

原文出處：7 Crucial Tips for Designing and Maintaining a Large Site | Nettuts+

譯者：alswl