網頁設計全套基礎知識（想要學好網頁設計）

2023-09-16 16:34:46 1

網頁設計的基本原則

網頁設計可以是一個極具創意的領域。話雖如此，但網頁設計也要以目標為導向，以瀏覽者的體驗為中心。

始終牢記一個目標，讓設計團隊調整每一個細節，都是為實現該目標的量身定製的設計。一個典型的例子是電子商務網站。品牌和設計師在設計風格、捕捉商店的視覺識別方面有很大的創新。但是，最終目標始終是一樣的：銷售。

這個目標將決定設計師如何處理網頁設計過程中的一些關鍵決策。很多重點都放在幫助用戶搜索商店並輕鬆找到目標商品上。在產品頁面上投入了大量精力，以儘可能好的方式展示產品。結帳過程經過簡化和仔細計算，因此購物者幾乎無需思考即可購買商品。

談到網頁設計，決不能僅僅因為某個原因而做出決定。得有一個中心目標，所有細節都必須朝著這個目標努力。一切都取決於我們希望通過這個網站實現什麼——期望的結果是什麼。

誰不喜歡具有極其酷炫和強的視覺效果的網站？設計師經常嘗試創造一些展示他們視覺能力的東西。很多時候，這些視覺效果增加了體驗，獨特而難忘。

但是一個關鍵的網頁設計原則是視覺平衡與和諧是必要的。重要的是要知道什麼時候更少的視覺效果可以使整個設計更好，讓用戶專注於正確的事情。有時，通過添加更多元素，我們會削弱設計的真正力量，或者只是讓用戶更難以識別他們所看到的內容。

這裡有幾個重要的概念。其中，我們發現了視覺層次結構和空白，這兩者對於任何設計的成功都至關重要。它們一起使設計師無需一個字就能與用戶交流。

一個好的結構可以讓用戶立即知道他們在看什麼。層次結構清楚地表明了哪些元素是連接的，哪些不是，並突出了最重要的區域。空白提供視覺上的緩解，並有助於引導用戶的眼睛通過設計。真正好的網頁設計不需要額外的用戶尋找正確的按鈕來點擊——人們一看就知道。

這些網頁設計原則起初聽起來有點技術性，但它們逐漸成為經驗豐富的設計師的第二本能。這些與前面提到的視覺層次和空白概念密切相關，但側重於網頁設計的另外的方面。

總的來說，網頁設計師都必須熟悉特定的設計規則和規律，這些規則和規律決定了比例、形狀和鄰近性如何影響設計。這些是久經考驗的真實規則，充分利用了我們所知道的用戶如何感知和處理他們所看到的內容。

格式塔理論是重要的定律之一。它基本上定義了六種關於人類如何感知視覺事物的不同認知規則——尤其是在涉及到元素組時。在網頁設計的領域裡，這意味著簡單地將一堆按鈕和箭頭放在一起永遠不會有好的結果。有一種正確的方式來安排這些元素，以便您幫助用戶從整體上理解設計。

我們暫時不討論這六條規則的細節，但了解這些規則對網頁設計的作用很重要。它們是關於理解人眼並創造視覺元素，以發揮我們作為人的視覺能力。一個例子是格式塔原則，閉合性：人們的大腦會填補空白並努力創造一個完整的圖像，即使他們正在看不完整的東西。例如的 IBM logo正是基於這一原因。

另一組重要的網頁設計原則包括席克（Hick’s law）定律。這是一個非常簡單的概念：用戶顯示的選項越多，他們做出決定的時間就越長。這是因為我們的大腦必須考慮和分析所有這些選項，以選擇最佳選項——當選擇太多時，這就成了一個問題。

餐廳試圖減少菜單中菜餚的數量是有原因的。如果您必須從長達 6 頁的菜單中進行選擇，您可能會不知所措。一段時間後，您會感到疲倦，並感到喜悅從體驗中流失。畢竟，你來餐廳不是為了壓力山大——你是來享受一頓美餐的。關於網頁設計，可以說完全相同。在用戶的快樂消失之前，您可以要求用戶付出多少腦力是有限度的。

最終，這些網頁設計原則都將在設計中發揮作用。這在開始時尤其如此，當我們必須定義UI 布局時。以令人愉悅和有效的方式分配空間需要練習，但它確實成為網頁設計師的本能。這一切都是為了優先考慮重要的事情，充分利用空間並在正確的地方留出空白區域。

