前言

扁平化風格圖標設計是 UI 入門必修課。本教學以 HTC One 為例，展示從機身、螢幕、揚聲孔、鏡頭到圖標的完整矢量繪製流程，思路可套用至其他手機圖標創作。

關鍵步驟概覽

1. 新建文件：1200×1600 px，背景填 #20ade1。
2. 機身外框：圓角矩形工具，開啟「對齊邊緣」，680×1350 px，圓角 70 px，置中。
3. 內框：再畫一個 670×1340 px 白色圓角矩形置中，形成 5 px 邊框。
4. 螢幕層次：矩形工具畫深灰 #2d2d2d (670×1150) 與中灰 #646464 (640×1035) 兩層，第二層柵格化上移 3 px。
5. 揚聲孔：橢圓工具畫 5×5 px 黑點，複製排列成 48 列 × 4 行陣列，合併置中貼緊螢幕上緣。
6. 前置鏡頭：四個同心圓（45→9 px，顏色由深至淺）組成鏡頭模組，與揚聲孔垂直置中並右移 4 px。
7. 側邊圓點：揚聲器左側加兩個 16×16 px 圓，間距 25/10 px。
8. 底部揚聲器：複製頂部揚聲器組，翻轉置底，上移 2 px。
9. 導航圖標：直線工具繪製左箭頭（兩條線合併）與右選單圖標（三條線），顏色 #C9C9C9，對齊完成。

完成

扁平化 HTC One 圖標大功告成！掌握矢量形狀、對齊、複製陣列等技巧，即可舉一反三設計各類裝置圖標。