SPARKFUL

Blog

Insights from the SPARKFUL x Fourdesire teams

設計美觀和效率兼顧的圖示

Wei-Fan Chenuser-interface-design
name

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

俗話說:「一圖勝過千言萬語。」在現代的圖形化使用者介面上,圖示的運用已經是一件習以為常的事情,無論是選單、對話框、按鈕、或是提醒事項,都常常會有一個圖示在旁邊暗示使用者,這個按鈕的可能作用是什麼。

圖示最主要的功能就是要幫助使用者能夠快速的了解功能的作用與會發生的效果,進而提高使用者使用軟體或網站的效率,當使用者下次面對同樣的功能時,不用仔細的閱讀文字,透過圖片就可以知道他想要的功能位在哪裡。

下面提出幾項設計圖示的時候應該要考慮的幾項原則,提供大家參考:

圖示要有清楚的輪廓

使用者第一眼看到的是圖示的輪廓,如果圖示的輪廓太過相近,使用者就需要花費更多的時間去細看圖示的細節或是文字解釋。如果你實在沒有辦法改變輪廓,那至少應該讓圖示之間的色彩差距大一些,讓圖示更容易被辨別。舉例來說,下面這張圖是我的電腦 Dock 上的圖示,我就常常會開錯左邊第二個和第三個軟體(分別是 Chrome 和 Nally),因為他們的輪廓實在太像了!

Macbook Dock

只顯示出足夠的細節

相較於放在 Dock 上面的應用程式圖示,放在選單上面的圖示更需要仔細的設計,如果圖示的細節太多,反而會混淆不同的圖示之間的功能。功能選單上最好採用單色的圖示,容易辨別的外觀,就像是皮影戲一樣足夠辨別就可以,不要用太多細節來裝飾你的圖示。

Icons of Glyphicons

採用跳出式文字標示

圖示的運用要拿捏的恰到好處才能發揮到他真正的作用,舉例來說:許多文件編輯器都會有的圖示按鈕就可以輕鬆的達到傳達功能的目的,而幾乎不需要多用文字解釋。但是,完全移除掉文字解釋反而會讓新手使用者感到困擾。好的系統還是會在滑鼠游標移動到圖示上時提供文字解釋。

Google Drive Document Menu

圖示要有明確的暗示

許多網站就在選單上面濫用了圖示的功能,反而讓人感到模糊不清,舉例來說:許多報稅人常常需要上的財政部報稅服務網站,首頁出現的這四張圖示就反而讓人摸不著頭緒,四張圖的內容都很像,採用同樣顏色的外框,使用者沒有辦法一眼就看出這些功能之間的差別,大大的圖示反而妨礙了閱讀能力。

財政部網站首頁圖示

最後,當然視覺上的舒適和一致也很重要,如果你的圖示要採用傾斜 45 度的透視設計,那麼請一系列全部的圖示都採用相同的透視角度。如果圖示很細緻,陰影的角度和反射角度也應該要一致,才不會讓使用者感到焦慮。考慮彼此之間的顏色差距,應該要讓使用者容易分辨,又不會感到疲勞,這需要設計師花費心力仔細調整才有辦法做的到。


Reference

Photo by Artur Łuczka on Unsplash

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