本期構(gòu)建網(wǎng)站首頁(yè)時(shí)常用的框架有哪些?網(wǎng)站設(shè)計(jì)如何構(gòu)建網(wǎng)站首頁(yè)?如何構(gòu)建一個(gè)完整的網(wǎng)站架構(gòu)，設(shè)計(jì)一個(gè)優(yōu)秀的網(wǎng)站?在這個(gè)問(wèn)題上，我們很難提出一個(gè)絕對(duì)權(quán)威和正確的設(shè)計(jì)思路，但任何網(wǎng)站的設(shè)計(jì)都要遵循一個(gè)循序漸進(jìn)的過(guò)程。從網(wǎng)站模型構(gòu)建、美學(xué)與交互設(shè)計(jì)、風(fēng)格設(shè)計(jì)、代碼設(shè)計(jì)、可用性測(cè)試、設(shè)計(jì)回歸補(bǔ)充五個(gè)方面闡述如何設(shè)計(jì)出一個(gè)優(yōu)秀的網(wǎng)站，敬請(qǐng)關(guān)注。

　　網(wǎng)站設(shè)計(jì)是一門新興的邊緣職業(yè)，在外觀上要有創(chuàng)意，結(jié)合平面布局設(shè)計(jì)、交互設(shè)計(jì)等諸多相關(guān)原理，使網(wǎng)站設(shè)計(jì)成為一門獨(dú)特的藝術(shù)，好的網(wǎng)站設(shè)計(jì)能讓網(wǎng)站在同類網(wǎng)站中獨(dú)樹一幟，優(yōu)秀的創(chuàng)意和表達(dá)能打動(dòng)訪問(wèn)者，增加網(wǎng)站訪問(wèn)流量，甚至直接增加網(wǎng)站收益。關(guān)于免費(fèi)建站，因此，在設(shè)計(jì)的初始階段，規(guī)劃網(wǎng)站的設(shè)計(jì)步驟是非常重要的。通常，網(wǎng)站的設(shè)計(jì)步驟分為建模、美學(xué)與交互設(shè)計(jì)、風(fēng)格設(shè)計(jì)、代碼設(shè)計(jì)、可用性測(cè)試等。首先，我們有以下四個(gè)步驟來(lái)理解網(wǎng)站模型設(shè)計(jì)的內(nèi)涵和重點(diǎn)?？壳?，網(wǎng)站設(shè)計(jì)，不僅僅是藝術(shù)設(shè)計(jì)，你的工作是設(shè)計(jì)師還是藝術(shù)家?這要看你做的是真正的設(shè)計(jì)還是為了讓頁(yè)面看起來(lái)更好而做的修飾。設(shè)計(jì)師的工作是從戰(zhàn)略上有利的位置，而藝術(shù)家只是軟件工具的使用者。

　　很多人把網(wǎng)站中的設(shè)計(jì)定義為藝術(shù)設(shè)計(jì)，認(rèn)為設(shè)計(jì)師的工作就是利用Photoshop等繪圖軟件繪制要顯示的頁(yè)面。其實(shí)這是一個(gè)很狹隘的理解。合格的設(shè)計(jì)師要立足于整個(gè)網(wǎng)站的大局，在策劃中完整地設(shè)計(jì)整個(gè)網(wǎng)站，在宏觀上把握設(shè)計(jì)風(fēng)格定位，在微觀上根據(jù)網(wǎng)站的具體定位決定如何提煉設(shè)計(jì)元素。當(dāng)然，網(wǎng)站設(shè)計(jì)還包括數(shù)據(jù)庫(kù)設(shè)計(jì)和程序設(shè)計(jì)。這里我結(jié)合自己的經(jīng)驗(yàn)舉一個(gè)網(wǎng)站前端設(shè)計(jì)的例子。北京奧運(yùn)會(huì)即將開幕。先舉兩個(gè)奧運(yùn)網(wǎng)站的例子:奧運(yùn)官網(wǎng):如圖，這是一個(gè)非常成功的設(shè)計(jì)例子。設(shè)計(jì)師沒(méi)有像在與奧運(yùn)主題相關(guān)的設(shè)計(jì)中那樣大量使用紅色，而是將頁(yè)面風(fēng)格完全國(guó)際化，各種信息和功能模塊適當(dāng)整合，粗刷的通用元素設(shè)計(jì)使網(wǎng)站獲得豐富的整體效果。新浪奧運(yùn)頻道:如圖，可以看到設(shè)計(jì)師的創(chuàng)意只是壓縮在頁(yè)面滾動(dòng)幾次后看到的內(nèi)容塊上，用奧運(yùn)五環(huán)來(lái)設(shè)計(jì)。頁(yè)眉基本上是任何專題網(wǎng)站都可以使用的結(jié)構(gòu)素材，新浪的信息系統(tǒng)必須能夠支持更好的、更脫離內(nèi)容專題模板的設(shè)計(jì)的實(shí)現(xiàn)，這說(shuō)明它并沒(méi)有從網(wǎng)站設(shè)計(jì)的角度來(lái)處理這個(gè)項(xiàng)目。

