網頁版面設計設計誤區

1、網頁的版式設計應注意哪幾個方面？與平面設計相比有哪些共同點和不同點

兩者共同點：
1、都需要良好的視覺表現；
2、設計師需要有良好的審美能力；
3、基本都是用同一類軟體；
其實網頁設計應該屬於多媒體設計的范疇，多媒體設計是從屬於平面設計規律而又有很多不同的一個領域，網頁除了注重設計外，更多的是考慮瀏覽的使用體驗，打工速度，程序邏輯，SEO優化各方面的知識，知識面和側重點跟平面設計有很大的不一樣。一個好的平面設計師不一定就能做好網頁設計，網頁注重交互性、操作性跟瀏覽性。如果細分出來主要差別有一下幾點：
1、設計核心的差別
平面設計的核心是品牌。它要以品牌為出發點去設計，要在視覺上100％體現品牌的魅力。
網頁設計的核心是用戶。要以用戶的操作習慣為出發點去設計，換句話說也就是要設計得人性化，讓用戶瀏覽和操作要方便。
2、字體使用有限制
平面設計的字體一般不受限制，為了表現效果，相關的字體中以任意使用。
網頁設計的字體則受到很多的限制，一般中文字體只能用宋體、微軟雅黑。
3、顏色運用的區別
平面設計可以使用成千上萬種顏色，換句話說可以使用所有顏色，但是網頁設計不行！網頁設計中規定相關安全色。
4、處理與製作方面的差別問題
傳統平面設計的作品大多是以印刷的平面形式表現。
網頁設計作品則是透過顯示器表現，並且在傳輸的過程中受到網路頻寬的限制。網頁設計不僅僅是在做設計，更多的是要考慮網頁的打開速度、兼容性等問題。所以有時候不得不為了照顧這些特殊的要求而犧牲美觀。
5、圖片格式和像素的差別
平面設計需要的圖片格式一般為 PSD CDR AI EPS 等比較大的源文件格式 或導出的JPG 一般像素（解析度）大於300的高清晰圖片。
網站設計 一般為GIF 或PNG 或JPG 一般像素（解析度）小於72的）。
6、目的差異
傳統平面的設計作品是以向人們傳達某種資訊或訴求為目的。
網站製作的設計必須是配合網站的內容設計，而不是單純地只為表現藝術而設計。除了擁有平面設計作品的功能以外，還有重要的引導和連接功能，也就是網頁具有很強的可操作性和互動性。

2、網站版面設計要注意哪些問題？

需要注意以下四點：

1.加強視覺效果
2.加強文案的可視度和可讀性
3.統一感的視覺
4.新鮮和個性是布局的最高境界。

設計首頁的第一步是設計版面布局。
就象傳統的報刊雜志編輯一樣，我們將網頁看作一張報紙，一本雜志來進行排版布局。
雖然動態網頁技術的發展使得我們開始趨向於學習場景編劇，但是固定的網頁版面設計基礎依然是必須學習和掌握的。它們的基本原理是共通的，你可以領會要點，舉一反三。

版面指的是瀏覽器看到的完整的一個頁面（可以包含框架和層）。因為每個人的顯示器解析度不同，所以同一個頁面的大小可能出現640*480像素,800*600像素,1024*768像素等不同尺寸。

布局，就是以最適合瀏覽的方式將圖片和文字排放在頁面的不同位置。
你可能注意到：「最適合」是一個不確定的形容詞，什麼才是最適合的呢？抱歉的是阿捷不能也不可能給您一個完整的正確的答案。就好比有人希望知道成功的秘訣是什麼，成功者只能建議您用什麼方法，什麼途徑才能最容易獲得成功，而不可能有一步成功的"秘訣"告訴您。

我們在設計思考系列文章第四篇講過站點整體的創意，版面布局也是一個創意的問題，但要比站點整體的創意容易，有規律的多。讓我們先來了解一下版面布局的步驟：

一.草案
新建頁面就象一張白紙，沒有任何錶格，框架和約定俗成的東西，你可以盡可能的發揮你的想像力，將你想到的"景象"畫上去(我們建議您用一張白紙和一支鉛筆，當然用作圖軟體photoshop等也可以)。這屬於創造階段，不講究細膩工整，不必考慮細節功能，只以粗陋的線條勾畫出創意的輪廓即可。盡你的可能多畫幾張，最後選定一個滿意的作為繼續創作的腳本。

二.粗略布局
在草案的基礎上，將你確定需要放置的功能模塊安排到頁面上。(註：功能模塊我們在"首頁設計-引子"中提過，主要包含網站標志,主菜單,新聞,搜索,友情鏈接,廣告條,郵件列表,計數器,版權信息等)。注意，這里我們必須遵循突出重點、平衡諧調的原則，將網站標志，主菜單等最重要的模塊放在最顯眼，最突出的位置，然後在考慮次要模塊的排放。

