響應式設計

網頁設計

重新設計

鏈新聞 ─ 金融科技資訊新聞網

專案期間

持續開發中

開發方式

敏捷開發

服務公司

冠釩科技

擔任角色

UI/UX 設計師

負責任務

UI 設計、流程討論、響應式設計、原型製作、設計標註與交付

使用工具

Figma、Jira、Slack

專案簡介

Background

鏈新聞是一個專注在金融科技領域的新聞網,品牌原先使用 Wordpress 建置網站,但 Wordpress 沒辦法彈性添加功能,也無法自由的設計介面,需要依賴大量的付費模板跟插件才能勉強達到品牌的需求。

這次專案透過重新設計介面,並加入會員系統、收藏文章、按讚留言等新功能,除了提升使用者的可互動性,也希望打造更直覺好用的網站。

專案目標

Goal

設計時不做太複雜的版面更動,一方面是因為開發時程較緊湊,讓前端夥伴不必花太多時間重刻畫面;另一方面則是降低使用者重新適應的學習成本,避免帶給他們太多挫折感。

角色與產出

Teamwork

我與產品經理 & 四位工程師彼此合作完成這個專案。和產品經理討論 UX 流程後,我透過建置設計系統產出 UI 設計,並藉由原型製作、設計標註呈現產品細節,最終將視覺設計成果交付給工程師。

優化重點介紹

Design Deliverables

學習與反思

Takeaways

多多設想資料的呈現與限制,加速溝通和開發效率

和工程夥伴合作時,常常會被問到關於資料呈現的問題,像是:文章底下有多則留言時,收折的狀態下最多會呈現幾則留言?卡片裡的置中圖片會怎麼放置,是把 Size 設成 Cover,再微調 Position 嗎?過程中學到了很多開發角度的思考方式,也提醒自己以後在畫元件時,多考慮資料如何呈現,以及要賦予它們什麼限制,盡可能的加速後續開發效率。

回頂端