7條大型網站設計和維護的關鍵技巧
項目范圍和規模各不相同，他們帶來的挑戰各不相同一樣。作為一個獨立的網頁設計師，我最大的職責就是負責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. 確保可以簡單的擴展你的樣式表
網站越大，設計師就越有可能看到或修改每一個單獨頁面。如果你是一個大型網站上唯一設計師 – 比如我 – 你可能不想在每個頁面上重定義。因此，多花精力在樣式表上，可以通過默認的屬性讓頁面看起來不錯。
確保你定義了<input>，<strong>等元素的默認樣式。
這樣的頁面可以自動呈現的不錯。如果你想指望別人做<strong class="my_bold">這樣的事情，那么不可避免的會和其他頁面產生差異
創建可讓開發人員重復使用的元素
比如在FlashDen上我們有一個CSS表類稱為“general_table”，可以確保一個不錯的填充數據時候使用的樣式。當我有機會設計網頁樣式時候，我可以使用個性的表和數據高亮呈現的類型，但是很少會有開發人員吧頁面制作成全能的樣式去使用。
請確保您的網頁布局有一個不錯的結構，即使他里面只有文字。
總是會有些網頁還沒能往里面添加圖像，可能看起來有點沉悶。通過使用諸如標題樣式，工具條等等，你可以確保他們也很美觀，并且有一定的視覺風格。有關FlashDen在大多數例子中，我們文本塊總結如下：
- <fieldset>
- <legend>Heading</legend>
- Content
- </fieldset>
默認情況下，文字外面包圍著一個漂亮的邊框和標題。這樣很容易和開發人員協調工作，文字和表現有了不錯的分離，使之看起來更具可讀性。我們同時也有一個側邊欄組件，僅僅把文字內容額外包起來，但是這能使網頁看起來更加直觀。
經過設計師的設計，每一個頁面基本都是優化過的，但是他們可能不是那么健壯，它仍然看起來很專業和統一。
你的觀點呢
所以這些都是我的秘訣，如果你在更大的站點從事你的工作，發表你的評論吧！
文章來源：http://dddspace.com/2010/07/7-crucial-tips-for-designing-and-maintaining-a-large-site.html
【編輯推薦】
