項目範圍和(hé)規模各不相同，他們帶來(lái)的挑戰各不相同一樣。作(zuò)為(wèi)一個(gè)獨立的網頁設計(jì)師(shī)，我最大(dà)的職責就是負責FlashDen。随着成千上(shàng)萬的活動用戶聊天，上(shàng)傳和(hé)購物，網站(zhàn)處理(lǐ)着大(dà)額的金錢(qián)和(hé)巨大(dà)的流量。設計(jì)，重構，維護和(hé)開(kāi)發團隊的工作(zuò)給了我一些(xiē)能使事情變得(de)更容易的用用的...

　　項目範圍和(hé)規模各不相同，他們帶來(lái)的挑戰各不相同一樣。作(zuò)為(wèi)一個(gè)獨立的網頁設計(jì)師(shī)，我最大(dà)的職責就是負責FlashDen。随着成千上(shàng)萬的活動用戶聊天，上(shàng)傳和(hé)購物，網站(zhàn)處理(lǐ)着大(dà)額的金錢(qián)和(hé)巨大(dà)的流量。

　　設計(jì)，重構，維護和(hé)開(kāi)發團隊的工作(zuò)給了我一些(xiē)能使事情變得(de)更容易的用用的見解和(hé)技(jì)巧。而且，就在昨天，我們開(kāi)始了對網站(zhàn)最大(dà)的一次重構，着看上(shàng)去是一次很(hěn)好的機會(huì)來(lái)記錄我最有(yǒu)用的7個(gè)秘訣。

　　1. 可(kě)維護的設計(jì)和(hé)代碼

　　我給的第一條也是最條一條秘訣是設計(jì)站(zhàn)點保證可(kě)以輕松維護。很(hěn)多(duō)時(shí)候，當你(nǐ)設計(jì)一個(gè)站(zhàn)點，你(nǐ)可(kě)能為(wèi)了美學犧牲一些(xiē)東西。例如，你(nǐ)可(kě)能使用一個(gè)圖片而文字或者樣式就可(kě)以應付。或者你(nǐ)可(kě)能故意使用一個(gè)沒有(yǒu)空(kōng)間(jiān)縮放的菜單結構。當網站(zhàn)變大(dà)時(shí)，這将将成為(wèi)一個(gè)非常糟糕的設計(jì)。

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

　　可(kě)維護性的另一面是考慮站(zhàn)點将會(huì)怎樣成長和(hé)變化。比如，當一個(gè)新頁面增加時(shí)，它到哪裏去?我一直想要一個(gè)橫向的導航欄，但(dàn)是經過一些(xiē)嘗試，我們限制(zhì)地使用了加入子欄目的垂直的導航欄，從而加入一個(gè)标簽結構到頁面來(lái)保證相關的頁面能被歸類到一起。我不敢說這是世界上(shàng)最好的導航欄，但(dàn)是它肯定能夠讓我們不用重新設計(jì)在一個(gè)新的節點加入網站(zhàn)的時(shí)候。

　　所以當你(nǐ)在設計(jì)大(dà)型站(zhàn)點時(shí)候，設法讓它變得(de)簡單，你(nǐ)會(huì)為(wèi)此而感到高(gāo)興的!

2. 找出你(nǐ)的用戶群和(hé)任務

　　大(dà)型網站(zhàn)網站(zhàn)和(hé)小(xiǎo)型站(zhàn)點的最大(dà)一個(gè)區(qū)别就是使用網站(zhàn)的不同用戶類型的數(shù)量。例如在FlashDen上(shàng)，有(yǒu)買家(jiā)、作(zuò)家(jiā)、訪客、管理(lǐ)員和(hé)會(huì)員。每個(gè)用戶組都有(yǒu)他們各自不同的目标和(hé)任務。有(yǒu)時(shí)候他們的任務重疊，但(dàn)是他們有(yǒu)很(hěn)大(dà)的不同。

　　一個(gè)地方的用戶任務在相互對立的觀點最好的例子是在一個(gè)網頁。網站(zhàn)上(shàng)沒有(yǒu)任何一個(gè)地方不銜接的每個(gè)用戶組，并在其他地方是如此的重要，以确保每個(gè)人(rén)都會(huì)有(yǒu)他們想要的。當然，你(nǐ)要小(xiǎo)心，在服務一個(gè)用戶組你(nǐ)不忽略另一個(gè)。

