正文

視覺信息設計（視覺信息設計定義）

發(fā)布時間：2023-04-07 00:09:29 稿源：創(chuàng)意嶺閱讀： 101

大家好！今天讓小編來大家介紹下關于視覺信息設計的問題，以下是小編對此問題的歸納整理，讓我們一起來看看吧。

創(chuàng)意嶺作為行業(yè)內優(yōu)秀的企業(yè)，服務客戶遍布全球各地，相關業(yè)務請撥打電話：175-8598-2043，或添加微信：1454722008

文章目錄列表:

1、什么是視覺傳達設計
2、UI設計和視覺設計有什么不同？
3、視覺傳達設計是什么
4、設計干貨～視覺表現(xiàn)建立信息層級【深度好文】

視覺信息設計（視覺信息設計定義）

一、什么是視覺傳達設計

視覺傳達設計這一術語流行于1960年在日本東京舉行的世界設計大會，其內容包括：報刊環(huán)境視覺設計雜志、招貼海報及其他印刷宣傳物的設計，還有電影、電視、電子廣告牌等傳播媒體，它們把有關內容傳達給眼睛從而進行造型的表現(xiàn)性設計統(tǒng)稱為視覺傳達設計電影海報，簡而言之，視覺傳達設計是“給人看的設計，告知的設計”——（日本《ザィン辭典》）。從視覺傳達設計的發(fā)展進程來看，在很大程度上，它是興起于19世紀中葉歐美的印刷美術設計（GraphicDesign，又譯為“平面設計”、“圖形設計”等）的擴展與延伸。隨著科技的日新月異，以電波和網(wǎng)絡為媒體的各種技術飛速發(fā)展，給人們帶來了革命性的視覺體驗。而且在當今瞬息萬變的信息社會中，這些傳媒的影響越來越重要。設計表現(xiàn)的內容已無法涵蓋一些新的信息傳達媒體，因此，視覺傳達設計便應運而生。

[編輯本段]特點

視覺傳達設計是通過視覺媒介表現(xiàn)并傳達給觀眾的設計，體現(xiàn)著設計的時代特征圖形設計和豐富的內涵，其領域隨著科技的進步、新能源的出現(xiàn)和產品材料的開發(fā)應用而不斷擴大，并與其他領域相互交叉，逐漸形成一個與其他視覺媒介關聯(lián)并相互協(xié)作的設計新領域。其內容包括：印刷設計、書籍設計、展示設計、影像設計、視覺環(huán)境設計、（即公共生活空間的標志及公共環(huán)境的色彩設計）等。視覺傳達設計多是以印刷物為媒介的平面設計，又稱裝潢設計。從發(fā)展的角度來看，視覺傳達設計是科學、嚴謹?shù)母拍蠲Q，蘊含著未來設計的趨向。就現(xiàn)階段的設計狀況分析，其視覺傳達設計的主要內容依然是GraphicDesign一般專業(yè)人士習慣稱之為“平面設計”?！耙曈X傳達設計”、“平面設計”兩者所包含的設計范疇在現(xiàn)階段并無大的差異，“視覺傳達設計”、“平面設計”在概念范疇上的區(qū)分與統(tǒng)一，并不存在著矛盾與對立。視覺傳達設計是為現(xiàn)代商業(yè)服務的藝術，主要包括標志設計、廣告設計、包裝設計、店內外環(huán)境設計、企業(yè)形象設計等方面，由于這些設計都是通過視覺形象傳達給消費者的，因此稱為“視覺傳達設計”，它起著溝通企業(yè)——商品——消費者橋梁的作用。視覺傳達設計主要以文字、圖形、色彩為基本要素的藝術創(chuàng)作，在精神文化領域以其獨特的藝術魅力影響著人們的感情和觀念，在人們的日常生活中起著十分重要的作用。

[編輯本段]領域

(1)字體設計 (2)標志設計 (3)插圖設計 (4)編排設計 (5)廣告設計 (6)包裝設計 (7)展示設計

二、UI設計和視覺設計有什么不同？

UI設計師工作是輸出軟件的圖形界面設計，易于操控、信息清晰、交互流暢是UI設計的基本原則，能夠留存用戶是主要任務；而視覺設計師則更注重畫面的美感、創(chuàng)意表現(xiàn)?！玖私飧嗨囆g留學內容】

