網站(zhàn)設計(jì)中的網頁布局和(hé)框架要注意哪些(xiē)？

網站(zhàn)設計(jì)中的網頁布局和(hé)框架要注意哪些(xiē)？

一、網站(zhàn)風格/創意

風格(style)是抽象的。是指站(zhàn)點的整體(tǐ)形象給浏覽者的綜合感受。整體(tǐ)形象包括站(zhàn)點的版面布局，色彩，字體(tǐ)，浏覽方式等…。如：我們覺得(de)迪斯尼是生(shēng)動活潑的而IBM則是專業嚴肅的。每一個(gè)網站(zhàn)都會(huì)給人(rén)們留下的不同感受。這裏我們需要做(zuò)到的是根據網站(zhàn)的定位做(zuò)出網站(zhàn)特有(yǒu)的風格。除此我們還(hái)需要在風格同一上(shàng)需要把握一下，其實這個(gè)風格的統一和(hé)傳統的印刷出版物沒什麽區(qū)别。你(nǐ)網頁上(shàng)所有(yǒu)的圖像、文字，包括像背景顔色、區(qū)分線、字體(tǐ)、标題、注腳什麽的，都要統一風格，貫穿全站(zhàn)。這樣子用戶看起來(lái)舒服、順暢，會(huì)對你(nǐ)的網站(zhàn)留下一個(gè)“很(hěn)專業”的印象。而企業網站(zhàn)設計(jì)師(shī)往往就缺乏這一點，沒有(yǒu)全局意思。

創意，所謂創意就是不拘一格？某些(xiē)設計(jì)師(shī)在做(zuò)創意的時(shí)候大(dà)費周章，做(zuò)出來(lái)确實不可(kě)否認很(hěn)有(yǒu)創意、很(hěn)别緻，但(dàn)往往對于行(xíng)業網站(zhàn)的客戶為(wèi)什麽不能接受呢？此時(shí)不要太責怪客戶的不識貨，應該反思，抓住客戶的需求。其實做(zuò)行(xíng)業網站(zhàn)不需要很(hěn)多(duō)大(dà)的創意，也不要浪費過多(duō)的時(shí)間(jiān)去追求如何個(gè)性、如何好看，我們隻需要一點小(xiǎo)小(xiǎo)的創意貫穿全站(zhàn)，也許會(huì)使網站(zhàn)更生(shēng)動更具有(yǒu)吸引力、更有(yǒu)思想，比如中國現車(chē)交易網(2005年此站(zhàn)已經消失)就是一個(gè)很(hěn)好的案例，它把車(chē)的外形融入到網站(zhàn)中，使它脫穎而出。

二、網站(zhàn)LOGO

Logo顧名思義就是站(zhàn)點的标志(zhì)圖案，logo最重要的就是用圖形化的方式傳遞網站(zhàn)的定位和(hé)經營理(lǐ)念、同時(shí)便于人(rén)們識别。網站(zhàn)logo的設計(jì)過程中一般有(yǒu)以下三種思路：1.直接以網站(zhàn)網址作(zuò)為(wèi)logo。2.根據網站(zhàn)提供的産品/服務特點展開(kāi)logo設計(jì)。3.以傳遞網站(zhàn)運營商的經營理(lǐ)念為(wèi)特色。

三、視(shì)覺流程

人(rén)們在閱讀某種信息時(shí)，視(shì)覺總有(yǒu)一種自然的流動習慣，先看什麽，後看什麽，再看什麽。在心理(lǐ)學的研究表明(míng)，一般的浏覽習慣是從上(shàng)到下、從左到右，在一個(gè)平面上(shàng)，上(shàng)松下穩而壓抑。同樣，平面的左松右穩。所以平面的視(shì)覺影(yǐng)響力上(shàng)方強于下方，左側強于右側。這樣平面的上(shàng)部和(hé)中上(shàng)部被稱為(wèi)“最佳視(shì)域”，也就是最優選的地方。在網頁設計(jì)中一些(xiē)突出或推薦的信息通(tōng)常都放在這個(gè)位置。當然這種視(shì)覺流程隻是一種感覺并非一種固定的公式，隻要符合人(rén)們的心理(lǐ)順序和(hé)邏輯順序，就可(kě)以更為(wèi)靈活地運用，在網頁設計(jì)中，靈活而合理(lǐ)地運用直接影(yǐng)響到傳達信息的準确與有(yǒu)效性。

