UXUI Designer 廖淑君 Alice Liao
其他UI Design
OUTLINE
‣ ⾃我介紹
P3-4
‣ 規劃與設計邏輯、⽅式
P5-16
‣ 1 個專案深入介紹
P18-27
‣ UIUX Design 設計案例
P51-61
關於我與經歷
‣ 在資訊產業 5+ 年、⼯業設計 1 年，Mid-Level Designer。 擔任職務包含產品經理、UI、UX、企劃、⾃由接案者、⼯業設計師。
‣ 擅長 1. 利⽤5W1H分析並系統化了解專案內容，並製作成可以交接迭代的內容。 2. 利⽤簡單的實測，判斷適⽤性，進⽽採⽤更適切的問題解決⽅式。
‣ 綜合能⼒ UX、UI、產品規劃、商業策略、社群內容⾏銷、網站SEO、消費者⼼理學、使⽤者數據研究
從⼯業設計跨⾜UI/UX領域-技能經驗累積技能
‣ 使⽤者研究：
‣ 產品開發：
‣ App Design、數據視覺化：
‣ Web Design、後台設計：
⽬標使⽤者需求分析、操作研究、市場調查、 策略評估、產品開發流程
UI Design、財經軟體研究、投資理財、 Prototype Testing
回outline
專案管理、App數據分析、主導⾏銷⽅向、 產品功能規劃、競品分析、產品⽣命週期 推估、跨部⾨溝通、⼼理學、商業策略、 獨立規劃執⾏產品開發
12 column Grid、功能模組化、JSON格式 帶入Mockup
outline
規劃與設計邏輯、⽅式
過去PM+UIUX負責內容說明
‣ 定位產品 ‣ 產品概念發想 ‣ 產品⽂件 ‣ 執⾏產品專案 ‣ 為產品負責 ‣ 隨時掌握⾏銷與產品開發趨勢 ‣ 思維成長研習與討論
STEP4 ⼯程開發
設計流程
STEP5 追縱 驗證 優化
User Snerario範例
數據研究範例
產品⽂件範例
outline
UI Flow
outline
搭配Wireframe，給予⼯程師不同狀態的規劃與⽂件內容
不同狀態UI流程
元件設計
outline
Design Guideline
1 個專案深入介紹
專案介紹
迷你庫-雲端進銷存”
https://ignatius.com.tw/minicool/
outline
我 v.s
導購Web Design
System Design
1. 確定產品定位、風格 2. web瀏覽順序、初版⽂案規劃
3. 既有流程、介⾯調整 4. 新功能規劃、設計 5. Mobile版本、重新規劃
洞悉狀況：利⽤ 5W1H 快速掌握雛形與⽅向
1. WHO (銷售對象)
⼩型餐飲、零售、個⼈銷售
2. HOW (販售⽅式)
關鍵字搜尋、粉絲團廣告傳播
3. WHAT (主要形象)
⼩⽽美、簡單易⽤、乾淨整潔
4. WHEN (使⽤情境)
⼿機快速紀錄、電腦精細比較成本
5. WHERE (銷售市場)
台灣
6. WHY (市場切入點)
雲端進銷存⽬前尚無功能 (1) 功能單純、(2) 快速、(3) 簡潔的產 品。
*企業形象：貼近⼈⼼的專業管理公司
網站⽬的、效益
‣ ⽬的：讓使⽤者「快速」進入系統內， 累積第⼀批使⽤者
‣ 效益： ‣ 讓第⼀批使⽤者來測試產品狀況，並蒐集回 饋，進⾏產品快速優化與迭代。
‣ 爭取時間；在優化的時間，讓⾏銷⼈員有時 間推廣品牌，建立產品可⾒度。
outline
第1階段：導購Web設計
outline
選定風格 : 從同屬性(線上軟體)找到符合TA的Pattern 著名軟體網⾴介⾯格式蒐集與分類： ⼈類潛意識會將格式差不多的東⻄判斷成相同類型、取向的產品，因此著⼿從具備影響⼒的「精緻雲端軟體」尋找適合MINIcool 取向的風格。
A: 情境Banner
B: Slogan+產品介⾯
C: 意象Banner
D: 套⽤真實產品
outline
如何選定，我們網站「⾄少」要呈現的內容： 蒐集不同產業Web，皆會出現的⾴籤（內容）
outline
決定網⾴的Wireframe呈現優先順序、架構： TA從哪裡來、各別⼼理⽬的是什麼
誰會想「搜尋」我們 誰決定要不要「購買」產品 -> 什麼因素會「影響購買慾望」 誰會長時間「操作」產品
⽬標TA細分，決定產品購買keyman注重內容、實際使⽤者注重內容 TA
⾝份
關⼼功能、內容
如何決定瀏覽順序、UX context： 依據消費者被吸引的優先順序
使⽤者瀏覽網⾴，⼼理⽬標優先順序 ①與⾃⼰相關的「字」 ②與⾃⼰相關的「圖」 ③⾃⼰的「痛點」（帶入個⼈，產⽣聯想） ④「免費使⽤」 —— —— 下載使⽤後，(1) 試⽤流程、(2) ⼼態 i) 立即操作「加入1-2個」庫存 ( UX ) ii)看畫⾯呈現是否清晰 ( UI )
fi
nal) 決定是否繼續使⽤
STEP1 ⽤⼾情境地圖： 帶入實際情境，讓我們了解使⽤者⼼態中的3件事。
• 不同⾓⾊，在搜尋軟體時會使⽤的「關鍵詞」 • 不同⾓⾊，會被「什麼Slogan」引響，進⽽繼續 瀏覽。
• 不同⾓⾊，在「瀏覽網⾴」時，想「快速看到、 操作」的是什麼東⻄。
STEP2 客⼾訪談： 從⽣活中尋找符合⾓⾊的TA，進⽽詢問「哪些選項」更吸引他們，來決定我們的主要Slogan。
從以上的流程，找到網站的
• Wireframe架構、流程 • 產品風格、樣式 • 第⼀階段網站最少要擺放的內容
Landing Page ⼿繪Wireframe草稿
Landing Page Wireframe
網站效益成果
• 1. ⾃然流量2週後，搜尋產品可在第⼀⾴ 找到。
• 2. 搜尋關鍵字「雲端 進銷存」，可在第 ⼀⾴找到。
outline
第2階段：系統流程、介⾯優化
outline
產品背景
• 從公司既有ERP產品，為主要架構，優化將介⾯與流程。 • 優化產品 3 個階段： • 快速優化可⾒介⾯，將其調整為使⽤者可理解的介⾯呈現； • 增加新功能，該功能不牽扯整個產品流程與結構； • 增加退貨退款流程，該功能會影響全部產品結構； • 重新規劃Mobile版本操作流程，符合⼿機使⽤者需要的流程。
原風格 v.s 符合網站風格的新介⾯
原風格
新風格
第1階段：快速優化
• 透過對產品功能的了解，將介⾯快速調整，讓介⾯清晰
outline
第1階段：快速優化
• 透過對產品功能的了解，將介⾯快速調整，讓介⾯清晰
增加「階段指⽰」
優化介⾯樣式
outline
第2階段：新增「不影響」其他架構的新功能
outline
第3階段-新增「退貨、退款流程」
• ⼿繪探索流程 • 與⼯程師們⼀起討論流程
最後，共同完成符合操作與⼯程的流程
outline
驗證介⾯效果，將介⾯印出，逐⼀調整
Mobile 版本內容 重新規劃流程與操作 風格延續Web 探索⼿機應⽤的情境 ⽤⼾訪談
⽤⼾訪談， 了解⽤⼾需求情境、調整介⾯與功能表
• 情境： • 快速入庫、採購、出貨紀錄 • 簡單的資訊，利⽤⼿機版本輸入 • 更複雜資訊，才比較會利⽤電腦版 • 會想看⽬前進銷存狀態 • 編制Functional Map、⼼智圖
Wireframe
測試原型流程效果
outline
UIUX Design 設計案例
outline
UIUX設計案例-1
1. 桌上型App ① 策略達⼈-拓思資訊 ② 多空聽診器-期權醫⽣ 2. ⼿機App ③ 基⾦Ａ寶-Cmoney
3. 後台設計 ① OPHI-依納爵科技 4. 網⾴設計 ② MINIcool-依納爵科技 ③ 和泰地產-宇眾代書
修改-後
策略達⼈-拓思資訊
受託規劃產品介⾯與風格
修改-前
修改-後
修改-前 修改-後
修改-前
選擇權策略軟體
受託規劃
基⾦機器⼈A寶-Cmoney
基⾦機器⼈A寶-Cmoney
OPHI-依納爵科技
進銷存系統
MINIcool依納爵科技
進銷存產品官⽅網站 依納爵科技
和泰地產
宇眾代書
想了解更多， 歡迎聯絡我 廖淑君 catdoll1111@gmail.com 其他UI Design