s_icon

shun yi

whoscooker
whoscooker

pen 製作項目

功能架構規劃

操作流程審核

繪製Wireframe線框稿

製作Mockup視覺稿

Prototype原型操作

tool 工具/程式語言

photoshop
sketch
axure

01

背景介紹

Background

在現代快節奏的生活中,越來越多的人選擇外送美食作為解決日常用餐的方式。為滿足這一需求,我們創立了Whoscooker美食外送平台。我們致力於為用戶提供方便、快捷、多樣化的美食選擇,同時幫助餐廳和食品供應商擴大其業務規模。 我們以用戶滿意為首要目標,不斷提升平台的用戶體驗,確保每一位用戶都能享受到優質的服務。

02

流程規劃

Process

Functional Map(前台)

用戶介面功能

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

搜尋餐廳 : 提供搜索引擎以搜尋附近或特定位置的餐廳。

篩選和排序 : 允許用戶根據不同標準(如價格、菜系、評分等)對搜索結果進行篩選和排序。

訂單管理 : 用戶可以查看訂單歷史、追蹤現有訂單、重新訂購之前的訂單等。

評價和評論 : 用戶可以對他們的訂單進行評價和評論,也可以查看其他用戶的評價和評論。

Ui Flow

用戶註冊/登入流程

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

主頁面流程

  • 主頁面顯示附近的餐廳列表,用戶可以瀏覽並選擇感興趣的餐廳。
  • 用戶可以使用搜索功能來尋找特定餐廳或類型的食物。
  • 點擊餐廳後,用戶可以查看餐廳的詳細信息,包括菜單、評分、評論等。
  • 用戶可以從菜單中選擇食物,加入購物車。

訂單流程

  • 用戶點擊購物車圖標進入購物車頁面,檢查訂單並選擇配送地址。
  • 用戶選擇配送方式和付款方式,然後確認訂單。
  • 一旦訂單確認,用戶可以收到訂單確認信息,包括預計送達時間。

訂單跟蹤流程

    • 用戶可以在主頁面或訂單歷史中查看他們的現有訂單。
    • 點擊訂單後,用戶可以查看訂單詳情,包括訂單狀態和預計送達時間。
    • 一旦訂單配送開始,用戶可以實時追蹤配送員的位置。

Wireframe

Wireframe專注於頁面結構、版面配置和功能位置,幫助設計師和團隊成員確定網頁或應用程序的整體框架,而不會被視覺風格或細節分心。

03

視覺設計

Design

色彩與ICON

color

暖色調為主,利用黑、白、灰點綴,襯托出橘色為主題色。

w_icon

主功能按鈕,以簡約的線條ICON製作,被點擊後則用實心的橘色做呈現,使操作時更好辨識。

首頁與APP ICON設計

front_page
whoscooker_icon

設計理念


以Whoscooker的W作為整體主視覺,

以達到一目了然的效果。

04

APP 設計

APP Design

開始頁、登入頁、註冊頁、偏好選擇頁

首頁、搜尋頁

訂購頁、主頁

05

Protoype 交互設計

Protoype

protoype
View Interactive Prototype

Copyright ©2024 - shun Inc. All Rights Reserved.