網(wǎng)站設(shè)計(jì)教程

成都網(wǎng)站設(shè)計(jì)-創(chuàng)新互聯(lián)設(shè)計(jì)師專(zhuān)業(yè)美院畢業(yè)的設(shè)計(jì)師，對(duì)色彩搭配、網(wǎng)站結(jié)構(gòu)布局，以及用戶(hù)體驗(yàn)都有非常好的把控，對(duì)于設(shè)計(jì)行業(yè)來(lái)講，網(wǎng)站設(shè)計(jì)也變成企業(yè)的標(biāo)配設(shè)計(jì)之一，下面成都網(wǎng)站設(shè)計(jì)公司小編來(lái)分享下網(wǎng)站設(shè)計(jì)教程。

1.網(wǎng)站界面尺寸設(shè)置

網(wǎng)站的首要，首當(dāng)其沖的就是尺寸。尺寸，顧名思義，就是說(shuō)的頁(yè)面的高度和寬度，而根據(jù)實(shí)際需要，又分為不同載體的尺寸需要適應(yīng)。

普及一個(gè)小常識(shí)，尺寸我們用分辨率來(lái)表示，分辨率的單位是像素，也就是px，英文是pixel，在屏幕上展示的尺寸通常就用px表示。px值需要設(shè)置72px，多了和少了都不行，而印刷才需要設(shè)置300px分辨率，配合米和毫米等這樣的計(jì)量單位。

接著說(shuō)，根據(jù)載體不同，尺寸也大致分為電腦版，手機(jī)版兩種。這兩種尺寸是有區(qū)別的。比如，電腦版?zhèn)戎卮笃聊徽故倔w驗(yàn)，手機(jī)版?zhèn)戎卣∑聊伙@示體驗(yàn)，因?yàn)樵谛∑聊皇謾C(jī)去看大尺寸的頁(yè)面，字體會(huì)小的令人看不見(jiàn)，所以需要設(shè)計(jì)兩個(gè)尺寸，或者，如果想兩個(gè)尺寸可以通用，就要有意識(shí)的把電腦版的字號(hào)放大很多，設(shè)計(jì)區(qū)域也要居中緊湊的排布。

通常，設(shè)計(jì)頁(yè)面的寬度比較容易，因?yàn)殡娔X屏幕的寬度我們已知，而頁(yè)面內(nèi)容說(shuō)不好，需要根據(jù)實(shí)際內(nèi)容調(diào)整，所以先確定頁(yè)面寬度。

頁(yè)面的寬度，取決于當(dāng)前全球用戶(hù)所使用的電腦顯示器屏幕的尺寸。

一般來(lái)說(shuō)，如果采用無(wú)自適應(yīng)程序去制作的頁(yè)面，需要格外考慮用戶(hù)屏幕的可視范圍，特別是小屏幕的筆記本電腦的展示效果。

因?yàn)轫?yè)面沒(méi)有自適應(yīng)能力，也就是沒(méi)有根據(jù)屏幕的大小來(lái)縮放頁(yè)面內(nèi)容的話(huà)，就會(huì)看不全核心設(shè)計(jì)區(qū)域的內(nèi)容。通常市面上筆記本電腦的寬度，最小在1200像素左右，所以，無(wú)自適應(yīng)的頁(yè)面，文字設(shè)計(jì)區(qū)域要控制在1000px~1200px以?xún)?nèi)，而旁邊的延伸寬度，是為了大屏幕而準(zhǔn)備的，如果沒(méi)有左右延伸區(qū)域，大屏幕電腦看上去就很難看，頁(yè)面就顯得很小。

再說(shuō)一下頁(yè)面高度的設(shè)置。頁(yè)面高度，由于是根據(jù)內(nèi)容多少而定，但不建議超過(guò)3屏，因?yàn)轫?yè)面如果太長(zhǎng)，一是會(huì)導(dǎo)致客戶(hù)沒(méi)有耐心看完，二是會(huì)導(dǎo)致頁(yè)面質(zhì)量太重而加載速度慢，影響用戶(hù)體驗(yàn)，所以高度在3000px以?xún)?nèi)為佳。

