前面我們一直都在介紹 OpenType 的 AFDKO 和 javascript 上的 FontKit 解法，不過既然我們要做一個網頁嘛...那就需要有前端的畫面啦。

雖然很多人都會用 Figma 之類的（應該沒有人還在用 Adobe XD ㄅ...）來畫 UI 畫面，不過審視我們昨天檢討的網頁功能需求後，我覺得其實不需要這麼麻煩啦，用白紙和筆在紙上揮毫一下，然後丟到以拉上拉一下、有個底就可以惹。

Desktop UI

這是我想像中的電腦版畫面，是一個三欄（column）式的頁面，其中的顏色只是方便和手機版 UI 對照，不代表實際的區域底色：

• 黃色的 Emoji Picker：用來放 Emoji Mart 插件的地方，即使用者挑選 Emoji 的地方。
• 綠色的 Customized Emoji：用來放使用者選的的 Emoji 在「著色」後的結果。可以是一個字（<div> tag）、也可以是圖片格式的畫布區域（<canvas> tag）。
• 棕色的 Reference Emoji：用來放使用者選的的 Emoji 的「原樣」，用來提供一個參考，方便使用者比較上色前和上色後的效果。可以是一個字（<div> tag）、也可以是圖片格式的畫布區域（<canvas> tag）。
• 橘色的 Functional Buttons：功能性按鈕區域，用來放像是「Rnd Emoji 隨機選擇 Emoji」、「Rnd Color 隨機為 Emoji 填色」、「Reset Emoji 重設 Emoji 顏色」、「Save Image 下載圖片」、「Share 分享」之類的按鈕，畢竟這個年代的使用者都很喜歡丟骰子 🎲，我也很喜歡。
• 粉紅色的 Color Pickers：色號選擇區，即分析該 Emoji 後提取的可覆蓋色號，每當使用者有新的選擇，就會觸發 override-colors 的 Style 改寫。
• 灰色的 Footer：就... Footer，雖然還不知道可以放什麼，但就先預留這個區域。

Mobile UI

和三欄式的 Desktop 不同的是，Mobile 的網頁是一欄式的，同時拔掉比較沒那麼需要 (?) 的 Reference Emoji ，只留下必要的 Customized Emoji。同時新增一個 Open Btn 的按鈕，按下去 (onclick) 之後才會跳出 Emoji Picker，而且會覆蓋在最上層；而在使用者任選想要的 Emoji、或是再點一次 Open Btn 之後，就會自動關閉 Emoji Picker。

動畫的需要性？

目前傾向於輕量化的網頁設計，所以不想要太多的炫砲動畫 ，而且我也很討厭一些無謂的謎之跳動或淡出淡入 。

不過，某些按鈕的動畫還是需要的：以 Functional Buttons 這一區的為例，像是 Rnd Emoji、Rnd Color 這種 按下去就會即刻反應 的按鈕來說，使用者可以馬上知道自己是有按還是沒按到，動畫就不是必須的；當然想要也是可以，就是個可選的概念。

而像是 Save Image 按鈕，則因為受限於使用者的網速限制，按下去之後不一定會馬上跳出下載的結果，此時，一個點按的過渡動畫就有存在的必要性（或是彈出一個提醒視窗），至少可以讓使用者知道自己已經按過了，不會因為沒馬上看到結果而重複點按。