　　在這次最新一次FlashDen重新設計(jì)時(shí)候，我所作(zuò)工作(zuò)最大(dà)的地方是主頁。我做(zuò)的第一件事情是給自己列出每個(gè)用戶組需要做(zuò)的事情：

　　買家(jiā) - 在FlashDen上(shàng)購買文件的人(rén)

　　浏覽項目，搜索，訪問他們的個(gè)人(rén)主頁，存款，學習使用網站(zhàn)(新買家(jiā))

　　作(zuò)者 - 在FlashDen上(shàng)賣商品的人(rén)

　　與其他會(huì)員聊天，在主頁上(shàng)展示他們項目的功能，了解網站(zhàn)的新聞，快速的獲取他們的投資搭配和(hé)收益

　　新訪客 - 潛在的買家(jiā)/作(zuò)者/會(huì)員，剛到站(zhàn)點的人(rén)

　　快速了解到站(zhàn)點是幹嘛的，起步教程，查看不同類别的文件和(hé)價格

　　會(huì)員 - 不是真正的買家(jiā)或作(zuò)者，而是在社區(qū)中活躍

　　和(hé)其他會(huì)員聊天，查看站(zhàn)點新聞，浏覽文件

　　管理(lǐ)員/審稿人(rén) - 我們的工作(zuò)人(rén)員，管理(lǐ)文件的批準，主持論壇，參與大(dà)部分活動

　　快速批準文件，查看最新論壇主題，添加站(zhàn)點新聞

　　當你(nǐ)知道(dào)不同的用戶群體(tǐ)想要做(zuò)什麽，那(nà)麽你(nǐ)可(kě)以設計(jì)一個(gè)網頁，解決了他們所有(yǒu)的需要。不用說，這是随着用戶組和(hé)任務數(shù)量指數(shù)級增加的困難的任務。在該網站(zhàn)的其他網頁，你(nǐ)會(huì)經常為(wèi)部分用戶組而苦惱，而在主頁上(shàng)，他們卻又都集中在一起。不用懷疑，主頁是你(nǐ)設計(jì)一個(gè)網站(zhàn)時(shí)候最重要的一項工作(zuò)。

　　在你(nǐ)解決不同需求之前，你(nǐ)需要先考慮用戶群。為(wèi)了做(zuò)到這個(gè)，你(nǐ)需要了解該網站(zhàn)是要實現的目标。

3. 了解網站(zhàn)目标

　　雖然每個(gè)用戶組會(huì)很(hěn)自然地認為(wèi)他們是最重要的，但(dàn)是你(nǐ)應該根據他們的優先度來(lái)判别站(zhàn)點要實現的目标。比如在FlashDen上(shàng)，我們給候補人(rén)員列出下面幾條結論：

　　該網站(zhàn)的首要任務是為(wèi)買家(jiā)服務。為(wèi)買家(jiā)服務可(kě)以帶來(lái)不斷的收入，同時(shí)也可(kě)以為(wèi)作(zuò)者群服務。

　　讓遊客更快的了解網站(zhàn)進而成為(wèi)會(huì)員也是至關重要的。FlashDen還(hái)處在一個(gè)比較新興的市場(chǎng)，不斷有(yǒu)新競争對手出現，如何将注冊會(huì)員變成買家(jiā)或者作(zuò)者是相當重要的。

　　創作(zuò)者是FlashDen的核心部分，他們也是非常重要，和(hé)其他用戶群不同的是，他們是網站(zhàn)堅定的擁護者。

　　注冊會(huì)員雖然沒有(yǒu)創作(zuò)者或者買家(jiā)這麽重要，但(dàn)是他們也在為(wèi)周邊的社群作(zuò)出貢獻。

　　作(zuò)為(wèi)雇員，管理(lǐ)員/審稿人(rén)是相對最不重要的。

　　因此，從以上(shàng)所說可(kě)以得(de)出結論，網站(zhàn)服務的的用戶需求優先順序：訪客>買家(jiā)>作(zuò)者>成員“>管理(lǐ)員。

　　認識你(nǐ)的網站(zhàn)正在努力實現的卻是最終用戶線程的縫制(zhì)任務一起，并告訴你(nǐ)什麽你(nǐ)應該嘗試把頁面上(shàng)。

