Yang.
UX UI 作品
YYsports App
口罩即時查
這個未來我挺寵
PetTalk:說寵物 App
捐血犬貓媒合資訊平台
平面作品
關於我
與我聯繫
UX UI 作品
YYsports App
口罩即時查
這個未來我挺寵
PetTalk:說寵物 App
捐血犬貓媒合資訊平台
平面作品
關於我
與我聯繫
Search by typing & pressing enter
YOUR CART
疫情帶動的由民間到政府資訊活動
這是一個由前端社群發起的專案,2020 年 2 月當時正是疫情爆發的初期,因應民眾「找尋口罩購買地點」的需求,許多 IT 人員,開始運用自身的專業,投入開發「口罩地圖」。
在瞭解完政府開源數據及欄位內容後,立即以 Wireframe 快速草擬界面,並且將設計稿發布在「前端精神時光屋」。考量到使用者為大眾,以及前端實作的時程 ( 疫情急迫性必須搶時間 ),決定以簡潔的風格及易讀性為設計原則。
色彩計畫
採用穩重的深藍作為主要顏色,運用於 CTA 按鈕及主文案。以及三種輔助色,運用於呈現數量的變化,讓使用者能增加判斷效率。
並且在元件製作過程中,確保色彩透過檢測符合
WCAG 易用性標準。
介面規劃
先以框線稿來安排需要呈現的資訊,確保操作流程,不同於其他地圖的操作,規劃的想法是手機版直接以列表顯示每間藥局庫存數量,節省拖拉整張地圖的時間,在電腦版才會呈現地圖。因為當時口罩的購買規則還有依據「身分證尾數」,讓民眾分流購買,所以將此決策點提升到首頁最醒目的位置,並且點擊說明 icon,使用視窗呈現購買規則的政令宣導圖。
UI 元件設計
以原子元件的概念,由小單位拼裝為大單位,下圖以藥局資訊卡片為例,可看出診所資訊卡片結皆由:成人口罩數量、兒童口罩數量,藥局資訊三大塊組成,依據數量定義色彩,再進行大元件的組裝。
以設計實踐為社會貢獻一己之力
所有的 UI、UX 利用工作之餘的時間,約 6 小時設計完成,這大概是年度最熱血的專案之一,後來執行前端的工程師寫信給我,告訴我這個網站被收錄在政府的「口罩供需資訊平台」頁面第 3 項 ( 目前提升至第 2 項 ),對我們來說是非常大的肯定,也從「前端精神時光屋」看出,設計確實是獲得很高的落地執行機率 ( 17 人喜歡、8 人採用 ),這是我一直以來做設計的初衷--
讓設計不只是美觀,應該能被落地執行,並且對使用者友善。
* 特別感謝前端 Wenyo /
[email protected]
↑點擊圖片可查看 Adobe Xd 線上 prototype 檔
相關連結
前端精神時光屋
— UI 設計投稿
口罩供需資訊平台
Color.review
—色彩易讀性檢測
Adobe Xd Prototype
更多 UX UI 專案作品
台北寵物節活動網站
YYsports App
PetTalk:說寵物 App
回首頁