2、頁(yè)面程序

設(shè)計(jì)頁(yè)面再好，沒(méi)有好的程序支持同樣白搭。談網(wǎng)站設(shè)計(jì)，不論是官網(wǎng)設(shè)計(jì)、網(wǎng)頁(yè)設(shè)計(jì)還是電商頁(yè)面設(shè)計(jì)，設(shè)計(jì)人員都需要懂技術(shù)原理，不然很難將設(shè)計(jì)很好的完美落地。就像機(jī)器人，只有一副好看的皮囊，是無(wú)法運(yùn)作的，需要程序去支持，才能動(dòng)起來(lái)。那么先說(shuō)一下，網(wǎng)站用的哪些程序做的。

做頁(yè)面，過(guò)去通常使用的是靜態(tài)HTML格式語(yǔ)言編寫(xiě)，動(dòng)態(tài)效果會(huì)用到JAVA，以及C+語(yǔ)言，不過(guò)那些都已經(jīng)過(guò)時(shí)了，如果但凡想做動(dòng)態(tài)頁(yè)面，有的人會(huì)說(shuō)使用FLASH制作網(wǎng)頁(yè)，但是FLASH有許多硬傷，同樣已經(jīng)沒(méi)人用FLASH做頁(yè)面，而是專(zhuān)注用FLASH做動(dòng)畫(huà)視頻了。那么現(xiàn)在通常做網(wǎng)頁(yè)都用什么程序?qū)懩?？答案是HTML5。

這個(gè)HTML5簡(jiǎn)稱(chēng)H5，是大概3年前由微軟發(fā)起，后來(lái)飛速發(fā)展了幾年，到2014年才被廣泛應(yīng)用。H5的興起，無(wú)疑對(duì)網(wǎng)站開(kāi)發(fā)起到了推波助瀾的作用，網(wǎng)頁(yè)的設(shè)計(jì)大量的引用H5動(dòng)態(tài)設(shè)計(jì)，那么H5有哪些好處呢？H5首先是解決了動(dòng)態(tài)的問(wèn)題，讓頁(yè)面活起來(lái)了。過(guò)去，要實(shí)現(xiàn)動(dòng)態(tài)，簡(jiǎn)單的可以用JAVA實(shí)現(xiàn)，復(fù)雜的動(dòng)態(tài)則需要用FLASH去搭配完成，再嵌入到頁(yè)面之中。那樣做的缺點(diǎn)很明顯，一個(gè)是FLASH占的質(zhì)量比較大，容易導(dǎo)致用戶(hù)打開(kāi)頁(yè)面卡頓，從而關(guān)閉網(wǎng)頁(yè)，二是因?yàn)镕LASH是寫(xiě)死的，因此搜索引擎無(wú)法抓取FLASH中的關(guān)鍵詞，進(jìn)而導(dǎo)致網(wǎng)站很難被搜索引擎檢索到，這是FLASH站點(diǎn)的核心痛點(diǎn)。

所以，很多客戶(hù)會(huì)忍痛選擇了全靜態(tài)頁(yè)面作為網(wǎng)站的官網(wǎng)，雖然那樣會(huì)缺乏活力。所以，設(shè)計(jì)人員會(huì)考慮加入GIF動(dòng)畫(huà)和簡(jiǎn)單的導(dǎo)航JAVA點(diǎn)擊動(dòng)態(tài)效果，當(dāng)然，那只是簡(jiǎn)單的動(dòng)態(tài)，根本沒(méi)有革命性的動(dòng)態(tài)去發(fā)揮余地。

隨著互聯(lián)網(wǎng)化的新數(shù)碼時(shí)代的到來(lái)，智能手機(jī)已經(jīng)越來(lái)越普遍，每個(gè)人都用用N個(gè)移動(dòng)設(shè)備，已經(jīng)不僅擁有笨重的臺(tái)式機(jī)，而更愿意將各種終端移動(dòng)辦公娛樂(lè)。比如手機(jī)、平板、pC和TV，需要無(wú)線(xiàn)互聯(lián)，因而出現(xiàn)了云技術(shù)，連接了所有的移動(dòng)終端設(shè)備，讓人和設(shè)備永遠(yuǎn)分不開(kāi)。說(shuō)這些的用意，在于強(qiáng)調(diào)各終端作為載體的界面，對(duì)設(shè)計(jì)人員和程序人員的開(kāi)發(fā)影響。

