引人注目的網(wǎng)站設計八大必備技巧

從潛在客戶登錄您的網(wǎng)站的那一刻起，您認為您需要多長時間才能吸引他們的注意力并讓他們相信您的業(yè)務是真實且值得信賴的?

研究表明，網(wǎng)站和登錄頁面的第一印象僅在幾毫秒內形成。訪問者對您的品牌形成的意見直接影響他們是否會繼續(xù)與您的網(wǎng)站互動，是否將您的品牌視為行業(yè)權威，并最終轉化。

但是究竟是什么影響了人們對品牌網(wǎng)站的看法呢?他們登陸頁面時首先注意到什么?它是頂部的內容——你的標題。

研究表明，任何網(wǎng)站最有價值的部分是放在首屏的內容

尼爾森諾曼集團 2018 年的一項研究發(fā)現(xiàn)，網(wǎng)絡用戶將多達 57% 的瀏覽時間用于與第一屏中的元素進行交互知道情況就是這樣，您應該尋找增強網(wǎng)站標題的方法是合乎邏輯的。

本文將教您如何構建您的網(wǎng)站最顯眼的部分，并設計一個保證給您留下深刻印象和轉化的標題。

1.首頁大圖幻燈片

你最重要的標題設計任務是選擇一個能吸引你的受眾的大圖幻燈片效果(并以積極的方式展示你的品牌)。而且，說實話，這將是更困難的任務之一。

你看，沒有公式可以幫助你選擇完美的形象。有這么多的可能性，您將不得不根據(jù)兩個因素來選擇網(wǎng)站視覺效果：

您希望設計的美學方向。請記住，盡管設計精美的網(wǎng)站具有吸引力，但研究表明，用戶通常更喜歡簡單而熟悉的網(wǎng)站。一定要確保你的網(wǎng)站看起來不錯——只是不要試圖重新發(fā)明輪子，因為這可能會導致糟糕的用戶體驗、用戶沮喪和(最壞的情況)高跳出率以及糟糕的品牌認知度。

您想給客戶留下的印象。您在英雄部分中包含的視覺效果將自動告知您的受眾對您品牌的看法。因此，在您開始選擇圖像之前，請定義您的品牌標識并了解您希望觀眾如何看待您。例如，帶有最少圖像或沒有圖像的精簡網(wǎng)頁設計是 2022 年的流行選擇，并且有充分的理由 - 看看Grown Alchemist在其大圖部分中實現(xiàn)它的精美程度。

該品牌使用單個 GIF 來傳達其產(chǎn)品的質量和精致度。這一選擇表明該品牌致力于時尚簡約美學，但這還不是全部。它還展示了其將卓越的用戶體驗優(yōu)先于視覺效果的承諾(不犧牲美學吸引力)。

或者，您可以以完全不同的方式使用您的網(wǎng)站標題。您可以使用包含人物的英雄形象。

2009 年的一項研究表明，包含人臉圖像的網(wǎng)站會導致訪問者認為該品牌具有吸引力、熱情和以用戶為導向。這就是為什么許多 SaaS 公司(例如Chanty)選擇此類圖像作為其標題部分的原因。

為了提供卓越的用戶體驗，您實際上根本不需要使用英雄形象。您可以通過使用排版或使用更高級的內容格式(如視頻)來獲得同樣積極的結果，就像在Le Labo主頁上所做的那樣。

2. 價值主張

一旦你完善了你的英雄形象——傳達品牌專業(yè)知識和可信度的視覺基礎——你就可以開始關注推動轉化的第二個最重要的網(wǎng)站標題元素：價值主張。

也稱為電梯推銷，這是簡潔地傳達您為目標受眾提供的價值的承諾，并且需要達到適當?shù)钠胶狻?/p>

一方面，它需要足夠令人印象深刻、獨特和有吸引力。但另一方面，它也必須真實可信。我們不要忘記，您還應該確保始終兌現(xiàn)您的承諾。

如果您想確保您獨特的銷售主張能夠轉化，以下是提升它以推動結果的方法。

保持簡單和相關

標題中的價值主張要引人注目且有效，不一定要可愛或聰明。

相反，它需要直接且易于理解地傳達您為客戶提供的價值，確保每個登錄您網(wǎng)站的人都知道您在主頁上花費的最初幾秒鐘內所做的事情。

有關如何通過直接激發(fā)轉化的靈感，請查看Ultimate Meal Plans 的價值主張，它承諾“膳食計劃變得簡單。每周提供定制的膳食計劃、雜貨清單和食譜。”

專注于客戶獎勵，而不是您的產(chǎn)品

如果您研究消費者的決策過程，您會發(fā)現(xiàn)人們并不關心高級功能和技術細節(jié)。

作為一項規(guī)則，他們總是選擇投資于對他們最有利的解決方案(無論是提供最物有所值、方便還是尊重他們的隱私)。

因此，在撰寫您的獨特價值主張時，請以關注您的客戶的方式進行，正如Curology所做的那樣，該品牌承諾“由專家個性化的全方位服務護膚 [...] 以取得臨床證明的結果�！�

