如何正確的設(shè)計(jì)一個(gè)網(wǎng)站

時(shí)間：2023-10-08 01:30:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-10-08 01:30:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

如何正確的設(shè)計(jì)一個(gè)網(wǎng)站：咱們接著說(shuō)我們的官網(wǎng)，官網(wǎng)是我們企業(yè)的門(mén)戶，是描述我們產(chǎn)品的窗口，大家對(duì)我們的印象和期待也是在這個(gè)方面建立的。好比看一個(gè)人，好不好看，順不順眼，從看他的外貌和體態(tài)上就可以知道一個(gè)大概。

我們講相由心生，網(wǎng)站也是如此，這個(gè)公司是否正規(guī)，產(chǎn)品是否用心，從官網(wǎng)上就可以看得出來(lái)，做的很糙，板塊布局很亂，頁(yè)面上充滿了各種亂七八糟的廣告，這樣的網(wǎng)站想必大家會(huì)在進(jìn)入的1秒之內(nèi)就離開(kāi)了。因?yàn)樗屓撕懿皇娣?。而如果進(jìn)入一個(gè)結(jié)構(gòu)合理，色彩搭配養(yǎng)眼，就算這個(gè)產(chǎn)品不是自己所需的，也會(huì)在這個(gè)頁(yè)面多逗留一會(huì)兒。這就是美的力量。




第一：色彩養(yǎng)眼，大小剛剛好，抓住第一印象

我們?cè)O(shè)計(jì)一個(gè)網(wǎng)站，遵循的原則是符合本行業(yè)特色，比如首飾類網(wǎng)站一般體現(xiàn)奢華和尊貴，那么如果你用重色彩來(lái)設(shè)計(jì)你的網(wǎng)站，會(huì)舍本求末，一般為了凸顯金銀的色澤，整體色調(diào)都會(huì)比較清新，這樣產(chǎn)品才會(huì)凸顯。比如IDO的官網(wǎng)、老鳳祥官網(wǎng)都比較淡雅。如果采用金晃晃的色彩，嘖嘖嘖……想想都很老土對(duì)吧。


色彩應(yīng)該能體現(xiàn)行業(yè)的特色。顏色搭配要合理，主色調(diào)應(yīng)該控制在2-3個(gè)主色，輔助色不宜太多。文字顏色以便于閱讀為主，背景色切勿與文字反差太小。

間距要合理，文字過(guò)多時(shí)注意分段和段落之間的間距，文字過(guò)于密集，頁(yè)面會(huì)顯得很亂，另外不利于閱讀，給人閱讀造成很強(qiáng)的壓力感。所以行高“”透氣性“”很重要。

文字大小要合適。文字大小應(yīng)該和頁(yè)面的布局相輝映，一般英文字體最小10px,漢字最小12px，板塊較大，文字可以適當(dāng)變大，和頁(yè)面大小布局協(xié)調(diào)很重要。

字體選擇要考慮適配性。現(xiàn)在市面上比較主流的是windows和Mac兩種系統(tǒng)，那么這兩個(gè)系統(tǒng)的通用字體為微軟雅黑和平方體，我們頁(yè)面設(shè)計(jì)時(shí)就要考慮這兩個(gè)字體在頁(yè)面上的效果。如果用戶沒(méi)有這些字體也要考慮替代字體方案。所以大家常用做法是將我們期望字體和替代字體像如下代碼一樣放到頁(yè)面樣式表里。

12px/1.5 "PingFangSC-Light", "Helvetica Neue", Helvetica, "Microsoft Yahei", Arial, "Hiragino Sans GB", tahoma, SimSun, sans-serif


第二：板塊布局合理，符合大眾審美

目前頁(yè)面布局基本分為左右，居中，左中右，左上右，滿屏和非滿屏等，不同的布局給人的感覺(jué)不一樣，因?yàn)椴季质钦麄€(gè)頁(yè)面的框架，網(wǎng)站看起來(lái)是否整齊劃一，他起了很大作用，所以我們?cè)诓季謺r(shí)要尊重大眾審美，不要太特立獨(dú)行。

