網(wǎng)頁(yè)設(shè)計(jì)專業(yè)技能介紹

第頁(yè)網(wǎng)頁(yè)設(shè)計(jì)專業(yè)技能介紹1.制定工具

好的工匠總有自己的一套工具箱。如剛剛羅列的崗位描述，制定師必須會(huì)使用幾個(gè)必備的制定軟件。雖然現(xiàn)在可以在Web瀏覽器中制定網(wǎng)站，但Photoshop，Sketch，Mockplus等工具在圖片處理型，圖標(biāo)制定，和原型制定等步驟中都是非常有幫助的工具。在恰當(dāng)?shù)碾A段使用恰當(dāng)?shù)墓ぞ邔⑹鼓愕墓ぷ魇卤豆Π?。可別傻傻的只用一個(gè)制定軟件哦~

圖片處理:PS(Photoshop)

PS在〔平面制定〕和網(wǎng)頁(yè)制定中的強(qiáng)大功能不必須我多費(fèi)唇舌了

圖形處理:AI

AdobeIllustrator,簡(jiǎn)稱"AI',是一款非常好的矢量圖形處理工具,主要用于字體制定、圖形制定,產(chǎn)品包裝的制定、畫(huà)冊(cè)/書(shū)籍/雜志的排版、插畫(huà)制定等。

動(dòng)效:AE

AdobeAfterEffects簡(jiǎn)稱"AE',是Adobe公司推出的一款圖形視頻處理軟件,簡(jiǎn)單來(lái)說(shuō)就是一個(gè)動(dòng)態(tài)版的PS,功能十分強(qiáng)大,但是操作比較復(fù)雜。

原型交互:Mockplus，Axure

雖然現(xiàn)在不少公司的項(xiàng)目團(tuán)隊(duì)會(huì)將交互原型的繪制交由項(xiàng)目策劃人員來(lái)負(fù)責(zé),但是網(wǎng)頁(yè)制定師也必須要了解常用的原型制定軟件Mockplus、Axure等的使用方法。

2.制定感

擁有優(yōu)良的制定感關(guān)于網(wǎng)頁(yè)制定來(lái)說(shuō)是非常重要的。網(wǎng)頁(yè)制定不僅僅是外觀好看，你還必須了解制定元素以及基本制定原則以及如何排版，如何使用圖像，布局原則等。

3.UX

UX代表用戶體驗(yàn)，或人們?cè)谑褂镁W(wǎng)站時(shí)的感受。為此，你必須要研究你的用戶并創(chuàng)建"角色'，使用站點(diǎn)地圖布置頁(yè)面和內(nèi)容，了解用戶在實(shí)際網(wǎng)站訪問(wèn)中的路徑。通過(guò)反復(fù)的測(cè)試，制定出具有優(yōu)良用戶體驗(yàn)的網(wǎng)站，以增加用戶會(huì)話和轉(zhuǎn)化。

例如，CTA按鈕應(yīng)該如何布局才干更好的吸引點(diǎn)擊?或者如何潛移默化的引導(dǎo)用戶操作?這必須要在原型制定階段勾勒出每個(gè)網(wǎng)頁(yè)的關(guān)鍵部分。

4.響應(yīng)式制定

隨著智能手機(jī)，平板〔電腦〕以及其他移動(dòng)設(shè)備的增長(zhǎng)，越來(lái)越多人使用小屏幕來(lái)查看和閱讀網(wǎng)頁(yè)信息。作為網(wǎng)頁(yè)制定師，你應(yīng)該了解響應(yīng)式網(wǎng)頁(yè)制定的原則使你的網(wǎng)頁(yè)在小屏幕上也能堅(jiān)持優(yōu)良的網(wǎng)頁(yè)可讀性。(12個(gè)最正確的響應(yīng)式網(wǎng)頁(yè)制定教程，輕松帶你入門(mén)!)

5.平面制定

