建站常識(shí)
網(wǎng)頁界面設(shè)計(jì)教程六:版式的構(gòu)成與設(shè)計(jì)
2007-01-15 16:17:00
黃金之比所以有如此神圣和不可思議的力量,乃是因?yàn)辄S金比是含有無理數(shù) 的數(shù)字,用公式表示為Φ=(1+)/2約=1.618。黃金矩形去掉短邊為邊長的正方形時(shí),剩下的矩形仍為黃金矩形。
以正方形的對角線為長邊,所得矩形為矩形,再以矩形的對角線為長邊,所得矩形為矩形,以此類推,可以得到任意自然數(shù)的矩形。 矩形對折成半時(shí),面積雖然只剩一半,但形狀不變,仍是矩形。
網(wǎng)頁界面的版式設(shè)計(jì)中,其比例關(guān)系一般體現(xiàn)在:頁面所限定空間的長寬比,實(shí)體內(nèi)容與虛空間(空白)的面積比,頁面被分割的比例,圖文的關(guān)系比以及各造型元素內(nèi)部的比例等形式上的數(shù)量關(guān)系。
對稱的版式設(shè)計(jì)穩(wěn)定、莊嚴(yán)、整齊、秩序、安寧、沉靜,如同中國古代宮殿一樣莊重、嚴(yán)肅,體現(xiàn)了一種古典主義的風(fēng)格。為避免對稱產(chǎn)生的單調(diào)和呆板,要在對稱中略帶變化。
視覺藝術(shù)中的節(jié)奏和韻律來自音樂的概念,節(jié)奏較多地強(qiáng)調(diào)“節(jié)拍”,韻律較多地強(qiáng)調(diào)“變化”,如果說韻律感不夠,是指缺少變化,過于呆板;如果說節(jié)奏感不強(qiáng),是指變化缺乏條理規(guī)則。
對比是指因多種元素相異的特點(diǎn)相比較而更加鮮明強(qiáng)烈的緊張感。對比有形的對比(大小、方圓、長短、曲直、寬窄),色的對比(色相、明度、純度、冷暖),質(zhì)的對比(剛?cè)?、粗?xì)、強(qiáng)弱、干濕、輕重、軟硬、虛實(shí)),勢的對比(疾緩、疏密、動(dòng)靜、抑揚(yáng)、進(jìn)退)等。對比關(guān)系越清晰,視覺效果就越強(qiáng)烈,在一個(gè)頁面中,通常是多種對比關(guān)系同時(shí)并存,以產(chǎn)生多姿多彩的表現(xiàn)效果。
人眼的視線沿水平方向運(yùn)動(dòng)比沿垂直方向運(yùn)動(dòng)快而且不易疲勞。視線的變化習(xí)慣于從左到右,從上到下和順時(shí)針方向運(yùn)動(dòng)。
調(diào)查顯示,視區(qū)內(nèi)上部比下部注目程度高,左側(cè)比右側(cè)更引人注意。
欲使網(wǎng)頁在傳遞視覺信息時(shí)順暢高效,頁面須具備清晰的條理性和組織性,產(chǎn)生一定的主從關(guān)系。常采取的方式有:
?。?)加強(qiáng)主從對象的大小對比。
?。?)加大主體形象周圍的空白。
(3)加強(qiáng)主從對象之間的色彩對比。
(4)將主體形象在頁面反復(fù)出現(xiàn),強(qiáng)化與視線的接觸頻率,這種強(qiáng)化方式尤其適合于以產(chǎn)品為主體形象的網(wǎng)頁界面。
?。?)加強(qiáng)主從對象在形態(tài)上“勢”的對比。一般來說,網(wǎng)頁的版面中水平或垂直的形態(tài)居多,如果主體形象運(yùn)用適當(dāng)?shù)男本€和曲線,就會(huì)從水平、垂直線構(gòu)成的環(huán)境中突顯出來。
通過視覺流程,設(shè)計(jì)師運(yùn)用視覺移動(dòng)規(guī)律,將多種視覺信息進(jìn)行有序組織,誘導(dǎo)瀏者的視線依設(shè)計(jì)師的意圖進(jìn)行流動(dòng),從而使瀏覽者清晰、流暢、快捷地接受最佳信息。視覺流程的幾種表現(xiàn)方式:
?。?)單向視覺流程:橫向,豎向,斜向。
?。?)曲線視覺流程。
?。?)導(dǎo)向視覺流程:借助誘導(dǎo)因素來實(shí)現(xiàn)。
①線形導(dǎo)向:以線、文字等線形元素來引導(dǎo)觀者的視線。
②形象導(dǎo)向:以圖片中人或物的朝向來引導(dǎo)觀者的視線,如人物的目光方向,一個(gè)座椅的朝向等。
③指示導(dǎo)向:通過指示性的箭頭、手指或具有透視感的線條來引導(dǎo)視線。
?。?)重心視覺流程:視覺會(huì)沿著形象方向與力度的伸展來變換、運(yùn)動(dòng),如表現(xiàn)向心力或重力的視線運(yùn)動(dòng)。
?。?)反復(fù)視覺流程:其運(yùn)動(dòng)雖不如單向、曲線、重心視覺流程運(yùn)動(dòng)感強(qiáng)烈,但更富于節(jié)奏和秩序美。
?。?)散點(diǎn)視覺流程:沒有固定的視覺流動(dòng)線,強(qiáng)調(diào)一種感性、自由性、隨意性、偶然性。
對于欄目設(shè)置比較復(fù)雜的網(wǎng)站,如果顯示所有與該頁相關(guān)的導(dǎo)航,頁面勢必變得相當(dāng)龐大,影響了版面的整體布局。最好的辦法是將此頁面做成彈出窗口,不影響原有頁面的導(dǎo)航信息,同時(shí)只設(shè)置與該頁關(guān)系最近的導(dǎo)航鏈接和首頁鏈接。
在視覺習(xí)慣上,頁面的垂直均勻分割,當(dāng)左右兩部分形成強(qiáng)烈對比時(shí),會(huì)造成視覺心理的不平衡。這時(shí),可將分割線作部分或全部的弱化處理,或在分割處加入其他元素,使左右部分的過渡自然而和諧。
近期更新
- [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ì)都有哪些新的趨勢?
延伸閱讀
- [2007-01-15 16:15:00] 網(wǎng)頁界面設(shè)計(jì)教程四:色彩設(shè)計(jì)
- [2019-04-08 15:12:39] 視覺感知在互動(dòng)動(dòng)畫的過程中起到關(guān)鍵作用
- [2007-01-15 16:12:00] 網(wǎng)頁界面設(shè)計(jì)教程二:與視覺傳達(dá)的設(shè)計(jì)
- [2010-09-11 08:57:00] 淺析網(wǎng)頁界面設(shè)計(jì)-首頁
- [2007-01-15 16:16:00] 網(wǎng)頁界面設(shè)計(jì)教程五:文字的編排設(shè)計(jì)
- [2007-01-15 16:11:00] 網(wǎng)頁界面設(shè)計(jì)教程一:基礎(chǔ)理論
- [2007-01-15 16:18:00] 網(wǎng)頁界面設(shè)計(jì)教程七:動(dòng)畫設(shè)計(jì)
- [2007-01-15 16:13:00] 網(wǎng)頁界面設(shè)計(jì)教程三:圖形圖象設(shè)計(jì)
- [2010-03-14 21:27:00] 深色調(diào)網(wǎng)頁界面設(shè)計(jì)注意事項(xiàng)
解決方案
輪胎行業(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)鍵字
GOOGLE 網(wǎng)站視覺 青島高端網(wǎng)站建設(shè)公司哪家好 色彩心理學(xué) 青島IT資訊 營銷策略 網(wǎng)站規(guī)劃 微官網(wǎng)帶來的好處 如何做網(wǎng)站優(yōu)化 網(wǎng)站設(shè)計(jì) 營銷型網(wǎng)站建設(shè) H5定制設(shè)計(jì) robots 青島網(wǎng)頁設(shè)計(jì) 微信開發(fā) 網(wǎng)站交互設(shè)計(jì) 力圖 企業(yè)建站 手機(jī)網(wǎng)站 HTML5 手機(jī)端的網(wǎng)站 網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè) 蘋果系統(tǒng) 膠南網(wǎng)站建設(shè)公司 SEO優(yōu)化 交互設(shè)計(jì) 青島flash網(wǎng)站 php程序 圖形網(wǎng)格 青島網(wǎng)站建設(shè)公司哪家好