UI設計的工作就是一個產品看上去要讓你產生好感，使用起來也要讓你心聲喜歡，覺得好用。這就是他們的工作。對UI設計師來說，他們要多的是要對產品概念進行分析定位以及對產品易用性進行測試和評估。

您有任何的問題和不明白的地方，都可以咨詢斯芬克藝術留學。斯芬克藝術留學專注于國際化啟發(fā)式教學，學生將以專業(yè)為核心，能力培養(yǎng)為目的，培養(yǎng)學生獲得敏銳的設計思維，創(chuàng)新力，團隊協(xié)作能力和動手實踐能力。放眼不同領域進行學習和探索實踐?？焖傧驀H化學習環(huán)境過渡。

視覺信息設計（視覺信息設計定義）

三、視覺傳達設計是什么

視覺傳達設計（Visual Communication Design）

是指利用視覺符號來傳遞各種信息的設計。設計師是信息的發(fā)送者，傳達對象是信息的接受者。簡稱為視覺設計。什么是視覺傳達？視覺傳達是人與人之間利用“看”的形式所進行的交流，是通過視覺語言進行表達傳播的方式。不同的地域、膚色、年齡、性別、說不同語言的人們，通過視覺及媒介進行信息的傳達、情感的溝通、文化的交流，視覺的觀察及體驗可以跨越彼此語言不通的障礙，可以消除文字不同的阻隔，憑借對“圖”——圖像、圖形、圖案、圖畫、圖法、圖式的視覺共識獲得理解與互動。視覺傳達包括:“視覺符號”和“傳達”這兩個基本概念所謂“視覺符號”,顧名思義就是指人類的視覺器官――眼睛所能看到的能表現(xiàn)事物一定性質的符號，如攝影、電視、電影、造型藝術、建筑物、各類設計、城市建筑以及各種科學、文字，也包括舞臺設計、音樂、紋章學、古錢幣等都是用眼睛能看到的，它們都屬于視覺符號。所謂“傳達”,是指信息發(fā)送者利用符號向接受者傳遞信息的過程，它可以是個體內的傳達，也可能是個體之間的傳達，如所有的生物之間、人與自然、人與環(huán)境以及人體內的信息傳達等。它包括"誰"、"把什么"、"向誰傳達"、"效果、影響如何"這四個程序。）

視覺傳達設計的領域

(1)字體設計 (2)標志設計 (3)插圖設計 (4)編排設計 (5)廣告設計 (6)包裝設計 (7)展示設計

專業(yè)培養(yǎng)目標：

培養(yǎng)有一定藝術素養(yǎng)，掌握視覺傳達藝術設計基本理論和專業(yè)技能，在各級各類視覺傳達藝術設計、出版教育和生產制作單位工作的高級技術應用性專門人才

專業(yè)核心能力：

視覺傳達藝術設計和應用表現(xiàn)能力

專業(yè)核心課程與主要實踐環(huán)節(jié)：

繪畫基礎、圖案基礎、平面構成、色彩構成、立體構成、專業(yè)水粉技法、國畫基礎、標志設計、包裝裝潢設計、包裝造型設計、容器造型設計、書籍裝幀設計、廣告招貼設計、展示設計、廣告設計、電腦平面動畫設計、繪畫技法表達能力訓練、電腦設計應用、視覺傳達藝術設計、參觀實習等，以及各校的主要特色課程和實踐環(huán)節(jié)

就業(yè)領域：

新聞出版、彩色印刷、平面廣告、戶外廣告、企業(yè)CIS策劃設計、海報設計、招貼設計、刊物設計、產品包裝設計、商業(yè)手繪、網(wǎng)站形象設計、網(wǎng)頁制作、Flash、動畫設計、商業(yè)攝影、家裝設計、效果圖設計、展覽、展示設計、園林設計、建筑設計、景觀設計、三維動畫設計、影視制作、欄目包裝、企業(yè)形象宣傳片、產品專題片、會議禮儀拍攝、影視編輯、語音編輯、MTV制作、電視片頭制作等領域。

四、設計干貨～視覺表現(xiàn)建立信息層級【深度好文】

長文預警，建議先收藏后看！

作為視覺設計師，我們的作用除了最基本的滿足用戶審美需求，還會有品牌傳達，信息傳達，功能傳達等，其中想要信息有效的傳達給用戶，需要我們建立信息層級，而不是一股腦的丟給用戶自己理解，要做到這點有哪些視覺方法，這些方法的背后是否有理論依據(jù)，是本文的主題。

