精準傳達 • 有效溝通

從品牌網站(zhàn)建設到網絡營銷策劃,從策略到執行的一(yī)站(zhàn)式服務(wù)

網站(zhàn)設計的布局理(lǐ)念

來(lái)源: 江天開發團隊 | 2020-07-14

        網頁可以說(shuō)是網站(zhàn)構成的基本元素。當我們輕點鼠标,在網海中遨遊,一(yī)副副精彩的網頁會呈現(xiàn)在我們面前 ,那麽,網頁的精彩與否的因素是什(shén)麽呢(ne)?色彩的搭配、文字的變化(huà)、圖片的處理(lǐ)等,這(zhè)些(xiē)當然是不可忽略的因素,除了(le)這(zhè)些(xiē),還有一(yī)個(gè)非常重要的因素一(yī)網頁的布局。下(xià)面,我們就(jiù)有關(guān)網頁布局談論一(yī)下(xià)。


網頁布局類型


        網頁布局大緻可分(fēn)為(wèi)“國”字型、拐角型、标題正文型、左右框架型、上(shàng)下(xià)框架型、 綜合框架型、封面型、Flash型、 變化(huà)型,下(xià)面分(fēn)别論述。


1、“國”型:


        也(yě)可以稱為(wèi)“同” 字型,是一(yī)些(xiē)大型網站(zhàn)所喜歡的類型 ,即最上(shàng)面是網站(zhàn)的标題以及橫幅廣告條,接下(xià)來(lái)就(jiù)是網站(zhàn)的主要内容,左右分(fēn)列-些(xiē)兩小條内容, 中間(jiān)是主要部分(fēn),與左右一(yī)起羅列到底,最下(xià)面是網站(zhàn)的一(yī)些(xiē)基本信息、聯系方式、版權聲明等。這(zhè)種結構是我們在網上(shàng)見到的差不多最多的一(yī)種結構類型。


2、拐角型:


        這(zhè)種結構與上(shàng)一(yī)種其實隻是形式上(shàng)的區别,其實是很相近的,上(shàng)面是标題及廣告橫幅,接下(xià)來(lái)的左側是一(yī)窄列鏈接等 , 右列是很寬的正文,下(xià)面也(yě)是一(yī)些(xiē)網站(zhàn)的輔助信息。 在這(zhè)種類型中, 一(yī)種很常見的類型是最上(shàng)面是标題及廣告,左側是導航鏈接。


3、标題正文型;


        這(zhè)種類型即最上(shàng)面是标題或類似的一(yī)些(xiē)東西(xī),下(xià)面是文,比如(rú)一(yī)些(xiē)紋章頁面或注冊頁面等就(jiù)是這(zhè)種類。


4、左右框架型:


        這(zhè)是一(yī)種左右為(wèi)分(fēn)别兩頁的框架結構,一(yī)般左面是 導航鏈接,有時(shí)最上(shàng)面會有一(yī)個(gè)小的标題或标緻 ,右面是正文。我們見到的大部分(fēn)的大型論壇都是這(zhè)種結構的,有一(yī)些(xiē)企業網站(zhàn)也(yě)喜歡采用。 這(zhè)種類型結構非常清晰,一(yī)目了(le)然。


5、上(shàng)下(xià)框架型:


        與上(shàng)面類似,區别僅僅在于是一(yī)種上(shàng)下(xià)分(fēn)為(wèi)兩頁的框架。


6、綜合框架型:


      上(shàng)頁兩種結構的結合,相對複雜的一(yī)種框架結構, 較為(wèi)常見的是類似于“拐角型”結構的,隻是采用了(le)框架結構。


7、封面型:


        這(zhè)種類型基本上(shàng)是出現(xiàn)在一(yī)些(xiē)網站(zhàn)的頁 ,大部分(fēn)為(wèi)一(yī)些(xiē)精美的平面設計結合一(yī) 些(xiē)小的動畫 ,放(fàng)幾個(gè)簡單的鏈接或者僅是一(yī)個(gè)“進入” 的鏈接甚至直接在首頁的圖片上(shàng)做鏈接而沒有任何提示。這(zhè)種類型大部分(fēn)出現(xiàn)在企業網站(zhàn)和個(gè)人(rén)頓,如(rú)果說(shuō)處理(lǐ)的好(hǎo)(hǎo), 會給人(rén)帶來(lái)賞心悅目的感覺。


8、Flash型 :


        實這(zhè)與封面型結構是類似的,隻是這(zhè)種類型采用了(le)目前非常遊戲行的Flash ,與封面型不同的是,由于Flash強大的功能(néng),頁面所表達的信息更豐富, 其視(shì)覺效果及聽(tīng)覺效果如(rú)果處理(lǐ)得當, 絕不差于傳統的多媒體(tǐ)。


