網(wǎng)站設(shè)計(jì)

Website development

10種方式的網(wǎng)頁設(shè)計(jì)師可以優(yōu)化2017的轉(zhuǎn)換率

發(fā)布時(shí)間：2017-03-23 12:21:35

TAGS：網(wǎng)站設(shè)計(jì)

了解如何設(shè)計(jì)一個(gè)網(wǎng)站，將游客趨之若鶩。

將良好的設(shè)計(jì)和有效的復(fù)制來共同創(chuàng)造一個(gè)網(wǎng)站，。

簡單的方程，對(duì)嗎？但是，有時(shí)候，很難找到合適的方法來創(chuàng)建和合并這兩種要素達(dá)到轉(zhuǎn)化率。

記住，這里的一些技術(shù)可以讓人們?nèi)绱伺d奮你的網(wǎng)站，他們不禁轉(zhuǎn)換。

1.通過保持簡單提高轉(zhuǎn)換率

?極簡設(shè)計(jì)除掉多余的關(guān)注。
明顯的總是贏

扁平、簡約的設(shè)計(jì)可以通過剝離設(shè)計(jì)和內(nèi)容僅為重要的元素，提高轉(zhuǎn)換率。戲劇性的陰影，漸變，和其他“現(xiàn)實(shí)”的視覺效果去掉，干凈和簡單的二維設(shè)計(jì)的出現(xiàn)。

通過集中你的基本要素，而不是裝飾，這種二維的方法可以在創(chuàng)造一個(gè)有序的布局和優(yōu)化轉(zhuǎn)換率是超級(jí)有幫助。它也為那些非常重要的行動(dòng)號(hào)召更多的空間（CTAS）生活、不受不必要的擁擠的呼吸。

不要去很小，你失去的啟示

人們已經(jīng)習(xí)慣于有某種深度和維度的按鈕。通過設(shè)計(jì)師的多年的努力，這些特點(diǎn)已經(jīng)成為“啟示”指標(biāo)的互動(dòng)。

如果沒有這些特征，扁平按鈕可以容易忽略當(dāng)你瀏覽一個(gè)網(wǎng)頁。這就是為什么你選擇了一個(gè)比較重要的按鈕顏色和一個(gè)位置，讓你的按鈕的互動(dòng)明顯。在風(fēng)格和視覺技巧，帶領(lǐng)游客的目光，明顯的卷也可以幫助。

2.建立合理的布局大限度地轉(zhuǎn)換

我們讀過的好的我們所讀的。

即使是小的審美，你還需要確保有一個(gè)基本的邏輯內(nèi)容的位置。有人瀏覽你的網(wǎng)站應(yīng)該從一個(gè)想法到輕松下。簡單的方法之一就是確保你的布局，堅(jiān)持人類的閱讀模式，像“F型”。

博客VWO了很好的例子一個(gè)重新設(shè)計(jì)的“F型”，導(dǎo)致銷售增長了35.6%。

當(dāng)設(shè)計(jì)你的網(wǎng)站，想想你想要的人采取的行動(dòng)，那么您的網(wǎng)站結(jié)構(gòu)，使它在邏輯上走往，動(dòng)作自然，無摩擦的方式。

3.通過添加上下文的“優(yōu)化

別讓我思考

–Steve Krug，大家都說

當(dāng)我們?cè)诰W(wǎng)上搜索的東西，我們通常不做“一般”的原因。相反，我們正在解決一個(gè)具體問題。所以，承認(rèn)在你的設(shè)計(jì)中就有一個(gè)整體的感覺。

例如，一個(gè)旅游公司稱之為自然空氣為他們的網(wǎng)站覆蓋特定目的地的一頁。每一頁有一個(gè)明確的電話在屏幕上正確的行動(dòng)。

的問題嗎？CTA一般。它讀“每日航班在哥斯達(dá)黎加”和它的一個(gè)按鈕，閱讀“預(yù)定航班配對(duì)?！?/span>

但在塔馬林多，一個(gè)特定的頁面為例，那只是不削減它。因此，該公司增加了第二個(gè)CTA，直接地演說游客的愿望：去塔馬林多。

經(jīng)修訂的CTA閱讀”飛到塔馬林多，從58美元，“自然空氣看見高達(dá)轉(zhuǎn)化率增加591%

所以，永遠(yuǎn)比你的“。盡管“整個(gè)哥斯達(dá)黎加”顯然包括塔馬林多，這需要額外的精力進(jìn)行連接。不要問別人為你做的跳躍為他們做。

