作者 Sheen 分享參加 QQ 拼音皮膚大賽作品《一鍋湯》的完整設計思路與製作流程，展示如何將生活觀察轉化為功能隱喻，在有限畫布內融合 5 個功能按鈕狀態，兼顧美感與易用性。

設計概念：功能隱喻生活化

• 鍋體：輸入法主面板背景。
• 枸杞：中/英文標點切換鍵（紅點點綴，醒目）。
• 冬菇：全/半角切換鍵（棕色圓餅狀，可點擊感強）。
• 湯匙：打開工具箱入口（把手朝外，暗示「挖掘更多」）。
• 漂浮葉子：用戶登錄/狀態入口（動態漂浮，引注意）。
• 左上紅鈕：中/英文輸入法切換（經典紅綠燈隱喻）。

難點：5 個按鈕各態 (常態/懸停/按下/禁用) 融入場景而不突兀。初擬獨立置於鍋邊，覺得「湯裡空蕩蕩像擺設」，遂決策將按鈕「煮進湯裡」，形成趣味與功能雙贏。

製作流程關鍵節點

1. 實物臨摹為本：拍攝/搜集真實砂鍋、枸杞、香菇、湯匙高清圖，逐層矢量描邊、取色、疊加圖層樣式，保證質感真實度。
2. 按鈕狀態機設計：每個功能元素建立 4 狀態圖層組，通過圖層樣式 (內發光、投影、斜面浮雕、色彩疊加) 切換，而非重繪位圖。
3. 動態預留：葉子漂浮、湯面氣泡、蒸汽上升做成循環幀動畫，注入生命力。
4. 規格輸出：按 QQ 皮膚引擎規範切圖、命名、打包 JSON 配置，工程師零成本接入。

設計師心得

「靈感其實是觀察力的積累。最好的素材在生活裡。找實物臨摹，顏色質感才真實。把功能塞進隱喻裡，比硬貼上去難，但好用得多。」

皮膚詳情頁：https://skin.py.qq.com/fcgi-bin/showdetail?skinid=4293197210