樂點AI音樂創作App

角色 —
介面設計
工具 —
Sketch
Illustrator
時間 —
8.2019
結果 —
• 提升品牌介面形象
• 規劃符合介面操作的視覺樣式
• 提升操作直覺性

前期討論 —

背景

協助產學合作的樂藝創新創，公司於近期需上架一款AI自動作曲APP「樂點」，因團隊以技術導向開發使視覺較無吸引力，本專案於上架前三週協助介面視覺設計，提升品牌視覺整體性

問題與挑戰

• 已有既定介面功能與框架，設計調整幅度有限
• 僅兩週執行時間
• 品牌形象尚未確立
• 元件樣式較無規範，且操作範圍有限而影響使用直覺性

目標

• 介面視覺設計
• 建立品牌形象與元件規格
• 以使用者習慣調整直覺的操作

執行流程 —

• 釐清介面操作問題
• 樣式設計提案，與工程師溝通
• 計畫流程：視覺定位 >首頁架構規劃 >元件設計 >其他頁面改善

提案 —

建立“潮”的品牌形象

參考市面青年族群喜歡的音樂APP形象，發現多以繽紛、漸層的色系為主，此次專案以“潮”的概念作為品牌形象，以原先介面紫色系形象延伸四種樣式

設計產出 —

元件樣式規劃

• 以顯眼的藍、綠色作元件區別，同時初步規範設計樣式

介面設計

登入頁

• 增加填寫欄位與按鈕區隔
• 提升品牌形象

首頁

• 增加活動公告瀏覽機率
• 凸顯按鈕與背景色差異

音樂設定

• 增加欄位、按鈕視覺差異性

歌詞錄唱

• 規劃觀看歌詞的視覺空間
• 提高字幕辨識性
• 增加播放時間軸保持聆聽自由度

影音合成

• 以播放按鈕提高觀看自由度
• 凸顯設定按鈕

後續建議 —

設計建議

• 為配合團隊有限的製作時程，實際APP僅置換按鈕與元件樣式，建議未來能以使用者的操作流程調整頁面架構，增加使用直覺性
• 本次使用網路圖庫Icon，未來可以客製圖樣來增加品牌獨特性、進行介面規範

挑戰與建議

• 建議聚焦產品定位與使用需求，規劃訪談與介面測試，作為未來產品迭代的重要依據
• 此音樂創作APP是新的使用模式，導致消費者需求性不高，建議以關鍵應用情境來推廣產品，引導目標客群暸解使用方式，如影像創作背景音樂、節慶佳節等
• 現階段功能較不符合消費者期待，建議規劃一般消費者的訪談與測試，進行介面修正
• 操作流程較為繁瑣耗時，建議以合併或精簡的方式，調整步驟與選項，如：詞、曲、設定、合成…等頁面使用方式

心得 —

• 圖像，按鈕、間距、尺寸、顏色、按鈕權重皆需經過細微考量
• 有別於單純介面練習與網頁設計，熟悉一般介面設計規範，能養成對整體瀏覽舒適感的敏銳性和嚴謹度
• 有標準規格化與視覺統一為此次執行的挑戰，僅字體與按鈕的大小、顏色即可花費不少時間調整
• 在有HTML和CSS網頁語法概念中，會限制設計的想法，如何在既有框架設計兼具美感、功能與特色的介面或網站，是需要不斷練習的課題