網(wǎng)頁界面設(shè)計(jì)論文范文第1篇

摘要：如今我們處在一個(gè)視覺信息泛濫的年代，人們希望作為視覺信息主體來源的網(wǎng)絡(luò)能夠做到簡(jiǎn)潔、明快，這樣信息傳遞的效能才越來越高。本文先從簡(jiǎn)約主義的概念入手，繼而結(jié)合網(wǎng)頁設(shè)計(jì)發(fā)展現(xiàn)狀指出其對(duì)簡(jiǎn)約主義理念應(yīng)用的潮流來闡明網(wǎng)頁界面簡(jiǎn)約主義設(shè)計(jì)的概念及其特征。文章總結(jié)了簡(jiǎn)約主義設(shè)計(jì)理念下的網(wǎng)頁界面設(shè)計(jì)的基本要求。在此基礎(chǔ)上，結(jié)合現(xiàn)實(shí)網(wǎng)頁設(shè)計(jì)實(shí)踐，指出了簡(jiǎn)約主義計(jì)理念下網(wǎng)頁界面設(shè)計(jì)的誤區(qū)，為網(wǎng)頁設(shè)計(jì)工作的開展指明了方向。

關(guān)鍵詞：簡(jiǎn)約主義設(shè)計(jì)理念；網(wǎng)頁界面設(shè)計(jì)

一、簡(jiǎn)約主義設(shè)計(jì)理念的由來及概念

春秋戰(zhàn)國(guó)時(shí)期，哲學(xué)思想家老子提出“少則多，多則惑”。在西方古希臘時(shí)期，哲學(xué)家柏拉圖用簡(jiǎn)單及少來論述立方體。這說明簡(jiǎn)約主義的應(yīng)用在遠(yuǎn)古就已經(jīng)有存在的形式。世界建筑史上的現(xiàn)代主義運(yùn)動(dòng)催生了簡(jiǎn)約主義理念。理論上，現(xiàn)代主義是功能主義與簡(jiǎn)約原則的結(jié)合。20世紀(jì)初，英國(guó)的“工藝美術(shù)運(yùn)動(dòng)”讓簡(jiǎn)約設(shè)計(jì)理念登上歷史舞臺(tái)。19世紀(jì)60年代的工業(yè)革命大大地解放了勞動(dòng)力，通過使用新興機(jī)器，批量生產(chǎn)使得生產(chǎn)規(guī)模擴(kuò)大，但不合格的材料和不過關(guān)的技術(shù)，使得整個(gè)工業(yè)系統(tǒng)混亂不堪，建筑行業(yè)的設(shè)計(jì)破敗粗糙、庸俗至極。而后以莫里斯為主要代表發(fā)起的“工藝美術(shù)運(yùn)動(dòng)”迅速在發(fā)展，他否定機(jī)械化和裝飾過度的設(shè)計(jì)風(fēng)格，倡導(dǎo)誠(chéng)摯的、真實(shí)的兼顧功能的設(shè)計(jì)。此次運(yùn)動(dòng)奠定了現(xiàn)代主義風(fēng)格的基礎(chǔ)。現(xiàn)代主義提出設(shè)計(jì)以功能為中心和目標(biāo)，倡導(dǎo)非裝飾的簡(jiǎn)單幾何造型。簡(jiǎn)約主義設(shè)計(jì)理念的正式提出則追溯到建筑大師米斯?凡德羅提出的著名的“Less is more”的設(shè)計(jì)原則和理論，所以簡(jiǎn)約設(shè)計(jì)的理念最早源于世界建筑設(shè)計(jì)隨后波及了產(chǎn)品設(shè)計(jì)、平面設(shè)計(jì)、室內(nèi)設(shè)計(jì)、首飾設(shè)計(jì)和家具設(shè)計(jì)等領(lǐng)域各行各業(yè)紛紛開始追求簡(jiǎn)約主義設(shè)計(jì)理念。由于地域文化差異，也對(duì)簡(jiǎn)約主義的審美存在一定出入，簡(jiǎn)約設(shè)計(jì)理念上也就會(huì)存在差異。極少主義、白色派等，其從本質(zhì)上說，追求的都是簡(jiǎn)約的設(shè)計(jì)風(fēng)格，是簡(jiǎn)約理論的具體體現(xiàn)。

“簡(jiǎn)約主義”顧名思義就是最基本的元素呈現(xiàn)，倡導(dǎo)摒棄所有多余色彩，結(jié)構(gòu)，圖形和其他裝飾素材的設(shè)計(jì)方法。簡(jiǎn)約主義的設(shè)計(jì)理念目的是為了是設(shè)計(jì)內(nèi)容更加突出于其余一切輔助物讓核心內(nèi)容成為聚焦點(diǎn)，其中心思想是設(shè)計(jì)內(nèi)容中最基本的設(shè)計(jì)元素。

二、網(wǎng)頁界面設(shè)計(jì)簡(jiǎn)約主義理念潮流

（一）簡(jiǎn)約主義網(wǎng)頁設(shè)計(jì)的概念

網(wǎng)頁界面采用簡(jiǎn)約主義理念來指導(dǎo)其界面設(shè)計(jì)的最終目的是提升用戶體驗(yàn)，如果只注重外觀的簡(jiǎn)約還不注重網(wǎng)頁信息傳遞的快速有效，那也還是不能提升用戶體驗(yàn)。簡(jiǎn)約在網(wǎng)頁界面設(shè)計(jì)中是一個(gè)相對(duì)的概念，簡(jiǎn)約主義設(shè)計(jì)不是泛濫和隨意。網(wǎng)頁界面的簡(jiǎn)約是對(duì)網(wǎng)頁信息架構(gòu)進(jìn)行合理的安排，而其精髓隱藏在架構(gòu)背后，簡(jiǎn)單明了高效地向用戶傳達(dá)他們的目標(biāo)信息。如果用戶使用網(wǎng)站不能快速搜尋到他們想要的信息，會(huì)使得顧客不想停留在網(wǎng)頁界面，那么這將導(dǎo)致客戶流失。其次，通過簡(jiǎn)化設(shè)計(jì)元素也能在視覺上精簡(jiǎn)設(shè)計(jì)使得信息主次分明。Google產(chǎn)品設(shè)計(jì)的副總裁瑪瑞莎梅爾（Marissa Mayer）對(duì)此做過一個(gè)形象的比方，她認(rèn)為簡(jiǎn)約的網(wǎng)頁界面設(shè)計(jì)首先就像一把“合上的瑞士軍刀”，Google網(wǎng)站的簡(jiǎn)約外觀是出于用戶體驗(yàn)，用戶通常只能記住一個(gè)網(wǎng)站的7至9個(gè)功能，對(duì)16個(gè)以下的關(guān)鍵詞留有印象，因此要在這個(gè)范圍內(nèi)充分考慮用戶的需求和特點(diǎn)。而許多其它的網(wǎng)站，其欄目和功能繁雜，更像是一些“打開的瑞士軍刀”。[1]

（二）簡(jiǎn)約主義在網(wǎng)頁界面設(shè)計(jì)中的體現(xiàn)

首先，簡(jiǎn)約主義理念指導(dǎo)網(wǎng)頁界面的設(shè)計(jì)能簡(jiǎn)化我們想要向用戶表達(dá)的核心思想，合理隱藏或刪減不必要信息，或者說合理地對(duì)網(wǎng)頁信息進(jìn)行重要層級(jí)排序，讓用戶快速獲取網(wǎng)頁信息。用戶在進(jìn)入網(wǎng)站后，他們大都是會(huì)以瀏覽而不是閱讀的方式搜尋他們需要的信息。所以在網(wǎng)頁界面上，我們應(yīng)該盡量將我們希望用戶首要獲取的信息至于網(wǎng)頁焦點(diǎn)上。

其次，簡(jiǎn)約主義理念指導(dǎo)網(wǎng)頁界面的設(shè)計(jì)能減小對(duì)用戶的視覺干擾。簡(jiǎn)約主義的一個(gè)核心思想就是合理隱藏和刪減不必要的信息，而為了達(dá)到這一目的，留白是一種行之有效的手段。在網(wǎng)頁中的空白也是一種設(shè)計(jì)元素，留白的位置就像一種虛空間。這種虛空間不是毫無意義的，正是有了這種空間，才能夠使觀者疲勞的視覺得到緩解，能夠使作品展現(xiàn)出唯美的意境，利用空白給用戶留下一個(gè)無盡的想象空間，能夠使作品更具有視覺張力[2]。通過對(duì)網(wǎng)頁信息的合理規(guī)范與刪減，我們?cè)诰W(wǎng)頁設(shè)計(jì)中應(yīng)用簡(jiǎn)約主義進(jìn)行指導(dǎo)能提高網(wǎng)頁信息的傳導(dǎo)效果

