23-個節省您時間的 間的最佳 Telegram 機器人

我曾經是一家小型網頁設計公司的內容作家，我的第一篇文章是關於網站設計最佳實踐的。

我記得我的經理經歷過它並告訴我，“一切都很好，但網頁設計不僅僅是讓事情看起來不錯。”

那時我還年輕、新鮮，說實話，這聽起來完全落後。

毫無意義。對我來說，設計就是我所看到的。我的意思是，這是視覺上的，對吧？所以，當然，外觀應該是一切。

造訪 HubSpot 上的數百個網站主題和模板

好吧，任何網頁設計師聽到這個消息可能都會準備好抓狂。

今天，我明白了 丹麥電報數據 網頁設計最重要的是功能、使用者體驗，並確保頁面上的每個元素都有其用途。

因此，讓我們深入探討 2024 年頂級網頁 23-個節省您時間的  設計最佳實踐，讓您的網站發揮作用——將訪客轉化為付費客戶。我還將介紹您也應該牢記的關鍵設計準則和要求。

 

 

1. 選擇易於閱讀和瀏覽的排版。

版式是指字母和字元 為什麼國際機構要求進行「無電話行銷」的潛在客戶開發活動 （類型）在頁面上的排列和呈現方式。由於網站排版不僅影響我們的閱讀方式，也影響我們對網頁上文字的感受，因此謹慎選擇非常重要。

理想情況下，您想要的字體是：

• 易於閱讀
• 易於瀏覽
• 所有用戶均可存取
• 在多種裝置和螢幕尺寸下清晰可見

您還希望它與您的品牌的外觀和感覺相匹配。

例如，奢侈時尚品牌Burberry在2018年時隔20年首次更新了標誌，用粗體、全大寫、無襯線字體取代了舊的襯線字體，並去掉了騎士徽章。

結果是一個更簡單、更現代的標誌，在任何螢幕上都更容易閱讀——這反映了公司為了變得更加透明並吸引年輕一代而做出的變化。

 

圖片來源

但隨後，2023 年 2 月，創意總監 號碼數據  Daniel Lee再次推出了 Burberry 的新標誌。這一次，我們談論的是完全不同的東西——現代的藍色設計，向其英國傳統致敬。

 

圖片來源

為什麼會發生這種變化？

當新的創意總監上任時，時尚品牌通常會更新其標誌，以反映他們的願景。 Lee 於 2022 年 10 月加入時，他的目標是在尊重 Burberry 的過去的同時擁抱未來。他稱該標誌是「英國奢侈品的現代詮釋」和「品牌的新篇章」。

雖然我個人更喜歡第一個版本，但第二個標誌及其版式有一個故事和意義。

2. 注意自動翻譯。

測試自動翻譯將如何影響您網站的內容。

許多用戶將依賴翻譯工具來瀏覽您的網站，因此請確保您的設計不會造成混亂或溝通不良。注意佈局、間距和排版——翻譯後的文字必須合適並保持清晰。

讓我們把它變成現實吧。

我將 HubSpot 的網站從英文翻譯成德文。結果呢？一個精心翻譯的網站，沒有多餘的空格、奇怪的字母或結構問題。一切看起來都很整潔，就像原來的一樣：

 

「在 Wrike，我們使用 TT Norms Pro 是因為它乾淨、現代的美感和跨裝置的可讀性——可訪問性至關重要。它是中立的，可以建立信任，並且具有多語言字符集，因此即使在翻譯後，材料看起來也很精美。

Montanari 認為，優秀的字體應該能夠適應不同的平台、頁面和受眾。

「憑藉 TT Norm Pro 簡潔的線條，它不會與我們的視覺效果和訊息傳遞競爭，而是與之相輔相成，」Montanari 說。

3. 選擇適合您品牌的配色。

就像版式一樣，顏色不僅會影響我們理解內容和與內容互動的方式，還會影響我們對內容的感受。因此，您的配色方案應該勾選與您的網站排版相同的方塊。它應該：