4.使用響應(yīng)式設(shè)計(jì)使人在每個(gè)設(shè)備

一個(gè)響應(yīng)式設(shè)計(jì)的作品始終在設(shè)備。

有這么多的移動(dòng)設(shè)備在那里，響應(yīng)式設(shè)計(jì)是一個(gè)必須提供一個(gè)統(tǒng)一的經(jīng)驗(yàn)。當(dāng)你的網(wǎng)站上的各種各樣的裝置作品，更多的人將能夠轉(zhuǎn)換，當(dāng)和他們想去的地方。

響應(yīng)式設(shè)計(jì)的關(guān)鍵是對(duì)電子商務(wù)網(wǎng)站的轉(zhuǎn)化率優(yōu)化因?yàn)槟阒?，如果你曾?jīng)嘗試過店就在您的手機(jī)無響應(yīng)的網(wǎng)站。叫它“折騰”，可能會(huì)獲得我的年終獎(jiǎng)”。

谷歌報(bào)告那個(gè)人擁有多種類型的設(shè)備90%將屏幕切換之間的同時(shí)努力去做的事情。這是有道理的，對(duì)嗎？我們中有多少人瀏覽我們的工作電腦鞋（分手了?。?，只為了他們以后，我們的電話嗎？一致性和功能！用戶體驗(yàn)保持人和高轉(zhuǎn)換率的優(yōu)化是至關(guān)重要的。

然而，設(shè)計(jì)相應(yīng)的導(dǎo)航需要反思。而不是依靠亞馬遜式的巨型菜單，你要關(guān)注少數(shù)重要的頁面（好）作為你主要的資產(chǎn)凈值，然后鏈接從網(wǎng)站的有意義的地方的身體。

值得慶幸的是，這是轉(zhuǎn)化率優(yōu)化的好東西：它讓你專注于有可能導(dǎo)致轉(zhuǎn)換的頁面，并把其余的身體和頁腳鏈接。這是登陸頁面的標(biāo)準(zhǔn)實(shí)施規(guī)程。

當(dāng)你設(shè)計(jì)你的網(wǎng)站響應(yīng)，你要密切注意你的元素，精心布置在桌面將轉(zhuǎn)化到移動(dòng)設(shè)備。你不想，右列CTA在網(wǎng)站的頁腳部分獲得英雄埋在較小屏幕上。

輕易地，Webflow讓你自定義你的響應(yīng)設(shè)計(jì)的每一個(gè)元素，所以正確的元素總是顯示在正確的地方。與flexbox相反，你甚至可以在不同的設(shè)備上的布局，通過點(diǎn)擊一個(gè)復(fù)選框。

5.滑塊和旋轉(zhuǎn)木馬可以傷害轉(zhuǎn)化率

“這輪趨勢(shì)真讓我惡心。”

讓我們正式：圖像滑塊（或是旋轉(zhuǎn)木馬）完成。他們已經(jīng)成為關(guān)于寵物石頭一樣精彩。

另外，滑塊可以減緩你的大圖片的網(wǎng)站，增添不必要的干擾，并可不，他們往往不允許人們消費(fèi)內(nèi)容的時(shí)間。在某些情況下，可以直接導(dǎo)致了較低的轉(zhuǎn)換率。

根據(jù)帖子通過窺視拉加上conversionxl.com，元素如滑塊和旋轉(zhuǎn)木馬是分心，因?yàn)槿搜蹖?duì)環(huán)境的反應(yīng)如何。

我們的大腦習(xí)慣于在其他靜態(tài)景觀的運(yùn)動(dòng)檢測(cè)。這是跟蹤長毛猛犸象在凍土帶回來的日子真的很有幫助！不幸的是，這種本能的反應(yīng)能引起人們注意的滑塊和傳送帶的運(yùn)動(dòng)比我們希望他們專注于轉(zhuǎn)換點(diǎn)。

滑塊也沒有意義，當(dāng)你在移動(dòng)設(shè)備上。Brian Krogs在他的一點(diǎn)”滑塊的吸“這很容易滾動(dòng)比滑動(dòng)。這是更容易瀏覽你的網(wǎng)站在移動(dòng)設(shè)備上，更高的轉(zhuǎn)換率。

相反，使用一個(gè)單一的，一個(gè)有力的標(biāo)題副標(biāo)題組合靜的英雄形象。這會(huì)說更多關(guān)于你的品牌比旋轉(zhuǎn)木馬充分分散的消息會(huì)。

