01

Project Background

项目概述

ui/ux design

2023 Portfolio

01

Project Background

项目概述

ui/ux design

2023 Portfolio

projectcontext

/项目背景

projectcontext

/项目背景

在疫情期间,面对教育行业的转型挑战和市场竞争格局,传统教育公司需要一个线上平台,旨在响应“停课不停学”的政策,通过结合线上教育的灵活性和线下教学的互动性,提供一个融合了课程回看、随时听课及名师教学等优势的平台。移动应用不仅帮助我们的机构在竞争激烈的市场中巩固地位,同时也为学生和家长提供了高质量、便捷的学习体验,从而适应当前的教育需求和未来的发展趋势。

在疫情期间,面对教育行业的转型挑战和市场竞争格局,传统教育公司需要一个线上平台,旨在响应“停课不停学”的政策,通过结合线上教育的灵活性和线下教学的互动性,提供一个融合了课程回看、随时听课及名师教学等优势的平台。移动应用不仅帮助我们的机构在竞争激烈的市场中巩固地位,同时也为学生和家长提供了高质量、便捷的学习体验,从而适应当前的教育需求和未来的发展趋势。

design goals

/设计目标

design goals

/设计目标

01

品牌升级

统一品牌视觉要素,包括字体、颜色、标志、图标和线下宣传物料。制定明确的IP标准,加强品牌形象,提高公众对品牌的认知度

01

品牌升级

统一品牌视觉要素,包括字体、颜色、标志、图标和线下宣传物料。制定明确的IP标准,加强品牌形象,提高公众对品牌的认知度

02

用户体验

专注于界面设计和操作流程优化,目的是提升用户满意度。重点在于提供具有高体验性的产品服务,并努力降低成本。

02

用户体验

专注于界面设计和操作流程优化,目的是提升用户满意度。重点在于提供具有高体验性的产品服务,并努力降低成本。

03

付费转化提升

改进产品的付费内容触发点。通过有效的引导和刺激策略,促进用户付费转化率的提升。

03

付费转化提升

改进产品的付费内容触发点。通过有效的引导和刺激策略,促进用户付费转化率的提升。

04

增强用户留存/粘性

通过直播、学习和发布优质内容,增加用户留存。这些策略旨在提高用户对平台的黏性,从而提升用户活跃度。

04

增强用户留存/粘性

通过直播、学习和发布优质内容,增加用户留存。这些策略旨在提高用户对平台的黏性,从而提升用户活跃度。

My character

/我的角色

My character

/我的角色

产品调研

接到需求后与市场部对接,跟随市场部调研用户需求,确认用户人群以及用户痛点。通过用户了解目前使用的产品,进行竞品分析。

产品调研

接到需求后与市场部对接,跟随市场部调研用户需求,确认用户人群以及用户痛点。通过用户了解目前使用的产品,进行竞品分析。

产品调研

接到需求后与市场部对接,跟随市场部调研用户需求,确认用户人群以及用户痛点。通过用户了解目前使用的产品,进行竞品分析。

原型图设计

通过用户/产品分析的结果来进行绘制思维导图和产品的主要原型,展示产品交互过程。

原型图设计

通过用户/产品分析的结果来进行绘制思维导图和产品的主要原型,展示产品交互过程。

原型图设计

通过用户/产品分析的结果来进行绘制思维导图和产品的主要原型,展示产品交互过程。

情绪版

通过用户人群来确定情绪板,利用网络渠道来收集与关键词相匹配的图片素材,将收集到的图片素材,按照衍生关键词进行分类并提取生成情绪板。

情绪版

通过用户人群来确定情绪板,利用网络渠道来收集与关键词相匹配的图片素材,将收集到的图片素材,按照衍生关键词进行分类并提取生成情绪板。

情绪版

通过用户人群来确定情绪板,利用网络渠道来收集与关键词相匹配的图片素材,将收集到的图片素材,按照衍生关键词进行分类并提取生成情绪板。

UI 页面设计

通过收集的信息以及风格来进行进一步的UI设计,细节打磨。确保用户在视觉上有良好的体验。

UI 页面设计

通过收集的信息以及风格来进行进一步的UI设计,细节打磨。确保用户在视觉上有良好的体验。

UI 页面设计

通过收集的信息以及风格来进行进一步的UI设计,细节打磨。确保用户在视觉上有良好的体验。

job analysis

/竞品分析-色彩分析

色彩分析

色彩分析

库课网校

主色

辅助色

渐变色

灰色系

背景色

耶鲁专升本

主色

辅助色

渐变色

灰色系

背景色

色彩分析与总结

色彩分析与总结

通过对竞品APP主色、辅助色、渐变色、灰色系和背景色的对比分析,得出以下结论:竞品多以品牌色作为主色调,学习类APP以蓝色作为主色的居多。辅助色在保持明度和饱和度相近的情况下扩展1~2种,且颜色明度偏亮。渐变色多数用的是同色系渐变,通过降低辅助色的明度构成渐变色。灰色系均使用的是冷色调的颜色,带有蓝色的色彩倾向让文字的色彩展示更加丰富。背景色多是浅灰色。

job analysis

/竞品分析-产品分析

库课网校

用户人群

用户人群

专科马上毕业对本科还有梦想

自制能力差,想报补习班的在

读大学生

专科马上毕业对本科还有梦想,自制能力差,想报补习班的在读大学生

优点

产品优点

网站功能比较多,创办时间长

知名度高、用户信赖感强。

网站功能比较多,创办时间长、知名度高、用户信赖感强。

缺点

产品缺点

页面没有特点,同质化比较严

重功能杂乱、网课体系不够完

善口碑褒贬不一。