就像專業的營銷人員一樣，網頁設計師也需要確切地知道他們的用戶是誰。這是一個至關重要的網頁設計原則，沒有它就不可能有好的設計。正是因為網頁設計需要有預謀和深思熟慮，所以您想知道用戶是誰，他們想要什麼，他們處理什麼問題以及他們的想法。

你對最終用戶的印象越清晰，你就越有可能創造出成功的設計。在網頁設計中，細節可能取決於最終用戶而不是設計師。

這可能會讓新設計師感到困惑，因為它比設計團隊本身更重要。在大型團隊中，有一整群人的工作是對用戶進行研究，並創建一個關於用戶是誰以及他們想要什麼的特定資料庫。這些信息是至關重要的，因為它將確定整個項目的基調和方法。設計一個專為少女設計的網站與設計一個專為老年人設計的政府網頁完全不同。

這是一個通常被稱為用戶體驗研究的小組。這基本上是在理解用戶、他們的感受、他們的生活和他們的思維方式方面付出的巨大努力。它通常會產生更多有形的材料，例如用戶角色、用戶故事或心智模型。無論是誰創造了這些材料，它們在設計過程中自始至終都發揮著關鍵作用。這些是設計師為了清晰和方向而轉向的東西。

經驗豐富的設計師會改變思維方式。隨著時間的推移，真正熟練的人學會在他們的創意工作和用戶想要或需要的東西之間找到平衡點。歸根結底，用戶的觀點永遠是正確的，永遠是優先的。畢竟，他們將使用該設計。首先，我們需要付出一點努力，把自己的觀點放在一邊，傾聽最終用戶的意見，但這是一項隨著時間歷練而發展起來的技能。

排版，不管你喜歡還是討厭它，毫無疑問，強大字體的使用可以完全改變設計的感覺。從選擇正文的可讀性的字體（即使是非常小的尺寸）到為具有高影響力的標題選擇引人注目的字體 - 它們的排版很重要。

有很多很棒的例子，這些網站通過他們選擇的字體創造了一種整體氛圍。它們可以幫助品牌推廣，幫助創建視覺識別或簡單地融入和支持其他視覺元素。有很多由藝術家手繪的獨特字體以及在任何項目中免費且易於使用的字體。

無論網頁設計的目標是什麼，或者您選擇什麼樣的視覺效果，在選擇字體時總會有幾個因素需要考慮。比如字體字號大小，它的字體間距或大小對比度是多少。

根據設計所針對的設備，字體的最佳選擇可能會發生變化。例如，移動設計是優先考慮可讀性而不是風格的正確地方。屏幕越小，幫助用戶設法閱讀關鍵信息並避免讓他們費勁的看設備就越重要。

基於行動裝置的設計已經發展成為網頁設計的關鍵部分。移動友好的設計原則不再是一種雞肋，而是隨著行動裝置的使用不斷增長的必要性。由於創建在小得多的屏幕上運行良好的設計是不可避免的，因此當今大多數設計師從很早就開始學習如何創建移動體驗。

移動設計的真正訣竅是保持相同的品牌標識並保持設計的靈魂完好無損，即使在更小的空間中也是如此。縮小元素並重新排列它們只能帶您到此為止——真正的移動友好型設計以不同的方式處理整個屏幕。

從布局開始，設計師將分配空間並優先考慮絕對必要的部分。其他所有東西都被存儲起來，但大多數元素仍然很容易找到。一個典型的例子是漢堡菜單。說出你對它帶來的可用性問題的看法，這些圖標在移動設計中非常方便。如果用戶想要在產品中導航，它會一直在視線範圍內，但佔用的空間很小。

許多設計團隊採用移動友好型網頁設計原則的一種方式是移動優先。這基本上意味著基於移動的設計是最先組合和創建的東西。所有主要功能和關鍵組件都包含在移動設計中，然後升級並成長為產品的基於 Web 的版本。

其他團隊只是專注於響應式設計。這是一個非常重要的網頁設計原則：今天的一切都必須是響應式的。即使您從移動優先的方法開始，您仍然需要確保用戶可以從一個設備轉到另一個設備並且仍然獲得相同的體驗。

所有網頁設計團隊都知道這是真的。導航設計和信息架構(IA)共同構成了產品的支柱。它們使人們能夠了解產品、移動功能並找到他們需要的特定信息。這兩個網頁設計原則基本上為產品的其餘部分奠定了基礎。