拿到一個(gè)網(wǎng)頁(yè)設(shè)計(jì)需求后，首先看這個(gè)頁(yè)面的實(shí)現(xiàn)形式，是單一JpG圖片嵌入，還是復(fù)合HTML圖文程序，這兩種設(shè)計(jì)起來(lái)是兩個(gè)思路。如果是JpG形式，那么側(cè)重考慮的就是頁(yè)面的單張圖片質(zhì)量問(wèn)題，如果是HTML形式，就要側(cè)重考慮動(dòng)態(tài)實(shí)現(xiàn)和圖文精準(zhǔn)定位問(wèn)題。

當(dāng)一個(gè)JpG頁(yè)面做好之后，接下來(lái)就是需要考慮切圖問(wèn)題，哪些圖是一定要切出來(lái)的？按鈕、注冊(cè)表、動(dòng)態(tài)區(qū)域的底圖，是需要單獨(dú)切出來(lái)的。如果是一個(gè)HTML頁(yè)面，如果區(qū)域劃分功能比較多，就都需要切圖切出來(lái)，在pS中分為一個(gè)個(gè)模塊，切成pNG圖片之后，再用HTML工具寫(xiě)入語(yǔ)言，把切片嵌入網(wǎng)頁(yè)，再調(diào)試，調(diào)試過(guò)程中，會(huì)出現(xiàn)各種諸如對(duì)齊這樣的問(wèn)題。HTML的制作時(shí)間和精力，都比純JpG頁(yè)面要大很多。如果要用到動(dòng)態(tài)，比如動(dòng)畫(huà)效果，需要單獨(dú)對(duì)動(dòng)態(tài)對(duì)象寫(xiě)語(yǔ)言，讓它動(dòng)起來(lái)，然后不斷調(diào)試，更復(fù)雜一些。因此，現(xiàn)在最常用的頁(yè)面設(shè)計(jì)還是JpG圖片的形式做的。那么，具體要用哪種程序做呢？我認(rèn)為，持續(xù)用時(shí)間比較久的頁(yè)面通常用HTML或H5設(shè)計(jì)，一次性的或者短期活動(dòng)推廣頁(yè)面通常用JpG形式，因?yàn)橄鄬?duì)來(lái)說(shuō)更快。

3，頁(yè)面邏輯

談到頁(yè)面頁(yè)面邏輯，我想打個(gè)比方。比如你有很好看的外表，很好看的衣服，很好看的身材，但是，如果頭和身體的比例搞錯(cuò)了，嚴(yán)重嗎？其實(shí)，頁(yè)面也是有“身材比例”的。頁(yè)面的邏輯，通俗來(lái)講，其實(shí)就是說(shuō)的，頁(yè)面上放啥，放多少，先放啥后放啥，讓人先看啥后看啥，諸如這些問(wèn)題。

一個(gè)好的頁(yè)面邏輯，是貫穿文案、圖片的主脈絡(luò)，沒(méi)有這條主線(xiàn)，就像大樓沒(méi)有根基，不知道為什么要蓋樓，會(huì)導(dǎo)致最后蓋出來(lái)的樓歪歪扭扭，不知是什么東西，當(dāng)然也不會(huì)好看，所以，頁(yè)面邏輯何其重要不言而喻。

那么好，現(xiàn)在來(lái)講一下如何來(lái)策劃頁(yè)面邏輯。你需要知道這個(gè)頁(yè)面想要表達(dá)什么，想要傳達(dá)給客戶(hù)什么核心要素，分清楚一二三，級(jí)別不要太多，也不要試圖表達(dá)太多，要知道，太多也沒(méi)人看的完。思考過(guò)后，再將你的思路列到一個(gè)文檔之中，再次梳理，刪減掉那些客戶(hù)不想看的，也不需要客戶(hù)看的信息點(diǎn)，切記不要表達(dá)太多信息量，要精練總結(jié)，層次感要規(guī)劃出來(lái)。

