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