你好，我是 王克琼，山东科技大学视觉传达设计 2027 届。专注 B 端界面 与 可视化大屏，也做 C 端小程序与官网。
CLICK TO VIEW
有两段 UI 设计实习经历，独立完成过 50+ B 端页面 和 10+ 可视化大屏，作品已上线落地。习惯从业务逻辑和信息架构出发，再落到视觉和组件规范。
B 端页面设计
可视化大屏
营销卡片设计
课程平均成绩
两段实习覆盖 B 端系统、数据大屏、G 端政务平台和营销视觉，项目均已上线。
面向 MCN 机构的短视频与直播数据后台。重新梳理导航与信息层级，统一组件和色彩规范，并提供浅色 / 深色双模式。
→查看详情
线上汽车议价小程序。通过用户访谈和数据分析找到两处关键流失点，重构购车页、议价流程与报价对比，提升发布转化。
→查看详情
把保险官网的核心能力迁移到微信小程序，并同步升级官网 3.0。建立品牌设计语言、图标体系和完整的高保真页面。
→查看详情高保真界面、组件规范、图标与动效。
从原型到交付开发，配合前端核验还原效果。
AI 生成界面精修、样本标注与质检经验，能用 AI 提升设计效率。
面向公司内部 MCN 的短视频与直播数据后台。业务扩张后，导航变复杂、数据看不清、组件不统一。这次改版从不同使用者的视角，重新梳理信息层级和设计规范。
摩天轮为 MCN 提供短视频及直播数据查询、运营与广告投放效果监控，同时承担合规管理、原创检测、官网运营等功能。随着业务快速扩展，部分页面操作低效、布局结构不合理的问题陆续被反馈。
前期参与调研，与产品确定改版重点和优化方向；中期完成界面设计；后期与研发对接走查验收、收集反馈。
菜单层级深，标签页多开后找不到位置
核心数字不突出，长页面需要反复下拉
输入框、标签、颜色各自为政
深色模式对比弱，文字行距拥挤
品牌色用于主按钮、主搜索和图标；功能色表示成功、出错、提醒等状态，全产品保持一致；中性色负责文字、背景、边框，拉开主次关系。点击色块可复制色值。
采用 24 栅格，以 4px 为原子单位。页面以卡片和列表为主，左侧全局导航固定 80px。
情绪版：在整体设计语言的原则下，推导出更细化的视觉语言，从专业到克制。
同行分析 / 自营账号报备 / 资源渠道分析 / 直播计划 / 抖音直播看板
同类指标形式统一。核心数字加粗放大，累计值和环比作为辅助信息缩小，加强对比；过滤情况做成仪表盘。
直接展示百分比，点击后数字悬浮。地域分布按资源量深浅着色，便于对比。
两种颜色对比两条链路，转化率用彩色标出，更醒目。
用户反馈深色模式"看着好吃力"。重新调整了深色模式下的背景层级、文字对比度和图表配色。左右拖动中间的把手对比。
数据概览用三种颜色区别展示；直播状态标签各有颜色，对比清晰；表格操作栏固定在右侧，内容可左右滑动。
抖音直播看板：选中一场直播后，下方联动展示概览数据、指标对比、转化漏斗与高光片段。
标题、作者、正文与封面
右侧实时展示重复程度
不通过时智能改写，高亮修改处
检测通过后直接发布
左侧输入检测文章，右侧操作检测；输入时可以收起右侧，减少视觉干扰。"前言"和"关键词"可从正文智能提取，关键词做成标签，方便快速添加。
三种检测状态：检测中 / 检测通过 / 不可提交
一键改写弹窗（改写中 / 改写后高亮），以及有内容与空状态的页面
待审核与未通过数据并排对比；部门用树形结构管理，三级部门可编辑、删除。
一个线上汽车议价小程序。用户访谈和埋点数据显示：新用户从访问到首次发布需求、从收到报价到确认砍价，这两步流失最大。改版的重点是提升发布转化和议价效率，同时让用户信任平台。
多次到店沟通价格，信息不对称，议价压力大
需要自己对比银行和金融机构的方案，流程繁琐
选车、议价、贷款到提车，多环节线下往返
三四线城市 4S 店资源有限，选择少
刚进入时页面很空，发布入口不明显；收到报价后，找不到联系销售的入口。
访谈私域销售、汽车销售和购车客户，结合埋点数据，找到两个流失最大的环节：访问 → 首次发布需求，以及收到报价 → 点击确认砍价。
| 竞品 | 用户画像 | 需求场景 | 视觉风格 |
|---|---|---|---|
| 懂车帝 | 18–35 岁年轻用户，短视频偏好 | 快速了解车型亮点，直播互动砍价 | 高饱和色块 + 动态卡片流 |
| 汽车之家 | 25–45 岁车迷，深度决策用户 | 参数对比、真实口碑、社区交流 | 深蓝色系 + 结构化排版 |
| 易车 | 30–50 岁价格敏感型用户 | 4S 店比价、优惠整合、贷款计算 | 橙红主色 + 大量促销入口 |
| 瓜子二手车 | 20–40 岁二手车买卖家 | 检测报告、线上拍卖、金融分期 | 绿色系 + 扁平化图标 |
| 车行168 | B 端二手车商、经销商 | 批量采购、物流调度、库存管理 | 灰蓝色调 + 高密度表格 |
交易金额高，需要可靠感。色彩用深蓝、深灰，布局对称规整，注重留白。
以蓝、青为主，配少量亮色；简洁无衬线字体，部分加入未来感效果。
图标简洁直观，卡片式布局去除多余装饰，简化交互流程。
使用高清真实的汽车图片；人性化的提示语和引导语，友好的反馈。
核心目标是提升新用户的发布转化率。放大发布入口，新增金刚位和用户评价，营销位后移。
选车 → 选车系 → 完善上牌城市、付款方式等 → 一键发布。发布后在"我的需求单"里随时查看进度。
红金配色打造"保障、认证"的视觉符号，嵌入地图、电话、微信
问答按颜色区分，默认折叠答案，减少视觉干扰
融入赛车、赛道、团队元素，关联"专业可靠"
瀑布流布局营造"知识库"般的沉浸感
购车客户找不到入口联系销售，汽车销售也很难快速看到客户的最新信息。新方案用聊天室让双方直连，并新增消息列表。
通过议价单来回传递，响应慢
聊天室直连，报价、砍价在对话中完成
用户发布需求后，销售报价并生成报价单卡片，双方可在聊天室沟通；顶部是辅助议价的功能入口。
点击报价单卡片，底部弹层展示贷款落地价与各项费用，方便比较。
分为车价和绑定销售项，销售报价用红色突出；底部浮层实时计算砍价后总价和节省金额。
"查看明细"弹层用红蓝对比销售报价和我的砍价，高亮变动项；确认后自动发送到聊天窗口。
实时显示最新报价状态，并提供购车补贴与分期产品入口。
车型、销售姓名、落地价加粗展示
双报价单蓝红对比，有差价的配置项动态标出差额
蓝色与灰色标签区分车辆库存状态
只能选两位销售一对一对比，达到上限后其余选项自动置灰
为线下已询价、但议价困难的用户提供代谈服务，邀请销售入驻实现高效议价。
服务前（浅）vs 服务后（深）呈现价值
底部按钮发起服务
选择要砍价的需求
门店 / 销售 / 报价拆成独立任务
把保险官网的能力搬进微信小程序，降低使用门槛、方便分享传播；同时升级官网 3.0，解决旧官网框架单一、按钮都直接跳客服、看不到产品详情的问题。
广发保险经纪与多家保险公司合作，提供出行、医疗、家庭保障规划和理赔服务。基于现有官网，设计小程序版本。
参考《中国保险细分消费人群洞察白皮书》（7792 位网民问卷）。消费者搜集保险信息时最关注的内容：
保司品牌实力
配置方案 / 攻略
产品对比分析 / 解读
金牌规划师定制家庭方案
全程指导，解决疑虑
在众多产品中找到高性价比
全家保单一站式管理
VIP 顾问全程协助理赔
从设计理念中提取视觉关键词：专业的、可靠的、有温度的、有活力的。移动鼠标展开查看。
沿用广发保险经纪的品牌蓝；从情绪版关键词中提取辅助色，主色用于产品界面，辅色用于营销设计。文字灰度中加入品牌蓝，整体颜色更干净。
字号从 10 到 20，不同层级的信息对比清晰。
功能入口图标分三层结构，加入毛玻璃材质增加质感；险种图标用大圆角，颜色按险种区分，亮度和饱和度保持一致。尺寸：12、16、24、36、44pt。
目标明确的用户直接搜索，上滑置顶
图标分三层结构，加入毛玻璃质感
按人群分类，左右轮播；"保"和"攻"用对勾连接，寓意顺利获取知识
Tab 指示器设计成微笑形状；标签用橙色，与按钮在视觉上区分
点击险种直达对应列表，大圆角图标更有亲和力
不知道买哪类险种时，先明确为谁买；上滑时头部固定
简介 → 投保规则 → 解读 → 保障内容 → 条款；价格和预约按钮置底突出
保险知识库按学习顺序分为入门必看、购险攻略、理赔科普；内页很长，用时间轴定位章节；"已读"置灰，"未读"高亮。
旧官网框架单一，很多按钮点击后统一进入客服咨询，无法查看产品详情和保险知识。我负责首页、保险方案定制、产品列表与详情、知心赔、1V1 方案定制、关于我们。
把鼠标移到下面的浏览器窗口上，页面会自动向下滚动。