滑塊也可以帶來太多的H1標(biāo)簽到您的網(wǎng)站。網(wǎng)絡(luò)爬蟲討厭這些，因?yàn)樗麄儼阉麄儗?duì)頁面信息的層次。這會(huì)影響你的網(wǎng)頁排名，所以好避開他們。（當(dāng)然，你可以簡單的風(fēng)格P標(biāo)簽看起來像H1，但這是一個(gè)黑客，而且增加了不必要的風(fēng)格，你的CSS。）

現(xiàn)在，從我們的贊助商的一個(gè)簡短的單詞

6.使用卡片布局移動(dòng)導(dǎo)航優(yōu)化

Webflow使用卡片布局整個(gè)網(wǎng)站告訴他們的故事。

另一種設(shè)計(jì)方法，針對(duì)進(jìn)化增加的移動(dòng)瀏覽的是“卡”的布局。在這種技術(shù)中，離散的容器結(jié)合文本、視頻和其他類型的內(nèi)容，而不是果醬包所有你能在一個(gè)有限的區(qū)域，但有效地傳達(dá)特定信息。這些卡依靠視覺和稀疏的副本突出重要的信息，就像谷歌的移動(dòng)搜索結(jié)果。

卡片布局工作完全與模塊化的設(shè)計(jì)方法。每個(gè)容器代表整個(gè)頁面的設(shè)計(jì)的一部分，和他們一起交流頁面的更多消息。這有助于人們從一個(gè)移動(dòng)到每個(gè)容器下，逐步消化所有的信息。這種布局的簡單也很容易翻譯到移動(dòng)設(shè)備。

如果做的好，卡可以創(chuàng)建一個(gè)邏輯和節(jié)奏，提高了整體的用戶體驗(yàn)（轉(zhuǎn)化率）。

7.選擇正確的顏色來提高轉(zhuǎn)換率

?您的色彩選擇可以對(duì)人們?nèi)绾位貞?yīng)你的設(shè)計(jì)的巨大影響。

色彩喚起的情緒，那么你選擇的組合將在傳達(dá)品牌的個(gè)性起著至關(guān)重要的作用，并讓人們采取行動(dòng)。

色彩喚起情緒，人們做出購買決定從情感的地方。所以你選擇的顏色組合可以發(fā)揮重要的作用，不僅傳達(dá)品牌的個(gè)性，而且優(yōu)化你的轉(zhuǎn)換率。

顏色成為尤其地在行動(dòng)的重要，這需要對(duì)比的色調(diào)脫穎而出其余的設(shè)計(jì)。當(dāng)你選擇一種顏色，保持行業(yè)標(biāo)準(zhǔn)在心。有些顏色是如此頻繁地用于特定的狀態(tài)和相互作用，如大膽的紅色，不同的應(yīng)用可能產(chǎn)生混淆的錯(cuò)誤信息。

8.寫的內(nèi)容轉(zhuǎn)換

?不趕寫你的內(nèi)容。讓你的話你的平面設(shè)計(jì)一樣美麗。

當(dāng)然，一個(gè)體貼的布局和迷人的形象，你的網(wǎng)站看起來棒極了。但這并不意味著你可以偷懶寫作。你說的東西必然對(duì)人們?nèi)绾慰创愕钠放飘a(chǎn)生巨大影響的方式。填充你的奇妙的網(wǎng)站和壞的或誤導(dǎo)仿如澆在五星級(jí)餐館的招牌菜醬。

你需要為你的觀眾寫的，使用的語言和音調(diào)，他們理解。在供給一方網(wǎng)站的寫作要從一個(gè)銷售高端服裝設(shè)計(jì)師，非常不同。研究你的聽眾是誰，所以你可以以有效的方式可能與他們溝通。（即使你認(rèn)為你自己的一部分，你的聽眾。）

考慮編寫轉(zhuǎn)換型復(fù)制的重點(diǎn)是游客將通過作用于你的報(bào)價(jià)經(jīng)驗(yàn)利益的重要的事情。怎樣擁有你的產(chǎn)品或服務(wù)將改變來訪者的生活中，你會(huì)將它們。

9.優(yōu)化你的標(biāo)題

在平均五倍多的人看標(biāo)題是閱讀正文。當(dāng)你寫的標(biāo)題，你花了八十美分的錢。您的網(wǎng)站的標(biāo)題可能是你傳達(dá)信息的唯一機(jī)會(huì)。