三.定案
將粗略布局精細化，具體化。（靠你的智慧和經驗，旁敲側擊多方聯想，才能作出具有創意的布局。）

在布局過程中，我們可以遵循的原則有：

1、正常平衡---亦稱"勻稱"。多指左右、上下對照形式，主要強調秩序，能達到安定誠實、信賴的效果。
2、異常平衡---即非對照形式，但也要平衡和韻律，當然都是不均整的，此種布局能達到強調性、不安性、高注目性的效果。
3、對比---所謂對比，不僅利用色彩、色調等技巧來作表現，在內容上也可涉及古與今、新與舊、貧與富等對比。
4、凝視---所謂凝視是利用頁面中人物視線，使瀏覽者仿照跟隨的心理，以達到注視頁面的效果，一般多用明星凝視狀。
5、空白---空白有兩種作用，一方面對其他網站表示突出卓越，另一方面也表示網頁品位的優越感，這種表現方法對體顯網頁的格調十分有效。
6、盡量用圖片解說---此法對不能用語言說服、或用語言無法表達的情感，特別有效。圖片解說的內容，可以傳達給瀏覽者的更多的心理因素。

以上的設計原則，雖然枯燥，但是我們如果能領會並活用到頁面布局裡，效果就大不一樣了。比如，
○網頁的白色背景太虛，則可以加些色快；
○版面零散，可以用線條和符號串聯；
○左面文字過多，右面則可以插一張圖片保持平衡；
○表格太規矩，可以改用導角試試。
經過不斷的嘗試和推敲，你的網頁一定會亮麗起來的哦:)

看看我們經常用到的版面布局形式：
1."T"結構布局。所謂"T"結構。就是指頁面頂部為橫條網站標志+廣告條，下方左面為主菜單，右面顯示內容的布局，因為菜單條背景教深，整體效果類似英文字母"T",所以我們稱之為"T"形布局。這是網頁設計中用的最廣返的一種布局方式。這種布局的優點是頁面結構清晰，主次分明。是初學者最容易上手的布局方法。缺點是規矩呆板，如果細節色彩上不注意，很容易讓人"看之無味"。

2."口"型布局。這是一個象形的說法，就是頁面一般上下各有一個廣告條，左面是主菜單，右面放友情連接等，中間是主要內容。這種布局的優點是充分利用版面，信息量大(我的主頁首頁即屬於這種布局)。缺點是頁面擁擠，不夠靈活。也有將四邊空出，只用中間的窗口型設計，例如網易壁紙站。

3."三"型布局。這種布局多用於國外站點，國內用的不多。特點是頁面上橫向兩條色塊，將頁面整體分割為四部分，色塊中大多放廣告條。

4.對稱對比布局。顧名思義，採取左右或者上下對稱的布局，一半深色，一半淺色，一般用於設計型站點。優點是視覺沖擊力強，缺點是將兩部分有機的結合比較困難。

5.POP布局。POP引自廣告術語，就是指頁面布局象一張宣傳海報，以一張精美圖片作為頁面的設計中心。常用於時尚類站點，比如ELLE.com。優點顯而易見：漂亮吸引人。缺點就是速度慢。作為版面布局還是值得借鑒的。

以上總結了目前網路上常見的布局，其實還有許許多多別具一格的布局，關鍵在於你的創意和設計了。

3、網頁設計中要注意什麼？

