蔡志远个人作品集

10+ YEARS OF DESIGN

DESIGN BEYOND THE SCREEN

姓名 蔡志远

职位 UI/视觉设计师

年龄 31

工作经验 10年

个人简介

10年专业设计经验，最近一份工作在一家游戏公司担任UI设计主管，专注于UI设计、网页设计、平面视觉与动效设计等领域，具备从视觉创意到产品体验的综合设计能力。

熟悉APP及网页设计全流程，能够独立完成需求分析、视觉定位、界面设计、设计规范与交付跟进。长期参与多类型商业项目，具备良好的跨团队协作、项目推进与设计管理经验，能够在复杂需求中保持高效沟通与稳定输出。

联系方式

Tel: 15602402620

Email: 980595471@qq.com

WeChat: 15602402620

CAIZHIYUAN

UI DESIGNER

作品目录

APP设计

APP DESIGN

WEB设计

WEB DESIGN

运营设计

OPERATIONS

AIGC应用

AIGC APPLICATION

UI DESIGN

HELIN APP

盒邻APP

潮流盲盒商城与社区

盒邻是一款融合线上开盒与线下探索的潮玩盲盒社交App。用户可以在线抽取心仪系列，也能发现附近盲盒机、参与拍卖交易、分享开盒动态，与同好互动交流。平台以轻松有趣的方式连接盲盒爱好者，让每一次开盒都充满惊喜，也让喜欢潮玩的人更容易相遇。

项目背景

随着潮玩盲盒文化的流行，用户对“抽盒、晒盒、换盒、找同好”的需求逐渐增加。但目前盲盒体验大多分散在线上商城、线下门店、二手交易平台和社交社区中，用户想要完成一次完整的盲盒体验，往往需要在多个渠道之间切换，流程不够连贯。

设计目标

盒邻希望打造一个融合线上抽盒、附近盲盒机探索、玩家交流、交易拍卖与动态分享的综合平台。通过“线上开盒 + 线下发现 + 同好社交”的方式，让用户不仅能获得抽盲盒的惊喜感，也能更轻松地找到附近的盲盒资源与兴趣相同的玩家，提升潮玩用户的参与感、互动感与归属感。

设计切入点

需求整合

连接抽盒、找机器、社交、交易等分散场景

附近发现

强化线下盲盒机与同城用户之间的连接

互动分享

通过动态、圈子与晒盲盒的动作来增强社区氛围

体验闭环

构建从发现、参与到分享交易的一站式体验

核心价值 开盒，遇见同好

界面风格 可爱亲和，轻量易用

产品属性 线上开盒+交易市场+交友社区

USER PERSONAS

用户画像

盒邻的核心用户可分为新鲜感驱动型、收藏交易型和同好社交型三类。他们分别关注开盒惊喜、稀有收藏与交易效率，以及兴趣分享和圈子互动。三类用户共同体现了盲盒消费从“购买体验”向“兴趣社交与价值交换”延伸的趋势。

尝鲜型用户

交易型用户

字体规范

PINGFANG HK Regular / Bold

字体选用 PingFang HK Regular / Bold，整体字形简洁现代，具有良好的屏幕阅读体验。Regular 适合正文与辅助信息，Bold 用于标题和重点内容，能够清晰区分信息层级。

ALIMAMA SHUHETI Bold

标题字体选用 Alimama ShuHeiTi Bold，字形厚重有力，具有较强的视觉冲击力和识别度。适合用于页面主标题、活动Banner和重点信息展示，能够强化品牌年轻、潮流、活泼的视觉感受，与正文形成清晰层级对比。

颜色规范

#22D6C3

主色调

用于核心按钮、功能入口、品牌识别色

#1CCCB7

辅助色

用于渐变背景、轻量提示、氛围装饰

#FEE156

辅助色

用于按钮，选中高亮

#F5F5F5

背景色

画布背景颜色，为了让纯白卡片更清晰

#121212

字体色

用于字体、背景和按钮

#999999

字体色

用于提示小文字

Page Display

页面展示

首页模块

盒邻首页作为用户进入App后的核心入口，将搜索、活动Banner、热门系列、附近盲盒机和盲盒广场等高吸引力功能集中呈现在首屏区域。通过清晰的内容层级与强视觉引导，帮助用户快速发现感兴趣的盲盒内容，提升浏览效率、点击率与参与转化，同时强化平台“线上开盒 + 线下探索”的产品特色。

标签栏设计

相比传统贴底导航，悬浮样式减少了沉重感，让页面底部更通透，符合年轻、清爽、潮玩的产品气质。

附近模块

页面通过柜机、圈子、动态三个子页面构成，构建线上线下联动的探索场景。柜机页帮助用户快速查找附近盲盒机，圈子页连接同城兴趣用户，动态页展示开盒分享与互动内容。通过位置关系串联资源、用户与内容，增强平台的探索感、社交感与社区活跃度。

Explore page

选择开盲盒方式

点击开盲盒后弹出选项，共有三种方式，涵盖了线上线下和自提选项

在线盲盒机

在线盲盒机为产品的线上商城，用户可快速选择系列下单，高效的消费场景

开盲盒交互页

用户通过下滑拆盒交互，增强线上开盒的参与感与惊喜感。

获得盲盒页面

抽盒结果页通过大标题、中奖卡片与彩带氛围强化“恭喜获得”的惊喜感，底部提供立即分享入口，提升开盒后的成就感和分享意愿。

