替視覺設計「動線」

替視覺設計「動線」

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

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

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

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

Image via ThatswhatIam, CC License.

各式各樣的網路服務越來越多,從相簿、社群網站、留言板、線上訂餐、即時通訊到線上儲存、電子郵件等等五花八門的服務通通都亮相了!每個網路服務都會新使用者註冊使用,而...
我們的眼睛和大腦在觀察事物、接收影像刺激的時候,會有一些特別的傾向。這些傾向常常可以幫助我們快速的辨別事物,有時候也會產生所謂的「錯覺」。完形心理學重要的概念便...
表單應該就像個溫柔又有禮貌的店員。想像你走進一間超級市場,走過兩旁堆滿商品的走道之後,左轉右轉,看到你想買的果醬並且挑選了兩罐放在購物袋中。終於你走向結帳櫃檯,...
手勢操作可說是觸控式行動裝置的一大特色以及優點,使用者可以在空間狹小的螢幕中輕鬆又放肆地揮舞手指,快速的執行想要的功能,比較起螢幕中的虛擬按鈕,到底它對於使用性...
在現在的網站上,多媒體資料佔了許許多多的資訊空間,許多時候我們都會需要製作縮圖(Thumbnail)來增加可以容納圖片的空間,或是減少圖片的檔案大小,以增加網站...
心理學家 Gilovich 針對二戰時期德軍轟炸倫敦中部時,居民的經驗與看法做了一些研究,其中發現了一個有趣的事情,當時倫敦報紙顯示了德軍飛彈落下的位置圖,圖中...
© 2013 Desiring Clicks. All Rights Reserved.
Top