Themes App Template and Guideline

從只有我一位設計師開始,到後來的帶領設計團隊,我建立低成本的主題設計模板與相關的規範文件,大幅度的降低設計手機介面的難度,不僅能使內部團隊高效率執行,也讓全球設計師簡便並有效率的創作手機數位內容。

① Themes App 主題 UI 模板

以設計師常用的 Adobe 軟體作為模板,將手機 UI 系統化的圖層分類,並透過顏色區分出修改條件(ex:綠色表示修改物件顏色;黃色為替換物件)及智慧型圖層運用,能讓設計師立即瞭解圖層架構與需要設計的範圍,也方便維護設計檔案。

主題包共提供 4 個 Photoshop 模板:A_Lockscreen.psd、B_Launcher.psd、C_Icon_Launcher.psd、D_Icons.psd。

困難與問題點:搭配公司每年推出的新規格手機介面,在調整與更新設計模板的同時,必須考慮到檔案規格、系統相容性與不同尺寸的裝置,確保新舊規格的手機介面能保有一致性的視覺效果。

顯示完整資訊

收起資訊

② 使用自動 Actions 切圖

以 Photoshop 的 Actions 功能錄製自動切圖動作檔,幫助快速生產多個 Android 大小圖示,並同時完成檔案名命名與存入對應的路徑,它省略了繁雜的切圖過程、降低檔案規格錯誤的發生機率, 大幅度的縮短設計師的作業時間,同時降低出錯率,讓設計師夠將心力專注於創作上。

主題包共提供 1 個 Photoshop Action動作:當中對應上列 4 個 psd檔使用。

困難與問題點:需同時考量PC/MAC系統的使用者,提供不同的系統的動作檔;Adobe版本更新也可能要重新錄製。

顯示完整資訊

收起資訊

③ 設計規範手冊

詳細說明手機介面區域元件和對應的模板圖層,幫助設計師理解華碩 Zenfone 介面與設計上需考量的地方。

主題包共提供 3 種語系文件(繁中、簡中、英文)。

顯示完整資訊

收起資訊

④ 商城 Banner 模板與規範

提供 Photoshop Banner 模板,針對中/英文雙語系的字體、顏色、主視覺範圍及按鈕等定義準則。

共提供 2 種語系模板與文件(繁中、英文)。

顯示完整資訊

收起資訊

⑤ 主題設計審核規範

確定一般可用性原則和審美常識下避免犯錯的方法,讓設計師易於理解並能自行審視。審核內容包含易用性、一致性及完稿作業的介紹。

共提供繁中、英文 2 種語系文件。

顯示完整資訊

收起資訊

⑥ 定義檔案架構與命名

數位內容的架構需保持彈性、易於管理以及連貫性原則,才能讓團隊成員和跨部門合作夥伴能夠立即理解,降低版本銜接時發生錯誤。

顯示完整資訊

收起資訊