四、網頁框架與布局

網頁布局大(dà)緻可(kě)分為(wèi)“國”字型、拐角型、“T”字型、“L”字型、綜合框架型、Flash型、變化型，在這裏就不做(zuò)一一論述了。其實在我們在做(zuò)設計(jì)的時(shí)候并沒有(yǒu)過多(duō)的去考慮什麽形式，比如我們在一張紙看到一個(gè)圓形的東西，很(hěn)容易可(kě)以聯想到它像太陽，而有(yǒu)些(xiē)人(rén)則聯想到月亮等等…這都是一種形式比喻，最重要的是抓住客戶的需求，把握網站(zhàn)的定位做(zuò)處合理(lǐ)的框架布局。

1． 分辨率

網頁的整體(tǐ)寬度可(kě)分為(wèi)三種設置形式：百分比、象素、象素+百分比。通(tōng)常在網站(zhàn)建設中以象素形式最為(wèi)常用，行(xíng)業網站(zhàn)也不列外。我們在設計(jì)網頁的時(shí)候必定會(huì)考慮到分辨率的問題，科技(jì)發展到現在我們通(tōng)常用的是1024*768和(hé)800*600的分辨率，現在網絡上(shàng)很(hěn)多(duō)都是用到778個(gè)象素的寬度，在800的分辨率下面往往使整個(gè)網頁很(hěn)壓抑，有(yǒu)種不透氣的感覺，其實這個(gè)寬度是指在800*600的分辨率上(shàng)網頁的最寬寬度，不代表最佳視(shì)覺，不妨試試760~770的象素，不管在1024還(hái)是800的分辨率下都可(kě)以達到較佳的視(shì)覺效果。

2． 合理(lǐ)廣告

在目前一些(xiē)網站(zhàn)的廣告（彈出廣告、浮動廣告、大(dà)廣告、banner廣告、通(tōng)欄廣告等等…）讓人(rén)覺得(de)很(hěn)煩瑣，更本就不願意來(lái)看，有(yǒu)時(shí)連你(nǐ)這個(gè)網站(zhàn)都不上(shàng)了，這樣一來(lái)網站(zhàn)受到了嚴重的影(yǐng)響、廣告也沒達到廣告的目的。這些(xiē)問題都是我們在設計(jì)網站(zhàn)之前需要考慮、需要規劃的內(nèi)容之一。

浮動廣告有(yǒu)兩種，第一種是在網頁兩邊空(kōng)餘的地方可(kě)以上(shàng)下浮動的廣告，第二種是滿屏幕到處随機移動的廣告。建議能使用第一種的情況下盡量使用第一種，不可(kě)避免第二種情況時(shí)盡量在數(shù)量上(shàng)控制(zhì)最多(duō)一個(gè)就好。如果數(shù)量過多(duō)會(huì)直接影(yǐng)響到用戶的心理(lǐ)、防挨到用戶浏覽信息,适得(de)其反。首頁廣告不宜過多(duō)适中即可(kě)。如在注冊或者某個(gè)購買步驟的頁面上(shàng)最好不要出現過多(duō)的其他無關的內(nèi)容讓用戶分心，避免客戶流失等…

3．空(kōng)間(jiān)的合理(lǐ)利用

很(hěn)多(duō)的網頁都具有(yǒu)一個(gè)特點，用一個(gè)字來(lái)形容，那(nà)就是“塞”，它将各種各樣的信息如文字、圖片、動畫(huà)等不加考慮的塞到頁面上(shàng)，有(yǒu)多(duō)少(shǎo)擠多(duō)少(shǎo)，不加以規範，導緻浏覽時(shí)會(huì)遇到很(hěn)多(duō)的不方便，主要就是頁面主次不分，喧賓奪主，要不就是沒有(yǒu)重點，沒有(yǒu)很(hěn)好的歸類，整體(tǐ)就像各大(dà)雜燴。讓人(rén)難以找到需要的東西。有(yǒu)的則是一片空(kōng)白失去平衡，也可(kě)以用個(gè)“散”字來(lái)形容。

