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