image

「我的艺考」界面改版升级

一览
「我的艺考」是为艺术生打造的,为其提供AI志愿选择、学校资料查询等功能的小程序。
所用工具
Adobe XD、蓝湖、语雀
我的角色
UI 设计师
时间周期
4 周

视觉效果

改版后视觉

高保真01

高保真02

高保真03

改版界面前后对比

点击展开对比图

旧版界面速览1

「我的艺考」首页

旧版界面速览2

「我的艺考」学校介绍

旧版界面速览3

「我的艺考」院校分析

旧版界面速览4

「我的艺考」AI选志愿

前期调研

改版要求

  1. 基于现有框架,小细节调整。
  2. 现有功能层级更加的清晰明确。
  3. 让界面更加的好看。

目标人群

应届艺术类毕业生


设计规范

跟小程序负责人聊天之后发现,他们的主色调是 紫色 #5472e2,然后我在他们的界面中提取到了红色 #ff8b8d和稍微提亮之后的绿色 #8ec88c,帮助他们确定了主要的色彩搭配。

字体用色上,我用了#333#666#999 三个灰度,让信息层级区分明确。

色彩

色彩前后对比图

图标

图标规范

TAB栏位置,未激活状态为线性,激活状态为线面结合形式。

重点修改

首页

首页修改01

首页主要功能区块前后对比

首页修改02

  • 统一线性、面性图标
  • 将主要功能 AI选志愿 做了独特化处理
  • 标题颜色、按钮颜色调整
  • 调整部分文字信息

学校资料

学校介绍-01

学校卡片资料整合

学校介绍-02

模块顺序层级调整
  • 调整学校信息为卡片形式,清晰明了的获取信息
  • 将学校风景模块层级下移
  • 调整文字层级、颜色、字间距

AI选志愿

AI选志愿

AI选志愿减少用户认知成本
  • 色彩区分更加的强烈,减少用户认知负担
  • 增加985/211个性标签并赋予色彩

高保真展示

高保真

多界面展示合集

项目交流

由于这是一个实际项目,因此还需要涉及跟团队进行沟通。

语雀

语雀-01

只有设计图是没办法交流的,我们项目小组也在语雀有一个文档,会写明方向、细节调整等。


平面设计

LOGO

LOGO设计

  1. 同音,表达祝愿升学、第一名的感觉
  2. 负责人也比较想用文字作为LOGO
  3. 考虑文字与1数字相互结合。

创业计划书封面

创业计划书封面

宣传物料

宣传-01

VIP卡片

卡片-01

数据反馈

数据反馈-01

复盘

  1. 竞品分析没有做好,没有对同类产品进行一个调研
  2. 界面设计并没有一个具体完整的设计规范
  3. 项目只有界面设计,并没有针对交互进行测试

首页调整

复盘-01