項目范圍和規(guī)模各不相同，他們帶來的挑戰(zhàn)各不相同一樣。作為一個獨立的網(wǎng)頁設(shè)計師，我最大的職責(zé)就是負責(zé)FlashDen。隨著成千上萬的活動用戶聊天，上傳和購物，網(wǎng)站處理著大額的金錢和巨大的流量。設(shè)計，重構(gòu)，維護和開發(fā)團隊的工作給了我一些能使事情變得更容易的用用的...

　　項目范圍和規(guī)模各不相同，他們帶來的挑戰(zhàn)各不相同一樣。作為一個獨立的網(wǎng)頁設(shè)計師，我最大的職責(zé)就是負責(zé)FlashDen。隨著成千上萬的活動用戶聊天，上傳和購物，網(wǎng)站處理著大額的金錢和巨大的流量。

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

　　1. 可維護的設(shè)計和代碼

　　我給的第一條也是最條一條秘訣是設(shè)計站點保證可以輕松維護。很多時候，當(dāng)你設(shè)計一個站點，你可能為了美學(xué)犧牲一些東西。例如，你可能使用一個圖片而文字或者樣式就可以應(yīng)付。或者你可能故意使用一個沒有空間縮放的菜單結(jié)構(gòu)。當(dāng)網(wǎng)站變大時，這將將成為一個非常糟糕的設(shè)計。

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

　　可維護性的另一面是考慮站點將會怎樣成長和變化。比如，當(dāng)一個新頁面增加時，它到哪里去?我一直想要一個橫向的導(dǎo)航欄，但是經(jīng)過一些嘗試，我們限制地使用了加入子欄目的垂直的導(dǎo)航欄，從而加入一個標(biāo)簽結(jié)構(gòu)到頁面來保證相關(guān)的頁面能被歸類到一起。我不敢說這是世界上最好的導(dǎo)航欄，但是它肯定能夠讓我們不用重新設(shè)計在一個新的節(jié)點加入網(wǎng)站的時候。

　　所以當(dāng)你在設(shè)計大型站點時候，設(shè)法讓它變得簡單，你會為此而感到高興的!

2. 找出你的用戶群和任務(wù)

　　大型網(wǎng)站網(wǎng)站和小型站點的最大一個區(qū)別就是使用網(wǎng)站的不同用戶類型的數(shù)量。例如在FlashDen上，有買家、作家、訪客、管理員和會員。每個用戶組都有他們各自不同的目標(biāo)和任務(wù)。有時候他們的任務(wù)重疊，但是他們有很大的不同。

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

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

　　買家 - 在FlashDen上購買文件的人

　　瀏覽項目，搜索，訪問他們的個人主頁，存款，學(xué)習(xí)使用網(wǎng)站(新買家)

　　作者 - 在FlashDen上賣商品的人

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

　　新訪客 - 潛在的買家/作者/會員，剛到站點的人

　　快速了解到站點是干嘛的，起步教程，查看不同類別的文件和價格

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

　　和其他會員聊天，查看站點新聞，瀏覽文件

　　管理員/審稿人 - 我們的工作人員，管理文件的批準(zhǔn)，主持論壇，參與大部分活動

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

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

　　在你解決不同需求之前，你需要先考慮用戶群。為了做到這個，你需要了解該網(wǎng)站是要實現(xiàn)的目標(biāo)。

3. 了解網(wǎng)站目標(biāo)

　　雖然每個用戶組會很自然地認為他們是最重要的，但是你應(yīng)該根據(jù)他們的優(yōu)先度來判別站點要實現(xiàn)的目標(biāo)。比如在FlashDen上，我們給候補人員列出下面幾條結(jié)論：

　　該網(wǎng)站的首要任務(wù)是為買家服務(wù)。為買家服務(wù)可以帶來不斷的收入，同時也可以為作者群服務(wù)。

　　讓游客更快的了解網(wǎng)站進而成為會員也是至關(guān)重要的。FlashDen還處在一個比較新興的市場，不斷有新競爭對手出現(xiàn)，如何將注冊會員變成買家或者作者是相當(dāng)重要的。

　　創(chuàng)作者是FlashDen的核心部分，他們也是非常重要，和其他用戶群不同的是，他們是網(wǎng)站堅定的擁護者。

　　注冊會員雖然沒有創(chuàng)作者或者買家這么重要，但是他們也在為周邊的社群作出貢獻。

　　作為雇員，管理員/審稿人是相對最不重要的。

　　因此，從以上所說可以得出結(jié)論，網(wǎng)站服務(wù)的的用戶需求優(yōu)先順序：訪客>買家>作者>成員“>管理員。

　　認識你的網(wǎng)站正在努力實現(xiàn)的卻是最終用戶線程的縫制任務(wù)一起，并告訴你什么你應(yīng)該嘗試把頁面上。

　　理解你的網(wǎng)站目的可以把你的所要作的任務(wù)貫穿在一起，并且能告訴你應(yīng)該在頁面上放些什么東西。在每個關(guān)鍵性頁面你要能區(qū)分識別出用戶組、任務(wù)和優(yōu)先級別。對于重要的頁面比如主頁我慎重的在紙上設(shè)計，而一些小的頁面則是在腦子里面思考一下。

4. 設(shè)計，精煉，精煉，精煉 …