首先看下面兩張圖，左圖為相機拍攝的效果，右圖為人眼不移動時看到的效果，可以發(fā)現(xiàn)人眼對信息的獲取并不是一次性完成的，它不能同時產生多個焦點從而把視線停留在更多的地方，設計師需要考慮的是讓用戶通過眼球移動，按照一定的順序獲取信息，幫助獲取和理解的過程高效自然。

這個設計方法希望解決的主要是兩個問題：

1、用戶獲取和理解信息的效率

建立良好的信息層級，能讓用戶在有限的時間里，快速獲取和理解有用、感興趣的信息，并產生下一步行為；

2、設計師的專業(yè)性

設計師有意識的分析信息優(yōu)先級，了解哪些視覺表現(xiàn)手法可以建立信息層級及每一種方法背后的理論依據(jù)，不僅僅憑感覺做設計。

一、前期了解&分析

在開始設計前，除了對項目本身的背景目標有所了解外，視覺設計師針對具體的頁面也需要了解一些內容以幫助后面的設計有指導方向，包括頁面定位、氛圍營造、信息優(yōu)先級和用戶核心行為。

1.1、頁面定位是幫助分析頁面信息優(yōu)先級、核心行為的前提

通常有：

· 用戶是誰

· 用戶來自哪里，即從什么渠道來到該頁面

· 頁面內容定位，提供什么、不提供什么

· 頁面作用

舉個例子：

我們在設計采購直達市場新首頁時，交互通過對頁面的用戶對服務的熟知度進行分析，確定首頁的最核心目標用戶是新買家；頁面內容定位是展示市場的價值點，用戶產生的數(shù)據(jù)讓新買家對采購直達形成品牌的認知；

1.2、了解頁面需要營造的氛圍，能幫助我們判斷哪些元素能幫助達到目標，氛圍可以是內容本身，也可以通過視覺元素設計來營造，但必須注意氛圍營造不應強過用戶關注的內容本身

氛圍可能有：

· 新年主題大促

· 低折扣

· 信息鮮活

· 用戶活躍等等

以下是大促活動正式頁面，左圖延續(xù)了預熱期嘉年華的氛圍，但到活動開始階段氛圍已經不是重點，用戶更關心商品及折扣本身，右圖為調整后將氛圍的營造和類目圖片相結合，很好的解決了氛圍和內容的關系問題。

1.3、分析信息優(yōu)先級

1）一級信息吸引用戶：假設用戶只會在這個頁面停留3-5秒，最能夠吸引用戶繼續(xù)瀏覽的是頁面的核心賣點，是一級信息，它必須少而精，在設計上要重點展示

2）二級信息幫助理解：有了一級信息的吸引，用戶進一步了解內容而可能停留3-5分鐘，這時展示二級信息即提煉的精華內容，幫助用戶在盡量短時間內理解信息

3）三級信息詳細了解：前兩類信息基本上能幫助用戶獲取足夠的信息，用戶如果繼續(xù)停留更長的時間去詳細了解，這類信息量會更多，在設計上視覺層級會靠后，或通過交互方式展示、提供入口跳轉

1.4、分析用戶核心行為

不同類型用戶會在不同階段產生行為，我們要判斷這些行為最終導向是什么？

比如商品詳情頁面，有些用戶在決定購買之前，會查看用戶評價、歷史交易等內容，但這些查看的行為，最終是幫助用戶判斷是否購買這個商品，所以核心行為是最終導向的購買。

有了這些分析，交互產出物文檔中會給予大模塊的信息優(yōu)先級和用戶行為優(yōu)先級，如下圖

視覺在進行細節(jié)設計前，需要對每個模塊內的具體內容進行優(yōu)先級的分析并產出如下示意圖并和交互和業(yè)務方確認，這些都是幫助視覺設計過程不偏離方向的重要產出物。

二、建立信息層級的視覺方法

視覺表現(xiàn)手法主要有以下幾種元素，實際設計中為了讓效果拉開主次，可能會同時使用多種方法以達到更好的效果：

· 位置

· 大小

· 距離

· 內容形式

· 色彩

2.1、位置

位置是在設計開始就會考慮的元素，人眼觀看事物時，總會遵循一些特定的規(guī)律，設計上遵循這些規(guī)律，能幫助用戶更容易、更快捷地看到或理解眼前的事物。其中有兩條規(guī)律和位置設計元素有關：

