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

By

August 27, 2012 介面設計 Comments

設計視覺和效率兼顧的圖示

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

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

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

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

Macbook Dock

 

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

Icons of Glyphicons

 

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

Google Drive Document Menu

 

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

財政部網站首頁圖示

 

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

Image via somegeekintn, CC License.

無論是百貨公司或是便利商店,為了讓顧客可以輕易的拿到所想要購買的商品。動線設計其實是一門關於視覺、行為和選擇的設計,運用在賣場中,包括如何讓顧客順利的抵達結帳地...
錯誤處理是人機介面中非常重要的一環,當系統發生錯誤的時候,告知使用者系統處於什麼錯誤狀態、以及如何排除錯誤狀態是一件非常重要的事。要清楚的讓使用者知道到底錯誤是...
在茫茫的 APP 海中,總是會有很多小不拉機的按鈕,怎麼點也點不到,使用觸控式行動裝置時最痛苦的事莫過於此,如果上天能夠給我一個重來的機會,我一定不會下載這個 ...
所謂的無尺度(Scale-Free),指的就是遵守冪次法則(Power Law)分佈現象的行為。而冪次法則和一般人常聽到的 80 – 20 法則十分...
設計搜尋系統,除了要考慮使用者的搜尋行為以外,如何呈現搜尋結果也非常重要。依照各個網站性質的不同,使用者們所採用網站的搜尋系統的頻率也不同,對於像是大型網路商城...
框架(Frame)就是情境(Context)的表達方式,可以分為正向框架與負向框架兩種,分別呈現對情境的正面態度與負面態度。表達的情境可以用圖片、影片、文字敘述...
© 2013 Desiring Clicks. All Rights Reserved.
Top