- 相關(guān)推薦
計算機網(wǎng)頁(yè)設計布局
計算機網(wǎng)頁(yè)設計布局1
【摘要】網(wǎng)頁(yè)設計是一種直觀(guān)的視覺(jué)語(yǔ)言，需要對其進(jìn)行布局與排版。雖然網(wǎng)頁(yè)設計與平面設計之間存在一定的區別，但是其兩者依然存在一定的相似之處，網(wǎng)頁(yè)設計應該充分借鑒利用平面設計的原則與方法。網(wǎng)頁(yè)設計中的布局與排版需要通過(guò)文字、圖形的組合來(lái)讓網(wǎng)頁(yè)獲得良好的視覺(jué)效果�，F文章主要針對計算機網(wǎng)頁(yè)設計中的布局與排版進(jìn)行研究。
【關(guān)鍵詞】網(wǎng)頁(yè)設計；布局；排版；文字；設計論文
網(wǎng)站是企業(yè)或政府向用戶(hù)傳遞信息，提供服務(wù)的一種重要方式，是企業(yè)開(kāi)展電子商務(wù)的重要平臺，是政府面向民眾的重要窗口。網(wǎng)站是直接反應企業(yè)形象、政府形象的平臺，因此網(wǎng)頁(yè)設計質(zhì)量的高低將會(huì )直接影響到企業(yè)或政府的形象。在網(wǎng)頁(yè)設計中，布局與排版是十分關(guān)鍵的內容之一，其會(huì )直接影響到瀏覽者對網(wǎng)頁(yè)的第一印象與體驗感。因此，對于網(wǎng)頁(yè)設計的布局與排版進(jìn)行研究具有十分重大的實(shí)際意義。
1．計算機網(wǎng)頁(yè)設計布局與排版原則
1．1布局與排版設計原則為了讓瀏覽者在瀏覽網(wǎng)頁(yè)過(guò)程中擁有更好的瀏覽體驗，在進(jìn)行布局版本過(guò)程中要始終秉持以下原則:第一，整體布局，和諧統一。在網(wǎng)頁(yè)設計布局排版過(guò)程中整體布局占據著(zhù)十分重要的作用。集成是網(wǎng)頁(yè)設計排版布局中常用的一個(gè)對稱(chēng)形式，通過(guò)空間的文本與圖形建立其平衡的狀態(tài)，從而產(chǎn)生和諧的美感［1］。但是單純的平衡有時(shí)候會(huì )導致頁(yè)面出現過(guò)于死板、僵化的情況。因此，可以在對稱(chēng)平衡設計中融合一些活潑、有趣的詞匯、圖形，但是要注意需要與頁(yè)面和諧統一。第二，主次分明，中心突出。在網(wǎng)頁(yè)頁(yè)面聚居中需要對視覺(jué)中心進(jìn)行充分的考慮，該視覺(jué)中西你通常位于頁(yè)面的關(guān)鍵區域—中部與上部的位置。因此，最有價(jià)值的信息應該擺放在這一位置。網(wǎng)頁(yè)布局排版主次分明的最終目的是讓網(wǎng)頁(yè)可以形成清晰有序，能夠突出重點(diǎn)的視覺(jué)效果。第三，疏密有度，錯落有致。在網(wǎng)頁(yè)布局排版中，一定要做好疏密有致，預留出一定的空白，靈活的使用字間距與行間距，制造出字間距與行間距之間的距離。對于形態(tài)與色彩的搭配運用更要合理［2］。例如，黑白搭配、圓形與方形搭配，以便獲得更佳的視覺(jué)效果。第四，圖文并茂，生動(dòng)有趣。圖形美觀(guān)與文字的簡(jiǎn)潔之間需要合理的搭配。如果圖形在版面設計中占據的比例更大，則文字會(huì )相應減少，從而大大減少頁(yè)面的信息量;而如果文字太多則會(huì )使得網(wǎng)頁(yè)版面變得死板。因此，網(wǎng)頁(yè)布局與排版應該做到圖文并茂、合理搭配，從而給網(wǎng)頁(yè)帶來(lái)更加豐富的內容，讓網(wǎng)頁(yè)變得更加有趣。1．2布局與排版設計方法網(wǎng)頁(yè)設計布局與排版方法主要包括以以下幾點(diǎn):第一，簡(jiǎn)潔明了。布局排版最為重要的原則就是一名了然，讓網(wǎng)頁(yè)瀏覽者可以更加順暢的瀏覽信息。第二，主色調鮮明。網(wǎng)頁(yè)設計給人的'第一印象就是由主色調決定的。主色調在網(wǎng)頁(yè)布局與排版中是十分重要的，主色調過(guò)多會(huì )給瀏覽者帶來(lái)一種厭煩的感受，不利于瀏覽者長(cháng)時(shí)間瀏覽網(wǎng)頁(yè)。因此，網(wǎng)頁(yè)版本的主色調要進(jìn)行合理的控制，其中主色彩不能超過(guò)五種，并且要以一種主色調為主，凸顯以主導地位，另外幾種顏色作為烘托與點(diǎn)綴［3］。一般來(lái)說(shuō)，網(wǎng)頁(yè)設計的主色調包括黃、藍、灰、黑和白。第三，字體設置。在網(wǎng)頁(yè)設計中字體的設置也應該始終秉持著(zhù)簡(jiǎn)易的原則，通常來(lái)說(shuō)不應該超過(guò)三種字體，并且字體在版面中不宜過(guò)大，從而讓更多文字給網(wǎng)頁(yè)瀏覽者帶來(lái)更多有價(jià)值的信息。值得注意的是，要避免閃爍的文字在網(wǎng)頁(yè)設計布局中出現，其會(huì )給瀏覽者帶來(lái)一種厭煩的感覺(jué)。同時(shí)，在網(wǎng)頁(yè)標題欄中字體應該相對于正文來(lái)說(shuō)要更大，顏色也需要進(jìn)行區分。
2．常見(jiàn)布局與排版
2．1T字型T型結構是頂部的頁(yè)面布局為網(wǎng)站的標語(yǔ)和橫幅，下列左側為主菜單，右側為內容顯示。由于菜單的背景布置顏色更深，因此整體效果視覺(jué)類(lèi)似于英文字母“T”，因此被成為T(mén)字型布局。T字型布局是網(wǎng)頁(yè)設計中十分常見(jiàn)的設計布局，其優(yōu)勢在于頁(yè)面結構清晰、明確，容易正確把握主次關(guān)系;缺點(diǎn)在于較為沉悶，缺乏靈活性，如果無(wú)法準確把握，不注重細節與色彩的配合，十分容易出現無(wú)趣、枯燥的現象［4］。2．2口字型口字型布局給人一個(gè)感覺(jué)就是在頁(yè)面中間最為顯眼的主題內容，類(lèi)似于一個(gè)口字型，左側通常包括注冊信息、內容導航、搜索引擎，右側通常包括動(dòng)態(tài)消息、熱點(diǎn)資訊和友情鏈接。上下兩部分為橫條廣告與菜單�？谧中筒季值膬�(yōu)勢在于可以充分利用版面，囊括較大的信息量，缺點(diǎn)在于頁(yè)面較為擁擠，過(guò)于死板［5］�？谧中筒季执蠖啾粦糜趪庹军c(diǎn)中，國內使用頻率較低。2．3POP布局POP布局是將一張合適的照片作為頁(yè)面設計的中心，并且在合適的位置擺放主菜單。POP布局并不是上下或左右對稱(chēng)的，但是在設計過(guò)程中依然要兼顧平衡與節奏。POP布局可以實(shí)現動(dòng)態(tài)效果，其優(yōu)勢在于美觀(guān)，缺陷在于運行速度較為緩慢。2．4同字型同字型的網(wǎng)頁(yè)布局一般來(lái)說(shuō)內容量都較大，網(wǎng)頁(yè)上方為標題欄，其中內容可以是網(wǎng)站主題或橫幅廣告，在標題欄下可能存在小標題。在頁(yè)面左右兩側都布置有相應的內容。通常來(lái)說(shuō)，可能是網(wǎng)站的最新動(dòng)態(tài)、網(wǎng)站的維護管理人員以及部分廣告。同字型網(wǎng)頁(yè)的主要內容是分布在中央位置，從上至下，根據內容的重點(diǎn)、類(lèi)型來(lái)進(jìn)行區分。網(wǎng)站下部分通常為空白，即使有內容也是一些十分常規的內容，包括網(wǎng)站制造方、網(wǎng)站基礎信息等。
3結語(yǔ)
計算機網(wǎng)頁(yè)設計布局與排版是一門(mén)藝術(shù)，針對網(wǎng)頁(yè)不同的內容可以采用不同的布局排版形式。然而不論采用何種的布局排版形式都需要始終秉持著(zhù)布局排版的原則，以設計出美觀(guān)、簡(jiǎn)潔、便捷、人性化的網(wǎng)頁(yè)，讓瀏覽者可以舒適的瀏覽網(wǎng)頁(yè)。
參考文獻:
�。�1］李娟．淺述網(wǎng)頁(yè)設計中的頁(yè)面布局技術(shù)［J］．考試周刊，20xx(27):116～117．
�。�2］董磊．網(wǎng)頁(yè)設計中視覺(jué)傳達的整合設計［J］．明日風(fēng)尚，20xx(05):123，106．
�。�3］許煒熔．讓“美”走進(jìn)學(xué)生網(wǎng)頁(yè)作品———談在網(wǎng)頁(yè)設計課堂中提高學(xué)生綜合素質(zhì)的幾點(diǎn)建議［J］．課程教育研究，20xx(26):248～249．
�。�4］梁日有．網(wǎng)頁(yè)設計中藝術(shù)創(chuàng )新的研究與實(shí)現探討［J］．學(xué)子(理論版)，20xx(03):12～13．
�。�5］尹涓，崔曉曦．淺談網(wǎng)頁(yè)視覺(jué)設計的應用和技巧［J］．電腦知識與技術(shù)，20xx(15):204～205．
計算機網(wǎng)頁(yè)設計布局2
作為網(wǎng)站構成的基本要素,網(wǎng)頁(yè)布局在很大程度上影響著(zhù)網(wǎng)頁(yè)的瀏覽量,當然也會(huì )影響整個(gè)網(wǎng)站的運營(yíng)情況。隨著(zhù)計算機以及互聯(lián)網(wǎng)在人們生活中的普及,網(wǎng)頁(yè)布局也更加關(guān)注色彩、圖像、圖標以及文字等方面的搭配問(wèn)題,充分利用網(wǎng)頁(yè)空間,科學(xué)地進(jìn)行布局,才能夠制作出更加精美的網(wǎng)頁(yè),用戶(hù)在瀏覽網(wǎng)頁(yè)的時(shí)候,才會(huì )擁有更好的體驗。
1、網(wǎng)頁(yè)設計中布局的相關(guān)概念
1.1頁(yè)面尺寸
頁(yè)面尺寸的大小主要由顯示器的分辨率和屏幕的大小決定,顯示器范圍的局限性對于網(wǎng)頁(yè)設計來(lái)說(shuō)是頁(yè)面最大的阻礙。不同品牌的顯示器,再制造過(guò)程中所使用的技術(shù)都不一樣,不同的研發(fā)團隊對于不同的顯示器設計都存在差異,也正是這些在顯示器設計方面的局限性,使得人們只能根據現有的分辨率不是很好的顯示器來(lái)進(jìn)行網(wǎng)頁(yè)設計,這也造成了頁(yè)面尺寸大打折扣的不良局面,所以,一臺具有超高分辨率的顯示器是設計出一個(gè)完美頁(yè)面的前提。
1.2整體造型
對實(shí)體物品進(jìn)行構思,然后運用電腦技術(shù)在屏幕上搭建出簡(jiǎn)單的物體形象,這是將物體從實(shí)物轉化成圖像的一種形式。在設計圖像的過(guò)程中,人們可以根據要求或者自己的想法,將圖形進(jìn)行變形,從棱角分明的方形變成通體圓潤的圓形、橢圓形,或者將沒(méi)有層次的單一造型轉變成圖形同文字相結合的形式,用不同的層次感進(jìn)行設計。
1.3頁(yè)頭
所謂頁(yè)頭,就是設計軟件中的頁(yè)眉選項,它的作用有很多,但主要是被用作定義頁(yè)面的主題,人們可以很直觀(guān)地從頁(yè)眉中找到自己想要的信息,也可以通過(guò)頁(yè)眉來(lái)理解作者想要表達的意思。在一個(gè)頁(yè)眉中可以顯示出多個(gè)人名,這也大大方便了瀏覽者尋找關(guān)鍵信息,減少了在頁(yè)面上盲目尋找的麻煩。
1.4文本
在信息日益增多的現代化社會(huì ),為了方便不同人士不同行業(yè)的辦公以及工作任務(wù)的分配,文本被眾多人所應用,從中國人傳統的教育理念著(zhù)手,用文本來(lái)代替沉重的書(shū)籍,符合了人們隨走隨記得特點(diǎn),方便人們在不同環(huán)境進(jìn)行閱讀。文本由于是文字在書(shū)籍方面的代替工具,因為它被設計出來(lái)后所需要的存儲空間非常小等特點(diǎn),越來(lái)越受到不同年齡人群的喜愛(ài),用很少的空間就可以存儲大量想要瀏覽的信息,方便快捷。文本的設計起初存放位置受到限制,但隨著(zhù)電腦技術(shù)的發(fā)展,文本已經(jīng)可以隨意地放在頁(yè)面的任何位置。
1.5頁(yè)腳
首先有了放置站點(diǎn)主題的頁(yè)眉,也就衍生出了可以修改和存儲文章作者或者不同公司文本信息的頁(yè)腳位置。頁(yè)眉和頁(yè)腳都是一個(gè)好的設計中不可缺少的部分。
1.6圖片
簡(jiǎn)單而單純的文字已經(jīng)很難讓現在的年輕人提起興趣,為了方便和吸引現代人去閱讀,各個(gè)大型的網(wǎng)頁(yè)中都會(huì )配上符合新聞信息的圖片,不同類(lèi)型的圖片給瀏覽者以視覺(jué)上的沖擊,也可以借助圖片更好地表達文字中的含義,增強瀏覽者在讀取時(shí)的美感。
1.7多媒體
時(shí)間的推移促使了各種新型媒體的出現,人們通過(guò)聲音圖像等手段將信息更真實(shí)地表現出來(lái),人們通過(guò)單純觀(guān)賞就可以獲取大量信息,十分方便。多媒體手段可以更具體地提煉出一件事情的重點(diǎn),從簡(jiǎn)單的文字發(fā)展到真人形式進(jìn)行信息的傳播,這使得網(wǎng)站從單純的被觀(guān)看變成了“去講述”,給瀏覽者繪聲繪色,真情實(shí)感的享受。
2、常見(jiàn)的網(wǎng)頁(yè)設計布局及其特點(diǎn)
2.1“同”字型
人們對信息的需求量日益增大,簡(jiǎn)短的介紹已經(jīng)無(wú)法充實(shí)越來(lái)越多的'瀏覽者的思想,所以“同”字型的網(wǎng)頁(yè)布局應運而生,在這里收納了不同行業(yè)不同方面的大量信息,而為了方便在眾多的信息中方便瀏覽者尋找自己需要的信息,這類(lèi)網(wǎng)頁(yè)上方也會(huì )設置分類(lèi)的標題欄,其中既涵蓋了自己本網(wǎng)站的主題設計,也有不同商家投資宣傳的廣告標語(yǔ),而且為了進(jìn)一步強調也會(huì )在下面輔助上小標題。人們習慣于瀏覽一個(gè)頁(yè)面的中間位置,這也使得一個(gè)頁(yè)面的兩側被人們所忽略,作為僅有的宣傳信息的頁(yè)面,網(wǎng)站設計人員自然不會(huì )放過(guò)這些邊邊角角的位置,這里多會(huì )被填充上一些不是很重要的廣告或者站內的服務(wù)人員,多數為了吸引人還會(huì )以滾動(dòng)、閃動(dòng)的形式出現,當然,這些不重要的彈框是可以被關(guān)閉的。
2.2標題正文型
和“同”字型的頁(yè)面布局不同,在這里都是簡(jiǎn)單清晰的中央分布類(lèi)型,去除了繁多動(dòng)態(tài)的兩邊彈框信息,在其他方面卻沒(méi)有什么不一樣。這種頁(yè)面布局方式,將重要的事件和一些實(shí)時(shí)動(dòng)態(tài)類(lèi)信息放在中上的醒目位置,將一些瀏覽項目的分類(lèi)放到中間位置,而在底部不會(huì )安排什么重要信息,有的也只是填充了一些設計者、設計事件等信息,而在一個(gè)頁(yè)面的頂端多會(huì )附有實(shí)時(shí)天氣,滾動(dòng)的實(shí)時(shí)動(dòng)態(tài)標題等。
2.3綜合框架型
講述起來(lái)這種類(lèi)型的設計無(wú)非就是給人以更多“規矩”的感覺(jué),在內容方面也是將不同重點(diǎn)進(jìn)行相應的排列,不同的上下位置分布相應的信息,唯一有區別的就是在設計頁(yè)面時(shí)將原有的白紙式頁(yè)面增添了邊框而已。
2.4封面型
從標題里就可以看出,這種設計類(lèi)型就像是大家的課本頁(yè)面一樣,主要的信息很少,多數需要了解的信息都會(huì )以超鏈接的形式出現,中間配上動(dòng)態(tài)圖片或者變換顏色的文字,這種類(lèi)型的設計多用于表現鮮明的個(gè)人特色,目的也僅僅是單純地吸引瀏覽者的眼球。
3、簡(jiǎn)述
如何進(jìn)行網(wǎng)頁(yè)設計的布局在設計一個(gè)頁(yè)面之前,要對自己想要表達的想法進(jìn)行規劃,如何分布整個(gè)頁(yè)面,怎樣體現不同文字的價(jià)值才能吸引更多的瀏覽者去關(guān)注自己的頁(yè)面,這都是需要提前構思好的。在內容方面,不能僅僅是單純的文字或者簡(jiǎn)單的插入圖片,要有重點(diǎn)分條分框地布局整個(gè)頁(yè)面,時(shí)而緊湊時(shí)而稀疏,讓瀏覽者可以感受到能在這里獲得更多有趣的信息,不應該給人一種千篇一律的感覺(jué)。紅花要有綠葉配,適當的在關(guān)鍵位置添加“葉子”是增添頁(yè)面可觀(guān)性的一個(gè)好的思路。將美學(xué)運用到頁(yè)面的設計中去,用靈活的布局增添美感,可以給瀏覽者以視覺(jué)上“饕餮盛宴”的更好感覺(jué)。
4、結語(yǔ)
隨著(zhù)物聯(lián)網(wǎng)時(shí)代的到來(lái),人們對網(wǎng)頁(yè)外觀(guān)、內容、實(shí)用性等方面的要求更多,為了能夠滿(mǎn)足人們的需求,為人們提供更加完善的服務(wù),設計人員必須要掌握網(wǎng)頁(yè)設計的相關(guān)概念,并且能夠通過(guò)合理的運用設計方法,達到優(yōu)化網(wǎng)頁(yè)質(zhì)量與視覺(jué)效果的目的,該文對此進(jìn)行了3個(gè)方面的分析,希望能夠為相關(guān)的設計人員提供一些建議和參考。
【計算機網(wǎng)頁(yè)設計布局】相關(guān)文章：
網(wǎng)頁(yè)設計的布局理解07-03
常見(jiàn)的網(wǎng)頁(yè)布局設計模式07-14
網(wǎng)頁(yè)設計的四種布布局要點(diǎn)07-03
網(wǎng)頁(yè)設計相對布局中如何實(shí)現水平定位？07-03
網(wǎng)頁(yè)設計怎樣創(chuàng )新布局，無(wú)錫夢(mèng)想階梯靠訴你？07-03
[網(wǎng)頁(yè)設計]Re:網(wǎng)頁(yè)設計認證07-03
[網(wǎng)頁(yè)設計]網(wǎng)頁(yè)設計來(lái)幫忙07-03
客廳設計布局要點(diǎn)07-01