1）當眼睛偏離視中心時，在偏離距離相等的情況下，人眼對左上的觀察最優(yōu)，依次為右上，左下，而右下最差。因此，左上部和上中部被稱為“最佳視域”。例如，網(wǎng)站logo、商品名、主題等重要信息，一般放在最佳視域內。當然，這種劃分也受文化因素的影響，比如阿拉伯文字是從右向左書寫的，這時最佳視域就是右上部。下圖是摘自摘自張帆羅琦宮曉東的《網(wǎng)頁界面設計藝術教程》對一個屏幕劃分后，用戶對不同位置不同的關注度差別：

2）第二條規(guī)律是眼睛沿水平方向運動比沿垂直方向運動快而且不易疲勞，一般先看到水平方向的物體，后看到垂直方向的物體。如下圖所示，左右的關注度差別要小于上下關注度差別，如想要體現(xiàn)并列的關系，左右排列會更合適；而如果要拉開差距，僅通過位置來實現(xiàn)，上下排列更容易達到目標。

舉個例子：如下圖時代周刊網(wǎng)站首頁，左側大圖是當天的焦點新聞，在信息層級上為一級信息，視覺表現(xiàn)上不僅面積大、內容形式用大圖，位置也放在優(yōu)勢區(qū)域，可能98%的用戶會先關注到這個區(qū)域；

假如對設計稿的位置做調整如下，如果焦點新聞圖片是第一優(yōu)先級的信息，雖然它是大圖的形式，占的面積也夠大，但由于位置不在最佳視域，會被“Latest Headlines”分散一部分視線，可能只有60%的用戶先看到右側了；如果信息有主次，就要讓視覺表現(xiàn)上拉開差距，而不是一個接近均等的局面。

3）用戶優(yōu)先關注上部，在網(wǎng)頁設計中有首屏的概念，首屏的信息比通過用戶拖動滾動條出現(xiàn)的第二、三屏層級要高

由于用戶使用的屏幕分辨率不同造成首屏的高度會有差別，根據(jù)我們網(wǎng)站的數(shù)據(jù)，目前分辨率高度為768占多數(shù)，所以設計時會以768高度為基準，去掉瀏覽器本身的菜單等占用的高度，實際展示給用戶的第一屏平均為600px，這個數(shù)據(jù)會根據(jù)以后目標用戶的分辨率變化做相應的調整，我們在設計時可用這個數(shù)值作為首屏的參考線。

2.2、大小

在確定了模塊的位置后，我們會考慮給這模塊多大的地盤，大小會很直觀反映信息的重要等級。

有個體育海報設計的案例，涉及到四種球類運動包括足球、高爾夫球、棒球、籃球，如果按照實際大小設計會讓籃球和足球顯得更重要，為了體現(xiàn)體育的平等性，設計上將球的大小做了調整。

Giles Colborne的《簡約至上》書中的結論可以指導我們通過大小拉開差距：

1）重要的元素要大一些，即使比例失調也可以考慮

2）要想辦法表現(xiàn)出差距；如果一個元素的重要性是2，那就把它的大小做成4

還是以時代周刊首頁為例，目前的設計左側的焦點新聞圖占的面積和中間新聞圖對比拉開了差距，使得用戶容易先關注到一級信息而且不容易被周邊干擾；

我們對兩個新聞圖片的面積進行對比可以看到差距有4倍左右；

假如對界面調整如下：焦點新聞圖縮小兩倍后，可以看出視覺層級的區(qū)分就不明顯了。

除了元素本身所占的面積會影響視覺層級，元素的細節(jié)放大程度也同樣起到作用，細節(jié)放大后，人眼會感受到元素更清晰，離眼睛更近而容易先去關注，當然前提是保證信息可被理解，如果局部細節(jié)放大但用戶不能理解信息是什么就不能起到吸引用戶的作用；

下圖是一個模特公司的網(wǎng)站，首頁上隨機出現(xiàn)模特的照片包括面部和半身照片，放大臉部特征后的照片保證了用戶能理解這是一個模特的形象，使得用戶會優(yōu)先關注細節(jié)放大的照片。

2.3、距離

前面講到的將元素的細節(jié)放大，眼睛會感受離它更近而被優(yōu)先注意到，雖然信息展現(xiàn)的媒介是個平面，但是通過視覺手段能體現(xiàn)出三維的效果，除了大小，還有其他視覺手法如下：

