常用功能圖卡與主選單

此系統上線後提供新光人壽、新光銀行、元富證券三個體系使用。在入口網站右下方可點選進入。

三體系的智能客服系統版型架構是相同的，但人壽、銀行、證券的常用功能圖卡輪播、左下角主選單，則各自有所差異，因此是分拆成三包檔案各別提供。(css 是三份資料夾有共用的 main.css，另外再附加各自的客製化 css。)

問候貼圖

業主端有找使用者進行需求訪談，回饋希望客服角色「小新」是一個親切、專業的形象。業主發想了打招呼、查資料等常用情境 10 組，我方再以小新向量圖加以設計成活潑的貼圖，視使用情境穿插於對話。語法部份有寫記錄於此：Sprite 影格動畫 。下圖為展示用截圖，實際貼圖可前往此頁觀看：

輸入代碼以查閱版型

此專案初期使用 Sketch 製作設計稿，審完畫面、切版完成後，後續的調整都是直接在切版 html 上進行來回修改。

雖然我的 demosite 無程式功能，但以輸入代碼→回覆訊息的方式，提供業主與工程師查閱特定的對話版型。當時不熟悉前端框架，腳本是寫於一隻Json 檔中，再由 main.js 讀取、回應。至於測試時如何輸入代碼觀看版型？則可以參閱這份文檔：客服對話版型開啟方式

當然，這些陽春的問答方式，僅用於內部開發時，前台設計畫面的操作與展示。實際後台知識樹的建立，為技術廠商的 know-how，不在設計的工作範圍內了。

Sketch 畫面