響應式設計
網頁設計
重新設計
鏈新聞 ─ 金融科技資訊新聞網
專案期間
1 週半 (2022.12)
開發方式
敏捷開發
服務公司
冠釩科技
擔任角色
UI/UX 設計師
負責任務
UI 設計、流程討論、響應式設計、原型製作、設計標註與交付
使用工具
Figma、Slack
專案簡介
Background
鏈新聞是一個專注在金融科技領域的新聞網，品牌原先使用 Wordpress 建置網站，但 Wordpress 沒辦法彈性添加功能，也無法自由的設計介面，需要依賴大量的付費模板跟插件才能勉強達到品牌的需求。
這次專案透過重新設計介面，並加入會員系統、收藏文章、按讚留言等新功能，除了提升使用者的可互動性，也希望打造更直覺好用的網站。
專案目標
Goal
設計時不做太複雜的版面更動，一方面是因為開發時程較緊湊，讓前端夥伴不必花太多時間重刻畫面；另一方面則是降低使用者重新適應的學習成本，避免帶給他們太多挫折感。
角色與產出
Teamwork
我與產品經理 & 四位工程師彼此合作完成這個專案。和產品經理討論 UX 流程後，我透過建置設計系統產出 UI 設計，並藉由原型製作、設計標註呈現產品細節，最終將視覺設計成果交付給工程師。
優化重點介紹
Design Deliverables
首頁
文章詳情頁
搜尋功能
響應式設計
根據 1920,1366,1024,768,428,414,360 七個斷點調整設計，以確保有良好的跨裝置瀏覽體驗。
設計規範
Design Guideline
學習與反思
Takeaways
多多設想資料的呈現與限制，加速溝通和開發效率
和工程夥伴合作時，常常會被問到關於資料呈現的問題，像是：文章底下有多則留言時，收折的狀態下最多會呈現幾則留言？卡片裡的置中圖片會怎麼放置，是把 Size 設成 Cover，再微調 Position 嗎？過程中學到了很多開發角度的思考方式，也提醒自己以後在畫元件時，多考慮資料如何呈現，以及要賦予它們什麼限制，盡可能的加速後續開發效率。