　　理(lǐ)解你(nǐ)的網站(zhàn)目的可(kě)以把你(nǐ)的所要作(zuò)的任務貫穿在一起，并且能告訴你(nǐ)應該在頁面上(shàng)放些(xiē)什麽東西。在每個(gè)關鍵性頁面你(nǐ)要能區(qū)分識别出用戶組、任務和(hé)優先級别。對于重要的頁面比如主頁我慎重的在紙上(shàng)設計(jì)，而一些(xiē)小(xiǎo)的頁面則是在腦(nǎo)子裏面思考一下。

4. 設計(jì)，精煉，精煉，精煉 …

　　在你(nǐ)找到你(nǐ)的用戶組别，任務，網站(zhàn)目标，優先級别等等之後，到了設計(jì)的時(shí)間(jiān)了!這是至關重要的步驟，因為(wèi)在實際操作(zuò)中，這一步可(kě)以大(dà)幅降低(dī)一些(xiē)将必要的返工設計(jì)工作(zuò)量。每當我剛開(kāi)始設計(jì)并沒有(yǒu)真正分析第一大(dà)網站(zhàn)，我已不可(kě)避免地要大(dà)量的返工，甚至整個(gè)屏幕交互界面。

　　很(hěn)多(duō)設計(jì)師(shī)喜歡在這點用線框，這可(kě)以簡單地用線條和(hé)框勾勒大(dà)約內(nèi)容應該顯示的地方。我個(gè)人(rén)更喜歡一開(kāi)始用Photoshop，因為(wèi)我速度不夠快，這樣能讓我細緻地看到細節的改變。我也認為(wèi)詳細細節信息設計(jì)比在紙上(shàng)顯示更直觀。簡單地改變顔色和(hé)背景顔色可(kě)以使整個(gè)網頁頁面元素立馬看上(shàng)去更為(wèi)重要。

　　一旦你(nǐ)有(yǒu)一個(gè)怎樣的信息需要共同努力粗略的想法，你(nǐ)應該拿(ná)出一個(gè)工作(zuò)的設計(jì)，一般是确定，然後再精煉，精煉，精煉。我經常會(huì)起草5到6相同的外觀，然後在之上(shàng)嘗試不同類型、大(dà)小(xiǎo)、圖像，布局的改動，背景等等，看看你(nǐ)對它的直觀感受。

　　不管你(nǐ)覺得(de)第一個(gè)布局有(yǒu)多(duō)好，我可(kě)以保證，在花(huā)費一段時(shí)間(jiān)進行(xíng)數(shù)次版本升級之後，你(nǐ)會(huì)發現了你(nǐ)原來(lái)的版本不是和(hé)你(nǐ)最初想到的那(nà)麽好。有(yǒu)時(shí)你(nǐ)甚至抛棄整個(gè)設計(jì)并重新開(kāi)始。而如果你(nǐ)有(yǒu)一個(gè)良好的基礎，然後精煉細化能讓你(nǐ)有(yǒu)一個(gè)漂亮的成果。

 

　　5. 聽(tīng)取别人(rén)的意見，自己下最後的主意

　　任何一個(gè)大(dà)型的工作(zuò)中，你(nǐ)都會(huì)被其他很(hěn)多(duō)意見所影(yǐng)響。在開(kāi)始FlashDen工作(zuò)之前，我曾經與各種網站(zhàn)設計(jì)公司合作(zuò)。期間(jiān)我也有(yǒu)不幸設計(jì)一些(xiē)大(dà)型保險公司和(hé)一些(xiē)政府組織。我說不幸，因為(wèi)當你(nǐ)到該客戶和(hé)牽扯很(hěn)多(duō)利益的人(rén)打交道(dào)，同時(shí)在許多(duō)當時(shí)還(hái)不清楚真正的決策權的情況下作(zuò)出錯誤決策。這會(huì)導緻無休止的會(huì)議，無窮無盡的變化，并極大(dà)的混淆你(nǐ)的眼光。

　　不管是什麽用戶，真正重要的隻是得(de)到他們的意見。在大(dà)多(duō)數(shù)情況下，他們比你(nǐ)更知道(dào)了很(hěn)多(duō)與業務有(yǒu)關的事。但(dàn)願他們比你(nǐ)還(hái)了解用戶，這些(xiē)知識将能夠向你(nǐ)提供建設性的意見。

　　得(de)到與你(nǐ)一起工作(zuò)的開(kāi)發團隊的意見也同樣重要。在FlashDen我們很(hěn)幸運，因為(wèi)有(yǒu)兩個(gè)開(kāi)發者在用戶界面和(hé)可(kě)用性設計(jì)方面經驗豐富。随着他們的投入，和(hé)其他團隊成員，向最終的産品提出了很(hěn)多(duō)不同的想法。

