計算機網頁設計佈局

計算機網頁設計佈局1

【摘要】網頁設計是一種直觀的視覺語言，需要對其進行佈局與排版。雖然網頁設計與平面設計之間存在一定的區別，但是其兩者依然存在一定的相似之處，網頁設計應該充分借鑑利用平面設計的原則與方法。網頁設計中的佈局與排版需要通過文字、圖形的組合來讓網頁獲得良好的視覺效果。現文章主要針對計算機網頁設計中的佈局與排版進行研究。

【關鍵詞】網頁設計；佈局；排版；文字；設計論文

網站是企業或政府向用戶傳遞資訊，提供服務的一種重要方式，是企業開展電子商務的重要平臺，是政府面向民眾的重要視窗。網站是直接反應企業形象、政府形象的平臺，因此網頁設計質量的高低將會直接影響到企業或政府的形象。在網頁設計中，佈局與排版是十分關鍵的內容之一，其會直接影響到瀏覽者對網頁的第一印象與體驗感。因此，對於網頁設計的佈局與排版進行研究具有十分重大的實際意義。

1．計算機網頁設計佈局與排版原則

1．1佈局與排版設計原則為了讓瀏覽者在瀏覽網頁過程中擁有更好的瀏覽體驗，在進行佈局版本過程中要始終秉持以下原則:第一，整體佈局，和諧統一。在網頁設計佈局排版過程中整體佈局佔據著十分重要的作用。整合是網頁設計排版佈局中常用的一個對稱形式，通過空間的文字與圖形建立其平衡的狀態，從而產生和諧的美感［1］。但是單純的平衡有時候會導致頁面出現過於死板、僵化的情況。因此，可以在對稱平衡設計中融合一些活潑、有趣的詞彙、圖形，但是要注意需要與頁面和諧統一。第二，主次分明，中心突出。在網頁頁面聚居中需要對視覺中心進行充分的考慮，該視覺中西你通常位於頁面的關鍵區域—中部與上部的位置。因此，最有價值的資訊應該擺放在這一位置。網頁佈局排版主次分明的最終目的是讓網頁可以形成清晰有序，能夠突出重點的視覺效果。第三，疏密有度，錯落有致。在網頁佈局排版中，一定要做好疏密有致，預留出一定的空白，靈活的使用字間距與行間距，製造出字間距與行間距之間的距離。對於形態與色彩的搭配運用更要合理［2］。例如，黑白搭配、圓形與方形搭配，以便獲得更佳的視覺效果。第四，圖文並茂，生動有趣。圖形美觀與文字的簡潔之間需要合理的搭配。如果圖形在版面設計中佔據的比例更大，則文字會相應減少，從而大大減少頁面的資訊量;而如果文字太多則會使得網頁版面變得死板。因此，網頁佈局與排版應該做到圖文並茂、合理搭配，從而給網頁帶來更加豐富的內容，讓網頁變得更加有趣。1．2佈局與排版設計方法網頁設計佈局與排版方法主要包括以以下幾點:第一，簡潔明瞭。佈局排版最為重要的原則就是一名瞭然，讓網頁瀏覽者可以更加順暢的瀏覽資訊。第二，主色調鮮明。網頁設計給人的'第一印象就是由主色調決定的。主色調在網頁佈局與排版中是十分重要的，主色調過多會給瀏覽者帶來一種厭煩的感受，不利於瀏覽者長時間瀏覽網頁。因此，網頁版本的主色調要進行合理的控制，其中主色彩不能超過五種，並且要以一種主色調為主，凸顯以主導地位，另外幾種顏色作為烘托與點綴［3］。一般來說，網頁設計的主色調包括黃、藍、灰、黑和白。第三，字型設定。在網頁設計中字型的設定也應該始終秉持著簡易的原則，通常來說不應該超過三種字型，並且字型在版面中不宜過大，從而讓更多文字給網頁瀏覽者帶來更多有價值的資訊。值得注意的是，要避免閃爍的文字在網頁設計佈局中出現，其會給瀏覽者帶來一種厭煩的感覺。同時，在網頁標題欄中字型應該相對於正文來說要更大，顏色也需要進行區分。

2．常見佈局與排版