首先，規劃IA。這是設計師查看產品必須包含的所有內容的時候，從視覺元素、信息和支持主要功能的任何內容。這將創建一個長列表，該列表經過分類和組織以創建信息層次結構。層次結構有助於在產品中創建邏輯結構，以便用戶可以找到信息，無論信息多小或多簡短。

想想看。用戶需要能夠在網站中找到最小的信息，即使他們以前從未體驗過。設計師如何做到這一點？答案在於以合乎邏輯和直觀的方式組織內容。

導航起著類似的作用。創建一個供用戶四處走動的導航系統不僅僅是在漢堡菜單中塞進一堆連結。導航需要體現信息架構，讓用戶不費吹灰之力就能輕鬆找到主要信息和功能。一些設計師說，用戶甚至不應該為了導航而思考。

網頁設計的這兩個關鍵點可以創造或破壞任何產品。如果用戶無法理解事物在哪裡，他們就無法從產品中受益。如果他們無法達到某個重要功能，那麼整個體驗就會受到影響。設計師將投入大量時間來創建、測試和驗證產品的這兩個領域，正是因為這非常重要。

認知努力只是用戶使用設計所需的腦力勞動的另一個術語。正如我們之前提到的，如果任何事情都需要付出太多努力，那麼用戶很可能會變得不知所措、沮喪和疲倦。它破壞了設計師為創造這種體驗而投入的所有辛勤工作。一個值得記住的網頁設計原則是，真正偉大的網頁設計是直觀且毫不費力的。

那麼，我們如何將認知努力降到最低呢？一些策略出奇地簡單，比如允許空白並確保設計不會太複雜。將時間投入到直觀的導航系統中是讓用戶輕鬆體驗的另一種好方法。

儘管一開始降低認知努力似乎是一項艱巨的任務，但大多數設計師在看到一個需要能量的設計時會本能地知道它。很多時候，一切都與細節有關。一個真正有幫助的標籤。由於語言和字體的選擇，易於閱讀的副本。一種沒有解釋空間的形式。一條錯誤消息，告訴用戶如何解決問題。

在設計師儘可能地消除使用設計所需的努力之後......他們繼續前進。秘訣是進行多輪用戶測試，以發現可以進一步改進的領域。這一切都是為了密切關注用戶的行為，並了解哪些元素和區域讓他們停下來。

設計規範基本上是所有產品最終都會遇到的常見問題的可靠答案。這裡的網頁設計原則不一定是使用哪種規範。更多的是接受規範並看到它們的價值。有這麼多設計團隊依靠他們來交付出色的設計是有原因的。他們肯定能創造出一種既能完成工作又能創造出優秀的設計。

我們知道，許多網頁設計師希望留下自己的印記並創造出獨特的東西。但真正多才多藝的網頁設計師認識到規則在設計遊戲中所扮演的角色。它們幫助廣泛的設計保持一致，幫助用戶充分利用產品，並幫助設計師更快更好地創造。

可用性測試是任何設計過程的關鍵部分，這是一個眾所周知的網頁設計原則。這是設計本身的一個強大方面，致力於向我們展示設計團隊認為用戶想要的東西與現實之間的差距。這是任何好產品的秘訣。這可能意味著一個運行良好的項目與一個延遲、可怕的成本和糟糕的績效項目之間的區別。

讓我們回到開頭，回顧一下用戶測試的 3 種主要類型。一是探索性測試。這是指在項目開始時進行的一輪測試，只要有最小的可行產品要測試。它旨在更多地了解用戶的行為並驗證設計的主要支柱（IA 和導航）。

其次是評估測試，通常在項目的中途進行。他們衡量可用性並努力指導團隊改進領域。

最後，我們進行了對比測試。顧名思義，這是設計團隊簡單地測試兩種產品的時候。通常，一種產品是團隊的設計，另一種是競爭對手。這可以向我們展示競爭對手存在哪些設計缺陷，它們所代表的影響，並幫助我們避免同樣的錯誤。

網頁設計的領域不斷發展，變化。用戶擁有的標準、設計師可用的技術、依賴設計團隊銷售和賺錢的企業……這個領域的一切都在快速發展。然而，當涉及到這些關鍵的網頁設計原則時，有些事情仍然是正確的。其中一些想法自 1970 年代就已經存在，當時網際網路剛剛起步。

這表明網頁設計者可以依賴於他們的知識經驗，相信他們的直覺，並參考用戶研究資料進行指導。隨著時間的推移，這些原則將成為設計師微調其作品的另一種方式，並將自然地應用到大多數作品中。