UI/UX 設計-黃O-Shopping Platform

• 此作品使用於：購物平台 / 作品集

專案動機

在這資訊科技化的時代，每家公司都需設計出簡易的使用者操作流程，進而提升客戶留存率。

同時也是根據目前UI/UX職缺的工作內容的幾個必要條件來做為此次專案主題。

專案介紹

• 使用者流程設計 - User Logic Flow

使用直覺好操作、不受限於電腦系統、打開瀏覽器就可即時線上設計、會自動存擋的Figma進行專案設計。

使用xmind製作出app與web的完整流程規劃，其中重點分出了登入註冊與商品購買的邏輯操作。

在這資訊科技化的時代，每家公司都需設計出簡易的使用者操作流程，進而提升客戶留存率。

同時也是根據目前UI/UX職缺工作內容的幾個必要條件來做為此次專案主題。

• Figma Variants - 變體 / 輸入錯誤

一個元件裡面有不同的狀態，就可以設為不同的變體。利用這個方式，可以大量減少元件的數量，利用變體去替換。

當資訊輸入錯誤時，當前的文字框會呈現紅色，同時也會跳出紅色的提示文字，讓客戶能立即察覺。

• Figma Prototype - 原型設計

可以重複利用設計中的現有部分，從而節省了其他重複而繁瑣的工作。

使用不同的Plugin可以在工作中有效地增加工作效率、或是讓設計看起來更加真實。

• 版面設計 - 版面配置 / 商品卡片

畫面整體置中，商品卡片文字與大部分文本內容靠左，增強可讀性與易讀性。

• 使用者優化 - Prototype 視覺原型 / 互動效果

互動包括了互動、動作、動畫

專案web部分多處使用了滑鼠想按但又還沒按下去，懸浮停在物件上方的那種情況，以及滑鼠點擊切換後的效果。

只要Frame內容超出框架的範圍，Figma就會自動幫你設定成可以滾動。

• Landing Page 商品介紹頁

使用PS設計，依據每個商品本身的特性設計不同風格的商品介紹頁，分別有低調華麗風、多彩電競風、低彩度活潑風、簡約風格。每頁都添加不同的元素和使用不同的影像處理方式呈現。

• 會員帳戶設計

• Vis + Logo Mockup

為這次專案的logo 設計的vis 視覺識別手冊設計。

專案心得&教學回饋

專案選擇Web 和App 兩種一起做，花了2個月左右。我也從中具備了規劃流程與設計思考的能力。

而且從一開始上課到製作專案，都是採取完全線上模式，在這個疫情時代真的是非常方便，假如有認識的人想了解達內有教學的相關課程的話，我一定超級推薦達內。

最後還包含了履歷健檢與模擬面試，這真的對將要找工作的學員很有幫助。

非常感謝負責專案的Meloeo 老師、崔崔和小幫手的幫助，才能讓我完成這次的專案製作。

也很感謝去年的我勇敢地做出了選擇。