第1页
UI/UX
设计 交互/插画/平面
包装/剪辑/等等......
INTERACTIVE INTERFACE DESIGN AN
INTERFACE VISUAL DESIGN
2023PO
古浩锋 广东白云学院 视觉传达设计专业
粉丝：{{bookData.followerCount}}
{{!bookData.isSubscribed?'关注':'取消关注'}}
作品集2023(2)
视觉风格VISUAL EFFECTSVisual style根据产品定位和目标用户，从而衍生出用户的内心情绪，可将情绪化提炼转化为关键词，根据转换的情绪提炼出关键元素用于界面的整体风格和视觉设计According to the product positioning and target users,the inner emotions of users can be derived, and theemotions can be re�ned into keywords, and the keyelements can be extracted according to the convertedemotions for the overall style and visual design of theinterface插画风自然 风景According to the product positioning and target users,the inner emotions of users can be derived, and theemotions can be re�n...
粉丝: {{bookData.followerCount}}
文本内容
第2页
ND
ORTFOLIOS
第3页
PORTF
目录
directory 01网页/UI设计
04
IP设计
第4页
FOLIOS
计
02
包装设计
03
插画设计
第5页
AGING FRIENDLY
WEB PAGE DESIGN
绿洲适老化网页设计方案
设计者： 余俊霖 古浩锋 陈泽键
指导老师：沈小瑜
第6页
项目背 景
DESIGN PROCESS
Project
background
AGE-APPROPRIATE
AGE-APPROPRIATE WEB PAGES
人口老龄化趋势向上，移动支付在老年群体占比增加，老年
旅游服务应该相应呈现专业化，个性化，多样化，新型化和
智能化，对于老年群体，已不是刻板印象中的思想顽固，落
后，经济能力强，老无所忧的老年群体他们也有高质量生活
追求，喜欢新鲜事物，帮助不同阶层的老年人适应数字化生
活，更多的从他们的生理层面和心理负担层面以及服务面
去制定适宜的网页设计。
人口老龄化趋势向上，移动支付在老年群体占比增加，老年
旅游服务应该相应呈现专业化，个性化，多样化，新型化和
智能化，对于老年群体，已不是刻板印象中的思想顽固，落
后，经济能力强，老无所忧的老年群体他们也有高质量生活
追求，喜欢新鲜事物，帮助不同阶层的老年人适应数字化生
活，更多的从他们的生理层面和心理负担层面以及服务面
去制定适宜的网页设计。
第7页
OSAIA
产品介 绍
DESIGN PROCESS
在人海中伫立的一个荒漠中,为有需求的老人引领出一条
绿洲,注重人文关怀的游学网。
人口老龄化趋势向上，移动支付在老年群体占比增加，老年
旅游服务应该相应呈现专业化，个性化，多样化，新型化和
智能化，对于老年群体，已不是刻板印象中的思想顽固，落
后，经济能力强，老无所忧的老年群体他们也有高质量生活
追求，喜欢新鲜事物，帮助不同阶层的老年人适应数字化生
活，更多的从他们的生理层面和心理负担层面以及服务面
去制定适宜的网页设计。
项目理念：
第8页
王大妈
68·退休·老伴在身边·有退休金
User
portrait
AGE-APPROPRIATE
AGE-APPROPRIATE WEB PAGES
动机
接受新事物
积极参与社交活动
有充裕的资金
王大妈
68·退休·老伴在身边·有退休金
人物特征
接受新事物
积极参与社交活动
有充裕的资金
王大妈
68·退休·老伴在身边·有退休金
人物特征
接受新事物
积极参与社交活动
有充裕的资金
人物特征
充分享受生活乐趣，能方便地参加各类感兴趣
的活动。退休之后要充分享受老年时光，让自
己为这些兴趣忙碌起来。对集体活动感兴趣。
痛点
对于互联网敏感度较高，担心乱点到奇怪的
界面，或者暴露个人信息而被骗。
痛点
担心身体健康问题，想尝试学习新事物，希望
可以多参与社交活动
人物特征
生活在一线城市，对了生活品质要求比较高。
平时喜欢下下象棋，写字，写生画画。比较少玩
电子产品。朋友圈比较小都是附近的邻居，以
及以前的同事等，但愿意接受新事物。
痛点
找不到自己喜欢看的东西，没有满足自己的求
知欲
人物特征
子女不在身边，平时生活独自一人，生活圈子
小，爱好种花种菜跟锻炼，听听戏曲
用户画像
DESIGN PROCESS
第9页
上网查询
线下门店或旅游顾问
子女帮忙预定
AGE-APPROPRIATE
用户人群 AGE-APPROPRIATE WEB PAGES
USER POPULATION
10%
40% 50%
Target
population
01 02 老人自己使用旅游网页
免费为主
44.70%
33.20%
16.30%
5.80%
1000以内 1000-2000以内 2000以上
2019年国内老年人学习付费承受统计（单位：元/年）
第10页
OSAI
A
AGE-APPROPRI
A
T
E
AGE-APPROPRI
ATE WEB
P
AGE
S
网页结构
层
WEB
P
AGE
STRU
CTURE L
AYE
R
第11页
前期草图
PRE-SKETCH
第12页
低保真原型图
LOW-FIDELITY PROTOTYPES
第13页
视觉风格
VISUAL EFFECTS
Visual style
根据产品定位和目标用户，从而衍生出用户的内心
情绪，可将情绪化提炼转化为关键词，根据转换的
情绪提炼出关键元素用于界面的整体风格和视觉
设计
According to the product positioning and target users,
the inner emotions of users can be derived, and the
emotions can be re�ned into keywords, and the key
elements can be extracted according to the converted
emotions for the overall style and visual design of the
interface
插画风
自然 风景
According to the product positioning and target users,
the inner emotions of users can be derived, and the
emotions can be re�ned into keywords, and the key
elements can be extracted according to the converted
emotions for the overall style and visual design of the
interface
第14页
设计规范
COLOR & STYLE
Aa
思源黑体 / 中英字体
BOLD MEDIUM REGULAR NORMAL LIGHT
字号：18/24/28/32/48
文字在标准的范围内尽可能以4的倍数为尺寸，行距为字号的
1.2-1.5倍
第15页
设计规范
COLOR & STYLE
Design
specifications
#114424
#F5BD1A
#0D746E
#F5E346 #3F3F3F #CCCCCC
#72C07F #7FB78D
主色/Primary color
辅助色/Secondary color 中性色/Neutral color
第16页
图标设计
FUNCTIONAL GUIDELINES
图标网格
功能图标
图标以4的倍数为设计尺寸，常用尺寸为16、
24、32pt,为保证同一尺寸下图标的大小视觉一
致，图标应严格按照图标设计网格来设计，在同
一位置不同形状的图标切图尺寸完全一致，视
觉感官均衡
第17页
首页页面展示
COMMUNITY PAGE DISPLAY
BANNER位
扁平化风格
通过抽象、简化的设计来表现一种干净整洁、扁平的呈现
方式，让整体界面的视觉效果变得更为统一干练。明亮的
颜色吸引老人的注意力
导航区
特别的按钮可以吸引到老人
的眼光，进行下一页的操作
FOOTER位
第18页
社区页面展示
COMMUNITY PAGE DISPLAY
BANNER位
内容区
个人动态与朋友动态随心分享
侧边栏
在线群组功能，实时观看家庭
在线人数，可跟踪家庭群组成
员，老人操作更放心
FOOTER位
第19页
游学页面展示
STUDY TOUR PAGE DISPLAY
BANNER位
筛选栏
精准定位，国内外游学地点一并俱全
内容区
实用的优惠游学景点推荐
FOOTER位
信息弹窗
大数据推荐精准游学经典数据，个性
化贴心一站式攻略行程定制，出行游
学更加便捷放心，安心
第20页
所有页面展示
ALL PAGES SHOWCASED
大巴
私家车
飞机
高铁
第21页
即时设计链接：https://js.design/f/alfE4w?p=p2OH08Wm0r
第22页
APP设计
茶救星球APP
TEA SAVE THE PLANET APP
VISUAL DESIGN GUHAOFENG DESIGN GUHA
第23页
V ISUAL DESIGN
AOFENG DESIGN GUHAOFENGDESIGN
第24页
APP设计
VISUAL DESIGN GUHAOFENG DESIGN GUHA
第25页
V ISU AL DESIGN
MAIN PAGE
主页面
OFENG DESIGN GUHAOFENGDESIGN
第26页
选中效果
未选中效果
APP设计
ICON DESIGN
图标设计
GUHAOFENG DESIGN GUHA
GUHAOFENG DE
VISUAL DESIGN
第27页
OFENG DESIGN GUHAOFENGDESIGN
ESIGN GUHAOFENG DESIGN GUHAOFENGDESIGN
第28页
APP设计
COLOR SPECIFICATION
色彩规范
#0B4593 #0C9177
GUHAOFENG DESIGN GUHA
GUHAOFENG DE
VISUAL DESIGN
第29页
V ISUAL DESIGN
#0D8E10 #FFFFFF
OFENG DESIGN GUHAOFENGDESIGN
ESIGN GUHAOFENG DESIGN GUHAOFENGDESIGN
第30页
APP设计
FONT SPECIFICATION
字体规范
SOURCE HAN SANS REGULAR
SOURCE HAN SANS REGULAR
SOURCE HAN SANS REGULAR
SOURCE HAN SANS REGULAR
SOURCE HAN SANS REGULAR
SOURCE HAN SANS REGULAR
GUHAOFENG DESIGN GUHA
GUHAOFENG DE
VISUAL DESIGN
第31页
V ISUAL DESIGN
72PT
60PT
48PT
36PT
24PT
18PT
OFENG DESIGN GUHAOFENGDESIGN
ESIGN GUHAOFENG DESIGN GUHAOFENGDESIGN
第32页
APP设计 GUHAOFENG DESIGN GUHA
GUHAOFENG DE
VISUAL DESIGN
第33页
V ISUAL DESIGN
OFENG DESIGN GUHAOFENGDESIGN
ESIGN GUHAOFENG DESIGN GUHAOFENGDESIGN
第34页
APP设计
登录页
GUHAOFENG DESIGN GUHA
GUHAOFENG DE
VISUAL DESIGN
第35页
V ISUAL DESIGN
页 我的页
OFENG DESIGN GUHAOFENGDESIGN
ESIGN GUHAOFENG DESIGN GUHAOFENGDESIGN
第36页
APP设计
V ISU AL DESIGN
全部页面
ALL PAGES
VISUAL DESIGN GUHAOFENG DESIGN GUHAOFENG DESIGN GUHAOFENGDESIGN
第37页
V ISUAL DESIGN
APP设计
开心堡 包装设计
HAPPY CASTLE PDN
VISUAL DESIGN GUHAOFENG DESIGN GUHA
第38页
AOFENG DESIGN GUHAOFENGDESIGN
第39页
V ISUAL DESIGN
APP设计
DESIGN INSPIRATION
设计灵感
柱子 瞭望塔
GUHAOFENG DESIGN GUHA
GUHAOFENG DE
VISUAL DESIGN
第40页
房顶外形
OFENG DESIGN GUHAOFENGDESIGN
ESIGN GUHAOFENG DESIGN GUHAOFENGDESIGN
第41页
#120709 #DD4A58
APP设计
COLOR SPECIFICATION
色彩规范
GUHAOFENG DESIGN GUHA
GUHAOFENG DE
VISUAL DESIGN
第42页
#26416F #F6F0DA
OFENG DESIGN GUHAOFENGDESIGN
ESIGN GUHAOFENG DESIGN GUHAOFENGDESIGN
第43页
APP设计
MASTER RENDERINGS
主效果图
GUHAOFENG DESIGN GUHAOFENG DESIGN GUHAOFENGDESIGN
GUHAOFENG DESIGN GUHAOFENG DESIGN GUHAOFENGDESIGN
VISUAL DESIGN
顶视图
主K’V 侧视图
小包装效果图
刀版图
第44页
此包装作品叫“堡心盒”，是以广东省
开平市碉堡世遗的为主题的文创设计。其设
计理念的是推广开平碉堡设世遗文化的所定
制的包装盒设计。以“碉堡，建筑，结构”
为设计切入点，从型色构方向创作的剪纸风
的包装盒子。采用红色
APP设计
FINISHED PRODUCT EFFECT
成品效果
GUHAOFENG DESIGN GUHA
GUHAOFENG DE
VISUAL DESIGN
第45页
T
OFENG DESIGN GUHAOFENGDESIGN
ESIGN GUHAOFENG DESIGN GUHAOFENGDESIGN
第46页
APP设计
IP形象设计
IP IMAGE DESIGN
VISUAL DESIGN GUHAOFENG DESIGN GUHA
第47页
V ISUAL DESIGN
AOFENG DESIGN GUHAOFENGDESIGN
第48页
APP设计 GUHAOFENG DESIGN GUHA
GUHAOFENG DE
VISUAL DESIGN
第49页
OFENG DESIGN GUHAOFENGDESIGN
ESIGN GUHAOFENG DESIGN GUHAOFENGDESIGN
第50页
APP设计
DERIVATIVE MEMES
衍生表情包
VISUAL DESIGN GUHAOFENG DESIGN GUHAOFENG DESIGN GUHAOFENGDESIGN
GUHAOFENG DESIGN GUHAOFENG DESIGN GUHAOFENGDESIGN
发
呆
呆
无
视
！
好
奇
爷
气
儿
苦
笑
！
想办法
百万用户使用云展网进行电子书刊制作，只要您有文档，即可一键上传，自动生成链接和二维码(独立电子书)，支持分享到微信和网站！
其他案例
百万用户使用云展网进行电子书刊制作，只要您有文档，即可一键上传，自动生成链接和二维码(独立电子书)，支持分享到微信和网站！
免费制作
{{modalTitle}}
{{item.title}}
x
{{item.desc}}
{{item.title}}
{{toast}}
