UI/UX ✹ App ✹ Illustration

Noise Eraser App

依據客戶提供的 wireframe 文件,在既有的框架與時程下,透過 UI 與微互動設計,提升使用體驗。

專案背景

DeepWave 致力於讓電腦像人一樣聽懂環境中的聲音並達成聲音的多重處理。第一款產品:Noise Eraser(網頁版),是一款針對聲音/影片自動降噪保留人聲的音訊工具。主要應用情境為新聞媒體業,協助優化採訪影音檔案聲音處理,如去除風扇、突發的狗叫聲、環境回音等雜訊。

為更加貼近應用情境,DeepWave 將推出 App 版。

專案目標

在既有的框架與時程下,透過 UI 與微互動設計,提升使用體驗。

我的角色

依照顧客需求及 Wireframe 進行使用體驗優化及 UI 設計,與研發合作完成 App 1.0 開發任務。

  • UI Design
  • Illustration
成果與影響

2023 Asia Smart APP Award

Noise Eraser App 上線後,獲得 2023 Asia Smart APP Award 生活風格類優選。

設計特點
#1 為冰冷、生硬的科技,添加一點可愛的人性

由於產品功能目標明確,步驟簡潔,單純的功能讓 App 給人一種單調、生硬的距離感。

我透過產品名稱發想設計角色 IP,用橡皮擦超人來傳遞「消除不美好」的特點,適時融入 UI 設計中。 可愛活潑的角色同時也讓充滿科技感、生硬的技術在眾多類似產品中脫穎而出,在 2023 年榮獲 Asia Smart APP Award 生活風格類優選。

#2 調整設計佈局,提供更有意義的資訊

在影音檔匯入檔案庫後,使用者會需要檢視、確認內容,並將欲處理的檔案上傳到 AI 降噪工作坊中。

從客戶提供的 Wireframe 理解目標與流程後,我提出將卡片的佈局由直式改為橫式的呈現方式,讓同樣高度下可以顯示較多的資訊,同時也對短版裝置的用戶更為友善。

▲ 使用者選擇多個影音檔匯入後,列表顯示出資訊供使用者確認待處理的檔案。
#3 如果不能改變流程,那就讓使用者聚焦在重點工作吧!

檔案上傳到 AI 降噪工作坊後,區分為「上傳中」、「分析處理中」、「待分析處理」、「處理完成」四種狀態,使用者可以在檔案處理完成後自由調整降噪風格、比例等,完成後下載或分享。

根據客戶規劃之流程,建議將「處理完成」的區域作為重點,以較大的卡片、左右滑動檢視的形式呈現,下方區域則保留橫式窄版清單,透過標籤方式區分檔案狀態; 透過頁面佈局的調整,讓使用者能更聚焦於主要任務中,次要的資訊也能同時一覽無遺。

▲ 頁面上半部以大卡片形式呈現已分析完成的音訊檔,點擊後可完成自由調整個人化參數、分享或下載的任務。
設計文件

Design System & Components