1）拉遠三維距離

想要達到距離被拉遠的效果，下面列舉的方法是讓信息變得不清晰，眼睛看起來無法對焦到信息上面，包括：

· 模糊元素，下圖背景的人物被模糊后，使它和兩個行動點以及右側的圖標不在一個平面上，離眼睛更遠，用戶在進行行動點和文字識別時也不會被模糊的背景所干擾

· 降低透明度也同樣可以起到作用，當有些背景圖模糊后比較難被整體感知，選擇降低透明度也能拉遠距離

· 增加半透明圖層，在界面色彩或元素比較多的情況下，僅降低透明度也可能無法拉開距離，如下圖希望突出TV購時，其他四個模塊降低透明度后由于本身色彩比較豐富而沒有明顯拉開差距，通過加上灰色的半透明圖層后，TV購以外的模塊自然的退到視線后面了。

2）拉近三維距離

· 增加投影是最常用到的讓元素看起來和其他內容不在同一平面的視覺手法，通常像彈出框、鼠標移上后出現(xiàn)的浮層等由于要壓在其他信息之上，增加投影能幫助用戶聚焦在帶投影的模塊而不受下面信息的干擾

3）除了三維，二維距離對視覺層級也有影響，根據(jù)格式塔心理學接近性定律，距離較短或互相接近的部分容易組成整體；人眼對距離臨近的信息更容易先去關注，在視覺手法應用上，元素距離上一個焦點近的，視覺層級高。如下圖，第一層級的新聞焦點圖和右側的小圖片比較臨近，視線容易往右上角運動；

對距離做了調整后，雖然中間的小圖片本身比文字更吸引人，但由于焦點圖下方的標題距離更近而形成整體，視線容易先往下運動。

2.4、內容形式

確定了模塊的位置、大小和距離關系后，我們會繼續(xù)考慮內容的形式包括視頻、圖片、文字等，這里主要講我們經常使用的圖形和文字；相比起文字，圖片在抓住用戶眼球這一點上是功不可沒的，同時還能使用戶在短時間內形成形象記憶，從視覺層級上，人眼一般會先關注圖后關注文字。但僅僅這點還不夠，通過圖片抓取用戶眼球后引導視線到下一個關注點，是設計上更多會考慮的點，概括有以下表現(xiàn)手法：

1）方向性引導

圖片中的形象有些具有明顯的方向性，如人眼注視的方向、手勢所指的方向、物體運動方向、光照方向等，這些特征會引導人眼視線朝著設定的方向運動，從而達到視覺層級有主有次。

下圖假設中間的人物首先吸引了人的視線，為第一層級的信息，由于人眼注視方向為右側，使得用戶關注的下一個目標會轉向“coder”文字，為第二層級的信息。

下圖WHAT WE DO位置在左上角容易先被關注，同時右側的人物形象占的篇幅較大也會搶視線，但由于人物運動的方向下沒有其他信息，圖片沒有充分發(fā)揮引導的作用，用戶瀏覽起來會不太順暢

經過調整后的效果，雖然“WHAT WE DO”位置上并不在優(yōu)勢區(qū)域，但通過圖片方向的引導很自然的讓人眼落在文字信息上。

2）符號引導

除了圖片，一些符號本身帶有順序和方向性，也能有效引導視線根據(jù)符號來瀏覽，包括阿拉伯數(shù)字、字母順序、時間順序、箭頭等。

下圖的排行榜前三名，雖然用戶更習慣從左到右閱讀，但由于數(shù)字的引導，視線也會被影響而按照1>2>3的順序閱讀，如果希望這樣的順序更加明顯，可以再通過放大1的圖片大小，拉開差距，結合多種視覺方法達到效果。

時間軸在界面中應用也很廣泛，人眼會受時間順序的影響去瀏覽信息，甚至會打破常規(guī)的如從左到右的瀏覽習慣，如下圖雖然2的位置更容易引導用戶優(yōu)先瀏覽，但時間軸對信息的影響更明顯，一般用戶會優(yōu)先查看模塊1，再根據(jù)時間先后從右向左關注模塊2。

2.5、色彩

色彩是影響用戶對界面第一印象的重要因素，色彩的應用對視覺層級的影響也能起到立竿見影的效果，總結起來人眼對色彩的關注度差別主要是以下兩點：