關(guān)于很多網(wǎng)頁(yè)制定師來(lái)說(shuō)，網(wǎng)頁(yè)制定vs.平面制定是有區(qū)別的，可比性不強(qiáng)。而事實(shí)上，很多網(wǎng)頁(yè)制定師，特別是資深級(jí)的，大多都是從平面制定轉(zhuǎn)到網(wǎng)頁(yè)制定的。假如你又恰好是一個(gè)自由網(wǎng)頁(yè)制定師，那么你的制定技能、思維將會(huì)得到更大的發(fā)揮。

6.Flash

動(dòng)畫(huà)能讓一個(gè)生硬的網(wǎng)頁(yè)具有靈動(dòng)感。網(wǎng)頁(yè)上適當(dāng)?shù)脑黾觿?dòng)畫(huà)或許會(huì)起到點(diǎn)睛之筆的作用。為何不在適當(dāng)?shù)奈恢眉由弦稽c(diǎn)呢?尤其是特別場(chǎng)合或依據(jù)客戶網(wǎng)站的特別性，例如品牌服裝、汽車、影視等，動(dòng)畫(huà)此時(shí)就會(huì)顯得分外重要。這種網(wǎng)站必須要給瀏覽者以視覺(jué)上的沖擊才干表達(dá)出品牌的旨意。

2基于視覺(jué)搜索影響因素的網(wǎng)頁(yè)制定

合計(jì)到視覺(jué)搜索的特征及其影響因素，并在參閱了之前學(xué)者多視覺(jué)搜索與網(wǎng)頁(yè)制定研究的基礎(chǔ)上，得出以下的制定建議，旨在為網(wǎng)頁(yè)的優(yōu)化制定提供一些指導(dǎo)性看法。

(1)內(nèi)源性眼跳由瀏覽者自身因素引起，是個(gè)體主動(dòng)發(fā)起的，比如個(gè)體本身對(duì)某些信息感興趣或者個(gè)體在指導(dǎo)語(yǔ)的提示下，主動(dòng)進(jìn)行的眼跳，它主要與返回抑制與眼運(yùn)動(dòng)記憶相關(guān)聯(lián)。外源性眼跳則是主要與刺激物的基本特征有關(guān)，在研究者對(duì)引起眼跳的外源性刺激的研究中，從顏色特征到后來(lái)的方向、運(yùn)動(dòng)、大小、亮度、形狀等目標(biāo)特征，都會(huì)引起較大的眼跳，影響視覺(jué)搜索的效果。所有這些目標(biāo)特征中，顏色特征的影響最大。國(guó)內(nèi)有關(guān)研究還發(fā)現(xiàn)，在凝視時(shí)間方面，凝視時(shí)間由短到長(zhǎng)依次是圖畫(huà)、中文詞、英文詞;在反應(yīng)時(shí)方面，人的反應(yīng)時(shí)從短到長(zhǎng)依次為圖畫(huà)、英文詞、中文詞;在眼跳距離方面，眼跳距離從小到大依次是中文、英文、圖畫(huà)。有學(xué)者對(duì)分欄制定的視覺(jué)搜索效率的眼動(dòng)研究發(fā)現(xiàn)，1大開(kāi)本(1/16開(kāi)本)制定材料在跳距離、行內(nèi)與行間回視次數(shù)在閱讀理解指標(biāo)上均顯著優(yōu)于小開(kāi)本(1/32開(kāi)本)材料一欄、二欄、三欄制定材料，表現(xiàn)為一欄最優(yōu)。在進(jìn)行具體的網(wǎng)頁(yè)制定時(shí)，如果制定的目的傾向于引起讀者的注意，那么首選圖片和動(dòng)畫(huà)，顏色可以選擇鮮艷的能與四周信息區(qū)分開(kāi)的;如果傾向于信息的獲取或理解，應(yīng)該首選文字，其次是圖片或視頻，最好不要選擇過(guò)多的顏色，會(huì)增大眼跳，不利于信息的獲取和理解。此外，和網(wǎng)頁(yè)屏幕上浮現(xiàn)的網(wǎng)頁(yè)材料相比，人們接觸最多的文本材料更容易引起人的眼疲憊。因此，在有大量文本信息的網(wǎng)頁(yè)制定中，為了減少被測(cè)試者的疲憊，可以采納大開(kāi)本的一欄制定以方便瀏覽者的視覺(jué)搜索和理解。

