元の氣 Bread

01 | 基於小程序設計

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

02 | 行業

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

03 | 負責角色

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

04 | 高速遞送

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

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

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

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

MBE Style →
代表了可愛、有趣

MBE 風格的特點：

• 特粗的深色描线
• 圆滑的线条
• 鲜明的颜色配色
• 没有渐变颜色

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

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

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

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

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

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

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

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

購物車 →
Bottom Half Diglog 形式

上文提及過，這是參考了中國大陸的外賣、購物 App 進行提出的交互邏輯。所以購物車採用了 Bottom Half Diglog 的形式出現。

綜合考慮微信小程序能走多遠 →
手機號透過微信 API 獲得

結合我個人的開發經驗並且查詢微信開發文檔。所以能透過 API 獲得的形式，用戶無需再次手工填寫。

API 能提供 →

• 手機號
• 收貨地址
• 用戶暱稱

特殊提醒 →
走馬燈形式的提示文字

如果用戶購買了一些特殊商品，會在頂部採用「跑馬燈」的文字形式出現提示。

跑馬燈的動態效果，十分具備吸引眼球的能力。

符合原生設計 →
盡可能使用微信提供的組件

本專案採用到的微信組件有：

• Half Diglog
• Alert
• 微信支付

微信小程序设计指南 | 微信开放文档

本專案設計時候採用尊重原生組件的前提下，建立品牌形象風格。

大量的 WEUI 組件

為了最大化減少開發、設計的成本。以及設計可重用問題。此專案在會員相關資料上使用了大量的 WEUI 組件來完成常見的設計內容。

WeUI

色彩系統的構建，除了 VI 的黃色之外。代表金融、結算的橙色之外。還考慮上微信品牌形象的綠色。

然後根據使用場景來決定，哪一種顏色作為主色彩。

耗時 →
兩周

遞送次數 →
4 次

開發成本 →
較低、可重用組件較多

客戶滿意度 →
滿意

提案耗時

一周

修改耗時

每次 2 ~ 3 天

客戶反饋

本次專案以一個高速的形式遞進推行。共耗時兩周。在第一週的提案提供後，客戶反饋了一些需求。

• 沒有歷史設備
• 新店
• 採用二維碼形式讀取會員卡信息

這些信息有效地改進了往後的設計需求。

與開發者協作

專案採用一直都使用 Zeplin 的形式與開發者進行協作，然而沒有採用中國大陸常見的藍湖進行。

Zeplin 較藍湖的優勢 →

• 支持 Sketch Anima 工具的導出
• 由於客戶端程序，可接管直接輸出切圖而無需下載。
• 可使用多種插件，生成多種代碼