網(wǎng)頁設(shè)計是什么？

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

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

交互：平面設(shè)計的另一個維度

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

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

網(wǎng)站：用來做什么？

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

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

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

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

頁面：組成網(wǎng)站的大部件

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

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

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

組件：拼圖的玩法

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

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

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

靜態(tài)組件與動態(tài)組件

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

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

元素：組件的樣式

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

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

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

后記

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

登錄收藏

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。