(2)在網(wǎng)頁(yè)制定中，重要信息和目標(biāo)信息是必須要引起用戶較多關(guān)注的?；谙嗨菩缘囊?guī)律，可以盡量減少重點(diǎn)信息和非重點(diǎn)信息;基于目標(biāo)信息和干擾信息之間的相似性，可以增加重要信息或目標(biāo)信息的新穎性、誘目性、獨(dú)特性，且背景信息盡量簡(jiǎn)潔，減少干擾，以使重要信息和目標(biāo)信息從背景信息群中"脫穎而出'，以此吸引瀏覽者的注意，提升他們的搜索效率;在文字與背景顏色選擇上，最好設(shè)置為深色文字，淺色背景;在超鏈接顏色選擇上，最好選用不同的顏色來(lái)區(qū)分已訪問(wèn)和未被訪問(wèn)的鏈接，這樣有利于用戶將兩者區(qū)分開(kāi)來(lái)進(jìn)而搜索還沒(méi)有瀏覽的超鏈接，而忽略已經(jīng)訪問(wèn)的超鏈接。

(3)有學(xué)者研究發(fā)現(xiàn)，形狀加工和顏色加工存在中央凹和邊緣視野的分開(kāi)。視覺(jué)的注意選擇中存在這種空間位置效應(yīng)，注意資源的分配也存在位置效應(yīng)，當(dāng)刺激浮現(xiàn)在中央凹視角時(shí)，被測(cè)試者對(duì)任務(wù)的反應(yīng)時(shí)較刺激浮現(xiàn)邊緣視角時(shí)的反應(yīng)時(shí)變大。據(jù)此可以將文字信息置于網(wǎng)頁(yè)中心位置，顏色圖形等信息置于網(wǎng)頁(yè)的邊緣位置。

(4)視覺(jué)刺激效應(yīng)告訴我們，旨在讓用戶從網(wǎng)站中搜索或獲取信息(例如一些新聞?lì)愰T(mén)戶網(wǎng)站)，制定者應(yīng)避免那些會(huì)引起激烈刺激的視覺(jué)浮現(xiàn)方式，或者過(guò)多的信息浮現(xiàn)也會(huì)影響用戶的信息搜索能力。如果旨在讓用戶獲得信息，最好不要添加一些動(dòng)態(tài)圖片、動(dòng)態(tài)文字等動(dòng)態(tài)效果激烈而很容易干擾用戶注意力的信息元素，這會(huì)干擾用戶對(duì)文字信息的搜索。

(5)文章通過(guò)眼動(dòng)實(shí)驗(yàn)關(guān)于Web頁(yè)面視覺(jué)信息搜索行為的研究發(fā)現(xiàn)，人們?cè)诰W(wǎng)頁(yè)上進(jìn)行視覺(jué)信息搜索時(shí)，更多地凝視周邊區(qū)域，而關(guān)于中心區(qū)域的凝視較少，浮現(xiàn)視覺(jué)搜索的周邊特性。而且，在帶有浮動(dòng)廣告的網(wǎng)頁(yè)上進(jìn)行視覺(jué)信息搜索時(shí)，同樣浮現(xiàn)視覺(jué)搜索周邊特性。實(shí)驗(yàn)結(jié)果說(shuō)明，從視覺(jué)搜索角度來(lái)看，在網(wǎng)頁(yè)制定時(shí)，關(guān)于具有超級(jí)鏈接性質(zhì)的標(biāo)題信息，放置在網(wǎng)頁(yè)的周邊區(qū)域比放置在網(wǎng)頁(yè)中心區(qū)域更利于人們的視覺(jué)搜索行為。而且，在視覺(jué)信息搜索時(shí)，人們很少去看浮動(dòng)廣告，說(shuō)明浮動(dòng)廣告的廣告效應(yīng)并不顯然，應(yīng)該改變其廣告形式。

