SPARKFUL

Blog

SPARKFUL x Fourdesire 團隊心得與生活點滴

低解析度的人類視網膜?

Wei-Fan Chenuser-interface-design
name

你有玩過寶石方塊或 Zookeeper 這類的遊戲嗎?這些遊戲都需要玩家們快速的在畫面上尋找相同的圖案,然後將相同的圖案放在一起得到分數。但是你有沒有想過,玩這個遊戲的時候,為什麼不能一眼就看完整個畫面呢?明明整個遊戲畫面就呈現在眼前,為什麼我們還要費盡心思才能找到相同的圖案呢?

不管是遊戲設計還是網頁設計,我們都需要和使用者的視覺互動,才有機會快速的獲取使用者的注意力。但是網頁設計和剛剛提到的遊戲相反,需要不停的吸引使用者的注意力才能讓使用者停留在設計師希望他們停留的地方。使用者的視線在瀏覽器上飄來飄去,我們都以為我們可以將整個畫面納入眼簾,但其實我們真正能看到的只有幾個十個像素的大小而已。

主要的原因是人的眼睛的解析度和電腦螢幕不一樣,並不是統一的。人的視網膜的成像是在正中間解析度最高,隨著離眼球中央越遠,解析度也越低,大約就像下面這張示意圖一樣:

如果換個方式解釋,其實就是當物體離開使用者注意的視覺中心 5 公分時,一個英文字母大約要 1.5 公分高(螢幕顯示大約 50 px)才能順利被使用者判讀,複雜的中文字可能就更難說了。

會產生這個效應的原因主要是因為我們視網膜上的細胞主要分為桿細胞和錐細胞兩種(一看就知道是以外型命名),這兩種細胞對不同的程度的光線會有不同程度的反應,但是只有錐細胞密集的集中在視網膜的中央一個被稱為「中央小窩」的位置,而且向四周逐漸減少。所以中央小窩對於光線的敏感程度當然也就遠大於視網膜的其他部分了。

假設我們正在設計的介面有個讓使用者集中注意於一個地方,像是部落格的文字編輯器,那麼使用者的視線就會集中在編輯器上。如果你希望使用者能夠將視線從他注意集中的地方移開,前往你希望他注意的目標(也許是個軟體升級提醒、或是好友通知)。這個目標就需要更大外觀、或者是更鮮豔的明度和彩度,才有辦法順利的刺激使用者的視網膜。

也千萬不要假設使用者的眼睛會一口氣看完畫面上所有的選項,這不只是因為使用者很忙,而是我們身體上的限制。我們一次能注意到的地方很小,要掃描完整個畫面就像是用水彩筆來幫整面牆上色一樣,是非常辛苦而且困難的一件事。設計畫面上的元素的大小除了考慮費茲定律,也要考慮我們肉眼的解析度,才能設計出真正符合人體的優良介面。


References:

  1. 陳一平(2011)。視覺心理學。台灣:翔郁整合行銷。 2. Ware, Colin (2008). “Visual Thinking: for Design” 3. Images via Calvin Merry, StaR_DusT, CC License.
Wei-Fan Chen
Wei-Fan Chen
CEO / SPARKFUL and Fourdesire
喜歡開發與創作各種有意義且有目的的遊戲以改變社會。 《玩心設計》作者、偶爾寫部落客與擔任講師。樂於參與大學和行業活動,興趣涵蓋遊戲設計、遊戲理論、行為設計、人機介面和交互設計。熱衷於雲端運算,同時也是一個活躍的獨立遊戲開發者 🎉
divider
相關文章
name

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

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

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

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

立足在擬物與扁平之間

去年微軟發表了 Windows 8 所搭載的 Metro UI 後,就掀起了一陣扁平介面設計(Flat UI Design)的熱潮,許多網站、App、介面設計和互動設計都開始採用了這種風格。Google 在前一陣子的設計革新中也運用了許多扁平設計的元素,就連上星...閱讀更多