視覺傳達(dá)設(shè)計(jì)中的網(wǎng)頁交互設(shè)計(jì)理念

連公博

摘 要：何為視覺傳達(dá)設(shè)計(jì)，視覺傳達(dá)設(shè)計(jì)是指運(yùn)用視覺表現(xiàn)的手法傳達(dá)給用戶的設(shè)計(jì)方式。較為傳統(tǒng)的傳播媒介是平面類印刷紙質(zhì)類，現(xiàn)在主要利用各種電子媒介作為媒介。根據(jù)相關(guān)數(shù)據(jù)2013年中國互聯(lián)網(wǎng)使用人數(shù)已過6億。所以互聯(lián)網(wǎng)傳播作為新的媒介，與平面類紙質(zhì)媒介不大相同的地方是它更加強(qiáng)調(diào)了“交互設(shè)計(jì)”理念。

關(guān)鍵詞：網(wǎng)頁交互設(shè)計(jì)；視覺傳達(dá)

因時(shí)代的進(jìn)步互聯(lián)網(wǎng)絡(luò)的快速發(fā)展是必然的，作為一種全新的視覺傳播媒介，具有迅速、價(jià)廉、及時(shí)、傳播面廣的特點(diǎn)。網(wǎng)頁作為互聯(lián)網(wǎng)的代表傳播方式之一，它的設(shè)計(jì)既要有傳統(tǒng)平面該有的設(shè)計(jì)特點(diǎn)，還要有現(xiàn)代技術(shù)的組成，將技術(shù)與藝術(shù)巧妙的相融為一體的交互性活動(dòng)。本文嘗試著從視覺傳達(dá)設(shè)計(jì)中文字、色彩和排版對人生理和心理的作用應(yīng)如何運(yùn)用到網(wǎng)頁設(shè)計(jì)的交互式上，幫助設(shè)計(jì)師更好地利用視覺表現(xiàn)讓客戶達(dá)到良好體驗(yàn)。

在筆者看來，一個(gè)好的設(shè)計(jì)師或互聯(lián)網(wǎng)技術(shù)人員未必能夠做好網(wǎng)頁設(shè)計(jì)，因?yàn)樗恢皇枪庑枰O(shè)計(jì)師的審美或技術(shù)人員的開發(fā)。一個(gè)好的互聯(lián)網(wǎng)產(chǎn)品需要產(chǎn)品經(jīng)理與設(shè)計(jì)師和技術(shù)人員的三方溝通，一個(gè)優(yōu)秀的設(shè)計(jì)師其實(shí)可以勝任產(chǎn)品經(jīng)理加設(shè)計(jì)師的工作。所以我們在做網(wǎng)頁設(shè)計(jì)時(shí)，應(yīng)該以一個(gè)產(chǎn)品經(jīng)理加設(shè)計(jì)師的思維共同設(shè)計(jì)。心里的思路應(yīng)該很清晰，例如我們的客戶群體是哪些、他們有哪些習(xí)慣、我的顏色該如何搭配、字體用什么才能吸引讓客戶群體等等，這些都是在進(jìn)行網(wǎng)頁設(shè)計(jì)前所要思考的，至于如何正確地匹配到這些選項(xiàng)，還需要我們仔細(xì)地探究。

一個(gè)好的網(wǎng)頁設(shè)計(jì)并不是簡單地把文字圖片放上去就夠了，我們需要揣測用戶的心理因素和生理本能，比如說網(wǎng)頁的大小比例、字體大小、圖片大小和整體的排版風(fēng)格。下面就跟大家淺談下網(wǎng)頁設(shè)計(jì)中的信息視覺傳達(dá)：

1 文字

對于在網(wǎng)頁上的文字設(shè)計(jì)來說字體的基本要求是可閱讀性，其包括文字的大小、字與字的間距、段與段的間距和行列長短間距等方面的處理。

很少一些網(wǎng)頁對字體進(jìn)行再次設(shè)計(jì)，原因是不同的計(jì)算機(jī)操作系統(tǒng)和字體文件安裝都是不同的，所以必須選取一些常規(guī)的字體，否則一部分用戶上的字體就會(huì)變成默認(rèn)字體，這將與設(shè)計(jì)者本身的設(shè)計(jì)意圖大大相否。

其次，用戶使用的屏幕顯示也對字體有一定的影響，設(shè)計(jì)是大多數(shù)會(huì)采用宋體或黑體兩種字體，從用戶心理感受來說，宋體字較為活躍、生動(dòng)，閱讀起來不容易疲勞。而黑體字方正端莊，線條粗獷醒目，但在縮小到一定程度時(shí)容易模糊，造成識別困難。

2 色彩