2．1T字型T型結構是頂部的頁面佈局為網站的標語和橫幅，下列左側為主選單，右側為內容顯示。由於選單的背景佈置顏色更深，因此整體效果視覺類似於英文字母“T”，因此被成為T字型佈局。T字型佈局是網頁設計中十分常見的設計佈局，其優勢在於頁面結構清晰、明確，容易正確把握主次關係;缺點在於較為沉悶，缺乏靈活性，如果無法準確把握，不注重細節與色彩的配合，十分容易出現無趣、枯燥的現象［4］。2．2口字型口字型佈局給人一個感覺就是在頁面中間最為顯眼的主題內容，類似於一個口字型，左側通常包括註冊資訊、內容導航、搜尋引擎，右側通常包括動態訊息、熱點資訊和友情連結。上下兩部分為橫條廣告與選單。口字型佈局的優勢在於可以充分利用版面，囊括較大的資訊量，缺點在於頁面較為擁擠，過於死板［5］。口字型佈局大多被應用於國外站點中，國內使用頻率較低。2．3POP佈局POP佈局是將一張合適的照片作為頁面設計的中心，並且在合適的位置擺放主選單。POP佈局並不是上下或左右對稱的，但是在設計過程中依然要兼顧平衡與節奏。POP佈局可以實現動態效果，其優勢在於美觀，缺陷在於執行速度較為緩慢。2．4同字型同字型的網頁佈局一般來說內容量都較大，網頁上方為標題欄，其中內容可以是網站主題或橫幅廣告，在標題欄下可能存在小標題。在頁面左右兩側都佈置有相應的內容。通常來說，可能是網站的最新動態、網站的維護管理人員以及部分廣告。同字型網頁的主要內容是分佈在中央位置，從上至下，根據內容的重點、型別來進行區分。網站下部分通常為空白，即使有內容也是一些十分常規的內容，包括網站製造方、網站基礎資訊等。

3結語

計算機網頁設計佈局與排版是一門藝術，針對網頁不同的內容可以採用不同的佈局排版形式。然而不論採用何種的佈局排版形式都需要始終秉持著佈局排版的原則，以設計出美觀、簡潔、便捷、人性化的網頁，讓瀏覽者可以舒適的瀏覽網頁。

參考文獻:

［1］李娟．淺述網頁設計中的頁面佈局技術［J］．考試周刊，20xx(27):116～117．

［2］董磊．網頁設計中視覺傳達的整合設計［J］．明日風尚，20xx(05):123，106．

［3］許煒熔．讓“美”走進學生網頁作品———談在網頁設計課堂中提高學生綜合素質的幾點建議［J］．課程教育研究，20xx(26):248～249．

［4］樑日有．網頁設計中藝術創新的研究與實現探討［J］．學子(理論版)，20xx(03):12～13．

［5］尹涓，崔曉曦．淺談網頁視覺設計的應用和技巧［J］．電腦知識與技術，20xx(15):204～205．

計算機網頁設計佈局2

作為網站構成的基本要素,網頁佈局在很大程度上影響著網頁的瀏覽量,當然也會影響整個網站的運營情況。隨著計算機以及網際網路在人們生活中的普及,網頁佈局也更加關注色彩、影象、圖示以及文字等方面的搭配問題,充分利用網頁空間,科學地進行佈局,才能夠製作出更加精美的網頁,使用者在瀏覽網頁的時候,才會擁有更好的體驗。

1、網頁設計中佈局的相關概念

1.1頁面尺寸

頁面尺寸的大小主要由顯示器的解析度和螢幕的大小決定,顯示器範圍的侷限性對於網頁設計來說是頁面最大的阻礙。不同品牌的顯示器,再製造過程中所使用的技術都不一樣,不同的研發團隊對於不同的顯示器設計都存在差異,也正是這些在顯示器設計方面的侷限性,使得人們只能根據現有的解析度不是很好的顯示器來進行網頁設計,這也造成了頁面尺寸大打折扣的不良局面,所以,一臺具有超高解析度的顯示器是設計出一個完美頁面的前提。

1.2整體造型

對實體物品進行構思,然後運用電腦技術在螢幕上搭建出簡單的物體形象,這是將物體從實物轉化成影象的一種形式。在設計影象的過程中,人們可以根據要求或者自己的想法,將圖形進行變形,從稜角分明的方形變成通體圓潤的圓形、橢圓形,或者將沒有層次的單一造型轉變成圖形同文字相結合的形式,用不同的層次感進行設計。

1.3頁頭

所謂頁頭,就是設計軟體中的頁首選項,它的作用有很多,但主要是被用作定義頁面的主題,人們可以很直觀地從頁首中找到自己想要的資訊,也可以通過頁首來理解作者想要表達的意思。在一個頁首中可以顯示出多個人名,這也大大方便了瀏覽者尋找關鍵資訊,減少了在頁面上盲目尋找的麻煩。

1.4文字

在資訊日益增多的現代化社會,為了方便不同人士不同行業的辦公以及工作任務的分配,文字被眾多人所應用,從中國人傳統的教育理念著手,用文字來代替沉重的書籍,符合了人們隨走隨記得特點,方便人們在不同環境進行閱讀。文字由於是文字在書籍方面的代替工具,因為它被設計出來後所需要的儲存空間非常小等特點,越來越受到不同年齡人群的喜愛,用很少的空間就可以儲存大量想要瀏覽的資訊,方便快捷。文字的設計起初存放位置受到限制,但隨著電腦技術的發展,文字已經可以隨意地放在頁面的任何位置。

