>
學(xué)校機(jī)構(gòu) >
無(wú)錫東方博宜教育培訓(xùn) >
學(xué)習(xí)資訊>
無(wú)錫網(wǎng)站設(shè)計(jì)培訓(xùn)哪里好【無(wú)錫東方博宜】
無(wú)錫網(wǎng)站設(shè)計(jì)培訓(xùn)哪里好【無(wú)錫東方博宜】
109 2017-05-03
無(wú)錫網(wǎng)站設(shè)計(jì)培訓(xùn)哪里好【無(wú)錫東方博宜】
無(wú)錫網(wǎng)站設(shè)計(jì)培訓(xùn)教你大型網(wǎng)站設(shè)計(jì)和維護(hù)的關(guān)鍵技巧
隨著成千上萬(wàn)的活動(dòng)用戶(hù)聊天,上傳和購(gòu)物,網(wǎng)站處理著大額的金錢(qián)和巨大的流量。
設(shè)計(jì),重構(gòu),維護(hù)和開(kāi)發(fā)團(tuán)隊(duì)的工作給了我一些能使事情變得更容易的用用的見(jiàn)解和技巧。而且,就在昨天,我們開(kāi)始了對(duì)網(wǎng)站最大的一次重構(gòu),著看上去是一次很好的機(jī)會(huì)來(lái)記錄我最有用的7個(gè)秘訣。
1.可維護(hù)的設(shè)計(jì)和代碼
我給的第一條也是最條一條秘訣是設(shè)計(jì)站點(diǎn)保證可以輕松維護(hù)。很多時(shí)候,當(dāng)你設(shè)計(jì)一個(gè)站點(diǎn),你可能為了美學(xué)犧牲一些東西。例如,你可能使用一個(gè)圖片而文字或者樣式就可以應(yīng)付?;蛘吣憧赡芄室馐褂靡粋€(gè)沒(méi)有空間縮放的菜單結(jié)構(gòu)。當(dāng)網(wǎng)站變大時(shí),這將將成為一個(gè)非常糟糕的設(shè)計(jì)。
當(dāng)我兩年前建成FlashDen的第一個(gè)版本時(shí),我使用圖片按鈕。他們看起來(lái)很漂亮,但同時(shí)我被100多個(gè)不同的按鈕圖片庫(kù)拖累著,更談不上修改圖片了。之后在接下來(lái)的幾個(gè)月中,當(dāng)一個(gè)開(kāi)發(fā)者需要一個(gè)新按鈕時(shí)候他們向我要一個(gè)新圖片。不用說(shuō),我學(xué)到這個(gè)教訓(xùn)很快,我們切換到一個(gè)單獨(dú)的按鈕類(lèi),雖然看上去不是很好,但是這種情況更能安心。
可維護(hù)性的另一面是考慮站點(diǎn)將會(huì)怎樣成長(zhǎng)和變化。比如,當(dāng)一個(gè)新頁(yè)面增加時(shí),它到哪里去?我一直想要一個(gè)橫向的導(dǎo)航欄,但是經(jīng)過(guò)一些嘗試,我們限制地使用了加入子欄目的垂直的導(dǎo)航欄,從而加入一個(gè)標(biāo)簽結(jié)構(gòu)到頁(yè)面來(lái)保證相關(guān)的頁(yè)面能被歸類(lèi)到一起。我不敢說(shuō)這是世界上最好的導(dǎo)航欄,但是它肯定能夠讓我們不用重新設(shè)計(jì)在一個(gè)新的節(jié)點(diǎn)加入網(wǎng)站的時(shí)候。
所以當(dāng)你在設(shè)計(jì)大型站點(diǎn)時(shí)候,設(shè)法讓它變得簡(jiǎn)單,你會(huì)為此而感到高興的!
2.找出你的用戶(hù)群和任務(wù)
大型網(wǎng)站網(wǎng)站和小型站點(diǎn)的最大一個(gè)區(qū)別就是使用網(wǎng)站的不同用戶(hù)類(lèi)型的數(shù)量。例如在FlashDen上,有買(mǎi)家、作家、訪(fǎng)客、管理員和會(huì)員。每個(gè)用戶(hù)組都有他們各自不同的目標(biāo)和任務(wù)。有時(shí)候他們的任務(wù)重疊,但是他們有很大的不同。
一個(gè)地方的用戶(hù)任務(wù)在相互對(duì)立的觀(guān)點(diǎn)最好的例子是在一個(gè)網(wǎng)頁(yè)。網(wǎng)站上沒(méi)有任何一個(gè)地方不銜接的每個(gè)用戶(hù)組,并在其他地方是如此的重要,以確保每個(gè)人都會(huì)有他們想要的。當(dāng)然,你要小心,在服務(wù)一個(gè)用戶(hù)組你不忽略另一個(gè)。
在這次最新一次FlashDen重新設(shè)計(jì)時(shí)候,我所作工作最大的地方是主頁(yè)。我做的第一件事情是給自己列出每個(gè)用戶(hù)組需要做的事情:
買(mǎi)家——在FlashDen上購(gòu)買(mǎi)文件的人
瀏覽項(xiàng)目,搜索,訪(fǎng)問(wèn)他們的個(gè)人主頁(yè),存款,學(xué)習(xí)使用網(wǎng)站(新買(mǎi)家);
作者——在FlashDen上賣(mài)商品的人
與其他會(huì)員聊天,在主頁(yè)上展示他們項(xiàng)目的功能,了解網(wǎng)站的新聞,快速的獲取他們的投資搭配和收益;
新訪(fǎng)客——潛在的買(mǎi)家/作者/會(huì)員,剛到站點(diǎn)的人
快速了解到站點(diǎn)是干嘛的,起步教程,查看不同類(lèi)別的文件和價(jià)格;
會(huì)員——不是真正的買(mǎi)家或作者,而是在社區(qū)中活躍
和其他會(huì)員聊天,查看站點(diǎn)新聞,瀏覽文件;
管理員/審稿人——我們的工作人員,管理文件的批準(zhǔn),主持論壇,參與大部分活動(dòng)
快速批準(zhǔn)文件,查看最新論壇主題,添加站點(diǎn)新聞。
當(dāng)你知道不同的用戶(hù)群體想要做什么,那么你可以設(shè)計(jì)一個(gè)網(wǎng)頁(yè),解決了他們所有的需要。不用說(shuō),這是隨著用戶(hù)組和任務(wù)數(shù)量指數(shù)級(jí)增加的困難的任務(wù)。在該網(wǎng)站的其他網(wǎng)頁(yè),你會(huì)經(jīng)常為部分用戶(hù)組而苦惱,而在主頁(yè)上,他們卻又都集中在一起。不用懷疑,主頁(yè)是你設(shè)計(jì)一個(gè)網(wǎng)站時(shí)候最重要的一項(xiàng)工作。
在你解決不同需求之前,你需要先考慮用戶(hù)群。為了做到這個(gè),你需要了解該網(wǎng)站是要實(shí)現(xiàn)的目標(biāo)。
3.了解網(wǎng)站目標(biāo)
雖然每個(gè)用戶(hù)組會(huì)很自然地認(rèn)為他們是最重要的,但是你應(yīng)該根據(jù)他們的優(yōu)先度來(lái)判別站點(diǎn)要實(shí)現(xiàn)的目標(biāo)。比如在FlashDen上,我們給候補(bǔ)人員列出下面幾條結(jié)論:
該網(wǎng)站的首要任務(wù)是為買(mǎi)家服務(wù)。為買(mǎi)家服務(wù)可以帶來(lái)不斷的收入,同時(shí)也可以為作者群服務(wù)。
讓游客更快的了解網(wǎng)站進(jìn)而成為會(huì)員也是至關(guān)重要的。FlashDen還處在一個(gè)比較新興的市場(chǎng),不斷有新競(jìng)爭(zhēng)對(duì)手出現(xiàn),如何將注冊(cè)會(huì)員變成買(mǎi)家或者作者是相當(dāng)重要的。
創(chuàng)作者是FlashDen的核心部分,他們也是非常重要,和其他用戶(hù)群不同的是,他們是網(wǎng)站堅(jiān)定的擁護(hù)者。
注冊(cè)會(huì)員雖然沒(méi)有創(chuàng)作者或者買(mǎi)家這么重要,但是他們也在為周邊的社群作出貢獻(xiàn)。
作為雇員,管理員/審稿人是相對(duì)最不重要的。
因此,從以上所說(shuō)可以得出結(jié)論,網(wǎng)站服務(wù)的的用戶(hù)需求優(yōu)先順序:訪(fǎng)客>買(mǎi)家>作者>成員“>管理員。
認(rèn)識(shí)你的網(wǎng)站正在努力實(shí)現(xiàn)的卻是最終用戶(hù)線(xiàn)程的縫制任務(wù)一起,并告訴你什么你應(yīng)該嘗試把頁(yè)面上。
理解你的網(wǎng)站目的可以把你的所要作的任務(wù)貫穿在一起,并且能告訴你應(yīng)該在頁(yè)面上放些什么東西。在每個(gè)關(guān)鍵性頁(yè)面你要能區(qū)分識(shí)別出用戶(hù)組、任務(wù)和優(yōu)先級(jí)別。對(duì)于重要的頁(yè)面比如主頁(yè)我慎重的在紙上設(shè)計(jì),而一些小的頁(yè)面則是在腦子里面思考一下。
4.設(shè)計(jì),精煉,精煉,精煉……
在你找到你的用戶(hù)組別,任務(wù),網(wǎng)站目標(biāo),優(yōu)先級(jí)別等等之后,到了設(shè)計(jì)的時(shí)間了!這是至關(guān)重要的步驟,因?yàn)樵趯?shí)際操作中,這一步可以大幅降低一些將必要的返工設(shè)計(jì)工作量。每當(dāng)我剛開(kāi)始設(shè)計(jì)并沒(méi)有真正分析第一大網(wǎng)站,我已不可避免地要大量的返工,甚至整個(gè)屏幕交互界面。
很多設(shè)計(jì)師喜歡在這點(diǎn)用線(xiàn)框,這可以簡(jiǎn)單地用線(xiàn)條和框勾勒大約內(nèi)容應(yīng)該顯示的地方。我個(gè)人更喜歡一開(kāi)始用Photoshop,因?yàn)槲宜俣炔粔蚩?,這樣能讓我細(xì)致地看到細(xì)節(jié)的改變。我也認(rèn)為詳細(xì)細(xì)節(jié)信息設(shè)計(jì)比在紙上顯示更直觀(guān)。簡(jiǎn)單地改變顏色和背景顏色可以使整個(gè)網(wǎng)頁(yè)頁(yè)面元素立馬看上去更為重要。
一旦你有一個(gè)怎樣的信息需要共同努力粗略的想法,你應(yīng)該拿出一個(gè)工作的設(shè)計(jì),一般是確定,然后再精煉,精煉,精煉。我經(jīng)常會(huì)起草5到6相同的外觀(guān),然后在之上嘗試不同類(lèi)型、大孝圖像,布局的改動(dòng),背景等等,看看你對(duì)它的直觀(guān)感受。
不管你覺(jué)得第一個(gè)布局有多好,我可以保證,在花費(fèi)一段時(shí)間進(jìn)行數(shù)次版本升級(jí)之后,你會(huì)發(fā)現(xiàn)了你原來(lái)的版本不是和你最初想到的那么好。有時(shí)你甚至拋棄整個(gè)設(shè)計(jì)并重新開(kāi)始。而如果你有一個(gè)良好的基礎(chǔ),然后精煉細(xì)化能讓你有一個(gè)漂亮的成果。
5.聽(tīng)取別人的意見(jiàn),自己下最后的主意
任何一個(gè)大型的工作中,你都會(huì)被其他很多意見(jiàn)所影響。在開(kāi)始FlashDen工作之前,我曾經(jīng)與各種網(wǎng)站設(shè)計(jì)公司合作。期間我也有不幸設(shè)計(jì)一些大型保險(xiǎn)公司和一些政府組織。我說(shuō)不幸,因?yàn)楫?dāng)你到該客戶(hù)和牽扯很多利益的人打交道,同時(shí)在許多當(dāng)時(shí)還不清楚真正的決策權(quán)的情況下作出錯(cuò)誤決策。這會(huì)導(dǎo)致無(wú)休止的會(huì)議,無(wú)窮無(wú)盡的變化,并極大的混淆你的眼光。
不管是什么用戶(hù),真正重要的只是得到他們的意見(jiàn)。在大多數(shù)情況下,他們比你更知道了很多與業(yè)務(wù)有關(guān)的事。但愿他們比你還了解用戶(hù),這些知識(shí)將能夠向你提供建設(shè)性的意見(jiàn)。
得到與你一起工作的開(kāi)發(fā)團(tuán)隊(duì)的意見(jiàn)也同樣重要。在FlashDen我們很幸運(yùn),因?yàn)橛袃蓚€(gè)開(kāi)發(fā)者在用戶(hù)界面和可用性設(shè)計(jì)方面經(jīng)驗(yàn)豐富。隨著他們的投入,和其他團(tuán)隊(duì)成員,向最終的產(chǎn)品提出了很多不同的想法。
但到最后,就是你這個(gè)設(shè)計(jì)專(zhuān)家作出最后決定的時(shí)候了。如果你有一個(gè)難對(duì)付的客戶(hù)這可能會(huì)非常棘手,因?yàn)檫@些客戶(hù)往往認(rèn)為他們應(yīng)該作最后的決策。如果是這樣的話(huà),你需要想辦法向他們解釋?zhuān)噍敳⑶艺故境瞿愕倪x擇會(huì)帶來(lái)最好的收益。;有時(shí)候硬著頭皮把客戶(hù)的意見(jiàn)接受,并作為項(xiàng)目中的一個(gè)長(zhǎng)期建設(shè)性功能。
6.為將來(lái)做組織
當(dāng)您為一個(gè)大網(wǎng)站編碼設(shè)計(jì)時(shí),它是真正重要的是反復(fù)思考未來(lái)的變化。如何管理您的文件和文件夾將極大地影響之后的工作。例如最近我們決定建立一個(gè)著重音樂(lè)的FlashDen的姊妹網(wǎng)站,即AudioJungle。為了簡(jiǎn)化,這個(gè)網(wǎng)站是將使用相同的HTML,只是改變樣式來(lái)使它看起來(lái)像一個(gè)不同的網(wǎng)站。這里有一些事情要記住:
整理一個(gè)良好的文件夾結(jié)構(gòu)
腳本,樣式表,界面的圖片,圖片內(nèi)容,等等,都需要分開(kāi)存放。如果一個(gè)小網(wǎng)站,你也許可以把這些東西雜糅到一起,但在大型站點(diǎn)中,找到你需要的內(nèi)容變得更為重要。
給你的文件使用有規(guī)則、良好的命名規(guī)范
沒(méi)有什么比按名字“gd_l3.jpg”尋找一塊圖片更為糟糕。你怎樣做即基本是個(gè)人的事,但我覺(jué)得使用通用命名描述性文件名的前綴會(huì)有更大的幫助。比如:我可能會(huì)給頭部的每張圖片加上前綴'header_',每一個(gè)背景加上'bg_',頭部菜單中的背景可能稱(chēng)為'header_bg_menu.jpg'。前綴有一個(gè)好處,當(dāng)您的文件按名稱(chēng)排序,他們都出現(xiàn)在一起。
使用Subversion
這是被我們的開(kāi)發(fā)人員逼得,但幸虧我們用了它!Subversion可以跟蹤文件和檔案的變更,同時(shí)可以防止覆蓋其他設(shè)計(jì)者/開(kāi)發(fā)者在同一個(gè)項(xiàng)目中的文件。這需要一些時(shí)間來(lái)適應(yīng),但即使沒(méi)有開(kāi)發(fā)者使用它的原因,在HTML/CSS的設(shè)計(jì)上用它也是值得的。還不知道Subversion?趕緊去使用吧。
在你寫(xiě)HTML和CSS深入思考寫(xiě)法
很容易寫(xiě)出垃圾HTML和CSS代碼,而且很難清除它們來(lái)獲得原先版本。經(jīng)過(guò)4個(gè)重設(shè)計(jì),我仍然使用很多相同的CSS文件,必須規(guī)劃地清理不再使用的或者帶來(lái)混淆布局定義CSS類(lèi)。通過(guò)大量的意見(jiàn),甚至可能是多個(gè)樣式表,并確保你有良好的命名風(fēng)格!
早點(diǎn)開(kāi)始瀏覽器差異兼容工作
我在FlashDen這方面的工作聽(tīng)失誤的,至今我們已經(jīng)為此付出了很大的代價(jià)。我最初的布局設(shè)計(jì)在IE7上,直到我們完成整個(gè)網(wǎng)站才發(fā)現(xiàn)忽略了IE6。之后我們已經(jīng)加入IE瀏覽器條件式,和CSSHack和其他解決方法。在你建立一個(gè)龐大的站點(diǎn)時(shí)候,在頁(yè)面上只有少量元素時(shí)候可以更輕松的處理瀏覽器兼容性,,所以不要重蹈覆轍!
7.確??梢院?jiǎn)單的擴(kuò)展你的樣式表
網(wǎng)站越大,設(shè)計(jì)師就越有可能看到或修改每一個(gè)單獨(dú)頁(yè)面。如果你是一個(gè)大型網(wǎng)站上唯一設(shè)計(jì)師–比如我–你可能不想在每個(gè)頁(yè)面上重定義。因此,多花精力在樣式表上,可以通過(guò)默認(rèn)的屬性讓頁(yè)面看起來(lái)不錯(cuò)。
確保你定義了,等元素的默認(rèn)樣式。
這樣的頁(yè)面可以自動(dòng)呈現(xiàn)的不錯(cuò)。如果你想指望別人做
創(chuàng)建可讓開(kāi)發(fā)人員重復(fù)使用的元素
比如在FlashDen上我們有一個(gè)CSS表類(lèi)稱(chēng)為“general_table”,可以確保一個(gè)不錯(cuò)的填充數(shù)據(jù)時(shí)候使用的樣式。當(dāng)我有機(jī)會(huì)設(shè)計(jì)網(wǎng)頁(yè)樣式時(shí)候,我可以使用個(gè)性的表和數(shù)據(jù)高亮呈現(xiàn)的類(lèi)型,但是很少會(huì)有開(kāi)發(fā)人員吧頁(yè)面制作成全能的樣式去使用。
掃一掃
獲取更多福利
獵學(xué)網(wǎng)企業(yè)微信
獵學(xué)網(wǎng)訂閱號(hào)
獵學(xué)網(wǎng)服務(wù)號(hào)