網頁可以說是網站構成的基本元素。當我們輕點鼠標,在網海中遨游,一副副精彩的網頁會呈現在我們面前,那么,網頁的精彩與否的因素是什么呢?色彩的搭配、文字的變化、圖片的處理等,這些當然是不可忽略的因素,除了這些,還有一個非常重要的因素——網頁的布局。下面,本文就有關知識對網頁常見布局的方式進行探討。
網頁設計常見布局有哪些呢?主要體現在以下幾個方面。
?大框套小框的布局
?通欄布局
?導航在主視覺下方的布局
?左中右布局
?環繞式布局
?穿插式布局
大框套小框的布局
這種布局方式即是我在上面提到的常見的布局,不是說這種布局方式一無是處,但我們總不能只會這一種布局方式,次次套用吧?按照這種布局當然也可以做出來漂亮的設計,但畢竟方框限制的視線的擴展,如果客戶要求做出大氣的感覺,一般不會按照這種方式來布局,通常來講,大氣意味著開闊視野。
這種布局可以選擇一個適合的大圖作為背景,而前景內容都可以很好的控制在大部分顯示器的尺寸范圍內。
通欄布局
這種布局方式讓視線不再受到方框的限制,比起上面的布局方式,自然多了些大氣、開闊的味道來。另外,主視覺部分還可以靈活處理,既可以向上拓展到logo和導航的頂部位置,也可以向下拓展到內容區域,這種布局方式也是非常常見的布局方式。
通欄布局利用了網頁自適應寬度的原理和設計相結合,打破了條條框框的限制,頁面更顯得寬闊大氣。
導航在主視覺下方的布局
這種雖然不多,但也時不時能看到,導航放在banner下面的好處是可以彌補banner中設計素材截斷的缺點,讓設計看上去完整、自然。所以說布局的方式受到多方面因素的影響,不僅考慮到信息內容所占據的空間,還包括你手頭現有的素材。
這種布局的網頁不多,但是這種頁面可以很好的展示banner的效果,可以更好更直接的去表現一個網頁的主題。
左中右布局
這種布局方式不常見到,但卻是非常富有新鮮感的布局方式,如果你已經做膩歪了水平分割的設計,嘗試一下這種布局也未嘗不是一種好的選擇。
這種布局的共性是都有一個比較好看的banner圖片,而且這個圖片是構成網頁主題的一部分,很好的營造出站點的主題。
環繞式布局
這種布局方式看上去更加靈活,banner區域相對較小,就可以在頁面放置更多的信息內容。
這種布局方式看上去更加靈活,banner區域相對較小,就可以在頁面放置更多的信息內容。
穿插式布局
這種布局在企業站中較難看到,用的不多,banner區域相對較大,可以作為一種布局的選擇。
小結:上面的六種布局方式只是一些常見的企業類網站頁面布局,布局的方式還有更多。實際上,布局就像是擺積木,只要遵循重要信息靠左、靠上,次要信息靠右、靠下的原則即可,并沒有規定一定要怎么布局,或者這種布局方式要比那種更好,只能說某種布局方式更為合適某個頁面而已。所以,大家多做嘗試,從你手頭正在做的項目開始,嘗試一下不同的布局方式,給你的設計增加一些創意和新鮮感。
備注:圖片來源于網絡
更多精彩文章,請微信添加tencentgad為好友獲取更多干貨內容
原創文章,轉載請聯系tencentgad