網頁設計，是以視覺設計爲主的(de)工作。

一個(gè)網頁被設計出來(lái)，是給人(rén)用(yòng)，給人(rén)看的(de)。要好看（簡潔）、要好用(yòng)（高(gāo)級）這(zhè)才是一個(gè)設計師需要反複考慮的(de)。視覺+交互，是網頁設計師的(de)核心競争力。
其中“視覺設計”的(de)依據，源于前面的(de)策劃和(hé)交互設計。最後出具的(de)“視覺設計稿”得(de)符合品牌定位，滿足生産運營，以及用(yòng)戶需求，這(zhè)是網頁設計師必修的(de)基本功
前端制作，是以前端代碼爲主。
前端制作在流程上，是在視覺設計之後。這(zhè)部分(fēn)工作基本上是由WEB前端工程師來(lái)完成的(de)，工程師通(tōng)常會運用(yòng)到HTML、CSS、以及JavaScript、Jquery等網頁前端代碼，來(lái)重構網頁設計師的(de)“視覺設計稿”，以及交互動畫(huà)等。

“前端工程師”出了(le)要配合網頁設計師外，還(hái)要配合做(zuò)後端工程師，做(zuò)好網頁端的(de)數據收集處理(lǐ)等工作。但要牢記自己的(de)崗位職責和(hé)學習(xí)重點，在沒有認清“視覺設計”前，要當心自己是不是越位到前端開發的(de)坑裏去了(le)。

網頁設計應該有更多(duō)的(de)思索在裏面，每一個(gè)元素都是思索的(de)産兒(ér)，而不是随意的(de)點綴。當然，感性的(de)爆發也(yě)必不可(kě)少，因爲她是藝術，是商業化(huà)了(le)的(de)藝術、技術化(huà)了(le)的(de)藝術。

1、一個(gè)表達清晰、顯示突出的(de)CTA（行爲激發）

本篇文章(zhāng)所提到的(de)所有訣竅中最重要的(de)一點就是，你的(de)主頁上應該有一個(gè)非常清晰明(míng)了(le)的(de)CTA（行爲激發）。如果你能爲這(zhè)個(gè)CTA設計一種獨特、抓人(rén)眼球的(de)呈現形式則會錦上添花。此舉目的(de)在于讓那些浏覽主頁的(de)用(yòng)戶清楚地知道企業對(duì)他(tā)們的(de)要求，希望他(tā)們做(zuò)什(shén)麽。頁面内容不要過多(duō)，以免用(yòng)戶感到困惑。國外的(de)Marketing Inc和(hé)AWeber公司的(de)著(zhe)陸頁是非常值得(de)大(dà)家參考借鑒的(de)例子。

2、能夠抓人(rén)眼球的(de)圖片

好的(de)圖片對(duì)于主頁設計來(lái)說至關重要。我就在自己的(de)博客主頁上添加了(le)一張長(cháng)圖片，這(zhè)張圖片讓我的(de)博客顯得(de)更加與衆不同，上面所提到的(de)所有網站也(yě)都非常擅長(cháng)利用(yòng)圖片來(lái)吸引讀者。特别是Chris Ducker（上面第二個(gè)案例），他(tā)是圖片使用(yòng)方面的(de)專家，他(tā)将自己的(de)照(zhào)片放在網站主頁上，照(zhào)片中他(tā)的(de)目光(guāng)注視著(zhe)網頁上的(de)信息欄和(hé)CTA，意在表示自己希望大(dà)家能夠響應，用(yòng)戶往往會受到圖片的(de)暗示，注意力順著(zhe)他(tā)的(de)目光(guāng)看向右邊，然後進行相應的(de)動作，最終完成轉化(huà)。

3、移動響應差異化(huà)

毋庸多(duō)說，移動設備的(de)使用(yòng)率超過了(le)PC端，作爲營銷人(rén)員(yuán)我們不得(de)不重視這(zhè)塊新的(de)蛋糕。由于顯示屏幕和(hé)使用(yòng)場(chǎng)景的(de)不同，我們應将二者差别對(duì)待，我所說的(de)差别不僅體現在文字大(dà)小、圖片多(duō)少上，還(hái)在整個(gè)網頁的(de)設計思路和(hé)功能優化(huà)上。例如，我不會在移動端的(de)網站上推銷BlueHost（藍色主機，是一款非常受歡迎的(de)美(měi)國主機）的(de)産品，因爲在移動端，用(yòng)戶不太會注冊完成購(gòu)買。認真觀察上述提到的(de)六個(gè)網站在移動端和(hé)PC端上的(de)不同，你會發現他(tā)們在移動端上省略掉了(le)哪些功能和(hé)要素。

