SPARKFUL
閲覧しようとしているページの翻訳が完了していません。現在対応中のため、もうしばらくお待ちください!

Blog

Insights from the SPARKFUL teams

資訊歸類,提高版面的閱讀性

Decill Changuser-interface-design
name

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

許多人在安排版面資訊時常常會發生的錯誤就是,常常誤認為版面上的每一項資訊都很重要,而每一個資訊都擺放在使用者很容易閱讀到的位置、賦予相同的視覺強度。

但其實使用者是無法同時間接收太多各種不同的資訊的,在無法為版面上的資訊安排其重要性的情況下,最後反而讓版面的閱讀性大打折扣。

以下我們都將在每項資訊的「視覺強度」都相同的前提下來、來討論資訊擺放位置跟閱讀性的關係。如下圖左,我們將資訊位置分散擺放,雖然整體畫面較有均衡感,但是四筆資訊沒有區分出重要性,甚至使用者在閱讀的時候會無所適從,不知道該從哪一筆資訊開始讀起。而當我們歸納出版面上最重要的資訊,並將其獨立出來後,版面資訊的重心被提升出來了,並且很容易的就可以瞭解版面資訊閱讀的順序:

可以發現的是,雖然每項資訊的視覺強度跟比重都一樣,但是由於資訊擺放時的「留白」較多,因而在閱讀的時候反而更為顯眼突出

留白是指畫面上沒有配置重要視覺元素的區域,在一般的邏輯中,這是「多餘的」、「浪費掉的」區域,但是在視覺設計中,留白是一個很重要的視覺元素。

另外,將屬性相似的物件做歸類擺放也一個是很重要的提升畫面閱讀性的技巧,如上圖右,由於底部資訊被擺放得更接近了,在閱讀上就更容易將其歸類為同一個的區塊,將這些具有相同屬性的資訊擺放在一起,也可以提升使用者的閱讀效率。這是由於人在看到一項資訊時,並不會將其當成獨立的要素,而是將其認為是某個更大整體中的一個小部分,這種現象叫做「完形心理 ( Gestalt ) 」。

最常見使用這個方法歸類資訊的例子就是名片了。如下圖,在編排名片時,就必須考慮將性質相近的元素編排的靠近一些,例如姓名跟職稱會歸類在一起,而電話、傳真、手機號碼等則是區分為另外一組歸類,如此來不僅版面上的資訊得到了明確的整理與歸類,版面視覺也簡潔了許多。


References:

  1. Photo by Patrick Tomasso on Unsplash
Decill Chang
Decill Chang
Principal Designer
A しばいぬ lover.
divider
関連記事
name

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

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

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

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

為使用者撒下「麵包屑」

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