1、無(wú)論哪一種布局都要考慮黃金視覺(jué)區(qū)域，就是我們看一個(gè)網(wǎng)頁(yè)的第一著眼點(diǎn)是哪里，一般是左上角部分，所以我們的重點(diǎn)內(nèi)容應(yīng)該放在這個(gè)區(qū)域。一般都是網(wǎng)站logo和slogan。所以這里的文案非常非常重要，是抓住眼球的重中之重。我們?cè)谥v文案的時(shí)候再來(lái)說(shuō)。當(dāng)然這個(gè)黃金三角會(huì)根據(jù)頁(yè)面內(nèi)容放置位置變化，比如百度、Google他們頁(yè)面就一個(gè)搜索框還是在中間的，右上角沒(méi)有東西，那么我們的視覺(jué)自然而然的就落到了表單上面。

2、布局在設(shè)計(jì)時(shí)也要考慮技術(shù)實(shí)現(xiàn)，過(guò)于復(fù)雜的布局或者充滿了奇形怪狀的區(qū)塊，WEB工程師在實(shí)現(xiàn)的時(shí)候會(huì)出現(xiàn)困境，這個(gè)時(shí)候他們會(huì)用圖片的形式來(lái)代替，一個(gè)頁(yè)面如果充滿了圖片，除了加載性能差以外。在高清屏?xí)惺д娴奈ｋU(xiǎn)。所以應(yīng)該用文字的盡量不要用圖片切圖。

3、要考慮移動(dòng)端的適配性，現(xiàn)在頁(yè)面都會(huì)做響應(yīng)式，板塊除了在PC端布局合理之外，還要考慮板塊在縮小瀏覽器窗口之后的呈現(xiàn)樣式。比如左右布局時(shí)，經(jīng)常用左側(cè)為主，右側(cè)下沉到左側(cè)布局下方等方式。這就需要設(shè)計(jì)師在設(shè)計(jì)時(shí)考慮這方面。當(dāng)然如果為了特別的美觀，無(wú)法兼顧這個(gè)適配，那要另當(dāng)別論，優(yōu)先級(jí)根據(jù)實(shí)際情況而定。

4、板塊大小要遵從主大枝小的原則，重要的內(nèi)容應(yīng)該用大板塊，次要內(nèi)容要用小板塊，比如左右布局，左側(cè)大板塊當(dāng)然要給主要內(nèi)容，而右側(cè)的內(nèi)容相對(duì)次要。這是在第一感官上告訴用戶，這里是重要的，來(lái)看這兒。

5、板塊內(nèi)邊距和外邊距應(yīng)該以感官舒服為準(zhǔn)，合理的間距，讓人知道哪些是重點(diǎn)，哪些不是。而如果所有的內(nèi)容沒(méi)有間距或者間距很小，感覺(jué)很擠，這樣的頁(yè)面讓人很懼怕，不想看，因?yàn)樘哿?。間距要注意統(tǒng)一，不要出現(xiàn)有的大有的小，好比你看一個(gè)梯子，每個(gè)踏板之間的距離很合理統(tǒng)一，讓人感覺(jué)他就是一個(gè)整體，如果有的空擋大有的小，就沒(méi)有這個(gè)感覺(jué)了。




第三：文字內(nèi)容不可忽視的靈魂地位

我們說(shuō)的內(nèi)容其實(shí)很大一部分說(shuō)的都是文字和圖片，文字是表達(dá)的主要方式，我們?cè)谧x一本書(shū)時(shí)，優(yōu)美的句子，嚴(yán)謹(jǐn)?shù)倪壿?，合理的舉例讓我們感覺(jué)這個(gè)作者非常專業(yè)，腦子的思路會(huì)跟著作者的文字不斷的飛翔。我們會(huì)說(shuō)這是一本好書(shū)。因?yàn)樗v明白了想講的東西。

所以我們?cè)诓邉澪覀兊木W(wǎng)站時(shí)，文字要便于閱讀。把想說(shuō)的說(shuō)明白，不要讓用戶去猜，有些文案同學(xué)比較有才氣，表達(dá)一件東西時(shí)，用了很多比較有文化詞藻，讓人讀了之后，哇，厲害，但是沒(méi)懂。這就沒(méi)有達(dá)到我們的目的，我們要說(shuō)白話，我們的網(wǎng)站是為了表達(dá)清楚我們有什么，做什么，不是為了讓客戶來(lái)體驗(yàn)文采飛揚(yáng)的。所以很多運(yùn)營(yíng)大咖經(jīng)常說(shuō)，網(wǎng)頁(yè)內(nèi)容要“說(shuō)人話”就是這個(gè)理。