4，文案策劃

當(dāng)頁(yè)面邏輯搞清楚之后，就可以進(jìn)入到文案撰寫(xiě)的步驟了。通常，文案是有專(zhuān)人負(fù)責(zé)的，但有時(shí)候是由策劃師或設(shè)計(jì)師來(lái)撰寫(xiě)的。關(guān)于文案，我的個(gè)人建議是，文案撰寫(xiě)，需要順承頁(yè)面表達(dá)的邏輯性，兼顧設(shè)計(jì)排版的美觀(guān)性，最好有全局眼光，這樣再往下執(zhí)行的時(shí)候，才不會(huì)導(dǎo)致反復(fù)修改文案。一個(gè)好的文案，就像一個(gè)謀士，一個(gè)好的設(shè)計(jì)，就像一個(gè)將軍，一個(gè)好的策略，就像一個(gè)元帥，在出兵打仗之前，這三種職能的團(tuán)隊(duì)成員，最好能碰一碰，一起進(jìn)行討論，提高工作效率。

在文案的撰寫(xiě)過(guò)程中，需要注意的是，言簡(jiǎn)意賅，主次分明，渲染主題，謹(jǐn)慎描述。

5，設(shè)計(jì)布局

當(dāng)以上步驟做好，設(shè)計(jì)師就準(zhǔn)備出馬了。設(shè)計(jì)著陸頁(yè)前，拿到文案和要求后，設(shè)計(jì)師要先將頁(yè)面合理的布局。建議拿出一張白紙，畫(huà)出頁(yè)面的寬度和預(yù)期高度，再打開(kāi)文案，對(duì)照文案，在紙上用筆勾勒一個(gè)布局圖。就像排兵布陣，火槍手排在哪，弓弩手排在哪，騎手排在哪，文字排在哪，圖片排在哪，首先要在大腦中有一個(gè)印象，做到胸有成竹心不亂。

在布局頁(yè)面時(shí)，要注意頁(yè)面的“骨骼”。也就是說(shuō)，分幾大塊，大致可分為，頭部、軀干和底部。在頭部和底部的設(shè)計(jì)中，大致我們應(yīng)該有“模板”，就是根據(jù)官網(wǎng)頁(yè)面的頭尾來(lái)設(shè)置，通常做法是做的一摸一樣，但有時(shí)候需要精簡(jiǎn)內(nèi)容，畢竟是著陸頁(yè)，更突出的是活動(dòng)主題。頁(yè)面的“軀干”部分，是要再細(xì)分的，比如有三個(gè)活動(dòng)，那么設(shè)計(jì)師就要分為三塊來(lái)設(shè)計(jì)圖文組合。

“軀干”的上部分，一般是采用一個(gè)大的主畫(huà)面來(lái)表達(dá)，做過(guò)電商頁(yè)面的都知道，這一塊是畫(huà)面的臉面，一定要做的炫酷，做出活動(dòng)味道來(lái)。中部，也是主體部分，主要是將軀干的四肢合理的擺上去，有條不紊，切忌雜亂無(wú)主次關(guān)系。下部分，通常是對(duì)本活動(dòng)的細(xì)節(jié)描述和介紹，這部分不建議過(guò)于搶鏡，讓這部分處在配角的位置比較合理。

關(guān)于頭、軀干、尾巴的關(guān)系分出來(lái)，再分軀干中的上中下，都分出來(lái)后，將文字大標(biāo)題單獨(dú)摘出來(lái)，占位，再把活動(dòng)描述與大標(biāo)題做一個(gè)組合，然后再把要配的相應(yīng)圖片區(qū)域規(guī)劃出來(lái)，基本上框架圖就搭好了。搭好框架，再反復(fù)對(duì)照策略邏輯進(jìn)行檢測(cè)，如果有不符合用戶(hù)視覺(jué)習(xí)慣的結(jié)構(gòu)，隨時(shí)修改。