并非要把整個(gè)頁面塞滿了才不覺得(de)空(kōng)，也并非讓整個(gè)頁面空(kōng)曠才不覺得(de)滿，隻要合理(lǐ)的安排、有(yǒu)機的組合，使頁面達到平衡，即使在一邊的部分大(dà)面積留空(kōng)，同樣不會(huì)讓人(rén)感到空(kōng)，相反這樣會(huì)給人(rén)留下廣闊的思考空(kōng)間(jiān)，給人(rén)回味又達到了視(shì)覺效果。

4．文字編排

在網頁設計(jì)中，字體(tǐ)的處理(lǐ)與顔色、版式、圖形化等其他設計(jì)元素的處理(lǐ)一樣非常關鍵。

4.1文字圖形化

文字圖形化就是将文字用圖片的形式來(lái)表現，這種形式在頁面的子欄目裏面最為(wèi)常用，因為(wèi)它具有(yǒu)突出，同時(shí)又美化了頁面，使頁面更加人(rén)性化加強了視(shì)覺效果。是文字無法達到的。對于通(tōng)用性的網站(zhàn)弊端就是擴展性不強。

4.2強調文字

如果将個(gè)别文字作(zuò)為(wèi)頁面的訴求重點，則可(kě)以通(tōng)過加粗、加下劃線、加大(dà)号字體(tǐ)、加指示性符号、傾斜字體(tǐ)、改變字體(tǐ)顔色等手段有(yǒu)意識地強化文字的視(shì)覺效果，使其在頁面整體(tǐ)中顯得(de)出衆而奪目。這些(xiē)方法實際上(shàng)都是運用了對比的法則。如果在更新頻率低(dī)的情況下也可(kě)以使用文字圖形化。

五、網站(zhàn)配色

1.用一種色彩。這裏是指先選定一種色彩，然後調整透明(míng)度或者飽和(hé)度，(說得(de)通(tōng)俗些(xiē)就是将色彩變淡或則加深)，産生(shēng)新的色彩，用于網頁。這樣的頁面看起來(lái)色彩統一，有(yǒu)層次感。

2.用兩種色彩。先選定一種色彩，然後選擇它的對比色(在Photoshop裏按ctrl+shift+I)再進行(xíng)微小(xiǎo)的調整。整個(gè)頁面色彩豐富但(dàn)不花(huā)稍。

3.用一個(gè)色系。簡單的說就是用一個(gè)感覺的色彩，例如淡藍(lán)，淡黃，淡綠；或者土黃，土灰，土藍(lán)。也就是在同一色系裏面采用不同的顔色使網頁增加色彩，而又不花(huā)，色調統一。這種配色方法在網站(zhàn)設計(jì)種最為(wèi)常用。

4.灰色在網頁設計(jì)中又稱為(wèi)“萬能色”，其特點是可(kě)以和(hé)任何顔色搭配，在使用時(shí)把握量避免網頁變灰。

在網頁配色中，盡量控制(zhì)在三種色彩以內(nèi)，以避免網頁花(huā)、亂、沒有(yǒu)主色的顯現。背景和(hé)前文的對比盡量要大(dà)，(絕對不要用花(huā)紋繁複的圖案作(zuò)背景)，以便突出主要文字內(nèi)容。

六、網站(zhàn)建設标準操作(zuò)流程

将網站(zhàn)建設的各個(gè)關鍵控制(zhì)點進行(xíng)細化和(hé)量化，以統一的格式描述出來(lái)。  

廈門(mén)網站(zhàn)建設，網站(zhàn)優化，福建谷歌(gē)推廣，小(xiǎo)程序開(kāi)發，企業郵箱，熊掌号運營