top of page
app示意圖 1@3x.png
UI Redesign

GorgeousWear

這是一款結合天氣預報與時尚的穿搭紀錄App

針對「想要學習穿搭,卻又不知該如何下手」、「常常不知道這樣的天氣該如何穿得恰當」的朋友,GorgeousWear可以協助您解決這樣的煩惱。

Role
UI/UX 設計師
Tools
Adobe XD
​設計流程
設計流程@3x.png
設計流程
產品發想
​產品發想

發現身邊有許多女性朋友,常常不知道該如何正確地穿搭。像是冬天早晚溫差大,卻總是忽略了天氣變化而少帶一件防風外套、在正式的場合穿了過於輕便的服飾、又或是想提升時尚度卻又不知該如何下手等等。

thinking – 1@3x.png

此時,若有結合天氣預報並給予穿搭指南的工具,便能減少出現不適宜穿搭的機率,並兼顧時尚。

因此決定設計一款App以解決這個問題。

競品調研
競品調研

在設計產品的細節之前,先做了初步的競品調研。

以下面兩款穿搭相關的App為主,觀察其介面、內容與功能。

競品調研@3x.png

經過調研後,確立了自身產品的方向:

將「天氣預報」與「穿搭交流」結合,並可透過「更衣室」進行服裝搭配。

產品發想1@3x.png
使用情境
使用情境
1@3x.png

1.

小美要和朋友出門。可是不太會打扮的她,不知道應該要穿什麼才好。

3@3x.png

3.

進入更衣室進行服裝搭配。

2@3x.png

​2.

於是打開了GorgeousWear App,

​希望從中獲得靈感。

4@3x.png

​4.

舒適與時尚兼具的穿搭,獲得了朋友的好評。

架構
​架構
架構@3x.png
線框圖
​線框圖
WIREFRAM 1.0@3x.png
顏色與元件
顏色與元件

​在配色方面,使用了橘色深藍色

希望透過橘色打造出明亮、充滿活力的氛圍,而深藍色則是透露出優雅與沉穩的氣質。

​此外,兩色強烈的對比運用,也使人產生鮮明及大膽的印象。

color & text@3x.png
icons@3x.png
Prototype
Prototype
頁面介紹@3x.png
頁面展示.png
原型連結@3x.png
總結
總結

​透過這一款練習製作的App,除了更加熟悉整體的設計流程以外,也增進自己軟體運用及元件設計的能力。

 

​在過程中,我所遇到的最大困難是設計更衣室的部分:「該如何清楚地展示衣服類別,讓使用者覺得比起翻真實衣櫃還要輕鬆 ?」而在嘗試了許多種方法後,終於設計出了現在的模樣。

 

與其他競品相比之下,我的產品可能有略顯不足的部分,像是可以標示品牌與品項的功能,並連至商場進行購物。但因為是自行發想與練習的作品,評估後覺得加入這項功能也許會太過複雜,比如說:在更衣室的配置與呈現、該連結至何種賣場等等,因此決定先不加入這項功能。而是將重點擺在天氣預報、更衣室、穿搭的建議與交流。

bottom of page