網站是線上品牌的主要標識。建立網站時參考最佳實踐,將確保品牌正在向前邁進。人們在訪問時看到的東西會影響他們對您的線上和線下品牌的看法。而網站設計很大程度上決定了人們如何體驗網站。簡而言之,網頁設計很重要。糟糕的網頁設計會讓網站佈局顯得不專業,失去訪問者的信任,或者讓他們很難找到他們想要的東西(從而會導致增加而不是降低彈出率)。
一個好的網站設計告訴訪問者您知道您在做什麼,並且值得他們一直與品牌互動。無論您正在構建一個新的網站,還是正在為已有的網站重新進行設計,您都應該遵守一些重要的網站設計最佳實踐。
1. 直觀的網站導航。
設計過程的一部分就是要弄明白如何組織所有的頁面,以及在網站選單中應該包括哪些內容。正確的網站佈局對網站架構來説都是很重要的,因為它決定了訪問者瀏覽網站的難易度。在決定要在網站選單中包含哪些頁面、類別和子類別時,請先考慮到訪問者的想法。什麼會讓普通訪問者更容易找到他們想要的東西呢?但也要決定您希望他們找到的最重要的頁面是什麼。努力設置網站佈局,這種方式會讓網站對第一次瀏覽者來説和對熟悉網站的人來説一樣直觀。
2. 保持一致的風格。
如果您訪問的網站在主頁上有一個特定的風格,但在下一個連結指向的頁面上變成了完全不同的東西,您會發現這種改變令人困惑。您可能會想,您還在這個網站上嗎,還是不知怎麼地離開了之前所在的站點。您不希望網站訪問者遇到這種困惑。在設計過程的前期,開發網頁設計風格指南。風格指南是一個有用的網頁設計工具,它將幫助您確保網站上的所有頁面在視覺上都匹配得很好,從而讓訪問者知道它們彼此相關,也與品牌有關。
確保它包括:
網站的配色方案
要使用的徽標設計(以及您將在整個網站中使用的尺寸和形狀方面的任何變化)
字型
視覺風格(例如,您想要一種極簡主義的感覺嗎?還是好玩的風格?)
當您進入網站設計的細節時,風格指南將會是一個有助於您繼續前進的資源。
好的網頁設計需要包括哪些元素
3. 設計每一頁都要有目標。
您不僅僅是為了有趣而設計網站,您還希望它能有所成就。即使您對整個網站有一個總體目標,不同的網頁也需要有更具體的目標。例如,WooCommerce 電子商務網站將主要被設計成讓人們購物。但是為了做到這一點,一些頁面將側重於讓人們先訪問該網站,因此他們的主要目標是改進搜索引擎優化或鼓勵社會分享。其他頁面將更直接地嘗試讓人們點選 “購買” 按鈕。明確定義具體目標,並實現這一目標,確保您的設計以目標為中心。
4. 保持每一頁的焦點。
另一個好的網頁設計技巧是確保網頁有清晰的焦點,這也是每個網頁都有一個特定的目標。不要試圖在任何一個網頁上定太多目標。您不希望網頁看起來雜亂無章——這不僅會讓它看起來很糟糕(這會讓訪問者更容易點選離開),還會帶來太多的干擾。如果頁面上有很多連結、圖片和文字,無法找到關注的焦點,他們怎麼知道下一步該怎麼做呢?如果您意識到一個特定的網頁有太多的事情要做,把它分成多個頁面。每個獨立的頁面都有更清晰的焦點,這將有利於使用者體驗,並改善您優化 SEO 站羣的機會。
5. 讓網站響應迅速。
現在,移動裝置的使用人數超過了計算機的使用人數,人們在網絡上使用移動裝置的時間每年都在增長。對於網站所有者來説,這意味著網頁設計必須優先考慮移動友好體驗。在大多數情況下,建立一個在桌面和移動裝置上都執行良好的網站的最佳選擇是建立一個響應迅速的網站。響應式網頁設計涉及到在頁面上確定斷點,在那裏頁面可以被切斷,並且所有的內容都移動到斷點下面且內容不會丟失。這就是為什麼移動裝置經常顯示相同的影象和文字,但是桌面上所有並排顯示的頁面元素會上下堆疊顯示。在設計網站上的每個頁面時,您需要定義至少三個斷點,以確保頁面在三個主要裝置尺寸中的每一個上都能顯示良好(儘管許多設計師更喜歡使用各種各樣的裝置)。在很大程度上,響應性網站已經變得足夠普遍,您使用的大多數網頁設計工具或聘請的設計師都會自動採用響應性網頁設計的最佳實踐。
舉個例子,WordPress 站羣 WordPress 網站構建器提供的所有模板都是響應性的,所以即使是對 HTML 或其他編碼語言一無所知的新手網站所有者也可以輕鬆建立一個響應性強的網站。無論您使用什麼網頁設計工具,請確保您在設計網站時考慮到了移動性,並使用了響應式設計最佳實踐。(如果想要讓網站開啓的更快,站長可以瞭解一下 提升網站載入速度的方法有哪些)。
6. 使用流體影象。
流體影象有助於網站的響應性設計,並改善使用者的網站體驗。您可以用正確的 HTML 代碼製作任何使用流體的影象。如果在影象的原始碼中新增 “max-width: 100%”,瀏覽器就會知道如何調整影象的大小以適合每個裝置上的頁面。
7. 讓可點選元素大到可以移動。
良好的移動友好網站設計的另一個重要組成部分是思考人們如何使用他們的移動裝置。點選電腦上的一個小按鈕很容易,您可以完全控制指標,並且指標指向的內容非常具體。但是在移動裝置上,您必須用手指觸控它,才能 “點選” 同一個按鈕。如果一個連結或按鈕太小,或者更糟的是,如果不同的連結靠得太近,使用者將很難點選這些連結。設計網頁時,請確保在小型移動裝置上測試每個網頁,以確認所有連結和按鈕都易於使用。
8. 使用視覺層次結構。
這與您為網站的每一頁所制定的目標有關。每一頁都會包含您希望人們注意到的最重要的資訊,以及附加的資訊和設計元素,但是這些資訊和元素的重要性並不相同。為了確保每個裝置上的每位訪問者在繼續前進之前都能看到頁面的最重要部分,為每個網頁開發一個視覺化層次結構。最重要的元素需要放在頂部,這樣每個人都能看到它們,而頁面的其他部分也會下降,如果人們對這個頁面感興趣,可以一直滾動檢視整個頁面。
9. 讓網站更方便訪問。
訪問者並不都以同樣的方式與網絡互動。雖然這在總體上是有用的,但是在為不同的殘疾人設計時,更重要的是要記住這一點。因此,在設計過程中要記住的一個重要的網頁設計提示就是力求包容性和可訪問性。網站無障礙倡議概述了網站設計者在建立網站時應該遵守的一些無障礙原則。從無障礙網頁設計中獲益最多的人可能是少數,但有些人很可能是您的目標受眾。通過建立一個可訪問的網站,您可以向更多的受眾開放品牌,並且可以與一個經常得不到充分服務的社羣建立起友好關係。
10. 堅持設計標準。
您曾經有沒有被一個網站給搞糊塗了,它的選單和以前的不一樣?或者很難關閉一個彈出視窗,它的 X 按鈕在一個奇怪的地方呢?雖然網頁設計師通常可以從尋找創意或獨特性的方法中獲益,但網站設計標準定義了人們如何與網站互動以及他們希望找到什麼。當您偏離這些標準時,您就有可能給客户製造混亂和負面的體驗。最佳實踐最好堅持以下主要標準:
把商標放在左上角
將聯絡人資訊放在右上角
讓主選單填滿在整個螢幕
把您的價值主張放在主頁上
在主頁頂部新增一個 CTA
將搜索功能新增到標題中
當您思考這個問題的時候,這個列表中的所有內容很可能就是您訪問網站時希望看到的。如果您想偏離這些標準,請確保您仔細考慮原因,並確保您沒有在這個過程中製造不必要的混亂。一個好的設計造就了一個好的網站。網站設計決定了訪問者對網站的看法和感受。正確的設計對於網站的成功至關重要。花點時間來了解主要的網站設計最佳實踐,並建立一個對人們有用和直觀的網站。另外,2018 年雖然已經過去了,不過我們可以回顧一下 2018 年比較受歡迎的網頁設計有哪些。