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

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

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

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

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

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

頁面的寬度，取決于當前全球用戶所使用的電腦顯示器屏幕的尺寸。

一般來說，如果采用無自適應程序去制作的頁面，需要格外考慮用戶屏幕的可視范圍，特別是小屏幕的筆記本電腦的展示效果。

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

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

2、頁面程序

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

做頁面，過去通常使用的是靜態(tài)HTML格式語言編寫，動態(tài)效果會用到JAVA，以及C+語言，不過那些都已經(jīng)過時了，如果但凡想做動態(tài)頁面，有的人會說使用FLASH制作網(wǎng)頁，但是FLASH有許多硬傷，同樣已經(jīng)沒人用FLASH做頁面，而是專注用FLASH做動畫視頻了。那么現(xiàn)在通常做網(wǎng)頁都用什么程序?qū)懩兀看鸢甘荋TML5。

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

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

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

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

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

3，頁面邏輯

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

一個好的頁面邏輯，是貫穿文案、圖片的主脈絡(luò)，沒有這條主線，就像大樓沒有根基，不知道為什么要蓋樓，會導致最后蓋出來的樓歪歪扭扭，不知是什么東西，當然也不會好看，所以，頁面邏輯何其重要不言而喻。

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

4，文案策劃

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

在文案的撰寫過程中，需要注意的是，言簡意賅，主次分明，渲染主題，謹慎描述。

5，設(shè)計布局

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

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

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

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

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

6，設(shè)計色彩

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

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

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

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

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

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

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

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

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

這些色彩知識，是作為一個設(shè)計師必須爛熟于心的原理，看似輕松的設(shè)計用色，都是要靠美學原理支撐，設(shè)計就靠這些原理來指導，用色和排版，都需要有理由，不要說憑感覺這種話。

7，設(shè)計字體

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

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

8，設(shè)計插圖

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

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

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

9，設(shè)計按鈕

按鈕，其實是畫龍點睛之筆。為什么這么說呢，一個畫面，當用戶看完，設(shè)想，如果沒有按鈕，用戶就不會找到品牌的主頁，從而沒有銷售轉(zhuǎn)化的效果，那這個著陸頁就失去了作用，沒有了意義，所以，在頁面之中，一定要有按鈕的存在。

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

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

10，出圖質(zhì)量

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

整體來講，設(shè)計網(wǎng)頁就像打一場戰(zhàn)役，需要策略、戰(zhàn)術(shù)的完美配合，需要文案、設(shè)計的完美演繹，需要對品牌、對主題的深刻理解。希望以上10點對各位同行，特別是剛?cè)胄械耐乐腥擞袔椭?，哪怕是一點點。另外，因為本人水平有限，才疏學淺，很少寫設(shè)計技巧，經(jīng)驗不足，如果有表述不當之處或紕漏，還望大家多批評指正，不吝賜教，給我留言，一起交流經(jīng)驗，一起進步吧。

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

新聞名稱：網(wǎng)站設(shè)計教程
鏈接地址：http://jinyejixie.com/news23/292923.html

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

廣告

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