PChome 24h 購物 APP

介紹: PChome 24h購物 APP 做為 PChome 24h 購物網站延伸，是一款專為行動裝置族群量身打造的電商產品。

該 APP 提供 200 萬種以上的商品，並主打商品下單後 24 小時快速到貨。週末假日依舊能出貨，並提供限定活動優惠，吸引年輕客群使用。

我的角色

我的職責是監督設計系統一致性的邏輯外，也包含前端開發功能的版面構成。領導 APP 設計組成員將 Sketch UI 製成可供工程團隊套版的 React Native 版型，並將設計元素同步更新於 Figma，以利後期開發整合系統化的設計元件。

除了整理產品色票系統、圖形尺寸制定外，還需與工程單位事前討論出合適雙方在Git上協作開發的檔案結構。( 2021年後，團隊設計開發主要以 Figma 平台為主。)

產品目標

期間: 2018 ~ 2022
團隊成員: 由設計師、開發人員和產品經理組成的團隊
工具: Sketch, Figma, Miro, Git , React Native(Layout), Redmine, Asana, Photoshop, Illustrator

色彩系統

PChome 24h 購物 APP 提供使用者 24h 即時、快速的印象，主色調以深紅色為主，為了不使紅色太過搶眼，刷淡了彩度，並搭配 PChome 企業識別標誌的深藍與淺藍。整體基調為暖色調的色彩應用。

資訊架構

資訊架構早期以 Excel 整理共用英文命名與對應檔案中文意義，後期改用 Miro 整理龐大的樹狀架構表。

整理文件的用意是便於後續工程套版對照，以及新人教育訓練時了解該專案架構。

此圖僅列出一部分 React Native 組件資訊架構供參考。

版面線框稿與切版示意

左圖為設計定稿後的線框圖，切版時以該設計稿進行100%的 React Native 結構化。

中 / 右圖為疊代新功能時，團隊提案的線框與精稿示意圖。

01_首頁 - Mobile vs. APP 畫面暨功能對照

左圖為 Mobile 首頁。中 / 右圖為 APP 首頁。

考慮使用者操作流程與購物慣性，沿用 Mobile 畫面元素做為依據。經數次版本疊代更新後，逐漸和手機版的設計有了差異。

主要差異為：Icon圖標再設計，物件扁平化，頁面配色降低彩度，與去除過多文字的干擾性。

02_分類頁 - Mobile vs. APP 畫面暨功能對照

APP 左上漢堡選單(Nav)與 Mobile 的選單功能定義有所區別，為其他集團網站鏈結的輔助功能；加之考慮分類頁使用頻率，在第一版APP規劃便更改為全屏畫面呈現的設計。

此處的Icon也由設計組成員依照APP制定色彩重新繪製，給予更大的點擊範圍，同時，點擊後展開的子分類群組也給予更大的空間，方便使用者點擊。

03_搜尋結果頁 - Mobile vs. APP 畫面暨功能對照

在Mobile 以 pop 呈現的篩選條件，考慮到APP 使用者的易用性與功能擴展性，改為全屏畫面。

2021年PChome 24h 購物 APP 改版主軸為搜尋功能。該目標分二次階段：

04_商品頁 - Mobile vs. APP 畫面暨功能對照

APP 商品頁與 Mobile 的區別為購物車功能列固定駐列於下，取代全站導覽列 Navigation 之位置。

為了改善頁面過長的拖曳負擔，將頁面拆為上下部分，以 Tab 選單快速切換。

PChome 24h購物 APP 做為 PChome 24h 購物網站延伸，是一款專為行動裝置族群量身打造的電商產品。