3傳統(tǒng)文化網(wǎng)頁(yè)制定編排重點(diǎn)是什么

一、中國(guó)元素的穿插

中國(guó)傳統(tǒng)的吉祥紋樣、民俗裝飾圖案、剪紙藝術(shù)、印章、水墨等藝術(shù)形式，都是被廣泛認(rèn)同的中國(guó)元素，是中國(guó)傳統(tǒng)文化和藝術(shù)情感的深切體現(xiàn)。在網(wǎng)頁(yè)編排中，創(chuàng)意性地運(yùn)用中國(guó)元素，更易表現(xiàn)地域文化的特色，這也是網(wǎng)頁(yè)風(fēng)格定位的重要手段。如在"中國(guó)?烏鎮(zhèn)'的網(wǎng)站制定中(圖1)，網(wǎng)站的首頁(yè)以水墨透疊的方式體現(xiàn)出一個(gè)江南古鎮(zhèn)的風(fēng)貌，書(shū)法體的網(wǎng)站名稱、縱向書(shū)寫(xiě)的古文字式襯底、左下角的印章，使得整個(gè)頁(yè)面猶如一幅古典的風(fēng)光畫(huà)，飽含東方意味。在點(diǎn)擊鏈接的各個(gè)頁(yè)面里，雕花的廊檐、黛瓦粉墻、石板小巷、小橋流水以及那導(dǎo)航欄上的傳統(tǒng)紋樣，無(wú)一不透著濃郁的歷史和文化氣息。

二、標(biāo)準(zhǔn)色的運(yùn)用

色彩是形成網(wǎng)站氣氛、特色的重要元素，是網(wǎng)站視覺(jué)形象的體現(xiàn)和延伸。將網(wǎng)站的LOGO、主菜單、底色等用整體統(tǒng)一的標(biāo)準(zhǔn)色，其他顏色只作為襯托點(diǎn)綴，形成主色調(diào)。這樣既利于網(wǎng)站主題的特別，又便于瀏覽者識(shí)別記憶。紅色是中國(guó)傳統(tǒng)吉祥、喜慶的民族色彩，素有"中國(guó)紅'一說(shuō)，而泛黃的紙色則具有歷史悠久感和文化的書(shū)卷味。此外，青色、暗紅色等也都多用于中國(guó)風(fēng)的網(wǎng)頁(yè)中。"漁'女裝網(wǎng)站(圖2)，運(yùn)用大面積的紅色作為網(wǎng)頁(yè)底色，這種濃郁的東方色彩，樹(shù)立了"漁'的與眾不同的品牌特色，網(wǎng)頁(yè)中左右側(cè)邊的裝飾圖案，體現(xiàn)了時(shí)尚與經(jīng)典結(jié)合的文化內(nèi)涵。主菜單和鏈接的自由又另類的編排方式，隨意、時(shí)尚、現(xiàn)代感極深。傳統(tǒng)色彩與現(xiàn)代元素互相交融，強(qiáng)調(diào)了傳統(tǒng)與現(xiàn)代的碰撞，使品牌更具個(gè)性和滲透力。

三、對(duì)稱的構(gòu)圖方式

對(duì)稱美在中國(guó)傳統(tǒng)美學(xué)中占有重要地位，中國(guó)古代的建筑格局、家居擺設(shè)、裝飾圖形等都廣泛的運(yùn)用此制定理念。中國(guó)風(fēng)網(wǎng)頁(yè)制定在圖文編排上整體也多為左右對(duì)稱結(jié)構(gòu)，局部較為自由，視覺(jué)上莊重平衡，排列有序。打開(kāi)"故宮博物院'網(wǎng)站(圖3)，整個(gè)頁(yè)面就像一幅懸掛的卷軸，鼠標(biāo)的滾動(dòng)如同使卷軸緩緩打開(kāi)，世界上最大的歷史文化藝術(shù)博物館由此展現(xiàn)。網(wǎng)頁(yè)的布局左右對(duì)稱，莊重整齊。金色、淺黃、暗紅的色調(diào)有著皇家的氣派和悠久的歷史氣息。

