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