4、精心設計品牌風格

上述提到的(de)六個(gè)主頁都有一個(gè)相同點，即每個(gè)網站都有自己非常獨特、突出的(de)品牌風格。顔色、字體、排版、圖片都高(gāo)度和(hé)諧一緻，各個(gè)要素都在爲同一個(gè)營銷目标服務。做(zuò)到這(zhè)點并不容易，但是如果做(zuò)好了(le)就更能讓人(rén)感受到網站的(de)專業性，從而提高(gāo)轉化(huà)率。如果你想讓用(yòng)戶留下(xià)自己的(de)郵箱、電話(huà)号碼、信用(yòng)卡等個(gè)人(rén)信息，你就必須讓他(tā)們對(duì)你産生信任。提高(gāo)專業程度能夠增強用(yòng)戶對(duì)你的(de)信任。因此，我們必須要做(zuò)到網站不存在任何安全漏洞，保障用(yòng)戶的(de)信息不會洩露。

5、概述産品優點（而非詳細地羅列用(yòng)戶能得(de)到什(shén)麽）

營銷界有一句名言：你應該專注于Benefits（用(yòng)戶能得(de)到的(de)好處）而不是features（你産品的(de)特性）。這(zhè)句話(huà)是說，你不需要在主頁上将所有用(yòng)戶可(kě)以獲得(de)的(de)東西全部具體地列出來(lái)，你要做(zuò)的(de)是給用(yòng)戶一些概念性的(de)東西，告訴用(yòng)戶他(tā)們将會獲得(de)怎樣的(de)用(yòng)戶體驗，會達成怎樣的(de)目标。例如，在Bodybuilding.com的(de)主頁上，他(tā)們打出了(le)“改變你生活”這(zhè)樣一句話(huà)，而不是羅列你可(kě)以選擇的(de)健身項目。這(zhè)就是語言的(de)藝術。

6、提供吸引人(rén)的(de)獎勵

幾乎所有優秀的(de)主頁都會爲用(yòng)戶采取一些措施，以此誘惑、鼓勵用(yòng)戶注冊或者浏覽更多(duō)的(de)信息。Chris Ducker網站上，當用(yòng)戶注冊網站完成某項任務之後，網頁就會出現一個(gè)圓點記号，記錄你的(de)成就。這(zhè)往往讓用(yòng)戶很難忽視。

7、時(shí)間的(de)敏感性

看一看Marketing Inc的(de)主頁，你會看到頁面上有一個(gè)時(shí)鐘(zhōng)，顯示離下(xià)一場(chǎng)在線研討(tǎo)會的(de)召開還(hái)有多(duō)久。這(zhè)種做(zuò)法能夠引起讀者輕微的(de)緊張感——當他(tā)們知道時(shí)間越來(lái)越少時(shí)他(tā)們就會産生一種緊迫感，從而采取行動。如果在主頁上加上一個(gè)讓人(rén)們産生時(shí)間緊迫感的(de)要素，你就會看到注冊人(rén)數大(dà)大(dà)增加。

8、稀缺性

Neil Patel舉辦的(de)在線研討(tǎo)會通(tōng)常都有人(rén)數的(de)限制。和(hé)時(shí)間緊迫感的(de)原理(lǐ)一樣，機會的(de)稀缺性會讓人(rén)們害怕喪失機會，從而促使人(rén)們快(kuài)速做(zuò)出決定采取行動。這(zhè)種意識源自于遠(yuǎn)古時(shí)代，那個(gè)時(shí)候食物(wù)和(hé)住所是稀缺資源——當我們感到得(de)不到這(zhè)些資源的(de)時(shí)候大(dà)腦(nǎo)就會發送信号讓我們盡快(kuài)采取行動來(lái)獲取資源。

9、社會認同