• 強化您的品牌形象。
• 讓您的網站易於閱讀和導航。
• 喚起情感。
• 看起來不錯。

例如，Buzzfeed 使用黃色和紅色主色來吸引用戶的注意力並讓他們對內容感到興奮。它保留了藍色主色（與信任相關）的使用，專門用於連結和 CTA 按鈕。對媒體網站來說，這兩種情緒都是喚起的理想選擇。

 

圖片來源

我最近看到了 Studio1 Design 執行長兼創辦人 Greg Merrilees 的一篇精彩文章，強調了找到適當平衡的重要性。

他建議考慮顏色和諧——選擇調色板時，從主色開始，然後分層。較深的顏色首先吸引註意力並具有更大的視覺重量，因此您需要從那裡回到較淺的顏色。

 

圖片來源

4. 使用空格來分隔文字和其他元素。

空白在用戶處理網站的設計或內容時為他們提供視覺休息，這不僅美觀，而且還具有其他好處。

透過最大限度地減少干擾，空白使用戶更容易集中註意力、處理資訊並理解重要的內容。

這意味著您可以使用空格來避免導致資訊過載或分析癱瘓，並強調頁面上的重要元素。

這可能有助於說服用戶採取特定行動，例如註冊電子報、購買最新系列等。

例如，Eb & flow Yoga Studio 使用空白引導使用者執行特定操作：報名參加三週的課程。請注意，空白並不意味著沒有顏色或圖像。

相反，這意味著頁面上的每個元素都經過策略性定位，之間有大量空間，以避免使訪客感到不知所措或困惑。

 

圖片來源

我在這個主題上遇到的最佳見解之一來自Square One Digital執行長兼創辦人Sean Lee-Amies ，他對此進行了完美的解釋。

“以穀歌為例。它們很大。他們可以談論的事情無窮無盡，但他們的主頁上唯一的東西就是一個徽標、一個搜尋欄和兩個按鈕，」Lee-Amies 說。

“空白始終是那些尚未學會使用“少即是多”的內容和溝通方法的人們創建的網頁設計的第一個犧牲品。”

5.利用紋理增添個性和深度。

網路紋理類似於三維的觸覺表面，旨在用另一種感覺（視覺）複製觸摸的物理感覺。

它們是純色背景的絕佳設計替代品，特別是如果您想為網站增添個性和深度。

看看下面位於聖塔芭芭拉的 Mony’s Tacos 餐廳主頁上的紋理。

它看起來就像粉筆在黑板上畫的，不是嗎？

我不知道你怎麼想，但我只要看著它，就幾乎能感覺到手指上的粉筆。對於一家旨在成為加州首選 Funk Zone 墨西哥美食選擇的餐廳來說，這是一個完美的外觀。

 

圖片來源

6. 添加圖像以吸引讀者並為其提供資訊。

在網站設計中保持文字和圖像之間的平衡至關重要。結合視覺效果可以使您的內容資訊更豐富、更有吸引力、更令人難忘。對某些人來說，透過視覺方式學習和處理資訊更容易。

這是一個將化妝品公司網站上的文字與圖像分開的獨特範例。這表明將圖像融入您的網站設計有多麼無限的可能性。

 

圖片來源

圖像應該是整個網站的一部分，而不僅僅是主頁，但必須謹慎且平衡地使用。

例如，Dgtl Infra的設計團隊每 200-300 個字就會建立一篇有圖像的部落格文章，其分享量比以文字為主的文章多 40%。他們的目標是文字與圖像的比例為 60/40。

這種平衡可以讓讀者在不犧牲實質內容的情況下參與其中。團隊混合使用資訊圖表、產品照片和相關庫存圖像。

每幅圖像都應該服務於一個目的。隨機插入的視覺效果弊大於利。每個內容都應該說明一個觀點，或在內容的自然停頓處提供視覺休息。

