UI设计 / 交互体验

作品集
UI

用设计讲故事,用交互传递情感

角色

独立设计师 / 视觉叙事 / 交互体验

时间

2025

工具

Figma / VS Code / GSAP

类型

个人品牌 / 视觉系统 / 前端开发

这不只是一个作品集——它是我对设计本质的一次开放性思考。 在新闻与媒体创作的背景下,我始终相信好的设计不只是好看—— 它应该讲故事传递情感解决问题。 这个网站本身就是我的设计宣言:每一个像素、每一帧动画、每一处留白, 都在回答同一个问题——设计如何让人感受到温度?

设计哲学

叙事与体验
每个项目都是一个故事。从《沧澜引》的东方玄幻到《歌拉丝歌》的品牌传播,我用视觉语言讲故事,让设计成为叙事的载体。视觉叙事不是装饰,而是信息传递的形式。
克制即力量
深色画布、留白、单色强调——我追求的不是信息的密度,而是注意力的精准引导。在信息过载的时代,克制是最稀缺的设计能力。
交互即情感
鼠标跟随的星星、悬停时的色彩变化、滚动淡入的节奏——微交互不是装饰,而是设计师与用户之间无声的对话。每一次触碰都是一次情感连接。

在设计这个作品集时,我问自己:如果作品集本身就是一个作品呢? 于是我决定让它成为我设计理念的最佳注脚—— 暗色基调代表专注与沉浸,悬停变色象征探索与发现, 星星足迹隐喻创造力的轨迹。每一个交互细节都不是炫技, 而是对"设计如何传递情感"这个问题的真诚回答。

视觉系统

整套视觉系统围绕三个核心构建:字体系统(EB Garamond + Inter + JetBrains Mono) 传递古典与现代的融合——衬线体承载叙事的厚重感,无衬线体保障信息的清晰度, 等宽体标注技术语境;暗色主题配合项目专属色彩, 实现沉浸式浏览体验;响应式布局确保从桌面到移动端的一致品质

5
精选作品
4
设计领域
100%
响应式
0
框架依赖

技术实现

这个作品集没有使用任何前端框架——纯手写HTML、CSS、JavaScript。 每一个像素的位置、每一帧动画的节奏,都精确地表达创作的设计意图。 就像手工制表师对手表的掌控——代码即设计工具, 精确性与美感在此刻被决定。

核心交互特性包括:鼠标跟随粒子系统(Canvas 2D 实现的彩色星星轨迹), 悬停全局变色(CSS自定义属性 + JavaScript联动), 滚动驱动的渐显动画(API), 以及名字印花背景(CSS mask-image 实现的鼠标区域揭示效果)。每个技术决策都服务于设计意图——Canvas粒子特效赋予了鼠标移动以诗意的视觉反馈; 悬停变色不是为了花哨,而是让每次探索都成为独特的视觉体验。 技术是手段,情感是目的。

设计反思

做这个作品集的过程,也是一次自我审视的过程。 当你试图向世界展示"我是谁"的时候,必须先回答"我相信什么"。 我相信设计是连接——连接技术与人文、功能与美学、创作者与受众。 这个作品集就是这种信念的具象化表达。

未来,这个作品集会随着我的成长持续进化。 但它的核心不会变——用设计讲故事,用交互传递情感,用克制表达力量。 这不仅是一个设计师的自我介绍,更是一份关于设计信仰的宣言。

UI设计 作品集 交互设计 视觉系统 前端开发 设计哲学