公司網站主頁設計的思路和方法
2019.04.28
網頁設計，是以視覺設計為主的工作。
一個網頁被設計出來，是給人用，給人看的。要好看（簡潔）、要好用（高級）這才是一個設計師需要反復考慮的。視覺+交互，是網頁設計師的核心競爭力。
其中“視覺設計”的依據，源于前面的策劃和交互設計。最后出具的“視覺設計稿”得符合品牌定位，滿足生產運營，以及用戶需求，這是網頁設計師必修的基本功
前端制作，是以前端代碼為主。
前端制作在流程上，是在視覺設計之后。這部分工作基本上是由WEB前端工程師來完成的，工程師通常會運用到HTML、CSS、以及JavaScript、Jquery等網頁前端代碼，來重構網頁設計師的“視覺設計稿”，以及交互動畫等。
“前端工程師”出了要配合網頁設計師外，還要配合做后端工程師，做好網頁端的數據收集處理等工作。但要牢記自己的崗位職責和學習重點，在沒有認清“視覺設計”前，要當心自己是不是越位到前端開發的坑里去了。
網頁設計應該有更多的思索在里面，每一個元素都是思索的產兒，而不是隨意的點綴。當然，感性的爆發也必不可少，因為她是藝術，是商業化了的藝術、技術化了的藝術。
1、一個表達清晰、顯示突出的CTA（行為激發）
本篇文章所提到的所有訣竅中最重要的一點就是，你的主頁上應該有一個非常清晰明了的CTA（行為激發）。如果你能為這個CTA設計一種獨特、抓人眼球的呈現形式則會錦上添花。此舉目的在于讓那些瀏覽主頁的用戶清楚地知道企業對他們的要求，希望他們做什么。頁面內容不要過多，以免用戶感到困惑。國外的Marketing Inc和AWeber公司的著陸頁是非常值得大家參考借鑒的例子。
2、能夠抓人眼球的圖片
好的圖片對于主頁設計來說至關重要。我就在自己的博客主頁上添加了一張長圖片，這張圖片讓我的博客顯得更加與眾不同，上面所提到的所有網站也都非常擅長利用圖片來吸引讀者。特別是Chris Ducker（上面第二個案例），他是圖片使用方面的專家，他將自己的照片放在網站主頁上，照片中他的目光注視著網頁上的信息欄和CTA，意在表示自己希望大家能夠響應，用戶往往會受到圖片的暗示，注意力順著他的目光看向右邊，然后進行相應的動作，最終完成轉化。
3、移動響應差異化
毋庸多說，移動設備的使用率超過了PC端，作為營銷人員我們不得不重視這塊新的蛋糕。由于顯示屏幕和使用場景的不同，我們應將二者差別對待，我所說的差別不僅體現在文字大小、圖片多少上，還在整個網頁的設計思路和功能優化上。例如，我不會在移動端的網站上推銷BlueHost（藍色主機，是一款非常受歡迎的美國主機）的產品，因為在移動端，用戶不太會注冊完成購買。認真觀察上述提到的六個網站在移動端和PC端上的不同，你會發現他們在移動端上省略掉了哪些功能和要素。
4、精心設計品牌風格
上述提到的六個主頁都有一個相同點，即每個網站都有自己非常獨特、突出的品牌風格。顏色、字體、排版、圖片都高度和諧一致，各個要素都在為同一個營銷目標服務。做到這點并不容易，但是如果做好了就更能讓人感受到網站的專業性，從而提高轉化率。如果你想讓用戶留下自己的郵箱、電話號碼、信用卡等個人信息，你就必須讓他們對你產生信任。提高專業程度能夠增強用戶對你的信任。因此，我們必須要做到網站不存在任何安全漏洞，保障用戶的信息不會泄露。
5、概述產品優點（而非詳細地羅列用戶能得到什么）
營銷界有一句名言：你應該專注于Benefits（用戶能得到的好處）而不是features（你產品的特性）。這句話是說，你不需要在主頁上將所有用戶可以獲得的東西全部具體地列出來，你要做的是給用戶一些概念性的東西，告訴用戶他們將會獲得怎樣的用戶體驗，會達成怎樣的目標。例如，在Bodybuilding.com的主頁上，他們打出了“改變你生活”這樣一句話，而不是羅列你可以選擇的健身項目。這就是語言的藝術。
6、提供吸引人的獎勵
幾乎所有優秀的主頁都會為用戶采取一些措施，以此誘惑、鼓勵用戶注冊或者瀏覽更多的信息。Chris Ducker網站上，當用戶注冊網站完成某項任務之后，網頁就會出現一個圓點記號，記錄你的成就。這往往讓用戶很難忽視。
7、時間的敏感性
看一看Marketing Inc的主頁，你會看到頁面上有一個時鐘，顯示離下一場在線研討會的召開還有多久。這種做法能夠引起讀者輕微的緊張感——當他們知道時間越來越少時他們就會產生一種緊迫感，從而采取行動。如果在主頁上加上一個讓人們產生時間緊迫感的要素，你就會看到注冊人數大大增加。
8、稀缺性
Neil Patel舉辦的在線研討會通常都有人數的限制。和時間緊迫感的原理一樣，機會的稀缺性會讓人們害怕喪失機會，從而促使人們快速做出決定采取行動。這種意識源自于遠古時代，那個時候食物和住所是稀缺資源——當我們感到得不到這些資源的時候大腦就會發送信號讓我們盡快采取行動來獲取資源。
9、社會認同
社會認同在健身行業已經被廣泛應用，他們多采用“健身前和健身后”的對比照片來讓人信服，樹立社會認同。這種做法簡單又有效。Bodybuilding.com的主頁上就可以看出這一點，看到別人健身取得的效果后你也會忍不住點擊注冊按鈕，自己也來上幾套訓練。記住，你在主頁上所舉的例子必須是真實的，虛假信息在有些國家是違法的（更別說不合情理了）。如果這樣做之后你的注冊人數仍然沒有增長，那么嘗試著把你客戶取得的證書或者企業的榮譽、獎勵放在網站上。
10.背書擔保
最近，我借鑒了Chris Ducker的一個做法，就是在選擇性輸入欄的下方標注我的博文曾經被哪些雜志期刊網站所轉載。通過這種方式，證明我的文章是被廣泛認可的，從而讓新讀者產生信任，消除他們留下聯系方式時的不安和疑惑。要知道大多數用戶都非常重視自己的個人隱私和信息安全。當企業要采取以上的方法對主頁進行優化的時候，我建議你注意對優化前后的營銷效果進行具體對比分析，看看所采取的措施是否真正有利于轉化率的提高。在其他人身上有效的方法，放到你的企業身上不一定能成功。
網站設計制作一個好的主頁的方法；
看到這里，你是不是開始羨慕別人的網站怎么能夠設計地這么好？當你剛開始準備重新設計主頁時，很容易陷入“主題單一”的誤區。你花費在創造內容方面的時間越久，你就越沒有精力擴展用戶郵箱列表，越沒有精力和讀者互動，越沒有精力優化網頁設計。 此時你有三種出路：
1.自己設計主頁，聘請程序員進行網頁編碼
如果你擅長美工，那么就自行設計一個新的主頁，然后聘請專業的WordPress程序員為你編碼。當然前提是你擅長美工，知道怎么利用各種插件來達到最好的效果，否則我不建議你采取這個做法。
2.聘請一個網頁設計師
有大把優秀的網頁設計師供你選擇，他們是WordPress方面的專家，可以幫助你設計一個全新的、漂亮的主頁。如果你希望你的主頁可以更加個性化更加獨樹一幟，你的要求比較多的話，那么花費相對的也就比較多，可能需要幾萬塊，但是如果你要求比較少，只是希望能夠請一個人幫你重新優化主頁的話，只需要花費少量預算就可以了——如果你能找到一個收費比較低的程序員來實現主頁的話，花費就更少了。
3.購買新的主題
最后一種選擇是最便宜最省事，而且可能，是效果最好的。那就是直接購買新主題。WordPress上提供許多主題供用戶選擇，這些主題都是經過設計師的精心設計，賣點就在于通過優化主頁為博客主帶來更多的轉化率。
網頁設計中常用字體；
1.網頁設計中的英文字體，一般有以下五類：
serif（襯線）
sans-serif（無襯線）
monospace（等寬）
fantasy（夢幻）
cuisive（花體）
網頁設計中最常見的無襯線字體
在常見的兩種字體風格中，襯線體的筆劃感太”過”，不是特別的商業。隨著瑞士設計風格的大力推廣，無襯線字體變得愈發流行起來。
建議: 個人認為 Tahoma 以及 Verdana 字符編碼效果最好 ，適用于多種環境
Arial
字體族科：Arial, “Helvetica Neue”, Helvetica
變體:
Arial：有時稱為Arial Regular以便與Arial Narrow區別，其包括Arial、Arial Italic（斜體）、Arial Bold（粗體）、Arial Bold Italic（粗斜體）和Arial Unicode MS
Arial Black：此字體的特色在于其筆畫相當的粗，包含Arial Black、Arial Black Italic（斜體）
Arial Narrow：為Arial的細瘦版本，包含Arial Narrow Regular、Arial Narrow Bold（粗體）、Arial Narrow Italic（斜體）和Arial Narrow Bold Italic（粗斜體）
Arial Rounded：包含Arial Rounded Bold（粗體），此字體可在微軟韓文字體Gulim找到
Avant Garde
字體族科包括: “Avant Garde”, Avantgarde, “Century Gothic”, CenturyGothic, “AppleGothic”;
Calibri
字體族科包括: Calibri, Candara, Segoe, “Segoe UI”, Optima, Arial,;
Calibri，一種無襯線字體，為微軟Microsoft Office 2007套裝軟件的默認字體，取代先前Microsoft Word的默認字體Times New Roman以及PowerPoint、Excel和Outlook的默認字體Arial。
Calibri是搭發布于微軟Windows Vista六種英文ClearType字體的其中一種，是Microsoft Word默認字體的第一個無襯線字體，先前則是使用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靈感來自包豪斯，繼包豪斯的設計理念，設計師保羅倫納1924年至1926年首次創建Futura。雖然倫納是不是包豪斯的成員，但是他贊同其很多觀點，他認為現代的字體應該表達出現代模式，而不是成為過去字體的延續。Futura商業授權發行于1927年，由鮑爾型鑄造廠投產。
Helvetica
字體族科包括: “Helvetica Neue”, Helvetica, Arial;
Helvetica被視作現代主義在字體設計界的典型代表。按照現代主義的觀點，字體應該”像一個透明的容器一樣”，使得讀者在閱讀的時候專注于文字所表達的內容，而不會關注文字本身所使用的字體。由于這種特點的存在，使得Helvetica適合用于表達各種各樣的信息，并且在平面設計界獲得了廣泛的應用。
Optima
字體族科包括: Optima, Segoe, “Segoe UI”, Candara, Calibri, Arial;
奧普蒂瑪體（Optima）是一款英文無襯線體。最初是為德國著名字體設計師赫爾曼·察普夫為法蘭克福的D. Stempel AG foundry公司在1952年至1955年左右設計的。
Tahoma
字體族科包括: Tahoma, Verdana, Segoe;
Tahoma是一個十分常見的無襯線字體，字體結構和Verdana很相似，其字符間距較小，而且對Unicode字集的支持范圍較大。
網頁設計中最常見的襯線字體
襯線字體再紙媒中使用較多，在紙張上的顯示效果更加。但是在屏幕上（尤其是小屏幕上），顯示效果不是那么的好。但是依然有很多設計師喜好用襯線字體，主要多用于標題，讓標題看起來更與眾不同。
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和Microsoft Office 2008 for Mac等軟件的一個襯線字體，其字符間距和比例相當的平均，對角和垂直方向的筆畫和襯線比較粗，而水平向的襯線比較細，強調筆畫的末筆。
Didot
font-family: Didot, “Didot LT STD”, “Hoefler Text”, Garamond, “Times New Roman”;
Georgia
字體族科包括: Georgia, Times, “Times New Roman”;
Georgia是一種襯線字體，為著名字型設計師馬修·卡特（Matthew Carter）于1993年為微軟所設計的作品，具有在小字下仍能清晰辨識的特性，可讀性十分優良。其命名發想自一份小報報道在美國佐治亞州發現外星人頭顱的測試性頭條。
一個網頁設計者的分析能力遠比創意來的重要。總之設計出好的網頁需要注意多方面；
界面弱化
一個好的界面設計它的界面是弱化的，它突出的是功能，著重體現的是網站業提供給使用者是主要什么。這就涉及到瀏覽順序、功能分區等等。
要讓訪客在0.5秒內就能把握網站的行業性質，1秒內就知道該從哪個地方開始使用這個網站，能點一次的，絕不點第二次。當然上面說的是大多數功能性網站，對于宣傳展示性網站，諸如加特效的或Flash網站，可能就不得不花哨一些，但不能太過分。網站不是動畫片，在效率越來越高，社會心理越來越浮躁的中國，人們的耐心越來越小，心理承受能力越來越低。效果可以體現意境，點到為止。
模塊化和可修改性強
模塊化不僅可以提高重用性，也能統一網站風格，還可以降低程序開發的強度。這里就涉及一些尺寸、模數、寬容度、命名規范等等知識了，不再冗述。
無論是架構還是模塊或圖片，都要考慮可修改性強。舉個簡單的例子，logo、按鈕等，很多人喜歡制作圖片，N個按鈕就是N張圖片。如果只做3-5類按鈕的背景圖片，然后用在網頁代碼里打上文字，那么修改起來就簡單了，讓程序員自己改字就可以了。然而網頁顯示的字體是帶有鋸齒的，一般即能清晰又保證美觀的字體字號有幾類：宋體 12px | 宋體 12px 粗體 | 宋體 14px | 宋體 14px 粗體 | 黑體 20px | verdana 9px | Arial Black 12px+ |
400-6446-365 / 010-64928252
我想要個更針對我需求的方案
也許您需要專業的服務，歡迎來電咨詢
您的需求，是我們前進最大的動力
關于我們
北京分形科技有限公司成立于2003年，是一家以AI為核心驅動力，提供網絡品牌策劃、AI互聯網服務、WEB3服務、AI人工智能解決方案的綜合服務商
我們一直秉承的經營理念：責任、熱情、品質、包容
主要業務范圍：AI互聯網服務（網站建設,網站群,短視頻社交平臺,APP,小程序）AI人工智能行業解決方案（智慧博物館,智慧公園,智慧景區,智慧社區,智慧醫療,智慧校園,）IoT智能物聯產品（智能步道,AR太極,AI健身,AI導覽,AI單車,智慧樹）WEB3（區塊鏈,元宇宙,NFT數字藏品）