網頁設計要注意以下幾個方面：
1、網站設計內容問題
內容是所有網站的靈魂，也是客戶關心的東西，打開網際網路看看企業網站，我們很容易發現，大多數中小企業網站欄目劃分趨於一致：公司簡介、產品介紹、聯系方式等，在版式設計上也基本上是上下分欄、左右分欄等方式，在內容上要從客戶考慮，要了解客戶想從你頁面上了解些什麼，總之要貼近客戶。
2、網站設計技術問題
首先應該說明的是，我們並非鼓動企業在自己的網站中加大技術含量。實際上，最重要的是所使用技術在多大程度上實現了預期的功能，或者說所要的功能需要什麼樣的技術實現比較經濟劃算。而我們在與企業接觸中，常常碰到這種情況：網站中使用了先進的技術，當然進行了大筆的投資，但實際上所實現的功能通過其他方式，很低的投入就可以實現！但是企業並不了解這些。
3、網站設計交互問題
您的網站是否實現了與客戶的交互，在多大程度上實現了這一功能，值得您仔細考慮，在我們接觸的客戶中，甚至有的客戶抱怨：他的信箱至今還沒有收到mail！經過我們的檢查，是因為留言簿中有關信息提交的設置有問題！使得與客戶之間的交流出現很大的問題，這也是很多企業應該注意的問題。另外在設計上應注意什麼
1，對每一個超級鏈接點擊之後採用新開窗口還是直接跳轉，必須認真對待。如果用戶點擊一個link之後是要放棄當前頁面開始新的體驗，則應用直接跳轉。如果用戶點擊link是要了解更多的信息，但是當前頁面的信心仍然有用，則應新開窗口。
2，在每一個用戶可能需要幫助的地方提供幫助信息或幫助按鈕。完善的幫助系統是一個產品，網站成功很重要的因素。
3，承諾問題，不要輕易對你的用戶承諾什麼，但是一旦承諾了，就要盡最大努力去兌現。在首頁規劃和網站設計中最為突出的問題是：1）首頁規劃和欄目設置不合理。主要表現在欄目設置有重疊、交叉、或者欄目名稱意義不明確，容易造成混淆，使得用戶難以發現需要的信息。2）重要信息不完整問題。企業介紹、聯系方式、產品分類和詳細介紹、產品促銷等是企業網站最基本的信息，但為數不少的企業對這些重要信息不完整，尤其是產品介紹過於簡單，有些甚至沒有公布任何聯系方式；上述幾個問題只是企業網站設計問題中的部分問題，還有考慮瀏覽目標群體，從營銷方式設計都應該是現在企業網站所在考慮的問題。每一個細微的不足和問題，都有可能失去用戶，或者根本無法獲得被用戶發現的機會，結果最明顯的表現就是訪問量很小，或者由於得不到有價值的信息和服務，訪問者的轉化率很低，無法取得最終的收益。

4、企業網頁設計時，網站頁面設計需要注意那些問題？

首先

網站頁面設計當中，產品信息的主次很重要，這會直接影響用戶瀏覽網頁的便捷性。

所謂的主次設計就是要把最重要的內容或產品放到最顯眼的地方，次要的功能和產品就放到一般的位置上。

這樣做是因為，人們通常訪問一個陌生網頁的時候，基本是掃描性瀏覽，只為捕捉他們認為有用的信息，所以主次分明了，才能讓瀏覽者第一時間內抓到自己想要的東西，也就是你的網站主要想要表達的內容。

其次

網頁的功能性也是很關鍵的，一般網站的主要功能就是傳遞信息了，所以網站的建設要將這點最大化，不要過分追求網頁的酷炫效果，而去用一堆動態圖像啦，或者過長啦之類的，這樣一來會使網頁出現卡頓的線下，和過分冗長的現象，容易讓人失去瀏覽的耐性。

也就是說圖文比例要恰當，表達要有重點，要把最需要表達給瀏覽者的內容強調放大。比如通過鮮明的顏色，或者好看的藝術字等方法進行強調。

最後

網站頁面設計師要了解並意識到瀏覽器的兼容性，瀏覽器對於運作環境來說是很挑剔和難以預料的。

如果設計的網站只能運行在的幾種網頁瀏覽器，那是不夠的，設計者需要盡可能在多種瀏覽器下測試，達到一個最好的效果。

以上就是設計小能手redtrans_cs小姐姐的分享了，希望有幫助~

5、網頁設計有哪些細節需要注意

　　1、切勿隨意添加欄目：作為美工，這一行為是要避免的，如果隨意給界面添加表單、鏈接、「更多」等需要後台開發才能支持的功能，這樣隨意添加，就無形的更改了網站最初的需求，增加了項目的工作量，會影響網站的整體功能，同時也增加了後期測試的工作量，另一種可能就是不符合用戶的需求，導致後期還需要重新修改。
2、切勿隨意篡改設計：沒有按照欄目的邏輯來設計頁面，也沒能為網站的內容進行良好的呈現。這種行為只是單純的為了自己能在網頁設計時方便，從而隨意的消減了很多網站的內容。
3、隨意切圖，不考慮頁面動態擴展：這個一般是美工技術含量不夠導致的。切出的圖片只能用在一個界面尺寸里，換個頁面，就需要重新切圖，沒有任何擴展性，要結合響應式網頁設計的原理，進行合理切圖。
4、圖片好看，但是沒有實在的意義：給一個美工一個新聞主題，讓他給做一個Banner，但是做出來之後，和新聞主題沒有任何的關系，僅僅是好看。還有一些美工，更加對工作不負責任，只是把一個圖片做了一下PS，這樣對網站的整體效果都是有害的。
5、整站界面風格：在後期維護網站的階段，美工們在製作圖片時，沒有考慮當前網站的風格，隨意變換圖片基本色調，在網頁色彩搭配設計時，不合理配合網站整體風格，會影響網站後期的優化工作。

