交互设计

anOnion9 天前
前端·html·交互设计
构建无障碍组件之Table PatternTable(表格)是一种静态的表格结构,用于展示行列数据。本文基于 W3C WAI-ARIA Table Pattern 规范,详解如何构建无障碍的数据表格。
OpenTiny社区12 天前
前端·ai编程·交互设计
生成式 UI 藏大招!看似露营案例,实则电商集成 GenUI SDK 干货本文由云软件体验技术团队岑灌铭原创。从露营趣味案例入手,详解电商系统集成 GenUI SDK 完整实操~
anOnion14 天前
前端·html·交互设计
构建无障碍组件之Tooltip PatternTooltip(提示框,也称为 Popover、Hint、Info Bubble 或 Help Text)是一种弹出式信息组件,当元素获得键盘焦点或鼠标悬停时显示相关信息。本文基于 W3C WAI-ARIA Tooltip Pattern 规范,详解如何构建无障碍的 Tooltip 组件。
Kim.Li22 天前
人机交互·产品经理·视觉设计·交互设计·软技能·ui设计
什么是包容性设计?从跨文化、性别到种族多样性的 UX 设计实战【投稿】原创文章发布于 https://figma-file.store/blog/4494.html
anOnion23 天前
前端·html·交互设计
构建无障碍组件之Spinbutton PatternSpinbutton(旋转按钮,也称为 Number Input、Stepper、Numeric Spinner 或 Counter)是一种输入控件,用于在预定义范围内选择离散数值。本文基于 W3C WAI-ARIA Spinbutton Pattern 规范,详解如何构建无障碍的数字输入组件。
程序员海军1 个月前
aigc·设计师·交互设计
设计圈真的要变天了:ChatGPT Image 2 不只是会生图了这两天,我连续测了几轮 ChatGPT Image 2,越测越有一种很强烈的感觉:设计圈真的要变天了。
anOnion1 个月前
前端·html·交互设计
构建无障碍组件之Window Splitter PatternWindow Splitter(窗口分割器,也称为 Resizable Splitter、Pane Resizer、Split Panel 或 Divider)是一种可移动的分隔组件,用于调整两个相邻面板(pane)的相对大小。本文基于 W3C WAI-ARIA Window Splitter Pattern 规范,详解如何构建无障碍的窗口分割器组件。
sinat_333518871 个月前
交互设计·用户体验·界面设计
从用户体验视角看太极重命名软件的界面设计用户界面是软件与用户交互的桥梁,其设计优劣直接影响用户体验的好坏。 太极重命名软件在界面设计上展现了对用户体验的深度思考,通过简洁直观的设计实现了高效的人机交互。 本文将从用户体验视角对其界面设计进行深入分析。
anOnion1 个月前
前端·html·交互设计
构建无障碍组件之Meter PatternMeter(计量器)是一种图形化显示数值的组件,用于展示在特定范围内变化的数值。本文基于 W3C WAI-ARIA Meter Pattern 规范,详解如何构建无障碍的 Meter 组件。
饼干哥哥2 个月前
交互设计
这15个n8n工作流,直接干掉了90%的跨境电商营销工作废话不多说,先说结论。最近这半个月,我把团队里的营销SOP重新梳理了一遍。结果非常惊人。以前需要3个运营盯着的活,现在一套n8n工作流就在服务器上静悄悄地跑完了。
anOnion2 个月前
前端·html·交互设计
构建无障碍组件之Carousel Pattern轮播(Carousel)是一种按顺序展示一组内容项(称为幻灯片)的组件。本文基于 W3C WAI-ARIA Carousel Pattern 规范,详解如何构建无障碍的轮播组件。
anOnion2 个月前
前端·html·交互设计
构建无障碍组件之Tabs Pattern标签页(Tabs)是一种分层的内容展示组件,通过标签列表(Tab List)和对应的内容面板(Tab Panel)来组织和展示内容。本文基于 W3C WAI-ARIA Tabs Pattern 规范,详解如何构建无障碍的标签页组件。
Underwood_172 个月前
交互设计
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
独泪了无痕2 个月前
前端·http·交互设计
使用Fetch API 探索前后端数据交互在当今的 Web 开发中,前端与后端的数据交互是构建动态应用的核心。API 是连接不同软件应用的重要桥梁,允许开发者通过 HTTP 请求与服务器交互,高效调用API数据对于构建现代 Web 应用至关重要。传统的页面刷新方式已经无法满足用户对流畅体验的需求,而 Fetch API 的出现为 JavaScript 带来了全新的生命力。
anOnion2 个月前
前端·html·交互设计
构建无障碍组件之Switch Pattern开关(Switch)是一种模拟物理开关的控件,用于在两个状态(通常是"开"和"关")之间切换。在一些 UI 组件库中,它也被称为 Toggle(切换开关)。本文基于 W3C WAI-ARIA Switch Pattern 规范,详解如何构建无障碍的开关组件。
刮涂层_赢大奖2 个月前
claude·交互设计·cursor
不会 Figma 也能出设计稿:我开源了一个让 AI 直接在 Figma 里画 UI 的工具市面上的 Figma MCP 都是「读设计稿 → 生成代码」。我做了一个反方向的:「AI → 直接在 Figma 画布上画设计」。
anOnion3 个月前
前端·html·交互设计
构建无障碍组件之Radio group pattern单选按钮(Radio Button)是表单中用于从一组互斥选项中选择单个项目的控件。本文基于 W3C WAI-ARIA Radio Pattern 规范,详解如何构建无障碍的单选按钮组件。
anOnion3 个月前
前端·html·交互设计
构建无障碍组件之Checkbox pattern复选框(Checkbox)是表单中最常见的交互元素之一,支持双状态(选中/未选中)和三状态(选中/未选中/部分选中)两种类型。本文基于 W3C WAI-ARIA Checkbox Pattern 规范,详解如何构建无障碍的复选框组件。
anOnion3 个月前
html·设计·交互设计
构建无障碍组件之Accordion PatternAccordion(手风琴)是一种常见的交互组件,由垂直堆叠的可交互标题组成,每个标题包含一个内容部分的标题、摘要或缩略图。本文基于 W3C WAI-ARIA Accordion Pattern 规范,详解如何构建无障碍的 Accordion 组件。
anOnion3 个月前
前端·html·交互设计
构建无障碍组件之Disclosure Pattern展开收起(Disclosure)是一种常见的交互组件,也被称为 Collapse(折叠),允许内容在折叠(隐藏)和展开(可见)状态之间切换。本文基于 W3C WAI-ARIA Disclosure Pattern 规范,详解如何构建无障碍的展开收起组件。