網(wǎng)頁藝術(shù)設(shè)計的原則 網(wǎng)頁設(shè)計流程是什么

網(wǎng)頁藝術(shù)設(shè)計的原則

      網(wǎng)頁作為傳播信息的一種載體，同其他出版物如報紙、雜志等在設(shè)計上有許多共同之處，也要遵循一些設(shè)計的基本原則。但是，由于表現(xiàn)形式、運行方式和社會功能的不同，網(wǎng)頁設(shè)計又有其自身的特殊規(guī)律。網(wǎng)頁的藝術(shù)設(shè)計，是技術(shù)與藝術(shù)的結(jié)合，內(nèi)容與形式的統(tǒng)一。網(wǎng)頁藝術(shù)設(shè)計的原則它要求設(shè)計者必須掌握以下三個主要原則：

      1.主題鮮明

      視覺設(shè)計表達(dá)的是一定的意圖和要求，有明確的主題，并按照視覺心理規(guī)律和形式將主題主動地傳達(dá)給觀賞者。訴求的目的，是使主題在適當(dāng)?shù)沫h(huán)境里被人們即時地理解和接受，以滿足人們的實用和需求，這就要求視覺設(shè)計不但要單純、簡練、清晰和精確，而且在強調(diào)藝術(shù)性的同時，更應(yīng)該注重通過獨特的風(fēng)格和強烈的視覺沖擊力，來鮮明地突出設(shè)計主題。

      根據(jù)認(rèn)知心理學(xué)的理論，大多數(shù)人在短期記憶中只能同時把握4到7條分立的信息，而對多于7條的分立信息或者不分立的信息容易產(chǎn)生記憶上的模糊或遺忘，概括起來就是：較小而分立的信息要比較長而不分立的信息更為有效和容易瀏覽。這個規(guī)律蘊含在人們尋找信息和使用信息的實踐活動中，它要求視覺設(shè)計者的設(shè)計活動必須自覺地掌握和遵從。

      作為視覺設(shè)計范疇一種的網(wǎng)頁藝術(shù)設(shè)計，其最終目的是達(dá)到最佳的主題訴求效果。這種效果的取得，一方面通過對網(wǎng)頁主題思想運用邏輯規(guī)律進(jìn)行條理性處理，使之符合瀏覽者獲取信息的心理需求和邏輯方式，讓瀏覽者快速地理解和吸收;另一方面通過對網(wǎng)頁構(gòu)成元素運用藝術(shù)的形式美法則進(jìn)行條理性處理，更好地營造符合設(shè)計目的的視覺環(huán)境，突出主題，增強瀏覽者對網(wǎng)頁的注意力，增進(jìn)對網(wǎng)頁內(nèi)容的理解。只有兩個方面有機地統(tǒng)一，才能實現(xiàn)最佳的主題訴求效果。

      優(yōu)秀的網(wǎng)頁設(shè)計必然服務(wù)于網(wǎng)站的主題，就是說，什么樣的網(wǎng)站，應(yīng)該有什么樣的設(shè)計。例如，設(shè)計類的個人站點與商業(yè)站點性質(zhì)不同，目的也不同，所以評論的標(biāo)準(zhǔn)也不同。網(wǎng)頁藝術(shù)設(shè)計與網(wǎng)站主題的關(guān)系應(yīng)該是這樣：首先，設(shè)計是為主題服務(wù)的;其次，設(shè)計是藝術(shù)和技術(shù)結(jié)合的產(chǎn)物，就是說，即要“美”，又要實現(xiàn)“功能”;最后，“美”和“功能”都是為了更好地表達(dá)主題。當(dāng)然，有些情況下，“功能”即是“主題”，還有些情況下，“美”即是主題。例如，雅虎作為一個搜索引擎，首先要實現(xiàn)“搜索”的“功能”。它的主題即是它的“功能”。而一個個人網(wǎng)站，可以只體現(xiàn)作者的設(shè)計思想，或者僅僅以設(shè)計出“美”的網(wǎng)頁為目的。它的主題只有一個，就是——美。

      只注重主題思想的條理性而忽視網(wǎng)頁構(gòu)成元素空間關(guān)系的形式美組合，或者只重視網(wǎng)頁形式上的條理而淡化主題思想的邏輯，都將削弱網(wǎng)頁主題的最佳訴求效果，難以吸引瀏覽者的注意力，出現(xiàn)平庸的網(wǎng)頁設(shè)計或使網(wǎng)頁設(shè)計以失敗而告終。

      要使網(wǎng)頁從形式上獲得良好的誘導(dǎo)力，鮮明地突出訴求主題，具體可以通過對網(wǎng)頁的空間層次、主從關(guān)系、視覺秩序及彼此間的邏輯性的把握運用來達(dá)到。

      2.形式與內(nèi)容統(tǒng)一

      任何設(shè)計都有一定的內(nèi)容和形式。內(nèi)容是構(gòu)成設(shè)計的一切內(nèi)在要素的總和，是設(shè)計存在的基礎(chǔ)，被稱為“設(shè)計的靈魂”;形式是構(gòu)成內(nèi)容諸要素的內(nèi)部結(jié)構(gòu)或內(nèi)容的外部表現(xiàn)方式。設(shè)計的內(nèi)容就是指它的主題、形象、題材等要素的總和，形式就是它的結(jié)構(gòu)、風(fēng)格或設(shè)計語言等表現(xiàn)方式。內(nèi)容決定形式，形式反作用于內(nèi)容。一個優(yōu)秀的設(shè)計必定是形式對內(nèi)容的完美表現(xiàn)。正如黑格爾所說：“工藝的美就不在于要求實用品的外部造型、色彩、紋樣去摹擬事物，再現(xiàn)現(xiàn)實，而在于使其外部形式傳達(dá)和表現(xiàn)出一定的情緒、氣氛、格調(diào)、風(fēng)尚、趣味，使物質(zhì)經(jīng)由象征變成相似于精神生活的有關(guān)環(huán)境�！�(黑格爾《美學(xué)》第三卷)

      一方面，網(wǎng)頁設(shè)計所追求的形式美，必須適合主題的需要，這是網(wǎng)頁設(shè)計的前提。只講花哨的表現(xiàn)形式以及過于強調(diào)“獨特的設(shè)計風(fēng)格”而脫離內(nèi)容，或者只求內(nèi)容而缺乏藝術(shù)的表現(xiàn)，網(wǎng)頁設(shè)計都會變的空洞而無力。設(shè)計者只有將二者有機地統(tǒng)一起來，深入領(lǐng)會主題的精髓，再融合自己的思想感情，找到一個完美的表現(xiàn)形式，才能體現(xiàn)出網(wǎng)頁設(shè)計獨具的分量和特有的價值。另一方面，要確保網(wǎng)頁上的每一個元素都有存在的必要性，不要為了炫耀而使用冗余的技術(shù)。那樣得到的效果可能會適得其反。只有通過認(rèn)真設(shè)計和充分的考慮來實現(xiàn)全面的功能并體現(xiàn)美感才能實現(xiàn)形式與內(nèi)容的統(tǒng)一。

      據(jù)有關(guān)資料所做的保守估計，目前在WWW上網(wǎng)頁數(shù)據(jù)傳輸平均以每秒1.5k的速度到達(dá)客戶端。假設(shè)某個網(wǎng)頁為了豐富其藝術(shù)性而追趕時髦地大量使用圖像或其它多媒體元素等，雖然達(dá)到了其靜態(tài)形式美的效果，卻造成多達(dá)幾十K甚至更大的網(wǎng)頁數(shù)據(jù)，使瀏覽者必須等待很長時間才能看到“廬山真面目”，這樣的網(wǎng)頁就不是一個優(yōu)秀的網(wǎng)頁，因為它不符合網(wǎng)頁傳播信息的突出特性之一——快捷性，使網(wǎng)頁內(nèi)容不能很快地到達(dá)訪問者，影響了訪問效果和質(zhì)量，損害了訪問者的情趣和積極性，這種技術(shù)要素影響了傳達(dá)信息的效果，因而不是形式與內(nèi)容的完美統(tǒng)一。

      網(wǎng)頁具有多屏、分頁、嵌套等特性，設(shè)計者可以對其進(jìn)行形式上的適當(dāng)變化以達(dá)到多變性處理效果，豐富整個網(wǎng)頁的形式美。這就要求設(shè)計者在注意單個頁面形式與內(nèi)容統(tǒng)一的同時，更不能忽視同一主題下多個分頁面組成的整體網(wǎng)頁的形式與整體內(nèi)容的統(tǒng)一。

      因此，在網(wǎng)頁設(shè)計中必須注意形式與內(nèi)容的高度統(tǒng)一。

      3.強調(diào)整體

      網(wǎng)頁的整體性包括內(nèi)容和形式上的整體性，這里主要討論設(shè)計形式上的整體性。

      網(wǎng)頁是傳播信息的載體，它要表達(dá)的是一定的內(nèi)容、主題和意念，在適當(dāng)?shù)臅r間和空間環(huán)境里為人們所理解和接受，它以滿足人們的實用和需求為目標(biāo)。設(shè)計時強調(diào)其整體性，可以使瀏覽者更快捷、更準(zhǔn)確、更全面地認(rèn)識它、掌握它，并給人一種內(nèi)部有機聯(lián)系、外部和諧完整的美感。整體性也是體現(xiàn)一個站點獨特風(fēng)格的重要手段之一。

      網(wǎng)頁的結(jié)構(gòu)形式是由各種視聽要素組成的。在設(shè)計網(wǎng)頁時，強調(diào)頁面各組成部分的共性因素或者使諸部分共同含有某種形式特征，是求得整體的常用方法。這主要從版式、色彩、風(fēng)格等方面入手。例如：在版式上，將頁面中各視覺要素作通盤考慮，以周密的組織和精確的定位來獲得頁面的秩序感，即使運用“散”的結(jié)構(gòu)，也是經(jīng)過深思熟慮之后的決定;一個站點通常只使用兩到三種標(biāo)準(zhǔn)色，并注意色彩搭配的和諧;對于分屏的長頁面，不可設(shè)計完第一屏再考慮下一屏。同樣，整個網(wǎng)頁內(nèi)部的頁面，都應(yīng)統(tǒng)一規(guī)劃，統(tǒng)一風(fēng)格，讓瀏覽者體會到設(shè)計者完整的設(shè)計思想。

      從某種意義上講，強調(diào)網(wǎng)頁結(jié)構(gòu)形式的視覺整體性必然會犧牲靈活的多變性，“物極必反”就是這個道理。因此，在強調(diào)網(wǎng)頁整體性設(shè)計的同時必須注意：過于強調(diào)整體性可能會使網(wǎng)頁呆板、沉悶，以致影響訪問者的情趣和繼續(xù)瀏覽的欲望�！罢�體”是“多變”基礎(chǔ)上的整體。

