影響品牌成敗,設計 icon 圖標容易忽視的 2 個細節

明明都長得很像的介面,為什麼別人看起來比較好?你知道小小 icon 設計決定整體嗎?

看完文章收穫
『 普通與精品的差距,有時候只差了一些細節。 』


 — Cora 千錘百鍊的第 003 篇文章  —

怪怪與卡卡的感覺

某次跟一位客戶聊天,他說:由於朋友免費幫忙設計,現在遇到一個不知道是不是問題的疑慮他也不太好開口,畢竟介面顯示上該有的都有,但就是感覺怪怪的,而怪怪的感覺也不能貿然當作一個問題吧。

但是每次在使用的過程中,總是卡卡的,一下忘記點這個按鈕,一下又覺得操作不順暢,總是覺得怪怪的。

後來在工作時也很常遇到,不管是在測試 App 內還是 Web上,他每次都有這種“怪怪”的感覺,他不確定到底是他的問題,還是感覺錯誤?後來我說你發我看看。

嗯。

看完後我發現原來問題出在 icon 上。

(有時候怪怪可能由很多個點組成,為了不過度發散,本篇不討論頁面中潛在問題與設計邏輯)

出了什麼問題?


 語意理解與傳達形式問題

前陣子接了一個後台管理介面設計,裡面有一個主要功能命名為『媒體』。

在理解業務背景後,加上直觀的判斷,繪製上以播放器的樣式作為媒體功能的 icon。

(左)後台管理的 icon 圖示 / (右):google搜尋的媒體 icon 示意

開會時負責人反應,不是說 icon 的樣式醜,也不是不能用,但就是不太對。一開始我不是很理解,後來反覆溝通,發現問題出在於:

實際功能操作的模式,與畫出的 icon 圖形要表達的意思有落差。

也就是一開始在理解業務背景中所產生的思考盲區。

以『媒體』來說:實際操作行為是把要製作節目的各種檔案拖曳進平台內,達到能自由編輯媒體,完成製作節目。(由於其他考量不能更動命名,因此只能透過 icon 輔以表達清楚。)

所以從 icon 著手,必須強調可以放置多個檔案的行為,所以比起一開始的播放器樣式,使用資料夾裡面放有檔案的圖形更來得合適。

ICON – 菱形設計法則,包括語意、層級、設計形式、風格、一致性、範圍。
– 引用 ICON设计法则之菱形法则



 icon 要能提供用戶指引,同時傳遞品牌核心價值與特色。

每個介面裡邊都有不同層級的 icon,但 icon 設計本身存在的目的,除了正確引導使用者更容易地操作產品,同時也在傳遞品牌核心價值與特色。

而當 google 搜尋 icon 設計,會找到各種教你繪製各種風格的 icon ,但這麼多風格要選擇哪一種呢?為什麼一個 App 內有這麼多不同風格的 icon 呢?

決定 icon 風格之前,需要回歸品牌核心要傳達的價值,從品牌核心價值,提煉出設計風格。

設計的風格只是一種選擇,品牌靈魂才是一切
– 出自品牌之前,設計之外,作者 黃于庭著

合適的 icon 設計,除了適當傳達語意並友善的指引使用者操作,也能各司其職的傳遞品牌核心價值


例子 – 中國淘寶 App

結合淘寶本身品牌色,其核心價值以人為本,而人與人之間從吸引到建立關係,有很多特性,其中就有包容性,而所有 icon 都以圓或圓形的曲線做連接,而本身圓也代表著和諧、與包容。

介面截圖:中國淘寶 App

有沒有發現,不管是第一級還是第二級或是第三級的 icon,雖然每個 icon 本身都帶有不同的引導作用,但其實在表達品牌特性同時又充滿一致性。


例子 – 小雞上工 App

偶然發現的應用程式,該 App 的族群定位是給大學生(年輕人)使用,不管是按鈕的表現,或是顏色與細節都很好的延展了青春、活潑的調性。是目前相似競爭品中,少有把控不錯的設計表現~

介面截圖:小雞上工 APP



結語:

合適的 icon 設計,我認為需要達到:

 對的語意理解與合適的表達形式
完善的理解本身要設計的功能,並準確的傳達給使用者的知道,再通過合適的設計形式表達。

 基本要能提供用戶指引,同時傳遞品牌核心價值與特色。
icon 存在的目的在於能更好的讓使用者進行操作,而設計風格為傳達品牌核心價值的載體,兩者相輔相臣。

微小的力量

說心底話,
很糾結有沒有必要特別拎出來寫成一篇文章,雖然小小的 icon 不能代表整個 App 的操作體驗,但有時候看到不錯的 App,icon 確實存在畫龍點睛的效果。而整體操作上很不好的 App ,有時候也因為 icon 亂七八糟,觀感更差。

剛接觸 UI 設計時,不管在繪製 icon 或是選擇上總是大而化之的無所謂,覺得啊~有現成的幹麼不用?也因為它就小小的,往往輕忽。

但隨著年紀漸長,自己在做競品分析與設計批判時,想起在處理 icon 時老大的教誨,想說還是寫吧,給自己一個警惕。

icon 設計
老大的教誨

不管是 icon 還是人生,願都能善用微小之處,展現特色,發揮顯著的力量。




icon 設計只是介面設計中的其中一環,相關 UI 設計系列文章:

💡 圖片、文字影響點擊率、轉化率:
提高點擊率!Banner 設計時 5 個藏在魔鬼裡的細節

💡 選擇照片、文字排版,影響頁面整體閱讀、產品曝光展示率:
凸顯產品優勢!提高圖片瀏覽量 3 個選擇心法

這篇文章有幫助到您嗎?歡迎留言跟我說 ~

Hi ,我是 Cora – UI 設計師,興趣畫室內3D渲染圖,提供設計相關服務 (點擊去瞧瞧作品),今年過著自由接案的間隔年生活,歡迎來找我聊天。

如果想找人說說話,也剛好喜歡寫文字的我,不侷限任何事情或單純發設計案子給我,在下方留言區輸入電子郵件並認真寫下內容,我真的會在收到信息後仔細回覆您哦 😉

喜歡文章免費 👏 按 5 下 Like 及點擊『收藏』,我將收到鼓勵與有機會得到錢錢!祝順心,下篇見了

Leave a Comment

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

Scroll to Top