社會認同在健身行業已經被廣泛應用(yòng)，他(tā)們多(duō)采用(yòng)“健身前和(hé)健身後”的(de)對(duì)比照(zhào)片來(lái)讓人(rén)信服，樹立社會認同。這(zhè)種做(zuò)法簡單又有效。Bodybuilding.com的(de)主頁上就可(kě)以看出這(zhè)一點，看到别人(rén)健身取得(de)的(de)效果後你也(yě)會忍不住點擊注冊按鈕，自己也(yě)來(lái)上幾套訓練。記住，你在主頁上所舉的(de)例子必須是真實的(de)，虛假信息在有些國家是違法的(de)（更别說不合情理(lǐ)了(le)）。如果這(zhè)樣做(zuò)之後你的(de)注冊人(rén)數仍然沒有增長(cháng)，那麽嘗試著(zhe)把你客戶取得(de)的(de)證書(shū)或者企業的(de)榮譽、獎勵放在網站上。

10.背書(shū)擔保

最近，我借鑒了(le)Chris Ducker的(de)一個(gè)做(zuò)法，就是在選擇性輸入欄的(de)下(xià)方标注我的(de)博文曾經被哪些雜(zá)志期刊網站所轉載。通(tōng)過這(zhè)種方式，證明(míng)我的(de)文章(zhāng)是被廣泛認可(kě)的(de)，從而讓新讀者産生信任，消除他(tā)們留下(xià)聯系方式時(shí)的(de)不安和(hé)疑惑。要知道大(dà)多(duō)數用(yòng)戶都非常重視自己的(de)個(gè)人(rén)隐私和(hé)信息安全。當企業要采取以上的(de)方法對(duì)主頁進行優化(huà)的(de)時(shí)候，我建議(yì)你注意對(duì)優化(huà)前後的(de)營銷效果進行具體對(duì)比分(fēn)析，看看所采取的(de)措施是否真正有利于轉化(huà)率的(de)提高(gāo)。在其他(tā)人(rén)身上有效的(de)方法，放到你的(de)企業身上不一定能成功。

網站設計制作一個(gè)好的(de)主頁的(de)方法；
看到這(zhè)裏，你是不是開始羨慕别人(rén)的(de)網站怎麽能夠設計地這(zhè)麽好？當你剛開始準備重新設計主頁時(shí)，很容易陷入“主題單一”的(de)誤區(qū)。你花費在創造内容方面的(de)時(shí)間越久，你就越沒有精力擴展用(yòng)戶郵箱列表，越沒有精力和(hé)讀者互動，越沒有精力優化(huà)網頁設計。 此時(shí)你有三種出路：

1.自己設計主頁，聘請程序員(yuán)進行網頁編碼

如果你擅長(cháng)美(měi)工，那麽就自行設計一個(gè)新的(de)主頁，然後聘請專業的(de)WordPress程序員(yuán)爲你編碼。當然前提是你擅長(cháng)美(měi)工，知道怎麽利用(yòng)各種插件來(lái)達到最好的(de)效果，否則我不建議(yì)你采取這(zhè)個(gè)做(zuò)法。

2.聘請一個(gè)網頁設計師

有大(dà)把優秀的(de)網頁設計師供你選擇，他(tā)們是WordPress方面的(de)專家，可(kě)以幫助你設計一個(gè)全新的(de)、漂亮的(de)主頁。如果你希望你的(de)主頁可(kě)以更加個(gè)性化(huà)更加獨樹一幟，你的(de)要求比較多(duō)的(de)話(huà)，那麽花費相對(duì)的(de)也(yě)就比較多(duō)，可(kě)能需要幾萬塊，但是如果你要求比較少，隻是希望能夠請一個(gè)人(rén)幫你重新優化(huà)主頁的(de)話(huà)，隻需要花費少量預算(suàn)就可(kě)以了(le)——如果你能找到一個(gè)收費比較低的(de)程序員(yuán)來(lái)實現主頁的(de)話(huà)，花費就更少了(le)。

3.購(gòu)買新的(de)主題

最後一種選擇是最便宜最省事，而且可(kě)能，是效果最好的(de)。那就是直接購(gòu)買新主題。WordPress上提供許多(duō)主題供用(yòng)戶選擇，這(zhè)些主題都是經過設計師的(de)精心設計，賣點就在于通(tōng)過優化(huà)主頁爲博客主帶來(lái)更多(duō)的(de)轉化(huà)率。

網頁設計中常用(yòng)字體；

 1.網頁設計中的(de)英文字體，一般有以下(xià)五類：

serif（襯線）
sans-serif（無襯線）
monospace（等寬）
fantasy（夢幻）
cuisive（花體）
網頁設計中最常見的(de)無襯線字體

在常見的(de)兩種字體風格中，襯線體的(de)筆劃感太”過”，不是特别的(de)商業。随著(zhe)瑞士設計風格的(de)大(dà)力推廣，無襯線字體變得(de)愈發流行起來(lái)。

