動態貼圖藝術家
開發製作點陣繪圖的新功能，並整合多步驟的完整體驗
About
動態貼圖藝術家是一個讓用戶可以在手機上繪製點陣圖動畫的工具。讓用戶可以依照自己的需求設計表情貼圖，並顯示在裝置上，像是暫停路邊時需要呈現的訊息等。依照個人狀況與需求設計貼圖訊息。這個功能是附屬於CarWink產品的一部分。
職位
UIUX設計師
項目
CarWink
工具
Sketch
Illustrator
Photoshop
After Effect
Goal
可理解的步驟
讓使用者可以依流程，完成我們內部製作動態表情貼需要的設定並依序完成。
製作動畫的概念
引導使用者理解製作動畫是由許多單張圖構成的，並可以在六秒內自由的分配不同形式的動畫。
多種繪圖功能
在單張點陣圖介面裡，設計出各種功能，幫助使用者可以順利完成單張點陣圖的製作。
Research
Who
什麼樣的人會使用Emoji Creator？
有購買CarWink的用戶，並註冊帳號、藍牙連線裝置與軟體後，就可以進入使用。
When
何時才需要使用Emoji Creator？
用戶需要額外客製化的需求時，可以自製圖案，並上傳審核，在審核過就可以下載到裝置內使用。
What
Emoji Creator有哪些限制？
用戶在創建圖案時，應避免使用負面、批評、
犯罪、腥羶色、種族歧視等意涵的字眼與圖示。
Where
在哪裡可以使用Emoji Creator？
用戶可以在任何安全的地點使用動態貼圖藝術家製作客製化表情動畫。避免在駕駛中或步行中等需要專注力的情況下操作使用。
Why
為什麼要開發Emoji Creator？
想給予用戶擁有創作圖案的自由，以及更多場景的使用空間，不限於交通方面，也可以用於裝飾或是商家促銷，或是社群方面的車隊遊行等。
How
如何開始使用Emoji Creator？
用戶在下載完App之後，須先與CarWink裝置連牙連線後，並且註冊為會員後，才能進入編輯客製化的動畫。
Competitor Research
我們收集了幾款App都有點陣圖的繪圖功能，做了分析和比較，各家產品都利用點陣藝術來創造產品的獨特性與趣味性，但是對應的市場有所區別，目標用戶也不一樣。
共同點
-
都是以點陣圖為基礎的商品
-
都強調創意個人獨特的性質
-
都是屬於IoT產品
-
都是吸引喜歡新鮮感的用戶
-
帶來娛樂與趣味的價值
差異點
-
硬體設備不一樣（分別為播放器、顯示器、背包）
-
使用場景不一樣（分別為室內娛樂、行駛、旅遊）
-
解決的痛點不一樣
若是根據Divoom繪製點陣藝術的介面設計，的確涵蓋了很多功能，對於用戶在創作時可以有很大的空間可以玩，達到娛樂性質，當然功能多操作介面也相對複雜。
我們也受到Divoom的啟發，設計各種畫圖的工具，讓用戶有比較好製圖的體驗。受限於我們的產品是車用裝置，在畫面呈現就就不需要有太多讓動畫變複雜的功能，動態的影格數也不需要太多，速度也不建議可以調整快慢，因此我參考了競品的優點並整合了自家產品的需求為目標，設計出來的動態貼圖藝術家。
Challenge
如何將製作動畫中的所有需求整合到一個流程中？
編輯動畫
限制在最多6秒6個影格內的動畫
選擇靜態圖
為靜態模式時顯示的單張圖
選擇展示圖
用於介面上代表這個動畫的選項標示
Requirements
製作動態貼圖需要準備五件事：
1. 編輯動畫 （限制在六秒六張影格內）
2. 選擇靜態圖
（一張圖跑六秒的靜態模式）
3. 選擇展示圖
（顯示在手機介面裡的按鈕）
4. 設定語音指令
5. 設定動態表情貼的名稱
Goal
我們希望把內部製作動畫的需求與方式變成一個流程，讓用戶在操作過程中可以逐步完成操作並完成設定送出審核。
同時也思考到要如何完成每一步驟的製作又可以回去修改設定，讓我們有花一些時間做迭代，嘗試讓流程的操作更流暢。
Iteration Process
原本是一個步驟接一個步驟的「線性」設定，思考到使用者會來回進入修改圖案，最後改成「樹狀」的設定，動畫、靜態圖和展示圖拉到最上層，可以在這三者中來回切換，進入其中修改選項。這樣比起一層層回上一步較容易操作。
Functions
建立點陣圖案的功能
完整的繪圖功能，其中包含：
-
十五種顏色上色、
-
清除單點、
-
清除同色區域、
-
同色區域換色、
-
移動畫面、
-
畫面縮放、
-
移動圖案、
-
翻轉圖案，
-
以及複製影格。
編輯動畫的功能
做出影格和時間軸的UI設計，提供給使用者可以自由地按排調整。由於主要是給駕駛專用的，目前暫時不開放增加影格和調整速度的功能，以確保安全。
審核動畫機制
一組帳號可以擁有十組的送審機會會，每一次送審，會針對是否有負面、歧視、不雅的訊息作為審核標準，以確保使用者在使用上是以正面、友善、提示為出發點。
User Flow
UI Flow
編輯點陣圖動畫
-
跳出提醒說明目前動態貼圖還剩幾組可以送審。
-
首先，從編輯動畫開始。
-
點選第一個筐進入點陣圖編輯。
-
在編輯完後，按下「儲存」回到上一頁。
-
剛剛編輯過的圖會變成縮圖顯示在第一個位置。
-
以此類推，接著建立其他的圖。
-
點擊時間軸裡的一個影格，則會出現可以加入圖片的選項。
-
按下圖片上的+，出現預覽並新增至時間軸內。
-
按下「播放」預覽編輯完的動畫。
-
按下「暫停」停止播放。
-
按下x 離開預覽。
-
儲存編輯好的動畫。
-
回到動態藝術家的最上層。
選擇靜態圖
在完成動畫的單張點陣圖編輯完後，就可以從中選一張當作靜態圖
-
往右滑一頁是選擇靜態圖
-
進入選擇靜態圖編輯
-
從剛剛在動畫那端完成的圖像列表中選一張圖
-
選完後，回到上一頁，預覽的圖像會顯示在裝置上
選擇展示圖
-
再向往右滑一頁是選擇展示圖
-
從圖像列表或是手機裡的相簿選一張圖當作展示圖
-
點選後，會出現一次圖像預覽，按下「選擇」鍵後，縮圖就會出現在手機介面上。
-
點選「送出」鍵進入設定動畫的資訊頁面
完成送審流程
-
為新設計好的動態貼圖設計名稱、指令詞。按下「儲存」送出請求。
-
跳出的提醒會問用戶是否到送審頁面看送審狀態。
-
這個頁面出現幾種狀態：
a. 正在審核中
b. 通過：可以下載使用
c. 通過：已下載
d. 拒絕：再次編輯
Prototype
開始頁面
登入帳號後，一個帳號會有十組的空間可以製作並在送審後下載使用。一進來時會顯示目前還剩幾組提醒使用者目前剩下的數量。
編輯動畫
影格列
這裡有六個空格來編輯動畫裡的單張圖，只要點選一張，就會進入編輯的畫面。
時間軸
將一張一張的照片加入動畫時間軸內，最多可放入六張圖，最少放一張圖跑六秒。
編輯界面
點其中一格進入單張圖的編輯界，編輯後會儲存在影格列裡。
上方選單
我們設計了四種功能放在上方的選單裡。分別為小提示，回到中心，開關點陣外匡和輔助線。
開始設計點陣圖案
在畫圖的工具裡，有常常使用的四個工具，分別為選色、刪除單點、刪除同色區域、更換同色區域顏色。
放大屏幕
這裡有六個階段的比例可以放大螢幕。當螢幕變大時，可以使用移動畫面或是選單裡的回到中點到達螢幕的中央，不會因為放大而迷失了位。
移動、翻轉、鏡射圖像
這裡有八種角度的移動方向，分別相差45度角的方向移動。翻轉則是有四種角度分別相差90度角。
複製圖像
從其他影格裡複製圖像過來編輯。
預覽動畫
將圖片加入時間軸內，我們可以新增或刪除圖片來安排圖片的順序。
送出審核前
從動畫裡的圖表中選擇各一張靜態圖和展示圖。填入設計好的動態貼圖名稱和指令詞以及最後的確認。送出後，我們將內部審核完就可以下載使用。
Design Guideline
Icons
Result
用戶回饋
我們也接收到 一些使用者回應，由於不太會畫畫，若是有提供一些範例下載使用，可以幫助他們製作動畫。關於這點我們也在思考，未來也許可以增加簡單的印章功能，或是開啟線上商店等概念來回應使用者的需求。