將自己與競爭對手區(qū)分開來

最后，當您嘗試撰寫保證推動轉化的價值主張時，請不要忘記您的網(wǎng)站標題提供了突出產(chǎn)品獨特性和優(yōu)勢的絕佳機會。

嘗試使用此部分立即將您的品牌與競爭對手區(qū)分開來。

例如，谷歌在Chrome登陸頁面上通過指出該應用程序是“谷歌構建的瀏覽器”來做到這一點。簡單的?確實。但它有效。

3.導航

當考慮網(wǎng)站標題設計如何為良好的用戶體驗和用戶界面做出貢獻時，您會意識到最頂層區(qū)域的一個特定部分——導航菜單——決定了你的網(wǎng)站在觀眾眼中的表現(xiàn)。

事實上，如果您希望您的網(wǎng)站取得成功，那么設計良好且面向用戶的導航菜單是絕對必要的。

但是，雖然您可能已經(jīng)閱讀過導航最佳實踐(例如 3-click rule)，但您可能仍然想知道：UX研究對導航有什么看法?

就用戶友好性而言，對于構建網(wǎng)站的最佳方式?jīng)]有明確的規(guī)則。但是，在優(yōu)化網(wǎng)站標題時，您應該嘗試并堅持一些技巧。

不要將形式優(yōu)先于功能

用戶體驗研究表明，網(wǎng)頁設計中最重要的是可發(fā)現(xiàn)性和易用性。

了解移動優(yōu)先和響應式網(wǎng)頁設計之間的區(qū)別，并盡最大努力使可見性和可用性優(yōu)于趨勢或慣例。

有關響應式標題設計的絕佳示例，請查看Persol。該品牌的標題會根據(jù)用戶的屏幕尺寸而變化，寬度低于 1,025 像素的任何內容都會觸發(fā)傳統(tǒng)的水平導航欄切換到更適合移動設備的漢堡菜單。

根據(jù)需要而非規(guī)則確定菜單項

一些最佳實踐建議會告訴您導航菜單不應包含超過七個項目。但是，您需要知道這并不完全正確。

只要菜單結構正確，您的導航菜單就可以包含所有關鍵內容的路徑。您可以將頁面分成一個主菜單和一個堆疊在其上方的較小的實用程序菜單，或者戰(zhàn)略性地使用下拉菜單。為了避免導致混亂和決策癱瘓的菜單混亂，保持菜單清潔和可用仍然是理想的。

如果您的組織專注于一件事，請不要嘗試在水平菜單中塞入太多元素。相反，像Evolve Skateboards所做的那樣，優(yōu)先考慮指向有利于潛在買家的頁面的鏈接。

設計實驗

雖然在您的網(wǎng)站標題上設計導航菜單似乎是一項非常簡單的任務，但不要讓自己受到慣例的限制。

是的，您應該滿足網(wǎng)絡訪問者的用戶體驗期望。但是，只要這些得到尊重，您就可以為您的品牌做任何最適合您的事情——即使這意味著將菜單放置在一個稍微不同尋常的位置，就像在Carnival Sounds網(wǎng)站上所做的那樣。

4. 網(wǎng)站搜索

盡管是一個經(jīng)常被忽視的網(wǎng)站標題元素(或至少是事后的想法)，但放置得當且經(jīng)過優(yōu)化的網(wǎng)站搜索功能對于確保網(wǎng)站的高性能至關重要。

根據(jù)Econsultancy 的研究，并非所有網(wǎng)站訪問者都使用搜索功能。盡管如此，當他們這樣做時，他們的轉化率提高了 1.8 倍，平均貢獻了總收入的 13.8%。

考慮到這些信息，在您的網(wǎng)站標題中獲得恰到好處的搜索功能至關重要。

為確保可見性，請將搜索按鈕放在預期位置。Loewe網(wǎng)站上使用的導航欄右上角是傳統(tǒng)選擇。

您還可以更突出地顯示搜索欄，尤其是在您的業(yè)務依賴大量內容營銷的情況下。

例如，Above House網(wǎng)站有一個搜索觸發(fā)按鈕，用于啟動覆蓋。這表明該品牌致力于為讀者提供關于他們消費的內容的代理權，而不是強迫他們處理不必要的干擾。

5. 重要的行動呼吁

您可能已經(jīng)知道，完全優(yōu)化的號召性用語按鈕對于確保您的網(wǎng)站轉換至關重要。

但是您是否考慮過展示 CTA(尤其是高價值 CTA)的最佳方式是將其放置在您網(wǎng)站的多個主要位置?這是正確的。使用您的網(wǎng)站標題來顯示號召性用語可以幫助您吸引用戶的注意力并確保您的網(wǎng)絡訪問者轉化為客戶。

在您的網(wǎng)站標題中放置重要的號召性用語的規(guī)則是什么?好吧，在設計您的網(wǎng)站時，您需要注意一些事項。

通過引人注目的設計選擇吸引注意力

使用網(wǎng)站標題 CTA 實現(xiàn)高轉化率的先決條件是做出正確的設計選擇。