1.5頁尾

首先有了放置站點主題的頁首,也就衍生出了可以修改和儲存文章作者或者不同公司文字資訊的頁尾位置。頁首和頁尾都是一個好的設計中不可缺少的部分。

1.6圖片

簡單而單純的文字已經很難讓現在的年輕人提起興趣,為了方便和吸引現代人去閱讀,各個大型的網頁中都會配上符合新聞資訊的圖片,不同型別的圖片給瀏覽者以視覺上的衝擊,也可以藉助圖片更好地表達文字中的含義,增強瀏覽者在讀取時的美感。

1.7多媒體

時間的推移促使了各種新型媒體的出現,人們通過聲音影象等手段將資訊更真實地表現出來,人們通過單純觀賞就可以獲取大量資訊,十分方便。多媒體手段可以更具體地提煉出一件事情的重點,從簡單的文字發展到真人形式進行資訊的傳播,這使得網站從單純的被觀看變成了“去講述”,給瀏覽者繪聲繪色,真情實感的享受。

2、常見的網頁設計佈局及其特點

2.1“同”字型

人們對資訊的需求量日益增大,簡短的介紹已經無法充實越來越多的'瀏覽者的思想,所以“同”字型的網頁佈局應運而生,在這裡收納了不同行業不同方面的大量資訊,而為了方便在眾多的資訊中方便瀏覽者尋找自己需要的資訊,這類網頁上方也會設定分類的標題欄,其中既涵蓋了自己本網站的主題設計,也有不同商家投資宣傳的廣告標語,而且為了進一步強調也會在下面輔助上小標題。人們習慣於瀏覽一個頁面的中間位置,這也使得一個頁面的兩側被人們所忽略,作為僅有的宣傳資訊的頁面,網站設計人員自然不會放過這些邊邊角角的位置,這裡多會被填充上一些不是很重要的廣告或者站內的服務人員,多數為了吸引人還會以滾動、閃動的形式出現,當然,這些不重要的彈框是可以被關閉的。

2.2標題正文型

和“同”字型的頁面佈局不同,在這裡都是簡單清晰的中央分佈型別,去除了繁多動態的兩邊彈框資訊,在其他方面卻沒有什麼不一樣。這種頁面佈局方式,將重要的事件和一些實時動態類資訊放在中上的醒目位置,將一些瀏覽專案的分類放到中間位置,而在底部不會安排什麼重要資訊,有的也只是填充了一些設計者、設計事件等資訊,而在一個頁面的頂端多會附有實時天氣,滾動的實時動態標題等。

2.3綜合框架型

講述起來這種型別的設計無非就是給人以更多“規矩”的感覺,在內容方面也是將不同重點進行相應的排列,不同的上下位置分佈相應的資訊,唯一有區別的就是在設計頁面時將原有的白紙式頁面增添了邊框而已。

2.4封面型

從標題裡就可以看出,這種設計型別就像是大家的課本頁面一樣,主要的資訊很少,多數需要了解的資訊都會以超連結的形式出現,中間配上動態圖片或者變換顏色的文字,這種型別的設計多用於表現鮮明的個人特色,目的也僅僅是單純地吸引瀏覽者的眼球。

3、簡述

如何進行網頁設計的佈局在設計一個頁面之前,要對自己想要表達的想法進行規劃,如何分佈整個頁面,怎樣體現不同文字的價值才能吸引更多的瀏覽者去關注自己的頁面,這都是需要提前構思好的。在內容方面,不能僅僅是單純的文字或者簡單的插入圖片,要有重點分條分框地佈局整個頁面,時而緊湊時而稀疏,讓瀏覽者可以感受到能在這裡獲得更多有趣的資訊,不應該給人一種千篇一律的感覺。紅花要有綠葉配,適當的在關鍵位置新增“葉子”是增添頁面可觀性的一個好的思路。將美學運用到頁面的設計中去,用靈活的佈局增添美感,可以給瀏覽者以視覺上“饕餮盛宴”的更好感覺。

4、結語

隨著物聯網時代的到來,人們對網頁外觀、內容、實用性等方面的要求更多,為了能夠滿足人們的需求,為人們提供更加完善的服務,設計人員必須要掌握網頁設計的相關概念,並且能夠通過合理的運用設計方法,達到優化網頁質量與視覺效果的目的,該文對此進行了3個方面的分析,希望能夠為相關的設計人員提供一些建議和參考。