6種企業(yè)網(wǎng)站首頁(yè)設(shè)計(jì)最常見(jiàn)的布局
其實(shí)網(wǎng)頁(yè)布局也沒(méi)有想象中那么難,只要做到兩點(diǎn)我認(rèn)為起碼可以做到臨陣不慌,一是對(duì)常見(jiàn)的布局方式心中有數(shù),二是根據(jù)信息內(nèi)容及設(shè)計(jì)素材的特點(diǎn)進(jìn)行擺積木式的多次嘗試?;畈欢嗾f(shuō),下面就是我總結(jié)的企業(yè)站首頁(yè)常用到的布局方法,共有六種。
一、大框套小框的布局
這種布局方式即是我在上面提到的常見(jiàn)的布局,不是說(shuō)這種布局方式一無(wú)是處,但我們總不能只會(huì)這一種布局方式,次次套用吧?按照這種布局當(dāng)然也可以做出來(lái)漂亮的設(shè)計(jì),但畢竟方框限制的視線的擴(kuò)展,如果客戶要求做出大氣的感覺(jué),一般不會(huì)按照這種方式來(lái)布局,通常來(lái)講,大氣意味著開(kāi)闊視野。
二、通欄布局
這種布局方式讓視線不再受到方框的限制,比起上面的布局方式,自然多了些大氣、開(kāi)闊的味道來(lái)。另外,主視覺(jué)部分還可以靈活處理,既可以向上拓展到logo和導(dǎo)航的頂部位置,也可以向下拓展到內(nèi)容區(qū)域,這種布局方式也是非常常見(jiàn)的布局方式。
三、導(dǎo)航在主視覺(jué)下方的布局
這種雖然不多,但也時(shí)不時(shí)能看到,導(dǎo)航放在banner下面的好處是可以彌補(bǔ)banner中設(shè)計(jì)素材截?cái)嗟娜秉c(diǎn),讓設(shè)計(jì)看上去完整、自然。所以說(shuō)布局的方式受到多方面因素的影響,不僅考慮到信息內(nèi)容所占據(jù)的空間,還包括你手頭現(xiàn)有的素材。
四、左中右布局
這種布局方式不常見(jiàn)到,但卻是非常富有新鮮感的布局方式,如果你已經(jīng)做膩歪了水平分割的設(shè)計(jì),嘗試一下這種布局也未嘗不是一種好的選擇。
五、環(huán)繞式布局
這種布局方式看上去更加靈活,banner區(qū)域相對(duì)較小,就可以在頁(yè)面放置更多的信息內(nèi)容。
六、穿插式布局
這種布局在企業(yè)站中較難看到,用的不多,banner區(qū)域相對(duì)較大,可以作為一種布局的選擇。
上面的六種布局方式只是一些常見(jiàn)的企業(yè)類網(wǎng)站頁(yè)面布局,布局的方式還有更多。實(shí)際上,布局就像是擺積木,只要遵循重要信息靠左、靠上,次要信息靠右、靠下的原則即可,并沒(méi)有規(guī)定一定要怎么布局,或者這種布局方式要比那種更好,只能說(shuō)某種布局方式更為合適某個(gè)頁(yè)面而已。所以,大家多做嘗試,從你手頭正在做的項(xiàng)目開(kāi)始,嘗試一下不同的布局方式,給你的設(shè)計(jì)增加一些創(chuàng)意和新鮮感。
本文地址:http://irelandcustomcontracting.com/tutorial/di2005.html
您可能還喜歡
- Macaron 馬卡龍系色譜 ;附HC(16進(jìn)制碼
- 7個(gè)手機(jī)版網(wǎng)頁(yè)設(shè)計(jì)的原則
- 折紙多邊形網(wǎng)頁(yè)背景效果制作教程
- 龐門(mén)正道:好好玩耍的點(diǎn)線面(上)
- 網(wǎng)頁(yè)設(shè)計(jì)中的常見(jiàn)頁(yè)面布局方式
- WAP APP的柵格設(shè)計(jì)
- 八種很漂亮的排版方法和技巧分享
- 網(wǎng)頁(yè)設(shè)計(jì)的首屏標(biāo)準(zhǔn)你了解多少?
- 字體大寶庫(kù):40款為網(wǎng)頁(yè)設(shè)計(jì)師準(zhǔn)備的時(shí)
- 視覺(jué)設(shè)計(jì)分享—專題頁(yè)面設(shè)計(jì)篇
- 專訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類
- 體驗(yàn)設(shè)計(jì)中的排序問(wèn)題
- 網(wǎng)頁(yè)設(shè)計(jì)精粹 網(wǎng)頁(yè)中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁(yè)UI - 原子設(shè)計(jì)理論(上)
- 如何通過(guò)設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺(jué)設(shè)計(jì)系列文章(二):全屏