趙倩
摘 要 本文對網頁設計中視覺構成要素——文字、圖片、色彩等進行了分析,并結合人們在瀏覽、閱讀時的視覺習慣和認知心理,探討了在網頁設計中如何通過視覺元素優化信息的傳達方式,提升用戶獲得目標信息的效率。
關鍵詞 網頁設計 視覺元素 信息傳達
中圖分類號:TP3 文獻標識碼:A
在現代社會,網絡已成為信息傳播的重要渠道和交流工具。網絡是一個處理、傳達信息的平臺,區別于傳統的媒體而言,網絡具有信息繁雜、高速高效、人機交互等特征。設計者必須充分了解網絡的特征,利用視覺元素將成千上萬的信息進行處理,以清晰的脈絡和有序的方式呈獻給瀏覽者。讓信息更為有效地傳播,是身處于信息化數字化的今天設計者所必須具備的基本能力。
1國內網頁設計中信息傳達存在的問題
縱貫國內的網頁設計,普遍存在內容排列雜亂、巨量信息堆積而缺乏條理化等問題。這造成瀏覽者視覺疲勞,在網頁瀏覽的過程中找不到重點。例如,標題欄與正文的字體大小、粗細沒有區分,色彩方案混亂,沒有統一的主題色,這些都導致用戶在瀏覽網頁時注意力被各個強調的部分分散,沒有清晰的視覺流起點與路線,因此不愿在網頁中長時間停留或進行后續的訪問瀏覽。
2網頁設計中的視覺要素分析
文字、圖形圖像、色彩和版式是網頁設計中視覺呈現的主要構成內容,是組織信息的重要手段。一個優秀的網頁設計,其成功之處不僅在于視覺元素的綜合運用給人們帶來的美的享受,同時也體現在信息傳播的有效性。
2.1文字元素
在網頁設計,文字是傳達信息的重要媒介,除了具有傳達內容本身的功能,還能激發情感因素和心理因素,不同字體會在品牌形象的傳達上產生潛移默化的影響。例如,汽車營銷類的網頁設計中,多采用具有男性化特征的無襯線粗體字,而時尚、美容、服飾等行業網頁中多采用多裝飾、纖細的襯線字體。另外,充分利用字體大小、粗細對于人們視覺誘導力的強弱作用,可以突出重點內容與主題,幫助瀏覽者用最短的時間找到目標信息。此外,文字編排密度,如字距、行距等會影響瀏覽者的視覺流,具有良好層次的文字編排可以幫助用戶梳理出清晰的閱讀路線,在密密麻麻的海量信息中進行自由、流暢的選擇。
2.2圖形圖像元素
相對于文字的信息傳達,圖片和圖形更為直觀和生動。與書籍等傳統媒體不同的是,瀏覽網頁的過程是連續的,可選擇的,用戶對信息的接收是非單線性的。信息的隱藏、展開以及跳轉在很大程度上依賴于圖形的引導。設計師要考慮用戶的認知心理,從造型、色彩出發,注意圖形語義表達的準確性,讓圖形與瀏覽者認知熟悉度相適應。例如,在網頁設計中左右翻頁與返回頂部的按鈕設計,多采用人們日常生活中熟悉的箭頭來引導,這樣可以減少用戶對于這一圖形寓意的認知時間,從而留下易于操作的良好印象。基于對常用符號的認知程度,人們可以根據自己的需求將內容展開或關閉,保持頁面的簡潔。
2.3色彩元素
色彩是網頁設計中具有高刺激性的視覺元素,可以表達感情,喚起情緒。例如,紅色讓人產生沖動、熱情的感覺,綠色代表了希望和健康,白色給人純凈、清潔的感受。很多網頁設計利用了色彩的情感象征。例如浪琴手表的官網采用了給人沉穩、低調感受的深藍色,恰如其分地傳達了該品牌形象;索尼官網采用黑色為背景色,代表未來感與科技感的湖藍色為主題色,色彩方案一致,層次清晰。
2.4版式元素
網頁設計中,信息密度和位置會影響人的信息搜索的效率,這要求設計師善于運用合理、清晰的版式布局安排信息。例如,根據人們從左到右、從上到下的閱讀瀏覽習慣,網頁中的導航、動態等重要信息一般安排在網頁中的左側或頂部,方便人們搜索。
3優化信息傳達的設計方法
3.1對比與調和
對比是指具有明顯視覺差異因素的并置,如色彩對比、大小對比、虛實對比等;調和是指在不同視覺元素中尋找協調的因素。運用到網頁設計中,體現為弱化背景信息,減少其與目標信息的相似性。例如,文字的大小據內容的重要性而有所變化,重要信息可適當采用高明度、高飽和度的色彩進行強調。但要注意色彩的選擇數量與面積,達到整體頁面的調和一致。
3.2對稱與均衡
所謂均衡,是指兩種不同色塊、形狀、密度等在視覺體量上的穩定感。在很多川字型的版式布局中,小面積的部分常采用深色,安排導航欄等,大面積的內容區域,通常為淺色,達到視覺重心的平衡。對稱是一種最簡單的均衡,例如在圖像處理的排版中,很多網站采用方形圖這樣大小統一、間距一致的對稱方式,方便用戶在整齊有序的排列中找到自己感興趣的內容。
3.3節奏和韻律
節奏產生于對立視覺元素的并置和連續呈現,韻律產生于節奏。色彩、比例等特征的重復形成了節奏,利用版式的重復、圖形、色彩等相同元素的重復讓用戶快速適應網頁板塊分布特征,易于使用。
4結語
設計最終是為人服務的,把用戶需求放在第一位是網頁設計發展的趨向,也是設計倫理中以人為本的重要體現。如何運用視覺元素,減少干擾,提高瀏覽者在接收信息過程中的效率,從而提升其體驗的愉悅度,是網頁設計追求的重要目標。
參考文獻
[1] 恵巖,顧群業.網頁藝術設計[M].濟南:山東教育出版社,2012.
[2] 侯慧俊,錢永寧.網頁界面設計創意指南[M].上海:上海科學技術文獻出版社,2009.
[3] 鬲波飛.網頁設計之視覺信息傳達分析[J].湖南大學學報(社會科學版),2001,15(4):187-189.