建議(yì): 個(gè)人(rén)認爲 Tahoma 以及 Verdana 字符編碼效果最好 ，适用(yòng)于多(duō)種環境
Arial

字體族科：Arial, “Helvetica Neue”, Helvetica

變體:

Arial：有時(shí)稱爲Arial Regular以便與Arial Narrow區(qū)别，其包括Arial、Arial Italic（斜體）、Arial Bold（粗體）、Arial Bold Italic（粗斜體）和(hé)Arial Unicode MS
Arial Black：此字體的(de)特色在于其筆畫(huà)相當的(de)粗，包含Arial Black、Arial Black Italic（斜體）
Arial Narrow：爲Arial的(de)細瘦版本，包含Arial Narrow Regular、Arial Narrow Bold（粗體）、Arial Narrow Italic（斜體）和(hé)Arial Narrow Bold Italic（粗斜體）
Arial Rounded：包含Arial Rounded Bold（粗體），此字體可(kě)在微軟韓文字體Gulim找到

 Avant Garde

字體族科包括: “Avant Garde”, Avantgarde, “Century Gothic”, CenturyGothic, “AppleGothic”;

 Calibri

字體族科包括: Calibri, Candara, Segoe, “Segoe UI”, Optima, Arial,;
Calibri，一種無襯線字體，爲微軟Microsoft Office 2007套裝軟件的(de)默認字體，取代先前Microsoft Word的(de)默認字體Times New Roman以及PowerPoint、Excel和(hé)Outlook的(de)默認字體Arial。
Calibri是搭發布于微軟Windows Vista六種英文ClearType字體的(de)其中一種，是Microsoft Word默認字體的(de)第一個(gè)無襯線字體，先前則是使用(yòng)Times New Roman爲默認字體。

 Candara

字體族科包括: Candara, Calibri, Segoe, “Segoe UI”, Optima, Arial

Candara是一種無襯線字體，爲字型設計師Gary Munch爲微軟所開發，附帶于Windows Vista中發行

 Franklin Gothic Medium

字體族科包括: “Franklin Gothic Medium”, “Franklin Gothic”, “ITC Franklin Gothic”, Arial, sans-serif;

 Futura

字體族科包括：: Futura, “Trebuchet MS”, Arial;

Futura靈感來(lái)自包豪斯，繼包豪斯的(de)設計理(lǐ)念，設計師保羅倫納1924年至1926年首次創建Futura。雖然倫納是不是包豪斯的(de)成員(yuán)，但是他(tā)贊同其很多(duō)觀點，他(tā)認爲現代的(de)字體應該表達出現代模式，而不是成爲過去字體的(de)延續。Futura商業授權發行于1927年，由鮑爾型鑄造廠投産。

 Helvetica

字體族科包括: “Helvetica Neue”, Helvetica, Arial;

Helvetica被視作現代主義在字體設計界的(de)典型代表。按照(zhào)現代主義的(de)觀點，字體應該”像一個(gè)透明(míng)的(de)容器一樣”，使得(de)讀者在閱讀的(de)時(shí)候專注于文字所表達的(de)内容，而不會關注文字本身所使用(yòng)的(de)字體。由于這(zhè)種特點的(de)存在，使得(de)Helvetica适合用(yòng)于表達各種各樣的(de)信息，并且在平面設計界獲得(de)了(le)廣泛的(de)應用(yòng)。

 Optima

字體族科包括: Optima, Segoe, “Segoe UI”, Candara, Calibri, Arial;

奧普蒂瑪體（Optima）是一款英文無襯線體。最初是爲德國著名字體設計師赫爾曼·察普夫爲法蘭克福的(de)D. Stempel AG foundry公司在1952年至1955年左右設計的(de)。

 Tahoma

字體族科包括: Tahoma, Verdana, Segoe;

Tahoma是一個(gè)十分(fēn)常見的(de)無襯線字體，字體結構和(hé)Verdana很相似，其字符間距較小，而且對(duì)Unicode字集的(de)支持範圍較大(dà)。

網頁設計中最常見的(de)襯線字體

襯線字體再紙媒中使用(yòng)較多(duō)，在紙張上的(de)顯示效果更加。但是在屏幕上（尤其是小屏幕上），顯示效果不是那麽的(de)好。但是依然有很多(duō)設計師喜好用(yòng)襯線字體，主要多(duō)用(yòng)于标題，讓标題看起來(lái)更與衆不同。
Baskerville