页面没有特点,同质化比较严重功能杂乱、网课体系不够完善口碑褒贬不一。

亮点功能

亮点功能

功能:升本百宝箱

亮点:用户可以通过百宝箱的专科专业、本科专业

考试科目、院校招生信息等功能,来获取所需信息。

目标用户:想获取专升本信息,以及想查询历年院校录

取分数线的用户。

功能:升本百宝箱

亮点:用户可以通过百宝箱的专科专业、本科专业

考试科目、院校招生信息等功能,来获取所需信息。

目标用户:想获取专升本信息,以及想查询历年院校录

取分数线的用户。

耶鲁专升本

用户人群

用户人群

专科马上毕业对本科还有梦想

自制能力差,想报补习班的在

读大学生非师范学生想考教师

资格证人群

专科马上毕业对本科还有梦想自制能力差,想报补习班的在读大学生非师范学生想考教师资格证人群

优点

产品优点

网课体系比较完善大品牌旗下

的平台有相对较完善的线上产

品。

网课体系比较完善大品牌旗下的平台有相对较完善的线上产品。

缺点

产品缺点

产品部分功能不够完善网课质

量略差

产品部分功能不够完善网课质量略差

亮点功能

亮点功能

功能:免费专区

亮点:免费专区有大量的试题与课程提供下载以及观看

目标用户:想获取免费的课程,免费的直播、免费资料

功能:免费专区

亮点:免费专区有大量的试题与课程提供下载以及观看

目标用户:想获取免费的课程,免费的直播、免费资料

Color Analysis

/色彩分析

主色

主色

#257DFE

#257DFE

辅色

辅色

#FF614C

#FF614C

红渐变

红渐变

#FE674F

#FE674F

#FE674F

#FE674F

#FE674F

#FE674F

蓝渐变

蓝渐变

#0D72FE

#0D72FE

#52ACFF

#52ACFF

重要

重要

#1F243E

#1F243E

一级

一级

#393B45

#393B45

二级

二级

#4D4F59

#4D4F59

提示

提示

#7F8D9C

#7F8D9C

Typography Guidelines

/字体规范

Typography Guidelines

/字体规范

样式

字体行高

字体大小

字体名称

十年饮冰,难凉热血。

10px

10px

OPPOSans / Medium

十年饮冰,难凉热血。

20px

12px

OPPOSans / Medium

十年饮冰,难凉热血。

22px

14px

OPPOSans / Medium

十年饮冰,难凉热血。

22px

14px

OPPOSans / 加粗

十年饮冰,难凉热血。

24px

16px

OPPOSans / Medium

十年饮冰,难凉热血。

24px

16px

OPPOSans / 加粗

十年饮冰,难凉热血。

26PX

18px

OPPOSans/ 加粗

字体规范总结

字体规范总结

字体规范总结

在很多设计语言里,所有的组件遵循以4PX的网格系统,我发现在Figma中以12号字阶为正文在20PX的行高下显示良好,因此得出一个基础的比率(20 / 12≈1.67)

在很多设计语言里,所有的组件遵循以4PX的网格系统,我发现在Figma中以12号字阶为正文在20PX的行高下显示良好,因此得出一个基础的比率(20 / 12≈1.67)

在很多设计语言里,所有的组件遵循以4PX的网格系统,我发现在Figma中以12号字阶为正文在20PX的行高下显示良好,因此得出一个基础的比率(20 / 12≈1.67)

1.5-1.7倍字号的行号同时也比较符合密集文字良好的可读性感受。并以这个比率为基础得到其它字号的行高范围,然后四舍五入筛选符合4px 倍数网格系统的值,并在实际应用中观察是否合适。

1.5-1.7倍字号的行号同时也比较符合密集文字良好的可读性感受。并以这个比率为基础得到其它字号的行高范围,然后四舍五入筛选符合4px 倍数网格系统的值,并在实际应用中观察是否合适。

1.5-1.7倍字号的行号同时也比较符合密集文字良好的可读性感受。并以这个比率为基础得到其它字号的行高范围,然后四舍五入筛选符合4px 倍数网格系统的值,并在实际应用中观察是否合适。

02

project outline

项目概述

ui/ux design

2023 Portfolio

02

project outline

项目概述

ui/ux design

2023 Portfolio

报考查询

报考查询

升本数据可视化,为用户提供免费的数据查询,可以直接查询历年院校趋势,避免用户在多个网站翻找数据作对比,提升用户体验。前期用户较少的情况下,用于获取线索、留存

用户。

升本数据可视化,为用户提供免费的数据查询,可以直接查询历年院校趋势,避免用户在多个网站翻找数据作对比,提升用户体验。前期用户较少的情况下,用于获取线索、留存

用户。

资讯

资讯可以查询关于专升本的热点信息,以及考试资讯。通过院校信息可以查询到各大院校的招生信息,方便用户更详细的了解升本政策。院校信息页面使用卡片形式来整理信息,将复杂的信息整理成简洁易读的形式,方便用户快速阅读和理解。也可以使多个项目或选项之间的差异更加明显,提高用户进行比较和选择的效率。

课程页面

课程页面将正在直播和热门课程两个模块的展示方式做了不同的交互方式,用于区分免费课程和收费课程,同时也丰富其交互性,正在直播同时也使用了卡片形式的方式进行设计使用户更加直观的理解模块的内容。

我的

升本数据可视化,为用户提供免费的数据查询,可以直接查询历年院校趋势,避免用户在多个网站翻找数据作对比,提升用户体验。前期用户较少的情况下,用于获取线索、留存

用户。

致学专升本

选择致学,无忧升学

I am currently job hunting!