我們?cè)诘诙?jié)時(shí)提到，黃金三角區(qū)域的重要性，因?yàn)樗俏覀冞M(jìn)入一個(gè)頁(yè)面，視覺(jué)第一落腳點(diǎn)，這里的文字內(nèi)容可以說(shuō)是用戶對(duì)我們第一印象的直觀體現(xiàn)。

右上角我們會(huì)放我們的企業(yè)logo，這是告訴大家我是誰(shuí)，緊接著就是我們的企業(yè)口號(hào)，這里的口號(hào)可能是我們的品牌主張，或者我們的促銷活動(dòng)。比如京東放的是促銷活動(dòng)。而天貓放的是品牌主張。當(dāng)然如果我們是普通的企業(yè)站，不要放這些比較大的口號(hào)，應(yīng)該利用這個(gè)位置告訴我們客戶，我們是做什么的。比如奧托科技這個(gè)網(wǎng)站的口號(hào)就是告訴客戶我們主要賣的是什么產(chǎn)品。





上面我們強(qiáng)調(diào)了黃金位置文案的重要性，接下來(lái)是我們主體內(nèi)容，我們網(wǎng)站有布局，其實(shí)內(nèi)容也有布局，他應(yīng)該是充滿技巧和誘導(dǎo)性的。我們網(wǎng)站的目的是什么？當(dāng)然是介紹我們，最終讓客戶去留下資料或者去購(gòu)買商品。就算你說(shuō)我們的網(wǎng)站不讓客戶留資料和買產(chǎn)品，那么也是想讓客戶看到聯(lián)系我們的頁(yè)面吧。所以我們文案布局就很重要了。尤其是首頁(yè)的文案布局最重要。

我們?cè)谑醉?yè)表述我們時(shí)，一般遵從以下的流程，因?yàn)檫@個(gè)流程是有誘導(dǎo)性的。是可以加速客戶行動(dòng)的。

1、我是誰(shuí)（首屏重點(diǎn)突出亮點(diǎn)，文字簡(jiǎn)潔易懂，配合圖片呈現(xiàn)）

2、誰(shuí)用我（大家比較熟悉大品牌在此羅列，增強(qiáng)說(shuō)服力）

3、我能幫你做什么（幫你解決的主要痛點(diǎn)）

4、我還有什么（為了上面的痛點(diǎn)，我有這些）

5、為什么選我（我的優(yōu)勢(shì)是什么）

6、還有哪些客戶

7、客戶證言（他們用了都說(shuō)好）

大家可以看到，第一步介紹完自己之后，緊接著就是哪些大客戶在用，這是強(qiáng)化用戶信心的方式。因?yàn)槟阕哉f(shuō)自唱說(shuō)明不了什么，但是如果有我知道的企業(yè)或者人用了，那么這種名人效應(yīng)就出來(lái)了。

第三步我能幫你做什么板塊，強(qiáng)化信心之后，就是介紹我們產(chǎn)品能解決的痛點(diǎn)，這需要我們對(duì)我們服務(wù)的行業(yè)有一定了解，知道客戶現(xiàn)在遇到的問(wèn)題，能夠切中要害的直接戳破。讓他們有共鳴，才能讓他有興趣關(guān)注我們解決這個(gè)痛點(diǎn)的產(chǎn)品。

第四步產(chǎn)品板塊，我們有什么，上面說(shuō)了痛點(diǎn)，接下來(lái)就是我為了上面痛點(diǎn)所做的努力和產(chǎn)品。讓客戶有找到良藥的感覺(jué)，緩解上面的痛楚。

第五步優(yōu)勢(shì)板塊，行業(yè)這么大，競(jìng)手這么多，為什么選擇你？你有什么優(yōu)勢(shì)，我們?cè)谶@個(gè)板塊里就要進(jìn)行亮點(diǎn)凸顯和強(qiáng)項(xiàng)闡述。大家去看淘寶的產(chǎn)品頁(yè)時(shí)，會(huì)看到很多別人家和我們家產(chǎn)品的對(duì)比，就是這個(gè)道理，我要告訴你我比別人強(qiáng)在哪里。我有哪些專利技術(shù)或者行業(yè)研究時(shí)間等等。這里我們應(yīng)該放一個(gè)按鈕，比如現(xiàn)在聯(lián)系我們或者試用我們的產(chǎn)品等等。