要留意的是，頁(yè)面最好不要超過(guò)三屏，避免結(jié)構(gòu)太長(zhǎng)和細(xì)節(jié)太繁瑣。

6，設(shè)計(jì)色彩

對(duì)于頁(yè)面來(lái)講，色彩也是至關(guān)重要的一環(huán)。每個(gè)頁(yè)面都應(yīng)該有獨(dú)特的氣質(zhì)，而表達(dá)氣質(zhì)的是風(fēng)格，風(fēng)格也就是調(diào)性，做設(shè)計(jì)先定調(diào)性，這是第一步，也是最關(guān)鍵的一步。色彩可以給人的視覺(jué)以第一感官，視覺(jué)傳達(dá)的精髓也在于“首輪效應(yīng)”，就是視覺(jué)沖擊力，也叫視覺(jué)表現(xiàn)力，這種表現(xiàn)力的強(qiáng)弱，直接決定了文案的表現(xiàn)力。如果學(xué)策略看《定位》，學(xué)設(shè)計(jì)看《視覺(jué)錘》，那么，正如《視覺(jué)錘》中所說(shuō)，語(yǔ)言是釘子，視覺(jué)就是錘子，好的釘子要想打到用戶(hù)心中，就要用視覺(jué)的錘子，通過(guò)客戶(hù)的眼睛，敲進(jìn)客戶(hù)的心里，讓文案深深的鎖定客戶(hù)的心智。雖然聽(tīng)起來(lái)蠻狠的，但是在應(yīng)用的時(shí)候，卻沒(méi)那么容易。

我們都有網(wǎng)購(gòu)的經(jīng)驗(yàn)，當(dāng)看到京東、蘇寧、天貓等電商的促銷(xiāo)頁(yè)面時(shí)，第一感覺(jué)是不是影響你是否往下看？色彩，是不是吸引你的一個(gè)很大的原因呢？答案時(shí)肯定的。當(dāng)人看到一個(gè)頁(yè)面時(shí)，首先眼睛會(huì)受到刺激，刺激眼睛的就是色彩。那么，色彩該如何使用，在網(wǎng)頁(yè)設(shè)計(jì)中，應(yīng)該如何選擇色彩呢？

色彩，本沒(méi)有好壞，只有適不適合，搭配是否符合美的法則，符合美的法則。在這我們先回顧一下過(guò)去大學(xué)學(xué)過(guò)的基礎(chǔ)知識(shí)，形式美法則。形式美法則是人類(lèi)在創(chuàng)造美的形式、美的過(guò)程中對(duì)美的形式規(guī)律的經(jīng)驗(yàn)總結(jié)和抽象概括。主要包括，對(duì)稱(chēng)均衡、單純齊一、調(diào)和對(duì)比、比例、節(jié)奏韻律和多樣統(tǒng)一。我們學(xué)過(guò)三大構(gòu)成，平面構(gòu)成、色彩構(gòu)成和立體構(gòu)成，其中，平面構(gòu)成和色彩構(gòu)成，可以運(yùn)用在我們的頁(yè)面設(shè)計(jì)之中。

如何選擇合適的色彩呢？首先，看所設(shè)計(jì)的行業(yè)屬性，其次，看所表達(dá)情緒的調(diào)性，最后，合理的搭配，謹(jǐn)慎地使用你的色彩。雖然設(shè)計(jì)師需要大膽的想象，但也要“帶著腳銬跳舞”，也就是說(shuō)，設(shè)計(jì)需要符合設(shè)計(jì)的“科學(xué)法則”，需要符合“形式美法則”?？此齐s亂無(wú)章的設(shè)計(jì)，如果你覺(jué)得好看，雖然你說(shuō)不出來(lái)，但請(qǐng)注意，你所看的這個(gè)頁(yè)面，符合“形式美法則”。