7. 簡化您的導航。

導航是網站上最重要的設計元素之一。它會影響訪客是否到達您的主頁並瀏覽或點擊「後退」按鈕。這就是為什麼保持盡可能簡單很重要。

許多網站選擇水平導覽列。這種導航樣式並排列出主要頁面並放置在網站標題中。

以 Blavity 上的導覽列為例。主要導航類別（娛樂、文化、小型企業、Blavity U、Blavity 品牌、數位封面）都有清晰的標籤且易於注意到。

 

圖片來源

「Blavity」類別使用下拉式選單增加了一層組織，同時又不會因為太多選項而讓使用者感到不知所措。這是一種微妙的視覺提示，有助於引導使用者的導航。

搜尋欄位於右上角，為使用者尋找特定文章或主題提供了方便的方式。

8. 讓你的 CTA 脫穎而出。

CTA 是網頁、廣告或其他內容鼓勵受眾做某事的元素。號召性用語可以是註冊、訂閱、開始免費試用或了解更多資訊等。

您希望 CTA 出現在您的網站設計中。為了實現這一點，請考慮如何使用顏色以及其他元素，例如背景顏色、周圍圖像和周圍文字。

Square 提供了一個出色的號召性用語範例。 Square 使用流暢的影片背景展示了其產品的獨特性和麵向未來的能力。在這種戲劇性的背景下，白色的“開始”CTA 以及引人注目的藍色“聯繫銷售”等待您的點擊。

 

圖片來源

Add People的Damon Culbert也建議對 CTA 進行動畫處理，但要保持平衡。

他說，一個微妙的動畫按鈕在延遲後擺動或脈衝可以吸引註意力，而不會造成乾擾。僅在使用者在頁面上花費時間後觸發此類動畫可確保互動及時且相關。

這種技術與適時彈出視窗類似，尊重使用者的瀏覽流程，同時有效地將他們的注意力吸引到轉換上。

雖然按鈕的設計很重要，但我們不能忽略它的內容：它所包含的文字。Skylum首席行銷長Yevhenii Tymoshenko在我們的談話中談到了這一點，他說：

「我們最近重新設計了網站的佈局，將 CTA 放置在頁面的頂部和底部。我們也重新措辭，使其更具可操作性。現在，他們會說“查看計劃”和“探索應用程式”，直接與客戶交談，而不使用“立即購買”等咄咄逼人的語言。結果，我們的轉換率提高了 12%。

 

圖片來源

9.針對行動裝置進行最佳化。

我們已經討論過網站響應能力的重要性。這可能意味著更改或刪除一些元素，這些元素會使較小的螢幕尺寸變得混亂或對載入時間產生負面影響。

要獲得最佳網站設計之一的範例，請比較 Etsy 桌面版主頁與行動版主頁。在桌面上，您將看到一個帶有類別的導覽列。將滑鼠懸停在每個類別上將顯示一個下拉式選單。

 

圖片來源

在行動裝置上，它折疊在漢堡按鈕後面，從而改善了行動網站的外觀和性能。您還會注意到圖像更大 – 非常適合用手指在移動螢幕上點擊。

 

圖片來源

Online Optimism的Claire Escobedo表示，她在行動設計中看到的主要錯誤之一是缺乏可訪問的功能。這包括違反 WCAG 標準的內容以及影響網站功能的懸停效果等功能。

她繼續說道，“你不能將滑鼠懸停在手機上！在為移動設備上訪問的任何網站進行設計時，你必須考慮移動交互，如今幾乎所有網站都是這樣。”

根據 Escobedo 的說法，僅僅因為您的網站導航在桌面上運作良好並不意味著它會轉移到行動裝置上。

「漂亮的大型菜單對於筆記型電腦用戶來說很不錯，但行動用戶如何存取同樣的四層連結呢？」Escobedo 指出。

10. 限制提供給使用者的選項。

