大多數(shù)人認(rèn)為網(wǎng)站設(shè)計(jì)是你看到的。但是史蒂夫喬布斯幾年前曾經(jīng)提到我們說(shuō)“設(shè)計(jì)是如何運(yùn)作的”。同樣的原則適用于您的網(wǎng)站設(shè)計(jì)。當(dāng)然，網(wǎng)站看起來(lái)不錯(cuò)，很重要。但是，更重要的是您的網(wǎng)站正常運(yùn)行 – 將流量轉(zhuǎn)變?yōu)闊衢T(mén)的線索和全新的客戶(hù)。不幸的是，情況并非如此。例如，您在…
大多數(shù)人認(rèn)為網(wǎng)站設(shè)計(jì)是你看到的。
但是史蒂夫·喬布斯幾年前曾經(jīng)提到我們說(shuō)“設(shè)計(jì)是如何運(yùn)作的”。
同樣的原則適用于您的網(wǎng)站設(shè)計(jì)。
當(dāng)然，網(wǎng)站看起來(lái)不錯(cuò)，很重要。
但是，更重要的是您的網(wǎng)站正常運(yùn)行 – 將流量轉(zhuǎn)變?yōu)闊衢T(mén)的線索和全新的客戶(hù)。
不幸的是，情況并非如此。
例如，您在某些頂級(jí)網(wǎng)站上看到的許多常見(jiàn)設(shè)計(jì)功能已被顯示為影響轉(zhuǎn)化。
不相信我 看看下面這七個(gè)數(shù)據(jù)支持的例子，看看你是否犯了同樣的潛在危險(xiǎn)的錯(cuò)誤。
圖片庫(kù)
告訴我，如果這聽(tīng)起來(lái)很熟悉
您在Themeforest上發(fā)現(xiàn)了一個(gè)美麗的新WordPress主題。
這是您正在尋找的功能的完美組合。很干凈 它具有當(dāng)代設(shè)計(jì)。
另外，只有50美元！
這甚至比基本的定制設(shè)計(jì)便宜幾千美元！
您盡快購(gòu)買(mǎi)并開(kāi)始設(shè)置。只有幾個(gè)小時(shí)的時(shí)間，而且…好吧，這并不完全正確。
你不能把你的手指放在它上面，但有些東西感覺(jué)到了。
所以你回到原來(lái)的版本來(lái)比較兩者，看看為什么你們不符合說(shuō)服你購(gòu)買(mǎi)的原始文本。
那就是當(dāng)它擊中你：圖像！
今天的設(shè)計(jì)趨勢(shì)相對(duì)較小?，F(xiàn)在看看你正在閱讀的這個(gè)例子。
它有很多的空白，幾個(gè)粗體重音色和干凈的排版。
圖像37
否則，將其分開(kāi)的唯一其他事情是高質(zhì)量的圖像。
他們完美匹配，好像有人在設(shè)計(jì)網(wǎng)站（他們所做的）之前想到了這一點(diǎn)。
互聯(lián)網(wǎng)上最好的網(wǎng)站通常都有一些專(zhuān)業(yè)的攝影和定制圖像，旨在增強(qiáng)整體美感。
當(dāng)沒(méi)有發(fā)生這種情況時(shí)，嘗試從隨機(jī)不同的地方拍攝照片可能很難。
那么你采取的第一個(gè)捷徑是什么？
啟動(dòng)Pixabay找到一些免費(fèi)的高品質(zhì)圖像。
庫(kù)存圖像適用于像這樣的博客文章。
但是，他們經(jīng)?？梢栽谀W(wǎng)站的轉(zhuǎn)換驅(qū)動(dòng)頁(yè)面上反擊。
在這里，我會(huì)告訴你的。
Visual Website Optimizer運(yùn)行了一個(gè)簡(jiǎn)單的拆分測(cè)試，將一張真實(shí)的照片與庫(kù)存照片對(duì)齊。
這是唯一的頁(yè)面變化，因?yàn)樗麄兿肟纯茨男?qū)動(dòng)了更多的CTA點(diǎn)擊（新注冊(cè)）。
image01 1024x566
最初，通過(guò)推動(dòng)更多的CTA點(diǎn)擊，實(shí)際圖像優(yōu)于股票形象。它也改善了注冊(cè)，提高了38.4％。
庫(kù)存照片不僅僅是減損整體經(jīng)驗(yàn)和審美。它們也可能損害網(wǎng)站的信譽(yù)。
這與小型網(wǎng)站發(fā)生了很大的關(guān)系?？纯催@個(gè)例子：
粘貼圖像0 282
這看起來(lái)很糟糕，可能會(huì)損害他們的信譽(yù)，但如果它像我們剛剛看到的那樣降低轉(zhuǎn)化率，那就特別糟糕。
圖像是強(qiáng)大的，因?yàn)槿藗冎恍枰?3毫秒來(lái)潛意識(shí)地理解它們。
圖像也有能力將參與度提高94％，因此它們是推動(dòng)行動(dòng)和轉(zhuǎn)化的最佳方法之一。
那么你應(yīng)該總是使用最好的，最大的和最高分辨率的照片？
嗯，不完全是
這就是為什么
很好看，高分辨率，超大圖像
正如我們剛剛看到的那樣，轉(zhuǎn)換關(guān)鍵頁(yè)面上的股票照片可以通過(guò)損害可信度來(lái)減少轉(zhuǎn)化。
但這并不一定意味著巨大的，美麗的視覺(jué)效果也是完美的選擇。
例如，在一個(gè)網(wǎng)站上查看這個(gè)漂亮的全屏視頻背景：
截圖2017 07 11 08 08 34
看起來(lái)不錯(cuò)，對(duì)吧？
它橫跨您的大型桌面顯示器，看起來(lái)像素完美。
那么可能有什么壞處呢？
這個(gè)。
屏幕截圖2017 07 11 at 083A273A13
不幸的是，這是非常緩慢的。
加載需要12秒，這意味著它可能會(huì)損失 31％的流量！
人們不喜歡等待，無(wú)論網(wǎng)站的外觀如何。
如果這還不夠糟糕，Google最近的移動(dòng)頁(yè)面速度基準(zhǔn)測(cè)試報(bào)告發(fā)現(xiàn)，“ 如果加載需要七秒鐘，有人從您的站點(diǎn)彈起的概率將增加113％?！?
好消息是，Google最近給了我們一個(gè)新的改進(jìn)工具來(lái)使用和測(cè)試我們的進(jìn)度 – 測(cè)試我的網(wǎng)站。
我在上面提到的網(wǎng)站上進(jìn)行了測(cè)試，看到它在業(yè)界的表現(xiàn)。
屏幕截圖2017 07 11 at 083A273A30
幸運(yùn)的是，“測(cè)試我的網(wǎng)站”報(bào)告提供了一些建議，以查看哪些問(wèn)題正在拖動(dòng)您的頁(yè)面加載時(shí)間最多。
看看這個(gè)網(wǎng)站應(yīng)該做什么。
屏幕截圖2017 07 11 at 083A283A11
“優(yōu)化圖像”位于列表的頂部，當(dāng)您回到參考早期的視覺(jué)效果時(shí)，這并不奇怪。
但等一下 為什么我們談?wù)撍俣榷皇寝D(zhuǎn)換？
除了強(qiáng)迫您的流量離開(kāi)之外，慢速速度也被證明可以傷害SEO 和轉(zhuǎn)化。
我們之前提到的Google報(bào)告中發(fā)現(xiàn)的同樣的Google報(bào)告發(fā)現(xiàn)， “由于元素?cái)?shù)量 – 文本，標(biāo)題，圖像數(shù)量在400頁(yè)至6000頁(yè)之間，轉(zhuǎn)換概率下降了95％。”
哇！95％？
加快頁(yè)面加載時(shí)間是一個(gè)復(fù)雜的話題，值得一個(gè)自己的帖子，但這里有三個(gè)要注意的快速提示：
如果可能，裁剪并調(diào)整圖像大小以適應(yīng)您網(wǎng)站上的特定尺寸。
然后如果可能，壓縮文件大小與WP Smush.it。
最后但并非最不重要的是，使用CDN（如CloudFlare）托管和傳送您的圖像。
3.加權(quán)CTA
問(wèn)題：您下面的兩個(gè)CTA中的哪一個(gè)您首先點(diǎn)擊？
粘貼圖像0 280
你的猜測(cè)和我一樣好！
他們都很糟糕
在這里唯一可能的保存恩典是一個(gè)CTA位于另一個(gè)CTA之下。不過(guò)，否則，他們看起來(lái)或多或少相同。
他們的總體尺寸是一樣的，“點(diǎn)擊這里”副本，而一個(gè)很好的努力，也具有相同的精確重量和背景。
換句話說(shuō)，讀者沒(méi)有視覺(jué)提示哪些選項(xiàng)是主要的和次要的。
你不清楚你應(yīng)該點(diǎn)擊哪一個(gè)。
這是一個(gè)問(wèn)題，因?yàn)椤叭藗冃枰I(lǐng)導(dǎo)”，MarketingExperiments.com說(shuō)。
在一個(gè)實(shí)驗(yàn)中，研究人員使用三個(gè)平等加權(quán)的CTA進(jìn)行了一頁(yè)的合并，將其合并成一個(gè)主要的一個(gè)。
image03 1024x505
這個(gè)決定背后的邏輯很簡(jiǎn)單：“人們需要知道他們能夠獲得最大價(jià)值的地方。所以，指出他們對(duì)主要的號(hào)召性采取明確決定性的方向。“
為了說(shuō)明這一點(diǎn)，營(yíng)銷(xiāo)實(shí)驗(yàn)運(yùn)行了類(lèi)似的測(cè)試，顯示了通過(guò)更改CTA按鈕的設(shè)計(jì)可以產(chǎn)生的直接影響。
看看這兩者之間的區(qū)別。
image08
這一次，測(cè)試通過(guò)幫助訪問(wèn)者做出更容易的決策，產(chǎn)生了64％的轉(zhuǎn)化增長(zhǎng)。
混亂的消息
這是另一個(gè)大問(wèn)題。
您的網(wǎng)站的消息有多清晰？
我們來(lái)看一個(gè)例子。
看看您是否可以弄清這個(gè)著陸頁(yè)有什么問(wèn)題。
粘貼圖片0 272
對(duì)于初學(xué)者，沒(méi)有人正在閱讀整個(gè)文本墻。
第二，行話和復(fù)雜的“企業(yè)”語(yǔ)言幾乎難以辨認(rèn)。
您應(yīng)始終將網(wǎng)站的閱讀水平保持在不到7年級(jí)或8年級(jí)的閱讀水平。
研究表明，容易理解的東西（單詞，名字等）實(shí)際上被視為更可信！
管理咨詢(xún)公司麥肯錫指的是復(fù)雜的寫(xiě)作，“ 談?wù)撃愕目蛻?hù)。”
實(shí)質(zhì)上，你說(shuō)的是一件事，但客戶(hù)關(guān)心的還是別的。
你不認(rèn)為“消息傳遞”與設(shè)計(jì)有什么關(guān)系？看下面這個(gè)例子，告訴我，如果你還是這樣想的話。
好的cta登陸頁(yè)面的例子
這是一個(gè)積極的例子。該頁(yè)面是簡(jiǎn)單的和即時(shí)的。
該設(shè)計(jì)強(qiáng)調(diào)了標(biāo)題周?chē)目瞻?，并引起了?duì)藍(lán)色CTA部分的關(guān)注。
這是圖片完美。
5. 極其薄設(shè)計(jì)
不要讓我想到是關(guān)于設(shè)計(jì)和推動(dòng)轉(zhuǎn)化的可用性的最好的書(shū)之一。
這本書(shū)的前提是從標(biāo)題中顯而易見(jiàn)的。
它表示網(wǎng)站應(yīng)該像人們期望他們一樣工作。
你有沒(méi)有見(jiàn)過(guò)一個(gè)孩子第一次拿起iPad？
他們通常只需要幾秒鐘就知道如何開(kāi)始使用它。
理想情況下，網(wǎng)站應(yīng)該是一樣的。不幸的是，他們并不總是。
例如，有時(shí)平面設(shè)計(jì)趨勢(shì)可能會(huì)太過(guò)分。
完成后（如下面的示例），它可以簡(jiǎn)化頁(yè)面，以便他們立即可以理解。
粘貼圖像0 273
然而，如果做得不好，他們可能會(huì)缺少通知用戶(hù)下一步做的信號(hào)。
這是一個(gè)例子。
看看這個(gè)圖像，這是CrazyEgg軟件的熱圖。
手提箱屏幕截圖
熱圖表明，沒(méi)有人點(diǎn)擊這些圖像，即使它們應(yīng)該是！
頁(yè)面本身看起來(lái)不錯(cuò)，但平面設(shè)計(jì)沒(méi)有提示用戶(hù)應(yīng)該點(diǎn)擊這些元素。
因此，沒(méi)有人正在查看這些項(xiàng)目案例研究頁(yè)面。因此，沒(méi)有人在招聘那家公司！
即使簡(jiǎn)單的標(biāo)題，按鈕或懸停效果也會(huì)讓用戶(hù)知道他們應(yīng)該點(diǎn)擊這些頁(yè)面元素。
例如，從HubSpot中查看此示例。
粘貼圖片0 264
你可以看到它是一個(gè)圖像CTA（像前面的例子）。
而不是假設(shè)你知道它是什么，或者為什么你應(yīng)該點(diǎn)擊，有提示可以幫助你。
標(biāo)題： “免費(fèi)模板”
分目： “免費(fèi)營(yíng)銷(xiāo)目標(biāo)設(shè)定模板”
復(fù)制： “確定您的營(yíng)銷(xiāo)目標(biāo)，并通過(guò)此免費(fèi)的Excel模板為明年設(shè)定截止日期?！?
圖像： Mac筆記本電腦與目標(biāo)設(shè)置模板的示例。
CTA：按鈕與下一個(gè)“獲取您的模板”和一個(gè)箭頭。
看到不同？
他們沒(méi)有任何機(jī)會(huì)。
當(dāng)你看到它時(shí)，你確切知道該怎么做 而額外的細(xì)節(jié)也可以幫助您確定為什么要點(diǎn)擊它。
清潔，邏輯組織
頁(yè)組織事宜。
重要的是轉(zhuǎn)換。
例如，您的“關(guān)于”頁(yè)面應(yīng)該稱(chēng)為“關(guān)于”，而不是“團(tuán)隊(duì)”或“領(lǐng)導(dǎo)力”，“團(tuán)結(jié)”或“我們是誰(shuí)”。
雖然其他頁(yè)面標(biāo)題可能很聰明，但并不是每個(gè)人都會(huì)立即了解每一個(gè)頁(yè)面。
這就是為什么導(dǎo)航中的所有頁(yè)面都非常簡(jiǎn)單和常用。
圖像39
信息架構(gòu)（IA）是類(lèi)似的，它涉及組織您的網(wǎng)站的信息。
某些頁(yè)面的組織應(yīng)該類(lèi)似，以便人們知道如何找到新產(chǎn)品，即使他們以前從未訪問(wèn)過(guò)您的網(wǎng)站。
這就是我的意思
你去Zappos.com尋找一雙新鞋子。
在頂部，你看到他們是按性別（女人和男人），然后年齡（孩子），然后部門(mén)，品牌和銷(xiāo)售分裂。
這使得它非常容易上手。
然后點(diǎn)擊下拉菜單（如“女士”）后，它會(huì)展開(kāi)，以展示“鞋子”類(lèi)型，然后是“服裝”和“附件”組織的更多選項(xiàng)。
粘貼圖片0 271
看到？你可能從來(lái)沒(méi)有去過(guò)這個(gè)網(wǎng)站。他們有成千上萬(wàn)的產(chǎn)品。但是找到你要找的東西很容易和合乎邏輯
Nordstrom在他們的網(wǎng)站上做了類(lèi)似的事情：
粘貼圖片0 284
它開(kāi)始于女性，男性，兒童，家庭，美容和銷(xiāo)售之間的類(lèi)似故障。
然后，當(dāng)你更深入一層時(shí)，它分成“用例”（新到達(dá)，趨勢(shì)，假期，婚禮）和類(lèi)別（服裝，鞋子，手袋，配件）。
換句話說(shuō)，他們幫助“表達(dá)”了一些最常見(jiàn)的選擇。
他們現(xiàn)在要更容易（更快）找到。此外，它保持頂級(jí)導(dǎo)航盡可能簡(jiǎn)單，所以用戶(hù)不會(huì)被淹沒(méi)。
如果這些龐大的電子商務(wù)網(wǎng)站仍然可以將他們的網(wǎng)頁(yè)組織成一個(gè)簡(jiǎn)單，流線型的層次結(jié)構(gòu)，我們也可以這樣做。
B2B觀眾喜歡長(zhǎng)篇深入的內(nèi)容頁(yè)面。
然而，有時(shí)候用戶(hù)可能會(huì)感到困惑，他們?cè)谀睦锘蚱渌畔⑹菄@這個(gè)內(nèi)容。所以他們最終離開(kāi)了。
您可以使用小的視覺(jué)線索，但是，像下面的示例中的子導(dǎo)航，巧妙地讓用戶(hù)準(zhǔn)確地知道它們?cè)谀睦铩?
當(dāng)用戶(hù)向下滾動(dòng)足夠遠(yuǎn)或跳到新頁(yè)面時(shí)，子導(dǎo)航懸停將更新為新的選擇。
這將立即為他們提供關(guān)于他們剛剛離開(kāi)的地方，他們現(xiàn)在在哪里以及他們應(yīng)該去哪里的線索。
我們的故事Tru by Hilton
旋轉(zhuǎn)木馬滑翔機(jī)
我已經(jīng)救了最后一次。
而且，“最好的”，我的意思是最糟糕的。
幾乎所有網(wǎng)站都可以使用旋轉(zhuǎn)木馬滑塊，從B2B到B2C甚至是電子商務(wù)。
我們之前只是贊美Zappos.com，而在這里，他們正在使用一個(gè)輪播滑塊來(lái)自動(dòng)滾動(dòng)不同的選項(xiàng)。
粘貼圖0 268
我對(duì)他們沒(méi)有一些偏見(jiàn)。
我只是沒(méi)有轉(zhuǎn)盤(pán)的粉絲，因?yàn)樗麄円呀?jīng)被證明（時(shí)間和時(shí)間再次）摧毀的轉(zhuǎn)換，而不是改善。
例如，哈里森瓊斯為搜索引擎土地研究，發(fā)現(xiàn)沒(méi)有人點(diǎn)擊轉(zhuǎn)盤(pán)！
看看這些轉(zhuǎn)盤(pán)點(diǎn)擊率。不那么熱，對(duì)吧？
image02
當(dāng)然，我明白為什么你可能想要一個(gè)旋轉(zhuǎn)木馬滑塊。
您想要炫耀貴公司，產(chǎn)品或服務(wù)的所有獨(dú)特方面。
但是，訣竅只是一次只能做一次。否則，你冒著太多的風(fēng)險(xiǎn)太快，因此幾乎沒(méi)有打破0.16％的點(diǎn)擊率。
電子商務(wù)公司在特定季節(jié)要突出或炫耀所有新品牌，旋轉(zhuǎn)木馬很常見(jiàn)。
例如，這里是Forever 21使用滑塊：
粘貼圖像0 278
H＆M，他們的信用，做了一些有點(diǎn)不同。他們使用兩個(gè)靜態(tài)部分來(lái)更好地關(guān)注用戶(hù)的注意力。
頂部有一個(gè)銷(xiāo)售電話，底部有一個(gè)產(chǎn)品。
圖像38
結(jié)論
您的網(wǎng)頁(yè)設(shè)計(jì)應(yīng)該看起來(lái)不錯(cuò)。然而，這并不意味著它也不能很好地工作。
理想情況下，您應(yīng)該始終使用真實(shí)（適當(dāng)大?。┑膱D像，快速與訪客共鳴。
這樣做會(huì)在用戶(hù)反彈之前為您的消息和CTA購(gòu)買(mǎi)足夠的時(shí)間。
接下來(lái)，您的設(shè)計(jì)功能應(yīng)該很容易理解。
這意味著一個(gè)簡(jiǎn)單的組織，常規(guī)的命名約定，以及一些提醒訪問(wèn)者他們應(yīng)該在頁(yè)面上做什么的小視覺(jué)線索。
無(wú)論你做什么，都會(huì)轉(zhuǎn)動(dòng)轉(zhuǎn)盤(pán)滑塊。
您看過(guò)哪些網(wǎng)頁(yè)設(shè)計(jì)功能有助于或損害轉(zhuǎn)化？
液壓壩液壓壩http://ahyhhdb.com
咨詢(xún)電話
15050695302
13771112364
咨詢(xún)QQ
1309844028