好，我們接著說(shuō)如何配色的問(wèn)題。選定了行業(yè)，選定了調(diào)性，接下來(lái)，選定一套配色。這套配色不建議太花哨，而是需要以一個(gè)主色為基礎(chǔ)，搭配其他輔助配色為點(diǎn)綴，并制定出本頁(yè)面的“設(shè)計(jì)法則”。比如，底色用什么顏色，頁(yè)面分為什么結(jié)構(gòu)，是一種底色還是切分為多塊底色，是否需要在文字下方再襯一塊底色，這塊底色是否需要有一個(gè)特殊的形狀。

再說(shuō)一下主畫(huà)面的配色問(wèn)題，主畫(huà)面的配色，需要綜合考慮字體和圖片的搭配，特別要留意的是，主題打字一定要醒目，要與背景色有明線(xiàn)的區(qū)分，簡(jiǎn)單說(shuō)，就是要“跳出來(lái)”。為什么要“跳出來(lái)”，是因?yàn)檫@塊內(nèi)容是用戶(hù)打開(kāi)網(wǎng)頁(yè)的第一屏，直接影響到用戶(hù)是否看下去的行動(dòng)，同時(shí)，第一屏的主題也直接反應(yīng)出本頁(yè)面所表達(dá)的活動(dòng)主題思想，所以建議，主題字區(qū)域要好好的精心設(shè)計(jì)，主要考慮的是，主題字與主題圖的關(guān)系問(wèn)題。

在用色方面，不同行業(yè)也有一套不同的標(biāo)準(zhǔn)，比如，電商促銷(xiāo)用什么顏色最好，紅色、黃色，為什么，因?yàn)榧t色黃色給人沖動(dòng)感，激情感，讓人產(chǎn)生容易沖動(dòng)消費(fèi)的心情。再比如，金融類(lèi)網(wǎng)站用什么顏色最好，藍(lán)色、橙色，因?yàn)樗{(lán)色給人信賴(lài)感，橙色給人親和感，當(dāng)然，需要搭配整體主題去設(shè)計(jì)。

剛才說(shuō)的是色相（就是什么顏色），其實(shí)色彩還有另外兩個(gè)指標(biāo)，明度（俗話(huà)說(shuō)明亮度）和純度（也叫飽和度）。在明度上，越明亮的色彩，給人越高漲的心情，在純度上，約純的色彩，給人越刺激的心情。在色相上，分為冷色和暖色，冷色就是藍(lán)色、綠色、紫色類(lèi)，暖色就是紅色、橙色、黃色類(lèi)，冷色給人專(zhuān)業(yè)、高冷的感受，暖色給人沖動(dòng)、親和的感受。表示色彩可以通過(guò)一個(gè)色環(huán)來(lái)看，色環(huán)上表現(xiàn)了所有的色相。

鄰近色，就是在色帶上相鄰近的顏色，例如綠色和藍(lán)色，紅色和黃色就互為鄰近色。三原色中，任何一種顏色即是其他兩種原色等量混合的補(bǔ)色。在色相環(huán)中，處于直徑位置的兩色互為補(bǔ)色。在色相環(huán)中每一個(gè)顏色對(duì)面(180度對(duì)角)的顏色，稱(chēng)為“對(duì)比色(互補(bǔ)色)”。把對(duì)比色放在一起，會(huì)給人強(qiáng)烈的排斥感，若混合在一起，會(huì)調(diào)出渾濁的顏色，如，紅與綠，藍(lán)與橙，黃與紫互為對(duì)比色。在色輪上，90度角內(nèi)相鄰接的色統(tǒng)稱(chēng)為類(lèi)似色，所以在使用色彩的時(shí)候，需要考慮到這些基礎(chǔ)知識(shí)的運(yùn)用。

這些色彩知識(shí)，是作為一個(gè)設(shè)計(jì)師必須爛熟于心的原理，看似輕松的設(shè)計(jì)用色，都是要靠美學(xué)原理支撐，設(shè)計(jì)就靠這些原理來(lái)指導(dǎo)，用色和排版，都需要有理由，不要說(shuō)憑感覺(jué)這種話(huà)。

7，設(shè)計(jì)字體

現(xiàn)在有很多字體設(shè)計(jì)師設(shè)計(jì)的非常棒，但也有很多不得要領(lǐng)的初學(xué)者。其實(shí)，字體設(shè)計(jì)，也是一門(mén)大學(xué)課程，科班出身的設(shè)計(jì)人員應(yīng)該有印象。在字體設(shè)計(jì)中，需要注意的問(wèn)題，是字體的“性格”。對(duì)，不光色彩有“性格”，字體也是有“性格”的。字體分為幾種類(lèi)型，分別是襯線(xiàn)體、無(wú)襯線(xiàn)體、書(shū)法體、裝飾體。雖然文字有歐洲文字、亞洲文字，以及阿拉伯文字三種語(yǔ)系，但同樣根據(jù)字體的造型原理，將字體區(qū)分。為了好理解，我打個(gè)比方，襯線(xiàn)體是宋體（也就是帶鉤的），無(wú)襯線(xiàn)體就是黑體（不帶鉤的），書(shū)法體就是毛筆鋼筆寫(xiě)出的字體，裝飾字體（也叫廣告體，是經(jīng)過(guò)設(shè)計(jì)過(guò)的再造字體）。

在網(wǎng)頁(yè)設(shè)計(jì)中，特別是主題著陸頁(yè)的設(shè)計(jì)中，我們用的是裝飾字體居多，因?yàn)檫@種字體最具表現(xiàn)力，而且字不要太細(xì)。同時(shí)，選擇字體后，要對(duì)字體進(jìn)行再造型，如切割、合并、變形、扭曲、傾斜等等，以達(dá)到我們想表現(xiàn)的主題氣質(zhì)，或剛猛、或親和，隨頁(yè)面策劃和文案來(lái)定。

