設(shè)計(jì)手冊(cè)

移動(dòng)應(yīng)用交互界面的設(shè)計(jì)與制作

19004220114 徐榕

清 友

一片樹葉成為了茶

清 友

一款茶葉類app

清 友

The Classic of Tea

The Classic of Tea

設(shè)計(jì)手冊(cè)

移動(dòng)應(yīng)用交互界面的設(shè)計(jì)與制作

19004220114 徐榕

清 友

一片樹葉成為了茶

清 友

一款茶葉類app

個(gè) 人 簡 介

姓名：徐榕

年齡：22

星座：巨蟹座

學(xué)校：大連東軟信息學(xué)院

專業(yè)：數(shù)字媒體藝術(shù)系

政治面貌：中共預(yù)備黨員

電話：13109800684

郵箱：2523352679@qq.com

目 錄

01 壹 · APP設(shè)計(jì)

02 貳 · 網(wǎng)頁設(shè)計(jì)

03 叁 · 海報(bào)設(shè)計(jì)

04 肆 · IP形象/周邊設(shè)計(jì)

APP 設(shè)計(jì)

APP

設(shè)計(jì)

網(wǎng)頁

設(shè)計(jì)

海報(bào)

設(shè)計(jì)

IP形象 /周邊

設(shè)計(jì)

清友

一片樹葉成了為茶

壹

產(chǎn)

品

概

述

用

戶

畫

像

競

品

分

析

功

能

框

架

用戶旅行圖

設(shè)

計(jì)

規(guī)

范

低保真原型 高保真原型

產(chǎn) 品 概 述

產(chǎn)品介紹

開發(fā)“清友”App在一定程度上能夠填補(bǔ)關(guān)于茶在軟

件市場(chǎng)的空缺，通過App互動(dòng)性來了解茶并且參與

種茶、采茶、制茶過程以及普及非物質(zhì)文化遺產(chǎn)

茶百戲，讓大家可以在茶上拉花進(jìn)行交互，重燃

絲綢之路的茶葉傳播盛景。 “清友”App內(nèi)互動(dòng)的方

式使熱愛茶的人更加深入的了解茶同時(shí)也能增加

當(dāng)代人對(duì)茶文化更多的解讀。進(jìn)步一部帶動(dòng)茶文

化的發(fā)展，對(duì)于傳統(tǒng)文化有一定的推動(dòng)作用。

01

產(chǎn) 品 概 述

產(chǎn)品背景

中國是茶葉的故鄉(xiāng)，茶在世界歷史的長河中也起到

了非常重要的推動(dòng)作用，在古往今來的絲綢之路上

見證了人類社會(huì)的變遷和歷史的長久發(fā)展

。隨著社

會(huì)的不斷變化與發(fā)展，人們生活水平逐漸的 提高越

來越多的人更加注重茶飲

。并且隨著科技的發(fā)展讓

人們能夠更加便攜的了解到種茶

、采茶

、制茶這三

方面，因此以手機(jī)為載體的一款茶類App在一定程

度上幫助人們?nèi)ゾ珳?zhǔn)了解這三方面，而且在當(dāng)前的

時(shí)代背景下中國文化

、中國國學(xué)

、中國茶必然會(huì)

受

到越來越多的人們的重視

。

02

用 戶 畫 像

03

資深愛茶人士

姓名：徐魏國

年齡：62

性別：男

職業(yè)：黨政機(jī)關(guān)退休居家老人

資深愛茶人士40余年

，并且會(huì)熟

練使用智能手機(jī)

，經(jīng)常上網(wǎng)進(jìn)行學(xué)

習(xí)并查閱相關(guān)知識(shí)

平時(shí)喜歡和一些老茶友在一起討論

，

分享種茶制茶采茶

，并且對(duì)這三方

面興趣濃厚

，想要更加深入了解

初級(jí)愛茶人士

姓名：王旭

年齡：26

性別：男

職業(yè)：博士生

喜歡喝茶

，并且對(duì)茶方面有著深入了解

的興趣

，想要了解不同種類茶的種植采

摘制作過程

由于是學(xué)生沒有過多時(shí)間進(jìn)行茶方向的

研究

，但下載過類似的軟件想要通過軟

件來更好了解

中級(jí)愛茶人士

姓名：李歐

年齡：42

性別：女

職業(yè)：企業(yè)經(jīng)理

愛好喝茶

，經(jīng)濟(jì)條件不錯(cuò)所以經(jīng)常

喜歡和朋友到茶室喝茶聊天

，同時(shí)

也喜歡自己煮茶

對(duì)于茶的種茶制茶采茶有著很厚的

興趣

，并且使用茶類app次數(shù)較多

競 品 分 析

04

競 品 分 析

05

功 能 框 架

06

用戶旅行圖

07

流程圖

08

進(jìn)入前有三個(gè)閃屏界面

和歡迎界面

，進(jìn)入后為

首頁體驗(yàn)界面而后為引

導(dǎo)登錄注冊(cè)

，首頁分為