根據希克定律，選擇的數量和複雜性的增加會增加一個人做出決定所需的時間。這對網站設計來說是個壞消息。

如果向網站訪客提供太多選項，他們可能會感到沮喪並反彈，或者他們可能會選擇您不想要的選項，例如放棄購物車。這就是為什麼限制向用戶提供的選項數量很重要。

例如，當訪客登陸 Shawn Michelle 的冰淇淋主頁時，他們有三個明確的選項：了解公司、探索口味或查看餐飲菜單。

它很乾淨，所有關鍵資訊都很容易找到。像這樣的網站還需要什麼嗎？絕對不是。一切都在那裡，讓客戶可以輕鬆獲得他們需要的東西，減少他們沮喪的離開機會。

這是使用者體驗設計中希克定律的完美例子。

 

圖片來源

專業提示：沒有時間遵守規則？您始終可以下載預先建立的網站模板，為您的網站提供良好的基礎。

11. 優先考慮功能而非美觀。

「設計應該支援內容和功能——而不是相反。絕大多數用戶訪問您的網站是為了獲取其中的信息，而不是為了網站的外觀。

作為一名設計師，我知道網站看起來漂亮有多好，但這永遠不能以確保您的網站功能齊全且可供所有用戶理解為代價。埃斯科貝多說。

專注於功能而不僅僅是美觀。創建易於使用、可靠且實用的解決方案，將使用者的需求放在首位和中心。

12. 選擇使用者所理解的內容。

網站內容應該簡單明了，不需要你所有的腦力來獲取它並同時提供價值。因為這根本不是一件容易的事，我再次向達蒙·卡爾伯特尋求建議：

「為了讓人們花時間和精力做某事，例如坐下來閱讀新產品或服務的所有功能，你必須讓他們產生這樣做的衝動，」卡爾伯特說。

根據卡爾伯特的說法，強烈的視覺效果可以讓人們投入時間和精力來了解更多你想要銷售的東西。

「B2B 服務就是一個很好的例子；它們通常非常複雜，非專家無法理解它們。非專家可能需要一個小時或更長時間的閱讀才能獲得基本的了解，」卡爾伯特說。 “或者他們可以通過觀看視覺效果，在五秒或更短的時間內到達目的地。”

BuzzSumo 的首頁就是一個很好的例子。它透過雜誌摘錄和社交媒體截圖等視覺效果傳達清晰、簡潔的訊息，讓他們的工作一目了然——即使對於第一次訪問的人來說也是如此。

 

圖片來源

我的最後一點是：人們不會把錢花在他們無法理解的東西上，無論它們是否增加價值。這就是為什麼商業上成功的公司投資於行銷和銷售智慧工具，繪製客戶的購買旅程和沿途出現的問題。

現在，您可以花數年時間研究網頁設計的細節。

但為了給您一個起點，我們整理了一份基本準則和最佳實踐列表，您可以將其應用於下一次網站重新設計或網站啟動。

 

 

1. 簡單

雖然您網站的外觀確實很重要，但大多數人造訪您的網站並不是為了評估設計是否精美。他們想要完成某些操作或找到某些特定的資訊。

因此，不必要的設計元素（即那些沒有功能性目的的元素）只會壓倒一切，並使訪客更難以完成他們想要完成的任務。

從可用性和使用者體驗的角度來看，簡單就是你最好的朋友。如果您擁有所有必要的頁面元素，那麼就很難變得太簡單。您可以以各種不同的形式運用這項原則，例如：

• 顏色。基本上不要用太多。《人機互動手冊》建議在設計中最多使用五種（正負兩種）不同的顏色。
• 字體。您選擇的字體應該高度清晰，因此不要使用太藝術化的​​字體，也不要使用極簡的腳本字體（如果有的話）。再次強調，盡量減少文字顏色，並始終確保它與背景顏色形成對比。常見的建議是最多使用三種不同的字體和最多三種不同的尺寸。
• 圖形。只有當圖形可以幫助使用者完成任務或執行特定功能時才使用圖形（不要隨意添加圖形）。