9、變化(huà)型:


        即上(shàng)面幾種類型的結合與變化(huà),比如(rú)本站(zhàn)在視(shì)覺上(shàng)是很接近拐角型的,但(dàn)所實現(xiàn)的功能(néng)的實質是那種上(shàng)、左、右結構的綜合框架型。


關(guān)于第一(yī)屏


        所謂第一(yī),是指我們到達一(yī)個(gè)網站(zhàn)在不拖動滾動條時(shí)能(néng)夠看到的部分(fēn)。 那麽第一(yī)屏有多 “大” 呢(ne)?其這(zhè)是未知的。一(yī)般來(lái)講 ,在800600的屏蒂顯示模式(這(zhè)也(yě)是最常用的)下(xià),在在安裝後默認的狀态(即工具欄地址欄等沒有改變)下(xià), IE窗口内能(néng)看到的部分(fēn)為(wèi)778px*435px , 一(yī)般來(lái)講,我們以這(zhè)個(gè)大小為(wèi)标準就(jiù)行了(le), 畢境,在無法适合所有人(rén)的情況下(xià),我們隻能(néng)為(wèi)大多數考慮了(le)。


        說(shuō)了(le)那麽多,無非是一(yī)個(gè)标準的問題 ,其實接下(xià)來(lái)不用我說(shuō)大家也(yě)能(néng)想到,第一(yī) 屏當然要放(fàng)最主要的内容 ,關(guān)鍵要知道的是,我們要對第一(yī)屏能(néng)顯示的面積要有 個(gè)估計,而不要僅僅以自己的機器(qì)為(wèi)準。其實網頁制作(zuò)的一(yī)個(gè)很麻煩的地方就(jiù)是浏覽者的機器(qì)是未知的。


有關(guān)導航欄的位置


        導航欄能(néng)讓我們在浏覽時(shí)容易的到達不同的頁面,是網頁元素非常重要的部分(fēn),所以導航欄一(yī)定要清晰、 醒目,一(yī)般來(lái)講, 導航欄要在 “第一(yī)屏” 能(néng)顯示出來(lái),但(dàn)是有時(shí)第一(yī)屏可能(néng)會小于 上(shàng)面所說(shuō)的435px ,積于這(zhè)點考慮,那種橫向放(fàng)置的導航欄要優于縱向的導航欄考慮,原因很簡單:如(rú)果浏覽者的第一(yī)屏很矮 ,橫向的仍能(néng)全部看到,而縱向的就(jiù)很難說(shuō)了(le),因為(wèi)窗口的寬度-般是不會受浏覽器(qì) 設置影響的,而縱向的則不确定性要大的多。


什(shén)麽樣的布局是最好(hǎo)(hǎo)的


        這(zhè)是初學者可能(néng)會問的問題。其實這(zhè)要具體(tǐ)情況具體(tǐ)分(fēn)析的:比如(rú)如(rú)果内容非常多,就(jiù)要考慮用 “國字型”或拐角型;而如(rú)果内容不算(suàn)太多而-些(xiē)說(shuō)明性的東西(xī)比較多,則可以考慮标題正文型;那幾種框架結構的一(yī)個(gè)共同特點就(jiù)是浏覽方便,速度快(kuài),但(dàn)結構變化(huà)不靈活;而如(rú)果是一(yī)個(gè)企業網站(zhàn)想展示一(yī)下(xià)企業形象或個(gè)人(rén)主 頁想展示個(gè)人(rén)風(fēng)采,封面性是首選; Flash型更靈活一(yī)些(xiē),好(hǎo)(hǎo)的Flash大大豐富了(le)網頁,但(dàn)是它不能(néng)表達過多的文字信息。還沒有提到的就(jiù)是變化(huà)型了(le), 我隻是想把這(zhè)個(gè)留給讀者了(le), 因為(wèi),隻有不斷的變化(huà)才會提高,才會不斷豐富我們的網頁

上(shàng)一(yī)條———————

企業網站(zhàn)設計理(lǐ)念有哪些(xiē)?

下(xià)一(yī)條———————

2024-03-20 沒有了(le)
九年 建站(zhàn)經驗

多一(yī)次溝通,總有益處

聯系江天,免費獲得項目報(bào)價

咨詢相關(guān)問題或預約面談,可以通過以下(xià)方式與我們聯系

業務(wù)熱線:028-8324-9878

大客戶專線  成都總公司:19141219589