設計流程 - 傳達動感的佈局和藝術作品

07年1月

什麼是Visual Flow?

視覺流將觀看者的視線通過文檔以所有重要元素都突出顯示的方式進行傳送,並且沒有任何東西會影響視覺或導致觀看者失去對該片的感覺。 使用明顯的流程元素(如箭頭或數字)是Web設計人員使用流程的最常見方式,但還有其他類型的元素可用於指導讀者沿特定路徑移動。 本教程中的步驟將向您展示流程的好壞,並幫助您學習設計中的視覺流程詞彙。

視覺流程可以通過多種方式實現:

以下圖片將向您展示網頁流程中的一些常見錯誤以及如何糾正它們。

07年2月

西文文本從左到右流動

不正確的流量。 圖片由M Kyrnin提供

如果你長大了閱讀西方語言,你習慣於認為文本應該從左向右移動。 所以,當眼睛在一行文字上移動時,它會從左向右移動。

在上圖中,瀑布從右向左流動,文字在瀑布中流淌。 由於我們都知道瀑布掉下來,所以水流與文本流動的方向是斷開的。 觀看者的眼睛朝錯誤的方向移動以閱讀文本。

03年7月

您的文字應該與圖像一起流動

正確的流量。 圖片由M Kyrnin提供

在這種情況下,圖像已經顛倒過來,文本以與水相同的方向流動。 所有的元素都引導觀眾的眼睛看到水流和文本流。

04年7月

從左到右等於快

不正確的流量。 圖片由M Kyrnin提供

這張照片中的馬從右到左跑,但文字是英文,從左到右。 賽馬方向的視覺衝擊減慢了整個文檔的速度,因為它與文字方向不同。

在西方文化中,因為我們的語言從左向右移動,所以我們將從左到右的視覺方向作為前進和快速,而從右到左更加落後和緩慢。 當您創建具有速度內涵的佈局時,您應該記住這一點 - 並使圖像與文本保持一致。

07年05月

不要強制觀察者的眼睛放慢速度

正確的流量。 圖片由M Kyrnin提供

當馬和文本都走向相同的方向時,暗示的速度會增加。

06年7月

在Web照片中觀看眼睛

不正確的流量。 圖片由J Kyrnin提供

許多帶照片的網站都犯了這個錯誤 - 他們在網頁上放置了一個人的照片,而這個人正在遠離內容。 這甚至可以在舊設計的About.com網站設計網站上看到。

正如你所看到的,我的照片被放置在一些文字旁邊。 但是我正在遠離那段文字,我幾乎把自己的背影轉向了它。 如果你在一個小組中看到兩個人之間的肢體語言,那麼很容易假設我不喜歡我旁邊的人(在這種情況下是文本塊)。

許多眼動追踪研究表明,人們在網頁上看到人臉。 而相關的研究表明,當觀看圖片時,人們會不自覺地追隨眼睛,看看圖片在看什麼。 如果您網站上的照片遠離瀏覽器的邊緣,那麼這就是您的客戶的外觀,然後點擊後退按鈕。

07年7月

任何照片中的眼睛都應該面對內容

正確的流量。 圖片由J Kyrnin提供

在About.com的新設計中,照片更好一些。 現在我的眼睛看起來更向前,並且有一點我正在向左看 - 文本在哪裡。

對於那個位置來說,更好的照片應該是我的肩膀也朝著文本傾斜。 但這是比第一張照片更好的解決方案。 而且,對於圖像位於內容右側和左側的情況,這可能是一個很好的折衷方案。

請記住,雖然人臉圖像引起了最多的關注,但動物照片也是如此。 例如,在此示例佈局中,我的狗看起來很左,但圖像正好對齊。 所以他們正在關注頁面。 如果我改變了狗的方向,這樣他們正在看屏幕的中心,這種佈局會得到改善。