網頁設計是什么？

網頁設計是平面設計的一種，但是卻是和技術關系最密切的。它是技術和藝術的完美結合。如果離開了美感，大家只會想起用戶圖形界面早期年代，有限的顯色情況下的網站，因為那時還沒有網頁設計的概念，網頁都是由工程師進行搭建的。

有人說，網頁設計就像一個容器，它把所有的平面設計有關的內容都包含進去了：排版、海報設計、LOGO設計、配圖/插畫設計等等(這也是為什么我一直沒有寫網頁設計相關文章的原因，因為實在太龐大，只能是一點一滴講起)，但是我依然想嘗試從自己的角度來寫一系列網頁設計的文章，和大家分享關于網頁設計的點滴。

交互：平面設計的另一個維度

比起其他的平面設計，網頁設計最大的特點就是交互。比如海報的設計一旦確定印刷以后，基本這個設計就定稿了。而網頁設計從來沒有定稿一說，因為網頁的內容是不斷在更新的，甚至網頁的布局、元素都在不斷的調整，包括用戶如何與網頁元素互動的動效等等這些交互的內容都在說明，網頁設計需要考慮的不僅僅是某個時間點上的視覺，而是貫穿整個視覺的迭代過程，它是一連串的視覺經驗，而非某一個片段。

要理解這一點其實很簡單，當你看到展示出的很多優秀的網頁設計的作品，可惜都沒辦法找到它們的鏈接，這就是這個網頁的一個片段。沒有鏈接，沒有訪問，還只是在設計師內部流傳的一個視覺分享的經驗，而沒有辦法真正進入迭代，投入使用。

網站：用來做什么？

網頁設計必定需要代碼，需要交互，需要url，就像一個人有了頭、四肢、軀干，如果沒有靈魂，我們會把它叫做body或者尸體，但是有了靈魂，我們就會稱其為人。人來到這個世界都會有不同的任務，比如是來做設計的，就叫做設計師，那么網站也是一樣，上線后的網站，就需要為其搭配一個職能，也就是它主要是用來做什么的？

按網站的職能，我們大致可以把網站劃分為：博客網站、展示型網站、企業網站、商城、論壇等，而其他任何網站，其實都是在這五個網站的基礎上的變形或相互的組合。但是無論什么網站：展示，是一個比較根本的目的。

根據展示所衍生出不同的用戶對象，比如展示一個樓盤的信息需要放置的內容是圖片、地段、面積、戶型、周邊生活配套等等，這就和展示一張攝影作品需要放置的信息完全不同。信息的不同就會使得網頁的排版不同，所組合而成的整體風格自然也就有所差異。

而有的網站因為有了管理層級的需要，有用戶注冊會員這一系列的功能，比如商城、論壇等，會需要更龐雜的功能來進行管理。

頁面：組成網站的大部件

大家知道一個網站不止一個頁面，比如進入到某個商城，點擊某個商城的產品分類，就會進入不同的分類下的產品列表，點擊某個產品又能進入產品。可以說是層層遞進，而當你看完一件商品，又能從這個商品返回到首頁。

這些不同的頁面就組成了網站，而這些頁面略微的區分一下最簡單就是首頁和內頁的區分。為了更好了解內頁，我們又可以把內頁叫做子頁面，這些頁面按照等級又可以劃分為二級頁、三級頁……

首頁：一般來說是重要內容的展示，有凸出品牌形象的作品 二級頁：大部分情況下是各種列表頁，大家可以在這些列表中看到展示的集合并且進入下一級頁面 三級頁：大部分情況下是詳細頁，就是單條項目的最完整的信息展示。

組件：拼圖的玩法

不同的頁面樣式，就是利用組件來進行布局。組件是一個相對能獨立出來的部分。比如在首頁中，大家可以看到很多大圖的輪播banner，有的會有輪播按鈕，分別展示不同的圖片。這就算作一個組件。這個組件可以放在頁面的頭部，也可以放在頁面的尾部，無論組件在哪里，都不會影響頁面組件的功能發揮。它們的位置不同只會產生不同的布局，形成不同的外觀。

組件是頁面的基本組成部分，我們可以把網頁看成一個拼圖，組件就是拼圖的每一小塊，頁面最后長成什么樣，就看你怎么安排你的組件的位置。比如banner一般最好的體驗就是放在頁頭，如果你放在頁尾也可以，但是不太符合用戶習慣。有很多用戶習慣形成的組件的經典款，這些組件之間的位置不太能有大的調整，就像一個房間基本都有客廳、廚房一樣，你也可以設計一個沒有客廳的房間，但是這不太符合大部分人的需求。所以這個拼圖并非可以隨心所欲，而是在一定的用戶體驗允許的范圍內進行調整。

這里還要提到的一點就是組件的功能，除了發揮作為一片拼圖的組成部分這一功能外，我們還有一個角度是從功能來看待它。

靜態組件與動態組件

靜態組件和動態組件是我們對組件在功能上的一個劃分，什么是動態和靜態的區別呢？很簡單理解這一點就是針對組件的內容，就像人的身體有靜脈和動脈的區別一樣，它們最大的區別是什么呢？靜脈的血流速度慢，動脈的血流速度很快(比如往你的動脈扎一刀，就會血流如注一樣)，那么動態組件和靜態組件也是這樣的：你的內容更新比較快的就是動態組件，內容更新慢的就是靜態組件。

那這個內容更新快慢怎么理解呢？就像一個作品列表，作品在這里更新的內容肯定比你的LOGO、導航這些內容換得更快，需要不斷增加，這樣就可以知道作品列表、作品詳細都是動態組件。相應的，比如關于頁面里的內容，你要介紹自己，當然不可能每天或者每周都更新一次，也不需要有個“動態”去展示給用戶，因此即使你仍然可能會更新，但是這里的內容卻是相對更新比較慢的，因此我們就可以叫它作靜態組件。

元素：組件的樣式

組件是由什么構成呢？在這里我們會進一步涉及到另一個概念：元素。一個圖標可以是一個元素，一個段落也可以是一個元素，元素雖小，五臟俱全，元素的不同組合就形成了不同的組件。

比如作品列表這個組件就是由圖片、文字、分類標簽、分頁按鈕所組成，當然不同的作品列表肯定展示的內容會略微的不同，可能會增加摘要或者圖標等，但是從這里我們可以看到，這些圖片、文字、分類標簽、分頁按鈕就是所謂的不同的元素。

每個元素都會有不同的樣式，元素的樣式不同，它們所組成的組件樣式也就不同。比如文字的樣式可以是尺寸、字體、段落間距、位置(布局)等方面的變化，因此也就形成了不同的文字段落樣式。

后記

綜上，網站、頁面、組件、元素這四個層次的關系，構成了種類多樣、外觀豐富的網頁設計，網頁設計也不再簡單被看作一個大拼盤，而我們在做Pagepan這個產品的時候，就是基于這樣的理念，來一層層搭建一個出一個網站。

登錄收藏

總結

以上是生活随笔為你收集整理的网页拼图游戏html代码,网页设计（一）：拼图游戏的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。