6、網頁設計應該注意哪些事項

方便快捷就好啦！後期管理一定要簡單，例如：pageadmin和discha都不錯、簡單、方便直接，下載就能輕松做網站。

7、如何避免網頁設計中常見的8大錯誤

字體使用過多:使用兩到三種字體，讓您的網站易於閱讀並與您的品牌相得益彰; 我們建議使用無襯線字體。

過度使用關鍵詞:關鍵詞選得自然並且人文一些。如果您的文字內容很受讀者青睞, 搜索引擎自然也會樂於推薦。

過多的引導方式：堅持一個明確的, 讓您的用戶可以以最少的點擊量來完成的請求。

網站的背景音樂：邀請您的訪問者點擊「播放」功能來聽一首歌, 把「暫停」鍵放在顯而易見的位置上。

使用業余圖像：使用真實的圖像會看起來更專業!多花些時間（或者銀子）在您的產品，商店和您的團隊成員身上！

網站篇幅過寬：在您的網站使用垂直滾動條，切勿使用水平滑塊！

滿屏的留言互動板塊：創建一個可幫助您體現網站主要目標的廣告牌。

信息全部堆砌在主頁上：簡化主頁。包含兩到三張美麗的圖像，清晰的行動口號，精心編寫的文本，准確地描述您做的什麼。為您網站的詳情頁保留有關您的業務和服務信息。

望採納謝謝~~~~

8、平面設計與網頁設計之間的差異性

平面設計和網頁都是設計，但區別又是那麼大，那不就與大自然中的貓和老虎一樣嘛，它們都屬於貓科動物，但又不是同一種生物，有著很大的差別。現在就讓我們來分析一下同樣作為視覺傳達設計，她們之間的差異性。

1、視覺元素

在色彩方面平面設計與網頁設計使用的色彩模式完全不同，平面設計因為後期的實現依賴於印刷，所以採用CMYK的色彩模式，而網頁根據其顯像方式使用RGB的色彩模式。平面設計時的色彩運用注重視覺的沖擊力及視覺流的引導(在這點上與網頁設計中的BANNER設計相類似)，而網頁設計(產品類)更注重的是信息結構關系的梳理，如果將色彩運用的過多過強，很容易引起視覺的疲勞感。

我們平時在設計過程中，平面設計的字體選用更為自由一些，不用擔心後期實現的問題，所有的文字最後都會輸出為圖形進行印刷，而網頁設計就需要考慮的更為全面，並且在字體的選用范圍上也很小，為了讓輸出的成品大小不對伺服器造成壓力，基於html的特性，所有字體都是根據用戶操作系統內默認字體而定的，當然近年隨著技術的沿革與發展，這個差距也逐步在縮小，目前通過html5的API可以實現個性化字體的使用而不需要將個性化的字體最終輸出為圖形，在不增加後端壓力的同時，大大提升了用戶體驗，非常贊。

從圖形使用上，平面設計比網頁設計豐富，表現方式也多樣化，特別是對於產品類的網頁設計，模塊化的設計思路更為明顯，在視覺表現上也是如此，平面對於圖形的表現是不需要考慮到後期的實現的，在一點上是有目共睹的。在來說一下咱們設計時使用的尺寸單位問題，平面設計在使用尺寸標注時都用的是物理尺寸的概念，比如英寸，厘米，毫米等，而網頁使用的像素。

2、呈現方式

3、信息載體

4、瀏覽方式

平面設計的屬於漸進式的瀏覽方式，無法對整個瀏覽的'過程進行多樣化串聯，網頁設計擁有滾動條下拉、按鈕鏈接跳轉等多樣化的瀏覽信息方式，在擁有同樣一種信息架構的條件下，信息之間的串聯性更為豐富，用戶選擇信息的自由度更大，但平面設計也自然有其優勢所在，比如平時我在設計照片書這類產品的時候，就很明顯的發現，這一類的產品在電腦顯示器上進行翻閱，不如印刷成為一個真實的書本來翻閱感受要更好一些，並且更具有收藏及紀念意義。

5、信息傳播

平面設計屬於比較傳統的信息媒介設計，一般會通過張貼、銷售、郵寄派送等形式進行傳播，這樣傳播的方式范圍小且成本較高，相對而言在這方面網頁設計的信息傳播能力卻非常的強，但依賴於第三方媒介的支持，平面設計卻擁有更為廣泛的受眾人群，不同的年齡層對於紙張或書本的信息接受能力總是強於網路媒體的，畢竟網路信息獲取的將會存在一個學習成本，在今後網路信息的不斷普及以及終端媒介用戶體驗的不斷提升，在受眾人群方面在我看來差距會越來越小。

9、網頁設計的設計誤區

<