視覺流程及版式類型

1、（一）在視覺心理學家的研究中，視覺運動規(guī)律是其成果之一。一條垂直線在頁面上，會引導視線作上下的視覺流動； 水平線會引導視線向左右的視覺流動；斜線比垂直線、水平線有更強的視覺訴求力；矩形的視線流動是向四方發(fā)射的；圓形的視線流動是輻射狀的；三角形則隨著頂角之方向使視線產(chǎn)生流動；各種圖形從大到小漸層排列時，視線會強烈地按照排列方向流動。視覺流程，是視線在觀賞物上的移動過程，是二維或三維空間中的運動。這種視覺的流動線極為重要，同時又是很容易被網(wǎng)頁設計者忽視的因素。經(jīng)驗豐富的設計者都對此非常重視， 他們善于運用這條貫穿頁面的主線，設計易于瀏覽的頁面。 從某個角度講，視覺流程的設計結(jié)果就是版式。本章也將對

2、網(wǎng)頁設計的版式設計進行總結(jié)和闡述。1.視覺流程的籌劃視覺流程是網(wǎng)頁版式設計的重要內(nèi)容，可以說，視覺流程運用的好壞，是設計者技巧成熟與否的表現(xiàn)。視覺流程的籌劃包括幾個重要的因素，下面就對它們作具體的歸納與分析。頁面中不同的視域，注目程度不同，給人心理上的感受也不同。一般而言，上部給人輕快、 漂浮、積極、高昂之感；下部給人壓抑、沉重、限制、穩(wěn)定的印象；左側(cè)，感覺輕便、自由、 舒展，富于活力；右側(cè)，感覺局促卻顯得莊重。網(wǎng)頁中最重要的信息，應安排在注目率最高 的頁面位置，這個位置便是頁面的最佳視域。Writ jH-vA FOTry Acrobat 7.0 Professionalfree for 30

3、 da”！3MH10 MhiBw ,h vdiurtwif dH vaaBtrt.餐忖f U Mm a1hM M |i . 1 ftw * I*1 J b*.ZM Jr 事A-ftlkv4 . 曄 福 跳曲” .11 iM *l3iv電 04t /iUtiO ULsskAri 0 T * I H *妙 產(chǎn)挈F 2* 師iWM9 i4wr I*. .1 114rllf圖1頁面的設計輕松而具均衡的形式感，把最佳視域留給了橫貫頁面的大banner圖2作為個性化的視覺元素， 拼貼剪紙式的文字分別占據(jù)了三個點，吸引視線在它們之間流動人們閱讀材料時習慣按照從左到右，從上到下的順序進行。 瀏覽者的眼睛首先看

4、到的是頁面的左上角，然后逐漸往下看。根據(jù)這一習慣，設計時可以把重要信息放在頁面的左上角或頁 面頂部，如公司的標志、最新消息等，然后按重要性依次放置其他內(nèi)容。重要的信息應該讓瀏覽者最容易發(fā)現(xiàn)，而不是深藏在多層鏈接之后。Demand the Best.Demand 2 Wire.圖3瀏覽者的眼睛首先看到的是頁面的左上角（二）2視覺流程類型視覺流程主要包括以下幾種類型：線型視覺流程、曲線視覺流程、焦點視覺流程、反復視覺流程、導向視覺流程、散點視覺流程等。2.1 線型視覺流程線型視覺流程，分為直線視覺流程和曲線視覺流程兩類。圖4視覺流程明確，形成清晰易讀的頁面設計圖5自由的視覺流程形成生動活潑的頁面設

5、計1、直線視覺流程使頁面的流動線更為簡明，直接地訴求主題內(nèi)容，有簡潔而強烈的視覺效果。直線視覺流程 表現(xiàn)為三種形式：豎向視覺流程：給人堅定、直觀的感覺。圖6明確、簡潔的豎向視覺流程橫向視覺流程：有穩(wěn)定、恬靜之感。圖7橫向的視覺流程，向人們傳達出穩(wěn)重、可信的視覺Prq4Ktiwani?n ORNimrrifT tdalairn tavpinv圖8橫向的視覺流程，使頁面穩(wěn)重直觀斜向視覺流程：以不穩(wěn)定的動勢引起注意。1 Mim ”，F(xiàn)otosate 4 Photo Print studio PrMI況 RviwfiiBtoerfnnr.h w. X”2.2 曲線視覺流程曲線視覺流程，是由視覺要素隨弧

6、線或回旋線運動而形成的。它不如直線視覺流程直接簡明,但更具流暢的美感。曲線視覺流程的形式微妙而復雜，可概括為兩種形式：弧線形（c形）視覺流程：有擴張感和方向感。圖10弧線形視覺流程，使頁面具有很強的擴張性回旋形（s形）視覺流程：兩個相反的弧線則產(chǎn)生矛盾回旋，在平面中增加深度和動感。圖11回旋形視覺流程，使頁面產(chǎn)生更多層次，空間感（四）2.3 焦點視覺流程焦點，是指視覺心理的焦點。每個頁面中都有一個視覺焦點，這是需要重點處理的對象。焦點是否突出，和頁面版式編排、圖文的位置、色彩的運用有關，同時也與對焦點”著力描寫有關。在視覺心理作用下，焦點視覺流程的運用使主題更為鮮明、強烈。在具體的處理上，一般

7、沿著視覺焦點的傾向與力度， 來發(fā)展視線的進程。通常以鮮明的形象 或文字占據(jù)頁面某個位置， 或完全充斥整版，集合瀏覽者的視線，完成視覺心理上的焦點建 造。另外，向心、離心的視覺運動，也是焦點視覺流程的運用形式。按照主從關系的順序，使放大的主題形象成為視覺焦點，以此來表達主題思想。圖12運用圖片大小的對比引起視覺的流動將文案作整體編排，突出主題形象。圖13對主題圖片的遮擋，引發(fā)瀏覽者一探究竟的興趣在主題形象四周增加空白量，使之成為視覺焦點。圖14留白使頁面簡約大方，更加突出了主題3.1 看 3|l “If t圖15通過在主體產(chǎn)品周圍留白吸引視圖16這是一個典型的運用焦點視覺流程的例子winapaircff Minipod LucentaQscBndynaXm日5 .imzi .3MM