8，設(shè)計(jì)插圖

在當(dāng)前互聯(lián)網(wǎng)時(shí)代，卡通造型已經(jīng)越來(lái)越受到企業(yè)主的歡迎。一方面，卡通造型沒(méi)有相片那種放大就模糊的缺點(diǎn)，二方面，不存在使用了他人拍攝的圖片而造成侵權(quán)的風(fēng)險(xiǎn)，三方面，想找一張合適的位圖真的很難。所以，最好的辦法就是，自己繪制一幅場(chǎng)景和一系列品牌的卡通吉祥物，或者下載一些現(xiàn)成的矢量場(chǎng)景素材，讓你事半功倍。

要注意的是，選擇的插圖，一定不要有違和感，一定要保持與頁(yè)面風(fēng)格的統(tǒng)一性，畫(huà)風(fēng)要一致，配色要和諧，位置要恰當(dāng)。

還有一種著陸頁(yè)，不是主題活動(dòng)頁(yè)，而是靜態(tài)展示頁(yè)，相對(duì)來(lái)說(shuō)比較理性的那種，這種頁(yè)面右側(cè)或左側(cè)或上部或下方，可能會(huì)放一些廣告位。而廣告位的設(shè)計(jì)，色彩同樣是很關(guān)鍵的，要注意廣告與廣告之間的色彩差異，還要注意色彩的明度、純度，要統(tǒng)一，不要有違和感。在廣告的設(shè)計(jì)中，設(shè)計(jì)手法也要保持一致，廣告中的字體和版式也要保持風(fēng)格的統(tǒng)一。

9，設(shè)計(jì)按鈕

按鈕，其實(shí)是畫(huà)龍點(diǎn)睛之筆。為什么這么說(shuō)呢，一個(gè)畫(huà)面，當(dāng)用戶(hù)看完，設(shè)想，如果沒(méi)有按鈕，用戶(hù)就不會(huì)找到品牌的主頁(yè)，從而沒(méi)有銷(xiāo)售轉(zhuǎn)化的效果，那這個(gè)著陸頁(yè)就失去了作用，沒(méi)有了意義，所以，在頁(yè)面之中，一定要有按鈕的存在。

