網站 UI 設計：初學者指南
已發表: 2020-10-27用戶界面，或簡稱 UI，是網頁設計中極其重要的一部分，它處理訪問者如何瀏覽網站必須提供的許多不同頁面和交互式材料。 在互聯網的早期，UI 過去要簡單得多，因為 HTML 是節目的明星，在藝術選擇方面相對較少。 然而，在過去的幾十年中，網站開發技術和互聯網用戶的期望呈指數級增長，這使得 Web 界面設計的外觀和可用性變得至關重要。
對於那些希望增加流量和改善 SEO 的人來說，網站 UI 是其中最重要的因素之一。 擁有一個美觀、易於使用的網站是保證訪問者不僅可以點擊不同的網頁，還可以重新訪問網站並將其推薦給其他人的保證方式。
良好 Web UI 設計的基礎
雖然外觀很重要，但網站的易用性是提高知名度和創建專用用戶群的主要方式。 關鍵是結合不同的界面元素，使網頁佈局盡可能地保持不變和合乎邏輯。 用戶在嘗試瀏覽網站上的頁面時不希望有太多的猜測或壓力。 有必要明確界面元素在頁面上的位置，有這些元素的描述
立即可以理解，並使每個頁面上的元素放置盡可能相同。 雖然最後一個要求可能難以實現，但擁有一致的方式來遍歷網站，如通用導航欄，是良好網站設計的重要組成部分。
需要特別注意的常見網頁 UI 設計元素有：
- 工具提示
- 標籤欄（專門針對移動用戶）
- 步進器/滑塊
- 搜索字段
- 側邊欄
- 鈕扣
- 麵包屑（鏈接路徑）
- 日期/時間選擇器
- 圖標
- 通知
- 菜單（烤肉串、漢堡包、便當、烤肉、肉丸）
- 評論區
- 進度條
- 檢查/單選按鈕
- 手風琴
正確的界面元素組合可以極大地提升用戶體驗，但最好不要讓一切都過於復雜。 例如，顏色可以有效地將人們的注意力引導到網頁的某些部分，但如果它的代價是使頁面難以閱讀或分散其他元素的注意力，那麼最終可能不值得。
UI 設計應該是相對無縫的，並提供一種信任感，即網站開發人員在他們製作內容的任何主題上都是權威。 它應該考慮到用戶在瀏覽頁面時正在尋找什麼，這樣他們就不必過多考慮網站的結構。 網站內容應具有邏輯結構，並具有合理的信息和服務層次結構。
複雜的任務需要壓縮成用戶可以輕鬆訪問的簡單結構。 例如，有一個下拉菜單，最相關的信息列在頂部，其他所有信息按重要性降序排列。 這將是一個很好的選擇，而不是在側邊欄或導航欄中簡單地放置一堆隨機鏈接或功能。 例如：
（圖片來源：中）
UI 元素應始終以最大化用戶興趣的方式彼此相鄰放置。 如果網站安裝了搜索功能，最好將搜索按鈕放在用戶選擇或輸入搜索詞的位置旁邊。 在這種情況下，顏色編碼可以提供極大的幫助，但前提是它不會干擾頁面佈局的其餘部分。
避免在一頁或幾頁上放置太多信息也是一個好主意。 即使網站上有很多好的信息或工具可用，如果太多的信息或工具被壓縮到太小的空間中，用戶將難以導航，導致體驗乏善可陳，並希望避免將來訪問. 雖然如果一切都分佈得更均勻，用戶可能不知道某些網站功能，但通過使內容更易於理解將得到更多補償。
在 60 秒內測試您網站的 SEO 和性能！
良好的網站設計對訪問者的參與度和轉化率至關重要，但網站速度緩慢或性能錯誤甚至可能使設計最好的網站表現不佳。 Diib 是世界上最好的網站性能和 SEO 監控工具之一。 Diib 利用大數據的力量幫助您快速輕鬆地增加流量和排名。 正如在企業家中看到的！
- 易於使用的自動化 SEO 工具
- 關鍵字和反向鏈接監控+想法
- 確保速度、安全性和核心生命體徵跟踪
- 智能地提出改進 SEO 的想法
- 超過 250,000,000 名全球會員
- 內置基準測試和競爭對手分析
被超過 250,000 家公司和組織使用：
與
網站UI設計中要實現的東西
了解了 Web UI 設計的基礎知識後，最好看看一些更高級的考慮因素，這些考慮因素可以極大地改善用戶體驗。
- 提供網站反饋選項：雖然有些人可以準確地指出用戶會喜歡或討厭網站佈局的哪些方面，但對大多數人來說，現實情況是他們將完全不知道有無數的問題.
實際上，網站改進的唯一方法是網站訪問者的反饋流是否一致，說明他們喜歡或不喜歡他們的用戶體驗。 大多數訪問者不會特意告訴管理員他們對該站點的看法，因此擁有一個易於查找且易於使用的反饋提交選項非常重要。 這是一個易於使用的網站反饋模板示例：
（圖片來源：Mopinion）
你會感興趣
如何成功擴展您的業務
網站加載速度：優化工具
網站健康檢查：工具和提示
用戶體驗是什麼意思？
- 牢記移動設備：在當今世界，越來越多的互聯網搜索正在人們的手機和平板電腦上進行。 不幸的是，在 PC 上看起來完美無瑕的 Web UI 設計在移動設備上不一定看起來那麼好。 在某些情況下，網站可能無法在手機上使用。 在這種情況下，網站分析將是無價的，因為它可以揭示是否有很大比例的訪問者使用移動設備作為他們的主要網絡搜索選項。 如果此信息未知，最好謹慎行事並創建一個 UI 佈局，以牢記手機和類似設備。 有一些工具可以幫助您確定您的網站是否適合移動設備，例如 Google 的 Mobile-Friendly Test：
（圖片來源：谷歌支持）
- 始終將設置更改放在正確的位置：雖然網站可以設計得很專業，但不可避免地會有完全掌握在用戶手中的佈局和設計選擇。 這些可以包括傳記信息、個人資料圖片和消息傳遞選項等內容。 如果用戶想要更改某些內容，這樣做的選項應該是顯而易見的並且隨時可用。 這通常涉及在將發生更改的網頁部分的角落添加一個熟悉的、易於識別的圖標，例如在“關於我”部分的右上角放置一個鉛筆圖標。
- 為表單使用進度條：易用性對於使網站具有吸引力絕對是至關重要的。 在許多情況下，用戶可能需要填寫表格才能訪問服務。 雖然設計表單以使其盡可能全面和相關應該是優先事項，但這還不足以最大限度地提高客戶體驗。 對於包含過多信息的表單，最好將它們分成多個部分。
人們不喜歡一次被太多任務壓得喘不過氣來，因此將提交請求分解為易於遵循且主題一致的塊將說服人們堅持一個過程比他們堅持的時間要長得多。 提交表單的此部分還應附有一個進度條，指示用戶在完成之前必須走多遠。 這不僅會在完成每個部分時產生輕微的成就感，而且還會提示某人在完成任務之前還需要走多遠。 例如：
（圖片來源：運球）
- 採取保障措施以防止用戶錯誤：特別是如果網站處理大量財務信息或非常耗時，如果他們犯的每一個小錯誤都可能導致嚴重後果，那麼用戶可能會感到不舒服或沮喪。 了解人們可能犯的錯誤並找到防止錯誤發生的方法或提供糾正錯誤的選項將顯著提高訪問者對網站的滿意度。 當電子商務網站要求客戶確認他們想要購買或者他們是否真的想要擺脫購物車中的商品時，通常可以在電子商務網站上看到這類保護措施。 更普遍的是，保護措施用於提醒用戶他們尚未完全填寫表單提交的所有必要部分。
- 留出大量空白：在網站設計方面，人們普遍認為“越多越好”； 然而，事實並非如此。 網頁上的太多信息對於訪問者來說可能是非常難以承受的。 當只顯示最必要的信息並以合理的方式顯示時，網站 UI 最好實現。 雖然有太多的空間會使網頁看起來很空，但擁有適當大小的空間對於突出顯示信息非常有用。 人們傾向於瀏覽信息而不是徹底分析信息，因此在正確的部分留下空白將使人們對網站上真正重要的信息有更好的印象。
網站UI設計中要避免的事情
雖然有很多方法可以增強 Web 界面設計，但也有很多事情是絕對應該避免的，以防止網站成為使用的噩夢。
- 不要讓圖標模棱兩可：雖然對於某些事情肯定會是一個挑戰，但始終確保圖標盡可能容易識別。 網站將常用功能更改或融合為無法識別的邊界並收到很多關於 UI 發生了什麼的問題的情況並不少見。 至少，這是最好的情況； 很多時候，很多用戶甚至不會費心去研究以前使用的圖標發生了什麼或者新圖標應該代表什麼。 如果圖標更改與社交媒體共享等相關，最終結果可能會嚴重損害 SEO。 如果您的圖標看起來太模糊，請嘗試將它們設置為文本標籤，例如：
（圖片來源：Thomas Byttebier）
- 避免使重要動作過於模糊：與更改易於識別的圖標類似，重要的網站功能應該非常明顯。 如果一個網站的主要目的是讓用戶可以在一個開放的論壇上進行協作，那麼讓人們相互交流的能力盡可能突出。 這可以包括使主題發布或回复圖標異常大或顏色對比以引起用戶的注意。 如果人們不確定他們應該在短時間內在網站上做什麼，他們很可能會很快放棄使用它。
- 不必更改默認設置：人們在使用程序或設備時通常不會注意到它們的默認設置，因為它只是假設一切從一開始就可以正常工作。 雖然有些人確實喜歡在設置方面擁有很大的靈活性，但大多數人只是想盡可能快速輕鬆地使用服務。 當有人開始使用網站時，他們必須不要被要求或覺得不得不亂搞設置選項，只是為了開始按預期使用所有東西。 即使從客觀的角度來看，給予更多的選擇似乎是一個加分項，但從用戶的角度來看，情況並非如此。
- 避免太獨特：創造力是一件好事，通常是許多努力取得成功的原因，但很多時候它被高度高估了。 許多人使用網站模板和類似的 UI 結構是有原因的：用戶只是喜歡它。 只有這麼多種方式可以將單個網頁配置為在保持功能的同時看起來與其他人不同。 大多數網站的佈局和圖標都有些相似，因為它們已被證明最能滿足用戶的需求。
資源和其他提示
雖然完全有可能編制一個大大改進 UI 設計的東西的列表，但在網站上實際實現它們可能是非常具有挑戰性的。 幸運的是，人們可以通過多種不同的方式來判斷哪些有效，哪些無效。 第一步是查看已經建立的具有出色 UI 佈局的網站，例如 Airbnb 或 Dropbox，並從它們的整體設計中汲取靈感。 例如，看看 Airbnb 的移動友好設計：
（圖片來源：谷歌設計）
還有大量公司為其客戶提供模板，這些模板考慮了大型網站用來吸引其用戶群的許多不同參考點。 其中許多模板都適合移動設備，並且經常更新以盡可能吸引人並與時俱進。 此外，這些模板始終可以補充設計師自己的創意天賦，從而實現最大程度的靈活性和靈感。
我們希望您發現這篇文章很有用。
如果您想更有趣地了解您的網站健康狀況，獲得個人推薦和提醒，請通過 Diib 掃描您的網站。 只需 60 秒。
考慮到靈感，有許多公共資源可用於找出獨特的格式和外觀。 如今，Pinterest 是人們想要展示他們的創意作品的溫床，並且可能有數百萬種不同的圖案和佈局可以完全免費看到。 其他可能值得一看的地方是 Dribble 和 Ui Movement。 下圖顯示了 UI 運動的樣子：
（圖片來源：產品搜索）
Diib：支持您的 UI 設計的核心指標
如果從頭開始開發網站設計過於繁瑣，那麼還有大量程序可以教如何正確設計 UI。 CareerFoundry 和 Treehouse 都很成熟，強烈推薦。 他們還提供了額外的資源來幫助進行超越 UI 的網站設計。 與往常一樣，Diib 提供了一個專門編程的用戶儀表板，以補充您的 UI 設計並跟踪您網站的技術 SEO 方面。 以下是我們知道您會喜歡的一些功能：
- 關鍵字、反向鏈接和索引監控和跟踪工具
- 用戶體驗和移動速度優化
- 跳出率監控和修復
- 社交媒體整合和表現
- 有反向鏈接的損壞頁面（404 檢查器）
- 技術 SEO 監控
單擊此處進行免費掃描，或直接致電 800-303-3510 與我們的一位增長專家交談。