- 相關(guān)推薦
吸引用戶的網(wǎng)頁(yè)設(shè)計(jì)技巧
我們都希望成功的設(shè)計(jì)改版能讓網(wǎng)站重新煥發(fā)活力,不僅僅吸引用戶,并且讓用戶愿意花更長(zhǎng)時(shí)間瀏覽。要做到這一點(diǎn),并不需要什么神秘的技能。下面小編整理了吸引用戶的網(wǎng)頁(yè)設(shè)計(jì)技巧,供大家參閱。
吸引用戶的網(wǎng)頁(yè)設(shè)計(jì)技巧 1
1.讓用戶一見傾心
組合圖形和內(nèi)容,讓用戶一見傾心,產(chǎn)生情感共鳴,被深深吸引。這里有兩個(gè)方法(A)保持網(wǎng)頁(yè)布局一致,以免訪問(wèn)者中途逃離。(B)利用搶眼的,引導(dǎo)性的高分辨率圖形。
學(xué)到了什么:創(chuàng)建統(tǒng)一的視覺體驗(yàn),利用帶有情感的色調(diào)和線條,調(diào)動(dòng)用戶的參與,再加上引人入勝的內(nèi)容,就足夠讓用戶驚喜了。
2. 會(huì)說(shuō)故事
我們都喜歡茶水間里的八卦,朋友聚會(huì)時(shí)的段子。當(dāng)我們?cè)诜窒磉@些故事時(shí),我們是多么的全神貫注。既然如此,為什么不在你的網(wǎng)站上講故事呢?你可以借鑒一些電影網(wǎng)站的做法。
學(xué)到了什么:經(jīng)過(guò)時(shí)間檢驗(yàn),這是提高用戶參與性的好辦法。關(guān)鍵是你必須是一個(gè)很會(huì)講故事的人。學(xué)習(xí)些關(guān)于信息層次結(jié)構(gòu)的知識(shí),將幫助你更好地了解受眾的心理,讓你設(shè)計(jì)的網(wǎng)站獲得更高的轉(zhuǎn)化率。
3. 擺脫常規(guī)
我們總被不尋常的事物吸引。頭腦風(fēng)暴可以幫助你找出讓你的網(wǎng)頁(yè)設(shè)計(jì)脫穎而出的方法。從高清圖形和獨(dú)特的版式開始吧,一個(gè)好的排版絕對(duì)可以強(qiáng)化你的信息傳達(dá)。
如果你一直做別人做的事情,你將永遠(yuǎn)埋沒在人群里。然而,如果你的.網(wǎng)站與眾不同,你傳達(dá)的信息就會(huì)脫穎而出,引起注意。新鮮的旅途總讓人緊張,但一定值得你探索。
學(xué)到了什么:當(dāng)用戶與你的網(wǎng)站互動(dòng)時(shí),要給他們留下不可磨滅的深刻印象。就像你心中最愛的冰淇淋口味一定勝過(guò)其他無(wú)數(shù)口味,你的網(wǎng)頁(yè)布局就應(yīng)該努力成為受眾最愛的口味,讓他們隨時(shí)想回來(lái)。這里的關(guān)鍵是研究+創(chuàng)造力。是的,請(qǐng)把握住非常規(guī)和怪異之間的界限。
4. 重要信息放首屏
網(wǎng)絡(luò)競(jìng)爭(zhēng)的常態(tài)下,我們很難獲取新訪客。所以,一旦用戶登上你的網(wǎng)站,你一定希望把他們留在網(wǎng)頁(yè)上久一點(diǎn),更久一點(diǎn)。相對(duì)來(lái)說(shuō),不需要滾動(dòng)操作的屏幕,人們?cè)敢饣ǜ嗟臅r(shí)間停留。所以設(shè)計(jì)要有效率。聰明地將響應(yīng)動(dòng)作、優(yōu)惠信息或注冊(cè)按鈕放在這里,你就可以從用戶反饋中受益。
學(xué)到了什么:信息的安排,應(yīng)該讓訪客迅速找到他們正在尋找的東西。甚至促進(jìn)訪客在得到他想找的信息之后,繼續(xù)在你的網(wǎng)站流連。
5. 不斷改善
游戲高手也不可能每次都贏。我們都需要通過(guò)練習(xí),微調(diào)技能,才能游戲中做到更好。調(diào)整你的網(wǎng)站設(shè)計(jì),讓目標(biāo)受眾著迷,也是一個(gè)循序漸進(jìn)的過(guò)程。
學(xué)到了什么:持續(xù)改善的老概念已經(jīng)在日本推行了幾十年。全力設(shè)計(jì)好你的網(wǎng)站,然后測(cè)試它,然后再次測(cè)試,看哪些頁(yè)面最受歡迎。同樣,你也可以找出跳出率較高的網(wǎng)頁(yè)。成功沒有捷徑。
吸引用戶的網(wǎng)頁(yè)設(shè)計(jì)技巧 2
1.首頁(yè)大圖幻燈片
你最重要的標(biāo)題設(shè)計(jì)任務(wù)是選擇一個(gè)能吸引你的受眾的大圖幻燈片效果(并以積極的方式展示你的品牌)。而且,說(shuō)實(shí)話,這將是更困難的任務(wù)之一。
你看,沒有公式可以幫助你選擇完美的形象。有這么多的可能性,您將不得不根據(jù)兩個(gè)因素來(lái)選擇網(wǎng)站視覺效果:
您希望設(shè)計(jì)的美學(xué)方向。請(qǐng)記住,盡管設(shè)計(jì)精美的網(wǎng)站具有吸引力,但研究表明,用戶通常更喜歡簡(jiǎn)單而熟悉的網(wǎng)站。一定要確保你的網(wǎng)站看起來(lái)不錯(cuò)——只是不要試圖重新發(fā)明輪子,因?yàn)檫@可能會(huì)導(dǎo)致糟糕的用戶體驗(yàn)、用戶沮喪和(最壞的情況)高跳出率以及糟糕的品牌認(rèn)知度。
您想給客戶留下的印象。您在英雄部分中包含的視覺效果將自動(dòng)告知您的受眾對(duì)您品牌的看法。因此,在您開始選擇圖像之前,請(qǐng)定義您的品牌標(biāo)識(shí)并了解您希望觀眾如何看待您。
例如,帶有最少圖像或沒有圖像的精簡(jiǎn)網(wǎng)頁(yè)設(shè)計(jì)是 2022 年的流行選擇,并且有充分的理由 - 看看Grown Alchemist在其大圖部分中實(shí)現(xiàn)它的精美程度。
該品牌使用單個(gè) GIF 來(lái)傳達(dá)其產(chǎn)品的質(zhì)量和精致度。這一選擇表明該品牌致力于時(shí)尚簡(jiǎn)約美學(xué),但這還不是全部。它還展示了其將卓越的用戶體驗(yàn)優(yōu)先于視覺效果的承諾(不犧牲美學(xué)吸引力)。
或者,您可以以完全不同的方式使用您的網(wǎng)站標(biāo)題。您可以使用包含人物的英雄形象。
2009 年的一項(xiàng)研究表明,包含人臉圖像的網(wǎng)站會(huì)導(dǎo)致訪問(wèn)者認(rèn)為該品牌具有吸引力、熱情和以用戶為導(dǎo)向。這就是為什么許多 SaaS 公司(例如Chanty)選擇此類圖像作為其標(biāo)題部分的原因。
為了提供卓越的用戶體驗(yàn),您實(shí)際上根本不需要使用英雄形象。您可以通過(guò)使用排版或使用更高級(jí)的內(nèi)容格式(如視頻)來(lái)獲得同樣積極的結(jié)果,就像在Le Labo主頁(yè)上所做的那樣。
2. 價(jià)值主張
一旦你完善了你的英雄形象——傳達(dá)品牌專業(yè)知識(shí)和可信度的視覺基礎(chǔ)——你就可以開始關(guān)注推動(dòng)轉(zhuǎn)化的第二個(gè)最重要的網(wǎng)站標(biāo)題元素:價(jià)值主張。
也稱為電梯推銷,這是簡(jiǎn)潔地傳達(dá)您為目標(biāo)受眾提供的價(jià)值的承諾,并且需要達(dá)到適當(dāng)?shù)钠胶狻?/p>
一方面,它需要足夠令人印象深刻、獨(dú)特和有吸引力。但另一方面,它也必須真實(shí)可信。我們不要忘記,您還應(yīng)該確保始終兌現(xiàn)您的承諾。
如果您想確保您獨(dú)特的'銷售主張能夠轉(zhuǎn)化,以下是提升它以推動(dòng)結(jié)果的方法。
保持簡(jiǎn)單和相關(guān)
標(biāo)題中的價(jià)值主張要引人注目且有效,不一定要可愛或聰明。
相反,它需要直接且易于理解地傳達(dá)您為客戶提供的價(jià)值,確保每個(gè)登錄您網(wǎng)站的人都知道您在主頁(yè)上花費(fèi)的最初幾秒鐘內(nèi)所做的事情。
有關(guān)如何通過(guò)直接激發(fā)轉(zhuǎn)化的靈感,請(qǐng)查看Ultimate Meal Plans 的價(jià)值主張,它承諾“膳食計(jì)劃變得簡(jiǎn)單。每周提供定制的膳食計(jì)劃、雜貨清單和食譜!
專注于客戶獎(jiǎng)勵(lì),而不是您的產(chǎn)品
如果您研究消費(fèi)者的決策過(guò)程,您會(huì)發(fā)現(xiàn)人們并不關(guān)心高級(jí)功能和技術(shù)細(xì)節(jié)。
作為一項(xiàng)規(guī)則,他們總是選擇投資于對(duì)他們最有利的解決方案(無(wú)論是提供最物有所值、方便還是尊重他們的隱私)。
將自己與競(jìng)爭(zhēng)對(duì)手區(qū)分開來(lái)
最后,當(dāng)您嘗試撰寫保證推動(dòng)轉(zhuǎn)化的價(jià)值主張時(shí),請(qǐng)不要忘記您的網(wǎng)站標(biāo)題提供了突出產(chǎn)品獨(dú)特性和優(yōu)勢(shì)的絕佳機(jī)會(huì)。
嘗試使用此部分立即將您的品牌與競(jìng)爭(zhēng)對(duì)手區(qū)分開來(lái)。
例如,谷歌在Chrome登陸頁(yè)面上通過(guò)指出該應(yīng)用程序是“谷歌構(gòu)建的瀏覽器”來(lái)做到這一點(diǎn)。簡(jiǎn)單的?確實(shí)。但它有效。
3.導(dǎo)航
當(dāng)考慮網(wǎng)站標(biāo)題設(shè)計(jì)如何為良好的用戶體驗(yàn)和用戶界面做出貢獻(xiàn)時(shí),您會(huì)意識(shí)到最頂層區(qū)域的一個(gè)特定部分——導(dǎo)航菜單——決定了你的網(wǎng)站在觀眾眼中的表現(xiàn)。
事實(shí)上,如果您希望您的網(wǎng)站取得成功,那么設(shè)計(jì)良好且面向用戶的導(dǎo)航菜單是絕對(duì)必要的。
但是,雖然您可能已經(jīng)閱讀過(guò)導(dǎo)航最佳實(shí)踐(例如 3-click rule),但您可能仍然想知道:UX研究對(duì)導(dǎo)航有什么看法?
就用戶友好性而言,對(duì)于構(gòu)建網(wǎng)站的最佳方式?jīng)]有明確的規(guī)則。但是,在優(yōu)化網(wǎng)站標(biāo)題時(shí),您應(yīng)該嘗試并堅(jiān)持一些技巧。
不要將形式優(yōu)先于功能
用戶體驗(yàn)研究表明,網(wǎng)頁(yè)設(shè)計(jì)中最重要的是可發(fā)現(xiàn)性和易用性。
了解移動(dòng)優(yōu)先和響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)之間的區(qū)別,并盡最大努力使可見性和可用性優(yōu)于趨勢(shì)或慣例。
有關(guān)響應(yīng)式標(biāo)題設(shè)計(jì)的絕佳示例,請(qǐng)查看Persol。該品牌的標(biāo)題會(huì)根據(jù)用戶的屏幕尺寸而變化,寬度低于 1,025 像素的任何內(nèi)容都會(huì)觸發(fā)傳統(tǒng)的水平導(dǎo)航欄切換到更適合移動(dòng)設(shè)備的漢堡菜單。
根據(jù)需要而非規(guī)則確定菜單項(xiàng)
一些最佳實(shí)踐建議會(huì)告訴您導(dǎo)航菜單不應(yīng)包含超過(guò)七個(gè)項(xiàng)目。但是,您需要知道這并不完全正確。
只要菜單結(jié)構(gòu)正確,您的導(dǎo)航菜單就可以包含所有關(guān)鍵內(nèi)容的路徑。您可以將頁(yè)面分成一個(gè)主菜單和一個(gè)堆疊在其上方的較小的實(shí)用程序菜單,或者戰(zhàn)略性地使用下拉菜單。為了避免導(dǎo)致混亂和決策癱瘓的菜單混亂,保持菜單清潔和可用仍然是理想的。
如果您的組織專注于一件事,請(qǐng)不要嘗試在水平菜單中塞入太多元素。相反,像Evolve Skateboards所做的那樣,優(yōu)先考慮指向有利于潛在買家的頁(yè)面的鏈接。
設(shè)計(jì)實(shí)驗(yàn)
雖然在您的網(wǎng)站標(biāo)題上設(shè)計(jì)導(dǎo)航菜單似乎是一項(xiàng)非常簡(jiǎn)單的任務(wù),但不要讓自己受到慣例的限制。
是的,您應(yīng)該滿足網(wǎng)絡(luò)訪問(wèn)者的用戶體驗(yàn)期望。但是,只要這些得到尊重,您就可以為您的品牌做任何最適合您的事情——即使這意味著將菜單放置在一個(gè)稍微不同尋常的位置,就像在Carnival Sounds網(wǎng)站上所做的那樣。
4. 網(wǎng)站搜索
盡管是一個(gè)經(jīng)常被忽視的網(wǎng)站標(biāo)題元素(或至少是事后的想法),但放置得當(dāng)且經(jīng)過(guò)優(yōu)化的網(wǎng)站搜索功能對(duì)于確保網(wǎng)站的高性能至關(guān)重要。
根據(jù)Econsultancy 的研究,并非所有網(wǎng)站訪問(wèn)者都使用搜索功能。盡管如此,當(dāng)他們這樣做時(shí),他們的轉(zhuǎn)化率提高了 1.8 倍,平均貢獻(xiàn)了總收入的 13.8%。
考慮到這些信息,在您的網(wǎng)站標(biāo)題中獲得恰到好處的搜索功能至關(guān)重要。
為確保可見性,請(qǐng)將搜索按鈕放在預(yù)期位置。Loewe網(wǎng)站上使用的導(dǎo)航欄右上角是傳統(tǒng)選擇。
您還可以更突出地顯示搜索欄,尤其是在您的業(yè)務(wù)依賴大量?jī)?nèi)容營(yíng)銷的情況下。
例如,Above House網(wǎng)站有一個(gè)搜索觸發(fā)按鈕,用于啟動(dòng)覆蓋。這表明該品牌致力于為讀者提供關(guān)于他們消費(fèi)的內(nèi)容的代理權(quán),而不是強(qiáng)迫他們處理不必要的干擾。
5. 重要的行動(dòng)呼吁
您可能已經(jīng)知道,完全優(yōu)化的號(hào)召性用語(yǔ)按鈕對(duì)于確保您的網(wǎng)站轉(zhuǎn)換至關(guān)重要。
但是您是否考慮過(guò)展示 CTA(尤其是高價(jià)值 CTA)的最佳方式是將其放置在您網(wǎng)站的多個(gè)主要位置?這是正確的。使用您的網(wǎng)站標(biāo)題來(lái)顯示號(hào)召性用語(yǔ)可以幫助您吸引用戶的注意力并確保您的網(wǎng)絡(luò)訪問(wèn)者轉(zhuǎn)化為客戶。
在您的網(wǎng)站標(biāo)題中放置重要的號(hào)召性用語(yǔ)的規(guī)則是什么?好吧,在設(shè)計(jì)您的網(wǎng)站時(shí),您需要注意一些事項(xiàng)。
通過(guò)引人注目的設(shè)計(jì)選擇吸引注意力
使用網(wǎng)站標(biāo)題 CTA 實(shí)現(xiàn)高轉(zhuǎn)化率的先決條件是做出正確的設(shè)計(jì)選擇。
您最好的選擇是選擇一個(gè)符合您網(wǎng)站整體外觀的美學(xué)方向,同時(shí)仍然脫穎而出。
快速瀏覽一下Flora網(wǎng)站,就可以看出黑色和深綠色的 CTA 按鈕在不破壞網(wǎng)站整體外觀或感覺格格不入的情況下非常突出。
在主要位置顯示 CTA
您可以在標(biāo)題設(shè)計(jì)中實(shí)施的另一種經(jīng)過(guò)驗(yàn)證的 CTA 按鈕放置策略是將這些元素放置在 Web 訪問(wèn)者最有可能注意到的位置。
傳統(tǒng)的選擇自然就在您的價(jià)值主張之下。
但是,您也可以在網(wǎng)站的導(dǎo)航菜單中為高價(jià)值 CTA 保留一個(gè)位置,就像Otto所做的那樣。
傳達(dá)您是誰(shuí)以及訪客可以做什么
最后,當(dāng)您努力優(yōu)化網(wǎng)站標(biāo)題 CTA 以提高轉(zhuǎn)化率時(shí),不要低估 UX 副本在吸引訪問(wèn)者采取行動(dòng)方面的作用。
確保您的號(hào)召性用語(yǔ)清楚(且引人入勝)傳達(dá)有關(guān)單擊按鈕時(shí)會(huì)發(fā)生什么的說(shuō)明,就像在Preset Love標(biāo)題 CTA 上所做的那樣,它邀請(qǐng)?jiān)L問(wèn)者獲取預(yù)設(shè)捆綁包。
6. 關(guān)鍵站點(diǎn)功能
雖然某些網(wǎng)頁(yè)的目標(biāo)是將網(wǎng)絡(luò)訪問(wèn)者轉(zhuǎn)化為潛在客戶或客戶,但其他網(wǎng)頁(yè)的目標(biāo)是提示用戶采取特定行動(dòng)。在這些情況下,使用網(wǎng)站標(biāo)題來(lái)顯示關(guān)鍵的 UX 元素是一個(gè)很好的選擇。
這允許這些功能通過(guò)視覺層次結(jié)構(gòu)確定其重要性來(lái)脫穎而出。設(shè)計(jì)選擇還可以帶來(lái)更高的轉(zhuǎn)化率,因?yàn)殛P(guān)鍵的站點(diǎn)功能不會(huì)隱藏在 CTA 后面的某個(gè)地方。它們顯示在訪問(wèn)者最有可能首先注意到的網(wǎng)站部分。
UnscrambleX等品牌通過(guò)使用顏色、布局和視覺提示使用戶輸入成為網(wǎng)站標(biāo)題的重要組成部分,在這方面做得特別好。
通過(guò)使用相同的藍(lán)色背景來(lái)容納公司徽標(biāo)、導(dǎo)航菜單和交互元素,該品牌可確保首次訪問(wèn)網(wǎng)絡(luò)的訪問(wèn)者立即看到他們通過(guò)使用該工具獲得的價(jià)值,從而最大限度地提高他們的轉(zhuǎn)化機(jī)會(huì)。
7. 購(gòu)物車
截至 2021 年 11 月,平均購(gòu)物車放棄率為 69.82%,這意味著企業(yè)由于糟糕的用戶體驗(yàn)設(shè)計(jì)而失去了大約三分之二的潛在買家。
事實(shí)上,根據(jù) Baymard 研究所的說(shuō)法:
17% 的購(gòu)物車放棄是由于復(fù)雜的結(jié)賬流程造成的。
16%,因?yàn)橛脩魺o(wú)法預(yù)先計(jì)算總訂單成本。
13% 是由于網(wǎng)站錯(cuò)誤和崩潰而發(fā)生的。
現(xiàn)在,您可能在想:這與我的網(wǎng)站標(biāo)題有什么關(guān)系?答案很簡(jiǎn)單。
像在網(wǎng)站頂部添加購(gòu)物車導(dǎo)航按鈕這樣簡(jiǎn)單的操作可以幫助您重新獲得部分損失的收入,讓網(wǎng)絡(luò)訪問(wèn)者更輕松、更方便地完成購(gòu)買。
而且,要獲得更高級(jí)的方法來(lái)充分利用此 UX 元素,您可以執(zhí)行類似于Kopi Luwak Direct的操作。
在此站點(diǎn)上,單擊購(gòu)物車圖標(biāo)不會(huì)使用戶離開該頁(yè)面。相反,它向他們展示了一個(gè)彈出窗口,讓他們可以方便地概覽他們的購(gòu)物車,同時(shí)允許他們繼續(xù)將物品添加到他們的包中。
【吸引用戶的網(wǎng)頁(yè)設(shè)計(jì)技巧】相關(guān)文章:
網(wǎng)頁(yè)設(shè)計(jì)最能吸引用戶的表達(dá)方式10-28
網(wǎng)頁(yè)設(shè)計(jì)技巧精選09-05
網(wǎng)頁(yè)設(shè)計(jì)技巧06-02
10個(gè)優(yōu)化網(wǎng)頁(yè)用戶界面網(wǎng)頁(yè)設(shè)計(jì)的規(guī)則08-21
CSS網(wǎng)頁(yè)設(shè)計(jì)技巧08-14
網(wǎng)頁(yè)設(shè)計(jì)的技巧經(jīng)驗(yàn)09-08
網(wǎng)頁(yè)設(shè)計(jì)技巧大全08-05
網(wǎng)頁(yè)排版設(shè)計(jì)的技巧10-27