首頁 > 文章中心 > 正文

          網頁設計風格與用戶體驗二元交互

          前言:本站為你精心整理了網頁設計風格與用戶體驗二元交互范文,希望能為你的創作提供參考價值,我們的客服老師可以幫助你提供個性化的參考范文,歡迎咨詢。

          網頁設計風格與用戶體驗二元交互

          摘要:網頁設計是用戶體驗和藝術視覺感性印象相結合的過程,網頁設計的視覺風格取決于網站設計的主旨和內容目標。同時,網站信息和內容主旨的傳達取決于網頁設計人員對設計風格的把握和自身的文化審美情趣。

          關鍵詞:視覺風格;審美情趣;用戶體驗

          1圖標設計的原則與風格

          移動終端的大規模普及讓過量的信息涌向客戶端,受眾產生了對信息的識別失能。所謂信息識別失能是指在信息過量的情況下,受眾不能有效地消化這些信息,信息群轉化為無效的信息符號。為了有效解決信息接收用戶對信息的識別困境,標準化和識別特征明顯的圖標設計成為網頁設計的重要視覺元素和關鍵性信息識別標志。以下筆者將就網頁設計的圖標風格定位和設計原則進行總結和闡述。

          (1)網頁設計圖標使用信息適量原則。

          網頁指示圖標信息表達不宜過量,如果網頁交互指示圖標傳達的信息超過信息受眾的一般信息接收量,圖標信息在傳達的過程當中很容易導致信息受眾的識別失能。并且,由于短時記憶的信息容量很小,信息接收用戶和網絡程序使用者在選擇圖標指示時是調動自身大腦指揮的短時記憶,因而網頁視覺圖標應該表達適量的信息。

          (2)網頁設計圖標使用合理性原則。

          在圖標設計之前,應該由相關設計人員進行實地調研,重視網站使用者的用戶體驗和感受。充分研究網絡信息使用者通過“手段目的”解決通用問題的方式的操作行為特性,并考慮使用者在操作上發生錯誤的各種可能性,研究圖標使用的可能性和合理性。

          (3)網頁設計視覺圖標的含義清晰明確的原則。

          盡量不選擇容易造成含義混淆的視覺圖標,含義清晰明確的視覺圖標便于人明確獲得操作步驟的信息及正確做出選擇判斷,而圖標含義的不明確,會讓受眾無法操作對操作行為產生不愉快的知覺感受。簡潔的圖標使人對操作的感知更容易被儲存記憶激發,在轉化成愉快操作信息后記憶加深。

          (4)網頁設計視覺圖標的目標用戶熟悉度原則。

          盡量使用信息接受者和目標用戶更為熟悉的認知圖形,或者使用目標消費者通過視覺呈現元素的刺激更容易產生聯想的圖標。例如,要表達“購物商城”這一操作信息,用購物車、購物籃等視覺圖標更容易喚起人的聯想和熟悉度,從而更好地理解圖標的含義,以及該圖標與其他圖標的區別。

          2色彩的渲染與運用

          色彩是網頁設計和用戶體驗當中重要的印象元素,它是美麗而豐富的,它能喚起人類的心靈感知。舉例來說,紅色是熱情奔放的顏色,象征蓬勃的生命力和進取精神;黃色彰顯活力、華麗、明快;綠色就像廣袤開闊的草原鋪陳出的顏色,意味著純凈、無污染、寧靜和生長,帶給消費者和網站信息受眾安寧、和平與安全的視覺印象。顏色是光的折射產生的,紅、黃、藍是三原色,其他的色彩都可以用這三種色彩調和而成。在網頁設計的視覺藝術風格呈現和展示的過程當中,網頁設計師可以用顏色的變化來表現光影效果的變化和商品的質感,這無疑將使網頁設計作品更貼近目標用戶人群。色彩代表了不同的信息內涵和情感指征,給網站目標用戶帶來完全不同的視覺印象和信息指示。色彩渲染和光影明暗在網頁設計中所蘊含的象征含義是網站目標用戶所能感知到的信息特征和品牌印象,它因人的年齡、地域、時代、民族、階層、經濟地區、工作能力、教育水平、風俗習慣、宗教信仰、生活環境、性別差異而有所不同。網頁設計當中單純的顏色變化和選擇并沒有重大的視覺意義,而不同顏色的搭配和渲染則能夠帶來有效的視覺用戶體驗,它所表現出來的效果也不同。例如,綠色和金黃、淡白搭配,可以產生優雅,舒適的氣氛;藍色和白色混合,能體現柔順、淡雅、浪漫的氣氛;紅色和黃色、金色搭配能渲染喜慶的氣氛。設計的任務不同,配色方案也隨之不同。在進行網頁設計時,應當充分考慮到網頁視覺體驗的普適性,盡量使用能讓大眾產生共鳴和愉悅感的安全配色方案。

          3基于用戶體驗的網頁設計過程

          設計的實現可以分為兩個部分。第一部分為網頁的版面布局,第二部分為網頁的制作?;诹己玫挠脩趔w驗而進行的網頁設計首先要關注整個網頁的版面布局。我們可以將網頁看作傳統的報刊雜志來編輯,這里面有文字、圖像乃至動畫,我們要做的工作就是以最適合的方式將圖片和文字排放在頁面的不同位置。第二個步驟就是網頁設計師通過相關的設計軟件來對視覺元素進行組合,將設計的審美構想變為現實。視覺元素包括了顏色的鋪陳和碰撞,介紹文字的字體形態變形等視覺效果,圖片形狀風格的使用,動畫效果的設計和渲染和布局造型的重疊鋪排。

          4網頁設計元素的有機組合

          在網頁設計中,我們主要通過視覺傳達來表現主題。在視覺傳達中,視覺元素的有機組合是交互網頁設計當中很重要的一個設計環節。交互網頁畫面上的圖片、文字、圖標、動畫等視覺元素可以統一作為畫面的基本構成要素點、線、面來進行處理。在一幅成功的作品里,需要點、線、面的有機組合與搭配來呈現一個視覺風格獨樹一幟、和諧優美的交互界面。網頁設計當中可以使用的組合手法有秩序、比例、均衡、對稱、連續、間隔、重疊、反復、節奏、韻律、歸納、變異、特寫、反射等等,它們都有各自的特點。在交互網頁設計當中應根據網站宣傳主題和機構形象地位,選擇最適合的視覺元素組合方式,這樣有利于網站設計主題的表現。交互網頁設計通過點、線、文字、圖片、光影、顏色等元素的有機組合,可以充分展現交互頁面上的重要元素,突出設計的主題,增強美感,讓觀者在感受美的過程中領會設計的主題,從而實現設計的任務。造型的巧妙運用不僅能帶來極大的美感,而且能較好地突出網站機構的品牌形象。將網頁上的各種元素有機地組織起來,它甚至還可以引導目標使用群的視覺注意力和強烈的用戶體驗欲望。

          5基于交互體驗的網頁設計原則

          網頁交互設計是有原則的,無論采用什么樣的設計手法對畫面中的元素進行組合,都應當遵循以下四大原則:分割、統一、對比及和諧。分割是指將交互頁面分成若干個小塊,小塊之間有視覺上的明顯區分,這樣可以使目標受眾對交互網站的分類信息設置一目了然。在交互網頁信息量龐大的情景下,使目標受眾能夠清楚觀察并點擊自己需要的信息,這個信息甄別過程離不開對交互頁面進行有效的分割。分割不僅是視覺呈現形式的需要,換個角度來講,分割也可以被視為對于頁面內容的一種分類歸納。統一是指設計作品的整體性,一致性。設計作品的整體效果是至關重要的,在設計中切勿將各組成部分孤立分散,那樣會使畫面呈現出一種枝蔓紛雜的凌亂效果。交互頁面視覺元素的對比就是通過層次參差和顏色碰撞,使網頁設計風格更加富有生氣。對比手法很多,如強與弱、粗與細、明與暗、長與短、疏與密、虛與實、主與次、黑與白等等。交互網頁設計當中使用對比的設計手法應當謹慎,層次參差與視覺元素對比過強容易破壞美感,影響網頁視覺風格的統一。和諧是指整個交互頁面設計風格符合美的標準,渾然一體。如果交互網頁設計師認為網頁設計僅僅是數字、圖片、動畫等元素的任意混合,那么網頁設計作品將不但沒有“生動風格”,而且也根本無法實現網站主旨的視覺設計功能。交互設計和諧不僅要看視覺元素的布局是否和諧,最重要的是網站目標用戶的使用體驗和視覺印象,這才是成功的網頁設計風格與用戶體驗的二元交互。

          參考文獻:

          [1]鄔燕,邱海濤.體驗UI用戶界面設計[D].2004年國際工業設計研討會.

          [2]張新紅,呂文靜.網頁設計與制作[M].北京:化學工業出版社,2009.

          [3]趙侃.用戶體驗設計——網頁界面設計的重中之重[J].藝術與設計,2010(9).

          作者:陳紫燕 單位:北京工業大學耿丹學院