色彩設(shè)計(jì)對于一個(gè)優(yōu)秀的設(shè)計(jì)來說非常重要，在網(wǎng)頁設(shè)計(jì)中也是設(shè)計(jì)的關(guān)鍵，在互聯(lián)網(wǎng)快速的閱讀中如何第一秒吸引到用戶成為視覺傳播的關(guān)鍵。人對色彩是相當(dāng)敏感的，當(dāng)他們首次接觸一個(gè)網(wǎng)頁時(shí)，最先吸引其注意力的就是網(wǎng)頁的顏色，其次是圖像，最后是文字。色彩給其他人的印象特別強(qiáng)烈，所以設(shè)計(jì)師最容易通過色彩去表達(dá)他的設(shè)計(jì)意念，例如天貓和京東的紅白色主頁的設(shè)計(jì)，強(qiáng)烈的顏色沖擊了人們的心理視覺給人強(qiáng)烈的購買欲望。

網(wǎng)頁上的顏色主要表現(xiàn)在主導(dǎo)色、輔助顏色和背景顏色這幾個(gè)方面。占顏色面積最大的是網(wǎng)頁主色調(diào)。主色調(diào)像是一幅畫中的主色，在創(chuàng)造特定的氣氛與意境上發(fā)揮主導(dǎo)作用。第二大的是輔助顏色，起的作用是強(qiáng)調(diào)或調(diào)和。網(wǎng)頁的背景色是增加畫面空間感的重要措施。例如，較暗的背景色與鮮明的主導(dǎo)色形成鮮明的前后空間關(guān)系。

設(shè)計(jì)師對不同功能的色彩進(jìn)行理解和分析，搭配好主色、輔色和背景色的運(yùn)用比例才能給用戶一個(gè)良好的視覺體驗(yàn)。

3 排版

排版設(shè)計(jì)在網(wǎng)頁設(shè)計(jì)中也可以叫做頁面布局，把零散的網(wǎng)頁名稱、導(dǎo)航欄、搜索欄、圖形、文字和符號進(jìn)行點(diǎn)線面排版。四周的“空間”并不是沒有的，可以留白或留灰，突出頁面主題物讓網(wǎng)頁在使用中更加簡潔和便利。

設(shè)計(jì)師根據(jù)“以虛托實(shí)、以無襯有”和信息傳達(dá)的要求進(jìn)行合理排版，此時(shí)需要注重用戶心理的潛意識和生理的行為習(xí)慣進(jìn)行排版設(shè)計(jì)。比如用戶在瀏覽頁面時(shí)，第一眼優(yōu)先注意到的是四周留白的文字，這就是視覺的邊際效應(yīng)在虛空間的一個(gè)體現(xiàn)。從而使設(shè)計(jì)師設(shè)計(jì)的平面網(wǎng)頁能夠充分與用戶有所“交互”，使用戶體驗(yàn)獲得更佳的視覺印象。

4 視覺規(guī)律

視覺規(guī)律是根據(jù)人的視覺心理因素和生理習(xí)慣而決定的。人有兩只眼睛但是因?yàn)槿说难矍蛟碇辉试S產(chǎn)生一個(gè)視覺焦點(diǎn)，不能同時(shí)停留在兩處以上（包含兩處）的地方。因此人們自由閱讀時(shí)，都會(huì)有一個(gè)生理習(xí)慣，從上往下和從左往右閱讀。

心理學(xué)研究顯示出，在一個(gè)平面內(nèi)人在閱覽上半部分時(shí)會(huì)讓人感到輕松愉悅，下半部分時(shí)則會(huì)感到郁悶壓抑。同樣左半部分讓人感到輕松愉悅，右半部分則會(huì)感到郁悶壓抑。所以左上部分稱為“最佳閱覽區(qū)”。視覺流程導(dǎo)向又分為導(dǎo)向類視覺流程、重心視覺流程、反復(fù)視覺流程、散點(diǎn)視覺流程，我們在網(wǎng)頁設(shè)計(jì)中就可以依據(jù)這些用戶的生理和心理的“規(guī)律”來進(jìn)行交互設(shè)計(jì)，從而使用戶達(dá)到良好的使用體驗(yàn)。

優(yōu)秀的網(wǎng)頁設(shè)計(jì)師提供愉悅的交互式體驗(yàn)，不僅對文字、色彩和排版進(jìn)行探究設(shè)計(jì)。網(wǎng)頁上操作面板上的按鈕和開關(guān)和導(dǎo)航的分欄等，設(shè)計(jì)師利用交互性及時(shí)讓用戶知道如何操作這是很重要的。那么設(shè)計(jì)師必須合理地運(yùn)用示能、意符、約束、映射和反饋這幾個(gè)心理學(xué)概念進(jìn)行科學(xué)的設(shè)計(jì)。

參考文獻(xiàn)：

[1] 王愉，隋涌.論網(wǎng)頁視覺要素設(shè)計(jì)[J].北京印刷學(xué)院學(xué)報(bào)，2005（04）.

[2] 刁學(xué)棟，吳彬.網(wǎng)頁設(shè)計(jì)的視覺信息傳達(dá)分析[J].教育信息化，2006（19）.