使用者研究 / 介面設計 / 網頁設計
軟體 ::
Figma
AdobeXD
Photoshop
Xmind
團隊 ::UI/UX、數名網頁工程師
擔任角色 :: UI，UX
負責 ::使用者研究、與工程師討論資料庫內容(API)、介面設計、易用性測試。
期間 ::3month
專案背景
問題點
- 企業識別色辨識度不佳
- 關鍵產品搜尋不易
- 產品分類結構複雜且路線不明確
目標
- 一個企業識別鮮明的容器，兼具品牌與產品路徑搜尋最佳化的b2b網站
使用者研究
人物誌
依照品元需求，定義出以下功能
- RWD瀏覽
- 可搜尋食譜(關鍵字+縮圖)
- 可用圖文列表模式來瀏覽
- 股東會及股價資訊能串接API
情緒版
風格調性 I：理性/企業感/條理分明
元素：重點清楚標題字/邏輯化圖示/專業感影像素材
風格調性 II：專業/冷靜/科學化 元素：研究影片圖片/調配過程/數據表格
風格調性
III：美味/簡潔/重點清楚
元素：背景乾淨，時髦高級的成品情境照
- 視覺以功能性及介面友善為出發點做扁平化設計，以「長方形圖片」左下及右上做圓角設計與「LOGO」
、「
整體感」、「
品元、品圓 」
呼應。
- 圖片選擇為具「專業感」影像
Functional
- 我們規劃了六個主線區塊，以產品資訊為重點，瀏覽商品的同時也加入了滿足客戶高需求的"解決方案"與"食譜"為重要動線，之後依序才為最新消息及聯絡我們於瀏覽器下方等相關連結。
wireframe
- 計算圖片寬高在響應式的比例呈現，在css@media做設定，並以框架及數字比例與前端工程師溝通。
- 視覺呈現於不同瀏覽器，須調整圖像寬高占比來展現品牌的獨特性與多面性。文字在web/mobile/app之間排版順序與大小設定也須隨圖片做調整。
- 閱讀舒適度提升與的友善介面提升user的黏著度。
高保真原型對比
易用性測試
心得
與許多工程師的討論、溝通過程中，清楚了解官網的串接需要很多前端技術的相關知識，
技術面需要串接多少API ? 能修改優化的程度 ? 所需工作時程規劃?
客戶需求 = UX > UI = 程式 (可行性)> 視覺呈現
視覺設計合理化與可行性，需要與工程師密切討論與互相理解，
以「核心-客戶需求為」+「 專業」 與「 經驗」 使客戶理解視覺展現與理念與
即時股票、食譜類別、關鍵字搜尋、邏輯應用
System Colors