　　在你找到你的用戶組別，任務(wù)，網(wǎng)站目標(biāo)，優(yōu)先級別等等之后，到了設(shè)計的時間了!這是至關(guān)重要的步驟，因為在實際操作中，這一步可以大幅降低一些將必要的返工設(shè)計工作量。每當(dāng)我剛開始設(shè)計并沒有真正分析第一大網(wǎng)站，我已不可避免地要大量的返工，甚至整個屏幕交互界面。

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

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

　　不管你覺得第一個布局有多好，我可以保證，在花費一段時間進行數(shù)次版本升級之后，你會發(fā)現(xiàn)了你原來的版本不是和你最初想到的那么好。有時你甚至拋棄整個設(shè)計并重新開始。而如果你有一個良好的基礎(chǔ)，然后精煉細化能讓你有一個漂亮的成果。

 

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

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

　　不管是什么用戶，真正重要的只是得到他們的意見。在大多數(shù)情況下，他們比你更知道了很多與業(yè)務(wù)有關(guān)的事。但愿他們比你還了解用戶，這些知識將能夠向你提供建設(shè)性的意見。

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

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

6. 為將來做組織

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

　　整理一個良好的文件夾結(jié)構(gòu)

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

　　給你的文件使用有規(guī)則、良好的命名規(guī)范

　　沒有什么比按名字“gd_l3.jpg”尋找一塊圖片更為糟糕。你怎樣做即基本是個人的事，但我覺得使用通用命名描述性文件名的前綴會有更大的幫助。比如：我可能會給頭部的每張圖片加上前綴'header_'，每一個背景加上'bg_'，頭部菜單中的背景可能稱為'header_bg_menu.jpg'。前綴有一個好處，當(dāng)您的文件按名稱排序，他們都出現(xiàn)在一起。

　　使用Subversion

　　這是被我們的開發(fā)人員逼得，但幸虧我們用了它!Subversion可以跟蹤文件和檔案的變更，同時可以防止覆蓋其他設(shè)計者/開發(fā)者在同一個項目中的文件。這需要一些時間來適應(yīng)，但即使沒有開發(fā)者使用它的原因，在HTML / CSS的設(shè)計上用它也是值得的。還不知道Subversion?趕緊去使用吧。

　　在你寫HTML和CSS深入思考寫法

　　很容易寫出垃圾HTML和CSS代碼，而且很難清除它們來獲得原先版本。經(jīng)過4個重設(shè)計，我仍然使用很多相同的CSS文件，必須規(guī)劃地清理不再使用的或者帶來混淆布局定義CSS類。通過大量的意見，甚至可能是多個樣式表，并確保你有良好的命名風(fēng)格!

　　早點開始瀏覽器差異兼容工作

　　我在FlashDen這方面的工作聽失誤的，至今我們已經(jīng)為此付出了很大的代價。我最初的布局設(shè)計在IE7上，直到我們完成整個網(wǎng)站才發(fā)現(xiàn)忽略了IE6。之后我們已經(jīng)加入IE瀏覽器條件式，和CSS Hack和其他解決方法。在你建立一個龐大的站點時候，在頁面上只有少量元素時候可以更輕松的處理瀏覽器兼容性，，所以不要重蹈覆轍!

7. 確?？梢院唵蔚臄U展你的樣式表

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

　　確保你定義了，等元素的默認樣式。

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

　　創(chuàng)建可讓開發(fā)人員重復(fù)使用的元素

　　比如在FlashDen上我們有一個CSS表類稱為“general_table”，可以確保一個不錯的填充數(shù)據(jù)時候使用的樣式。當(dāng)我有機會設(shè)計網(wǎng)頁樣式時候，我可以使用個性的表和數(shù)據(jù)高亮呈現(xiàn)的類型，但是很少會有開發(fā)人員吧頁面制作成全能的樣式去使用。

　　請確保您的網(wǎng)頁布局有一個不錯的結(jié)構(gòu)，即使他里面只有文字。

 

　　總是會有些網(wǎng)頁還沒能往里面添加圖像，可能看起來有點沉悶。通過使用諸如標(biāo)題樣式，工具條等等，你可以確保他們也很美觀，并且有一定的視覺風(fēng)格。有關(guān)FlashDen在大多數(shù)例子中，我們文本塊總結(jié)如下：

　　默認情況下，文字外面包圍著一個漂亮的邊框和標(biāo)題。這樣很容易和開發(fā)人員協(xié)調(diào)工作，文字和表現(xiàn)有了不錯的分離，使之看起來更具可讀性。我們同時也有一個側(cè)邊欄組件，僅僅把文字內(nèi)容額外包起來，但是這能使網(wǎng)頁看起來更加直觀。

　　經(jīng)過設(shè)計師的設(shè)計，每一個頁面基本都是優(yōu)化過的，但是他們可能不是那么健壯，它仍然看起來很專業(yè)和統(tǒng)一。

　　你的觀點呢

　　所以這些都是我的秘訣，如果你在更大的站點從事你的工作，發(fā)表你的評論吧!

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

重慶中技互聯(lián)網(wǎng)信息資訊有限公司
重慶網(wǎng)站建設(shè)事業(yè)部官方網(wǎng)：www.tmsmall666.cn
電子商務(wù)建站事業(yè)部咨詢電話：023-67742189
門戶網(wǎng)站品牌加盟推廣電話：023-67742189
7*24小時服務(wù)電話：023-67742189
媒體合作電話：13883323406
投資合作電話：13896068183
QQ及郵件地址：446515345@qq.com