最近在設計的專案終於在12月中上線啦(灑花)，特別是因為我在還沒加入 WeMo 時就已經是他們 APP 的老用戶，因此點開 APP看到自己的設計時，真的會有一股特別的感動~
大約在11月，被分配到負責年度回顧與Xmas的專案，這次專案分別有三大項目，分別是：
1.APP內開的年度回顧 landing page
2. Xmas 相關的App UI
3.節慶版 App icon
這次設計需求大概是 80%UI，20%UX。以下稍微紀錄一下設計過程心得：
一、角色設計
設計過程考量了三點：品牌用色、品牌調性與和節慶感的連結，最後選用了北極熊的形象作為活動角色。既能夠讓人聯想到冬天、年末、聖誕，也符合品牌環保永續的理念，顏色維持 APP 一貫藍綠色的清新調性，在APP上顯示也不會突兀。
二、年度回顧 campaignsite UI設計
這次年度回顧的 UI 設計一樣依照品牌用色與調性來設計介面，因為是 webview, 需同時兼顧 android 與 ios 尺寸的 resize 變化，這部分使用 figma 的 constrains 設定，加上把頁面 components 化就可達成只需要做一個頁面，就能自動生成適應各裝置的 UI 的效果(constrains加上auto layout功能真的超好用，之後會寫一篇文章分享)，最後在畫面旁標上 resize 邏輯與相關特殊動畫需求、transition 限制等 UI spec，就可 handoff 啦~ (其實如果constrains設的很完美，RD其實大半可以從figma裡轉出的css就理解你要的元件resize限制，溝通超無痛)
頁面一律會先設好constrains並設為母元件，然後選擇尺寸，畫面就會自動依據你所設的設定去resize啦~
三、Xmas APP 內 UI 設計
APP內沿用過去的 feature，所以這次設計需求幾乎以UI為主，參考 PM spec製作幾個mockup 與簡單的 flow, 因為流程與呈現動畫不複雜，並不需要UI這邊給prototype，不過還是需要 UI spec, 特別是 img fill 的屬性與一些需求，在與RD溝通畫面淡入淡出時倒是討論到了設計 animation library 的必要性。
四、APP Xmas icon 設計
通常 APP icon 跟一般設計 UI 一樣，需要做 跨平台的 handoff，值得一提的是，在輸出 Android Adaptive icon 時，因為輸出的是未平面化的 SVG，因此要特別小心元件是否有 border ，如果有的話就得平面話，不然就會發生給APP team上版後，border邊緣出現鋸齒狀，且原本設定 center 的 boder 會自動轉成 inside 的狀況。
下方圖片就是在 handoff 跟做 design preview 時需要出的稿，看起來好像很複雜，實際上只要做一張圖(母元件)就好，其他都是子元件，在母元件做修改後及時顯示各尺寸與各平台上的preview。
五、APP Xmas icon 設計
因為這次專案需要較多畫面，讓我真的越來越能體會到 UI spec 的重要性，UI 這邊將標記邏輯統一化以及將元件 layout 按照前端的邏輯設定好，不只能減少 UI 在各平台尺寸出現不符預期呈現而需要來回改稿的狀況，也能讓 RD 在 Figma 查看間距與元件與資訊時就能理解設計師的要求，減少不必要的來回溝通與通靈的時間成本。
為了達到上述期待, 我在製作此專案期間，也順便完成了兩件事：
- 把一些常用的spec 元素 cpmponent 化成一個 Library
- 利用 Figma 上的 Prototype setting 製作 Animation library
以上兩種做法成功讓之後產出 UI spec 更高效。有空會再整理在下一篇分享給大家！
