<output id="jbxdv"></output>

      1. 網頁版式設計基礎(一)

        • 2020-03-31 14:22:23
        • 閱讀次數:
        • 作者:盈嵐科技小編
        • 來源:http://www.freenetsites.com

        網頁版面不同于傳統意義上的報紙、雜志、平面廣告等具有固定的版面尺寸。首先,在水平方向上,由于大多數人的桌面顯示器分辨率設置為800×600像素、1024×768像素或者1366×768像素等,在網頁設計時應以1024×7680像素為標準,除去滾動條占用的20像素,安全寬度應控制在1000像素內,才能瀏覽到全部頁面內容。

        而在分辨率13664×768像素的設置下,頁面內容只占版面空間的一部分(居左或居中),其余空間為背景色。其次,在垂直方向上,由于頁面是可以滾動的,版面的長度不做限制。因而這樣一個動態的、變化的版面空間,給版式設計增加了難度。為避免版面空間的不固定給網頁設計帶來的負面影響,取得較好的版面視覺效果,很多網頁在設計時采取了相應的措施。   

        ?將背景作適當設計,以適應不同分辨率的版面效果。   

        ?應用自動適合寬度的技術,當版面寬度大于800像素時,頁面內容會自動伸縮,充滿整個版面寬度,這一技術對版式設計提出了更高的要求,以適應不同的版面寬度。

        在網頁界面中,各種具體、抽象的形象按其形態、大小的不同均可以歸納為相應的點、線、面,因而,點、線、面、空白的關系從本質上反映了客觀世界普遍存在的對立統一的關系。版式中點、線、面、空白的成分兼而有之、相互影響,往往能使觀眾在視覺上得到滿足。根據點、線、面、空白各自不同的感覺屬性,將它們靈活處理,以產生各種生動的頁面版式效果。

        網頁版式構成原理

        自然界的萬事萬物,從宏觀的宇宙到微觀的原子、分子,到處都存在著內在的規律性。網頁版式設計和其他視覺形式一樣,也遵循這些規律。具有秩序感的版式設計,善于將各組成部分系統化、整體化,處理好相互關系,在整體秩序中體現出美感。版式設計的造型元素相互依賴、相互組織、相互配合,體現出構成方式的規律性,具體包括比例、對稱、均衡、反復、漸變、節奏、韻律、統一、變化等。

        比例

        比例是部分與部分之間、部分與整體之間的比率關系。整體形式中一切有數量的條件,如長短、大小、寬窄、明暗、多少等,在搭配適當時均能產生優美的比例。比例具有強烈的數理概念,設計中常用的比例均可用數學或幾何學的方法求出。例如,黃金分割率把線段分成兩段,發現1:1.618的數比關系構成了美的標準尺度。

        網頁設計中,比例表現有多種形式。例如,頁面的長寬比,實體內容與虛空間(空白的面積)比,頁面分割比,圖文關系比,以及各種造型元素內部的比例等。確立良好的比例關系,能使頁面各部分之間易于產生相互聯系,使版式設計和諧、勻稱、明朗。

        【示例1】在如圖所示網頁頁面中,上下的灰藍色塊寬度遠大于高度,讓人感覺左右視野開闊,左下角的導航照片和右邊的灰底色均采用了接近黃金矩形的比例,視覺上極為舒適。

        1.jpg

        【示例2】如圖所示小圖標處于頁面寬度的黃金分割點位置,如同頁面的支點,此種比例的分割讓頁面穩定而不失靈活。

        73bb3c06eb0202407871a2bc17f068bd.jpg

        重復與漸變

        重復是相同或相似的形態連續而有規律的反復出現。重復的特點是以單純的手法求得整體形象的秩序和統一,具有節奏美,使人產生清晰、連續、平和、安定、無限之感。重復可分為單純重復和變化重復兩種形式。單純重復是單一基本形的反復再現,其形狀、大小、方向都是相同的,這種重復體現了一種標準化、追求簡約的特征。在網頁界面中,單純重復多用于具有同一基本形的圖案、底紋中。

        【示例1】在如圖所示的網頁中主體圖片中間有一排重復排列的3個長方形圖形,圖形中的圖案各異,這種變化是為避免重復的單調,或者在重復中有變化,這種重復既整齊又具多樣性,因而在網頁版式中經常被用作通向其他頁面的超鏈接。

        3.jpg

        重復構圖漸變是形態有規律地連續變化,它通過類似的形態獲得了形式的統一。漸變能讓相互對立的兩極形成過渡,從而達到統一,如色彩的黑與白之間,形態的大與小之間等。漸變體現了形態的發展變化過程,讓人感覺含蓄、柔和,具有強烈的時間和空間特征。在網站建設中,各種造型元素都可以采用漸變的方法進行處理。

        【示例2】如圖所示頁面通過明暗的漸變關系,襯托一個變幻而又充滿神秘的魔界,給人一種緊張而又神往的視覺效果。

        4.jpg

        當前文章標題:網頁版式設計基礎(一)

        當前URL:http://www.freenetsites.com/news/wzzz/3186.html

        上一篇:網頁設計中的紅色頁面配色(二)

        下一篇:網頁版式構成原理(一)

        網站建設、網絡營銷咨詢專線:181-8386-5875(點擊可一鍵撥號)
        国产成人亚洲综合无码
        <output id="jbxdv"></output>