- 相關(guān)推薦
如何做網(wǎng)頁(yè)設(shè)計(jì)的10個(gè)小竅門
導(dǎo)語(yǔ)：網(wǎng)頁(yè)設(shè)計(jì)是根據(jù)企業(yè)希望向?yàn)g覽者傳遞的信息，進(jìn)行網(wǎng)站功能策劃，然后進(jìn)行的頁(yè)面設(shè)計(jì)美化工作。作為企業(yè)對(duì)外宣傳物料的其中一種，精美的網(wǎng)頁(yè)設(shè)計(jì)，對(duì)于提升企業(yè)的互聯(lián)網(wǎng)品牌形象至關(guān)重要。下面我們來(lái)看看如何做網(wǎng)頁(yè)設(shè)計(jì)的10個(gè)小竅門，希望對(duì)大家有所幫助。
1.記�。耗隳苷瓶氐臅r(shí)間是有限的
我僅僅用4秒鐘就能瀏覽完平常的頁(yè)面，因此，你沒(méi)有足夠的時(shí)間吸引用戶并讓他們繼續(xù)瀏覽你的網(wǎng)站。也就是說(shuō)你應(yīng)盡可能準(zhǔn)確的描述你設(shè)計(jì)的網(wǎng)站是關(guān)于什么的。如果它需要讓瀏覽者花費(fèi)更多的時(shí)間去弄明白此網(wǎng)站是關(guān)于什么的，他將放棄并離開(kāi)。
2、記�。河脩羰锹宰x頁(yè)面
當(dāng)你進(jìn)入一個(gè)房間時(shí)，你不會(huì)具體的看每一樣?xùn)|西的外表。首先你會(huì)注意屋子里面人或物的外形，你環(huán)視整個(gè)屋子，然后找令你敢興趣的東西。在第一次瀏覽網(wǎng)站的時(shí)候也會(huì)發(fā)生類似的事兒，瀏覽者或用戶首先是大體瀏覽一下。這就需要你引導(dǎo)用戶去你想要讓他們?nèi)サ牡胤�。它可能是個(gè)登陸按鈕、更多內(nèi)容按鈕、或博客文章等等
3、網(wǎng)站的左上角是最明顯的位置
這是大家公認(rèn)的事實(shí)。主要原因是大家都是用這種習(xí)慣方式來(lái)讀書(shū)讀文章的(從左上角的位置開(kāi)始)，另外早期的網(wǎng)站和應(yīng)用軟件也是基于此方法進(jìn)行設(shè)計(jì)開(kāi)發(fā)的。我們通常會(huì)把LOGO放在左上角，這樣是很好的。但是考慮一下加入一個(gè)或者兩個(gè)其他的元素在這個(gè)位置讓它看起來(lái)更明顯(注冊(cè)的鏈接、搜索的表單、標(biāo)語(yǔ)等)。
4了解“F”結(jié)構(gòu)
一些視覺(jué)跟蹤調(diào)查研究證明，用戶瀏覽網(wǎng)站的視覺(jué)路線類似于字母“F”型。最頂部的位置總是能被看到，中間區(qū)域僅有一半被看到，再往下只有左邊一部分能被看到。當(dāng)你在設(shè)計(jì)的時(shí)候不知道將一個(gè)內(nèi)容塊放到社么位置的時(shí)候，你可以去考慮一下這一因素。
5.了解用戶忽略什么
用戶都是對(duì)廣告視而不見(jiàn)的。他們習(xí)慣于忽略圖片廣告和文字廣告。避免設(shè)計(jì)的東西看上去像廣告，同時(shí)，用戶也會(huì)忽略大塊的文字區(qū)域。沒(méi)有人有時(shí)間(更確切的說(shuō)是耐心!)去閱讀大片的文字，他們僅僅是了解頁(yè)面文章的大意。
6.文字和圖片
一個(gè)有趣的事實(shí)是。文字比那些絕妙的圖片更能夠獲得注意!如果你想向你的用戶傳達(dá)信息，我建議你使用大的標(biāo)語(yǔ)文字來(lái)代替那些很炫的頭部圖片……
7.用設(shè)計(jì)元素來(lái)吸引注意
來(lái)吸引注意的好的元素是文字口號(hào)，行動(dòng)綱領(lǐng)的按鈕(通常用亮色調(diào))，分成1-2-3級(jí)，或者就是一個(gè)普通的列表……
如果你在寫(xiě)一篇很長(zhǎng)的文章，很重要的一件事情就是你要去找小標(biāo)題。小標(biāo)題比其他的內(nèi)容容易獲得關(guān)注。使用恰當(dāng)?shù)臉?biāo)題，通過(guò)這簡(jiǎn)單的步驟向用戶闡述這篇文章的主題。
8.文字格式
恰當(dāng)?shù)奈淖指袷降木幣鸥幸庥陂喿x。不要擔(dān)心使用過(guò)多的段落、加粗、斜體、引用、下劃線或者字母大小寫(xiě)……它們都可以讓文字塊更有視覺(jué)沖擊力。當(dāng)然，你也需要用格式化強(qiáng)調(diào)一些你認(rèn)為很重要的文字或者句子，這些能夠引導(dǎo)你的讀者閱讀完全文。
9.使用簡(jiǎn)潔圖片
我前面已經(jīng)提及過(guò)用戶對(duì)廣告是視而不見(jiàn)的。當(dāng)你在設(shè)計(jì)過(guò)程中使用到圖片時(shí)，要確保它們不要雜亂、令人討厭或不被理解。大部分人感覺(jué)看雜亂、色彩花哨的圖片是比較費(fèi)勁兒的。圖片應(yīng)該簡(jiǎn)潔、易理解的。
你使用人的臉部圖片更容易引起用戶的注意，尤其當(dāng)圖片人物的眼睛盯著用戶。當(dāng)然你也可以用目光的方向來(lái)引導(dǎo)用戶關(guān)注某一個(gè)方向。
10.使用留白
使用留白可以給某些元素更多的可視空間，如果某元素與邊距或其它元素太近就容易被混淆，那就需要給它留點(diǎn)呼吸的空間。尤其在文字與文字內(nèi)容之間。
平面設(shè)計(jì)的學(xué)習(xí)方法：
1、學(xué)習(xí)設(shè)計(jì)軟件
對(duì)于設(shè)計(jì)專業(yè)人士來(lái)說(shuō)，軟件是每個(gè)初學(xué)者都不能跳過(guò)的東西。任何職業(yè)都離不開(kāi)輔助工具的學(xué)習(xí)，所以任何設(shè)計(jì)從業(yè)者都離不開(kāi)設(shè)計(jì)軟件的學(xué)習(xí)。
設(shè)計(jì)用得比較多的軟件，如PS、Ai、CDR……但是平面設(shè)計(jì)最需要學(xué)習(xí)的軟件只是其中的一部分。掌握了這些，在通往專業(yè)平面設(shè)計(jì)師的道路上就接近了一半。對(duì)平面設(shè)計(jì)感興趣的人可以自己下載軟件，嘗試自己的應(yīng)用操作，看看自己對(duì)設(shè)計(jì)軟件的掌握程度如何。
2、學(xué)習(xí)平面知識(shí)
平面設(shè)計(jì)涵蓋了很多知識(shí)，種類繁多。從小字體圖標(biāo)到大顏色組合，都是平面設(shè)計(jì)師要掌握的知識(shí)。
平面設(shè)計(jì)種類：商業(yè)環(huán)境藝術(shù)設(shè)計(jì)、商業(yè)展示設(shè)計(jì)、商業(yè)廣告設(shè)計(jì)、書(shū)籍裝幀設(shè)計(jì)、包裝結(jié)構(gòu)與裝飾設(shè)計(jì)、服裝設(shè)計(jì)、工業(yè)產(chǎn)品設(shè)計(jì)、商業(yè)插畫(huà)、標(biāo)志設(shè)計(jì)、企業(yè)CI設(shè)計(jì)、網(wǎng)頁(yè)設(shè)計(jì)等。對(duì)于不同的設(shè)計(jì)類別，需要學(xué)習(xí)不同的重點(diǎn)知識(shí)。
3、做出項(xiàng)目作品
實(shí)踐是檢驗(yàn)真理的唯一標(biāo)準(zhǔn)。沒(méi)有實(shí)際經(jīng)驗(yàn)，理論學(xué)習(xí)就無(wú)法進(jìn)一步升華。當(dāng)知識(shí)積累到一定的程度后，需要通過(guò)實(shí)際項(xiàng)目來(lái)鍛煉自己的能力。
結(jié)合項(xiàng)目工作，既能運(yùn)用所學(xué)知識(shí)，又能發(fā)現(xiàn)項(xiàng)目應(yīng)用中存在的問(wèn)題。通過(guò)實(shí)踐訓(xùn)練，能夠結(jié)合項(xiàng)目深化和鞏固理論知識(shí)，這樣不僅學(xué)習(xí)和掌握了知識(shí)，而且還能有自己真正的大項(xiàng)目。
選用富有沖擊力的圖片元素
設(shè)計(jì)任何網(wǎng)站類型，恰到好處又吸引眼球的圖片總是非常重要的。雖然讀者通常只關(guān)注網(wǎng)站的內(nèi)容，但吸引人的相關(guān)圖片也可以起到對(duì)內(nèi)容補(bǔ)充的作用，同時(shí)也增添了美感。不過(guò)，在網(wǎng)頁(yè)中使用圖片元素時(shí)，不管它是靜態(tài)還是動(dòng)態(tài)圖片，都要注意顏色的搭配。顏色使用過(guò)多容易造成視覺(jué)混亂，使用單一顏色往往會(huì)產(chǎn)生強(qiáng)烈的視覺(jué)沖擊。
小心使用頁(yè)面空白
毫無(wú)疑問(wèn)，簡(jiǎn)潔的網(wǎng)頁(yè)設(shè)計(jì)成功的先決條件之一就是做到整潔有序。設(shè)計(jì)師在網(wǎng)頁(yè)中熟練地添加flash動(dòng)畫(huà)，視頻，3D圖形等多種元素的同時(shí)，不過(guò)應(yīng)盡量避免過(guò)度使用這些元素。如今，大家都經(jīng)常使用各種便攜式設(shè)備瀏覽網(wǎng)頁(yè)，因此也應(yīng)該充分考慮到移動(dòng)網(wǎng)絡(luò)用戶的需求。在網(wǎng)頁(yè)設(shè)計(jì)中，應(yīng)該小心，準(zhǔn)確地處理頁(yè)面的邊距和空白。但是，空白間距過(guò)多會(huì)讓網(wǎng)站失去吸引力。因此維持設(shè)計(jì)過(guò)程中的流動(dòng)性非常重要，切勿過(guò)度使用。
開(kāi)啟你的像素眼
任何與設(shè)計(jì)的相關(guān)工作，小細(xì)節(jié)都發(fā)揮大作用。網(wǎng)頁(yè)設(shè)計(jì)也不例外。想要成功設(shè)計(jì)出簡(jiǎn)潔的網(wǎng)站，你需要“第三只眼”來(lái)監(jiān)控這些小細(xì)節(jié)。網(wǎng)站的邊框，投影，高光和紋理等元素容易讓瀏覽者印象深刻，但設(shè)計(jì)師們往往卻忽略了這些小細(xì)節(jié)。在某些情況下，忽視動(dòng)畫(huà)和圖片的優(yōu)化問(wèn)題會(huì)影響到網(wǎng)頁(yè)圖像質(zhì)量。為了設(shè)計(jì)出最佳的網(wǎng)站圖片，可在Photoshop中啟用“對(duì)齊到像素”(Snap to Pixels)，對(duì)圖片進(jìn)行適當(dāng)?shù)膬?yōu)化。網(wǎng)頁(yè)中內(nèi)容排版錯(cuò)亂時(shí)有發(fā)生，這會(huì)從視覺(jué)上降低內(nèi)容的吸引力，影響讀者閱讀。
選用合適的字體
簡(jiǎn)潔的網(wǎng)頁(yè)設(shè)計(jì)成功離不開(kāi)排版，排版應(yīng)該獲得和圖片同樣的重視。雖然可供選擇的字體很多，設(shè)計(jì)師要考慮的方面很多，比如說(shuō)，目標(biāo)客戶和客戶公司的性質(zhì)。為網(wǎng)站頁(yè)眉和內(nèi)容選用合適的字體是必不可少的，無(wú)襯線字體(sans serif)和有襯線(sans serif)字體通常會(huì)為設(shè)計(jì)帶來(lái)良好的效果。除此之外，你還可以結(jié)合其它字體，專為孩子和女性打造網(wǎng)站。
為你的網(wǎng)站選擇合適的配色方案
任何網(wǎng)站的設(shè)計(jì)都離不了合適的配色方案，這對(duì)創(chuàng)建一個(gè)整潔干凈的網(wǎng)站同樣適用。堅(jiān)持使用淡色和非彩色的投影對(duì)成功設(shè)計(jì)一個(gè)簡(jiǎn)潔網(wǎng)站大有裨益。淺色的投影可以幫助用戶把焦點(diǎn)轉(zhuǎn)向網(wǎng)站內(nèi)容。標(biāo)志使用黑色和較深的投影，網(wǎng)頁(yè)中的頁(yè)眉和導(dǎo)航元素使用淺色背景，這些都是不錯(cuò)的案例，并沒(méi)有規(guī)定在簡(jiǎn)潔網(wǎng)頁(yè)設(shè)計(jì)中不能使用大膽的顏色，但是這樣的顏色要小心，克制地使用。有時(shí)候，網(wǎng)站有必要使用深色背景色來(lái)吸引某些目標(biāo)用戶。比起漸變色，有些網(wǎng)站更鐘愛(ài)純色。如果你的網(wǎng)站非得要使用紋理和漸變色，也不要用得太過(guò)火。
導(dǎo)航欄與可用性
你對(duì)網(wǎng)站設(shè)計(jì)滿意時(shí)，認(rèn)為一切都趨于完美，這時(shí)，你可以通過(guò)實(shí)際試用來(lái)測(cè)試它的使用性。不妨站在局外人的角度，客觀地對(duì)網(wǎng)站作出評(píng)價(jià)。在網(wǎng)站發(fā)布之前，你可以詢問(wèn)一下跟網(wǎng)站設(shè)計(jì)無(wú)關(guān)的人的看法。保持網(wǎng)站導(dǎo)航的直觀性，避免使用的導(dǎo)航元素讓初次訪問(wèn)者和技術(shù)新手產(chǎn)生挫敗感。
關(guān)于外觀的禁忌
1 不要先決定網(wǎng)頁(yè)的外觀，然后強(qiáng)迫自己甚至是強(qiáng)迫別人去適應(yīng)它。應(yīng)該從網(wǎng)站的瀏覽者、網(wǎng)站要傳達(dá)的信息以及網(wǎng)站的發(fā)展目標(biāo)考慮，設(shè)計(jì)出一個(gè)最適合的網(wǎng)頁(yè)架構(gòu)。
2 不要每頁(yè)都采用不同的背景圖片，以免每次轉(zhuǎn)頁(yè)都要花時(shí)間去下載。采用相同的背景色及近似的按鈕都能增加網(wǎng)頁(yè)一致性，樹(shù)立統(tǒng)一的風(fēng)格。這也是最基本的網(wǎng)站VI設(shè)計(jì)(視覺(jué)識(shí)別系統(tǒng))。
3 不要把圖片的白色部分當(dāng)作是透明的顏色，要知道別人的操作系統(tǒng)是并不一定會(huì)將底色設(shè)為白色的。解決的方法是把網(wǎng)頁(yè)的底色設(shè)為白色。而最好的方法是用圖片編輯工具為圖片設(shè)置好透明底色。
4 底色或背景須與文字顏色形成明顯對(duì)比，方便閱讀。若你的網(wǎng)頁(yè)里有較多文字，不妨在這方面下多點(diǎn)功夫，力求讓瀏覽者能舒適閱讀你的文章。
5 每頁(yè)的排版不要太疏或用太大的字，盡量避免看網(wǎng)頁(yè)的時(shí)候要作很大的卷動(dòng)。
6 太長(zhǎng)的一頁(yè)要使用內(nèi)部鏈接，聰明的網(wǎng)頁(yè)設(shè)計(jì)者不會(huì)讓瀏覽者在看網(wǎng)頁(yè)時(shí)太多卷動(dòng)。常見(jiàn)的內(nèi)部鏈接例子如 FAQ、或名詞解釋。
7 在17寸顯示器尚未普及的時(shí)候，不要以 800x600 以上的像素設(shè)計(jì)網(wǎng)頁(yè)。因?yàn)檫@常常會(huì)導(dǎo)致設(shè)計(jì)上的判斷失誤。因此，無(wú)論你有再大的顯示器，能上再大的分辨率，將顯示器設(shè)置成 800x600的顯示模式是適當(dāng)?shù)摹?-
8 不要于每頁(yè)插入太多的廣告牌。相信你也不會(huì)喜歡貼滿廣告的網(wǎng)頁(yè)。什么廣告交換、點(diǎn)錢Banner、彈出窗口，還有時(shí)下最流行卻又最討厭的浮動(dòng)廣告，還是少放為妙。至少,當(dāng)我看到的時(shí)候，是會(huì)第一時(shí)間按右上角的“X”的。
關(guān)于操守的禁忌
1 不要抄襲別人的創(chuàng)作。網(wǎng)絡(luò)上的所有資料都是公開(kāi)的，但都有版權(quán)的，若想引用別人的作品，不妨先征得同意，一般作者都只要你注明出處，對(duì)于電腦方面的東西，大多數(shù)朋友都是熱情而慷慨的。更不要下載了別人的網(wǎng)站后，當(dāng)作是自己的放在網(wǎng)上，這樣做的結(jié)果是使所有人都知道你是個(gè)剽竊者。
2 引用 Newsgroup、BBS、或其他非電子傳媒的文章，切記要注明原作者名稱及文章事源，若引用別有的網(wǎng)頁(yè)更要通知網(wǎng)主。尊重版權(quán)，避免官司，利人利已。
3 不要利用網(wǎng)頁(yè)散布謠言、中傷他人，網(wǎng)絡(luò)雖然難管理，但本著道德良心，都應(yīng)潔身自愛(ài)。維持良好網(wǎng)絡(luò)環(huán)境，要靠大家努力，從我做起。
4 不要將別人的網(wǎng)頁(yè)變成你的框架中的一個(gè)窗口，這樣不僅為瀏覽者帶來(lái)不便，令人的網(wǎng)頁(yè)更丑陋，而且也侵犯了別人的版權(quán)，解決方法是采用鏈接中的 target 參數(shù)，如 target="_top" ，或是target="_blank" 從新窗口打開(kāi)網(wǎng)頁(yè)等。若重視訪問(wèn)者的感受請(qǐng)從每一細(xì)節(jié)做起。
5 不要將別人正在使用的搜索引擎、表單及計(jì)數(shù)器等放到自己的網(wǎng)頁(yè)中，這樣做會(huì)擾亂其正常運(yùn)作、增加該服務(wù)器的負(fù)荷，除非該主人表示可以連到他的 cgi-bin 或 JavaClass。
網(wǎng)頁(yè)設(shè)計(jì)需要具備的專業(yè)技能：
網(wǎng)頁(yè)設(shè)計(jì)師的工作目標(biāo)是通過(guò)使用更合理的顏色、字體、圖片、樣式進(jìn)行頁(yè)面設(shè)計(jì)美化，在功能限定的情況下，盡可能給予用戶完美的視覺(jué)體驗(yàn)。高級(jí)的網(wǎng)頁(yè)設(shè)計(jì)甚至?xí)紤]到通過(guò)聲光、交互等來(lái)實(shí)現(xiàn)更好的試聽(tīng)感受。
1，了解網(wǎng)頁(yè)的程序?qū)崿F(xiàn)，作為網(wǎng)頁(yè)設(shè)計(jì)師，當(dāng)然不必跟程序員一樣會(huì)書(shū)寫(xiě)腳本代碼，但是必須要了解網(wǎng)頁(yè)的程序?qū)崿F(xiàn)方式，因?yàn)楝F(xiàn)在互聯(lián)網(wǎng)90%以上的網(wǎng)站都是動(dòng)態(tài)網(wǎng)頁(yè)，都是需要?jiǎng)討B(tài)程序支持的，所以在做網(wǎng)頁(yè)設(shè)計(jì)的時(shí)候需要考慮頁(yè)面動(dòng)態(tài)程序的實(shí)現(xiàn);
2，DIV+CSS，這是一種網(wǎng)頁(yè)前臺(tái)排版布局的技術(shù)，利用這種技術(shù)可以更好的使搜索引擎爬行網(wǎng)頁(yè)，加速用戶打開(kāi)頁(yè)面的速度;
3，.PHOTOSHOP，這是平面設(shè)計(jì)人員常用的工具，網(wǎng)頁(yè)設(shè)計(jì)其實(shí)也是平面設(shè)計(jì)的一種，但是因?yàn)榫W(wǎng)頁(yè)設(shè)計(jì)又要必須符合網(wǎng)頁(yè)制作的一些規(guī)范，所以又有別于平面設(shè)計(jì)了;
4，DREAMWEAVER，這是一款專業(yè)的網(wǎng)頁(yè)制作工具，用PHOTOSHOP設(shè)計(jì)出網(wǎng)頁(yè)平面，那只是一張平面圖，而在互聯(lián)網(wǎng)上瀏覽的一張張網(wǎng)頁(yè)都是使用html網(wǎng)頁(yè)格式語(yǔ)言進(jìn)行格式化排版布局的，所以專業(yè)的網(wǎng)頁(yè)設(shè)計(jì)人員是要掌握網(wǎng)頁(yè)制作的知識(shí)的;
5，F(xiàn)LASH，我們經(jīng)常在網(wǎng)頁(yè)上看到一些比較炫目的動(dòng)畫(huà)效果，這些效果就是通過(guò)FLASH這個(gè)軟件實(shí)現(xiàn)，作為網(wǎng)頁(yè)設(shè)計(jì)師，不一定要能做出很酷很炫的效果，但是掌握這些動(dòng)畫(huà)的基本原理，會(huì)一些小動(dòng)畫(huà)的制作也是必要的。
網(wǎng)頁(yè)設(shè)計(jì)就業(yè)前景分析：
目前的網(wǎng)站設(shè)計(jì)師新手的薪資一般是在3000--4000元左右，隨著專業(yè)技能和工作經(jīng)驗(yàn)的積累，薪資也會(huì)隨之增長(zhǎng)，一個(gè)有經(jīng)驗(yàn)的網(wǎng)站設(shè)計(jì)師，薪資可以達(dá)到5000--7000元，而如果有能力勝任更高的職位，比如說(shuō)首席網(wǎng)站設(shè)計(jì)師，平均月薪是不會(huì)低于8000元以下的。而且在積累了豐富的經(jīng)驗(yàn)之后，還會(huì)有更高的發(fā)展方向，可以往程序開(kāi)發(fā)或是架構(gòu)設(shè)計(jì)師的方向發(fā)展，讓自己進(jìn)入更高的職位，擁有更客觀的收入。
【如何做網(wǎng)頁(yè)設(shè)計(jì)的10個(gè)小竅門】相關(guān)文章：
關(guān)于如何做好網(wǎng)頁(yè)設(shè)計(jì)的十個(gè)小竅門03-04
如何做好自適應(yīng)網(wǎng)頁(yè)的設(shè)計(jì)05-18
如何做高大上的半透明網(wǎng)頁(yè)設(shè)計(jì)05-11
網(wǎng)頁(yè)設(shè)計(jì)中多元素是如何做到統(tǒng)一01-17
網(wǎng)頁(yè)設(shè)計(jì)案例分享:網(wǎng)頁(yè)專題設(shè)計(jì)技巧04-04
網(wǎng)頁(yè)設(shè)計(jì)的設(shè)計(jì)要素07-10
網(wǎng)頁(yè)設(shè)計(jì)的設(shè)計(jì)要點(diǎn)05-16
網(wǎng)頁(yè)設(shè)計(jì)師應(yīng)聘網(wǎng)頁(yè)設(shè)計(jì)職位05-19