　　但(dàn)到最後，就是你(nǐ)這個(gè)設計(jì)專家(jiā)作(zuò)出最後決定的時(shí)候了。如果你(nǐ)有(yǒu)一個(gè)難對付的客戶這可(kě)能會(huì)非常棘手，因為(wèi)這些(xiē)客戶往往認為(wèi)他們應該作(zuò)最後的決策。如果是這樣的話(huà)，你(nǐ)需要想辦法向他們解釋，灌輸并且展示出你(nǐ)的選擇會(huì)帶來(lái)最好的收益。;有(yǒu)時(shí)候硬着頭皮把客戶的意見接受，并作(zuò)為(wèi)項目中的一個(gè)長期建設性功能。

6. 為(wèi)将來(lái)做(zuò)組織

　　當您為(wèi)一個(gè)大(dà)網站(zhàn)編碼設計(jì)時(shí)，它是真正重要的是反複思考未來(lái)的變化。如何管理(lǐ)您的文件和(hé)文件夾将極大(dà)地影(yǐng)響之後的工作(zuò)。例如最近我們決定建立一個(gè)着重音(yīn)樂的FlashDen的姊妹網站(zhàn)，即AudioJungle。為(wèi)了簡化，這個(gè)網站(zhàn)是将使用相同的HTML，隻是改變樣式來(lái)使它看起來(lái)像一個(gè)不同的網站(zhàn)。這裏有(yǒu)一些(xiē)事情要記住：

　　整理(lǐ)一個(gè)良好的文件夾結構

　　腳本，樣式表，界面的圖片，圖片內(nèi)容，等等，都需要分開(kāi)存放。如果一個(gè)小(xiǎo)網站(zhàn)，你(nǐ)也許可(kě)以把這些(xiē)東西雜糅到一起，但(dàn)在大(dà)型站(zhàn)點中，找到你(nǐ)需要的內(nèi)容變得(de)更為(wèi)重要。

　　給你(nǐ)的文件使用有(yǒu)規則、良好的命名規範

　　沒有(yǒu)什麽比按名字“gd_l3.jpg”尋找一塊圖片更為(wèi)糟糕。你(nǐ)怎樣做(zuò)即基本是個(gè)人(rén)的事，但(dàn)我覺得(de)使用通(tōng)用命名描述性文件名的前綴會(huì)有(yǒu)更大(dà)的幫助。比如：我可(kě)能會(huì)給頭部的每張圖片加上(shàng)前綴'header_'，每一個(gè)背景加上(shàng)'bg_'，頭部菜單中的背景可(kě)能稱為(wèi)'header_bg_menu.jpg'。前綴有(yǒu)一個(gè)好處，當您的文件按名稱排序，他們都出現在一起。

　　使用Subversion

　　這是被我們的開(kāi)發人(rén)員逼得(de)，但(dàn)幸虧我們用了它!Subversion可(kě)以跟蹤文件和(hé)檔案的變更，同時(shí)可(kě)以防止覆蓋其他設計(jì)者/開(kāi)發者在同一個(gè)項目中的文件。這需要一些(xiē)時(shí)間(jiān)來(lái)适應，但(dàn)即使沒有(yǒu)開(kāi)發者使用它的原因，在HTML / CSS的設計(jì)上(shàng)用它也是值得(de)的。還(hái)不知道(dào)Subversion?趕緊去使用吧(ba)。

　　在你(nǐ)寫HTML和(hé)CSS深入思考寫法

　　很(hěn)容易寫出垃圾HTML和(hé)CSS代碼，而且很(hěn)難清除它們來(lái)獲得(de)原先版本。經過4個(gè)重設計(jì)，我仍然使用很(hěn)多(duō)相同的CSS文件，必須規劃地清理(lǐ)不再使用的或者帶來(lái)混淆布局定義CSS類。通(tōng)過大(dà)量的意見，甚至可(kě)能是多(duō)個(gè)樣式表，并确保你(nǐ)有(yǒu)良好的命名風格!

　　早點開(kāi)始浏覽器(qì)差異兼容工作(zuò)