這是來自HERoines Inc.的簡單但有效的主頁設計的一個很好的例子。

 

圖片來源

2. 視覺層次結構

視覺層次結構與簡單性原則緊密相關，意味著排列和組織網站元素，以便訪客自然地首先吸引最重要的元素。

目標是引導訪客以一種感覺自然且愉快的方式完成所需的動作。透過調整某些元素的位置、顏色或大小，您可以以這樣的方式建立您的網站，使瀏覽者首先被這些元素吸引。

Semrush 網站是視覺層次結構的一個很好的例子。 「立即開始」按鈕的顯著位置，加上清晰的版面和充足的空白，確保它脫穎而出。

次要元素（例如輸入欄位和標題）支援主要 CTA 並提供上下文。這種執行良好的視覺層次結構使網站易於導航和理解其用途。

 

圖片來源

3. 適航性

規劃直覺的導航可以幫助訪客找到他們想要的東西。

理想情況下，訪客應該登陸您的網站，而不必廣泛考慮下一步要點擊哪裡。從 A 點移動到 B 點應該盡可能無摩擦。

以下是優化網站導航的一些提示：

• 保持主導航結構簡單（位於頁面頂部附近）。
• 在網站的頁腳中包含導航。
• 考慮在每個頁面（主頁除外）上使用麵包屑，以便使用者記住他們的導航軌跡。
• 在網站頂部附近新增一個搜尋欄，以便訪客可以透過關鍵字進行搜尋。
• 每頁不要提供太多導覽選項。
• 在頁面副本中包含鏈接，並明確這些鏈接的去向。
• 不要讓用戶挖掘得太深。嘗試製作一個像金字塔一樣排列的所有網站頁面的基本線框圖：您的主頁位於頂部，前面的每個連結頁面形成下一層。在大多數情況下，最好將地圖的深度保持在三層以內。

還有一點：一旦您確定了網站的主要（頂部）導航，請保持一致。每個頁面上的標籤和導航位置應保持相同。

這很好地引導我們得出下面的下一個原則。

4. 一致性

除了保持導航一致之外，網站的所有頁面的整體外觀和風格都應該相似。

背景、配色方案、字體，甚至寫作的語氣都是一致性對可用性和使用者體驗產生正面影響的領域。

這並不是說每個頁面都應該遵循相同的佈局。相反，為特定類型的頁面（例如，登陸頁面、資訊頁面等）建立不同的佈局。

透過一致地使用這些佈局，您可以讓訪客更輕鬆地了解他們可能在給定頁面上找到什麼類型的信息。

在下面的範例中，您可以看到Airbnb的所有「幫助」頁面都使用相同的佈局，這是一種常見做法。想像一下，如果每個「幫助」頁面都有自己獨特的佈局，從訪客的角度來看會是什麼樣子。

可能會有很多聳肩。

 

 

圖片來源

5. 響應能力

據 Statista 稱，60% 的頁面全球瀏覽量來自智慧型手機和平板電腦等行動裝置。

為了提供真正出色的使用者體驗，您的網站必須與訪客使用的許多不同裝置相容。在科技界，這被稱為響應式設計。

響應式設計意味著投資於高度靈活的網站結構。在響應式網站上，內容會自動調整大小和重新排列，以適應訪客正在使用的任何裝置的尺寸。

這可以透過適合行動裝置的 HTML 模板或建立特殊的行動網站來完成。

埃斯科貝多指出，她經常遇到的最大問題之一是頁面太長。

透過使內容可折疊或包含其他頁面的連結而不是在頁面上重複內容，可以避免無休止的移動滾動。

此外，請確保您的外部連結在新分頁中打開，並且您沒有使用太小而無法在行動裝置上閱讀的文字。