三、審視頁面視覺流

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

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

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

線性視覺流

導(dǎo)向性視覺流

跳動(dòng)性視覺流

放射性視覺流

1）線性視覺流

橫向視覺流引導(dǎo)用戶視線從左到右或從右到左視覺流動(dòng)，是最符合用戶視覺習(xí)慣的瀏覽方式，給人穩(wěn)定可信之感?！?a href="http://pgwc.com.cn" target="_self">重慶網(wǎng)站設(shè)計(jì)

如digg.com首頁，整體頁面和單個(gè)模塊都是典型的橫向視覺流，用戶從左到右瀏覽到邊界后，視線回掃到下一行繼續(xù)從左到右閱讀；這里會有一個(gè)橫向?yàn)g覽最佳區(qū)域的數(shù)值，如digg選用的頁面寬度為1000px左右，每行展示3個(gè)item，用戶屏幕的分辨率變大后，這兩個(gè)數(shù)值是否應(yīng)該繼續(xù)增加，增加到什么程度，是人眼獲取信息效率最高的？這個(gè)疑問我還沒有找到相應(yīng)的理論或?qū)嶒?yàn)支撐，后續(xù)再查找資料?！?a href="http://pgwc.com.cn" target="_self">重慶網(wǎng)頁設(shè)計(jì)

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

下圖是將原來橫向視覺流的digg首頁的排版調(diào)整后，變成了縱向視覺流，除了大圖，用戶會選擇三欄的其中一列縱向?yàn)g覽直到找到某一目標(biāo)信息后，橫向?yàn)g覽細(xì)節(jié)。——重慶小程序

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

將時(shí)間軸方向調(diào)整為縱向，使得用戶能通過上下滾動(dòng)更高效查看當(dāng)月所有日期?！?a href="http://pgwc.com.cn" target="_self">重慶定制網(wǎng)站

斜線視覺流能營造運(yùn)動(dòng)感和速度感，但由于角度傾斜使文字認(rèn)知上會有一定困難，大量文字信息排列不適合這種視覺流，常用于設(shè)計(jì)中的點(diǎn)綴或本身信息量比較少的界面，如下圖的健身俱樂部海報(bào)；

還有網(wǎng)頁界面上小范圍的斜線視覺流，來體現(xiàn)運(yùn)動(dòng)感?！?a href="http://pgwc.com.cn" target="_self">定制網(wǎng)站

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

如下圖在曲線視覺流中配上圖片，讓視線在圖片這個(gè)節(jié)點(diǎn)上稍作停留并瀏覽這個(gè)節(jié)點(diǎn)的內(nèi)容，然后繼續(xù)延曲線瀏覽?！?a href="http://pgwc.com.cn" target="_self">網(wǎng)站設(shè)計(jì)

2）導(dǎo)向性視覺流

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

如下圖管子里的紅色液體是運(yùn)動(dòng)的，吸引用戶沿著它運(yùn)動(dòng)的方向到達(dá)目標(biāo)消息——網(wǎng)頁設(shè)計(jì)

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

3）跳動(dòng)性視覺流

在性質(zhì)相同或相似的信息中，選擇突出或感興趣的信息之間跳動(dòng)瀏覽, 給人一種自主選擇的權(quán)利，但設(shè)計(jì)上也可以通過調(diào)整元素的強(qiáng)弱，不露痕跡的傳遞主次。——小程序

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

4）放射性視覺流

視線開端在頁面中部，使中間的元素沖擊感最強(qiáng)，信息傳達(dá)最明確，再形成由中部發(fā)散出去的視覺運(yùn)動(dòng)?！?a href="http://pgwc.com.cn" target="_self">重慶網(wǎng)站設(shè)計(jì)

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

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

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

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

3. 設(shè)計(jì)過程和結(jié)束都要不斷審視頁面視覺流，看看用戶瀏覽是否順暢。

我們有意識的分析用戶關(guān)注的信息優(yōu)先級，并通過視覺表現(xiàn)出來，是視覺設(shè)計(jì)師這個(gè)崗位很重要的職責(zé)，希望梳理的這些方法能幫助我們將這份職責(zé)做的更好，我也樂在其中，與大家共勉！——重慶網(wǎng)頁設(shè)計(jì)