前言：尋找寫作靈感？中文期刊網(wǎng)用心挑選的視覺傳達在高校網(wǎng)站設(shè)計中應(yīng)用，希望能為您的閱讀和創(chuàng)作帶來靈感，歡迎大家閱讀并分享。

摘要：文章對高校網(wǎng)站建設(shè)中視覺傳達設(shè)計的概念、功能、意義等進行具體闡釋，分析界面設(shè)計中視覺傳達的審美需求、特征及理念。從網(wǎng)站的設(shè)計原則、色彩需求特性、文字版式、框架風(fēng)格等多角度出發(fā)，探討高校在網(wǎng)站建設(shè)中視覺傳達設(shè)計具體應(yīng)用。運用計算機、設(shè)計學(xué)、美學(xué)等方法，解決技術(shù)與藝術(shù)的深度融合，給出網(wǎng)站設(shè)計方案，滿足用戶視覺體驗、易操作性個性化需求，探索藝術(shù)與技術(shù)高度結(jié)合的網(wǎng)站建設(shè)新模式，為網(wǎng)站設(shè)計者的實踐提供可行性參考。

關(guān)鍵詞：網(wǎng)站；界面設(shè)計；視覺傳達；美學(xué)元素

網(wǎng)站界面的視覺表現(xiàn)力對用戶有著最直觀的影響，也是網(wǎng)站建設(shè)成功的關(guān)鍵，用戶的網(wǎng)站訪問體驗與感受亦是通過網(wǎng)站的視覺設(shè)計效果進一步表達出來。在網(wǎng)站建設(shè)過程中除了展示、易用、傳達信息基本功能外，更要舒適的界面的視覺設(shè)計來增加用戶的關(guān)注度，提升用戶吸引力，實現(xiàn)高校教育教學(xué)信息與視覺元素的協(xié)調(diào)性、系統(tǒng)性、整體性的有效整合。

1視覺傳達

視覺傳達設(shè)計主要利用視覺符號來進行傳達信息，注重審美效果的設(shè)計元素以視覺的形式表達出來，網(wǎng)站設(shè)計師通過視覺設(shè)計傳達思想，從而引發(fā)人的心理效應(yīng)，用戶通過視覺對設(shè)計產(chǎn)生積極反應(yīng)和印象，繼而更有指向性的來獲取信息[1]。視覺傳達設(shè)計在藝術(shù)性氣息較濃厚的網(wǎng)站應(yīng)用中，要有明確自身定位和內(nèi)容，深化富有學(xué)院特色、個性的美學(xué)特質(zhì)。網(wǎng)站建設(shè)內(nèi)容要明確，定位做到精細化。在設(shè)計過程中要始終做到把人的價值放到首位，藝術(shù)性網(wǎng)站瀏覽者用戶，大多是具有知識或藝術(shù)背景的高校教師和學(xué)生，對藝術(shù)和美感有著非常高的喜愛和要求，講究網(wǎng)站設(shè)計中細節(jié)，注重內(nèi)容表達及色彩展示。

2網(wǎng)站界面設(shè)計的方法與原則

網(wǎng)站是依據(jù)特定的規(guī)則，運用Unity3D、HTML、Dreamweaver、Flash、Photoshop等網(wǎng)頁制作工具來創(chuàng)作出展現(xiàn)特定內(nèi)容的網(wǎng)頁集合。網(wǎng)頁界面是人機交互操作，易操作、美觀、體驗感較強的人機界面更加吸引用戶的瀏覽訪問，增強用戶的體驗沉浸感。界面設(shè)計（UserInterface）人與系統(tǒng)通過此界面媒介，用戶獲得信息，系統(tǒng)接收、處理、相應(yīng)信息，充分實現(xiàn)彼此信息的互動[2]。

2.1界面設(shè)計方法