　　第二，設(shè)計(jì)師介入需求階段，影響需求，但不干預(yù)需求。我們經(jīng)常聽到設(shè)計(jì)師抱怨:“這個(gè)設(shè)計(jì)讓我改變了十幾倍，為什么不能定型?”經(jīng)常聽到產(chǎn)品經(jīng)理說(shuō)“為什么這個(gè)設(shè)計(jì)師抓不住要點(diǎn)?”無(wú)論設(shè)計(jì)在網(wǎng)站的實(shí)現(xiàn)中有多重要，網(wǎng)站應(yīng)該是什么樣子，都必須由需求來(lái)決定。因此，網(wǎng)站項(xiàng)目的前期需求是一個(gè)至關(guān)重要的環(huán)節(jié)，也可以理解為建設(shè)的基礎(chǔ)。需求可能是經(jīng)過(guò)幾次調(diào)查總結(jié)結(jié)果產(chǎn)生的報(bào)告，也可能是領(lǐng)導(dǎo)或老板沖動(dòng)引發(fā)的大討論。在建立需求的過(guò)程中，不幸的是，網(wǎng)站設(shè)計(jì)師的權(quán)重是極其有限的，產(chǎn)品經(jīng)理、渠道主管、某一級(jí)領(lǐng)導(dǎo)的想法往往直接決定了需求的終形式。但是設(shè)計(jì)師介入需求階段是很有必要的。設(shè)計(jì)師可以用自己專業(yè)獨(dú)特的眼光提出科學(xué)合理的建議，會(huì)影響需求的細(xì)節(jié)。這樣就可以較大限度地達(dá)成需求方和設(shè)計(jì)方的共識(shí)，從而在面對(duì)有意見(jiàn)但不允許設(shè)計(jì)過(guò)程發(fā)生變化的需求問(wèn)題時(shí)，不至于抱怨。第三，學(xué)會(huì)控制用戶路徑。用戶來(lái)自哪個(gè)頁(yè)面?他有可能點(diǎn)擊哪個(gè)鏈接或按鈕?他用搜索框了嗎?他下一步要去哪里?他后會(huì)打印出哪一頁(yè)?從整個(gè)網(wǎng)站來(lái)看，這些流程可能只有產(chǎn)品經(jīng)理才能掌握，設(shè)計(jì)師拿到UE圖只需要一頁(yè)一頁(yè)的畫。其實(shí)好的設(shè)計(jì)師往往可以承擔(dān)一些產(chǎn)品經(jīng)理的責(zé)任，設(shè)計(jì)出典型的用戶路徑，對(duì)網(wǎng)站頁(yè)面流程影響很大。頁(yè)面之間有很多連接，流程頁(yè)面和外部頁(yè)面通過(guò)超鏈接混雜在一起。A區(qū)的文字鏈接要鏈接到第二頁(yè)，B區(qū)的圖片鏈接要指向第三頁(yè)，側(cè)面位置突出的一個(gè)大按鈕其實(shí)是鏈接到網(wǎng)站X的……頁(yè)面之間也有繼承關(guān)系。繼承過(guò)程要讓用戶想當(dāng)然，在視覺(jué)上實(shí)現(xiàn)平滑過(guò)渡，這是設(shè)計(jì)師要考慮的具體問(wèn)題。

　　在從一個(gè)頁(yè)面到另一個(gè)頁(yè)面的路徑組合中，哪些模塊應(yīng)該保持原樣，哪些控件應(yīng)該更改?頁(yè)面結(jié)構(gòu)可以改變，頁(yè)面顏色可以改變嗎?這些都是需要參考用戶路徑進(jìn)行設(shè)計(jì)的地方。把自己想象成一個(gè)普通用戶，一頁(yè)一頁(yè)進(jìn)來(lái)，就能明白用戶需要什么樣的合理設(shè)計(jì)。這里可以參考一下如圖所示的網(wǎng)站設(shè)計(jì)流程圖。4.初步實(shí)現(xiàn)UE產(chǎn)品模型，回顧設(shè)計(jì)師需要用什么作為頁(yè)面設(shè)計(jì)的參考。所有的元素和過(guò)程都在我的腦海里。這時(shí)候設(shè)計(jì)師就需要整理出來(lái)，簡(jiǎn)單的畫出來(lái)，畫線框和標(biāo)注。我們可以把UE模型理解為一個(gè)設(shè)計(jì)草圖。在UE階段，設(shè)計(jì)師主要是根據(jù)從用戶路徑中獲得的線索，以及對(duì)用戶交互習(xí)慣的探索，整理出一個(gè)粗略的模型框架。在這個(gè)框架中，需要清晰地畫出幾個(gè)關(guān)鍵頁(yè)面，每個(gè)關(guān)鍵頁(yè)面的關(guān)鍵元素和模塊是什么，這些關(guān)鍵元素和模塊中的哪些必須安排在特定的位置或者必須強(qiáng)調(diào)。關(guān)于網(wǎng)站模板，其中，網(wǎng)站的首頁(yè)和終頁(yè)面是重要的兩級(jí)頁(yè)面，首頁(yè)將是用戶使用網(wǎng)站的靠前站。主頁(yè)上的體驗(yàn)直接決定了他的停留;后一頁(yè)是用戶想要獲取信息的特定頁(yè)面。他會(huì)在這一頁(yè)停留長(zhǎng)的時(shí)間，可能會(huì)仔細(xì)閱讀或者打印這一頁(yè)以備后用。通常，在繪制了UE模型之后，一個(gè)開發(fā)團(tuán)隊(duì)會(huì)對(duì)模型進(jìn)行討論和評(píng)審。這時(shí)候就需要重點(diǎn)確定靠前頁(yè)和后一頁(yè)的大致外觀，這是每個(gè)參與討論的人都非常關(guān)心的問(wèn)題。對(duì)于UE模型的繪制，我們可以參考如圖所示的某商場(chǎng)的UE圖。在采用了UE模型之后，傳統(tǒng)的設(shè)計(jì)終于開始使用，需要具體的頁(yè)面設(shè)計(jì)。