無錫網(wǎng)站設(shè)計(jì)培訓(xùn)哪里好【無錫東方博宜】

無錫網(wǎng)站設(shè)計(jì)培訓(xùn)教你大型網(wǎng)站設(shè)計(jì)和維護(hù)的關(guān)鍵技巧

隨著成千上萬的活動(dòng)用戶聊天，上傳和購物，網(wǎng)站處理著大額的金錢和巨大的流量。

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

1.可維護(hù)的設(shè)計(jì)和代碼

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

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

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

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

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

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

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

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

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

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

作者——在FlashDen上賣商品的人

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

新訪客——潛在的買家/作者/會(huì)員，剛到站點(diǎn)的人

快速了解到站點(diǎn)是干嘛的，起步教程，查看不同類別的文件和價(jià)格；

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

和其他會(huì)員聊天，查看站點(diǎn)新聞，瀏覽文件；

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

6.為將來做組織

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

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

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

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

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

使用Subversion

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

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

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

早點(diǎn)開始瀏覽器差異兼容工作

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

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

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

確保你定義了，等元素的默認(rèn)樣式。