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