1）先暖色后冷色

色彩的不同色相，對人眼的刺激及產生的反映目前沒有找到絕對的先后順序，但是冷色類和暖色類色彩，是有明顯的層次差別的，如下圖，人眼一般會優(yōu)先看到左側的圖片，這和我們人眼對不同波長的反映有一定關系;

從生理學上講，人眼晶狀體的調節(jié)，對于距離的變化是非常精密和靈敏的，我們能判斷出物體離我們的遠近，但是它有一定的限度，對于波長微小的差異就無法正確調節(jié)。眼睛在同一距離觀察不同波長的色彩時，波長長的暖色如紅、橙等色，在視網(wǎng)膜上形成內側映像；波長短的冷色如藍、紫色等，則在視網(wǎng)膜上形成外側映像。因此，暖色好象在前進，冷色好象在后退。

美國數(shù)字營銷公司Hubspot曾經做過一場A/B Test，用于測試不同顏色對于用戶點擊轉化造成的差異。在圖中，左右兩個測試頁面在內容上完全一致，唯一不同的是按鈕的顏色，在超過2000人次的樣本測試中，最終紅色方案的點擊率超過綠色方案的點擊率足足21%。而在測試之前，大部分的研究員都猜測綠色方案會獲得更高的點擊，因為就直覺而言，綠色代表著通行、準許通過的意思，而紅色則更傾向于警告、阻止意味。

這個測試從一定程度上反映了暖色對用戶關注度和行動力的影響，當然并不是說為了提高點擊率就要用暖色，具體的色彩風格還是要根據(jù)產品定位來設計。

2）先高反差后低反差

除了冷暖色對眼睛的刺激不同，色彩的反差是最容易造成關注度差別的因素，在自然界動物為了生存，運用的保護色就是和反差相關，如圖中的貓頭鷹，和它生活的環(huán)境相關，毛色都進化成類似的色彩，以起到隱藏保護的作用；相反，顏色反差大就特別容易引起注視，如下黃色郁金香中獨特的紅色

前面講到的大小、遠近都是體現(xiàn)能反差的視覺手段，色彩上的反差主要通過以下方法達到效果：

· 色相反差，下圖中主色調為藍色，藍色行動點和整體顏色一致，層級相對較弱，而綠色行動點和藍色在色相上的反差使得層級變高

但顏色有很多種，如何確定反差的大小？我們可以通過色相環(huán)來查看，如下圖所示，色相反差強弱取決于色相環(huán)上的距離，距離越大對比越強，反之則越弱。

· 飽和度反差和明度反差比較容易理解，而且他們有數(shù)值可以控制，兩個顏色之間飽和度或明度數(shù)值相差越大，反差也就越大，反之亦然，看看具體的實例：如以下導航圖，當前的人物icon明度較高，和低明度黑色背景形成高反差而容易先被注視

以下環(huán)狀餅圖，已完成的百分比飽和度高，和總體低飽和度形成對比，相同色相通過飽和度進行對比不僅能拉開差距形成視覺層級，同時視覺效果具有整體性

總結一下上面講到的視覺表現(xiàn)手法，形成表格方便大家記憶如下：

三、審視頁面視覺流

運用視覺表現(xiàn)手法建立信息層級后，需要設計師不斷審視用戶的瀏覽順序是否真如我們期望的層級1到2到3…，包括頁面大模塊和模塊內的瀏覽，這些瀏覽順序會在頁面上形成視覺流；

審視頁面視覺流能幫助我們判斷用戶瀏覽頁面是否順暢，瀏覽的順序是否有規(guī)律可循；如果我們的設計不能有效引導用戶的視線，用戶的瀏覽更趨向于隨機性，就難以將希望表達的信息快速傳到到位。

下面的內容主要是介紹比較典型的視覺流及每種類型的特征，包括：

· 線性視覺流

· 導向性視覺流

· 跳動性視覺流

· 放射性視覺流

1）線性視覺流

· 橫向視覺流引導用戶視線從左到右或從右到左視覺流動，是最符合用戶視覺習慣的瀏覽方式，給人穩(wěn)定可信之感。

