網頁設計，是以視(shì)覺設計為(wèi)主的(de)工作。

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

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

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

1、一(yī)個表達清晰、顯示突出的(de)CTA（行為(wèi)激發）

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

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

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

3、移動響應差異化

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

4、精心設計品牌風格

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

5、概述産品優點（而非詳細地(dì)羅列用戶能得到什麽）

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

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

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

7、時間的(de)敏感性

看一(yī)看Marketing Inc的(de)主頁，你會看到頁面上有一(yī)個時鍾，顯示離(lí)下一(yī)場在線研讨會的(de)召開還有多久。這種做(zuò)法能夠引起讀者輕微的(de)緊張感——當他們知道(dào)時間越來越少時他們就會産生一(yī)種緊迫感，從而采取行動。如(rú)果在主頁上加上一(yī)個讓人們産生時間緊迫感的(de)要素，你就會看到注冊人數大大增加。

8、稀缺性

Neil Patel舉辦的(de)在線研讨會通常都有人數的(de)限制。和(hé)時間緊迫感的(de)原理(lǐ)一(yī)樣，機會的(de)稀缺性會讓人們害怕喪失機會，從而促使人們快速做(zuò)出決定采取行動。這種意識源自(zì)于遠古時代，那個時候食物和(hé)住所是稀缺資源——當我們感到得不到這些資源的(de)時候大腦就會發送信号讓我們盡快采取行動來獲取資源。

9、社會認同

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

10.背書擔保

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

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

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

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

2.聘請一(yī)個網頁設計師

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

3.購買新的(de)主題

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

網頁設計中常用字體；

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

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

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

建議: 個人認為(wèi) Tahoma 以及 Verdana 字符編碼效果最好 ，适用于多種環境
Arial

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

變體:

Arial：有時稱為(wèi)Arial Regular以便與Arial Narrow區别，其包括Arial、Arial Italic（斜體）、Arial Bold（粗體）、Arial Bold Italic（粗斜體）和(hé)Arial Unicode MS
Arial Black：此字體的(de)特色在于其筆(bǐ)畫相當的(de)粗，包含Arial Black、Arial Black Italic（斜體）
Arial Narrow：為(wèi)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，一(yī)種無襯線字體，為(wèi)微軟Microsoft Office 2007套裝軟件的(de)默認字體，取代先前Microsoft Word的(de)默認字體Times New Roman以及PowerPoint、Excel和(hé)Outlook的(de)默認字體Arial。
Calibri是搭發布于微軟Windows Vista六種英文ClearType字體的(de)其中一(yī)種，是Microsoft Word默認字體的(de)第一(yī)個無襯線字體，先前則是使用Times New Roman為(wèi)默認字體。

 Candara

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

Candara是一(yī)種無襯線字體，為(wèi)字型設計師Gary Munch為(wèi)微軟所開發，附帶于Windows Vista中發行

 Franklin Gothic Medium

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

 Futura

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

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

 Helvetica

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

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

 Optima

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

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

 Tahoma

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

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

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

襯線字體再紙媒中使用較多，在紙張上的(de)顯示效果更加。但是在屏幕上（尤其是小屏幕上），顯示效果不是那麽的(de)好。但是依然有很多設計師喜好用襯線字體，主要多用于标題，讓标題看起來更與衆不同。
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)一(yī)個襯線字體，其字符間距和(hé)比例相當的(de)平均，對角和(hé)垂直方向的(de)筆(bǐ)畫和(hé)襯線比較粗，而水平向的(de)襯線比較細，強調筆(bǐ)畫的(de)末筆(bǐ)。

 Didot

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

 Georgia

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

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

一(yī)個網頁設計者的(de)分析能力遠比創意來的(de)重要。總之設計出好的(de)網頁需要注意多方面；

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

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

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