[DIY]分享米動手錶青春版Amazfit錶面設計流程SOP

    小米手環最吸引我的地方莫過於可以製作自己喜歡的客製化錶面，不論是喜歡卡一種風格還是卡通人物都可以自己設計，一個如此經濟實惠的手錶能夠提示手機訊息又可以換張美美的表面，可說是物超所值，這次就來記錄格主參考網路上的SOP更換錶面的過程。





    更換小米運動手錶青春版的錶面又可以分為兩個部分(1)到網路上抓現成的主題包進行更換。(2)設計自己喜歡的主題，並且將這個主題更新到手錶中。認真的比較這兩種方式，第一種其實客製化的程度不高，只能在茫茫的主題海中找到一個自己比較順眼的主題更換上去，無法按照自己喜歡的意思做出喜歡的樣式；第二種方式可以從頭製作喜歡的錶面，但是製作過程的難度較高，可能比較不適合一般大眾使用者。

    因此，格主在這裡有一個折衷的方案，可以兼顧客製化以及入門的難易度，讓剛入門的使用者也能夠快速上手客製化錶面的樂趣。

    在這裡，格主將透過網路上尋找來的教學資源，自己製作一個自己的專屬錶面，將以最簡易的過程來達到這個更換錶面的目的。以下將會以二個最主要的大步驟來分別說明：
(1)使用現成的主題範本來打包自己的客製化錶面。
(2)將打包好的錶面更換上小米運動手錶中。

步驟一：使用現成的主題範本來打包自己的客製化錶面

    由於要從零開始生成一個錶面需要花費很大的功夫，因此從現有的錶面進行簡單的修改是達到DIY目的最簡易的方式。在這個步驟格主將會使用網路上的現成錶面進行修改，以相同的空間佈局，製作客製化的背景風格。

    步驟一的操作方式格主主要參考了在Mobile01的討論內容來操作，完成了這個步驟大致上就已經成功了一大步。

1.到Amazfit主題網站抓下自己滿意的錶面空間配置

Amazfit錶面網址：https://amazfitwatchfaces.com/

    以格主自己為例，小米運動手錶青春版要選擇「Browse Bip watchfaces」，進入頁面後會有成千上萬的主題可以下載來使用，這裡的主題都是網友上傳提供的，有些是英文為主，有些還有德文、法文。如果發現某個錶面主題的月份或是日期顯示的文字看不懂，那大概就不是英文的吧。

    找到喜歡的樣式主題，可以來分析一下他的佈局方式以格主選擇的這個"Work"主題來說，會隨著時間改變的部分是下面的日期、時間、天氣，而上面的齒輪只是單純的插圖，純屬裝飾功能，是一個很好的修改範本。

    這個Amazfit的網站有非常多各式各樣的錶面，其實如果有找到中意的錶面佈局，就可以直接抓下來使用，也不一定需要進行客製化修改。格主在網站上的搜尋欄上打上"kanahei"或是"Rirakkuma"也能夠找到其他網友製作的錶面，非常可愛。

2.下載「AmazfitBipTools」錶面修改工具

    步驟二是下載錶面製作所需要的工具包，下載網址如下，接下來的步驟會使用這個工具對錶面進行展開與包裝的動作。

下載網址：https://bitbucket.org/valeronm/amazfitbiptools/downloads/

    下載完後，將壓縮檔案解壓縮，資料夾內就可以看到以下這些檔案，其中找到「WatchFace.exe」，下面的步驟會使用到他。

3.將錶面檔拖移至WatchFace.exe就會解壓bin檔

    這個步驟是將從網路上下載來的錶面檔案展開，有點像是解壓縮的感覺，透過編輯其中的部分素材來製作個人風格的表面。

    操作方式就是將錶面檔案「XXXX.bin」檔案拖曳到「WatchFace.exe」，在同一個地方就會出現一個與錶面檔名稱相同的資料夾。

4.依據Mobile01討論串的步驟，接下來要進行到「至https://v1ack.github.io/watchfaceEditor/」

    不過格主想要盡量地降低這個客製化錶面的製作難度，認為這是一個可以省略的步驟，如果有興趣要自己手動排列時間、日期、運動內容等等的訊息，可以到這個網站上進行修改，不過格主在此就不多做說名。

此步驟並非必要，請直接看到下一項。

5.進入剛剛解開bin檔案後產生的資料夾

    進入剛才展開的資料夾中，可以看到許多的圖片檔案以及幾個看起來很陌生的檔案。以下圖為例：

0000.png ~ 0072.png : 這是錶面的各種素材檔案，包含背景、數字、星期等等。
5b4126b0f0e9e_07072018.json : 這是紀錄錶面屬性的程式檔案，所有素材藉由這個檔案串在一起。
5b4126b0f0e9e_07072018.log : 使用watchFace.exe解封包過程遺留下來的紀錄。
5b4126b0f0e9e_07072018_packed_animated.gif : 動態預覽圖。
5b4126b0f0e9e_07072018_packed_static.png : 靜態預覽圖。

    看到這裡其實主要修改到的檔案就是0000.png這個背景檔案，只要在這個背景中添加任何的圖案，就會顯示於錶面上。

