s_icon

shun yi

wearer
wearer

pen 製作項目

功能架構規劃

操作流程審核

繪製Wireframe線框稿

製作Mockup視覺稿

Prototype原型操作

tool 工具/程式語言

photoshop
xd
figma

01

背景介紹

Background

我們的使命是建立一個開放、多元和具有啟發性的時尚社群,讓每個人都能夠在這裡找到屬於自己的時尚樂趣和表達空間。我們相信,時尚不僅僅是外在的裝扮,更是一種對生活態度和個人風格的表達, 我們希望通過這個平台,將時尚的樂趣和美好分享給每一位用戶。

02

流程規劃

Process

Functional Map(前台)

用戶介面功能

註冊/登入 : 允許用戶建立帳戶或使用現有帳戶登入。

查看精選穿搭排行榜 : 瀏覽其他用戶的穿搭、按照標籤或風格篩選穿搭、探索熱門和最新的穿搭

搜尋穿搭 : 瀏覽/點讚其他用戶的穿搭

追蹤介面 : 瀏覽/點讚其他用戶的穿搭

個人主頁 : 發佈穿搭照片、設置穿搭的風格標籤

Ui Flow

用戶註冊和登錄

  • 用戶打開應用程序,首先看到註冊和登入選項。
  • 若用戶尚未註冊,他們將被導向到註冊頁面,填寫必要信息並創建帳戶。
  • 如果用戶已經有帳戶,則可以選擇登入並輸入他們的登入信息。
  • 登入成功後,用戶進入主頁面。

穿搭排行榜頁面

  • 展示穿搭的排行榜,如最受歡迎、最新穿搭分類等。
  • 點擊穿搭進入詳情頁面,可點讚、追蹤、分享。

探索搜尋風格頁面

  • 按照不同風格標籤展示穿搭。
  • 點擊風格標籤進行篩選。

個人檔案頁面

  • 顯示用戶名稱、粉絲數、關注數等。
  • 展示用戶上傳的穿搭。
  • 展示收藏的用戶。
  • 展示粉絲列表和關注列表。

Wireframe

Wireframe專注於展示應用程序的功能和布局,而不涉及具體的設計風格和視覺效果,有助於團隊成員集中討論和確定應用程序的核心功能和使用者體驗

03

視覺設計

Design

色彩與ICON

color

粉色用於收藏的icon,APP主要以大量的實拍照為主,所以利用黑、白、灰營造出低調質感,不會搶過照片的風采。

w_icon

主功能按鈕,以簡約的線條ICON製作,被點擊後則用實心的灰色做呈現,低調質感風格。

首頁與APP ICON設計

front_page
wearer_icon.jpg_icon

設計理念


以衣架作為主視覺,而上方圖像運用問號?作為小巧思,下方再放入wearer的文字,讓人過目難忘。

04

APP 設計

APP Design

前導頁、開始頁、登入/註冊

排行榜、分類頁

搜尋頁、個人文章頁、博主個人頁

追蹤頁、個人主頁

上傳文章頁

05

Protoype 交互設計

Protoype

protoype
View Interactive Prototype

Copyright ©2024 - shun Inc. All Rights Reserved.