（三）簡(jiǎn)約主義是網(wǎng)頁界面設(shè)計(jì)的潮流

自密斯定律“少即是多”的提出，簡(jiǎn)約主義的設(shè)計(jì)理念廣為受眾喜愛。它摒棄了一切無關(guān)的要素和多余的浪費(fèi)，以輕快、簡(jiǎn)明的設(shè)計(jì)風(fēng)格一擊即中用戶訴求。現(xiàn)今我們處在一個(gè)視覺信息泛濫的時(shí)代，我們?cè)絹碓街匾曀�謂的“軟設(shè)計(jì)”，如界面、交互、服務(wù)系統(tǒng)等。人們希望作為視覺信息主體來源的網(wǎng)絡(luò)能夠做到簡(jiǎn)潔、明快，這樣信息傳遞的效能才越來越高。

簡(jiǎn)約主義作為一種行之有效的表現(xiàn)形式，其藝術(shù)性也很高。在網(wǎng)頁界面設(shè)計(jì)過程中運(yùn)用簡(jiǎn)約主義來進(jìn)行指導(dǎo)們，可以達(dá)到網(wǎng)頁界面同時(shí)具備可用性和藝術(shù)性。用戶在瀏覽網(wǎng)頁的過程中不但可以得到良好的用戶體驗(yàn)而且還有絕佳的審美體驗(yàn)。在如今節(jié)奏的生活狀態(tài)下，人們渴望回歸本真，摒棄多余和繁雜，而簡(jiǎn)約快主義的設(shè)計(jì)理念正好符合人們所需。

三、簡(jiǎn)約主義設(shè)計(jì)理念對(duì)網(wǎng)頁界面設(shè)計(jì)的原則

（一）合理取舍

簡(jiǎn)約主義的設(shè)計(jì)風(fēng)格核心目標(biāo)是去除多余元素、色彩等，追求簡(jiǎn)明清晰的網(wǎng)頁效果，高效地向用戶傳達(dá)有用信息，將用戶的視覺中心點(diǎn)引導(dǎo)到關(guān)鍵信息上，聚焦網(wǎng)頁的關(guān)鍵信息點(diǎn)。這里所說的合理取舍含義是為了強(qiáng)調(diào)，簡(jiǎn)約主義理念不代表去除一切，盡量簡(jiǎn)化，而是我們?cè)诰W(wǎng)頁界面設(shè)計(jì)中要學(xué)會(huì)合理取舍，將重要信息優(yōu)先曝光在用戶的視覺世界里，相對(duì)不重要的信息我們可以隱藏或者去除，做到在保證網(wǎng)頁可用，好用的前提下，為用戶減負(fù)，提升用戶體驗(yàn)，讓用戶在使用網(wǎng)頁瀏覽信息或獲取信息的過程中成為一種享受，而愿意長(zhǎng)時(shí)間停留在網(wǎng)頁界面。在合理取舍中，我們要關(guān)注的具體信息包括有：網(wǎng)頁的色彩、設(shè)計(jì)元素、文字的精簡(jiǎn)、還有版面的留白處理手段等。例如，人們?cè)跒g覽一個(gè)網(wǎng)頁出現(xiàn)大量可以視作無效信息的文字時(shí)，他們大都一掃而過，不會(huì)在網(wǎng)頁上閱讀，因?yàn)樗麄儠?huì)覺得這樣的大段文字他們寧愿在紙質(zhì)上閱讀來的輕松。又例如，對(duì)于瀏覽一個(gè)沒有絲毫留白，排版布局密密麻麻的網(wǎng)頁，用戶會(huì)覺得根本無從下手，一個(gè)頁面如果什么信息都想強(qiáng)調(diào)必定什么信息都強(qiáng)調(diào)不了，對(duì)于我們希望用戶真正首頁了解的信息，我們可以在網(wǎng)頁留白的情況下，將要突出的信息曝光于空白背景下，著重提出來，然后一步一步引導(dǎo)用戶獲取后面的重要信息。

（二）簡(jiǎn)單清晰地組織視覺要素

在進(jìn)行網(wǎng)頁界面設(shè)計(jì)時(shí)，在簡(jiǎn)約主義的指導(dǎo)下我們也應(yīng)該簡(jiǎn)單清晰地組織好視覺要素。我們應(yīng)該對(duì)網(wǎng)頁界面信息進(jìn)行合理的分類、組合、刪減。將網(wǎng)頁信息進(jìn)行分類是為了用戶在瀏覽網(wǎng)頁時(shí)能快速把握網(wǎng)頁結(jié)構(gòu)，迅速找到關(guān)鍵信息。減少類別，合理組合和刪減不意味網(wǎng)頁信息含量減少，只是把關(guān)鍵的有效信息布置在一個(gè)相對(duì)簡(jiǎn)單的布局中。在組織視覺要素過程中我們可以通過構(gòu)建一個(gè)簡(jiǎn)明清晰的首頁開始，其次配色不宜過多、除了品牌要求應(yīng)盡量做到簡(jiǎn)潔明快。

（三）網(wǎng)頁各界面風(fēng)格統(tǒng)一

網(wǎng)頁界面層級(jí)眾多，我們應(yīng)該做到保持網(wǎng)頁各界面風(fēng)格保持統(tǒng)一。用戶通過首頁或者網(wǎng)頁鏈接進(jìn)入網(wǎng)頁界面的任意層級(jí)，如果各界面風(fēng)格不統(tǒng)一必定影響對(duì)網(wǎng)頁信息的認(rèn)知和解讀。統(tǒng)一的界面風(fēng)格能夠加強(qiáng)用戶的記憶和認(rèn)知，提高用戶搜尋他們想要地信息的效率。對(duì)于界面風(fēng)格的統(tǒng)一，我們應(yīng)該做到同樣元素位置和大小盡量保持一致，配色方案整體保持一致，同類別的設(shè)計(jì)元素風(fēng)格保持一致等等。

四、簡(jiǎn)約主義設(shè)計(jì)理念下網(wǎng)頁界面設(shè)計(jì)的誤區(qū)

在對(duì)網(wǎng)頁進(jìn)行界面設(shè)計(jì)的過程中，容易出現(xiàn)一些只在乎形式不在乎功能的過度或者錯(cuò)誤表現(xiàn)，在此簡(jiǎn)要闡述下簡(jiǎn)約主義設(shè)計(jì)理念下網(wǎng)頁界面設(shè)計(jì)的誤區(qū)。

首先，簡(jiǎn)約主義容易被理解極端化而造成為了簡(jiǎn)化而簡(jiǎn)化，忽視網(wǎng)頁功能性，光有亮麗的外表，反倒使得用戶體驗(yàn)變差。不考慮用戶瀏覽網(wǎng)頁獲取信息的認(rèn)知過程，而是簡(jiǎn)單追求網(wǎng)頁簡(jiǎn)約主義設(shè)計(jì)的“簡(jiǎn)化”版式原則，必定踏入誤區(qū)，那么網(wǎng)頁界面設(shè)計(jì)必定低效致使無效。

