交互设计

Gsap新手入门（一）官网原文：The GreenSock Animation Platform (GSAP) is an industry-celebrated suite of tools used on over 11 million sites, including a ton of award‑winning ones! You can use GSAP to animate pretty much anything JavaScript can touch, in any framework. Whether yo

独泪了无痕

使用Fetch API 探索前后端数据交互在当今的 Web 开发中，前端与后端的数据交互是构建动态应用的核心。API 是连接不同软件应用的重要桥梁，允许开发者通过 HTTP 请求与服务器交互，高效调用API数据对于构建现代 Web 应用至关重要。传统的页面刷新方式已经无法满足用户对流畅体验的需求，而 Fetch API 的出现为 JavaScript 带来了全新的生命力。

构建无障碍组件之Switch Pattern开关（Switch）是一种模拟物理开关的控件，用于在两个状态（通常是"开"和"关"）之间切换。在一些 UI 组件库中，它也被称为 Toggle（切换开关）。本文基于 W3C WAI-ARIA Switch Pattern 规范，详解如何构建无障碍的开关组件。

刮涂层_赢大奖

不会 Figma 也能出设计稿：我开源了一个让 AI 直接在 Figma 里画 UI 的工具市面上的 Figma MCP 都是「读设计稿 → 生成代码」。我做了一个反方向的：「AI → 直接在 Figma 画布上画设计」。

构建无障碍组件之Radio group pattern单选按钮（Radio Button）是表单中用于从一组互斥选项中选择单个项目的控件。本文基于 W3C WAI-ARIA Radio Pattern 规范，详解如何构建无障碍的单选按钮组件。

构建无障碍组件之Checkbox pattern复选框（Checkbox）是表单中最常见的交互元素之一，支持双状态（选中/未选中）和三状态（选中/未选中/部分选中）两种类型。本文基于 W3C WAI-ARIA Checkbox Pattern 规范，详解如何构建无障碍的复选框组件。

构建无障碍组件之Accordion PatternAccordion（手风琴）是一种常见的交互组件，由垂直堆叠的可交互标题组成，每个标题包含一个内容部分的标题、摘要或缩略图。本文基于 W3C WAI-ARIA Accordion Pattern 规范，详解如何构建无障碍的 Accordion 组件。

构建无障碍组件之Disclosure Pattern展开收起（Disclosure）是一种常见的交互组件，也被称为 Collapse（折叠），允许内容在折叠（隐藏）和展开（可见）状态之间切换。本文基于 W3C WAI-ARIA Disclosure Pattern 规范，详解如何构建无障碍的展开收起组件。

构建无障碍组件之Dialog Pattern模态对话框是 Web 应用中常见的交互组件，用于在不离开当前页面的情况下展示重要信息或获取用户输入。本文基于 W3C WAI-ARIA Dialog Pattern 规范，详解如何构建无障碍的模态对话框。

构建无障碍组件之Alert Dialog PatternAlert Dialog 是 Web 无障碍交互的重要组件。本文详解其 WAI-ARIA 实现要点，涵盖角色声明、键盘交互、最佳实践，助你打造中断式对话框，让关键信息触达每位用户。

初级代码游戏

软件界面设计培训初级代码游戏的专栏介绍与文章目录-CSDN博客我的github：codetoys，所有代码都将会位于ctfc库中。已经放入库中我会指出在库中的位置。

初级代码游戏

云存储的删除设计最近看到有人抱怨云存储的删除文件。一个是Ondrive同步完成后删除了本地文件，一个是iCloud“全部删除”删除了所有数据而且无法找回。

用心写好一个登录页：代码、体验与细节的平衡今天，我们将使用 React + Vite + Tailwind CSS + Lucide React，快速搭建一个简洁、响应式且注重细节的登录页面，并顺手拆解几个提升用户体验的小技巧。

我用AI写了个小程序，却被人说没有底线…今天想和大家分享一下我用AI开发的一款微信小程序——【破冰神器】。作为一个喜欢和朋友聚会但又经常面临“冷场”尴尬的i人，我一直在寻找一款能够活跃聚会氛围的小程序。但市面上的应用要么做工粗糙功能单一，要么一堆广告没法玩。于是，我决定自己动手（其实只动了嘴，是AI动的手），开发一款好用、功能丰富的“破冰神器”。

Flutter 开发的极简风格聊天界面项目中使用到的一些第三方组件Podfile 文件Info.plist 中增加对权限的描述动画的Key需要传递到第二个页面。

Agent时代下，ToB前端的UI和交互会往哪走？最近在负责 Agent 项目前端部分的落地，深感 Agent + ToB 不仅仅是功能的叠加，更是一个需要前端开发、交互设计与业务逻辑深度融合的全新领域。因此，我想通过这篇文章梳理一下架构设计层面的思考。

使用motion实现小宇宙贴纸墙效果该文章的交互效果和完整代码可以在我的博客查看小宇宙个人页面有一个贴纸墙的小功能，用来展示自己获得的一些成就，这个贴纸墙可以自己来调整贴纸位置，感觉是一个很好的功能，于是用motion复刻了一下

使用motion实现小宇宙节目广场的效果本文可以在我的博客查看交互效果和完整代码小宇宙app节目广场有一个效果，感觉特别好，想用motion复刻一下：

PPT太丑？用InDesign制作电影级的交互式在线演示文档本文旨在解决传统演示软件（如PowerPoint、Keynote）在制作商业提案、设计报告时，普遍存在的模板化严重、视觉表现力不足、动态效果廉价的核心痛点。我们将介绍一套常被设计师们“误解”或“忽略”的“降维打击”工作流，核心是利用印刷排版软件 Adobe InDesign 强大的版式控制、动画与交互功能，来创建电影级的动态演示文稿，并通过其在线发布 (Publish Online) 功能，一键生成可在任何浏览器中流畅访问的网页版交互式文档，从而极大地提升提案的专业度与视觉冲击力。

产品研究员

教你3个原型设计的高级交互用法，0基础产品经理适用！高保真交互原型在很多新人产品经理眼里，似乎是一个“高阶玩法”。即便是经验丰富的PM，或许也未必真正掌握高级交互功能的使用方法。这些年，产品经理们似乎逐渐远离了交互设计，普遍认为高级交互**“功能难用”“不好实现”**。