對(duì)于一個(gè)網(wǎng)站來(lái)說(shuō)，前期的網(wǎng)站設(shè)計(jì)理念的確立是最為重要的，所以要結(jié)合網(wǎng)站建設(shè)的整體目標(biāo)和網(wǎng)站設(shè)計(jì)的利用元素，將網(wǎng)站設(shè)計(jì)理念在高端前衛(wèi)這一點(diǎn)上加以重視。例如一個(gè)展現(xiàn)文化內(nèi)涵的集團(tuán)網(wǎng)站來(lái)說(shuō)，能夠全方位的展現(xiàn)集團(tuán)的整體實(shí)力和集團(tuán)的整個(gè)文化氛圍是網(wǎng)站建設(shè)的最終目標(biāo)，而為了實(shí)現(xiàn)這一目標(biāo)，在理念上的確定就要結(jié)合企業(yè)的文化理念和互聯(lián)網(wǎng)的告訴發(fā)展相結(jié)合，同時(shí)對(duì)于現(xiàn)在流行文化的觀念上，網(wǎng)站要“審時(shí)度勢(shì)”，將集團(tuán)的文化內(nèi)涵以一種大眾能夠理解并且歡迎的方式傳遞給用戶，并且在文化的內(nèi)涵上一定要考慮到大眾用戶的需求，不僅要提供簡(jiǎn)單易懂的信息，還要傳達(dá)時(shí)尚前衛(wèi)的思想。
一、網(wǎng)站設(shè)計(jì)，不僅僅是美術(shù)設(shè)計(jì)
你的工作究竟屬于設(shè)計(jì)師還是美工?那得看你做的活是真正的設(shè)計(jì)，還是點(diǎn)綴頁(yè)面使之更好看的操作。設(shè)計(jì)師的工作是高屋建瓴的，而美工只是軟件工具的使用者。
很多人把在網(wǎng)站中的設(shè)計(jì)定義為美術(shù)設(shè)計(jì)，認(rèn)為設(shè)計(jì)師的工作任務(wù)就是使用Photoshop一類(lèi)的繪圖軟件把需要展示的頁(yè)面畫(huà)出來(lái)，其實(shí)這是很狹義的理解。合格的設(shè)計(jì)師應(yīng)該立足于整個(gè)網(wǎng)站的全局，在規(guī)劃上對(duì)整個(gè)網(wǎng)站進(jìn)行完整的設(shè)計(jì)，在宏觀上把握設(shè)計(jì)風(fēng)格導(dǎo)向，微觀上再針對(duì)該網(wǎng)站的具體定位來(lái)決定如何對(duì)設(shè)計(jì)進(jìn)行元素上的細(xì)化。當(dāng)然，網(wǎng)站設(shè)計(jì)還包括了數(shù)據(jù)庫(kù)設(shè)計(jì)及程序設(shè)計(jì)，在這里，我僅以我的從業(yè)經(jīng)驗(yàn)，舉例談?wù)劸W(wǎng)站前端設(shè)計(jì)。
北京奧運(yùn)會(huì)即將開(kāi)幕，我們先來(lái)舉兩個(gè)奧運(yùn)類(lèi)型網(wǎng)站的例子：
奧運(yùn)會(huì)官網(wǎng)：如圖，這是一個(gè)設(shè)計(jì)得非常成功的例子，設(shè)計(jì)師并沒(méi)有像一般涉及奧運(yùn)主題的設(shè)計(jì)一樣使用大量紅色，而是把頁(yè)面風(fēng)格完全國(guó)際化，其中把各種資訊和功能模塊都恰到好處地融合在一起，粗毛筆一般的元素設(shè)計(jì)使網(wǎng)站得到了豐富的整體效果。
新浪奧運(yùn)頻道：如圖，我們可以看到設(shè)計(jì)師的創(chuàng)意僅僅被壓縮在頁(yè)面滾屏幾次后看到的內(nèi)容區(qū)塊上，使用了奧運(yùn)五環(huán)色彩來(lái)進(jìn)行設(shè)計(jì)。頁(yè)面頭部基本是套在任何一個(gè)專(zhuān)題網(wǎng)站都能使用的結(jié)構(gòu)素材，而新浪的資訊系統(tǒng)一定是能支持實(shí)現(xiàn)一個(gè)更脫離內(nèi)容專(zhuān)題模板的好設(shè)計(jì)的，可見(jiàn)其并沒(méi)有從網(wǎng)站設(shè)計(jì)的角度出發(fā)去處理這個(gè)項(xiàng)目。
二、設(shè)計(jì)人員在需求階段介入，影響需求，而不干預(yù)需求
我們常聽(tīng)到有設(shè)計(jì)師抱怨：“這個(gè)設(shè)計(jì)讓我改了十多遍怎么還不能定稿?”，也常聽(tīng)到產(chǎn)品經(jīng)理說(shuō)：“這個(gè)設(shè)計(jì)師怎么就是把握不住要點(diǎn)?”
不論設(shè)計(jì)在網(wǎng)站的實(shí)現(xiàn)過(guò)程中有多么重要，網(wǎng)站該是什么模樣，還是必須由需求決定。所以網(wǎng)站項(xiàng)目的前期需求是至關(guān)重要的環(huán)節(jié)，也可以理解成房屋建筑的地基。需求也許是經(jīng)過(guò)若干調(diào)查，將結(jié)果匯總后產(chǎn)生的報(bào)告，也可能是領(lǐng)導(dǎo)或老板的一時(shí)沖動(dòng)而引發(fā)的大討論。
在需求的確立過(guò)程中，遺憾的是，網(wǎng)站設(shè)計(jì)人員的分量是極其有限的，產(chǎn)品經(jīng)理、頻道主管、某級(jí)領(lǐng)導(dǎo)的想法往往直接決定著需求的最終形態(tài)。但是設(shè)計(jì)人員在需求階段的介入還是很有必要的，設(shè)計(jì)師能以自己專(zhuān)業(yè)獨(dú)到的眼光，提出科學(xué)合理的建議，影響需求的細(xì)節(jié)。這樣做的結(jié)果是能在最大限度上取得需求方和設(shè)計(jì)方的思想一致，而不至于在設(shè)計(jì)過(guò)程中面對(duì)著有意見(jiàn)卻不讓更改的需求問(wèn)題而大發(fā)牢騷。
三、學(xué)會(huì)掌控用戶路徑
用戶從哪個(gè)頁(yè)面來(lái)?他最有可能點(diǎn)哪個(gè)鏈接或者按鈕?他使用了搜索框嗎?他下一頁(yè)去哪里?最后哪個(gè)頁(yè)面會(huì)被他打印輸出?
站在整個(gè)網(wǎng)站的角度出發(fā)，這些流程也許只是產(chǎn)品經(jīng)理需要把握的，設(shè)計(jì)師拿到UE圖只管一個(gè)接一個(gè)繪制頁(yè)面就行。其實(shí)不然，好的設(shè)計(jì)師往往能承擔(dān)一部分產(chǎn)品經(jīng)理的職責(zé)，設(shè)計(jì)出一個(gè)典型的用戶路徑，這對(duì)網(wǎng)站頁(yè)面流程有著很大的影響。
頁(yè)面和頁(yè)面之間有很多關(guān)聯(lián)，成片的超鏈接把流程頁(yè)面和外部頁(yè)面混亂地串在一起，區(qū)域A的文字鏈接要鏈到頁(yè)面2，區(qū)域B的圖片鏈接是指向頁(yè)面3，側(cè)邊的一個(gè)位置顯著的大按鈕其實(shí)是鏈接到網(wǎng)站X……頁(yè)面和頁(yè)面之間也是有繼承關(guān)系的，繼承的過(guò)程要讓用戶覺(jué)得理所當(dāng)然，在視覺(jué)上實(shí)現(xiàn)平滑過(guò)渡，這就是設(shè)計(jì)師要考慮的具體問(wèn)題。從一個(gè)頁(yè)面到另一個(gè)頁(yè)面的路徑組成里，哪些模塊要原樣保留，哪些控件要發(fā)生變化?頁(yè)面結(jié)構(gòu)是否可以變動(dòng)，頁(yè)面色彩是否可以更換?這些都是需要參照用戶路徑進(jìn)行設(shè)計(jì)的地方。把自己想象成為一個(gè)普通用戶，一頁(yè)一頁(yè)地點(diǎn)進(jìn)來(lái)，你就能明白用戶需要的是什么樣的合理設(shè)計(jì)。在此我們可以參考如圖所示的網(wǎng)站設(shè)計(jì)流程圖。
四、初步實(shí)現(xiàn)UE產(chǎn)品模型，并審核
設(shè)計(jì)師需要以什么作為參考來(lái)進(jìn)行頁(yè)面設(shè)計(jì)?所有的元素和流程都在腦子里，這個(gè)時(shí)候設(shè)計(jì)師需要稍加整理把它們簡(jiǎn)要地畫(huà)出來(lái)，畫(huà)出線框和注釋就可以了。
我們可以把UE模型理解為設(shè)計(jì)草圖，在UE階段，設(shè)計(jì)師主要根據(jù)用戶路徑得來(lái)的線索，加上對(duì)用戶交互習(xí)慣的探索，進(jìn)而整理出一個(gè)大概的模型框架。這個(gè)框架里，要明確畫(huà)出有幾個(gè)關(guān)鍵頁(yè)面，每個(gè)關(guān)鍵頁(yè)面的關(guān)鍵元素和模塊有哪些，這些關(guān)鍵元素和模塊哪些是必須以某種特定位置排列或者是務(wù)必要強(qiáng)調(diào)突出的。
其中，網(wǎng)站的首頁(yè)、最終頁(yè)面是最重要的兩級(jí)頁(yè)面，首頁(yè)會(huì)是用戶使用網(wǎng)站的第一站，在首頁(yè)的體驗(yàn)好壞，直接決定著他的去留;而最終頁(yè)面是用戶想要獲得信息的具體頁(yè)面，他會(huì)在這個(gè)頁(yè)面停留最久，可能會(huì)進(jìn)行仔細(xì)的閱讀，或是打印出這一頁(yè)備用。通常在繪制完UE模型之后，會(huì)有一個(gè)開(kāi)發(fā)小組來(lái)討論并且審核這個(gè)模型，這時(shí)候就需要著重確定首頁(yè)和最終頁(yè)的大概模樣，每個(gè)討論參與者對(duì)此都很關(guān)心。UE模型的繪制我們可以參考如圖的某商城的UE圖。UE模型通過(guò)之后，傳統(tǒng)意義的設(shè)計(jì)終于派上用場(chǎng)，要進(jìn)行具體的頁(yè)面設(shè)計(jì)了。
鏈接1 網(wǎng)站設(shè)計(jì)中可能存在的誤區(qū)〖EOF〗
誤區(qū)一：設(shè)計(jì)師就是美工。
事實(shí)上，兩者幾乎完全不同，設(shè)計(jì)師存在主觀因素上的設(shè)計(jì)，而美工很有可能只是被動(dòng)執(zhí)行。
誤區(qū)二：用什么做圖軟件對(duì)設(shè)計(jì)師來(lái)說(shuō)很重要。
其實(shí)設(shè)計(jì)師對(duì)做圖軟件沒(méi)有什么嚴(yán)格要求，很多學(xué)習(xí)繪圖軟件很久的人習(xí)慣用photoshop來(lái)畫(huà)頁(yè)面，而更多專(zhuān)職面向網(wǎng)頁(yè)設(shè)計(jì)的人習(xí)慣使用fireworks，因?yàn)槠涓W(wǎng)頁(yè)化的操作能帶來(lái)更高的效率。
誤區(qū)三：做平面設(shè)計(jì)和網(wǎng)頁(yè)設(shè)計(jì)其實(shí)是互通的。
雖然都是設(shè)計(jì)，但兩者的很多設(shè)計(jì)規(guī)矩是不一樣的，我認(rèn)為兩者最大的區(qū)別是思想上的區(qū)別：平面設(shè)計(jì)講究留白和視覺(jué)沖擊，而網(wǎng)頁(yè)設(shè)計(jì)則寸土寸金，頁(yè)面元素的整齊協(xié)調(diào)更是至關(guān)重要的。
誤區(qū)四：我改變不了領(lǐng)導(dǎo)和用戶的需求。
設(shè)計(jì)師要做的只是提出自己對(duì)于設(shè)計(jì)上的看法，決定權(quán)仍然在于領(lǐng)導(dǎo)。
誤區(qū)五：我經(jīng)驗(yàn)不足，提不了任何建議。
對(duì)設(shè)計(jì)師來(lái)說(shuō)，了解需求也是很重要的，不光是需要讀懂文檔，更需要真正明白大家在做的是一個(gè)什么樣的具體的東西，這樣在動(dòng)手操作的時(shí)候，才不會(huì)手足無(wú)措或者是理解偏差。
誤區(qū)六：設(shè)計(jì)師直接出設(shè)計(jì)稿就行了，有問(wèn)題就改。
設(shè)計(jì)師需要先搭建出UE模型，UE只需要以簡(jiǎn)單線框模式展現(xiàn)，效率高而且適合隨時(shí)調(diào)整修改，往往在這個(gè)階段需要修改的地方是很多的，如果直接就以設(shè)計(jì)稿來(lái)探討，每修改一處都是一個(gè)工程，毫無(wú)效率可言。
誤區(qū)七: 每個(gè)頁(yè)面都很重要，都要認(rèn)真研究探討。
其實(shí)大部分網(wǎng)站頁(yè)面都是一樣的框架，只是內(nèi)容顯示不同，同一個(gè)級(jí)別的頁(yè)面基本都是一致的，除了關(guān)鍵頁(yè)面之外，其他頁(yè)面用戶也許只是經(jīng)過(guò)一次，停留時(shí)間甚至可以忽略，論優(yōu)先級(jí)來(lái)說(shuō)，同等效率下自然要保證關(guān)鍵頁(yè)面。
時(shí)至今日，網(wǎng)站建設(shè)已經(jīng)開(kāi)始朝著更高的目標(biāo)前進(jìn)，在這樣的方向下，高端網(wǎng)站建設(shè)也就成為了眾多網(wǎng)站設(shè)計(jì)師們所努力的方向，因此，想要建設(shè)高端網(wǎng)站，必須在網(wǎng)站建設(shè)前期，在設(shè)計(jì)理念的塑造上就要將網(wǎng)站的設(shè)計(jì)理念定位在高端時(shí)尚前衛(wèi)，這樣才能在設(shè)計(jì)上給予更多的靈感。中外商貿(mào)在高端網(wǎng)站制作上結(jié)合多年來(lái)的工作經(jīng)驗(yàn)，為網(wǎng)站建設(shè)的更好發(fā)展提供了一個(gè)良好的平臺(tái)。
|
先設(shè)計(jì)后付款! 贈(zèng)送免費(fèi)網(wǎng)站視頻主持人!