網(wǎng)頁藝術(shù)設(shè)計的原則，網(wǎng)頁設(shè)計流程是什么

      對于網(wǎng)站設(shè)計每個前端工程師都有自己的 一套方法論。就我個人而言，找到適合自己的方法需要大量的實戰(zhàn)演練。

      1.效果圖分析。當(dāng)一張psd圖呈現(xiàn)在桌面前時，你需要的，只是冷靜地思考。仔細(xì)地觀察和分析，那些是主，那些是輔，理順各個頁面的組成元素和他們之間的關(guān)系是開頭最最重要的。

      2.布局切圖。通過上一步，對效果圖有一個整體輪廓的印象，下面開始布局規(guī)劃。頁面是三行兩列式還是兩行一列式，需要考慮到網(wǎng)站今后可能改版遇到的某種情況(當(dāng)然，這需要經(jīng)驗)其他網(wǎng)頁的需求，最好考慮到代碼重用和網(wǎng)站的靈活性。如果對頁面的構(gòu)成已經(jīng)相當(dāng)清晰，那就動手吧。切割圖片。那個屬于表現(xiàn)層圖片，那個屬于內(nèi)容層圖片。

      3.網(wǎng)站文件規(guī)劃。(有的同學(xué)喜歡把這個步驟放到最后做)我個人喜歡早做 嘻嘻。合理地組織網(wǎng)站文件結(jié)構(gòu)將會讓網(wǎng)站以后的更新與維護(hù)更加方便。包括后續(xù)的開發(fā)。

      4.HTML編碼。這部分每個人的做法還真是不同，我個人，首先打好框架，再分別細(xì)化，填充內(nèi)容。

      5.CSS 組建網(wǎng)頁。之所以把第四步和第五步分開，就是為了說明一個道理：內(nèi)容與表現(xiàn)的分離。上一步我們往往做的很沮喪因為我們還看不到實際的效果圖，我們只是單純地想表達(dá)內(nèi)容，這一步就是我們豐富內(nèi)容的時候了。

      完成以上步驟，網(wǎng)站終于有個樣子了，下來就是調(diào)整啦，網(wǎng)頁重構(gòu)啦，讓網(wǎng)站更加perfect 。

      1、網(wǎng)站策劃負(fù)責(zé)前期收集實際業(yè)務(wù)部門需求及分析市場動態(tài)，確定網(wǎng)站定位;結(jié)合用戶體驗及技術(shù)實現(xiàn)的可能性，確定頁面原型。

      2、網(wǎng)站設(shè)計師負(fù)責(zé)根據(jù)頁面原型，設(shè)計成為平面頁面;

      3、網(wǎng)站制作(部分公司或團(tuán)隊因架構(gòu)不一致，此處工作也可能由網(wǎng)站設(shè)計師承擔(dān))負(fù)責(zé)將平面頁面切圖，并

      網(wǎng)站設(shè)計流程按照SEO優(yōu)化等標(biāo)準(zhǔn)生成html靜態(tài)頁面;

      4、網(wǎng)站技術(shù)開發(fā)部門或網(wǎng)站開發(fā)師開發(fā)相關(guān)前、后臺代碼，并完成html頁面的代碼嵌套工作;

      5、網(wǎng)站進(jìn)入內(nèi)測、公測及BUG修復(fù)流程;

      6、發(fā)布網(wǎng)站并上線(其中包括運維工程師的服務(wù)器環(huán)境搭建、部署等工作)。

      注：尊重原創(chuàng)文章,轉(zhuǎn)載請注明出處和鏈接 http://m.universityresearchassociates.com/news-id-30714.html 違者必究！部分文章來源于網(wǎng)絡(luò)由培訓(xùn)無憂網(wǎng)編輯部人員整理發(fā)布,內(nèi)容真實性請自行核實或聯(lián)系我們，了解更多相關(guān)資訊請關(guān)注網(wǎng)頁制作頻道查看更多，了解相關(guān)專業(yè)課程信息您可在線咨詢也可免費申請試課。關(guān)注官方微信了解更多：150 3333 6050