A. 總結網站設計的幾種版面布局形式
網站設計中.新鮮和個性是布局的最高境,能加強視覺效果。
1、T結構布局,就是指頁面頂部為橫條網站標志+廣告條,下方左面為主菜單,右面顯示內容的布局,因為菜單條背景教深,整體效果類似英文字母T,這是網頁設計中用的最廣返的一種布局方式。
這種布局的優點是頁面結構清晰,主次分明。是初學者最容易上手的布局方法。缺點是規矩呆板,如果細節色彩上不注意,很容易讓人看之無味。
2、口型布局。就是頁面一般上下各有一個廣告條,左面是主菜單,右面放友情連接等,中間是主要內容。
這種布局的優點是充分利用版面,信息量大。缺點是頁面擁擠,不夠靈活。也有將四邊空出,只用中間的窗口型設計,例如網易壁紙站。
3、三型布局。這種布局多用於國外站點,國內用的不多。特點是頁面上橫向兩條色塊,將頁面整體分割為四部分,色塊中大多放廣告條。
4、對稱對比布局,採取左右或者上下對稱的布局,一半深色,一半淺色,一般用於設計型站點。優點是視覺沖擊力強,缺點是將兩部分有機的結合比較困難。
5、POP布局。POP引自廣告術語,就是指頁面布局象一張宣傳海報,以一張精美圖片作為頁面的設計中心。常用於時尚類站點。優點:漂亮吸引人。缺點就是速度慢。作為版面布局還是值得借鑒的。
B. 網頁布局設計有哪些類型
1、拐角型
這種類型其實與國字型很相近的,只是在形式上不一樣,最上面的部分是網站的標題以及網站的橫幅廣告條,一種很常見的類型是最上面是標題及廣告,左側是導航鏈接。
2、“三”字型布局
這種布局多用於國外網站,國內用得不多。特點是在頁面上有橫向兩條色塊,將頁面整體分割開,色塊中大多放廣告條、更新和版權提示。
3、標題正文類型
上面是網站的標題,或者是類似的東西,接著就是網站的正文內容,例如是一些文章或者是注冊登錄頁面。
4、對稱對比型
對稱對比型採取左右或上下對稱的布局,一半深色,一半淺色,一般用於設計型網站。而其優點是視覺沖擊力強,缺點是將兩部分進行有機結合較難。
5、變化型
即上面幾種類型的結合與變化,比如本站在視覺上是很接近拐角型的,但所實現的功能的實質是那種上、左、右結構的綜合框架型。
6、左右框架類型
這是一種左右為分別兩頁的框架結構,一般布局是:片段含導航鏈接,最上面有時是一個小的標題或標志,而右面就是主要內容,最常使用是論壇網站,企業網站中的內頁有很多是採用這種布局方式的而這種類型的布局的特點是結構清晰明了。
7、POP型式
POP形式是指頁面布局像一張宣傳海報,以一張精美圖片作為頁面設計中心。一般常用於時尚類網站,優點是漂亮吸引人,缺點則是速度慢。
C. 常見的網站版面布局:T結構布局,口型布局,對稱對比布局,POP布局,國型布局,標題正文型布局,變化
T結構布局
上左右,左下,右下
D. 網頁效果圖的網頁布局分類
網頁布局大致可分為:骨骼型、滿版型、分割型、對稱型、傾斜型、焦點型、三角型、自由型。下面分別論述。詳例請參照圖片冊。
(1)骨骼型描述:網頁中骨骼型是一種規范、嚴謹的分割方式,也是最為普通和最為常見的一種形式,類似報刊的版式。常見的網頁骨骼有豎向通欄、雙欄、三欄、四欄和橫向通欄、雙欄、三欄和四欄等。通常以豎向分欄居多。這種版式給人以和諧、理性的美。
(2)滿版描述:滿版型頁面以圖像充滿整版。主要以圖像為訴求點,可將部分文字置於圖像之上。視覺傳達效果直觀而突出。給人以生動大方人感覺。滿版型版式被各種網站所採用,以學校、娛樂、體育、藝術、兒童以及個性化網頁,其中以韓國網站居多。
(3)分割型描述:分割型版式指把整個頁面分成上下或左右兩部分,分別安排圖片或文字內容。兩部分形成對比,使圖片部分感性而具表現力,文字部分則理性而具說服力。可以調整圖片和文字所佔的面積比例,來調節對比強弱。如果圖片比例過大,文字字體過於纖細,段落疏鬆,會造成視覺心理的不平衡,顯得生硬。
(4)中軸或對稱型描述:中軸型版式是將圖片和文字沿瀏覽器窗口的中間軸心位置作水平或垂直方向排列的一種設計方式。沿中軸水平方向排列的頁面可以給人穩定、平靜、含蓄的感覺,沿中軸垂直方向排列的頁面可以給人以舒暢的感覺。採用這種版式設計的網頁比較適合做網站的首頁。
(5)焦點型描述:焦點型的網頁版式通過對瀏覽者視線人誘導,可以使頁面產生強烈的視覺效果,如集聚感或膨脹感等。中心焦點型是將圖片或文字置於頁面的視覺中心。向心焦點型是視覺元素引導瀏覽者人視線向頁面中心聚攏。離心焦點型是視覺元素引導瀏覽者的視線向外輻射。焦點型版式為各類網站使用,以體育、娛樂、動畫網站為多。
(6)傾斜或曲線型描述:傾斜型頁面主題形象或多幅圖片、文字作傾斜編排,形成不穩定感或強烈的動感,引人注目。此類網站版式為各類網站所採用。曲線型網站圖片、文字在頁面上作曲線的分割或編排構成,產生韻律與節奏。此類網站版式為各類網站所採用。
(7)三角型描述:三角型版式是指見面各視覺元素呈三角形或多角形排列。正三角形最具穩定性,倒三角形則可產生動感。側三角形構成一種均衡版式,既安定又有動感。三角形版式為各類網站所採用。
(8)自由型描述:自由型版式人頁面具有活潑、輕快人氣氛。自由型版式也可應用於多種網站。如網路、娛樂、體育、個人、商務等。
以上介紹的版式基本類型並不是固定不變的,在實際設計中,設計師可以根據網頁所要傳達的主題內容來靈活地變化版式。在設計前要認真分析網站的定位,在設計中要靈活把握版式結構,才能更好地達到設計目的。
E. 網頁常見布局
在版式設計當中,主要有以下幾種排版形式: 重心型、中軸型、分割型(分上下分割和左右分割)、傾斜型、骨骼型、滿版型、曲線型、對稱型、三角形、四角型和自由型 。這幾種形式會比較常出現在網頁設計當中,所以我們一一來分析以下幾種排版方式。
1、重心型
重心型版式的網頁容易讓瀏覽者產生視覺焦點,界面效果強烈且突出。重心型又可以分以下三種形式。
A、直接以獨立而輪廓分明的形象占據版面中心。
ivanovoiskozh俄羅斯企業網站
B、向心:視覺元素向版面中心聚攏的運動。
bdsalads食物食品網站
C、離心:猶如將石子投入水中,產生一圈圈塵孫純向外擴散的弧線運動。
Twomari炸雞食品美食網站
2、中軸型
中軸型的網頁設計,是將圖形做水平或垂直方向的排列,文案以上下或左右配置。水平排列的版面會給人穩定、安靜、和平與含蓄之感。垂直排列的版面給人強烈的動感。垂直排列的這種排版方式比較常出現。
INSPOT激發你的品牌 韓國設計公司網站
3、分割型
分割型主要可以分成 上下分割和左派咐右分割 。相比較,左右分割型的網站會比較常見。
A、上下分割
上下分割,顧名思義,就是把整個版面分為上下兩個部分。可以在上半部或下半部配置圖片,另一部分則配置文案。配置有圖片的部分感性而有活力,而文案部分則理性而靜止。上下部分配置的圖片可以是一幅或多幅。
Sojournal時尚家居企業網站
B、左右分割
左右分割,就把整個版面分割為左右兩個部分,分別在左或右配置文案。當左右兩部分形成強弱對比時,則造成視覺心理的不平衡。這僅僅是視覺習慣上的問題,也自然不如上下分割的視覺流程自然。不過,倘若將分割線虛化處理,或用文字進行左右重復或穿插,左右圖文則變得自然和諧。
AVEDA美容美發時尚網站
4、傾斜型
傾斜型的網站比較少見,這樣的網站偏個性化一些,多在一些設計公司或是運動品牌的網站中出現。版面的主體形象做傾斜設計,造成版面強烈的動感和不穩定因素,這種設計比較引人注目。
2016CHUNGNAM韓國體育網站
5、骨骼型
骨骼型比較在傳統網站當中比較常見,它是一種規范的界面分割方法。常見的骨骼有豎向通欄、雙欄、三欄、四欄和橫向通欄、雙欄、三欄和四欄等。一般以豎向分欄為多。說到這個,就可以想到柵格系統,實際上這兩者是差不多意思的。
骨骼型的網站會給人以嚴謹、和諧、理性的美。每一個區塊經過相互混合後的版式,既理性、條理,又活潑而具彈性。凱茄
ZUI框架
6、滿版型
滿版型的網站近幾年也越來越多見,通常是版面以圖象充滿整版,主要以圖象為訴求,視覺傳達直觀而強烈。文字的配置壓置在上下、左右或中部的圖象上。滿版型給人以大方、舒展的感覺。
水族館度假村俱樂部
7、曲線型
圖片或文字在版面結構上作曲線的編排構成,產生節奏和韻律。
Transfer Window
8、對稱型
對稱的版式給人穩定、莊重理性的感覺。對稱有絕對對稱和相對對稱。一般多採用相對對稱。以避免過於嚴謹。對稱一般以左右對稱居多。
DeLaneau (萬花筒效果,心臟受不住的勿點),這個網站是絕對對稱,比較少見,這樣的網站看久了會比較單調。
9、三角形
在圓形、四方形、三角形等基本形態中,正三角形(金字塔形)是最具安全穩定因素的形態,而圓形和倒三角形則給人以動感和不穩定感。
Asahi Refining黃金產品網站
10、四角型
四角型指在版面四角以及連接四角的對角線結構上編排的圖形。這種結構的版面,給人以嚴謹,規范的感覺。
NOROO PAINT企業網站
11、自由型
自由行結構是無規律的、隨意的編排構成,有活潑、輕快之感。
Happymaker in 高野山
以上簡單給大家分析講解了常見的幾種版式形式,每種版式設計並非以一種表現形態出現,比如四角型的網站可能會結合對稱性的出現或是中軸型,所以大家在分析一個網站的時候不要以單一的一種視角去分析。因為一個網站的設計可能同時存在好幾種版式形式。
不同的排版可以給人不同的視覺感受,好的排版會給整個網站「錦上添花」。版式也沒有絕對的好壞,只有適合和不適合。希望今天給大家分享的內容可以幫助到大家。