首頁 > 新聞 > 網(wǎng)站設(shè)計 > 網(wǎng)頁設(shè)計的版面配置重點(diǎn)
網(wǎng)頁設(shè)計的版面配置重點(diǎn)
在確認(rèn)過網(wǎng)站的架構(gòu)及主要視覺風(fēng)格之后，接下來就是要開始思考網(wǎng)頁設(shè)計的版面配置。網(wǎng)頁設(shè)計的版面配置 (也可以說版型規(guī)劃) 有幾項重點(diǎn)如下：
1. 運(yùn)用視覺，強(qiáng)調(diào)重點(diǎn)
每一個網(wǎng)站，最重要的都是首頁；每一個首頁，最重要的就是最上方的部分，我們稱之為"Header" ，因為這個地方是每一位瀏覽者打開網(wǎng)頁后，第一眼所看到的畫面，所以它的設(shè)計及規(guī)劃自然是整個網(wǎng)站的首要重點(diǎn)。
Header 中通常會有大篇幅的橫幅，有的是圖片，有的是動畫，我們稱之為 "Banner" ，也就是俗稱的『網(wǎng)站主視覺』。隨著 HTML5 及 CSS3 的日益普及，傳統(tǒng)的 Flash 動畫已經(jīng)漸漸被取代，愈來愈多的網(wǎng)站使用大篇幅精致圖片來強(qiáng)調(diào)企業(yè)或品牌的重點(diǎn)。因為圖片并不像 Flash 動畫那樣需要較長的等待讀取時間。例如 Apple 的首頁，一打開就立刻看到非常大面積的橫幅，圖片寬度達(dá)到 980px ，讓瀏覽者一看就知道這是目前 Apple 正在主打的熱門商品。
所以，把整個企業(yè)或品牌的重點(diǎn)，運(yùn)用大篇幅的精美圖片呈現(xiàn)在 Header 或 Banner 中，就是網(wǎng)頁設(shè)計版型配置的第一個重點(diǎn)。
2. 掌握架構(gòu)，落實(shí)配置
每個網(wǎng)站都會有不同的需求，有些公司需要線上購物來販?zhǔn)凵唐�，有些公司則需要電子相簿來呈現(xiàn)大量的商品照片，這就是為什么在網(wǎng)站開始設(shè)計之前，都要先做好網(wǎng)站架構(gòu)規(guī)劃。
因此，在開始進(jìn)行版面配置之前，設(shè)計師一定要全盤掌握網(wǎng)站的基本架構(gòu)，了解這個網(wǎng)站會有哪些功能項目，如此一來，才能知道主選單 (Menu) 該放哪些項目？網(wǎng)頁主體 (Content) 該有左欄 (Left) 還是右欄 (Right) ？網(wǎng)頁底部 (Footer) 要不要有版權(quán)宣告或聯(lián)絡(luò)資訊？最新消息要顯示 5 則還是 10 則？首頁要有主打商品還是人氣商品？要放幾筆？廣告連結(jié)要放在左邊還是下面？要放幾則廣告？
掌握這些版面配置的重點(diǎn)后，設(shè)計師可以先在草稿上勾勒出版型的初稿，以方便接下來的其他版型設(shè)計處理。
3. 統(tǒng)一色彩，營造整體
一家公司的形象，最重要的就是 企業(yè)識別系統(tǒng) (CIS) ，一個網(wǎng)站也是，最重要的就是色彩是否達(dá)到協(xié)調(diào)性與一致性。
選擇色彩，首要考量當(dāng)然就是公司或品牌的主要顏色，例如 Facebook 的藍(lán)色，法拉利的紅色。除了主色系之外，也要謹(jǐn)慎選擇配色，決定色彩之后，不論瀏覽者切換到哪一個頁面，整個網(wǎng)站的風(fēng)格都具有一致性，如此一來，網(wǎng)站除了能清楚的表達(dá)企業(yè)或品牌的精神之外，也能展現(xiàn)其獨(dú)特性，提高企業(yè)的識別度。
4. 主次分明，簡潔有力
同樣是標(biāo)題，重要性不同，文字大小就必須不同；同樣是圖片，重要性不同，圖片尺寸也就不同。
例如本周主打商品，就要用比較多的篇幅來介紹，文字大一些，圖片更精??美一些，其他的次要商品，就使用較小的文字及圖片，干凈整齊的排列即可。較重要的訊息，除了文字圖片大小有差異之外，也可以使用顏色來區(qū)別，例如在十筆文章標(biāo)題中，可以把較重要的標(biāo)題用紅色來表示，并且放在第一筆。除此之外，所有的文字及圖片，都要有適當(dāng)?shù)拈g距及留白，才能使畫面閱讀起來輕松不費(fèi)力。
把最重要的 (也是您最優(yōu)先想讓客戶知道的) 訊息凸顯出來，主次分明，排版整齊，就能達(dá)到成功的網(wǎng)頁設(shè)計版型規(guī)劃。
5. 善用圖片，吸引目光
一般人閱讀網(wǎng)頁的習(xí)慣，通常是由上到下，由左到右，但是當(dāng)遇到圖片時，就會呈現(xiàn)跳躍式的閱讀，也就是說，人們會先看圖片，看到有興趣的，才會繼續(xù)看文字。所以，適當(dāng)?shù)脑诒匾牡胤椒胖脠D片，才能更吸引住閱讀者的目光。
一張網(wǎng)頁中，如果都是文字，那閱讀起來肯定枯燥無味，但如果都是圖片，那內(nèi)容又太過空洞，因此在產(chǎn)品列表中，最好有至少一張的圖片，搭配產(chǎn)品簡介文字，讓閱讀者可以迅速的瀏覽圖片，看到有興趣的產(chǎn)品時，就能再看看它的文字介紹，進(jìn)而點(diǎn)進(jìn)去查看產(chǎn)品的詳細(xì)內(nèi)容。
因此，一個成功的網(wǎng)頁設(shè)計版型規(guī)劃，就是能夠達(dá)到圖文并茂、相互呼應(yīng)的境界。
1. 運(yùn)用視覺，強(qiáng)調(diào)重點(diǎn)
每一個網(wǎng)站，最重要的都是首頁；每一個首頁，最重要的就是最上方的部分，我們稱之為"Header" ，因為這個地方是每一位瀏覽者打開網(wǎng)頁后，第一眼所看到的畫面，所以它的設(shè)計及規(guī)劃自然是整個網(wǎng)站的首要重點(diǎn)。
Header 中通常會有大篇幅的橫幅，有的是圖片，有的是動畫，我們稱之為 "Banner" ，也就是俗稱的『網(wǎng)站主視覺』。隨著 HTML5 及 CSS3 的日益普及，傳統(tǒng)的 Flash 動畫已經(jīng)漸漸被取代，愈來愈多的網(wǎng)站使用大篇幅精致圖片來強(qiáng)調(diào)企業(yè)或品牌的重點(diǎn)。因為圖片并不像 Flash 動畫那樣需要較長的等待讀取時間。例如 Apple 的首頁，一打開就立刻看到非常大面積的橫幅，圖片寬度達(dá)到 980px ，讓瀏覽者一看就知道這是目前 Apple 正在主打的熱門商品。
所以，把整個企業(yè)或品牌的重點(diǎn)，運(yùn)用大篇幅的精美圖片呈現(xiàn)在 Header 或 Banner 中，就是網(wǎng)頁設(shè)計版型配置的第一個重點(diǎn)。
2. 掌握架構(gòu)，落實(shí)配置
每個網(wǎng)站都會有不同的需求，有些公司需要線上購物來販?zhǔn)凵唐�，有些公司則需要電子相簿來呈現(xiàn)大量的商品照片，這就是為什么在網(wǎng)站開始設(shè)計之前，都要先做好網(wǎng)站架構(gòu)規(guī)劃。
因此，在開始進(jìn)行版面配置之前，設(shè)計師一定要全盤掌握網(wǎng)站的基本架構(gòu)，了解這個網(wǎng)站會有哪些功能項目，如此一來，才能知道主選單 (Menu) 該放哪些項目？網(wǎng)頁主體 (Content) 該有左欄 (Left) 還是右欄 (Right) ？網(wǎng)頁底部 (Footer) 要不要有版權(quán)宣告或聯(lián)絡(luò)資訊？最新消息要顯示 5 則還是 10 則？首頁要有主打商品還是人氣商品？要放幾筆？廣告連結(jié)要放在左邊還是下面？要放幾則廣告？
掌握這些版面配置的重點(diǎn)后，設(shè)計師可以先在草稿上勾勒出版型的初稿，以方便接下來的其他版型設(shè)計處理。
3. 統(tǒng)一色彩，營造整體
一家公司的形象，最重要的就是 企業(yè)識別系統(tǒng) (CIS) ，一個網(wǎng)站也是，最重要的就是色彩是否達(dá)到協(xié)調(diào)性與一致性。
選擇色彩，首要考量當(dāng)然就是公司或品牌的主要顏色，例如 Facebook 的藍(lán)色，法拉利的紅色。除了主色系之外，也要謹(jǐn)慎選擇配色，決定色彩之后，不論瀏覽者切換到哪一個頁面，整個網(wǎng)站的風(fēng)格都具有一致性，如此一來，網(wǎng)站除了能清楚的表達(dá)企業(yè)或品牌的精神之外，也能展現(xiàn)其獨(dú)特性，提高企業(yè)的識別度。
4. 主次分明，簡潔有力
同樣是標(biāo)題，重要性不同，文字大小就必須不同；同樣是圖片，重要性不同，圖片尺寸也就不同。
例如本周主打商品，就要用比較多的篇幅來介紹，文字大一些，圖片更精??美一些，其他的次要商品，就使用較小的文字及圖片，干凈整齊的排列即可。較重要的訊息，除了文字圖片大小有差異之外，也可以使用顏色來區(qū)別，例如在十筆文章標(biāo)題中，可以把較重要的標(biāo)題用紅色來表示，并且放在第一筆。除此之外，所有的文字及圖片，都要有適當(dāng)?shù)拈g距及留白，才能使畫面閱讀起來輕松不費(fèi)力。
把最重要的 (也是您最優(yōu)先想讓客戶知道的) 訊息凸顯出來，主次分明，排版整齊，就能達(dá)到成功的網(wǎng)頁設(shè)計版型規(guī)劃。
5. 善用圖片，吸引目光
一般人閱讀網(wǎng)頁的習(xí)慣，通常是由上到下，由左到右，但是當(dāng)遇到圖片時，就會呈現(xiàn)跳躍式的閱讀，也就是說，人們會先看圖片，看到有興趣的，才會繼續(xù)看文字。所以，適當(dāng)?shù)脑诒匾牡胤椒胖脠D片，才能更吸引住閱讀者的目光。
一張網(wǎng)頁中，如果都是文字，那閱讀起來肯定枯燥無味，但如果都是圖片，那內(nèi)容又太過空洞，因此在產(chǎn)品列表中，最好有至少一張的圖片，搭配產(chǎn)品簡介文字，讓閱讀者可以迅速的瀏覽圖片，看到有興趣的產(chǎn)品時，就能再看看它的文字介紹，進(jìn)而點(diǎn)進(jìn)去查看產(chǎn)品的詳細(xì)內(nèi)容。
因此，一個成功的網(wǎng)頁設(shè)計版型規(guī)劃，就是能夠達(dá)到圖文并茂、相互呼應(yīng)的境界。
- 基于用戶創(chuàng)新
界面設(shè)計日新月異，夢創(chuàng)義堅持基于用戶需求的界面創(chuàng)新設(shè)計……
- 服務(wù)設(shè)計思維
互聯(lián)網(wǎng)的格局發(fā)生的改變，在我們進(jìn)行設(shè)計服務(wù)時更是考慮不同用戶、不同……
- 洞察用戶心理
洞察用戶有意識和無意識的行為以及心理特征通過構(gòu)造一系列的服務(wù)來促進(jìn)……
- 查看更多 >>
最新新聞Latest News
- 中小型企業(yè)網(wǎng)站建設(shè)完應(yīng)該如何營銷
- 很多中小型企業(yè)往往糾結(jié)于以下10個問題：一、我們起步比別人晚，我們的……
- 做企業(yè)網(wǎng)站到底做給誰看？
- 設(shè)計經(jīng)常時不時的遇到一些企業(yè)客戶，常常搞不清楚誰會真正看你的企業(yè)網(wǎng)……
- 傳統(tǒng)企業(yè)進(jìn)軍移動互聯(lián)網(wǎng)，從移動云網(wǎng)站開始
- 移動互聯(lián)網(wǎng)是移動通信和互聯(lián)網(wǎng)融合的產(chǎn)物，其發(fā)展的重要基礎(chǔ)便是智能手……
- 網(wǎng)站建設(shè)和運(yùn)營五大細(xì)節(jié)決定用戶黏性
- 網(wǎng)站的成功離不開搜索引擎優(yōu)化，更離不開最基礎(chǔ)最根本的用戶群體，如何……
- 2015年值得關(guān)注的電子商務(wù)5大趨勢
- 線上線下銷售的界線正在變得越來越模糊。在2015年，這一趨勢仍將繼續(xù)。……
|
公安部備案號 11010502032413