如digg.com首頁，整體頁面和單個模塊都是典型的橫向視覺流，用戶從左到右瀏覽到邊界后，視線回掃到下一行繼續(xù)從左到右閱讀；這里會有一個橫向瀏覽最佳區(qū)域的數(shù)值，如digg選用的頁面寬度為1000px左右，每行展示3個item，用戶屏幕的分辨率變大后，這兩個數(shù)值是否應該繼續(xù)增加，增加到什么程度，是人眼獲取信息效率最高的？這個疑問我還沒有找到相應的理論或實驗支撐，后續(xù)再查找資料。

· 縱向視覺流引導用戶視線從上到下瀏覽，由于眼睛縱向的運動方式需要瞳孔不斷對焦，當縱向掃視頁面模塊時效率和橫向瀏覽相差不大，但閱讀細節(jié)時效率會變低，如縱向排列的文字，更適用于需要逐字閱讀的古詩古文；

下圖是將原來橫向視覺流的digg首頁的排版調整后，變成了縱向視覺流，除了大圖，用戶會選擇三欄的其中一列縱向瀏覽直到找到某一目標信息后，橫向瀏覽細節(jié)。

網(wǎng)頁界面的縱向高度限制比橫向小，因為用戶習慣上下滾動來瀏覽更多信息，當用戶還處于確定目標信息時，縱向視覺流能幫助用戶在不需要回掃的情況下獲取更多信息；如下圖facebook日歷界面，時間軸橫向排列時，由于寬度受限，需要橫向切換或滾動條來查看更多日期：

將時間軸方向調整為縱向，使得用戶能通過上下滾動更高效查看當月所有日期。

· 斜線視覺流能營造運動感和速度感，但由于角度傾斜使文字認知上會有一定困難，大量文字信息排列不適合這種視覺流，常用于設計中的點綴或本身信息量比較少的界面，如下圖的健身俱樂部海報；

還有網(wǎng)頁界面上小范圍的斜線視覺流，來體現(xiàn)運動感。

· 曲線視覺流，用戶視線會形成個性化的曲線，具有律動和活潑感，這種類型由于眼動幅度較大，長時間大量的運用會產生視覺疲勞，所以不適合大段文字使用，一般會結合圖形做曲線視覺流，讓用戶的視線在圖像區(qū)域稍作停留；

如下圖在曲線視覺流中配上圖片，讓視線在圖片這個節(jié)點上稍作停留并瀏覽這個節(jié)點的內容，然后繼續(xù)延曲線瀏覽。

2）導向性視覺流

如下圖所示，導向性視覺流會設計一個誘導元素吸引用戶注意，再通過誘導元素注意到目標信息；常見的誘導元素可以分為線條、形象包括人物或物品、指示符號如箭頭字母等。這種視覺流要把握好誘導元素與目標信息的主次關系，純誘導元素不宜太強，否則會削弱目標信息的傳播力度；如果能在誘導元素中包含部分目標信息，可以增加信息傳達的有效性。

如下圖管子里的紅色液體是運動的，吸引用戶沿著它運動的方向到達目標消息

前面講到的內容形式，從圖片或符號引導到下一個視覺焦點，從視覺流角度也是導向性類型，下面這兩個例子就是在頁面局部使用了導向性視覺流

3）跳動性視覺流

在性質相同或相似的信息中，選擇突出或感興趣的信息之間跳動瀏覽, 給人一種自主選擇的權利，但設計上也可以通過調整元素的強弱，不露痕跡的傳遞主次。

如前面提過的模特公司網(wǎng)站界面，模特的照片都是同等性質的信息，用戶瀏覽具有一定的隨機性，但通過放大和縮小人像同樣也傳遞了主次。

4）放射性視覺流

視線開端在頁面中部，使中間的元素沖擊感最強，信息傳達最明確，再形成由中部發(fā)散出去的視覺運動。

比如很多汽車網(wǎng)站，中間的主圖最能體現(xiàn)信息的核心，通過主圖再發(fā)散到上方的導航或下方的其他服務入口。

以上介紹的四種視覺流類型是比較典型的，但不代表全部，我們也可以設計出更富創(chuàng)意的視覺流，無論是那種路徑，用戶瀏覽是否順暢，信息是否按照主次傳遞到位，是我們要一直堅守的目標。

最后再總結一下：

1.項目前期我們需要了解頁面營造的氛圍，內容定位；和交互一起分析信息的優(yōu)先級，用戶的核心行為；前期的準備能幫助視覺設計過程不偏離方向

2. 通過位置、大小、距離、內容形式、色彩這些視覺表現(xiàn)方法來建立信息層級