【项目背景】
“无锡创业”是一款面向本地青年创业者、大学生提供的综合性政企服务App。平台涵盖了创业意识培训、政策解读、慕课学习等多种内容。早期的界面由于历史迭代原因,信息层级混乱,长文本与课程卡片混杂,导致用户在寻找特定课程或了解政策时,视觉疲劳感极强。
【视觉重塑:建立清爽的Design Token体系】
政务服务与在线教育结合的App,视觉上需要同时具备“公信力”与“年轻活力”。我们接手设计后,首先重构了底层的视觉规范(UI Design Token):
1. 色彩系统:确立了以绿色(#3ccf93)为主色调,辅以青色(#4ed5d3)和浅绿。绿色代表生机与创业,渐变色则打破了传统政务App的死板感,显得更为年轻。
2. 字体规范:全局强制使用“苹方”字体体系。重要字眼使用“苹方-中黑体”加粗,正文使用“常规体”保证易读性;而对于价格、特殊数字则使用 Helvetica,确保数据的视觉统一。
3. 图标(Icon)重构:底部的导航栏和金刚区图标全部重新绘制为轻量级的扁平化风格,去掉了多余的阴影和描边,与整体的绿色调保持高度一致。
【信息降噪:重构核心页面布局】
在首页设计上,我们将核心业务提炼为“兑换、答题、提问、释疑、慕课”五大金刚区入口。下方的“学习培训”和“创业活动”采用大面积图片配合底部渐变的卡片式排版,让用户在不点开的情况下就能预判内容。
在“全部分类”页,面对繁杂的课程类型(如意识、能力、数控、改善等),我们用图标+文字的双行矩阵进行归类,用户在手机上单手就能快速滑动筛选。
【转化率引导:课程详情页的交互优化】
在课程详情页,用户的核心诉求是“快速了解”和“立即学习”。
1. 我们将核心标签(如:热门、慕课、学习人数)直接放在标题下方,建立信任感。
2. 底部采用了“立即购买”和“立即学习”的双色悬浮按钮设计,不论页面多长,转化入口始终固定,避免了用户因为找不到按钮而流失。
【项目总结】
UI外包的核心价值不仅是画图,更是帮客户做业务规范的收敛。通过这次无锡创业App的改版,我们不仅交付了一套高保真的设计稿,更输出了一份包含颜色值、字号、组件状态的规范文档,让客户的开发团队在后续维护时,无需再为对齐和颜色偏差而反复沟通。