所以讓他們抓住人們的注意力，讓他們閱讀。你可以這樣做：

與效益主導(dǎo)（讀者將離開頁面）
簡潔，但挑釁
用幽默或創(chuàng)造性的文字游戲
遠(yuǎn)離陳詞濫調(diào)（注意，幽默與創(chuàng)意的文字往往玩陳詞濫調(diào)，這是不同于實(shí)際使用A）
如果這聽起來像一個(gè)標(biāo)題任何你的競爭對(duì)手會(huì)使用，不要使用它。創(chuàng)意和獨(dú)特的寫作標(biāo)題和你復(fù)制的休息。

正如極簡美學(xué)可以自由你的布局在分心，同樣可以說，文案。你的內(nèi)容需要在可能的簡單的方式傳遞你的信息，同時(shí)仍然是迷人的。

退出“確認(rèn)羞辱”

?生活不網(wǎng)站試圖羞辱你付諸行動(dòng)。

我們已經(jīng)看到了這種趨勢(shì)（字面）出現(xiàn)越來越多的在網(wǎng)絡(luò)上。你傻傻地看一些博客的網(wǎng)站，所以希望你讀的時(shí)候，突然！一個(gè)模態(tài)彈出滿滿一匙的調(diào)侃。

我們相信，嘗試這認(rèn)為這是超級(jí)搞笑的第一撰稿人，但這是苦的消息這樣可以毀掉一個(gè)經(jīng)驗(yàn)。這是一個(gè)反應(yīng)，在現(xiàn)實(shí)生活中會(huì)是粗魯?shù)?，那么為什么它在您的網(wǎng)站上？

你如何優(yōu)化轉(zhuǎn)換嗎？

你可能已經(jīng)嘗試過各種各樣的事情來提高你的網(wǎng)站的轉(zhuǎn)換率。

原創(chuàng)不易，未經(jīng)授權(quán)，嚴(yán)禁轉(zhuǎn)載

原文地址：http://mpian.cn/i,72,7211,0.html

上一篇：用一個(gè)實(shí)戰(zhàn)案例，帶你學(xué)習(xí)交互設(shè)計(jì)師的思考方式

下一篇：如何增加你的網(wǎng)頁設(shè)計(jì)業(yè)務(wù)

您還有可能感興趣的內(nèi)容

建站流程

Website development

網(wǎng)站需
求分析
網(wǎng)站策
劃方案
頁面風(fēng)
格設(shè)計(jì)
程序設(shè)
計(jì)研發(fā)
資料錄
入優(yōu)化
確認(rèn)交
付使用
后續(xù)跟
蹤服務(wù)
+86 10 64758810
18510861135

熱門標(biāo)簽

Website development

客戶評(píng)價(jià)

更多+

感謝云智互聯(lián)，系統(tǒng)提前完成，在整個(gè)項(xiàng)目周期內(nèi)，云智互聯(lián)對(duì)待我們并不像是對(duì)待客戶，更像是朋友一樣，每一次，都能以專業(yè)的角度向我們提出更合理、更有效的解決方案，并快速、細(xì)致地完成我們的每一個(gè)需求，再次感謝以至誠之心做事的云智互聯(lián)團(tuán)隊(duì)。

潘濤
我是東方龍馬集團(tuán)，在云智家做了2個(gè)企業(yè)官網(wǎng)，服務(wù)態(tài)度超級(jí)好。如果想做網(wǎng)站，選擇他家一定不后悔。性價(jià)比高，服務(wù)態(tài)度好。值得你的信賴！

譚嬌
技術(shù)好，設(shè)計(jì)精良，操作便利，很專業(yè)！配套的服務(wù)和后續(xù)的服務(wù)都很好,網(wǎng)站封面堪稱精品，運(yùn)行方便，后臺(tái)操作的簡單。技術(shù)還會(huì)耐心教我,很好的云智互聯(lián)（北京）科技有限公司，建站很不錯(cuò)的。

陳曦
不錯(cuò)，價(jià)格比較合適，重點(diǎn)是響應(yīng)速度蠻快，有什么問題都會(huì)馬上給你解決，公司很滿意，因?yàn)樗麄兌际轻槍?duì)每個(gè)項(xiàng)目建了相應(yīng)的討論組，有問題可以再里面提出，人員分工到位，解決問題很及時(shí)。

張經(jīng)理