首页 › AI Coding › 前端交互效果术语 › Part 2：复杂 Web App

Part 2：复杂 Web App

第九章 Search 搜索交互​

​

#rsOvFKLbSEEF text { white-space: pre; }#rsOvFKLbSEEF .fb0 { stroke: var(--N900-FG, 0.15); }#rsOvFKLbSEEF .fb0 {stroke: rgba(31,35,41, 0.15)}#rsOvFKLbSEEF .fx0 { stroke-miterlimit: 10; }#rsOvFKLbSEEF .fx0 {stroke-miterlimit: 10}#rsOvFKLbSEEF .fa1 { fill: rgb(187, 191, 196); }#rsOvFKLbSEEF .fa1 {fill: rgb(187, 191, 196)}#rsOvFKLbSEEF .fx1 { font: 400 12px MonospacedNumber, LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, "PingFang SC", "Microsoft Yahei", Arial, "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }#rsOvFKLbSEEF .fx1 {font-style: normal}#rsOvFKLbSEEF .fx2 { text-anchor: middle; }#rsOvFKLbSEEF .fx2 {text-anchor: middle}#rsOvFKLbSEEF .fx3 { dominant-baseline: central; }#rsOvFKLbSEEF .fx3 {dominant-baseline: central}#rsOvFKLbSEEF .fx4 { stroke: none; }#rsOvFKLbSEEF .fx4 {stroke: none}#rsOvFKLbSEEF .fc0 { fill: var(--text-caption); }#rsOvFKLbSEEF .fc0 {fill: #646a73}#rsOvFKLbSEEF .fa2 { fill: var(--text-link-disabled); }#rsOvFKLbSEEF .fa2 {fill: rgb(187, 191, 196)}#rsOvFKLbSEEF .fa3 { fill: rgb(255, 240, 245); }#rsOvFKLbSEEF .fa3 {fill: rgb(255, 240, 245)}#rsOvFKLbSEEF .fx5 { font: 700 14px MonospacedNumber, LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, "PingFang SC", "Microsoft Yahei", Arial, "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }#rsOvFKLbSEEF .fx5 {font-style: normal}#rsOvFKLbSEEF .fx6 { text-anchor: start; }#rsOvFKLbSEEF .fx6 {text-anchor: start}#rsOvFKLbSEEF .fx7 { dominant-baseline: alphabetic; }#rsOvFKLbSEEF .fx7 {dominant-baseline: alphabetic}#rsOvFKLbSEEF .fc1 { fill: rgb(233, 30, 99); }#rsOvFKLbSEEF .fc1 {fill: rgb(233, 30, 99)}#rsOvFKLbSEEF .fx8 { font: 400 14px MonospacedNumber, LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, "PingFang SC", "Microsoft Yahei", Arial, "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }#rsOvFKLbSEEF .fx8 {font-style: normal}#rsOvFKLbSEEF .fc2 { fill: rgb(51, 51, 51); }#rsOvFKLbSEEF .fc2 {fill: rgb(51, 51, 51)}#rsOvFKLbSEEF .fb1 { fill: var(--N900-FG, 0.15); }#rsOvFKLbSEEF .fb1 {fill: rgba(31,35,41, 0.15)}#rsOvFKLbSEEF .fb2 { fill: rgb(240, 240, 240); }#rsOvFKLbSEEF .fb2 {fill: rgb(240, 240, 240)}#rsOvFKLbSEEF .fa4 { fill: var(--bg-body); }#rsOvFKLbSEEF .fa4 {fill: #fff}ABCD123456789术语效果说明AI 描述话术场景Instant SearchSearch SuggestionRecent SearchSearch HighlightFaceted SearchSearch EmptySearch LoadingKeyboard Search即时搜索搜索建议最近搜索关键词高亮分面搜索无搜索结果搜索加载键盘选择用户停止输入 300ms 后自动搜索。输入时展示可能的查询关键词。Focus 搜索框时展示历史查询。搜索结果中强调匹配文本。支持多个条件组合筛选搜索结果。无结果时显示原因和调整建议。搜索过程中保持输入框可编辑并显示加载。搜索候选项支持上下键和 Enter。SaaS搜索框内容平台文档电商搜索AI 搜索Command Menu

​

第十章 Filter 筛选交互​

​