展現(xiàn)視覺傳達設(shè)計在網(wǎng)站界面設(shè)計中的引導(dǎo)性特征，讓視覺元素在界面中合理安排，遵循視覺心理與生理流程特點，有效引導(dǎo)用戶愉快、便捷、清晰流暢接受網(wǎng)頁傳達內(nèi)容信息。做到技術(shù)與藝術(shù)的完美結(jié)合，以設(shè)計意圖為主線引導(dǎo)用戶行為，更加有效的來促進信息的表達，提升頁面視覺傳達設(shè)計的引導(dǎo)力。把握視覺傳達設(shè)計交互在網(wǎng)頁中的應(yīng)用，可包含教育、教學(xué)、科研、資源等內(nèi)容，在交互性設(shè)計環(huán)節(jié)要注重用戶參與感的滿足，通過交互給予用戶適當(dāng)?shù)男袨榛蛘哌^程控制權(quán)，使其更深入的理解、體驗，提升用戶興趣，同時也不斷豐富網(wǎng)站自身內(nèi)容的建設(shè)。運用視覺傳達設(shè)計視覺符號及其系統(tǒng)構(gòu)成的視覺語言在具有視覺沖擊力的交互設(shè)計中充分的傳遞、表達信息，大大降低信息的復(fù)雜度、認知負荷，方便用戶解析、接受并開啟交互，增加信息獲取的動態(tài)性、趣味性。注重視覺傳達設(shè)計親和性在網(wǎng)頁中的運用，如文字、色彩、圖形、動畫、3D等融合、轉(zhuǎn)換提供了更加直接、感性、更具親和力的信息內(nèi)容表達。視覺傳達設(shè)計技術(shù)及AR技術(shù)的的發(fā)展和應(yīng)用，更加逼真、個性化、親和力的場景應(yīng)用開始出現(xiàn)，視覺沖擊力和認知力效果增加了用戶知識學(xué)習(xí)、信息獲取過程中的身臨其境的親和效應(yīng)。

2.2界面設(shè)計原則

高校教育教學(xué)、科學(xué)研究網(wǎng)站的設(shè)計和建設(shè)要遵循技術(shù)性、教育性、科學(xué)性等原則，還應(yīng)具有個性化、特色化的設(shè)計原則，教育網(wǎng)站的設(shè)計傳達設(shè)計是技術(shù)與藝術(shù)的融合，內(nèi)容與形式的統(tǒng)一。布局要合理，網(wǎng)頁布局是對頁面設(shè)計元素和內(nèi)容的合理規(guī)劃與安排，設(shè)計師利用技術(shù)兼用藝術(shù)巧妙利用結(jié)構(gòu)和布局原理，遵循視覺及心理規(guī)律，將各設(shè)計元素有機聯(lián)系起來，設(shè)計過程中可通過文字編排、色彩搭配凸顯重點內(nèi)容，一般重要頻道一般置放與左上方區(qū)域，力求做到布局主題突出、視覺清晰、內(nèi)容簡潔、整體協(xié)調(diào)。色彩搭配合理，做到用色準確。顏色和色調(diào)是視覺基本組成元素，色彩的設(shè)計應(yīng)根據(jù)內(nèi)容表現(xiàn)需求和用戶色彩心理特點，要想充分表達整體站點，需色彩的綜合運用，色彩表現(xiàn)要均衡，從整個站點的高度出發(fā)，不能偏重于一個點，否則就會造成視覺色彩失重，如大色與小色，純度與明度的合理設(shè)計。頁面主色彩色調(diào)的設(shè)計與選擇要考慮整體設(shè)計風(fēng)格，主題的體現(xiàn)等，單色調(diào)、調(diào)和調(diào)及對比調(diào)應(yīng)根據(jù)內(nèi)容的表現(xiàn)需要來進行選擇和搭配，已達到對比你、襯托、層次、協(xié)調(diào)等效果。簡潔清晰原則應(yīng)貫穿整個網(wǎng)站設(shè)計的過程當(dāng)中，如果網(wǎng)頁圖形太大或者色彩過重過多，都會影響到給視覺帶來的美感，同時亦會影響到瀏覽的體驗，簡潔的信息及色彩表現(xiàn)，會帶來較好的用戶體驗。保持節(jié)奏的清晰，因為節(jié)奏是UI設(shè)計中重要美學(xué)元素組成，色調(diào)、質(zhì)感、線型框等要素在布局設(shè)計中都可以形成較強的節(jié)奏，將美學(xué)元素進行適當(dāng)?shù)闹丿B、移位即可產(chǎn)生所需節(jié)奏，保持適當(dāng)?shù)墓?jié)奏設(shè)計，才能達到最佳信息傳遞及視覺表達的效果。協(xié)調(diào)統(tǒng)一原則，確定網(wǎng)站功能服務(wù)主體，色彩、節(jié)奏、布局頁面等設(shè)計要素要服務(wù)于主體，各視覺要素統(tǒng)一起來，相互搭配協(xié)調(diào)，由表達主體進行統(tǒng)一。

3視覺傳達在高校網(wǎng)站建設(shè)中的應(yīng)用

3.1版式布局在高校網(wǎng)站設(shè)計中的視覺傳達