　　我在FlashDen這方面的工作(zuò)聽(tīng)失誤的，至今我們已經為(wèi)此付出了很(hěn)大(dà)的代價。我最初的布局設計(jì)在IE7上(shàng)，直到我們完成整個(gè)網站(zhàn)才發現忽略了IE6。之後我們已經加入IE浏覽器(qì)條件式，和(hé)CSS Hack和(hé)其他解決方法。在你(nǐ)建立一個(gè)龐大(dà)的站(zhàn)點時(shí)候，在頁面上(shàng)隻有(yǒu)少(shǎo)量元素時(shí)候可(kě)以更輕松的處理(lǐ)浏覽器(qì)兼容性，，所以不要重蹈覆轍!

7. 确保可(kě)以簡單的擴展你(nǐ)的樣式表

　　網站(zhàn)越大(dà)，設計(jì)師(shī)就越有(yǒu)可(kě)能看到或修改每一個(gè)單獨頁面。如果你(nǐ)是一個(gè)大(dà)型網站(zhàn)上(shàng)唯一設計(jì)師(shī) - 比如我 - 你(nǐ)可(kě)能不想在每個(gè)頁面上(shàng)重定義。因此，多(duō)花(huā)精力在樣式表上(shàng)，可(kě)以通(tōng)過默認的屬性讓頁面看起來(lái)不錯。

　　确保你(nǐ)定義了，等元素的默認樣式。

　　這樣的頁面可(kě)以自動呈現的不錯。如果你(nǐ)想指望别人(rén)做(zuò)這樣的事情，那(nà)麽不可(kě)避免的會(huì)和(hé)其他頁面産生(shēng)差異

　　創建可(kě)讓開(kāi)發人(rén)員重複使用的元素

　　比如在FlashDen上(shàng)我們有(yǒu)一個(gè)CSS表類稱為(wèi)“general_table”，可(kě)以确保一個(gè)不錯的填充數(shù)據時(shí)候使用的樣式。當我有(yǒu)機會(huì)設計(jì)網頁樣式時(shí)候，我可(kě)以使用個(gè)性的表和(hé)數(shù)據高(gāo)亮呈現的類型，但(dàn)是很(hěn)少(shǎo)會(huì)有(yǒu)開(kāi)發人(rén)員吧(ba)頁面制(zhì)作(zuò)成全能的樣式去使用。

　　請(qǐng)确保您的網頁布局有(yǒu)一個(gè)不錯的結構，即使他裏面隻有(yǒu)文字。

 

　　總是會(huì)有(yǒu)些(xiē)網頁還(hái)沒能往裏面添加圖像，可(kě)能看起來(lái)有(yǒu)點沉悶。通(tōng)過使用諸如标題樣式，工具條等等，你(nǐ)可(kě)以确保他們也很(hěn)美觀，并且有(yǒu)一定的視(shì)覺風格。有(yǒu)關FlashDen在大(dà)多(duō)數(shù)例子中，我們文本塊總結如下：

　　默認情況下，文字外面包圍着一個(gè)漂亮的邊框和(hé)标題。這樣很(hěn)容易和(hé)開(kāi)發人(rén)員協調工作(zuò)，文字和(hé)表現有(yǒu)了不錯的分離，使之看起來(lái)更具可(kě)讀性。我們同時(shí)也有(yǒu)一個(gè)側邊欄組件，僅僅把文字內(nèi)容額外包起來(lái)，但(dàn)是這能使網頁看起來(lái)更加直觀。

　　經過設計(jì)師(shī)的設計(jì)，每一個(gè)頁面基本都是優化過的，但(dàn)是他們可(kě)能不是那(nà)麽健壯，它仍然看起來(lái)很(hěn)專業和(hé)統一。

　　你(nǐ)的觀點呢

　　所以這些(xiē)都是我的秘訣，如果你(nǐ)在更大(dà)的站(zhàn)點從事你(nǐ)的工作(zuò)，發表你(nǐ)的評論吧(ba)!

轉自：建站(zhàn)學  http://www.jzxue.com/jianzhanzhinan/jianzhanjingyan/201008/04-4225_8.html

重慶中技(jì)互聯網信息資訊有(yǒu)限公司
重慶網站(zhàn)建設事業部官方網：www.zjcoo.com
電(diàn)子商務建站(zhàn)事業部咨詢電(diàn)話(huà)：023-67742189
門(mén)戶網站(zhàn)品牌加盟推廣電(diàn)話(huà)：023-67742189
7*24小(xiǎo)時(shí)服務電(diàn)話(huà)：023-67742189
媒體(tǐ)合作(zuò)電(diàn)話(huà)：13883323406
投資合作(zuò)電(diàn)話(huà)：13896068183
QQ及郵件地址：446515345@qq.com