字體族科包括: Baskerville, “Baskerville Old Face”, “Hoefler Text”, Garamond, “Times New Roman”;

 Big Caslon

字體族科包括: “Big Caslon”, “Book Antiqua”, “Palatino Linotype”, Georgia;

 Bodoni MT

字體族科包括: “Bodoni MT”, Didot, “Didot LT STD”, “Hoefler Text”, Garamond, “Times New Roman”;

 Cambria

字體族科包括: Cambria, Georgia, serif;

Cambria是搭載于微軟Windows Vista、Microsoft Office 2007和(hé)Microsoft Office 2008 for Mac等軟件的(de)一個(gè)襯線字體，其字符間距和(hé)比例相當的(de)平均，對(duì)角和(hé)垂直方向的(de)筆畫(huà)和(hé)襯線比較粗，而水(shuǐ)平向的(de)襯線比較細，強調筆畫(huà)的(de)末筆。

 Didot

font-family: Didot, “Didot LT STD”, “Hoefler Text”, Garamond, “Times New Roman”;

 Georgia

字體族科包括: Georgia, Times, “Times New Roman”;

Georgia是一種襯線字體，爲著名字型設計師馬修·卡特（Matthew Carter）于1993年爲微軟所設計的(de)作品，具有在小字下(xià)仍能清晰辨識的(de)特性，可(kě)讀性十分(fēn)優良。其命名發想自一份小報報道在美(měi)國佐治亞州發現外星人(rén)頭顱的(de)測試性頭條。

一個(gè)網頁設計者的(de)分(fēn)析能力遠(yuǎn)比創意來(lái)的(de)重要。總之設計出好的(de)網頁需要注意多(duō)方面；

界面弱化(huà)
　　一個(gè)好的(de)界面設計它的(de)界面是弱化(huà)的(de)，它突出的(de)是功能，著(zhe)重體現的(de)是網站業提供給使用(yòng)者是主要什(shén)麽。這(zhè)就涉及到浏覽順序、功能分(fēn)區(qū)等等。
要讓訪客在0.5秒内就能把握網站的(de)行業性質，1秒内就知道該從哪個(gè)地方開始使用(yòng)這(zhè)個(gè)網站，能點一次的(de)，絕不點第二次。當然上面說的(de)是大(dà)多(duō)數功能性網站，對(duì)于宣傳展示性網站，諸如加特效的(de)或Flash網站，可(kě)能就不得(de)不花哨一些，但不能太過分(fēn)。網站不是動畫(huà)片，在效率越來(lái)越高(gāo)，社會心理(lǐ)越來(lái)越浮躁的(de)中國，人(rén)們的(de)耐心越來(lái)越小，心理(lǐ)承受能力越來(lái)越低。效果可(kě)以體現意境，點到爲止。

模塊化(huà)和(hé)可(kě)修改性強
　　模塊化(huà)不僅可(kě)以提高(gāo)重用(yòng)性，也(yě)能統一網站風格，還(hái)可(kě)以降低程序開發的(de)強度。這(zhè)裏就涉及一些尺寸、模數、寬容度、命名規範等等知識了(le)，不再冗述。
無論是架構還(hái)是模塊或圖片，都要考慮可(kě)修改性強。舉個(gè)簡單的(de)例子，logo、按鈕等，很多(duō)人(rén)喜歡制作圖片，N個(gè)按鈕就是N張圖片。如果隻做(zuò)3-5類按鈕的(de)背景圖片，然後用(yòng)在網頁代碼裏打上文字，那麽修改起來(lái)就簡單了(le)，讓程序員(yuán)自己改字就可(kě)以了(le)。然而網頁顯示的(de)字體是帶有鋸齒的(de)，一般即能清晰又保證美(měi)觀的(de)字體字号有幾類：宋體 12px | 宋體 12px 粗體 | 宋體 14px | 宋體 14px 粗體 | 黑(hēi)體 20px | verdana 9px | Arial Black 12px+ |

責任編輯：中山網站建設
 【網訊網絡】國家高(gāo)新技術企業》十年專注軟件開發，網站建設，網頁設計，APP開發，小程序，微信公衆号開發，定制各類企業管理(lǐ)軟件（OA、CRM、ERP、訂單管理(lǐ)系統、進銷存管理(lǐ)軟件等)！服務熱(rè)線：0760-88610046、13924923903，http://www.wansion.net