SPARKFUL

Blog

Insights from the SPARKFUL x Fourdesire teams

替視覺設計「動線」

Wei-Fan Chenuser-interface-design
name

本文有大量圖檔遺失,我們正在努力恢復中了!

無論是百貨公司或是便利商店,為了讓顧客可以輕易的拿到所想要購買的商品。動線設計其實是一門關於視覺、行為和選擇的設計,運用在賣場中,包括如何讓顧客順利的抵達結帳地點而沒有障礙;或是在顧客在移動的過程中,購買到設計師希望顧客購買的商品等等。在平面設計上,動線就簡化成一種針對於視覺的注意設計,無論是報紙、雜誌或書籍,設計良好的視覺動線會儘可能的讓讀者看到重要(或設計師認為重要)的事物,或是減少閱讀時所需要的認知需求。

在人機介面的世界裡,設計網站或應用程式的時候也必須考慮視覺的動線。為了要減少使用者瀏覽網站的使用負擔,對齊是最簡單的一種設計動線的方式。在一列向左對齊的清單上,數字和清單文字之間的空白就成為了引導使用者的視覺動線。這種無形中出現的白色「線條」,源自於視覺完形理論中的「封閉性」:人們會傾向把一序列連續的物體是為一個封閉的形狀。因此,在一般的情況下,清單應該由文字的開頭對齊,而不是由數字對齊。

在一整個網站上面,要儘量考慮是否一個連續動作的文字、輸入表格、按鈕,是否都在一個流暢的動線上,通常將文字或按鈕置中並不是一個好選擇。應該要減少使用者的視覺移動與滑鼠移動,順暢的在文字與表格、表格與按鈕之間順暢的轉換,切記不要讓游標或輸入關注點(focus)突然從使用者的注意中消失,例如使用者按下 tab 想要切換輸入表格,他預計游標會切換到右邊的欄位,但游標卻飛到兩隔以外的另一個表格上。這樣的設計會讓使用者感到挫折,當挫折感太高的時候,使用者就會放棄。

上面這個例子就很清楚的展示了增加視覺動線流暢度,可以提高網站的使用性。視覺路徑越短,使用者所需要記憶與處理的資料就越少,讓目標物清晰可見,就會讓人覺得使用起來輕鬆愉快。


Reference

  1. Image via Isaque Pereira, CC License.
Wei-Fan Chen
Wei-Fan Chen
CEO / SPARKFUL and Fourdesire
Entrepreneur in entertainment and play for wellness / Author of Playable Design / Active indie game developer 🎉
divider
Related Posts
name

電影色彩學:這些經典電影如何運用「色彩」引導觀眾情緒

電影裡的弦外之音無論是電影、圖畫或任何形式的創作中,「色彩」都是非常基本且重要的元素。好的色彩運用可以讓人一眼看出創作者想表達的情緒。因此,如何恰當的運用色彩是一項相當重要的課題。平常在看電影的時候,除了關心劇情,也可以...Read more
name

藏於字句間的創作:產品中的在地化翻譯

產品辛苦開發了,但要吸引其他語言使用者的使用,並不是那麼簡單的一件事。即使產品已經在某個國家(例如台灣)有了足夠的使用者數量,也不是翻譯成日文,就會憑空冒出許多日本的使用者。網路是連結的,但社群不是許多人...Read more
name

為使用者撒下「麵包屑」

大家小時候應該都有看過或聽過《糖果屋》(收錄於格林童話)的故事吧?故事裡的小兄妹在森林裡面邊走邊撒下麵包屑,希望可以在迷路的時候沿著麵包屑回到家,結果麵包屑被森林裡的小動物吃掉,這對小兄妹也就在森林裡面...Read more