四、留白的手法

網(wǎng)頁(yè)中編排的內(nèi)容部分是實(shí)體，而實(shí)體之外的空間就是留白，它既可以是未放置任何圖形文字的空間，也可以是實(shí)體背后的一種顏色或圖形。在中國(guó)畫(huà)中，留白是一種十分重要的繪畫(huà)技巧，講求"密不透風(fēng)，疏可跑馬'。留白能更好地襯托主題，使人產(chǎn)生豐富的遐想。網(wǎng)頁(yè)制定中的留白使頁(yè)面有透氣的空間，其制定風(fēng)格清新流暢、主次分明。相比較信息量很大的網(wǎng)頁(yè)，留白會(huì)讓瀏覽者的閱讀舒適、放松，能達(dá)到更好的傳播效果。"漁'女裝網(wǎng)站的各個(gè)頁(yè)面都大量留白，視覺(jué)空間自由、靈動(dòng)，疏密對(duì)比激烈、主題特別，整體風(fēng)格高雅精致、形式感強(qiáng)。

如今，文化作為制定靈感的來(lái)源，越來(lái)越顯示出其強(qiáng)大的生命力和獨(dú)特的藝術(shù)價(jià)值。中國(guó)風(fēng)網(wǎng)頁(yè)就是將其獨(dú)有的傳統(tǒng)美學(xué)精神融入到現(xiàn)代制定的理念中去，引導(dǎo)網(wǎng)站整體風(fēng)格和文化氛圍，使瀏覽者充分感受到中國(guó)傳統(tǒng)文化的藝術(shù)魅力。

4在網(wǎng)頁(yè)制定中Flash的動(dòng)態(tài)圖像應(yīng)用

1、娛樂(lè)性的Flash動(dòng)態(tài)圖像應(yīng)用

網(wǎng)頁(yè)制定中依據(jù)網(wǎng)站的制定必須求和目的，關(guān)于娛樂(lè)、宣揚(yáng)性為主的網(wǎng)站或是其他類型的網(wǎng)站都會(huì)多多少少應(yīng)用娛樂(lè)、宣揚(yáng)性質(zhì)的Flash動(dòng)畫(huà)，使其達(dá)到像多媒體一樣具有豐富文字、音效、音樂(lè)、圖片美術(shù)等多種元素的效果，極大程度地加強(qiáng)了網(wǎng)頁(yè)制定的娛樂(lè)、公益宣揚(yáng)價(jià)值。網(wǎng)頁(yè)制定的任何動(dòng)態(tài)圖像都必須要運(yùn)用攝像的技巧，綜合合計(jì)和控制圖像的光線、聲音、畫(huà)面、色彩、整體場(chǎng)景、圖像比例及營(yíng)造氣氛這些元素，能夠盡可能的達(dá)到這些因素的是Flash，同時(shí)Flash形成的動(dòng)態(tài)圖像也能夠影響和支配瀏覽者和用戶的喜怒愛(ài)樂(lè)等情緒。

2、廣告收益性的Flash動(dòng)態(tài)圖像應(yīng)用