版式布局根據(jù)網(wǎng)站建設(shè)內(nèi)容的需要將文字、圖形、色彩等諸要素相結(jié)合進行過程編排，通過節(jié)奏、比例、色彩、虛實等美學(xué)規(guī)律進行頁面的設(shè)計與制作，把設(shè)計方案與思想以造型要素及形式原理的形式進行表現(xiàn)，營造視覺的審美信息空間。版式布局的設(shè)計是創(chuàng)意網(wǎng)站設(shè)計過程，應(yīng)充分體現(xiàn)學(xué)校特色理念，遵循形式美學(xué)的要求，一般可采用對稱、非對稱、對比、比例等布局設(shè)計風(fēng)格，注意視覺造型各元素之間的運用、組合配置，如大小、間隔、位置、節(jié)奏與美感等。利用表格和框架技術(shù)對頁面進行分割，根據(jù)人的視覺模式識別特點構(gòu)建簡潔的視覺流程，注意視覺元素大小、輕重比例關(guān)系，保持頁面整體布局平衡協(xié)調(diào)。視覺心理學(xué)認為版式布局傳遞的信息內(nèi)容與設(shè)計中、使用者心理處于同步狀態(tài)下，會產(chǎn)生一種認知理解和美感效果。在版式布局設(shè)計時應(yīng)尊重用戶信息獲取閱讀的個性、習(xí)慣，巧妙運用元素的主從關(guān)系、層次和實際流程等形式手法，富于創(chuàng)造、想象力的版式布局設(shè)計，以合理的順序、有效的感知方式，激發(fā)瀏覽訪問者的注意與興趣，獲取用戶的最佳體驗印象，產(chǎn)生良好的心理效應(yīng)，更好的傳播信息，從而實現(xiàn)傳達與溝通的目標。在版式布局設(shè)計中巧用留白設(shè)計，適當(dāng)?shù)牧舭自O(shè)計會使網(wǎng)頁布局顯得松弛有度，表現(xiàn)出活力，給人帶來充分的想象空間。以大連海洋大學(xué)藝術(shù)與傳媒學(xué)院為例，如圖1所示，網(wǎng)頁中緊湊的文字編排，適當(dāng)?shù)牧舭自O(shè)計，簡潔的設(shè)計，形成疏密有度的對比，給人以清新舒爽的體驗感受。網(wǎng)站版式布局設(shè)計，我們采用橫、縱互相結(jié)合的布局結(jié)構(gòu)，以橫向布局為主，頁面比例均衡，統(tǒng)一協(xié)調(diào)，適當(dāng)留白具體實踐應(yīng)用。靈活運用視覺元素大小、形狀、疏密色彩來調(diào)節(jié)對稱軸線的分量，造成視覺的堆成，給人以平衡感，把握整體布局統(tǒng)一，追求局部的個性變化，給人整齊簡潔、和諧之美及良好的穩(wěn)定感。

3.2文字在高校網(wǎng)站設(shè)計中的視覺傳達

文字元素是信息傳遞的重要載體，在網(wǎng)頁設(shè)計時文字的字體、大小、顏色及其排列方式要與整體頁面表現(xiàn)視覺元素相統(tǒng)一，一般情況下，在單頁面中出現(xiàn)的字體最多不要超過四種類型，否則會給瀏覽者帶來視覺疲勞，難以凸顯視覺重點，有種凌亂的感覺。如果想要一個風(fēng)格獨特，印象深刻的網(wǎng)站，設(shè)計者需要對文字進行創(chuàng)意的構(gòu)筑，每一處的彎曲、筆畫和角度都要巧妙的運用于字體。從整體界面風(fēng)格、版式布局等開展文字的創(chuàng)意設(shè)計與運用，最大化表現(xiàn)文字獨特的色彩、別開生面的字體類型，給瀏覽者帶來視覺的沖擊。負空間的營造遵循瀏覽者的視覺心理習(xí)慣，所謂負空間具體表現(xiàn)為字間距、行間距、段落之間的間距[3]，瀏覽者習(xí)慣于某種閱讀方向和順序的習(xí)慣，如自上而下或從左至右。字距、行距主意恰當(dāng)?shù)谋壤P(guān)系設(shè)置，可以適當(dāng)加寬行距，形成較為明顯的距離空白，增加瀏覽者的舒適度，段距一般可以采用增加空白來提升裝飾效果。應(yīng)用CSS技術(shù)來對字體屬性控制，CSS指令控制文字字型樣式及段落外觀等方式，樣式表模板如圖2所示。圖2樣式表控制模板

