在確認(rèn)過網(wǎng)站的架構(gòu)及主要視覺風(fēng)格之后,接下來就是要開始思考
網(wǎng)頁設(shè)計(jì)的版面配置。
網(wǎng)頁設(shè)計(jì)的版面配置 (也可以說版型規(guī)劃) 有幾項(xiàng)重點(diǎn)如下:
1. 運(yùn)用視覺,強(qiáng)調(diào)重點(diǎn)每一個(gè)網(wǎng)站,最重要的都是首頁;每一個(gè)首頁,最重要的就是最上方的部分,我們稱之為"Header" ,因?yàn)檫@個(gè)地方是每一位瀏覽者打開網(wǎng)頁后,第一眼所看到的畫面,所以它的設(shè)計(jì)及規(guī)劃自然是整個(gè)網(wǎng)站的首要重點(diǎn)。
Header 中通常會有大篇幅的橫幅,有的是圖片,有的是動畫,我們稱之為 "Banner" ,也就是俗稱的『網(wǎng)站主視覺』。隨著 HTML5 及 CSS3 的日益普及,傳統(tǒng)的 Flash 動畫已經(jīng)漸漸被取代,愈來愈多的網(wǎng)站使用大篇幅精致圖片來強(qiáng)調(diào)企業(yè)或品牌的重點(diǎn)。因?yàn)閳D片并不像 Flash 動畫那樣需要較長的等待讀取時(shí)間。例如 Apple 的首頁,一打開就立刻看到非常大面積的橫幅,圖片寬度達(dá)到 980px ,讓瀏覽者一看就知道這是目前 Apple 正在主打的熱門商品。
所以,把整個(gè)企業(yè)或品牌的重點(diǎn),運(yùn)用大篇幅的精美圖片呈現(xiàn)在 Header 或 Banner 中,就是
網(wǎng)頁設(shè)計(jì)版型配置的第一個(gè)重點(diǎn)。
2. 掌握架構(gòu),落實(shí)配置每個(gè)網(wǎng)站都會有不同的需求,有些公司需要線上購物來販?zhǔn)凵唐罚行┕緞t需要電子相簿來呈現(xiàn)大量的商品照片,這就是為什么在網(wǎng)站開始設(shè)計(jì)之前,都要先做好網(wǎng)站架構(gòu)規(guī)劃。
因此,在開始進(jìn)行版面配置之前,設(shè)計(jì)師一定要全盤掌握網(wǎng)站的基本架構(gòu),了解這個(gè)網(wǎng)站會有哪些功能項(xiàng)目,如此一來,才能知道主選單 (Menu) 該放哪些項(xiàng)目?網(wǎng)頁主體 (Content) 該有左欄 (Left) 還是右欄 (Right) ?網(wǎng)頁底部 (Footer) 要不要有版權(quán)宣告或聯(lián)絡(luò)資訊?最新消息要顯示 5 則還是 10 則?首頁要有主打商品還是人氣商品?要放幾筆?廣告連結(jié)要放在左邊還是下面?要放幾則廣告?
掌握這些版面配置的重點(diǎn)后,設(shè)計(jì)師可以先在草稿上勾勒出版型的初稿,以方便接下來的其他版型設(shè)計(jì)處理。
3. 統(tǒng)一色彩,營造整體一家公司的形象,最重要的就是 企業(yè)識別系統(tǒng) (CIS) ,一個(gè)網(wǎng)站也是,最重要的就是色彩是否達(dá)到協(xié)調(diào)性與一致性。
選擇色彩,首要考量當(dāng)然就是公司或品牌的主要顏色,例如 Facebook 的藍(lán)色,法拉利的紅色。除了主色系之外,也要謹(jǐn)慎選擇配色,決定色彩之后,不論瀏覽者切換到哪一個(gè)頁面,整個(gè)網(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è)計(jì)版型規(guī)劃。
5. 善用圖片,吸引目光一般人閱讀網(wǎng)頁的習(xí)慣,通常是由上到下,由左到右,但是當(dāng)遇到圖片時(shí),就會呈現(xiàn)跳躍式的閱讀,也就是說,人們會先看圖片,看到有興趣的,才會繼續(xù)看文字。所以,適當(dāng)?shù)脑诒匾牡胤椒胖脠D片,才能更吸引住閱讀者的目光。
一張網(wǎng)頁中,如果都是文字,那閱讀起來肯定枯燥無味,但如果都是圖片,那內(nèi)容又太過空洞,因此在產(chǎn)品列表中,最好有至少一張的圖片,搭配產(chǎn)品簡介文字,讓閱讀者可以迅速的瀏覽圖片,看到有興趣的產(chǎn)品時(shí),就能再看看它的文字介紹,進(jìn)而點(diǎn)進(jìn)去查看產(chǎn)品的詳細(xì)內(nèi)容。
因此,一個(gè)成功的
網(wǎng)頁設(shè)計(jì)版型規(guī)劃,就是能夠達(dá)到圖文并茂、相互呼應(yīng)的境界。
網(wǎng)站欄目:網(wǎng)頁設(shè)計(jì)的版面配置重點(diǎn)
URL標(biāo)題:http://m.newbst.com/news24/150474.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供外貿(mào)建站、服務(wù)器托管、電子商務(wù)、企業(yè)建站、品牌網(wǎng)站制作、小程序開發(fā)
廣告
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源:
創(chuàng)新互聯(lián)