按鈕應(yīng)該使用什么色彩、什么形式、什么字呢？是這樣的，按鈕通常是一張pNG圖片，嵌入到頁(yè)面中的，你可以設(shè)置它有特效，也可以沒(méi)有，字體方面，要用好認(rèn)的字體，最好能粗大一點(diǎn)，目的是好認(rèn)，好點(diǎn)，目標(biāo)明顯。色彩方面，分行業(yè)，分目的來(lái)說(shuō)。如果是電商，選紅色、黃色，如果是金融投資類(lèi)，選橙色。為什么這么說(shuō)呢？紅色給人沖動(dòng)消費(fèi)的感受，是最刺激的顏色，橙色給人親和的感受，但橙色比紅色更容易讓人不反感，更友好。

按鈕的位置也要注意，要么再頁(yè)面最底部的最中央，要么就在頁(yè)面中部。至于到底在哪，要看頁(yè)面上放什么內(nèi)容。如果最底部是活動(dòng)細(xì)則，你可以把按鈕放在細(xì)則頂部，原因就是，按鈕是用戶(hù)決定的一個(gè)觸發(fā)點(diǎn)，當(dāng)用戶(hù)看的時(shí)間越久，可能就越不會(huì)點(diǎn)，也有可能根本找不到按鈕，所以，設(shè)計(jì)者需要在適當(dāng)?shù)幕鸷?，放置按鈕，讓客戶(hù)點(diǎn)擊。

10，出圖質(zhì)量

最后一步就是完稿出圖。那么出圖同樣也是很重要的，設(shè)計(jì)者需要保證圖片的清晰度的同時(shí)，還要兼顧圖片的質(zhì)量，也就是多少Kb。我們都知道，頁(yè)面的質(zhì)量越大，打開(kāi)速度就越慢，所以，按照常識(shí)來(lái)講，頁(yè)面的大小要控制在500K以?xún)?nèi)，并且設(shè)置在72dpi，RGb模式，這一點(diǎn)非常重要。要做到這一點(diǎn)，跟頁(yè)面邏輯、頁(yè)面長(zhǎng)度、頁(yè)面配色、頁(yè)面元素?cái)?shù)量有關(guān)。在電腦端如此，在手機(jī)端和微站短同樣如此，不要忽略pC以外其他尺寸設(shè)備的瀏覽體驗(yàn)。

整體來(lái)講，設(shè)計(jì)網(wǎng)頁(yè)就像打一場(chǎng)戰(zhàn)役，需要策略、戰(zhàn)術(shù)的完美配合，需要文案、設(shè)計(jì)的完美演繹，需要對(duì)品牌、對(duì)主題的深刻理解。希望以上10點(diǎn)對(duì)各位同行，特別是剛?cè)胄械耐乐腥擞袔椭呐率且稽c(diǎn)點(diǎn)。另外，因?yàn)楸救怂接邢?，才疏學(xué)淺，很少寫(xiě)設(shè)計(jì)技巧，經(jīng)驗(yàn)不足，如果有表述不當(dāng)之處或紕漏，還望大家多批評(píng)指正，不吝賜教，給我留言，一起交流經(jīng)驗(yàn)，一起進(jìn)步吧。

分享一句設(shè)計(jì)秘籍給大家，相信一定對(duì)大家的設(shè)計(jì)之路有用。好的設(shè)計(jì)意味著盡可能少的設(shè)計(jì)，簡(jiǎn)單勝于復(fù)雜，平靜勝于喧鬧，謙虛勝于張揚(yáng)，小勝于大，輕勝于重，平淡勝于矯飾，和諧勝于分離，平衡勝于張揚(yáng)，連貫勝于交換，極少勝于極多，中庸勝于過(guò)激，明白勝于多元素，系統(tǒng)勝于單個(gè)元素。

新聞名稱(chēng)：網(wǎng)站設(shè)計(jì)教程
鏈接地址：http://www.muchs.cn/news23/292923.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)、手機(jī)網(wǎng)站建設(shè)、品牌網(wǎng)站建設(shè)、App開(kāi)發(fā)、域名注冊(cè)、軟件開(kāi)發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)