#IUOvylZNiaIv text { white-space: pre; }#IUOvylZNiaIv .fb0 { stroke: var(--N900-FG, 0.15); }#IUOvylZNiaIv .fb0 {stroke: rgba(31,35,41, 0.15)}#IUOvylZNiaIv .fx0 { stroke-miterlimit: 10; }#IUOvylZNiaIv .fx0 {stroke-miterlimit: 10}#IUOvylZNiaIv .fa1 { fill: rgb(187, 191, 196); }#IUOvylZNiaIv .fa1 {fill: rgb(187, 191, 196)}#IUOvylZNiaIv .fx1 { font: 400 12px MonospacedNumber, LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, "PingFang SC", "Microsoft Yahei", Arial, "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }#IUOvylZNiaIv .fx1 {font-style: normal}#IUOvylZNiaIv .fx2 { text-anchor: middle; }#IUOvylZNiaIv .fx2 {text-anchor: middle}#IUOvylZNiaIv .fx3 { dominant-baseline: central; }#IUOvylZNiaIv .fx3 {dominant-baseline: central}#IUOvylZNiaIv .fx4 { stroke: none; }#IUOvylZNiaIv .fx4 {stroke: none}#IUOvylZNiaIv .fc0 { fill: var(--text-caption); }#IUOvylZNiaIv .fc0 {fill: #646a73}#IUOvylZNiaIv .fa2 { fill: var(--text-link-disabled); }#IUOvylZNiaIv .fa2 {fill: rgb(187, 191, 196)}#IUOvylZNiaIv .fa3 { fill: rgb(255, 240, 245); }#IUOvylZNiaIv .fa3 {fill: rgb(255, 240, 245)}#IUOvylZNiaIv .fx5 { font: 700 14px MonospacedNumber, LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, "PingFang SC", "Microsoft Yahei", Arial, "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }#IUOvylZNiaIv .fx5 {font-style: normal}#IUOvylZNiaIv .fx6 { text-anchor: start; }#IUOvylZNiaIv .fx6 {text-anchor: start}#IUOvylZNiaIv .fx7 { dominant-baseline: alphabetic; }#IUOvylZNiaIv .fx7 {dominant-baseline: alphabetic}#IUOvylZNiaIv .fc1 { fill: rgb(233, 30, 99); }#IUOvylZNiaIv .fc1 {fill: rgb(233, 30, 99)}#IUOvylZNiaIv .fx8 { font: 400 14px MonospacedNumber, LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, "PingFang SC", "Microsoft Yahei", Arial, "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }#IUOvylZNiaIv .fx8 {font-style: normal}#IUOvylZNiaIv .fc2 { fill: rgb(51, 51, 51); }#IUOvylZNiaIv .fc2 {fill: rgb(51, 51, 51)}#IUOvylZNiaIv .fb1 { fill: var(--N900-FG, 0.15); }#IUOvylZNiaIv .fb1 {fill: rgba(31,35,41, 0.15)}#IUOvylZNiaIv .fb2 { fill: rgb(240, 240, 240); }#IUOvylZNiaIv .fb2 {fill: rgb(240, 240, 240)}#IUOvylZNiaIv .fa4 { fill: var(--bg-body); }#IUOvylZNiaIv .fa4 {fill: #fff}ABCD12345678术语效果说明AI 描述话术场景Filter ChipMulti FilterFilter DrawerClear FiltersFilter CountLive FilterApply Filter筛选标签多条件筛选筛选抽屉清空筛选筛选数量即时筛选确认筛选已启用条件显示为 Chip，可直接点击 × 删除。支持同时应用多个筛选条件。移动端点击筛选后从底部或右侧打开面板。存在筛选条件时提供一键清空。筛选按钮旁显示当前启用条件数量。用户调整筛选项后结果立即刷新。多个条件修改完成后点击 Apply 统一提交。商品后台移动端列表搜索Dashboard电商

​

第十七章 Drag & Drop 拖拽​

​

