Skip to content
No results
About
Resume
About
Resume
Search
美容介面設計
角色 —
介面設計
使用者經驗
方法 —
介面設計
工具 —
Sketch
Flow Map
Zeplin
時間 —
1.2021-3.2021
結果 —
• 提升介面整體視覺
• 統一操作的視覺動線,改善接收資訊量的專注力
• 規劃操作狀態
背景介紹 —
建立美容師拍攝皮膚、推薦產品、美容產品與客戶資料檔案管理軟體
為新創團隊開發美容介面設計,此項產品主要為提供美容師推薦保養品的軟體,包含拍攝膚質照片、推薦美容產品、建立客戶與產品資料等功能,幫助美容店家以數位化方式管理客戶與產品。
專案已有既定的產品介面,原先以工程師角度,僅將需要分析的指令放到介面中,缺少視覺設計與完整的操作規劃,且偏早期Windows系統的使用邏輯,導致美容師這個軟體的意願低。
此次設計需考量介面視覺設計來提升美容店家形象,同時以使用者常見的操作邏輯,規劃介面的功能位置與視覺動線,提升美容師的使用意願。
執行流程 —
• 10款會提健康數據紀錄功能
• 7款內建運動方案,並提供影片或語音教學
• 6款提供社群或介面互動功能
• 會提供音樂播放或內建節奏偏快的音樂,來維持運動狀態
前期討論 —
背景
一款協助美容師推薦保養品的軟體,不過美容師反應介面美感不高,導致使用產品意願低
問題與挑戰
• 有固定的資訊框架與設計限制
• 介面缺乏美感導致美容業者使用意願低
• 產品類型多樣,需考量資訊的歸納與增減彈性
目標
• 以使用者常見的操作方式改善視覺動線
• 調整指令位置提升易讀性
• 建立視覺整體性,增加使用意願與美容業者服務形象
前期討論 —
提案
在有限的時間與製作成本,提出兩種設計方案,其中提案二以常見的電腦軟體架構與操作方式,將功能與欄位進行分類與位置規劃
樣式一
樣式一
樣式二
樣式二
使用流程
• 選擇客戶資料
• 利用鏡頭功能拍攝膚質
• 編輯膚況資料
• 推薦相關美容產品
• 管理店家產品資料
UI Flow
經功能與架構討論,規劃介面的頁面流程
設計產出 —
系統規劃
顏色、字體與元件規範
介面設計
• 統一視覺瀏覽動線與一致性
• 提升操作順暢性
基本視窗
頁面登入
膚質檢測
今日紀錄
商品管理
結果與建議 —
結果
• 提升介面架構整體視覺感受
• 簡化資訊量,統一視覺動線
• 初步系統化介面元件
建議
建議進行使用者測試,以聚焦後續修改優化目標,未來可訪談美容師,暸解實際需求與介面的使用想法
心得 —
• 工程師時常以技術層面的考量執行合理性,若能利用使用者情境作為溝方式,可降低討論時間,同時增加目標共識
• 未來需熟悉介面檔案管理技巧、元件與資訊架構,方便後續與團隊精準溝通,提升檔案交付流程與效率
• 討論過程中,若有意見分歧的地方,可尋求網路社群協助,以收到客觀的建議與想法
• 圖片來源與使用合法性為平面與介面設計需留意的地方