第六步我們的客戶板塊，第一屏沒(méi)有羅列完的客戶或者放一些重點(diǎn)客戶的案例。這些都是直接展現(xiàn)我們的能力的方法。

第七步客戶證言，讓用過(guò)產(chǎn)品的人來(lái)說(shuō)使用感受，好比淘寶里面的客戶評(píng)價(jià)，這些是大家購(gòu)買產(chǎn)品關(guān)注的一個(gè)重點(diǎn)。你說(shuō)好不算好，別人說(shuō)好才叫好。臨門(mén)一腳的作用就是靠這個(gè)來(lái)促成。

就此我們的首頁(yè)文字布局基本完成，循循善誘，將客戶的思路按照我們規(guī)劃的路徑來(lái)走，促成我們的最終轉(zhuǎn)化。




第四：讓圖片給網(wǎng)頁(yè)增色添彩

圖片絕對(duì)是我們頁(yè)面錦上添花的存在，因?yàn)槲覀冊(cè)诒磉_(dá)一件事情時(shí)，媒體的受歡迎程度如下：

文字 < 圖片 < 音頻 < 視頻

如果頁(yè)面上面文字中間穿插一張圖，除了讓人耳目一新之外，圖片上面的內(nèi)容也會(huì)更多的受到關(guān)注。所以電商網(wǎng)站非常重視配圖，產(chǎn)品圖都非常誘人。

那么我們?nèi)绾巫寛D片更好的發(fā)揮作用，如何正確的使用圖片？遵循以下原則：

1、相關(guān)性，主題和圖片表達(dá)要一致，和標(biāo)題一定要強(qiáng)相關(guān)，圖片的吸引力大于文字，所以文字應(yīng)該屬于圖片主題的補(bǔ)充

2、真實(shí)性，圖片不能夸大，過(guò)分的夸大，對(duì)品牌是一種傷害，給客戶的錯(cuò)覺(jué)太完美，落差就太大。要貼近自己的產(chǎn)品，做適當(dāng)?shù)男揎棥?br>
3、靈動(dòng)性，圖片不是死板的闡述你的意思，要讓他表達(dá)你要表達(dá)的意思，比如蜂蜜很誘人，大家構(gòu)圖喜歡用勺子里的蜂蜜向下流動(dòng)來(lái)勾人食欲，體現(xiàn)果汁的新鮮，會(huì)用真實(shí)的水果流出的果汁來(lái)表現(xiàn)，就是通過(guò)這樣的場(chǎng)景套用描述產(chǎn)品的亮點(diǎn)。

4、頁(yè)面和諧，比如頁(yè)面偏穩(wěn)重，可以讓圖片呈現(xiàn)灰色，給人很干凈的感覺(jué)，logo可以做灰色處理，人像不要做灰色處理，頁(yè)面很亮，圖片也可以選擇色差強(qiáng)的圖片

5、尺寸統(tǒng)一，兄弟之間圖片尺寸要一致，整齊劃一，不要有大有小，給人頁(yè)面很錯(cuò)亂

6、用戶偏好，根據(jù)自己的用戶群，選擇相應(yīng)的色彩圖片，比如面向女生，玫紅或者紅色比較適合，黑色或者白色更顯檔次。

合理的使用圖片，讓我們的頁(yè)面充滿了可讀性，有些同學(xué)可能會(huì)說(shuō)既然音頻和視頻不是更利于表達(dá)嗎？如果首頁(yè)出現(xiàn)一個(gè)介紹視頻，那當(dāng)然是更好不過(guò)的，他的播放量絕對(duì)很高，但是我們要知道音頻和視頻的制作成本太高了。圖文可能一個(gè)人就可以搞定，但是一個(gè)視頻的工作量需要拍攝后期處理。時(shí)間上和人力上都不如圖片更方便。如果有相應(yīng)的團(tuán)隊(duì)，可以多放些視頻在頁(yè)面上。前提是內(nèi)容要協(xié)調(diào)，遵從上面圖片的規(guī)則。

運(yùn)用這四點(diǎn)技巧，我們才能讓我們的官網(wǎng)按照我們的想法說(shuō)給客戶聽(tīng)，讓用戶看到我們的官網(wǎng)時(shí)就像面對(duì)一個(gè)專業(yè)的顧問(wèn)娓娓道來(lái)。