#OeFqDPFWZkof text { white-space: pre; }#OeFqDPFWZkof .fb0 { stroke: var(--N900-FG, 0.15); }#OeFqDPFWZkof .fb0 {stroke: rgba(31,35,41, 0.15)}#OeFqDPFWZkof .fx0 { stroke-miterlimit: 10; }#OeFqDPFWZkof .fx0 {stroke-miterlimit: 10}#OeFqDPFWZkof .fa1 { fill: rgb(187, 191, 196); }#OeFqDPFWZkof .fa1 {fill: rgb(187, 191, 196)}#OeFqDPFWZkof .fx1 { font: 400 12px MonospacedNumber, LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, "PingFang SC", "Microsoft Yahei", Arial, "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }#OeFqDPFWZkof .fx1 {font-style: normal}#OeFqDPFWZkof .fx2 { text-anchor: middle; }#OeFqDPFWZkof .fx2 {text-anchor: middle}#OeFqDPFWZkof .fx3 { dominant-baseline: central; }#OeFqDPFWZkof .fx3 {dominant-baseline: central}#OeFqDPFWZkof .fx4 { stroke: none; }#OeFqDPFWZkof .fx4 {stroke: none}#OeFqDPFWZkof .fc0 { fill: var(--text-caption); }#OeFqDPFWZkof .fc0 {fill: #646a73}#OeFqDPFWZkof .fa2 { fill: var(--text-link-disabled); }#OeFqDPFWZkof .fa2 {fill: rgb(187, 191, 196)}#OeFqDPFWZkof .fa3 { fill: rgb(255, 240, 245); }#OeFqDPFWZkof .fa3 {fill: rgb(255, 240, 245)}#OeFqDPFWZkof .fx5 { font: 700 14px MonospacedNumber, LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, "PingFang SC", "Microsoft Yahei", Arial, "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }#OeFqDPFWZkof .fx5 {font-style: normal}#OeFqDPFWZkof .fx6 { text-anchor: start; }#OeFqDPFWZkof .fx6 {text-anchor: start}#OeFqDPFWZkof .fx7 { dominant-baseline: alphabetic; }#OeFqDPFWZkof .fx7 {dominant-baseline: alphabetic}#OeFqDPFWZkof .fc1 { fill: rgb(233, 30, 99); }#OeFqDPFWZkof .fc1 {fill: rgb(233, 30, 99)}#OeFqDPFWZkof .fx8 { font: 400 14px MonospacedNumber, LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, "PingFang SC", "Microsoft Yahei", Arial, "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }#OeFqDPFWZkof .fx8 {font-style: normal}#OeFqDPFWZkof .fc2 { fill: rgb(51, 51, 51); }#OeFqDPFWZkof .fc2 {fill: rgb(51, 51, 51)}#OeFqDPFWZkof .fb1 { fill: var(--N900-FG, 0.15); }#OeFqDPFWZkof .fb1 {fill: rgba(31,35,41, 0.15)}#OeFqDPFWZkof .fb2 { fill: rgb(240, 240, 240); }#OeFqDPFWZkof .fb2 {fill: rgb(240, 240, 240)}#OeFqDPFWZkof .fa4 { fill: var(--bg-body); }#OeFqDPFWZkof .fa4 {fill: #fff}ABCD123456789术语效果说明AI 描述话术场景Drag HandleDrag PreviewDrop ZonePlaceholderSortableDrag Between ListsSnapInvalid Drop拖动把手拖动预览放置区域占位符拖动排序跨列表拖动自动吸附禁止放置仅通过指定 Handle 执行拖动。拖动时显示半透明浮起副本。可放置区域在 Drag Over 时高亮。被拖动项目原位置显示占位区域。松手后保存新的顺序。支持将卡片拖到另一栏目。元素接近参考线时自动吸附。无效位置显示禁止样式并不执行操作。列表Kanban上传SortableTodoKanbanCanvasBuilder

​

第十八章 Resize 调整尺寸​

​

​

第二十二章 File Upload 文件上传​

​

​

第二十三章 File Manager 文件管理​

​

​

第四十七章 Tree 树形结构交互​

​

​

第四十八章 Selection 选择系统​

这是专业工具类产品非常重要的一层。​

​

​

第四十九章 Split View / 多面板工作区​

非常适合 Coding、AI Workspace、数据产品。​

​

​

第五十章 Command / 操作命令系统​

​

​

第五十一章 Date / Time 时间交互​

​

​

第五十二章 Notification 通知系统​

​

​

​

​

第五十三章 Settings 设置中心​

第五十四章 Import / Export 数据进出​

​

​

第五十七章 Browser / PWA 系统级交互​

​

​

第七十章 History / 页面历史状态​

​

​

第七十一章 Breadcrumb 高级路径交互​

​

​

第七十二章 Data Density / 信息密度控制​

​

​

第七十三章 Bulk Operations / 批量操作​

​

​

第七十六章 Approval / 审批与确认流程​

​

​

第七十七章 Compare / 比较模式​

​

​

第七十八章 Versioning / 版本管理​

​

​

第七十九章 Comment / 评论批注​

​

​

第八十三章 Input Method / 多输入方式​

​

​

第八十四章 Clipboard / 剪贴板交互​

​

​

​