起初在我國(guó)網(wǎng)站的網(wǎng)頁(yè)制定的廣告85%是GIF格式簡(jiǎn)易動(dòng)畫(huà)效果，我國(guó)早期網(wǎng)頁(yè)制定中Flash動(dòng)態(tài)圖像的應(yīng)用并不是像如今如此普遍和廣泛。隨著不斷的發(fā)展，如今的以廣告角度的Flash動(dòng)態(tài)圖像的網(wǎng)頁(yè)制定是日益更新，并且表達(dá)的廣告創(chuàng)意新、潛力深，極大地吸引瀏覽者的關(guān)注度。因?yàn)楫?dāng)今win-dows98以上的系統(tǒng)程序已經(jīng)可以無(wú)必須下載Flash播放軟件，就直接看得到Flash制作的動(dòng)態(tài)圖像廣告，而且這樣獲得的利益是非?？捎^的，我國(guó)91%的網(wǎng)站都采用了Flash動(dòng)態(tài)圖像的網(wǎng)絡(luò)網(wǎng)頁(yè)廣告?，F(xiàn)在各大網(wǎng)站，如新浪網(wǎng)、搜狐網(wǎng)等網(wǎng)頁(yè)的Flash動(dòng)態(tài)圖像廣告數(shù)不勝數(shù)，甚至現(xiàn)在流行的微博，就像姚晨的微博，點(diǎn)擊率極高，其微博也都是使用Flash的動(dòng)態(tài)圖像使得微博的整體網(wǎng)頁(yè)效果達(dá)到個(gè)性、自我、時(shí)尚主題。

3、休閑性、單機(jī)型游戲的Flash動(dòng)態(tài)圖像應(yīng)用

如今，F(xiàn)lash動(dòng)態(tài)圖像通過(guò)交互式接口方式實(shí)現(xiàn)了交互式動(dòng)態(tài)圖像能夠結(jié)合聲音、文字、視頻影像、圖像美術(shù)、音效等整合在一個(gè)整體媒體環(huán)境，并能夠多渠道的進(jìn)行交流，使得休閑性、單機(jī)型游戲受到更多上班族、女生們的喜愛(ài)，創(chuàng)造出了Flash游戲的多〔溝通〕管道回饋功能，進(jìn)而促進(jìn)網(wǎng)絡(luò)網(wǎng)頁(yè)游戲的互動(dòng)性、有趣性。受到更多網(wǎng)民們的追逐，也使得網(wǎng)頁(yè)制定中加入了更多小型的、休閑的、單機(jī)型的Flash游戲。事實(shí)上，F(xiàn)lash游戲開(kāi)發(fā)繼續(xù)了多年的嘗試，游戲的功能和〔管理〕還是存在一定的限制，但是隨著FlashPlayer7的運(yùn)行性能提升了非常多(2倍變成5倍)，這些將會(huì)帶動(dòng)Flash的動(dòng)態(tài)圖像開(kāi)發(fā)的游戲發(fā)展到另一個(gè)高水平、高品質(zhì)、高效率發(fā)展，創(chuàng)造著越來(lái)越多的游戲，滿足現(xiàn)在網(wǎng)民們的必須求。

4、網(wǎng)站首頁(yè)開(kāi)頭的Flash動(dòng)態(tài)圖像應(yīng)用

現(xiàn)在，當(dāng)我們進(jìn)入任何一個(gè)網(wǎng)站時(shí)經(jīng)常會(huì)先出現(xiàn)一段動(dòng)態(tài)圖像來(lái)表達(dá)和展示網(wǎng)頁(yè)或網(wǎng)站的主題及中心，短短的幾秒炫目的、個(gè)性的動(dòng)畫(huà)并伴隨著音樂(lè)的播放，把主要的內(nèi)容通過(guò)簡(jiǎn)單的文字和直觀的動(dòng)態(tài)圖像清楚的展示在瀏覽者和用戶的眼前，幫助用戶更好的理解和進(jìn)入網(wǎng)站的情緒中，并融入網(wǎng)頁(yè)情景。這一段Flash動(dòng)畫(huà)可以說(shuō)是網(wǎng)站的歡迎頁(yè)面。但是網(wǎng)頁(yè)開(kāi)頭的動(dòng)畫(huà)一般會(huì)常常使用在企業(yè)形象或是個(gè)人個(gè)性、時(shí)尚網(wǎng)頁(yè)或是個(gè)人博客及微博中，不適用于如今的商務(wù)網(wǎng)站。由于