交易模块

交易模块为用户提供二手盲盒流转与稀缺款拍卖场景。交易主页类似闲置交易平台，用户可发布、浏览和购买闲置盲盒；拍卖场则面向稀有款，通过限时竞价、价高者得的方式提升商品价值感，满足用户换盒、出售与收藏交易需求。

个人页面

个人界面以用户信息与资产数据为核心，集中展示盲盒数量、盲盒币、积分和会员状态，帮助用户快速了解账户情况。下方功能列表整合任务、订单、消息、地址与客服入口，结构清晰、操作直观，提升个人中心的管理效率与使用便捷性。

-ICON

功能 ICON 采用统一线性描边风格，以黑色保证识别度，薄荷绿作为品牌点缀。圆角化造型简洁亲和，能够直观传达功能含义，提升用户理解与操作效率。

我的资产

充值中心与任务中心，帮助用户管理盲盒币与积分获取路径。充值页支持盲盒币购买与积分兑换，任务页通过签到、互动、交易等任务激励用户持续参与，形成资产获取、使用与成长反馈的完整闭环。

PAGE OVERVIEW

页面总览

UI DESIGN

ZHAIXING APP

摘星小程序

AI占卜社交小程序

摘星是一款融合 AI 占卜、星座运势、生辰八字与 MBTI 人格分析的命理社交应用。产品通过多维资料建档，为用户生成个性化运势报告，并提供占卜工具、智能匹配、角色聊天与会员报告等功能，让神秘学体验更轻量、有趣且具备互动性。

OBJECTIVES

产品目标

目标人群

AUDIENCE

AI占卜应用的用户中，20-35岁群体占比73%，本科及以上学历者达82%。他们通常是受过高等教育、热衷科技产品，但又存在现实焦虑的年轻人。女性用户往往对情感、人际关系、个人成长等话题更感兴趣，AI占卜提供了一种心理慰藉和探索自我的方式。

变现方式

EARNINGS

会员订阅制：提供每日完整运势、高级AI解读、独家功能（如深度配对分析）、去广告等权益。
单项付费：针对特别专业的占卜项目（如详细命盘分析、大师解惑）可设置单独付费。
广告：在免费用户使用中嵌入激励视频广告。

GUIDELINES

设计规范

边距：12pt 圆角：20pt

颜色

COLOR

主色调 #8444F7

辅助色 #4C44F7

背景色 #201C3B

高亮色 #FACB29

PAGE DISPLAY

页面展示

UI DESIGN

首页模块

首页旨在为用户打造一个兼具沉浸感与实用性的AI占卜入口。整个界面以一位灵动而神秘的AI占卜师人物形象为核心视觉焦点。用户可通过点击其周围弹出的趣味默认选项，如“今天吃什么”、“今日推荐穿搭”等，即刻获得基于个人今日运势生成的专属答案。此页面每天都有不同的内容，用户粘性极强。

功能模块

功能页聚合了多种 AI 命理工具，用户可在 MBTI、八字分析、星座占卜等分类中快速切换，并通过卡片入口进入梅花易数、AI看风水、奇门遁甲、日程优化等场景，满足不同类型的探索与决策需求。

消息页

配对页

配对中

匹配成功可开始聊天

个人弹窗

个人核心信息以优雅的底部弹窗面板集中呈现，聚焦于生辰八字、星座、MBTI三大维度，构成所有AI占卜服务的精准数据基石。底部集成您的专属综合运势报告，清晰展示关键词洞察，开通会员即可解锁完整版的详尽分析与未来指引。

CONSTELLATION

十二星座图标

登录注册模块

摘星的注册阶段通过手机号登录、生辰信息填写与MBTI测试，引导用户逐步建立个人占卜档案。流程以深色神秘视觉和紫色渐变按钮营造星象氛围，同时将信息收集融入轻量互动中，为后续AI占卜、运势分析与个性化推荐提供数据基础。

MBTI插画

MBTI插画以黑猫吉祥物为核心，将16种人格特征转化为不同职业、身份与情绪造型。通过统一的角色形象与差异化装扮，既强化了摘星的品牌记忆点，也让测试结果更具趣味性和个性化表达。用户在查看人格结果时，能获得更直观、轻松且具有分享欲的体验。

PAGE OVERVIEW

页面总览

WEB DESIGN

SOUYOUJI

搜游记官网

OFFICIAL WEBSITE

5.0

PROJECT

DESCRIPTION

项目说明

设计目标

搜游记官网面向页游用户群体，在视觉风格上更注重熟悉感、信息密度与操作直达。页面延续传统页游官网中强视觉、强入口、强运营氛围的设计特征，通过醒目的游戏展示、清晰的功能分区与直接的按钮引导，帮助用户快速了解游戏内容并完成下载、进入官网、注册等核心操作，在贴合目标用户审美习惯的同时提升转化效率。

设计理念

在色彩体系上，我们严格遵循品牌视觉规范，延续企业主色与辅助色的应用逻辑，确保不同平台之间的视觉识别保持统一与连贯，从而强化整体品牌认知。

在设计语言层面，PC 端则进行了更具平台适配性的表达。区别于移动端的圆润风格，弹窗、卡片等界面模块采用直角切割的视觉处理方式，以契合 Windows 10/11 等主流桌面系统的现代美学特征。该设计策略更符合桌面用户的使用习惯与心理预期，在保持品牌一致性的同时，提升了界面的专业感、秩序感与平台适配度。