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

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

“前端工(gōng)程師”出了要配合網頁設計師外(wài)，還要配合做後端工(gōng)程師，做好網頁端的數據收集處理等工(gōng)作。但要牢記自己的崗位職責和學習重點，在沒有認清“視覺設計”前，要當心自己是不是越位到前端開(kāi)發的坑裏去(qù)了。

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

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

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

2、能夠抓人眼球的圖片

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

3、移動響應差異化

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

4、精心設計品牌風格

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

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

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

6、提供吸引人的獎勵

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

7、時間的敏感性

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

8、稀缺性

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

9、社會認同

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

10.背書(shū)擔保

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

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

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

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

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

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

3.購買新的主題

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

網頁設計中(zhōng)常用字體(tǐ)；

 1.網頁設計中(zhōng)的英文字體(tǐ)，一(yī)般有以下(xià)五類：

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

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

建議: 個人認爲 Tahoma 以及 Verdana 字符編碼效果最好 ，适用于多種環境
Arial

字體(tǐ)族科：Arial, “Helvetica Neue”, Helvetica

變體(tǐ):

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

 Avant Garde

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

 Calibri

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

 Candara

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

Candara是一(yī)種無襯線字體(tǐ)，爲字型設計師Gary Munch爲微軟所開(kāi)發，附帶于Windows Vista中(zhōng)發行

 Franklin Gothic Medium

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

 Futura

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

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

 Helvetica

字體(tǐ)族科包括: “Helvetica Neue”, Helvetica, Arial;

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

 Optima

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

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

 Tahoma

字體(tǐ)族科包括: Tahoma, Verdana, Segoe;

Tahoma是一(yī)個十分(fēn)常見的無襯線字體(tǐ)，字體(tǐ)結構和Verdana很相似，其字符間距較小(xiǎo)，而且對Unicode字集的支持範圍較大(dà)。

網頁設計中(zhōng)最常見的襯線字體(tǐ)

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

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

 Big Caslon

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

 Bodoni MT

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

 Cambria

字體(tǐ)族科包括: Cambria, Georgia, serif;

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

 Didot

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

 Georgia

字體(tǐ)族科包括: Georgia, Times, “Times New Roman”;

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

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

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

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

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