案例背景

飲茶先堅持打造品牌，不僅僅是一杯茶飲料，代表著一種新式的茶文化。結(jié)合現(xiàn)代年輕消費者嘗鮮的心理，要不斷推新迭代，為樹立品牌打下堅實的基礎(chǔ)。我們要從線上線下的視覺體驗上作出統(tǒng)一的設(shè)計。

主要的視覺顏色是白和莫蘭迪色系，整體是一種極簡主義的裝修風(fēng)格。顯示出品牌的格調(diào)之余，還給消費者一種清爽安靜的感覺

產(chǎn)品目標(biāo)

用戶

方便喜歡嘗試新鮮事物的年輕消費者，擁有更好的飲茶體驗。

產(chǎn)品

幫助提升產(chǎn)品形象，提升用戶情感化體驗，吸引更多消費群體。

用戶畫像

ERIC

23歲1北漂1公司小白

需求

1.不喜歡排隊，目的性比較強

2.2.喜歡嘗試新鮮事物

Jenny

28歲1滬漂1互聯(lián)網(wǎng)技術(shù)

需求

1.奶茶重度愛好者，顏值控

2.享受生活，喜歡探索APP產(chǎn)品

設(shè)計風(fēng)格

通過APP本身的行業(yè)屬性，產(chǎn)品定位，目標(biāo)用戶來確定風(fēng)格，讓產(chǎn)品更加簡潔高效，節(jié)約學(xué)習(xí)成本，圍繞:年輕，高效，簡這三個關(guān)鍵詞進(jìn)行設(shè)計。

高效：清晰化信息層級，針對不同的使用使用習(xí)慣和需需求，呈現(xiàn)出用戶關(guān)注的信息。

年輕：緊跟設(shè)計趨勢，卡片、圓角、留白、圖標(biāo)表現(xiàn)形式等，以及一些細(xì)節(jié)在視覺上給人一種簡潔，方便的感受。

簡潔：秉持界面“簡約而不簡單”的設(shè)計理念，盡量減少用戶的學(xué)習(xí)成本，方便快捷的達(dá)到操作目的。

字體規(guī)范

字體：字體選擇干凈利落、圓潤、中性化的字體。拉開字號層級，給人以大氣中不失細(xì)節(jié)的感受。

中文/蘋方

數(shù)字/ DINAlternate

提示/大標(biāo)題字號26px 16px

正文/小標(biāo)題字號14px

標(biāo)注/注釋字號12px

顏色：選擇莫蘭迪青為主色，傳達(dá)清澈、專業(yè)的色彩情緒，搭配粉橙色為輔助色，為界面增添活力，符合本產(chǎn)品年輕，高效，簡潔的調(diào)性。

組件

把相應(yīng)的控件創(chuàng)建成組件，方便更新迭代，團隊協(xié)同設(shè)計保持統(tǒng)一性。同時提高設(shè)計元素的復(fù)用效率，降低開發(fā)成本。

首頁

Banner：使用平鋪形式展現(xiàn)在頁面頭部，大面積色塊展示，迅速抓住用戶的眼球，井讓其獲取主要信息。

功能瓷片區(qū)：以大圓角卡片形式放在頁面的C位，不僅有足夠的區(qū)域展示信息，用戶又易操作。本產(chǎn)品的主要功能是外賣、自取、暢分享。

膠囊Banner：小區(qū)域，大內(nèi)容。更新店鋪產(chǎn)品活動信息，減少頁面使用空間，信息展示明顯。

個人信息：卡片以大圓角形式展現(xiàn)，視讓界面更有透氣感，增強親和力;重要數(shù)字加大，讓用戶一目了然。

福利中心：最新的活動、福利內(nèi)容會更新在這個模塊，吸引更多的用戶參與。

好友訂單

邀請好友詳情頁、會員頁界面，大面積用粉橙色，使界面充滿了活力，充滿了活動的氛圍感;與主色形成冷暖對t度飽和度，對比色使用起來也不是那么跳脫扎眼，正體現(xiàn)了本APP產(chǎn)品的年輕、簡潔、高效的屬性。

商品詳情

把圖片處理成獨立異形的形式，界面活力。吸引用戶注意力，增添超值加購加購內(nèi)容在精致的卡片內(nèi)，破形排列，為了更突出加購產(chǎn)品，鎖定用戶目光。