3.3圖形在高校網(wǎng)站設(shè)計中的視覺傳達

圖形語言作為一種藝術(shù)形式，能夠創(chuàng)造新形象，傳達新意念，拓展瀏覽者的思維，實現(xiàn)信息傳遞的有效性[4]。在圖形設(shè)計中強調(diào)點、線、面的結(jié)合，在應(yīng)用時一般采用jpg、jpeg、gif、png等瀏覽器支持度較高的壓縮圖形格式，其中jpeg的壓縮效果相對較好，適合大、中型圖形，在網(wǎng)絡(luò)上傳或傳輸時速度快、時間短。在選用圖形時，圖形的位置、大小、組合形式、展示方式等在整體的頁面設(shè)計編排中給予重點的考慮，保證頁面整體的美觀、實用。圖形的設(shè)計、選用要充分反映網(wǎng)站的主題與內(nèi)涵，突出重點，避免大量采用抽象圖形代替文字的插圖或插畫，亦不可在頁面中插入圖形過多。合理運用不同造型手法，照片、插畫、漫畫等多種形式選擇，達到圖文并茂、風(fēng)格協(xié)調(diào)的美學(xué)效果。圖形展示頻道設(shè)計緊密結(jié)合學(xué)院辦學(xué)動畫傳媒、視覺傳達專業(yè)特色，采用膠片作為圖框，設(shè)計作品從右至左動態(tài)滾動展示，圖形的嵌入不僅增添了頁面的趣味性和藝術(shù)性，同時有利于信息的傳達以及瀏覽者對網(wǎng)站內(nèi)容的理解，增加信息獲取、記憶效果。

3.4色彩在高校網(wǎng)站設(shè)計中的視覺傳達

色彩作為一種視覺元素，富有表情，視覺作用先于形象，使瀏覽者產(chǎn)生不同的聯(lián)想和情感[5]。網(wǎng)頁設(shè)計時要選擇與網(wǎng)站特點、理念相一致的色彩，可根據(jù)不同的主題確定合適的色彩，力求體現(xiàn)出網(wǎng)站特色，亦可根據(jù)不同的信息表達內(nèi)容，來運用不同的色彩進行表現(xiàn)信息的生動性和豐富性。學(xué)院網(wǎng)站整體設(shè)計以海洋文化元素確定主題色為“藍色”基調(diào)，同時考慮藝術(shù)的多元化特征，融合多種色彩進行視覺表達，藍色表達出來的海洋的博大、深邃、永恒、理性，橙色象征開放與隨和，黃色象征光明、智慧之光，粉色代表青春、優(yōu)雅高貴的風(fēng)度，紅色代表激情、熱烈、溫暖。通過色彩的飽和度、透明度、漸進變化的設(shè)計，使頁面和諧統(tǒng)一、特色鮮明、重點突出、對比強烈，產(chǎn)生了強烈的藝術(shù)效果。

4結(jié)語

在高校網(wǎng)站建設(shè)中視覺傳達設(shè)計具有較強的綜合性、整體性，設(shè)計時應(yīng)關(guān)注風(fēng)格的整體統(tǒng)一，多視覺元素運用相結(jié)合，在突出個性、特色的同時需要站點或站群的協(xié)調(diào)性。對總體框架版式布局的規(guī)劃、層次的編排、色彩的應(yīng)用、文字及圖形的處理等都要充分的規(guī)劃、統(tǒng)籌，做到局部服從整體，視覺元素之間緊密恰當(dāng)?shù)穆?lián)系，不僅為了滿足用戶的信息需求，更要創(chuàng)造一種愉悅的視覺美學(xué)意境。

參考文獻：

[1]劉丹.視覺元素在網(wǎng)頁設(shè)計中的運用[J].合肥工業(yè)大學(xué)學(xué)報,2012,(2).

[2]RobertHoekman,Jr.JaredSpool.網(wǎng)站設(shè)計解構(gòu)有效的交互設(shè)計框架和模式[M].北京:人民郵電出版社,2010.

[3]伊達千代.文字設(shè)計的原理.[M].悅之文化譯,北京:中信出版社,2011.

[4]喬柳.網(wǎng)頁界面設(shè)計中的信息圖形化研究[D].上海:上海交通大學(xué),2010.

[5]叢琳.網(wǎng)頁配色構(gòu)圖細節(jié)設(shè)計[M].北京:人民郵電出版社,2010.

作者:紀策 程羅德 丁立華 張仕春 單位:大連海洋大學(xué)