替視覺設計「動線」

949e93ff618908d27fee

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

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

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

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

(資料來源:desiring,CC Licensed.)

廣告

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s