美容介面設計

角色 —
介面設計
使用者經驗
方法 —
介面設計
工具 —
Sketch
Flow Map
Zeplin
時間 —
1.2021-3.2021
結果 —
• 提升介面整體視覺
• 統一操作的視覺動線,改善接收資訊量的專注力
• 規劃操作狀態

背景介紹 —

建立美容師拍攝皮膚、推薦產品、美容產品與客戶資料檔案管理軟體

為新創團隊開發美容介面設計,此項產品主要為提供美容師推薦保養品的軟體,包含拍攝膚質照片、推薦美容產品、建立客戶與產品資料等功能,幫助美容店家以數位化方式管理客戶與產品。
專案已有既定的產品介面,原先以工程師角度,僅將需要分析的指令放到介面中,缺少視覺設計與完整的操作規劃,且偏早期Windows系統的使用邏輯,導致美容師這個軟體的意願低。
此次設計需考量介面視覺設計來提升美容店家形象,同時以使用者常見的操作邏輯,規劃介面的功能位置與視覺動線,提升美容師的使用意願。

執行流程 —

• 10款會提健康數據紀錄功能
• 7款內建運動方案,並提供影片或語音教學
• 6款提供社群或介面互動功能
• 會提供音樂播放或內建節奏偏快的音樂,來維持運動狀態

前期討論 —

背景

一款協助美容師推薦保養品的軟體,不過美容師反應介面美感不高,導致使用產品意願低

問題與挑戰

• 有固定的資訊框架與設計限制
• 介面缺乏美感導致美容業者使用意願低
• 產品類型多樣,需考量資訊的歸納與增減彈性

目標

• 以使用者常見的操作方式改善視覺動線
• 調整指令位置提升易讀性
• 建立視覺整體性,增加使用意願與美容業者服務形象

前期討論 —

提案

在有限的時間與製作成本,提出兩種設計方案,其中提案二以常見的電腦軟體架構與操作方式,將功能與欄位進行分類與位置規劃

使用流程

• 選擇客戶資料
• 利用鏡頭功能拍攝膚質
• 編輯膚況資料
• 推薦相關美容產品
• 管理店家產品資料

UI Flow

經功能與架構討論,規劃介面的頁面流程

設計產出 —

系統規劃

顏色、字體與元件規範

介面設計

• 統一視覺瀏覽動線與一致性
• 提升操作順暢性

基本視窗

頁面登入

膚質檢測

今日紀錄

商品管理

結果與建議 —

結果

• 提升介面架構整體視覺感受
• 簡化資訊量,統一視覺動線
• 初步系統化介面元件

建議

建議進行使用者測試,以聚焦後續修改優化目標,未來可訪談美容師,暸解實際需求與介面的使用想法

心得 —

• 工程師時常以技術層面的考量執行合理性,若能利用使用者情境作為溝方式,可降低討論時間,同時增加目標共識
• 未來需熟悉介面檔案管理技巧、元件與資訊架構,方便後續與團隊精準溝通,提升檔案交付流程與效率
• 討論過程中,若有意見分歧的地方,可尋求網路社群協助,以收到客觀的建議與想法
• 圖片來源與使用合法性為平面與介面設計需留意的地方