Writing

元の氣 Bread

Design,WeChat,Mini Program,Food · 2026-04-26

專案概述

01 | 基於小程序設計

這是一個基於小程序進行設計的工作。

02 | 行業

這是一個餐飲行業的專案。計劃面向群體主要是年輕人、和踏入社會的人員。類似於奶茶店的狀態。

03 | 負責角色

在這個專案中,我負責 UI UX 的設計流程和產出。期間,依照平常專案的操作,每次設計版本修改都會交付一個 PDF。

04 | 高速遞送

由於甲方短時間的要求,本次專案遞送了Brief、1a、1b、1c 4 次遞送。

總計時間消耗大約 2 周時間。


A | 提案

A1 | 視覺提案

Image from the original Notion note

採用基於 DANDELION 明亮的黃色進行視覺風格引導。

會員卡採用了常見的條形碼進行處理,以適配傳統設備。

A2 | 圖標設計

MBE Style →
代表了可愛、有趣

MBE 風格的特點:

  • 特粗的深色描线
  • 圆滑的线条
  • 鲜明的颜色配色
  • 没有渐变颜色
Image from the original Notion note

A3 | Banner 設計

Image from the original Notion note

Banner 基於可高速閱讀的原則進行設計。

同時以可愛、有趣作為輔助設計要求。

A4 | Fonts 字型使用

Image from the original Notion note

本次專案採用免費商用字體「阿里巴巴普惠體」,作為搭配的設計字體。

明亮、粗邊緣的風格與 MBE Style 風格相搭配。以符合品牌追求的年輕化的感覺。

A5 | UI 結構

Image from the original Notion note
Image from the original Notion note

Banner 模塊可往左滑動,以查看更多。

門店列表亦可以展示附近最近的門店,以距離排序。

主界面手指往下滑動即可打開「積分」界面

會員卡形式使用條形碼展示。可適配傳統條形碼槍,而不需要新設備。


B | 設計結果

經過提案以及 3 次設計修改。我作為設計師終於完成了設計。

Image from the original Notion note

B2 | 尊重微信以及使用微信 API 的設計

Bottom Half Dialog
Bottom Half Dialog
微信 API 申請手機號權限
微信 API 申請手機號權限
Image from the original Notion note

B3 | 使用 WEUI 補充設計

Image from the original Notion note

B4 | 圖標和插畫

Image from the original Notion note
Image from the original Notion note

B5 | 色彩系統

Image from the original Notion note
Image from the original Notion note

在微信、品牌化之間的平衡