選單

HTC 輸入法

HTC 輸入法

HTC 輸入法

HTC 輸入法

輸入法算圖架構重組設計

輸入法算圖架構重組設計

輸入法算圖架構重組設計

輸入法算圖架構重組設計

Water Resource
Water Resource

重組 HTC 輸入法按鍵算圖架構 —— 以程式碼繪製取代分隔線圖檔,鍵盤彈出快一秒以上,並適用所有解析度。

重組 HTC 輸入法按鍵算圖架構 —— 以程式碼繪製取代分隔線圖檔,鍵盤彈出快一秒以上,並適用所有解析度。

重組 HTC 輸入法按鍵算圖架構 —— 以程式碼繪製取代分隔線圖檔,鍵盤彈出快一秒以上,並適用所有解析度。

重組 HTC 輸入法按鍵算圖架構 —— 以程式碼繪製取代分隔線圖檔,鍵盤彈出快一秒以上,並適用所有解析度。

身為 HTC Sense IME 的 owner,我主導了旗下所有輸入情境的設計——西方語言輸入 ( WIME )、中文注音 ( CIME )、手寫辨識 ( HWR )、SIM 卡密碼輸入、語音輸入,以及緬甸文、阿拉伯文等多語系輸入法,長期與 IME 工程團隊密切合作。
COS IME 是這段期間的一個關鍵轉折 —— 2013 年,這套系統獨立於既有 Sense 架構之外,與外部工程團隊合作重新打造。同一時間,我跟台灣的 IME 工程師一起討論,確認系統負荷的根源出在 assets 算圖,並在這個基礎上主導把算圖架構從傳統靜態圖檔轉換為 code-based 架構,輸出完整的介面設計指南。這套做法後來也回頭套用到 Sense 系列本身。
身為 HTC Sense IME 的 owner,我主導了旗下所有輸入情境的設計——西方語言輸入 ( WIME )、中文注音 ( CIME )、手寫辨識 ( HWR )、SIM 卡密碼輸入、語音輸入,以及緬甸文、阿拉伯文等多語系輸入法,長期與 IME 工程團隊密切合作。
COS IME 是這段期間的一個關鍵轉折 —— 2013 年,這套系統獨立於既有 Sense 架構之外,與外部工程團隊合作重新打造。同一時間,我跟台灣的 IME 工程師一起討論,確認系統負荷的根源出在 assets 算圖,並在這個基礎上主導把算圖架構從傳統靜態圖檔轉換為 code-based 架構,輸出完整的介面設計指南。這套做法後來也回頭套用到 Sense 系列本身。

挑戰 —— 疊加開啟時明顯卡頓,根源出在按鍵邊緣的光影素材

挑戰 —— 疊加開啟時明顯卡頓,根源出在按鍵邊緣的光影素材

挑戰 —— 疊加開啟時明顯卡頓,根源出在按鍵邊緣的光影素材

挑戰 —— 疊加開啟時明顯卡頓,根源出在按鍵邊緣的光影素材

自 Sense 3.5 以來,介面大量採用 .r.9.png 材質風格的靜態圖檔,讓整體系統負荷持續上升。這個問題在 IME 上格外明顯 —— 當輸入法疊加在正在使用的應用程式上開啟時,會出現使用者能察覺的延遲。我跟台灣的 IME 工程師一起排查,確認問題出在 assets 算圖:每一顆按鍵除了底圖跟按鍵圖層,還需要一組獨立的 Divider 圖檔來呈現邊緣的光影效果,而每一種解析度(FHD、HD、QHD、WVGA)都得各自輸出一組對應圖檔 —— 這正是當時 HTC UI 設計師最耗費心力的工作之一,開啟時的堆疊算圖成本也是這樣一路墊高的。

策略 —— 趁 Sense 5.0 走向扁平化的時機,把邊緣光影從圖檔改成程式碼

策略 —— 趁 Sense 5.0 走向扁平化的時機,把邊緣光影從圖檔改成程式碼

策略 —— 趁 Sense 5.0 走向扁平化的時機,把邊緣光影從圖檔改成程式碼

策略 —— 趁 Sense 5.0 走向扁平化的時機,把邊緣光影從圖檔改成程式碼

Sense 5.0 的設計風格開始把按鍵去除圓角、走向扁平化,但仍保留些微材質感 —— 這給了我一個重新檢視「邊緣光影怎麼做」的切入點。我提出把算圖邏輯從「輸出固定圖檔」改成「程式碼定義結構」:將按鍵拆解成 SRC 半透明紋理圖層、common_key/function_key 圖層(當時漸層還無法用程式碼實現,所以仍提供圖檔)、以色碼定義的 Divider、以及背景色碼四層,透過程式碼組合出最終按鍵樣式,Divider 與背景不再需要點陣圖。接著我輸出一份完整的《HTC COS IME Guideline》,明確定義每個解析度層級的 Divider 寬度(FHD 2px/HD、QHD、WVGA 各 1px)、Light/Dark 模式的精確色碼,以及按鍵按壓狀態的具體規格,讓工程團隊能照著規格直接實作。

專案成效與執行實績 —— 大幅減少素材堆疊,鍵盤開啟明顯變快

專案成效與執行實績 —— 大幅減少素材堆疊,鍵盤開啟明顯變快

專案成效與執行實績 —— 大幅減少素材堆疊,鍵盤開啟明顯變快

專案成效與執行實績 —— 大幅減少素材堆疊,鍵盤開啟明顯變快

把 Divider 與背景從圖檔改成程式碼算圖後,每顆按鍵需要載入的素材量明顯減少,其中又以 Divider 的減少差異最明顯。在應用程式上疊加開啟 IME 時,鍵盤彈出快了一秒以上,使用者能明顯感受到差異。同一份規格也能直接套用到各解析度機型,不必再為每個解析度各輸出一組 Divider 圖檔。這套做法後來也回頭套用到 Sense 系列本身,成為跨系統延續使用的技術基礎。

HTC 輸入法

輸入法算圖架構重組設計

輸入法算圖架構重組設計

年份

年份

2013

2013

2013

2013

時間軸

時間軸

1 個月

1 個月

1 個月

1 個月

工具

工具

Photoshop

Photoshop

Photoshop

Photoshop

類別

類別

UI/UX

UI/UX

UI/UX

UI/UX

TAGS

TAGS

Android OS · 算圖架構 · 舊系統重新設計 · 設計系統 · 行動裝置 · 產品設計 · 設計工程

Android OS · 算圖架構 · 舊系統重新設計 · 設計系統 · 行動裝置 · 產品設計 · 設計工程

Android OS · 算圖架構 · 舊系統重新設計 · 設計系統 · 行動裝置 · 產品設計 · 設計工程

Android OS · 算圖架構 · 舊系統重新設計 · 設計系統 · 行動裝置 · 產品設計 · 設計工程

Guideline
CIME, HWR
WIME, PIN/SIM

讓我們一起打造高效率的解決方案

讓我們一起打造高效率的解決方案

讓我們一起打造高效率的解決方案

ëaprica Creative Design © 2026 All Rights Reserved.

ëaprica Creative Design © 2026 All Rights Reserved.

ëaprica Creative Design © 2026 All Rights Reserved.