以下層級(jí)

設(shè) 計(jì) 規(guī) 范

09

字體設(shè)計(jì)

中文字體：蘋方

蘋 方 粗 體

蘋 方 中 等

蘋方常規(guī)

蘋方細(xì)體

字號(hào)：32~20

設(shè) 計(jì) 規(guī) 范

10

顏色設(shè)計(jì)

主 題 顏色

R : 1 7 5

G : 1 3 0

B : 3 5

主 體 顏 色

R : 8 4

G : 130

B : 5 3

設(shè) 計(jì) 規(guī) 范

11

圖標(biāo)設(shè)計(jì)

輔色設(shè)計(jì)

設(shè) 計(jì) 規(guī) 范

12

logo設(shè)計(jì)

R ： 1 2 1

G ： 1 5 5

B ： 4 9

# 799 B 3 1

R ： 5 0

G ： 5 1

B ： 5 1

# 3 2 3 3 3 3

低保真原型

13

低保真原型

14

低保真原型

15

高保真原型

16

方案一

高保真原型

17

方案一

高保真原型

18

方案一

高保真原型

19

方案一

高保真原型

20

方案二

高保真原型

21

方案二

高保真原型

22

方案二

網(wǎng)

頁

設(shè)

計(jì)

APP

設(shè)計(jì)

網(wǎng)頁

設(shè)計(jì)

海報(bào)

設(shè)計(jì)

IP形象 /周邊

設(shè)計(jì)

清友

一片樹葉成了為茶

貳

網(wǎng)

頁

簡

介

網(wǎng)

頁

規(guī)

范

網(wǎng)

頁

展

示

網(wǎng) 頁 簡 介

23

本網(wǎng)頁采用中國茶的起源，以中國茶文化為主

題的網(wǎng)頁

。通過網(wǎng)頁展

示中國茶的特色

，中國

茶的制造

，以及喝茶對(duì)

于人體功效的了解

。

同

時(shí)增添絲綢之路以及茶

馬古道

，更具備文化傳

播的趣味性進(jìn)而對(duì)本產(chǎn)

品感興趣

。

網(wǎng) 頁 簡 介

24

網(wǎng)頁首頁進(jìn)入

首先為可翻頁

的茶經(jīng)交互

網(wǎng) 頁 規(guī) 范

25

主 題 顏色

R : 1 4 2

G : 1 2 8

B : 6 6

主 體 顏 色

R : 254

G : 238

B : 182

網(wǎng) 頁 展 示

26

網(wǎng) 頁 展 示

27

網(wǎng) 頁 展 示

28

海

報(bào)

設(shè)

計(jì)

APP

設(shè)計(jì)

網(wǎng)頁

設(shè)計(jì)

海報(bào)

設(shè)計(jì)

IP形象 /周邊

設(shè)計(jì)

清友

一片樹葉成了為茶

叁

海

報(bào)

簡

介

海

報(bào)

展

示

海 報(bào) 簡 介

29

海報(bào)底層為茶馬古道的插

畫圖片

。仙芽：凡常之茶

，

而名之為仙芽

，盛贊之意

，

無需多說

。海扇占春信

，

仙芽問武夷

?！?/p>

懷琛

《春日寄家兄閩中

》

海 報(bào) 簡 介

30

海報(bào)底層為茶馬古道的插

畫圖片。清友：竹里品茶，

陶醉大自然。竹里延清友，

迎風(fēng)坐夕陽?！埔ε_(tái)

海 報(bào) 簡 介

31

好茶常生于山間云霧彌漫

之處

，故美稱之為云華

。

深夜數(shù)甌唯柏葉

，清晨一

器是云華

?！破と招?/p>

《寒日書齋即事

》

海 報(bào) 展 示

32

方案一

海 報(bào) 展 示

33

方案二

IP形象

/周邊設(shè)計(jì)

APP

設(shè)計(jì)

網(wǎng)頁

設(shè)計(jì)

海報(bào)

設(shè)計(jì)

IP形象 /周邊

設(shè)計(jì)

清友

一片樹葉成了為茶

肆

I P 形 象 簡 介

I P 形 象 展 示

I P 場(chǎng) 景 展 示

主 題 周 邊 簡 介

主 題 周 邊 展 示

IP形象簡介

34

IP形象主要以擬人的方式設(shè)計(jì)

，

設(shè)計(jì)成茶寶寶的形態(tài)

。本款茶寵名

字為：茶茶

。身體主體顏色采用裸

色

，重要標(biāo)識(shí)采用茶葉的綠色

，

其

他裝飾品采用鮮艷的顏色進(jìn)行點(diǎn)綴

。

IP形象充分突出

“清友

”APP的特

點(diǎn)

，以茶葉為主

，在喝茶的過程中

可以用茶水來對(duì)身體部位進(jìn)行澆灌

。

IP形象展示

35

IP形象展示

36

IP場(chǎng)景展示

37

IP場(chǎng)景展示

38

IP場(chǎng)景展示

39

表情包展示

40