其次，簡(jiǎn)約主義在現(xiàn)今收到各界認(rèn)同和追捧，設(shè)計(jì)師們?nèi)菀渍`入“非簡(jiǎn)約不設(shè)計(jì)“的境地，僅僅在字面意思上理解“簡(jiǎn)約主義”，盲從簡(jiǎn)約主義理論，妄想顛覆網(wǎng)頁設(shè)計(jì)的基本原則，而致使網(wǎng)頁界面設(shè)計(jì)概念化。

五、結(jié)語

網(wǎng)頁界面設(shè)計(jì)中應(yīng)用簡(jiǎn)約主義來指導(dǎo)不是簡(jiǎn)單簡(jiǎn)化元素，而是合理規(guī)劃與取舍界面元素，對(duì)于網(wǎng)頁界面設(shè)計(jì)來說，設(shè)計(jì)師應(yīng)該理解為用簡(jiǎn)約主義來指導(dǎo)網(wǎng)頁設(shè)計(jì)是一種提升用戶視覺體驗(yàn)和提升網(wǎng)站可用性的有效途徑，是以“用戶為中心”的。我們應(yīng)該多多學(xué)習(xí)國(guó)內(nèi)外簡(jiǎn)約主義風(fēng)格網(wǎng)頁設(shè)計(jì)的成功案例，認(rèn)真對(duì)簡(jiǎn)約主義理論概念進(jìn)行學(xué)習(xí)，把實(shí)踐和理論結(jié)合起來形成自己的設(shè)計(jì)觀，不斷發(fā)展總結(jié)簡(jiǎn)約主義的網(wǎng)頁界面設(shè)計(jì)實(shí)踐方法與原則，提升網(wǎng)頁界面的用戶體驗(yàn)。（作者單位：中南大學(xué)建筑與藝術(shù)學(xué)院藝術(shù)設(shè)計(jì)系）

參考文獻(xiàn)：

網(wǎng)頁界面設(shè)計(jì)論文范文第2篇

關(guān)鍵詞：格式塔 網(wǎng)頁設(shè)計(jì) 視知覺

引言

格式塔一詞來源于德文“gestalt”的音譯，本意指的是形式、形狀、方式、實(shí)質(zhì)。格式塔心理學(xué)是一種與藝術(shù)有緣的心理學(xué)理論，其主要目標(biāo)是探討視覺感知及其與學(xué)習(xí)、思維的關(guān)系，它所研究的出發(fā)點(diǎn)就是“形”，“形”是經(jīng)由知覺活動(dòng)組織成的經(jīng)驗(yàn)中的整體，與視知覺活動(dòng)密不可分。而網(wǎng)頁界面設(shè)計(jì)是視覺傳達(dá)設(shè)計(jì)向網(wǎng)絡(luò)媒體的延伸，主要是通過瀏覽者的視覺感知來接受網(wǎng)站信息。因此，研究格式塔理論在網(wǎng)頁界面設(shè)計(jì)中的運(yùn)用，無疑對(duì)網(wǎng)頁界面的設(shè)計(jì)具有很大的指導(dǎo)作用。

格式塔理論在網(wǎng)頁界面設(shè)計(jì)中的應(yīng)用

網(wǎng)頁設(shè)計(jì)是將特定的視覺信息要素，根據(jù)主題表達(dá)的需求在特定的頁面上進(jìn)行的一種編輯和安排，其基礎(chǔ)是視覺生理學(xué)和視覺心理學(xué)。格式塔心理學(xué)派通過對(duì)視覺感知的生理研究，提出了一系列視感知規(guī)律，其中包含了“圖底”這個(gè)核心概念，和“簡(jiǎn)明原則”“接近原則”“相似原則”“閉合原則”等視感知特性，將這些規(guī)律引入頁面設(shè)計(jì)，有助于我們優(yōu)化視覺時(shí)代“形象過剩”狀態(tài)下盲目的網(wǎng)頁設(shè)計(jì)，提高信息傳達(dá)的速度與準(zhǔn)確度。

1.圖與底

在人的知覺系統(tǒng)中最基本的一種知覺能力是在圖形與背景間作出區(qū)分�！皥D”是居于前部的區(qū)域，“底”被看成是用來襯托圖的背景。相對(duì)而言，圖比底，輪廓較為完整、封閉，形狀較為規(guī)則，面積比較小，色彩比較鮮艷；此外，更重要的是，能組織成為一定意義的區(qū)域傾向于被感覺成圖。

由于圖與底之間存在的這種相對(duì)性質(zhì)，在網(wǎng)頁設(shè)計(jì)中，應(yīng)當(dāng)明確區(qū)分圖與底，主體與背景。另外,主體自身結(jié)構(gòu)要清晰明了，背景不能過于復(fù)雜，這樣才有利于瀏覽者辨別需要了解的信息。在背景的色彩搭配上應(yīng)盡量選用同一色系的顏色，盡量避免同時(shí)使用色相環(huán)中相對(duì)的顏色，大面積同一顏色宜采用低對(duì)比度，避免用強(qiáng)烈刺激的顏色引起瀏覽者的視覺疲勞與厭煩情緒。格式塔理論的圖－底規(guī)則不僅說明了主體從背景中分離出來的條件,而且指出了背景在一個(gè)格式塔中的重要作用。因此在網(wǎng)頁設(shè)計(jì)中我們同樣不能忽視背景的作用，圖形是依賴于背景而存在的，要使主體感到存在，必然要有底將它襯托出來。因此無論在文字、色彩、圖像，還是動(dòng)畫和視頻方面都要堅(jiān)持圖底原則。

2.簡(jiǎn)明原則

格式塔心理學(xué)家認(rèn)為，人們的知覺有一種“簡(jiǎn)化”傾向，所謂簡(jiǎn)化并非僅指一般意義上的“簡(jiǎn)單”，即物體中包含的成分少或成分之間的關(guān)系簡(jiǎn)單，而是一種將任何刺激以盡可能簡(jiǎn)單的機(jī)構(gòu)組織起來的傾向。我們的眼睛只能接受少數(shù)幾個(gè)不相關(guān)聯(lián)的整體單位，如果一個(gè)格式塔中包括太多不相關(guān)的單位，眼睛就會(huì)試圖將其簡(jiǎn)化，把各個(gè)單位加以組合，使之成為一個(gè)知覺上易于處理的整體，否則，整體形象將無法被正確感知，這種形象勢(shì)必會(huì)被人們忽視，以至拒絕接受。

我們可以將這一觀點(diǎn)延伸到網(wǎng)頁界面設(shè)計(jì)中。首先，在網(wǎng)頁界面結(jié)構(gòu)的設(shè)計(jì)上，應(yīng)避免使用過于復(fù)雜的網(wǎng)格結(jié)構(gòu)，結(jié)構(gòu)的設(shè)置應(yīng)盡量簡(jiǎn)單明了，符合人的視覺流程，也符合人們對(duì)規(guī)則形的喜好，利于瀏覽者以最短的時(shí)間找到最需要的信息。

其次，在圖像的選擇上，應(yīng)避免使用過于繁復(fù)雜亂的、容易分散瀏覽者注意力的圖像，這樣會(huì)增加瀏覽者找尋信息的難度。

再次，在進(jìn)行文字編輯時(shí)，應(yīng)該考慮編輯的最終效果。文字應(yīng)給人以清晰的視覺印象，避免頁面繁雜凌亂，減少不必要的裝飾變化，使人易認(rèn)、易懂、易讀，不能為造型而編輯，忘記了文字本身是傳達(dá)內(nèi)容和表達(dá)信息的主體。在字體的選擇上，雖然可供選擇的字體很多，但同一頁面上的字體種類最多只能有三四種，這樣才不會(huì)顯得花哨。字體的選擇應(yīng)依據(jù)段落大小和內(nèi)容層次,由重到輕、由粗到細(xì)。字號(hào)的選擇也應(yīng)該依據(jù)內(nèi)容層次由大到小，但到了節(jié)以下的層面，可以選用同一字號(hào)但用不同的字體加以區(qū)分。在文本密度方面，文本應(yīng)該以短小的組塊形式出現(xiàn)，并且應(yīng)該經(jīng)過編輯，以簡(jiǎn)化內(nèi)容。

3.接近原則和相似原則

接近原則和相似原則的本質(zhì)上都是簡(jiǎn)化和整體化知覺對(duì)象的組織原則，與前面的簡(jiǎn)明原則類似，人們?cè)趦A向于簡(jiǎn)化認(rèn)識(shí)對(duì)象的同時(shí)，也傾向于將近似、接近的元素組合起來作為一個(gè)整體加以認(rèn)知。也就是說如果不同的文字或圖形組成部分位置靠近，瀏覽者就比較容易看出它們是一起的。根據(jù)這一原理，對(duì)于頁面上的任何元素，如果在功能或內(nèi)容上是相同或相近的，就應(yīng)在一定程度上保持相對(duì)較小的空間距離，做到“物以類聚”。比如，頁面中用以解釋圖形或用以表明某一部分圖形的文字就應(yīng)當(dāng)緊挨其所指的圖形或部分圖形。

相似的物體也很容易被認(rèn)為是從屬于一個(gè)系統(tǒng)，具有相似的功能。因而，需要通過將瀏覽者注意力集中于視覺范圍內(nèi)的關(guān)鍵概念，幫助他們獲得信息。在網(wǎng)頁界面設(shè)計(jì)中，可以通過強(qiáng)調(diào)、動(dòng)畫、對(duì)比色的使用或其他手段達(dá)到這一目的。假如一個(gè)圖形中的組成部分都屬于同一風(fēng)格，這個(gè)圖形就被視為一個(gè)整體。為了使瀏覽者重點(diǎn)關(guān)注圖形中的特定部分，對(duì)這一部分可采用不同的顏色、動(dòng)畫、閃爍或其他區(qū)分方式。但是，如果一幅畫面中區(qū)別過多，也會(huì)使瀏覽者難以注意需要獲得的信息。因此，這些方法應(yīng)該用于強(qiáng)調(diào)關(guān)鍵信息或圖形的關(guān)鍵部分，而不宜用于大片信息。

4.閉合原則與網(wǎng)頁界面設(shè)計(jì)

閉合原則是指一種完成某種完形的行動(dòng)。這一規(guī)則表明，每一種視覺樣式都可以被看成是一種陳述，對(duì)于模棱兩可的視覺樣式，人們會(huì)根據(jù)以往的經(jīng)驗(yàn)按照不同的樣式加以組織，這時(shí)不同的人會(huì)看到不同的東西。因此，在網(wǎng)頁界面設(shè)計(jì)時(shí),應(yīng)當(dāng)避免出現(xiàn)不完整的圖形，以免使瀏覽者花費(fèi)過多的時(shí)間去琢磨圖形的含義，而不是從網(wǎng)頁上獲取信息。

閉合規(guī)則還表明,視覺形象被知覺的形式是首先作為一個(gè)統(tǒng)一的整體被知覺，然后再以部分的形式被知覺。因此，在進(jìn)行網(wǎng)頁界面設(shè)計(jì)時(shí)，要強(qiáng)調(diào)整體風(fēng)格的統(tǒng)一，內(nèi)容與形式的統(tǒng)一。

結(jié)語

將格式塔心理學(xué)引入網(wǎng)頁界面設(shè)計(jì)，目的是希望網(wǎng)頁設(shè)計(jì)向理性化的方向發(fā)展。隨著網(wǎng)絡(luò)的不斷發(fā)展，瀏覽者對(duì)頁面的要求也越來越高，但現(xiàn)在的頁面設(shè)計(jì)大多還是從直覺出發(fā)，離科學(xué)的頁面設(shè)計(jì)還有相當(dāng)大的距離，因此要想達(dá)到科學(xué)的頁面設(shè)計(jì)，就要在設(shè)計(jì)時(shí)遵照人類的認(rèn)知規(guī)律，并且將這些規(guī)律正確地應(yīng)用到設(shè)計(jì)實(shí)踐中。而如何將格式塔理論與設(shè)計(jì)結(jié)合起來,仍是我們需要投入大量精力去研究與探討的問題。

參考文獻(xiàn) ：

[1]曹方著.視覺傳達(dá)設(shè)計(jì)原理，江蘇美術(shù)出版社

[2]卡爾·考夫卡著，黎煒譯.格式塔心理學(xué)原理.浙江教育出版社

網(wǎng)頁界面設(shè)計(jì)論文范文第3篇

【關(guān)鍵詞】： 網(wǎng)界面；設(shè)計(jì)；應(yīng)用；體驗(yàn)；

1、網(wǎng)頁界面設(shè)計(jì)的現(xiàn)狀和問題

近年來，隨著網(wǎng)絡(luò)的廣泛普及，網(wǎng)站已然成為人們吸收了解外界的載體，人們通過上網(wǎng)瀏覽網(wǎng)頁便可以做到足不出戶就可以獲得所需要的信息和物品，網(wǎng)購(gòu)行業(yè)也隨之快速的發(fā)展起來，這是因?yàn)榫W(wǎng)頁可以承載圖片、色彩、文字等多種元素，能夠提供給瀏覽者足夠的信息，方便了人們的生活。但是網(wǎng)頁設(shè)計(jì)迅猛發(fā)展的同時(shí)，也產(chǎn)生了整體水平良莠不齊的問題：1.信息多且雜亂無序，把相關(guān)的信息和元素全部羅列出來，不分層次和重點(diǎn)，沒有規(guī)范性，有多少內(nèi)容就擠多少內(nèi)容，使瀏覽者難以快速找到所需信息；2.喧賓奪主的設(shè)計(jì)，使用花哨的圖案作為背景，干擾讀者的視線。有些網(wǎng)站為了追求視覺的沖擊力，放一些絢麗的，風(fēng)格各異的圖片，導(dǎo)致網(wǎng)頁調(diào)性不統(tǒng)一，整體性差；3.一味的追求視覺美感而忽略網(wǎng)站的實(shí)用性，凸顯不出產(chǎn)品的優(yōu)勢(shì)和特點(diǎn)，缺少與瀏覽者的互動(dòng)性。視覺效果固然重要，但是一味的追求視覺效果是否真的能夠提高網(wǎng)站瀏覽量和產(chǎn)品銷售量？

我認(rèn)為網(wǎng)頁界面設(shè)計(jì)應(yīng)該符合美觀性和實(shí)用性雙重要求。簡(jiǎn)約主義下的網(wǎng)頁設(shè)計(jì)已經(jīng)不能單純的追求信息承載量，有一些網(wǎng)站把企業(yè)簡(jiǎn)介、企業(yè)榮譽(yù)和資質(zhì)，全都展現(xiàn)在一級(jí)頁面的位置，長(zhǎng)篇大論的寫公司的優(yōu)勢(shì)獲得的榮譽(yù)，希望消費(fèi)者一下子就能夠了解自己的公司實(shí)力，反而將消費(fèi)者更加關(guān)注的各類產(chǎn)品和主要信息模糊放在在一起，看似信息多了豐富了，效果卻恰恰相反，這讓很多消費(fèi)者很難在網(wǎng)站里快速找到所需的信息，瀏覽者更是不會(huì)看長(zhǎng)篇的介紹，這不僅沒有讓消費(fèi)者了解自己，還會(huì)引起消費(fèi)者的反感導(dǎo)致銷量減少。簡(jiǎn)約主義下的網(wǎng)頁設(shè)計(jì)也不能夠單純的追求色彩，絢麗畫面，過多的顏色會(huì)擾亂消費(fèi)者的視線，找不到重點(diǎn)，反而體會(huì)不到視覺的美感，從而降低了用戶體驗(yàn)。

2、簡(jiǎn)約主義在網(wǎng)站設(shè)計(jì)中的應(yīng)用（結(jié)合蘋果官網(wǎng)分析）

簡(jiǎn)約主義源于是20世紀(jì)西方現(xiàn)代主義，歐洲現(xiàn)代主義建筑大師與設(shè)計(jì)大師米斯?凡德羅所提出的“少即是多”的理論，換句話說就是把設(shè)計(jì)簡(jiǎn)化，強(qiáng)調(diào)它本身內(nèi)在的東西。這一理論被稱為簡(jiǎn)約主義的核心。當(dāng)今社會(huì)，人們工作強(qiáng)度高，節(jié)奏快生活壓力大，人們需要一種可以互補(bǔ)的東西來調(diào)節(jié)神經(jīng)高壓。簡(jiǎn)約主義以簡(jiǎn)潔的表現(xiàn)形式來滿足人們對(duì)產(chǎn)品那種感性的、本能的和理性的需求，符合了當(dāng)今人們快節(jié)奏、高效率和高審美的要求，越來越多的設(shè)計(jì)師把眼光放在了簡(jiǎn)約主義風(fēng)格的設(shè)計(jì)上，網(wǎng)頁設(shè)計(jì)在簡(jiǎn)約主義風(fēng)格的影響下也發(fā)展迅速。以蘋果官網(wǎng)為例，蘋果公司一直追求簡(jiǎn)而精的風(fēng)格――簡(jiǎn)約主義風(fēng)格。自喬布斯iPhone4，蘋果官網(wǎng)界面設(shè)計(jì)風(fēng)格越發(fā)簡(jiǎn)約。蘋果官網(wǎng)新推出的產(chǎn)品――蘋果7為例，風(fēng)格依舊遵循著簡(jiǎn)約風(fēng)格，整個(gè)頁面除了黑色，找不到其它的色彩，網(wǎng)頁上沒有放置很多的文字內(nèi)容，也沒有很多絢麗的圖片和色彩，通過極致的黑色和幾根流暢的線條充分的展現(xiàn)出蘋果7的簡(jiǎn)約奢華和精致，一張滿屏幕的產(chǎn)品大圖不用長(zhǎng)篇文字的描述就已經(jīng)讓人感受到蘋果公司強(qiáng)大的實(shí)力，這種簡(jiǎn)約風(fēng)格的形式遠(yuǎn)比那些人們從不會(huì)去閱讀的長(zhǎng)篇大論更有力量！更有說服力！更加吸引瀏覽者的眼球！大大增強(qiáng)了消費(fèi)者的購(gòu)買欲望。然而單純的追求簡(jiǎn)約主義設(shè)計(jì)風(fēng)格，簡(jiǎn)約的畫面和幾張高精大圖就是提高網(wǎng)頁瀏覽量和銷售量的關(guān)鍵嗎？顯然不是。

3、簡(jiǎn)約主義風(fēng)格下如何與瀏覽者產(chǎn)生互動(dòng)，提高用戶體驗(yàn)

簡(jiǎn)約的畫面只是網(wǎng)站設(shè)計(jì)最終顯示出的效果，在網(wǎng)站設(shè)計(jì)過程中不僅僅只是考慮網(wǎng)站設(shè)計(jì)的畫面效果，當(dāng)然畫面效果也很重要，但更重要的是要考慮消費(fèi)者和瀏覽者在瀏覽網(wǎng)頁的時(shí)候能否產(chǎn)生良好互動(dòng)和用戶體驗(yàn)。在簡(jiǎn)約主義風(fēng)格下，如何才能與瀏覽者產(chǎn)生互動(dòng)，提高用戶體驗(yàn)?zāi)兀?.增加細(xì)節(jié)的設(shè)計(jì)。細(xì)節(jié)決定成敗，網(wǎng)頁設(shè)計(jì)也是如此。2. 建立清晰的視覺信息導(dǎo)向，使瀏覽者在眾多同類產(chǎn)品中能夠快速明確的定位所需要的信息。

簡(jiǎn)約主義下的網(wǎng)頁設(shè)計(jì)不是空洞的，單調(diào)的而是讓人感受舒適、放松的設(shè)計(jì)。簡(jiǎn)約主義風(fēng)格的網(wǎng)頁設(shè)計(jì)細(xì)節(jié)處理是非常重要的。如何才能做到網(wǎng)站設(shè)計(jì)細(xì)節(jié)豐富，版式簡(jiǎn)約，有內(nèi)涵而不繁瑣，有形式而又實(shí)用呢？ 以云米官網(wǎng)為例，云米凈水器網(wǎng)頁設(shè)計(jì)綜合了視覺、布局、交互綜合設(shè)計(jì)方法。用扁平化的圖標(biāo)設(shè)計(jì)代替了人們看不懂的數(shù)據(jù)表格，因?yàn)楫a(chǎn)品特點(diǎn)和優(yōu)勢(shì)不僅僅是一句話就能夠讓人信服的，需要用人們能理解的語言展示出來，才更有說服力。用圖片的形式展示產(chǎn)品結(jié)構(gòu)更清晰更加直觀，從視覺上提升了科技感和沖擊性。將實(shí)用性與美觀性相結(jié)合，畫面更加簡(jiǎn)約，細(xì)節(jié)處理更加豐富，更加吸引瀏覽者的眼球。讓消費(fèi)者看到這樣的產(chǎn)品就產(chǎn)生一種感覺――買！

良好的可用性和清晰的視覺信息導(dǎo)向引導(dǎo)消費(fèi)者快捷簡(jiǎn)便的定位到所需要的信息，增強(qiáng)用戶的體驗(yàn)。網(wǎng)頁信息篩選也決定了消費(fèi)者瀏覽網(wǎng)頁所耗費(fèi)的時(shí)間，云米官網(wǎng)一級(jí)頁面展示了品牌故事，超能凈水器，超能濾芯，全屋凈化以及生活周邊。當(dāng)瀏覽者鼠標(biāo)放在所需要的類別時(shí)，網(wǎng)頁在一級(jí)界面自動(dòng)拉出小的產(chǎn)品框，方便消費(fèi)者快速找到所需要的產(chǎn)品。二級(jí)頁面直接的展示出產(chǎn)品以及產(chǎn)品細(xì)節(jié)各類信息，高清晰、高品質(zhì)產(chǎn)品細(xì)節(jié)圖更加具有吸引力，讓人一下感受到產(chǎn)品的品質(zhì)。

結(jié)論

當(dāng)下，國(guó)內(nèi)網(wǎng)頁仍存在著很多的問題，在簡(jiǎn)約主義風(fēng)格的帶動(dòng)下越來越多的設(shè)計(jì)開始關(guān)注并且完善網(wǎng)頁設(shè)計(jì)的美觀性與實(shí)用性的結(jié)合，以提高客戶體驗(yàn)和互動(dòng)性為目標(biāo)，用簡(jiǎn)明易懂的圖形文字組合代替長(zhǎng)篇的數(shù)據(jù)，把“簡(jiǎn)而精”的概念融入到網(wǎng)頁設(shè)計(jì)中去。

【參考文獻(xiàn)】：

網(wǎng)頁界面設(shè)計(jì)論文范文第4篇

關(guān)鍵詞：平面設(shè)計(jì);網(wǎng)頁設(shè)計(jì);課程教學(xué);改革

隨著“互聯(lián)網(wǎng)+”國(guó)家策略的大力推進(jìn)，我國(guó)社會(huì)發(fā)展急需大量?jī)?yōu)秀的互聯(lián)網(wǎng)人才，而網(wǎng)頁設(shè)計(jì)人才是互聯(lián)網(wǎng)人才的重要組成部分。為了配合國(guó)家戰(zhàn)略實(shí)施，目前國(guó)內(nèi)各大高校紛紛把網(wǎng)頁設(shè)計(jì)設(shè)置為平面設(shè)計(jì)專業(yè)高年級(jí)學(xué)生的必修課程。然而，隨著近年來平面設(shè)計(jì)高等教育的不斷擴(kuò)招，以往的課程體系和教學(xué)方法已無法滿足當(dāng)代和未來社會(huì)對(duì)網(wǎng)頁設(shè)計(jì)人才的要求，而忽視市場(chǎng)需求的人才培養(yǎng)模式也會(huì)使人才培養(yǎng)與市場(chǎng)需求間的距離越來越大。所以，對(duì)平面設(shè)計(jì)專業(yè)網(wǎng)頁設(shè)計(jì)課程教學(xué)的探討十分重要。

一、教學(xué)現(xiàn)狀分析

平面設(shè)計(jì)教育在我國(guó)起步雖晚，但發(fā)展迅速，其人才培養(yǎng)方法備受各方關(guān)注。網(wǎng)頁設(shè)計(jì)是一種新興的數(shù)字藝術(shù)，它的創(chuàng)意取決于企業(yè)的文化屬性和互聯(lián)網(wǎng)的特色，它是一種附屬于互聯(lián)網(wǎng)、融合藝術(shù)與技術(shù)的新型設(shè)計(jì)形式，它的界面設(shè)計(jì)從平面設(shè)計(jì)入手，內(nèi)涵卻遠(yuǎn)遠(yuǎn)超出了平面設(shè)計(jì)概念，既要注重界面中的平面構(gòu)成元素，又要考慮用戶體驗(yàn)，還要注重各頁面鏈接的空間關(guān)系和視覺協(xié)調(diào)性，從而成為具有互聯(lián)網(wǎng)特征、綜合性的平面設(shè)計(jì)。目前，國(guó)內(nèi)各大本科院校多依據(jù)所屬專業(yè)確定網(wǎng)頁設(shè)計(jì)課程的教學(xué)側(cè)重點(diǎn)。計(jì)算機(jī)類的側(cè)重代碼編程，注重培養(yǎng)網(wǎng)站后臺(tái)人才；藝術(shù)類的側(cè)重界面規(guī)劃和美化，致力于培養(yǎng)網(wǎng)站前臺(tái)、網(wǎng)頁美工。但各專業(yè)在網(wǎng)頁設(shè)計(jì)課程教學(xué)上主要存在以下兩種現(xiàn)象：一是“輕維護(hù)、重美觀”，培養(yǎng)出的學(xué)生多注重靜態(tài)頁面的藝術(shù)性，不在乎是否有利于后臺(tái)維護(hù)；另一種是“輕線下、重線上”，部分學(xué)生往往只在意屏幕的視覺效果，對(duì)線下互聯(lián)網(wǎng)用戶的需求了解不夠。這導(dǎo)致他們?cè)O(shè)計(jì)的網(wǎng)頁界面看起來很漂亮，鏈接也很流暢，但實(shí)用性不強(qiáng)，更不利于線下產(chǎn)品的開發(fā)。因此，對(duì)平面設(shè)計(jì)專業(yè)網(wǎng)頁設(shè)計(jì)課程教學(xué)進(jìn)行改革勢(shì)在必行。

二、教學(xué)內(nèi)容的調(diào)整

對(duì)于平面設(shè)計(jì)專業(yè)網(wǎng)頁設(shè)計(jì)課程教學(xué)中出現(xiàn)的問題，首先要從教學(xué)內(nèi)容上進(jìn)行調(diào)整。新的教學(xué)內(nèi)容調(diào)整為藝術(shù)理論課程和軟件實(shí)踐課程兩大模塊。

1.藝術(shù)理論課程模塊

藝術(shù)理論課程模塊的知識(shí)點(diǎn)分為三部分：網(wǎng)頁設(shè)計(jì)的功能元素、網(wǎng)頁交互設(shè)計(jì)、網(wǎng)站品牌形象的美學(xué)塑造。網(wǎng)頁設(shè)計(jì)的功能元素是網(wǎng)頁界面設(shè)計(jì)的基礎(chǔ)元件，了解功能元素的特點(diǎn)、作用及各元素之間的相互關(guān)系，對(duì)網(wǎng)頁設(shè)計(jì)工作起著至關(guān)重要的作用。網(wǎng)頁設(shè)計(jì)的功能元素有背景與底紋、按鈕與控件、頁眉與頁腳、導(dǎo)航器和目錄、功能板塊和廣告位等，這些功能元素依靠文字、圖片、色彩、多媒體和超級(jí)鏈接實(shí)現(xiàn)。這些功能元素的形式語言設(shè)計(jì)遵循傳統(tǒng)平面設(shè)計(jì)的設(shè)計(jì)原則，又和傳統(tǒng)平面設(shè)計(jì)有很大不同。如，傳統(tǒng)平面設(shè)計(jì)多以印刷為最終呈現(xiàn)方式，作品尺寸是固定數(shù)值，而網(wǎng)頁設(shè)計(jì)是以用戶的顯示器為最終呈現(xiàn)載體，所以作品的寬度不宜超過顯示器寬度，高度可以任意，但只能顯示一屏的高度，隨著瀏覽者拖動(dòng)滾動(dòng)條，作品的顯示高度隨之變化。用于傳統(tǒng)平面設(shè)計(jì)中的色彩在輸出過程中是以印刷色CMYK形式出現(xiàn)的，而網(wǎng)頁設(shè)計(jì)中的顏色是RGB模式，是標(biāo)準(zhǔn)的光色。因此，教師在此部分教學(xué)中不但要傳授網(wǎng)頁設(shè)計(jì)各功能元素的作用與特點(diǎn)，還應(yīng)該指出它們與傳統(tǒng)平面設(shè)計(jì)中相對(duì)應(yīng)元素的異同，讓學(xué)生在區(qū)別中學(xué)習(xí)。交互設(shè)計(jì)是網(wǎng)頁設(shè)計(jì)最為重要的功能設(shè)計(jì)。交互設(shè)計(jì)源于工業(yè)設(shè)計(jì)的概念，原來的平面設(shè)計(jì)專業(yè)教學(xué)中沒有交互設(shè)計(jì)的內(nèi)容，為了更好地讓教學(xué)內(nèi)容與市場(chǎng)接軌，在調(diào)整后的教學(xué)內(nèi)容中新增了這一知識(shí)點(diǎn)。此部分教學(xué)內(nèi)容包括用戶體驗(yàn)研究、層級(jí)結(jié)構(gòu)設(shè)計(jì)、流程設(shè)計(jì)等，通過模擬用戶上網(wǎng)實(shí)際操作進(jìn)行分析，找出用戶的關(guān)注點(diǎn)，確定網(wǎng)站特色和欄目，將站點(diǎn)ID、欄目、實(shí)用工具、搜索引擎等交互設(shè)計(jì)元素和平面設(shè)計(jì)知識(shí)結(jié)合，將功能設(shè)計(jì)教學(xué)落到實(shí)處。品牌化建設(shè)是企業(yè)視覺形象設(shè)計(jì)的延續(xù)和拓展。和大多數(shù)線下公司一樣，優(yōu)秀的網(wǎng)站也需要塑造品牌形象。從企業(yè)文化和性質(zhì)入手，樹立準(zhǔn)確而獨(dú)特的網(wǎng)站品牌形象，有利于企業(yè)在互聯(lián)網(wǎng)上從同類公司中凸顯出來，提高上網(wǎng)者對(duì)該企業(yè)網(wǎng)站的瀏覽興趣，增強(qiáng)上網(wǎng)者的瀏覽記憶，促進(jìn)該企業(yè)的宣傳推廣。在藝術(shù)理論課程模塊教學(xué)內(nèi)容中應(yīng)滲透品牌形象概念，將此概念應(yīng)用到網(wǎng)頁設(shè)計(jì)的各個(gè)環(huán)節(jié)之中，無論是網(wǎng)頁LOGO、網(wǎng)頁色彩還是版式和導(dǎo)航等設(shè)計(jì)，都應(yīng)該保持品牌形象的一致性。

2.軟件實(shí)踐課程模塊

軟件實(shí)踐課程模塊包含兩部分：“新網(wǎng)頁三劍客”和常用簡(jiǎn)單代碼識(shí)別。Fireworks、Dreamweaver、Flash是傳統(tǒng)意義上的“網(wǎng)頁三劍客”，過去網(wǎng)頁設(shè)計(jì)的教學(xué)基本是對(duì)它們的學(xué)習(xí)。這雖然具有普遍性，但對(duì)不同專業(yè)學(xué)習(xí)的針對(duì)性不強(qiáng)。結(jié)合平面設(shè)計(jì)專業(yè)學(xué)生現(xiàn)有軟件掌握情況（Photoshop是平面設(shè)計(jì)專業(yè)學(xué)生必修基礎(chǔ)軟件，多數(shù)學(xué)生已掌握它的基本操作技巧），把此部分內(nèi)容調(diào)整為“新網(wǎng)頁三劍客（Photoshop+Dreamweaver+Flash）”的學(xué)習(xí)。簡(jiǎn)單地說，就是根據(jù)界面規(guī)劃草圖，用Photoshop制作出精美的靜態(tài)界面效果圖，并在此基礎(chǔ)上再次利用Photoshop軟件進(jìn)行切片、優(yōu)化和輸出Html文檔，用Dreamweaver進(jìn)行版式美化處理和超級(jí)鏈接設(shè)計(jì)，最后用Flash做特效替換，最終做出具備跳轉(zhuǎn)鏈接功能的動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)效果圖。平面設(shè)計(jì)專業(yè)最終制作的網(wǎng)頁設(shè)計(jì)作品需要軟件工程師根據(jù)動(dòng)態(tài)效果圖代碼編程上傳，這樣才能更好地在互聯(lián)網(wǎng)上呈現(xiàn)。為了更好地與后臺(tái)工程師溝通，把動(dòng)態(tài)效果圖設(shè)計(jì)得更準(zhǔn)確，網(wǎng)頁美工師需要了解一些常規(guī)編程代碼知識(shí)，但平面設(shè)計(jì)專業(yè)學(xué)生多是文科生，數(shù)學(xué)和英語的掌握水平普遍不高。對(duì)此，在代碼教學(xué)內(nèi)容上應(yīng)選取一些常用的、簡(jiǎn)單的代碼語言，并結(jié)合Dreamweaver的Html標(biāo)簽和CSS規(guī)則的使用方法，利用框架，對(duì)現(xiàn)有模板進(jìn)行優(yōu)化和美化，提高網(wǎng)頁設(shè)計(jì)動(dòng)態(tài)效果圖的實(shí)用性。

三、以項(xiàng)目教學(xué)方法為載體，提高學(xué)生的實(shí)戰(zhàn)能力

為了提高學(xué)生的實(shí)戰(zhàn)能力，將社會(huì)項(xiàng)目、經(jīng)典案例引入課堂教學(xué)，并分層次逐級(jí)深入。

1.第一級(jí)：精選案例、分解任務(wù)階段

教師應(yīng)該根據(jù)學(xué)生的特點(diǎn)和網(wǎng)頁設(shè)計(jì)所需掌握的相關(guān)知識(shí)點(diǎn)，精選典型實(shí)際案例，引入教學(xué)環(huán)節(jié)。分解項(xiàng)目到每一個(gè)知識(shí)點(diǎn)，邊教邊練，將實(shí)踐和理論有機(jī)結(jié)合，并逐一講解。教師選擇的案例要具有吸引力、綜合性，能涵蓋知識(shí)點(diǎn)，案例不需要多，兩三個(gè)即可。教師在講授案例時(shí)應(yīng)強(qiáng)調(diào)學(xué)生的主體地位，對(duì)學(xué)生進(jìn)行引導(dǎo)和解惑，遵循由淺入深、由易到難的原則，以具體分解任務(wù)作為驅(qū)動(dòng)，進(jìn)行教、學(xué)、練的課堂活動(dòng)。此階段應(yīng)激發(fā)學(xué)生自主學(xué)習(xí)的興趣，培養(yǎng)他們獨(dú)立自主分析、解決問題的能力和實(shí)踐能力。

2.第二級(jí)：項(xiàng)目分工合作階段

此階段將學(xué)生分成若干設(shè)計(jì)小組，幾個(gè)小組共同承擔(dān)一個(gè)項(xiàng)目，每組在項(xiàng)目中的任務(wù)各不相同，各小組分工協(xié)作，大家共同制訂項(xiàng)目計(jì)劃和實(shí)施方案，推舉大組長(zhǎng)為項(xiàng)目總負(fù)責(zé)人，負(fù)責(zé)最終方案的定稿和項(xiàng)目材料的整理。在項(xiàng)目設(shè)計(jì)的整個(gè)環(huán)節(jié)中，每個(gè)小組擁有充分的自，大大地調(diào)動(dòng)了學(xué)生的積極性。各小組成員共同面對(duì)隨時(shí)出現(xiàn)的問題，合作完成任務(wù)。這樣的交流過程使每名學(xué)生都能參與項(xiàng)目設(shè)計(jì)活動(dòng)，提升自主學(xué)習(xí)能力。在這種交流中，所有學(xué)生的思維碰撞出火花，產(chǎn)生新的創(chuàng)意，大大提高了學(xué)生的創(chuàng)造激情和探索沖動(dòng)，加強(qiáng)培養(yǎng)了他們的團(tuán)隊(duì)協(xié)作能力，為他們以后步入社會(huì)打下了基礎(chǔ)。教師在這個(gè)階段應(yīng)該全程監(jiān)控，引導(dǎo)學(xué)生自主解決問題，表揚(yáng)優(yōu)點(diǎn)，發(fā)現(xiàn)不足，匯總各個(gè)組項(xiàng)目實(shí)施中的共性問題，對(duì)共性問題所涉及的理論知識(shí)與軟件操作集中補(bǔ)充講解。

3.第三級(jí)：對(duì)接社會(huì)、校企合作階段

平面設(shè)計(jì)專業(yè)網(wǎng)頁設(shè)計(jì)課程教學(xué)改革的最終目的是為社會(huì)輸出合格的互聯(lián)網(wǎng)網(wǎng)頁設(shè)計(jì)人才，更好地服務(wù)社會(huì)。對(duì)此，平面設(shè)計(jì)專業(yè)網(wǎng)頁設(shè)計(jì)課程教學(xué)對(duì)接社會(huì)、加強(qiáng)校企合作就顯得尤為必要和重要。學(xué)校應(yīng)該根據(jù)自身特點(diǎn)選擇合適的企業(yè)建立教學(xué)實(shí)踐基地，聘請(qǐng)企業(yè)網(wǎng)頁設(shè)計(jì)骨干作為指導(dǎo)教師參與網(wǎng)頁設(shè)計(jì)課程實(shí)踐教學(xué)。學(xué)校也可以組織部分優(yōu)秀學(xué)生組建設(shè)計(jì)團(tuán)隊(duì)，成立工作坊，工作坊可以按照企業(yè)模式管理、運(yùn)營(yíng)，承接校外的網(wǎng)頁設(shè)計(jì)項(xiàng)目。此階段教學(xué)培養(yǎng)學(xué)生的社會(huì)接軌能力，為學(xué)生對(duì)接社會(huì)提供條件，將企業(yè)文化和行業(yè)規(guī)范引入教學(xué)，實(shí)現(xiàn)校企無障礙對(duì)接，真正將理論教學(xué)與實(shí)踐教學(xué)有機(jī)結(jié)合在一起。在計(jì)算機(jī)信息技術(shù)飛速發(fā)展的環(huán)境下，平面設(shè)計(jì)專業(yè)網(wǎng)頁設(shè)計(jì)課程更要緊扣時(shí)代的脈搏，求實(shí)創(chuàng)新，不斷地更新和豐富教學(xué)內(nèi)容，結(jié)合市場(chǎng)發(fā)展趨勢(shì)創(chuàng)新教學(xué)方法，及時(shí)將最新案例和相關(guān)知識(shí)點(diǎn)引入課堂，最終培養(yǎng)出滿足“互聯(lián)網(wǎng)+”國(guó)家戰(zhàn)略實(shí)施需要、具有綜合素養(yǎng)的網(wǎng)頁設(shè)計(jì)高級(jí)應(yīng)用人才。

參考文獻(xiàn)：

[1]（美）賈森•貝爾德.完美網(wǎng)頁的視覺設(shè)計(jì)法則（第2版）.石屹，譯.電子工業(yè)出版社，2023.

[2]范雙南，李希勇，萬宏輝.現(xiàn)代設(shè)計(jì)基礎(chǔ)——21世紀(jì)藝術(shù)設(shè)計(jì)專業(yè)規(guī)劃教材Dreamweaver網(wǎng)頁設(shè)計(jì).北京工藝美術(shù)出版社，2009.

網(wǎng)頁界面設(shè)計(jì)論文范文第5篇

關(guān)鍵詞：網(wǎng)站；網(wǎng)頁；交互

互聯(lián)網(wǎng)信息時(shí)代的發(fā)展為網(wǎng)站設(shè)計(jì)及網(wǎng)站中的人機(jī)界面交互設(shè)計(jì)提供了前所未有的發(fā)展空間，越來越多的軟件和互聯(lián)網(wǎng)公司開始重視網(wǎng)站中的人機(jī)交互和用戶體驗(yàn)在產(chǎn)品中的重要作用。而網(wǎng)站中的用戶界面是用戶和網(wǎng)絡(luò)產(chǎn)生接觸的第一個(gè)窗口，對(duì)于互聯(lián)網(wǎng)產(chǎn)品的用戶體驗(yàn)以及訪問量、注冊(cè)量、銷售額甚至成本等都有至關(guān)重要的影響。

在一個(gè)網(wǎng)站中，網(wǎng)頁上的可交互元素，包括頁面上的按鈕、鏈接、文本框等，更應(yīng)合理設(shè)計(jì)才能帶來好的頁面交互性。那么如何提高網(wǎng)頁的交互性呢，主要是要注意以下幾點(diǎn)。

1 注意網(wǎng)站的鏈接、按鈕和LOGO

一個(gè)網(wǎng)站的鏈接和按鈕都應(yīng)該符合用戶的使用習(xí)慣。目前鏈接文字通用的表現(xiàn)方式是字色藍(lán)色并帶下劃線的文字。而按鈕應(yīng)當(dāng)是有一定的立體感，看上去就是一個(gè)突出的按鈕，一看就知道是可以點(diǎn)擊的。而LOGO是與其它網(wǎng)站鏈接以及讓其它網(wǎng)站鏈接的標(biāo)志和門戶。在通常情況下，通過點(diǎn)擊LOGO可以返回到網(wǎng)站的首頁。所以，LOGO即是一個(gè)網(wǎng)站的名片，LOGO更是網(wǎng)站的靈魂所在，除此之外它還具有一個(gè)重要的導(dǎo)航功能。網(wǎng)站的LOGO作為一個(gè)重要的網(wǎng)頁元素，當(dāng)鼠標(biāo)移上去或者劃過等事件，應(yīng)該有相關(guān)的信息響應(yīng)。

2 網(wǎng)站頁面加載進(jìn)度

網(wǎng)站的每個(gè)鏈接，包括網(wǎng)站的首頁打開都需要時(shí)間加載的，只是某些網(wǎng)站功能較為簡(jiǎn)單，加載起來很快是而無需擔(dān)心頁面延遲。但某些網(wǎng)站的加載往往不能一次性完成，例如淘寶這種大型購(gòu)物平臺(tái)，頁面有很多的商品圖片，加載需要一定時(shí)間，這個(gè)時(shí)候是需要一定的響應(yīng)式的，所以頁面更應(yīng)該給出提示，否則讓用戶等待太久是很不友好的做法。

事實(shí)上，有很多的因素會(huì)影響到網(wǎng)頁初次加載的響應(yīng)時(shí)間：HTML文件的文檔的大�。豁撁嬷械母鞣N元素例如代碼、圖片、flash、音頻、視頻等元素文檔的大��；HTML頁面的復(fù)雜程度（瀏覽器可以很快的展現(xiàn)簡(jiǎn)單的頁面）；用戶反應(yīng)的快慢也會(huì)影響瀏覽速度；被網(wǎng)頁頁面調(diào)用的其他內(nèi)容所在的服務(wù)器的訪問速度；網(wǎng)站的域名和外部域名的DNS的解析速度也會(huì)影響網(wǎng)頁的加載速度；用戶所使用的計(jì)算機(jī)的各種性能（如果計(jì)算機(jī)的資源消耗過多，或者配置過低，瀏覽器也會(huì)變得響應(yīng)緩慢）；服務(wù)器的配置的高低。

除了上述因素會(huì)導(dǎo)致網(wǎng)站響應(yīng)的快慢以外，一些人為的因素及一些硬件也會(huì)影響網(wǎng)頁加載的速度。例如：服務(wù)器端、客戶端和網(wǎng)速。服務(wù)器端主要包括：服務(wù)器的地域，是否雙線，處理能力等。

那么如何提高頁面的瀏覽速度呢？采取以下幾種基本的方法可以有效的提高網(wǎng)頁的瀏覽速度。

（1）在不影響頁面質(zhì)量的前提下，盡可能的優(yōu)先優(yōu)化HTML代碼。（在頁面上傳服務(wù)器之前，先去掉HTML文檔中的沒必要的換行標(biāo)記以及注釋。但為了保證頁面的可讀性和可維護(hù)性，注釋的代碼還應(yīng)當(dāng)保留在源代碼中）。

（2）為了減少文檔之間的依賴，在制作網(wǎng)頁時(shí)頁面中應(yīng)盡可能少的包含其他外部引用。（可以將多個(gè)腳本放入一個(gè)腳本文件，圖片處理的技術(shù)將多個(gè)小圖片合并成為一個(gè)大圖，這樣就只需要加載一次）。

（3）把開發(fā)的網(wǎng)頁里面的字節(jié)減少一些，把沒用的字節(jié)都刪了。盡量多使用div來布局網(wǎng)頁，少使用表格布局。

（4）盡可能的定制圖片及包含圖片的元素的尺寸。讓圖片本身就符合網(wǎng)頁的要求，這樣可以盡量避免頁面展現(xiàn)時(shí)由于圖片不能一次性加載而造成頁面元素跳動(dòng)的現(xiàn)象。

（5）小腳本放在頭元素中，而比較大的腳本則放在頁面的尾端加載，這樣頁面可以在大的腳本加載完成前展示出來。如果把大的腳本放在頁面的頭元素進(jìn)行加載，則瀏覽器會(huì)等到腳本完全加載完成后才顯示頁面內(nèi)容。

3 網(wǎng)頁中應(yīng)隱藏不常用的操作

網(wǎng)站中不經(jīng)常使用的操作可以不用突顯出來，將其弱化或隱藏。例如，網(wǎng)站中有某個(gè)彈出層是幾乎不用到的，為了不對(duì)用戶造成干擾，我可以在當(dāng)鼠標(biāo)經(jīng)過的時(shí)候才出現(xiàn)這個(gè)彈出層。這個(gè)是基于上文提到的不干擾用戶注意力角度出發(fā)的。比如，在新浪微博中，微博的屏幕功能只有在鼠標(biāo)移到對(duì)應(yīng)某條微博的右上角并單擊鼠標(biāo)的時(shí)候才會(huì)彈出操作提示框，否則是看不到屏蔽操作的，這個(gè)就是一個(gè)隱藏操作的具體體現(xiàn)。

4 盡量減少?gòu)棾鲂畔?/p>

為什么要盡量減少?gòu)棾鲂畔⒛�，這里舉一個(gè)例子來說明一下？當(dāng)你正在看一部精彩的電影或看一本精彩的書，這時(shí)接到一個(gè)無實(shí)質(zhì)內(nèi)容的電話，你肯定會(huì)非常惱火。網(wǎng)頁設(shè)計(jì)也是一樣，如果能在當(dāng)前頁面顯示完成就盡量在當(dāng)前頁面加載完成。對(duì)于那些彈出信息，例如彈出層、跳轉(zhuǎn)頁面、模態(tài)窗口等都影響用戶體驗(yàn)。

5 網(wǎng)站對(duì)用戶需要引導(dǎo)-網(wǎng)站導(dǎo)航

一個(gè)好的網(wǎng)站是能夠讓用戶全面瀏覽，所以網(wǎng)站導(dǎo)航十分重要。每個(gè)用戶在瀏覽頁面時(shí)往往都是不確定性的、無規(guī)律的，同時(shí)用戶更不喜歡選擇。所以，網(wǎng)站需要時(shí)刻讓用戶看清當(dāng)前的位置。如果瀏覽者不能快速、便捷地找到它，他們就很有可能去別的網(wǎng)站。例如，很多博客網(wǎng)站除了首頁導(dǎo)航之外，還將分類作為第二導(dǎo)航放在頁面的邊欄。此外，網(wǎng)站的頁腳也很重要，因?yàn)橛胁糠钟脩魹g覽時(shí)接觸到的是網(wǎng)站的底部，這個(gè)時(shí)候網(wǎng)站的頁腳可以方便的讓用戶找到當(dāng)前的站點(diǎn)位置。

一直以來，網(wǎng)頁界面設(shè)計(jì)的研究主要針對(duì)于視覺方面，而設(shè)計(jì)的內(nèi)容、流程和原則虛擬了實(shí)物產(chǎn)品的設(shè)計(jì)，基本上沒有太大的改變。隨著信息科技的發(fā)展和人機(jī)交互技術(shù)的成熟，交互界面的設(shè)計(jì)已經(jīng)成長(zhǎng)為一個(gè)獨(dú)立的行業(yè)。本文闡述了基于增強(qiáng)現(xiàn)實(shí)的交互界面概念，分析了其突出特點(diǎn)，總結(jié)歸納交互界面設(shè)計(jì)的流程與原則。交互界面設(shè)計(jì)是一個(gè)全新而又復(fù)雜的研究領(lǐng)域，本文的研究?jī)H僅是交互界面設(shè)計(jì)的冰山一角，如何將交互界面設(shè)計(jì)的理論特性分析清楚、理解透徹，還得依靠同行們的不懈努力和大量實(shí)踐，使用戶和網(wǎng)絡(luò)的信息交流更加簡(jiǎn)便、高效和人性化。

【基金項(xiàng)目：本研究為校級(jí)創(chuàng)新團(tuán)隊(duì)項(xiàng)目：互聯(lián)網(wǎng)背景下的圖形用戶界面設(shè)計(jì)研究。】

參考文獻(xiàn)

[1] AlbertMehrabian.Analysis of the Bigfive Personality Factors in Terms of the PAD Temperament

Model[J]. Australian Journal of Psychology.2023（2）.

[2] 高榛.網(wǎng)絡(luò)游戲中的用戶交互設(shè)計(jì)[J].戲劇之家（上半月）.2023（01）.

[3] 歐陽建軍.基于交互設(shè)計(jì)的界面應(yīng)用研究[J].科教導(dǎo)刊（中旬刊）.2023（04）.