想要學好網(wǎng)頁設計，先要搞懂網(wǎng)頁設計的基本原則

時間：2023-09-07 12:36:01 | 來源：網(wǎng)站運營

時間：2023-09-07 12:36:01 來源：網(wǎng)站運營

想要學好網(wǎng)頁設計，先要搞懂網(wǎng)頁設計的基本原則：

網(wǎng)頁設計的基本原則

早期學習的網(wǎng)頁設計原則

1. 明確設計方向

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

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







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

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

2.了解留白的視覺效果和空間之間的平衡

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

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







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

一個好的結構可以讓用戶立即知道他們在看什么。層次結構清楚地表明了哪些元素是連接的，哪些不是，并突出了最重要的區(qū)域?？瞻滋峁┮曈X上的緩解，并有助于引導用戶的眼睛通過設計。真正好的網(wǎng)頁設計不需要額外的用戶尋找正確的按鈕來點擊——人們一看就知道。

3. 了解比例、位置和間距規(guī)律

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

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

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







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

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







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

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

4. 了解你的設計對象

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

你對最終用戶的印象越清晰，你就越有可能創(chuàng)造出成功的設計。在網(wǎng)頁設計中，細節(jié)可能取決于最終用戶而不是設計師。

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







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

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

5.版式設計可以決定網(wǎng)頁的成敗

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

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







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

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

6. 移動友好的設計是必須的

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

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







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

許多設計團隊采用移動友好型網(wǎng)頁設計原則的一種方式是移動優(yōu)先。這基本上意味著基于移動的設計是最先組合和創(chuàng)建的東西。所有主要功能和關鍵組件都包含在移動設計中，然后升級并成長為產(chǎn)品的基于 Web 的版本。

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

7.導航和信息架構

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

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

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







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

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

8. 必須將認知努力保持在最低限度

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

那么，我們?nèi)绾螌⒄J知努力降到最低呢？一些策略出奇地簡單，比如允許空白并確保設計不會太復雜。將時間投入到直觀的導航系統(tǒng)中是讓用戶輕松體驗的另一種好方法。







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

在設計師盡可能地消除使用設計所需的努力之后......他們繼續(xù)前進。秘訣是進行多輪用戶測試，以發(fā)現(xiàn)可以進一步改進的領域。這一切都是為了密切關注用戶的行為，并了解哪些元素和區(qū)域讓他們停下來。

9. 學習依賴設計規(guī)范

設計規(guī)范基本上是所有產(chǎn)品最終都會遇到的常見問題的可靠答案。這里的網(wǎng)頁設計原則不一定是使用哪種規(guī)范。更多的是接受規(guī)范并看到它們的價值。有這么多設計團隊依靠他們來交付出色的設計是有原因的。他們肯定能創(chuàng)造出一種既能完成工作又能創(chuàng)造出優(yōu)秀的設計。







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

10.了解可用性測試的基礎知識

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

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

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







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

總結網(wǎng)頁設計原則

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

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