6.修改背景圖片

    在這裡格主僅修了背景圖片0000.png這個檔案，由這個背景圖面可以知道，上面的齒輪是顯示於錶面上方的插畫部分，下面留黑的部分是時間、日期、天氣要顯示的位置。

    因此在這裡如果可以成功將上方的齒輪插畫改為自己想要的圖案，就能夠在手錶上顯示出來。在這裡可以使用任何的圖片編輯軟體或是小畫家進行修改。唯獨需要注意的是規格必須與原本的圖檔相同，尺寸、檔案名稱都要一致才行，建議可以使用原始的0000.png檔案備份後直接進行修改。

    分享用LINE輔助修圖的小技巧，由於在手錶的錶面設計中，空白處是以黑底為主，因此像是卡通圖案、不規則形狀，可能很難進行完整的去背處裡。

    在這裡格主是透過LINE的對話框輔助來完成去背的工作。首先隨意找一個對話視窗，將背景改為純黑色，這時再將想要放在錶面上的貼圖圖案一一貼出，這時就會發現在黑底的聊天視窗上，所有的貼圖已經都完成了去背工作，輪廓外全部都是黑底。這時候只要進行螢幕截圖就可以開始製作錶面背景了。

    將螢幕截圖傳送到電腦上進行編輯，先把原本背景中不需要的部分塗成黑色，再把喜歡的圖案貼入背景中，就大功告成了。

7.打開指令視窗

    在路徑列上輸入「CMD」打開命令輸入視窗Shell，這個命令視窗應該對大部分的人來說都很陌生，但是其實這個步驟很簡單，按照下面的步驟進行就好了。

8.輸入打包錶面檔案所需的指令

    要打包錶面檔案，需要輸入指令格式：.\WatchFace.exe 資料夾名稱\檔名.json
    以下有個小技巧可以更簡易的完成這項工作。

(1)將WatchFace.exe拖曳到黑色的命令視窗中，視窗就會自動輸入好前面WatchFace.exe的路徑。
(2)輸入一個空白鍵。
(3)進入錶面的資料夾中，將XXXX.json檔案拉到黑色畫面中，這樣指令就打完了，可以按下Enter執行指令。

9.檢查是否在資料夾內得到"檔案名稱.bin"

    若沒有太大的問題，命令視窗應該不會顯示任何錯誤，且會在同一個資料夾內產生一個XXXX.bin的新錶面封裝檔，就可以利用這個檔案來更新小米運動手錶的錶面。

    得到這個.bin檔案後，基本上就已經完成了最困難的部分了，接下來只差把這個bin檔案套用到手錶上，請接著進入步驟二。

步驟二：將打包好的錶面更換上小米運動手錶中。

    步驟案是透過一個替換小米手錶錶面的APP來將我們設計好的錶面同步到手錶上，是個很簡易操作的APP，使用步驟如下。

1.到Google Play搜尋並下載「Amazfit Bip & Cor WatchFaces」

    這個APP是可以透過一個小手段將第三方的錶面輸入小米手錶上，是個很特殊的APP，裡面除了可以將我們製作好的.bin同步到手錶外，還能夠直接從APP上下載現成的錶面包。

Android: https://play.google.com/store/apps/details?id=paolo4c.amazfit.watchfaces&hl=zh_TW

2.將步驟一中製作出來的bin檔案放到手機中

    將步驟一所得到的新.bin檔案放到手機的內存空間中，這裡應該可以不用放到特定的目錄，只要放進去還有辦法找的到就好了。

3.開啟Amazfit Bip & Cor WatchFaces

    開啟APP後依下方的流程進行即可以將錶面置換掉：
(1)點選APP右上角的海苔條
(2)選「讀取.bin(BIP)」的選項
(3)選擇剛剛放入手機中的.bin檔案
(4)出現一個北京錶面的提示並且按下「打開小米運動」
(5)進入「錶盤選擇」，選擇北京天安門的這個錶盤圖示，就可以開始同步了

    同步完成後應該就能夠順利看到剛剛編輯的錶面已經顯示在手錶上面。

後記

    本次所提供的DIY手法是從網路上整理而來，並將步驟簡化到可以很容易地施行，希望能夠用最小的功夫就可以得到屬於自己獨一無二的小米手錶。

    關於小米運動手錶的彩色螢幕，其實是一種很單純的8色顯示螢幕，並不像手機的彩色螢幕般有高解析度與高彩度，因此所有的圖片在進入小米手錶後都會被轉換成手錶能夠顯示的圖片樣式，因此如果放置的圖案色彩太過複雜，可能會在上面看到許多的雜點，可能要斟酌圖片的複雜度與樣式，才能夠有好的顯示效果。