重新設計 MOCACARE App Icon Suite

Read this article in English / 點我看英文版

前言

一組好的 icons 不僅能幫助使用者快速了解正確的資訊，還可以為產品注入好的使用體驗。擁有一組優質的 icons ，對於現今的產品開發而言再重要不過了。

重新設計所有 MOCACARE app icons 所要花的時間比我預計的還要多上許多！在有限的人力（也就我一個 UI 設計師啊！）及時間下，我決定先著手進行 users 較常用的那幾個 icons，並在設計的過程中清楚列出 MOCACARE Icon Suite 該有的設計準則，以便未來可以持續為使用者產出體驗一致的 icons。

以下是我在設計 MOCACARE App Icon Suite 時所定的五項準則：

1. 容易被理解

Icons 的設計必須要讓使用者一眼就可聯想到正確的意義。Icons 的隱喻必須是不同年齡、國家、文化都能理解，而不是抽象或過度複雜的。

2. 精簡、統一的視覺設計

所有 icons 的視覺應該要做到最精簡。避免所有會讓使用者分心的視覺元素，任何設計上的決定，都是要為了幫助使用者能更精確快速的了解 icons 所要傳達的資訊。

（1）實際 MOCACARE 產品、（2）之前設計的 icons 、（3）重新設計後的 icons。 新的 icons 設計避免了一切會干擾使用者接收訊息的視覺元素。

所有 icons 要有統一的視覺規範。Ex: 一致的線條粗細、顏色、大小、比例、及相同的視覺語言等。當 icons 放在一起時，必須看起來是同一組的感覺。

（1）之前設計的 icons 、（2）重新設計後的 icons。新的 icons 設計視覺語言整體看起來更加一致。

3. 好的實用性

不同的使用者會有不同的螢幕尺寸、平台、使用情境等。Icons 的設計必須在任何狀態下仍保有好的實用性。

新的 icons 設計在不同的尺寸、濃淡度下保有一定的辨識度。

4. 預留未來的可朔性

隨著公司發展，產品在未來必定會有不同的新功能或改版出現。Icons 在設計時除了要滿足當下使用者的需求外，也盡量為未來任何形式的需求預留可朔空間。

（1）照相 icon、（2）重新照相 icon。隨著專案進展，我改造了照相 icon（左圖），另外設計了重新照相的 icon（右圖）。

5. 不斷檢視以上準則

以上設計準則應該要隨著時間而不斷進化，才能持續符合使用者的需求。如果我們嘗試以十年前的設計準則來設計今天的產品，那肯定會造成使用者不少困擾。回想一下從 iPhone 第一代到 iPhoneX (我寫這篇文章的當下) 也才幾年而已，icons 的設計就有如此大的轉變。也許未來有那麼一天，使用者再也不需要 icons 也說不定！

如果你喜歡我的作品別忘了幫這篇文章按幾下拍拍手按鈕 👏👏👏，並關注我的 Dribbble 及 Bēhance。特別感謝 Olivia Shih 協助此文章英文版的翻譯。