您最好的選擇是選擇一個符合您網(wǎng)站整體外觀的美學方向，同時仍然脫穎而出。

快速瀏覽一下Flora網(wǎng)站，就可以看出黑色和深綠色的 CTA 按鈕在不破壞網(wǎng)站整體外觀或感覺格格不入的情況下非常突出。

在主要位置顯示 CTA

您可以在標題設計中實施的另一種經(jīng)過驗證的 CTA 按鈕放置策略是將這些元素放置在 Web 訪問者最有可能注意到的位置。

傳統(tǒng)的選擇自然就在您的價值主張之下。

但是，您也可以在網(wǎng)站的導航菜單中為高價值 CTA 保留一個位置，就像Otto所做的那樣。

傳達您是誰以及訪客可以做什么

最后，當您努力優(yōu)化網(wǎng)站標題 CTA 以提高轉化率時，不要低估 UX 副本在吸引訪問者采取行動方面的作用。

確保您的號召性用語清楚(且引人入勝)傳達有關單擊按鈕時會發(fā)生什么的說明，就像在Preset Love標題 CTA 上所做的那樣，它邀請訪問者獲取預設捆綁包。

6. 關鍵站點功能

雖然某些網(wǎng)頁的目標是將網(wǎng)絡訪問者轉化為潛在客戶或客戶，但其他網(wǎng)頁的目標是提示用戶采取特定行動。在這些情況下，使用網(wǎng)站標題來顯示關鍵的 UX 元素是一個很好的選擇。

這允許這些功能通過視覺層次結構確定其重要性來脫穎而出。設計選擇還可以帶來更高的轉化率，因為關鍵的站點功能不會隱藏在 CTA 后面的某個地方。它們顯示在訪問者最有可能首先注意到的網(wǎng)站部分。

UnscrambleX等品牌通過使用顏色、布局和視覺提示使用戶輸入成為網(wǎng)站標題的重要組成部分，在這方面做得特別好。

通過使用相同的藍色背景來容納公司徽標、導航菜單和交互元素，該品牌可確保首次訪問網(wǎng)絡的訪問者立即看到他們通過使用該工具獲得的價值，從而最大限度地提高他們的轉化機會。

7. 購物車

截至 2021 年 11 月，平均購物車放棄率為 69.82%，這意味著企業(yè)由于糟糕的用戶體驗設計而失去了大約三分之二的潛在買家。

事實上，根據(jù) Baymard 研究所的說法：

17% 的購物車放棄是由于復雜的結賬流程造成的。

16%，因為用戶無法預先計算總訂單成本。

13% 是由于網(wǎng)站錯誤和崩潰而發(fā)生的。現(xiàn)在，您可能在想：這與我的網(wǎng)站標題有什么關系?答案很簡單。

像在網(wǎng)站頂部添加購物車導航按鈕這樣簡單的操作可以幫助您重新獲得部分損失的收入，讓網(wǎng)絡訪問者更輕松、更方便地完成購買。

而且，要獲得更高級的方法來充分利用此 UX 元素，您可以執(zhí)行類似于Kopi Luwak Direct的操作。

在此站點上，單擊購物車圖標不會使用戶離開該頁面。相反，它向他們展示了一個彈出窗口，讓他們可以方便地概覽他們的購物車，同時允許他們繼續(xù)將物品添加到他們的包中。

8. 聯(lián)系方式

最后，當您尋找充分利用網(wǎng)站標題設計的方法時，請不要忘記，您可以通過包含您的聯(lián)系方式等簡單的操作來使用此網(wǎng)頁元素作為即時可信度助推器。

如果您知道轉化受眾的最大機會是讓您的銷售團隊與他們溝通，請確保您的網(wǎng)站標題包含您的電話號碼、社交鏈接、地址和營業(yè)時間等信息，就像在Fire Pit Surplus上所做的那樣主頁。

這不僅會向首次訪問的網(wǎng)絡訪問者表明您的品牌是一家真正可靠的企業(yè)，而且還會使他們更有可能接觸到您的銷售團隊，為您提供寶貴的機會，讓他們成為您品牌的忠實支持者.

總結

盡管它們已經(jīng)一次又一次地被證明是任何網(wǎng)站上的主要房地產(chǎn)，但標題仍然通常被視為事后的想法。

通過實施本文中的簡單提示，您可以確保網(wǎng)站標題區(qū)域的每一英寸都在推動轉化方面發(fā)揮作用。

不要猶豫，做出改變。嘗試替代設計解決方案，并優(yōu)化功能以優(yōu)先考慮 UX 和 UI。畢竟，如果您只有 50 毫秒的時間來給觀眾留下良好的第一印象，那么讓它發(fā)揮作用就不是一種選擇——這對您的業(yè)務成功至關重要。

來源: 浪知潮網(wǎng)絡

以上是關于網(wǎng)頁設計的相關信息，以供大家查看了解。想要了解更多網(wǎng)頁設計信息，第一時間了解網(wǎng)頁設計相關資訊，敬請關注唯學網(wǎng)網(wǎng)頁設計欄目，如有任何疑問也可在線留言，小編會為您在第一時間解答!