建站常識
網(wǎng)頁設(shè)計(jì)技巧系列之三 再談布局
2006-11-29 08:40:00
上次在“淺談布局”中只是大概的說了一下布局的相關(guān)知識,在本文中就從實(shí)際的應(yīng)用角度來說說布局。“淺談布局”中就有提到網(wǎng)頁的布局有一個(gè)基本型(上下、上中下、左右、左中右),通過基本型可以擴(kuò)展出更多的布局形式。下圖就是布局四種基本型與十二種簡單混合布局。
通過上面的十六個(gè)布局我們可以擴(kuò)展出更多的布局形式。通過增加區(qū)塊、通過不同的區(qū)塊比例關(guān)系,來產(chǎn)生不同的布局應(yīng)用。而布局絕對影響網(wǎng)站的整體效果,而最重要的因素就在于布局這些區(qū)塊的比例上。我在上次的“淺談布局”談到“黃金分割比”、“九宮格”通常黃金分割計(jì)算起來比較麻煩,我個(gè)人是比較喜歡用九宮格,因?yàn)橹灰痉暇艑m的四個(gè)核心點(diǎn)就可以了,不必要深究。所以我們看,上圖的左右布局如果是平分的話很顯然就不明重心,而我們通常的做法是一邊大一邊小,而這個(gè)大小的比例一般是不超過1:3的,一般是在1:1.5以上與1:3之間。在內(nèi)容頁的布局中比例一般都比較大,為的就是讓內(nèi)容閱讀更容易,但是內(nèi)容的寬度也應(yīng)該有一個(gè)度,不能很寬,一般在25~30個(gè)漢字或是40~45個(gè)字母為比較合適。過寬或是過過窄都會(huì)讓閱讀者產(chǎn)生視覺疲勞。(關(guān)于文本排版的細(xì)節(jié)可以參見:“淺談文本排版”)如果是左中右的結(jié)構(gòu)那么這個(gè)比例關(guān)系就更為有意思,在大布局中一般不會(huì)采用三等份的布局,而在于小布局中會(huì)常常使用,用等寬來表示內(nèi)容是同級的或是相似的。那么在大布局中,隨著1024分辨率的普及,左中右結(jié)構(gòu)也可以擴(kuò)展成為四欄甚至是五欄。在多欄的布局中,可以使用一個(gè)大欄二到三個(gè)同寬小欄的布局方式,這里的同寬小欄的總寬要可以比大欄的寬度大一點(diǎn)或是小一點(diǎn),或是等寬。當(dāng)然也會(huì)有一些其它的布局比例,大家可以在具體的形式可以在實(shí)踐中自行的調(diào)整看一下感覺。
而上下或是上中下的比例就比較特別,與左右或是左中右的有很大的不同。上下的比例需要考慮到第一屏的顯示效果問題,現(xiàn)在1024分辨率的普及使得網(wǎng)站的高度顯示被拉長。原來800下的顯示高度大約在450PX左右,而現(xiàn)在已經(jīng)可以達(dá)到620PX左右。所以我們需要在第一屏顯示什么樣的內(nèi)容?一般最重要,最想要瀏覽者注意的當(dāng)然要在第一屏顯示出來。而一般來講上中下的比例就是在這么長的屏中的比例。在大布局中的下面基本上是版權(quán)信息之類的,而上面主要是標(biāo)志與導(dǎo)航或是BANNER所以上下的所占的比重不應(yīng)很大,而重點(diǎn)是在頁面的中間。
布局并不單是在圖紙上畫上幾條線分出幾個(gè)區(qū)這么簡單,需要充分考慮每個(gè)區(qū)的內(nèi)容形式,比如上面所提到的文本的寬度是否適合閱讀等問題就會(huì)直接影響到布局的形式。而在首頁的布局上,也會(huì)有很多不同的內(nèi)容來影響布局。比如圖片的分布是否過于集中,或是過于松散。還有就是上面所提到的通過等比的方式來表示內(nèi)容是同級或是相似。
近期更新
- [2023-06-25 23:22:29] 優(yōu)秀網(wǎng)站設(shè)計(jì)的五大特點(diǎn)
- [2023-04-27 14:05:55] Html 5 響應(yīng)式網(wǎng)站設(shè)計(jì)制作
- [2023-04-10 11:07:30] 網(wǎng)站建設(shè)制作流程知多少
- [2022-10-14 10:11:30] 做網(wǎng)站設(shè)計(jì)應(yīng)該更看重框架搭建還是視覺觀感?
- [2022-08-09 15:57:48] 以“產(chǎn)品”思維搭建網(wǎng)站!
- [2022-08-08 09:12:57] 一家公司的網(wǎng)站應(yīng)該有哪些板塊內(nèi)容?
- [2022-08-05 09:28:06] 企業(yè)網(wǎng)站建設(shè)為什么要設(shè)置新聞板塊?
- [2022-07-04 15:58:06] 網(wǎng)站首頁設(shè)計(jì)的好看,這個(gè)網(wǎng)站就成功了一大半!
- [2022-05-20 09:34:19] 網(wǎng)站后臺(tái)管理系統(tǒng)是什么?有什么作用?
- [2022-05-17 11:29:32] 作為消費(fèi)者,應(yīng)該如何選擇一家水平高的網(wǎng)站建設(shè)公司
- [2022-05-17 11:27:01] 高端網(wǎng)站定制與模板化網(wǎng)站應(yīng)該怎么選擇?
- [2022-04-22 16:00:41] 現(xiàn)在高端的網(wǎng)站設(shè)計(jì)都有哪些新的趨勢?
延伸閱讀
- [2006-11-29 08:42:00] 網(wǎng)頁設(shè)計(jì)技巧系列之二 淺談布局
解決方案
輪胎行業(yè)網(wǎng)站設(shè)計(jì)解決方案 機(jī)械行業(yè)網(wǎng)站設(shè)計(jì)解決方案 房地產(chǎn)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 科技企業(yè)網(wǎng)站設(shè)計(jì)解決方案 電子家電網(wǎng)站設(shè)計(jì)解決方案 食品行業(yè)網(wǎng)站設(shè)計(jì)解決方案 集團(tuán)公司網(wǎng)站設(shè)計(jì)解決方案 企事業(yè)單位網(wǎng)站設(shè)計(jì)解決方案 外貿(mào)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 健身運(yùn)動(dòng)網(wǎng)站設(shè)計(jì)解決方案 美容與化妝品網(wǎng)站設(shè)計(jì)解決方案 建筑設(shè)計(jì)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 物流行業(yè)網(wǎng)站設(shè)計(jì)解決方案
TAGS關(guān)鍵字
搜索引擎蜘蛛 平面設(shè)計(jì) 空白和簡潔的設(shè)計(jì) 蘋果系統(tǒng) 青島開發(fā)區(qū)建站公司 企業(yè)網(wǎng)站建設(shè) 手機(jī)端的網(wǎng)站 網(wǎng)站規(guī)劃 力圖數(shù)字科技 海信網(wǎng)絡(luò)科技 網(wǎng)站建設(shè)的步驟有哪些 營銷型網(wǎng)站 H5定制設(shè)計(jì) 青島網(wǎng)站SEO 膠南網(wǎng)站建設(shè)公司 青島網(wǎng)站案例 圖形網(wǎng)格 網(wǎng)頁設(shè)計(jì) 外貿(mào)網(wǎng)站建設(shè) 網(wǎng)站策劃 微官網(wǎng) H5專題頁面 官網(wǎng)網(wǎng)站建設(shè) 集團(tuán)公司網(wǎng)站建設(shè) 外貿(mào)網(wǎng)站設(shè)計(jì) 青島網(wǎng)站建設(shè)公司哪家好 網(wǎng)站動(dòng)畫 輪胎網(wǎng)站設(shè)計(jì) 手機(jī)網(wǎng)站建設(shè) 青島海洋投資集團(tuán)