第1页
设计手册
移动应用交互界面的设计与制作
19004220114 徐榕
清 友
一片树叶成为了茶
清 友
一款茶叶类app
粉丝：{{bookData.followerCount}}
{{!bookData.isSubscribed?'关注':'取消关注'}}
文本内容
第2页
清 友
The Classic of Tea
第3页
The Classic of Tea
第4页
设计手册
移动应用交互界面的设计与制作
19004220114 徐榕
清 友
一片树叶成为了茶
清 友
一款茶叶类app
第5页
个 人 简 介
姓名：徐榕
年龄：22
星座：巨蟹座
学校：大连东软信息学院
专业：数字媒体艺术系
政治面貌：中共预备党员
电话：13109800684
邮箱：2523352679@qq.com
第6页
目 录
01 壹 · APP设计
02 贰 · 网页设计
03 叁 · 海报设计
04 肆 · IP形象/周边设计
第7页
APP 设计
APP
设计
网页
设计
海报
设计
IP形象 /周边
设计
清友
一片树叶成了为茶
壹
产
品
概
述
用
户
画
像
竞
品
分
析
功
能
框
架
用户旅行图
设
计
规
范
低保真原型 高保真原型
第8页
产 品 概 述
产品介绍
开发“清友”App在一定程度上能够填补关于茶在软
件市场的空缺，通过App互动性来了解茶并且参与
种茶、采茶、制茶过程以及普及非物质文化遗产
茶百戏，让大家可以在茶上拉花进行交互，重燃
丝绸之路的茶叶传播盛景。 “清友”App内互动的方
式使热爱茶的人更加深入的了解茶同时也能增加
当代人对茶文化更多的解读。进步一部带动茶文
化的发展，对于传统文化有一定的推动作用。
01
第9页
产 品 概 述
产品背景
中国是茶叶的故乡，茶在世界历史的长河中也起到
了非常重要的推动作用，在古往今来的丝绸之路上
见证了人类社会的变迁和历史的长久发展
。随着社
会的不断变化与发展，人们生活水平逐渐的 提高越
来越多的人更加注重茶饮
。并且随着科技的发展让
人们能够更加便携的了解到种茶
、采茶
、制茶这三
方面，因此以手机为载体的一款茶类App在一定程
度上帮助人们去精准了解这三方面，而且在当前的
时代背景下中国文化
、中国国学
、中国茶必然会
受
到越来越多的人们的重视
。
02
第10页
用 户 画 像
03
资深爱茶人士
姓名：徐魏国
年龄：62
性别：男
职业：党政机关退休居家老人
资深爱茶人士40余年
，并且会熟
练使用智能手机
，经常上网进行学
习并查阅相关知识
平时喜欢和一些老茶友在一起讨论
，
分享种茶制茶采茶
，并且对这三方
面兴趣浓厚
，想要更加深入了解
初级爱茶人士
姓名：王旭
年龄：26
性别：男
职业：博士生
喜欢喝茶
，并且对茶方面有着深入了解
的兴趣
，想要了解不同种类茶的种植采
摘制作过程
由于是学生没有过多时间进行茶方向的
研究
，但下载过类似的软件想要通过软
件来更好了解
中级爱茶人士
姓名：李欧
年龄：42
性别：女
职业：企业经理
爱好喝茶
，经济条件不错所以经常
喜欢和朋友到茶室喝茶聊天
，同时
也喜欢自己煮茶
对于茶的种茶制茶采茶有着很厚的
兴趣
，并且使用茶类app次数较多
第11页
竞 品 分 析
04
第12页
竞 品 分 析
05
第13页
功 能 框 架
06
第14页
用户旅行图
07
第15页
流程图
08
进入前有三个闪屏界面
和欢迎界面
，进入后为
首页体验界面而后为引
导登录注册
，首页分为
以下层级
第16页
设 计 规 范
09
字体设计
中文字体：苹方
苹 方 粗 体
苹 方 中 等
苹方常规
苹方细体
字号：32~20
第17页
设 计 规 范
10
颜色设计
主 题 颜色
R : 1 7 5
G : 1 3 0
B : 3 5
主 体 颜 色
R : 8 4
G : 130
B : 5 3
第18页
设 计 规 范
11
图标设计
辅色设计
第19页
设 计 规 范
12
logo设计
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
第20页
低保真原型
13
第21页
低保真原型
14
第22页
低保真原型
15
第23页
高保真原型
16
方案一
第24页
高保真原型
17
方案一
第25页
高保真原型
18
方案一
第26页
高保真原型
19
方案一
第27页
高保真原型
20
方案二
第28页
高保真原型
21
方案二
第29页
高保真原型
22
方案二
第30页
网
页
设
计
APP
设计
网页
设计
海报
设计
IP形象 /周边
设计
清友
一片树叶成了为茶
贰
网
页
简
介
网
页
规
范
网
页
展
示
第31页
网 页 简 介
23
本网页采用中国茶的起源，以中国茶文化为主
题的网页
。通过网页展
示中国茶的特色
，中国
茶的制造
，以及喝茶对
于人体功效的了解
。
同
时增添丝绸之路以及茶
马古道
，更具备文化传
播的趣味性进而对本产
品感兴趣
。
第32页
网 页 简 介
24
网页首页进入
首先为可翻页
的茶经交互
第33页
网 页 规 范
25
主 题 颜色
R : 1 4 2
G : 1 2 8
B : 6 6
主 体 颜 色
R : 254
G : 238
B : 182
第34页
网 页 展 示
26
第35页
网 页 展 示
27
第36页
网 页 展 示
28
第37页
海
报
设
计
APP
设计
网页
设计
海报
设计
IP形象 /周边
设计
清友
一片树叶成了为茶
叁
海
报
简
介
海
报
展
示
第38页
海 报 简 介
29
海报底层为茶马古道的插
画图片
。仙芽：凡常之茶
，
而名之为仙芽
，盛赞之意
，
无需多说
。海扇占春信
，
仙芽问武夷
。——近代胡
怀琛
《春日寄家兄闽中
》
第39页
海 报 简 介
30
海报底层为茶马古道的插
画图片。清友：竹里品茶，
陶醉大自然。竹里延清友，
迎风坐夕阳。——唐姚台
第40页
海 报 简 介
31
好茶常生于山间云雾弥漫
之处
，故美称之为云华
。
深夜数瓯唯柏叶
，清晨一
器是云华
。——唐皮日休
《寒日书斋即事
》
第41页
海 报 展 示
32
方案一
第42页
海 报 展 示
33
方案二
第43页
IP形象
/周边设计
APP
设计
网页
设计
海报
设计
IP形象 /周边
设计
清友
一片树叶成了为茶
肆
I P 形 象 简 介
I P 形 象 展 示
I P 场 景 展 示
主 题 周 边 简 介
主 题 周 边 展 示
第44页
IP形象简介
34
IP形象主要以拟人的方式设计
，
设计成茶宝宝的形态
。本款茶宠名
字为：茶茶
。身体主体颜色采用裸
色
，重要标识采用茶叶的绿色
，
其
他装饰品采用鲜艳的颜色进行点缀
。
IP形象充分突出
“清友
”APP的特
点
，以茶叶为主
，在喝茶的过程中
可以用茶水来对身体部位进行浇灌
。
第45页
IP形象展示
35
第46页
IP形象展示
36
第47页
IP场景展示
37
第48页
IP场景展示
38
第49页
IP场景展示
39
第50页
表情包展示
40
百万用户使用云展网进行电子书刊制作，只要您有文档，即可一键上传，自动生成链接和二维码(独立电子书)，支持分享到微信和网站！
其他案例
百万用户使用云展网进行电子书刊制作，只要您有文档，即可一键上传，自动生成链接和二维码(独立电子书)，支持分享到微信和网站！
免费制作
{{modalTitle}}
{{item.title}}
x
{{item.desc}}
{{item.title}}
{{toast}}
