手把手教你學網站設計-網頁設計10大要訣（下）

時間：2023-09-21 00:06:01 | 來源：網站運營

時間：2023-09-21 00:06:01 來源：網站運營

手把手教你學網站設計-網頁設計10大要訣（下）：上期小編為大家分享了《手把手教你學網站設計-網頁設計10大要訣（上）》，今天小編接著為大家分享下篇。

6.第六，設計色彩

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

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

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

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

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

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

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

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

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

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

7.第七，設計字體

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

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

8.第八，設計插圖

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

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

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

9.第九，設計按鈕

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

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

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

10.第十，出圖質量

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

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

分享一句設計秘籍給大家，相信一定對大家的設計之路有用。

現代主義運動先驅，德國工業(yè)設計家，迪特.拉姆斯說過，好的設計意味著盡可能少的設計，簡單勝于復雜，平靜勝于喧鬧，謙虛勝于張揚，小勝于大，輕勝于重，平淡勝于矯飾，和諧勝于分離，平衡勝于張揚，連貫勝于交換，極少勝于極多，中庸勝于過激，明白勝于多元素，系統(tǒng)勝于單個元素。

最后，以巴菲特的一句話作為對大家的忠告，記住一個原則：簡單勝復雜。