From 8d021b6dc7f71dc4a8e2d6eb7c0a0ddb2753df7a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=F0=9F=8F=8E=EF=B8=8F=20Imer?= <98121322+YumoImer@users.noreply.github.com> Date: Thu, 21 Nov 2024 17:44:16 +0800 Subject: [PATCH] docs: revamp library website (#166) * feat: default theme use dark. * chore: update logo * feat: Logo style adjust. * docs: update * chore: add devDependencies lottie-web for site * feat: site header * feat: site main banner * feat: site main banner * fix: rtl style * chore: update bun.lockb * feat: design banner * refactor: add Container for homepage * feat: design guide * feat: Introduction * chore: delete unuse file * chore: delete unuse file * feat: Components Introduction * feat: Scene Introduction * fix: lint * chore: update bun.lockb and update test * fix: site build * docs: adjust the cn desc * docs: mod font-family * refactor: use svg instead png in lottie.json * refactor: useLottie to manage lottie lazyload * refactor: index load * refactor: css * refactor: Conversations Style * feat: playground * refactor: index page always use dark theme * refactor: fix style and replace img * fix: index page theme * feat: design spec * feat: design spec * refactor: navigate * chore: remove code about antd-with-locales issues #107 * feat: design freamwork * feat: design banner lottie * refactor: dasign guide lottie * chore: delete docs * docs: update readme --- .dumi/hooks/useLottie.ts | 80 +++ .dumi/hooks/useScrollY.ts | 40 ++ .dumi/pages/index/common/Container.tsx | 58 ++ .../index/common/CustomizationProvider.tsx | 198 +++++++ .../index/common/CustomizationSender.tsx | 47 ++ .dumi/pages/index/common/Introduction.tsx | 165 ++++++ .../index/components/BannerRecommends.tsx | 181 ------- .../CompIntroduction/Customization.tsx | 170 ++++++ .../components/CompIntroduction/index.tsx | 193 +++++++ .dumi/pages/index/components/DesignBanner.tsx | 67 +++ .../index/components/DesignFramework.tsx | 212 ++++---- .dumi/pages/index/components/DesignGuide.tsx | 366 +++++++++++++ .dumi/pages/index/components/Group.tsx | 83 --- .../pages/index/components/GroupMaskLayer.tsx | 36 -- .dumi/pages/index/components/MainBanner.tsx | 312 +++++++++++ .../PreviewBanner/ComponentsBlock.tsx | 217 -------- .../index/components/PreviewBanner/Tilt.tsx | 34 -- .../index/components/PreviewBanner/index.tsx | 182 ------- .../SceneIntroduction/Assistant.tsx | 224 ++++++++ .../SceneIntroduction/Independent.tsx | 268 ++++++++++ .../components/SceneIntroduction/Nest.tsx | 51 ++ .../components/SceneIntroduction/index.tsx | 202 +++++++ .dumi/pages/index/components/SiteContext.ts | 10 +- .dumi/pages/index/components/util.ts | 121 ----- .dumi/pages/index/index.tsx | 109 ++-- .dumi/pages/theme-editor/index.tsx | 12 +- .dumi/theme/SiteThemeProvider.tsx | 15 +- .../theme/builtins/ResourceArticles/index.tsx | 159 ------ .dumi/theme/common/Loading.tsx | 2 +- .dumi/theme/common/ThemeSwitch/index.tsx | 4 +- .dumi/theme/layouts/GlobalLayout.tsx | 33 +- .dumi/theme/layouts/IndexLayout/index.tsx | 4 +- .dumi/theme/layouts/SidebarLayout/index.tsx | 4 +- .dumi/theme/slots/Content/index.tsx | 5 +- .dumi/theme/slots/Header/Actions.tsx | 159 ++++++ .dumi/theme/slots/Header/Logo.tsx | 41 +- .dumi/theme/slots/Header/Navigation.tsx | 281 +++++----- .dumi/theme/slots/Header/SwitchBtn.tsx | 9 +- .dumi/theme/slots/Header/index.tsx | 501 +++++------------- .dumi/theme/slots/Header/interface.ts | 8 + .dumi/theme/slots/Sidebar/index.tsx | 4 +- .dumi/theme/slots/SiteContext.ts | 2 - .dumi/theme/utils.ts | 2 +- .dumirc.ts | 2 +- README-zh_CN.md | 169 +++++- README.md | 157 +++++- bun.lockb | Bin 1443463 -> 1445098 bytes components/conversations/style/index.ts | 1 + components/index.ts | 16 +- .../__snapshots__/demo-extend.test.ts.snap | 16 +- .../__snapshots__/demo-extend.test.ts.snap | 60 ++- .../__tests__/__snapshots__/demo.test.ts.snap | 58 +- docs/playground/independent.en-US.md | 9 + docs/playground/independent.tsx | 358 +++++++++++++ docs/playground/independent.zh-CN.md | 8 + docs/react/common-props.en-US.md | 12 - docs/react/common-props.zh-CN.md | 12 - docs/react/css-variables.en-US.md | 41 -- docs/react/css-variables.zh-CN.md | 41 -- docs/react/introduce.en-US.md | 172 +++--- docs/react/introduce.zh-CN.md | 175 +++--- docs/react/recommendation.en-US.md | 76 --- docs/react/recommendation.zh-CN.md | 78 --- docs/spec/authentic-consistent.en-US.md | 65 +++ docs/spec/authentic-consistent.zh-CN.md | 65 +++ docs/spec/confirm-generation-process.en-US.md | 58 ++ docs/spec/confirm-generation-process.zh-CN.md | 58 ++ docs/spec/confirm.en-US.md | 87 +++ docs/spec/confirm.zh-CN.md | 87 +++ docs/spec/conversation-design.en-US.md | 124 +++++ docs/spec/conversation-design.zh-CN.md | 124 +++++ docs/spec/define-intention-type.en-US.md | 41 ++ docs/spec/define-intention-type.zh-CN.md | 41 ++ docs/spec/end.en-US.md | 79 +++ docs/spec/end.zh-CN.md | 79 +++ docs/spec/error.en-US.md | 118 +++++ docs/spec/error.zh-CN.md | 118 +++++ docs/spec/expression-user-input.en-US.md | 115 ++++ docs/spec/expression-user-input.zh-CN.md | 115 ++++ docs/spec/expression-user-send.en-US.md | 95 ++++ docs/spec/expression-user-send.zh-CN.md | 95 ++++ .../spec/feedback-result-application.en-US.md | 57 ++ .../spec/feedback-result-application.zh-CN.md | 57 ++ docs/spec/feedback-result-display.en-US.md | 63 +++ docs/spec/feedback-result-display.zh-CN.md | 63 +++ docs/spec/follow-up.en-US.md | 60 +++ docs/spec/follow-up.zh-CN.md | 60 +++ docs/spec/guide-intention-expression.en-US.md | 33 ++ docs/spec/guide-intention-expression.zh-CN.md | 33 ++ docs/spec/hint.en-US.md | 51 ++ docs/spec/hint.zh-CN.md | 51 ++ docs/spec/human-touch.en-US.md | 75 +++ docs/spec/human-touch.zh-CN.md | 75 +++ docs/spec/hybrid-ui-design.en-US.md | 58 ++ docs/spec/hybrid-ui-design.zh-CN.md | 58 ++ docs/spec/intention-introduce.en-US.md | 41 ++ docs/spec/intention-introduce.zh-CN.md | 41 ++ docs/spec/introduce.en-US.md | 134 +++++ docs/spec/introduce.zh-CN.md | 134 +++++ .../provide-intention-expectation.en-US.md | 16 + .../provide-intention-expectation.zh-CN.md | 16 + docs/spec/role-design.en-US.md | 73 +++ docs/spec/role-design.zh-CN.md | 73 +++ docs/spec/smooth-natural.en-US.md | 57 ++ docs/spec/smooth-natural.zh-CN.md | 57 ++ docs/spec/start.en-US.md | 24 + docs/spec/start.zh-CN.md | 24 + docs/spec/wake-up-ai-icon.en-US.md | 93 ++++ docs/spec/wake-up-ai-icon.zh-CN.md | 93 ++++ docs/spec/wake-up-welcome-message.en-US.md | 79 +++ docs/spec/wake-up-welcome-message.zh-CN.md | 79 +++ index-with-locales.js | 12 - package.json | 7 +- tests/dekko/dist.test.js | 10 +- webpack.config.js | 10 - 115 files changed, 7483 insertions(+), 2280 deletions(-) create mode 100644 .dumi/hooks/useLottie.ts create mode 100644 .dumi/hooks/useScrollY.ts create mode 100644 .dumi/pages/index/common/Container.tsx create mode 100644 .dumi/pages/index/common/CustomizationProvider.tsx create mode 100644 .dumi/pages/index/common/CustomizationSender.tsx create mode 100644 .dumi/pages/index/common/Introduction.tsx delete mode 100644 .dumi/pages/index/components/BannerRecommends.tsx create mode 100644 .dumi/pages/index/components/CompIntroduction/Customization.tsx create mode 100644 .dumi/pages/index/components/CompIntroduction/index.tsx create mode 100644 .dumi/pages/index/components/DesignBanner.tsx create mode 100644 .dumi/pages/index/components/DesignGuide.tsx delete mode 100644 .dumi/pages/index/components/Group.tsx delete mode 100644 .dumi/pages/index/components/GroupMaskLayer.tsx create mode 100644 .dumi/pages/index/components/MainBanner.tsx delete mode 100644 .dumi/pages/index/components/PreviewBanner/ComponentsBlock.tsx delete mode 100644 .dumi/pages/index/components/PreviewBanner/Tilt.tsx delete mode 100644 .dumi/pages/index/components/PreviewBanner/index.tsx create mode 100644 .dumi/pages/index/components/SceneIntroduction/Assistant.tsx create mode 100644 .dumi/pages/index/components/SceneIntroduction/Independent.tsx create mode 100644 .dumi/pages/index/components/SceneIntroduction/Nest.tsx create mode 100644 .dumi/pages/index/components/SceneIntroduction/index.tsx delete mode 100644 .dumi/pages/index/components/util.ts delete mode 100644 .dumi/theme/builtins/ResourceArticles/index.tsx create mode 100644 .dumi/theme/slots/Header/Actions.tsx create mode 100644 docs/playground/independent.en-US.md create mode 100644 docs/playground/independent.tsx create mode 100644 docs/playground/independent.zh-CN.md delete mode 100644 docs/react/common-props.en-US.md delete mode 100644 docs/react/common-props.zh-CN.md delete mode 100644 docs/react/css-variables.en-US.md delete mode 100644 docs/react/css-variables.zh-CN.md delete mode 100644 docs/react/recommendation.en-US.md delete mode 100644 docs/react/recommendation.zh-CN.md create mode 100644 docs/spec/authentic-consistent.en-US.md create mode 100644 docs/spec/authentic-consistent.zh-CN.md create mode 100644 docs/spec/confirm-generation-process.en-US.md create mode 100644 docs/spec/confirm-generation-process.zh-CN.md create mode 100644 docs/spec/confirm.en-US.md create mode 100644 docs/spec/confirm.zh-CN.md create mode 100644 docs/spec/conversation-design.en-US.md create mode 100644 docs/spec/conversation-design.zh-CN.md create mode 100644 docs/spec/define-intention-type.en-US.md create mode 100644 docs/spec/define-intention-type.zh-CN.md create mode 100644 docs/spec/end.en-US.md create mode 100644 docs/spec/end.zh-CN.md create mode 100644 docs/spec/error.en-US.md create mode 100644 docs/spec/error.zh-CN.md create mode 100644 docs/spec/expression-user-input.en-US.md create mode 100644 docs/spec/expression-user-input.zh-CN.md create mode 100644 docs/spec/expression-user-send.en-US.md create mode 100644 docs/spec/expression-user-send.zh-CN.md create mode 100644 docs/spec/feedback-result-application.en-US.md create mode 100644 docs/spec/feedback-result-application.zh-CN.md create mode 100644 docs/spec/feedback-result-display.en-US.md create mode 100644 docs/spec/feedback-result-display.zh-CN.md create mode 100644 docs/spec/follow-up.en-US.md create mode 100644 docs/spec/follow-up.zh-CN.md create mode 100644 docs/spec/guide-intention-expression.en-US.md create mode 100644 docs/spec/guide-intention-expression.zh-CN.md create mode 100644 docs/spec/hint.en-US.md create mode 100644 docs/spec/hint.zh-CN.md create mode 100644 docs/spec/human-touch.en-US.md create mode 100644 docs/spec/human-touch.zh-CN.md create mode 100644 docs/spec/hybrid-ui-design.en-US.md create mode 100644 docs/spec/hybrid-ui-design.zh-CN.md create mode 100644 docs/spec/intention-introduce.en-US.md create mode 100644 docs/spec/intention-introduce.zh-CN.md create mode 100644 docs/spec/introduce.en-US.md create mode 100644 docs/spec/introduce.zh-CN.md create mode 100644 docs/spec/provide-intention-expectation.en-US.md create mode 100644 docs/spec/provide-intention-expectation.zh-CN.md create mode 100644 docs/spec/role-design.en-US.md create mode 100644 docs/spec/role-design.zh-CN.md create mode 100644 docs/spec/smooth-natural.en-US.md create mode 100644 docs/spec/smooth-natural.zh-CN.md create mode 100644 docs/spec/start.en-US.md create mode 100644 docs/spec/start.zh-CN.md create mode 100644 docs/spec/wake-up-ai-icon.en-US.md create mode 100644 docs/spec/wake-up-ai-icon.zh-CN.md create mode 100644 docs/spec/wake-up-welcome-message.en-US.md create mode 100644 docs/spec/wake-up-welcome-message.zh-CN.md delete mode 100644 index-with-locales.js diff --git a/.dumi/hooks/useLottie.ts b/.dumi/hooks/useLottie.ts new file mode 100644 index 00000000..93e4832e --- /dev/null +++ b/.dumi/hooks/useLottie.ts @@ -0,0 +1,80 @@ +import lottie, { type AnimationConfig, type AnimationItem } from 'lottie-web'; +import React from 'react'; + +interface UseLottieOptions extends Omit { + renderer?: 'svg' | 'canvas' | 'html'; + lazyLoad?: boolean; + disabled?: boolean; + rootMargin?: string; + path?: string; +} + +const useLottie = (options: UseLottieOptions) => { + const { lazyLoad = true, rootMargin = '200px', disabled = false, ...lottieOptions } = options; + const stableLottieOptions = React.useMemo(() => lottieOptions, []); + + const containerRef = React.useRef(null); + const [isIntersected, setIsIntersected] = React.useState(!lazyLoad); + const [animationInstance, setAnimationInstance] = React.useState(null); + + React.useEffect(() => { + if (disabled) return; + + let animation: AnimationItem | undefined; + + if (!animationInstance) { + if (!lazyLoad || isIntersected) { + if (containerRef.current) { + animation = lottie.loadAnimation({ + container: containerRef.current, + ...stableLottieOptions, + }); + + setAnimationInstance(animation); + } + } + } else { + return () => { + if (animation) { + animation.destroy(); + setAnimationInstance(null); + } + }; + } + }, [isIntersected, lazyLoad, stableLottieOptions, animationInstance, disabled]); + + React.useEffect(() => { + if (disabled) return; + + if (lazyLoad) { + const observer = new IntersectionObserver( + ([entry]) => { + if (entry.isIntersecting) { + setIsIntersected(true); + } + }, + { root: null, rootMargin, threshold: 0 }, + ); + + if (containerRef.current) { + observer.observe(containerRef.current); + } + + return () => { + if (containerRef.current) { + observer.unobserve(containerRef.current); + } + }; + } + }, [lazyLoad, rootMargin, disabled]); + + return [ + containerRef, + animationInstance, + { + isIntersected, + }, + ] as const; +}; + +export default useLottie; diff --git a/.dumi/hooks/useScrollY.ts b/.dumi/hooks/useScrollY.ts new file mode 100644 index 00000000..f698388d --- /dev/null +++ b/.dumi/hooks/useScrollY.ts @@ -0,0 +1,40 @@ +import React from 'react'; + +const getSnapshot = () => window.scrollY; + +const getServerSnapshot = () => 0; + +const useScrollY = () => { + const [scrollYDirection, setScrollYDirection] = React.useState<'down' | 'up'>(); + + const subscribe = React.useCallback((callback: () => void) => { + let ticking = false; + let scrollY = window.scrollY; + + const handleScroll = () => { + if (!ticking) { + requestAnimationFrame(() => { + callback(); + setScrollYDirection(scrollY > window.scrollY ? 'up' : 'down'); + scrollY = window.scrollY; + ticking = false; + }); + + ticking = true; + } + }; + + window.addEventListener('scroll', handleScroll); + + return () => window.removeEventListener('scroll', handleScroll); + }, []); + + const scrollY = React.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot); + + return { + scrollY, + scrollYDirection, + }; +}; + +export default useScrollY; diff --git a/.dumi/pages/index/common/Container.tsx b/.dumi/pages/index/common/Container.tsx new file mode 100644 index 00000000..2c69337f --- /dev/null +++ b/.dumi/pages/index/common/Container.tsx @@ -0,0 +1,58 @@ +import { createStyles } from 'antd-style'; +import classnames from 'classnames'; +import React from 'react'; + +const useStyle = createStyles(({ token, css }) => { + return { + container: css` + width: 100%; + margin: 0 auto; + max-width: ${token.pcMaxWidth - token.pcContainerMargin * 2}px; + font-family: AlibabaPuHuiTi, ${token.fontFamily}, sans-serif; + + @media only screen and (max-width: ${token.pcMaxWidth}px) { + max-width: calc(100vw - ${token.pcContainerMargin * 2}px); + } + + @media only screen and (max-width: ${token.mobileMaxWidth}px) { + max-width: calc(100vw - ${token.marginLG * 2}px); + } + `, + title: css` + font-size: 48px; + color: #fff; + text-align: center; + padding-bottom: ${token.padding}px; + `, + desc: css` + color: ${token.colorTextSecondary}; + max-width: 880px !important; + margin: 0 auto; + text-align: center; + padding-bottom: ${token.padding}px; + `, + }; +}); + +export interface ContainerProps extends Omit, 'title'> { + children?: React.ReactNode; + title?: React.ReactNode; + desc?: React.ReactNode; +} + +const Container: React.FC = (props) => { + const { styles } = useStyle(); + return ( +
+ {props.title &&

{props.title}

} + {props.desc &&

{props.desc}

} + {props.children} +
+ ); +}; + +export default Container; diff --git a/.dumi/pages/index/common/CustomizationProvider.tsx b/.dumi/pages/index/common/CustomizationProvider.tsx new file mode 100644 index 00000000..8024cb98 --- /dev/null +++ b/.dumi/pages/index/common/CustomizationProvider.tsx @@ -0,0 +1,198 @@ +import { XProvider } from '@ant-design/x'; +import { createStyles } from 'antd-style'; +import React from 'react'; + +export const useCustomizationBgStyle = createStyles(({ token, css }) => { + return { + background: css` + background: linear-gradient(135deg, #ffffff26 14%, #ffffff0d 59%) !important; + overflow: hidden; + position: auto; + + &::after { + content: ''; + width: 100%; + height: 100%; + box-sizing: border-box; + border-radius: inherit; + pointer-events: none; + position: absolute; + top: 0; + bottom: 0; + inset-inline-start: 0; + inset-inline-end: 0; + padding: ${token.lineWidth}px; + background: linear-gradient(180deg, #ffffff26 0%, #ffffff00 100%); + mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); + mask-composite: exclude; + }; + `, + }; +}); + +export const LOCALES = { + cn: { + greeting: '你好, 我是全新 AI 产品创造助手', + greeting_short: '你好, 我是 Ant Design X', + description: '基于 Ant Design 的 AGI 产品智能解决方案, 创造更美好的智能视界', + description_short: '基于 Ant Design 的 AGI 产品智能解决方案, 创造更美好的智能视界', + help_text: '我可以帮您: ', + + conversations_group: '最近对话', + send_placeholder: '输入 / 获取建议', + + hot_question: '热门话题', + + question1: 'Ant Design X 全新升级了什么? ', + question2: 'Ant Design X 推出全新 RICH 设计规范 ', + question3: 'Ant Design X 组件资产有哪些? ', + question4: '快来了解全新AI时代的设计范式! ', + + design_guide: 'Rich 设计指南', + + empathy: 'AI 理解用户诉求并解决', + persona: 'AI 对外的人设及形象', + conversation: 'AI 如何表达用户能听懂', + interface: 'AI 兼顾“chat” & “do” 行为', + }, + en: { + greeting: 'Hello, I am your AI Product Design Assistant', + greeting_short: 'Hello, I am Ant Design X', + description: + "Powered by Ant Design's AGI solution to enhance intelligent, aesthetic visual experiences", + description_short: 'Aesthetic visual experiences', + help_text: 'I can assist you with:', + + conversations_group: 'History', + send_placeholder: 'Type / to get suggestions', + + hot_question: 'Hot Topics', + + question1: 'What are the new upgrades in X?', + question2: 'X has introduced the new RICH design guide.', + question3: 'What are the component assets in X?', + question4: 'Discover new design for the AI!', + + design_guide: 'Rich Design Guidelines', + + empathy: 'AI that understands and addresses user needs', + persona: "Defining AI's persona and presentation", + conversation: 'Ensuring AI communicates clearly', + interface: "Balancing 'chat' & 'do' functionalities", + }, +}; + +export const DESIGN_STAGE_COLOR = { + AWAKE: { + START: '#6fb3e2', + END: '#6c57ff', + }, + EXPRESS: { + START: '#6dd6f5', + END: '#108c44', + }, + CONFIRM: { + START: '#ba2cb8', + END: '#6c37e8', + }, + FEEDBACK: { + START: '#f7c348', + END: '#f75972', + }, + COMMON: { + START: '#d857ff', + END: '#8594ff', + }, +}; + +const useStyle = createStyles(({ token, css }) => { + const borderRadius = 20; + + return { + welcome: css` + display: flex; + align-items: center; + gap: ${token.paddingXS}px; + position: relative; + box-sizing: border-box; + border-radius: ${borderRadius}px; + padding: 18px; + + .ant-welcome-title { + font-size: ${token.fontSize}px; + font-weight: 400; + } + + .ant-welcome-description { + font-size: ${token.fontSizeSM - 1}px; + opacity: 0.65; + } + `, + prompts: css` + border-radius: ${borderRadius}px !important; + position: relative; + + .ant-prompts-desc { + font-size: ${token.fontSizeSM}px !important; + opacity: 0.9; + } + .ant-prompts-label { + font-size: ${token.fontSize}px !important; + font-weight: 400; + } + + .ant-prompts-title { + font-size: ${token.fontSize}px !important; + padding-bottom: ${token.paddingXS}px; + } + `, + sender: css` + border-radius: ${borderRadius * 2}px; + height: 44px; + display: flex; + align-items: center; + + .ant-sender-content { + padding: 0px ${token.paddingSM}px; + } + `, + conversations: css` + padding: ${token.padding}px; + padding-top: 0; + border-radius: ${borderRadius}px; + position: relative; + `, + suggestion: css` + border-radius: ${borderRadius}px; + position: relative; + `, + }; +}); + +const CustomizationProvider: React.FC<{ children: React.ReactNode }> = (props) => { + const { styles } = useStyle(); + + return ( + + {props.children} + + ); +}; + +export default CustomizationProvider; diff --git a/.dumi/pages/index/common/CustomizationSender.tsx b/.dumi/pages/index/common/CustomizationSender.tsx new file mode 100644 index 00000000..d06e9bf8 --- /dev/null +++ b/.dumi/pages/index/common/CustomizationSender.tsx @@ -0,0 +1,47 @@ +import { Sender, type SenderProps } from '@ant-design/x'; +import { Button } from 'antd'; +import { createStyles } from 'antd-style'; +import React from 'react'; + +export const useStyle = createStyles(({ css }) => { + return { + sender: css` + background: linear-gradient(135deg, #ffffff26 14%, #ffffff0d 59%); + position: relative; + border: none; + cursor: pointer; + + :hover { + opacity: 0.85; + } + `, + }; +}); + +const CustomizationSender: React.FC = (props) => { + const { styles } = useStyle(); + return ( + { + return ( + + + + ); + })} + +
+
+
+
+ + ); +}; + +export default DesignGuide; diff --git a/.dumi/pages/index/components/Group.tsx b/.dumi/pages/index/components/Group.tsx deleted file mode 100644 index 437fdcaa..00000000 --- a/.dumi/pages/index/components/Group.tsx +++ /dev/null @@ -1,83 +0,0 @@ -import * as React from 'react'; -import { useContext } from 'react'; -import { Typography } from 'antd'; -import { createStyles, useTheme } from 'antd-style'; -import classNames from 'classnames'; - -import SiteContext from '../../../theme/slots/SiteContext'; -import GroupMaskLayer from './GroupMaskLayer'; - -const useStyle = createStyles(({ css, token }) => ({ - box: css` - position: relative; - transition: all ${token.motionDurationSlow}; - `, - marginStyle: css` - max-width: 1208px; - margin-inline: auto; - box-sizing: border-box; - padding-inline: ${token.marginXXL}px; - `, - withoutChildren: css` - min-height: 300px; - border-radius: ${token.borderRadiusLG}px; - background-color: '#e9e9e9'; - `, -})); - -export interface GroupProps { - id?: string; - title?: React.ReactNode; - titleColor?: string; - description?: React.ReactNode; - background?: string; - /** 是否不使用两侧 margin */ - collapse?: boolean; - decoration?: React.ReactNode; -} - -const Group: React.FC> = (props) => { - const { id, title, titleColor, description, children, decoration, background, collapse } = props; - const token = useTheme(); - const { styles } = useStyle(); - const { isMobile } = useContext(SiteContext); - const childNode = ( - <> -
- - {title} - - - {description} - -
-
- {children ?
{children}
:
} -
- - ); - - return ( -
-
{decoration}
- {childNode} -
- ); -}; - -export default Group; diff --git a/.dumi/pages/index/components/GroupMaskLayer.tsx b/.dumi/pages/index/components/GroupMaskLayer.tsx deleted file mode 100644 index 2a5ca9ae..00000000 --- a/.dumi/pages/index/components/GroupMaskLayer.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import React from 'react'; -import { createStyles } from 'antd-style'; -import classNames from 'classnames'; - -const useStyle = createStyles(({ css }) => ({ - siteMask: css` - z-index: 1; - position: relative; - `, -})); - -export interface GroupMaskLayerProps { - className?: string; - style?: React.CSSProperties; - onMouseMove?: React.MouseEventHandler; - onMouseEnter?: React.MouseEventHandler; - onMouseLeave?: React.MouseEventHandler; -} - -const GroupMaskLayer: React.FC> = (props) => { - const { children, className, style, onMouseMove, onMouseEnter, onMouseLeave } = props; - const { styles } = useStyle(); - return ( -
- {children} -
- ); -}; - -export default GroupMaskLayer; diff --git a/.dumi/pages/index/components/MainBanner.tsx b/.dumi/pages/index/components/MainBanner.tsx new file mode 100644 index 00000000..ce0f3af3 --- /dev/null +++ b/.dumi/pages/index/components/MainBanner.tsx @@ -0,0 +1,312 @@ +import { createStyles } from 'antd-style'; +import classnames from 'classnames'; +import { Link, useLocation } from 'dumi'; +import React from 'react'; + +import { Button } from 'antd'; +import useLocale from '../../../hooks/useLocale'; +import useLottie from '../../../hooks/useLottie'; +import { getLocalizedPathname, isZhCN } from '../../../theme/utils'; +import Container from '../common/Container'; +import SiteContext from './SiteContext'; +import type { SiteContextProps } from './SiteContext'; + +const locales = { + cn: { + slogan: 'AI 体验新秩序', + desc: 'Ant Design 团队匠心呈现 RICH 设计范式，打造卓越 AI 界面解决方案，引领智能新体验。', + start: '开始使用', + design: '设计语言', + }, + en: { + slogan: 'New AI Experience', + desc: 'The Ant Design team presents the RICH paradigm, crafting superior AI interface solutions and pioneering intelligent experiences.', + start: 'Get Started', + design: 'Get Design', + }, +}; + +const useStyle = createStyles(({ token, css }) => { + const minBannerWidth = token.mobileMaxWidth - token.padding * 2; + + return { + banner: css` + width: 100vw; + height: calc(100vh - 160px); + display: flex; + justify-content: center; + align-items: center; + position: relative; + font-family: AlibabaPuHuiTi, ${token.fontFamily}, sans-serif; + `, + background: css` + width: 100%; + height: 100vh; + position: absolute; + filter: blur(50px); + background: linear-gradient(135deg, #ffffff26 14%, #ffffff0d 59%); + `, + container: css` + height: 100%; + max-height: calc(100vh - ${token.headerHeight * 2}px); + position: relative; + `, + title: css` + max-width: ${minBannerWidth}px; + position: absolute; + top: 50%; + inset-inline-start: 0; + transform: translateY(-50%); + z-index: 1; + `, + lottie: css` + position: absolute; + top: 50%; + inset-inline-end: 0; + transform: translate(${token.pcContainerMargin}px, -40%); + z-index: 0; + + @media only screen and (max-width: ${token.mobileMaxWidth}px) { + display: none; + } + `, + lottie_rtl: css` + transform: translate(${token.pcContainerMargin * -2}px, -40%) !important; + `, + name: css` + font-size: 80px !important; + line-height: 1.3; + color: ${token.colorText}; + font-weight: bold; + + @media only screen and (max-width: ${token.mobileMaxWidth}px) { + font-size: 54px !important; + } + `, + desc: css` + font-size: ${token.fontSizeHeading5}px; + font-weight: 400; + max-width: 500px; + color: ${token.colorText}; + opacity: 0.65; + margin: ${token.marginLG}px 0 ${token.marginLG * 2}px 0; + + `, + iAlphabet: css` + position: relative; + font-size: 60px; + display: inline-block; + + @media only screen and (max-width: ${token.mobileMaxWidth}px) { + transform: scale(0.7); + top: 6px; + } + `, + iAlphabetStar: css` + position: absolute; + top: 0; + left: 50%; + transform: translate(-50%, -50%); + width: 22px; + height: 22px; + background: no-repeat center url('https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*RMOpRLHgA9wAAAAAAAAAAAAADgCCAQ/original'); + background-size: cover; + + &::before { + content: ''; + width: 100%; + height: 100%; + box-sizing: border-box; + border-radius: inherit; + position: absolute; + background: radial-gradient(circle, #fe8aff 0%, #fe8aff00 100%); + filter: blur(12px); + }; + `, + content: css` + display: flex; + gap: ${token.paddingLG}px; + flex-wrap: wrap; + `, + btn: css` + height: 56px; + border: none; + border-radius: 40px; + padding: 0 40px; + display: inline-block; + font-size: 18px; + cursor: pointer; + font-weight: 600; + box-shadow: ${token.boxShadow}; + position: relative; + `, + startBtn: css` + background: linear-gradient(90deg, #c7deff 0%, #ffffffd9 76%); + color: #14204c; + position: relative; + + ::after { + content: ''; + position: absolute; + border-radius: 40px; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(255, 255, 255, 0.5); + opacity: 0; + z-index: -1; + transition: opacity 0.2s; + } + + :hover::after { + opacity: 1; + } + `, + designBtn: css` + background: #ffffff1a; + backdrop-filter: blur(40px); + + &::after { + content: ''; + width: 100%; + height: 100%; + box-sizing: border-box; + border-radius: inherit; + + position: absolute; + top: 0; + bottom: 0; + inset-inline-start: 0; + inset-inline-end: 0; + + padding: ${token.lineWidth}px; + background: linear-gradient(180deg, #ffffff26 0%, #ffffff00 100%); + mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); + mask-composite: exclude; + }; + `, + }; +}); + +const MainBanner: React.FC = () => { + const [locale] = useLocale(locales); + + const { pathname, search } = useLocation(); + + const { direction, isMobile } = React.useContext(SiteContext); + + const { styles } = useStyle(); + + const [bgLottieRef, bgAnimation] = useLottie({ + renderer: 'canvas', + loop: false, + autoplay: false, + rendererSettings: { + preserveAspectRatio: 'xMidYMid slice', + }, + path: 'https://mdn.alipayobjects.com/huamei_iwk9zp/afts/file/A*3QcuQpaOguQAAAAAAAAAAAAADgCCAQ', + }); + + const [ipLottieRef, ipAnimation] = useLottie({ + renderer: 'svg', + loop: false, + autoplay: true, + disabled: isMobile, + rendererSettings: { + preserveAspectRatio: 'xMidYMid meet', + }, + path: 'https://mdn.alipayobjects.com/huamei_iwk9zp/afts/file/A*vhF2TLUKM5YAAAAAAAAAAAAADgCCAQ', + }); + + React.useEffect(() => { + if (!bgAnimation) return; + + let isReverse = false; + + function playAnimation() { + if (!bgAnimation) return; + + if (isReverse) { + bgAnimation.setDirection(-1); + bgAnimation.goToAndPlay(bgAnimation.totalFrames - 1, true); + } else { + bgAnimation.setDirection(1); + bgAnimation.goToAndPlay(0, true); + } + isReverse = !isReverse; + } + + bgAnimation.addEventListener('data_ready', playAnimation); + + playAnimation(); + + return () => { + bgAnimation.destroy(); + }; + }, [!!bgAnimation]); + + React.useEffect(() => { + if (!ipAnimation) return; + + let reverseFrameInterval: NodeJS.Timeout; + + ipAnimation.addEventListener('data_ready', () => { + let currentFrame = ipAnimation.totalFrames; + const reverseFrames = 30; + + reverseFrameInterval = setInterval(() => { + currentFrame--; + ipAnimation.goToAndStop(currentFrame, true); + + if (currentFrame <= ipAnimation.totalFrames - reverseFrames) { + clearInterval(reverseFrameInterval); + ipAnimation.play(); + } + }, 1000 / 30); + }); + + return () => { + ipAnimation.destroy(); + window.clearInterval(reverseFrameInterval); + }; + }, [!!ipAnimation]); + + return ( +
+
+ +
+

+ Ant Des + + I + + gn X +

+

{locale.slogan}

+
{locale.desc}
+ +
+ + + + + + +
+
+
+ +
+ ); +}; + +export default MainBanner; diff --git a/.dumi/pages/index/components/PreviewBanner/ComponentsBlock.tsx b/.dumi/pages/index/components/PreviewBanner/ComponentsBlock.tsx deleted file mode 100644 index e28b46c5..00000000 --- a/.dumi/pages/index/components/PreviewBanner/ComponentsBlock.tsx +++ /dev/null @@ -1,217 +0,0 @@ -import React from 'react'; -import { AntDesignOutlined, CheckOutlined, CloseOutlined } from '@ant-design/icons'; -import { - Alert, - Button, - Checkbox, - ColorPicker, - Dropdown, - Input, - message, - Modal, - Progress, - Select, - Slider, - Steps, - Switch, - Tooltip, -} from 'antd'; -import { createStyles } from 'antd-style'; - -import useLocale from '../../../../hooks/useLocale'; -import Tilt from './Tilt'; - -const { _InternalPanelDoNotUseOrYouWillBeFired: ModalPanel } = Modal; -const { _InternalPanelDoNotUseOrYouWillBeFired: InternalTooltip } = Tooltip; -const { _InternalPanelDoNotUseOrYouWillBeFired: InternalMessage } = message; - -const locales = { - cn: { - range: '设置范围', - text: 'Ant Design 5.0 使用 CSS-in-JS 技术以提供动态与混合主题的能力。与此同时，我们使用组件级别的 CSS-in-JS 解决方案，让你的应用获得更好的性能。', - infoText: '信息内容展示', - dropdown: '下拉菜单', - finished: '已完成', - inProgress: '进行中', - waiting: '等待中', - option: '选项', - apple: '苹果', - banana: '香蕉', - orange: '橘子', - watermelon: '西瓜', - primary: '主要按钮', - danger: '危险按钮', - default: '默认按钮', - dashed: '虚线按钮', - icon: '图标按钮', - hello: '你好，Ant Design!', - release: 'Ant Design 5.0 正式发布！', - }, - en: { - range: 'Set Range', - text: 'Ant Design 5.0 use CSS-in-JS technology to provide dynamic & mix theme ability. And which use component level CSS-in-JS solution get your application a better performance.', - infoText: 'Info Text', - dropdown: 'Dropdown', - finished: 'Finished', - inProgress: 'In Progress', - waiting: 'Waiting', - option: 'Option', - apple: 'Apple', - banana: 'Banana', - orange: 'Orange', - watermelon: 'Watermelon', - primary: 'Primary', - danger: 'Danger', - default: 'Default', - dashed: 'Dashed', - icon: 'Icon', - hello: 'Hello, Ant Design!', - release: 'Ant Design 5.0 is released!', - }, -}; - -const useStyle = createStyles(({ token, css }) => { - const gap = token.padding; - return { - holder: css` - width: 500px; - display: flex; - flex-direction: column; - row-gap: ${gap}px; - opacity: 0.8; - `, - flex: css` - display: flex; - flex-wrap: nowrap; - column-gap: ${gap}px; - `, - ptg_20: css` - flex: 0 1 20%; - `, - ptg_none: css` - flex: none; - `, - block: css` - background-color: ${token.colorBgContainer}; - padding: ${token.paddingXS}px ${token.paddingSM}px; - border-radius: ${token.borderRadius}px; - border: 1px solid ${token.colorBorder}; - `, - noMargin: css` - margin: 0; - `, - }; -}); - -const ComponentsBlock: React.FC = () => { - const [locale] = useLocale(locales); - const { styles } = useStyle(); - - return ( - - - {locale.text} - - - {/* Line */} -
- -
- ({ - key: `opt${index}`, - label: `${locale.option} ${index}`, - })), - }} - > - {locale.dropdown} - -
- -
- - - - {/* Line */} -
- 100°C, - }, - }} - defaultValue={[26, 37]} - /> -
- {/* Line */} -
- - - - - -
- {/* Line */} -
-
- } - unCheckedChildren={} - /> - -
-
-
- -
- - - - ); -}; - -export default ComponentsBlock; diff --git a/.dumi/pages/index/components/PreviewBanner/Tilt.tsx b/.dumi/pages/index/components/PreviewBanner/Tilt.tsx deleted file mode 100644 index ec1213e0..00000000 --- a/.dumi/pages/index/components/PreviewBanner/Tilt.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import React, { useEffect, useRef } from 'react'; -import VanillaTilt from 'vanilla-tilt'; -import type { TiltOptions } from 'vanilla-tilt'; - -interface TiltProps extends React.HTMLAttributes { - options?: TiltOptions; -} - -// https://micku7zu.github.io/vanilla-tilt.js/index.html -const defaultTiltOptions: TiltOptions = { - scale: 1.02, - max: 8, - speed: 1500, - glare: true, - 'max-glare': 0.8, -}; - -const Tilt: React.FC = ({ options, ...props }) => { - const node = useRef(null); - useEffect(() => { - if (node.current) { - VanillaTilt.init(node.current, { - ...defaultTiltOptions, - ...options, - }); - } - return () => { - (node.current as any)?.vanillaTilt.destroy(); - }; - }, []); - return
; -}; - -export default Tilt; diff --git a/.dumi/pages/index/components/PreviewBanner/index.tsx b/.dumi/pages/index/components/PreviewBanner/index.tsx deleted file mode 100644 index f909d686..00000000 --- a/.dumi/pages/index/components/PreviewBanner/index.tsx +++ /dev/null @@ -1,182 +0,0 @@ -import { ConfigProvider, Flex, Typography } from 'antd'; -import { createStyles } from 'antd-style'; -import classNames from 'classnames'; -import { useLocation } from 'dumi'; -import React, { Suspense } from 'react'; - -import useLocale from '../../../../hooks/useLocale'; -import LinkButton from '../../../../theme/common/LinkButton'; -import SiteContext from '../../../../theme/slots/SiteContext'; -import * as utils from '../../../../theme/utils'; -import GroupMaskLayer from '../GroupMaskLayer'; - -const ComponentsBlock = React.lazy(() => import('./ComponentsBlock')); - -const locales = { - cn: { - slogan: '构建 Copilot 应用的好搭档', - start: '开始使用', - designLanguage: '设计语言', - }, - en: { - slogan: 'The ready-made partner for building Copilot applications', - start: 'Getting Started', - designLanguage: 'Design Language', - }, -}; - -const useStyle = () => { - const { direction } = React.useContext(ConfigProvider.ConfigContext); - const { isMobile } = React.useContext(SiteContext); - const isRTL = direction === 'rtl'; - return createStyles(({ token, css, cx }) => { - const textShadow = `0 0 4px ${token.colorBgContainer}`; - - const mask = cx(css` - position: absolute; - inset: 0; - backdrop-filter: blur(4px); - opacity: 1; - background-color: rgba(255, 255, 255, 0.2); - transition: all 1s ease; - pointer-events: none; - `); - - return { - holder: css` - height: 640px; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - position: relative; - overflow: hidden; - perspective: 800px; - /* fix safari bug by removing blur style */ - transform: translateZ(1000px); - row-gap: ${token.marginXL}px; - - &:hover .${mask} { - opacity: 0; - } - `, - - mask, - - typography: css` - text-align: center; - position: relative; - z-index: 1; - padding-inline: ${token.paddingXL}px; - text-shadow: ${new Array(5) - .fill(null) - .map(() => textShadow) - .join(', ')}; - - h1 { - font-family: AliPuHui, ${token.fontFamily} !important; - font-weight: 900 !important; - font-size: ${token.fontSizeHeading2 * 2}px !important; - line-height: ${token.lineHeightHeading2} !important; - } - - p { - font-size: ${token.fontSizeLG}px !important; - font-weight: normal !important; - margin-bottom: 0; - } - `, - - block: css` - position: absolute; - inset-inline-end: 0; - top: -38px; - transform: ${isRTL ? 'rotate3d(24, 83, -45, 57deg)' : 'rotate3d(24, -83, 45, 57deg)'}; - `, - child: css` - position: relative; - width: 100%; - max-width: 1200px; - margin: 0 auto; - z-index: 1; - `, - btnWrap: css` - margin-bottom: ${token.marginXL}px; - `, - bgImg: css` - position: absolute; - width: 240px; - `, - bgImgTop: css` - top: 0; - inset-inline-start: ${isMobile ? '-120px' : 0}; - `, - bgImgBottom: css` - bottom: 120px; - inset-inline-end: ${isMobile ? 0 : '40%'}; - `, - }; - })(); -}; - -const PreviewBanner: React.FC> = (props) => { - const { children } = props; - const [locale] = useLocale(locales); - const { styles } = useStyle(); - const { isMobile } = React.useContext(SiteContext); - const { pathname, search } = useLocation(); - const isZhCN = utils.isZhCN(pathname); - - return ( - - {/* Image Left Top */} - bg - {/* Image Right Top */} - bg - -
- {/* Mobile not show the component preview */} - - {isMobile ? null : ( -
- -
- )} - -
- -

Ant Design X

-

{locale.slogan}

- - - - {locale.start} - - - {locale.designLanguage} - - -
{children}
-
- - ); -}; - -export default PreviewBanner; diff --git a/.dumi/pages/index/components/SceneIntroduction/Assistant.tsx b/.dumi/pages/index/components/SceneIntroduction/Assistant.tsx new file mode 100644 index 00000000..4c018996 --- /dev/null +++ b/.dumi/pages/index/components/SceneIntroduction/Assistant.tsx @@ -0,0 +1,224 @@ +import { Bubble, Prompts, Welcome, useXAgent, useXChat } from '@ant-design/x'; +import { createStyles } from 'antd-style'; +import React from 'react'; +import useLocale from '../../../../hooks/useLocale'; +import CustomizationProvider, { LOCALES } from '../../common/CustomizationProvider'; +import CustomizationSender from '../../common/CustomizationSender'; + +import { BubbleDataType } from '@ant-design/x/es/bubble/BubbleList'; +import { Flex, type GetProp, Skeleton } from 'antd'; + +const sleep = () => new Promise((resolve) => setTimeout(resolve, 1000)); + +const roles: GetProp = { + ai: { + placement: 'start', + typing: { step: 5, interval: 20 }, + style: { + maxWidth: 600, + }, + styles: { + content: { + borderRadius: 16, + }, + }, + }, + local: { + placement: 'end', + styles: { + content: { + borderRadius: 16, + background: '#3877FF', + }, + }, + }, +}; + +let mockSuccess = false; + +const useStyle = createStyles(({ token, css }) => { + return { + container: css` + display: flex; + padding: ${token.paddingXL}px ${token.paddingMD}px; + box-sizing: border-box; + flex-direction: column; + gap: ${token.paddingSM}px; + height: 100%; + width: 350px; + background: #0000001a; + `, + content: css` + padding: ${token.paddingXL}px; + flex: 1; + display: flex; + flex-direction: column; + gap: ${token.padding}px; + `, + bubble_list: css` + flex: 1; + `, + placeholder_bubble: css` + .ant-welcome { + padding: 0; + } + + .ant-welcome-title { + font-size: 16px !important; + font-weight: 500 !important; + opacity: 0.9; + } + + .ant-welcome-description { + font-size: 12px; + opacity: 0.65; + } + + .ant-welcome-icon { + img { + transform: scale(1.2); + margin-inline-end: 10px; + } + } + + .ant-bubble-content { + overflow: hidden; + background: linear-gradient(135deg, #ffffff26 14%, #ffffff0d 59%) !important; + width: 100%; + border-radius: 16px; + padding: 24px; + } + + .ant-prompts { + padding: 0; + } + + .ant-prompts-item { + background: rgba(255, 255, 255, 0.05); + box-sizing: border-box; + padding: 8px 16px; + font-size: 12px; + height: 36px; + line-height: 36px; + border: none; + flex: 1; + + + } + `, + }; +}); + +const AssistantScene: React.FC = () => { + const { styles } = useStyle(); + const [locale] = useLocale(LOCALES); + + const [content, setContent] = React.useState(''); + + const [agent] = useXAgent({ + request: async ({ message }, { onSuccess, onError }) => { + await sleep(); + + mockSuccess = !mockSuccess; + + if (mockSuccess) { + onSuccess(`Mock success return. You said: ${message}`); + } + + onError(new Error('Mock request failed')); + }, + }); + + // Chat messages + const { onRequest, messages } = useXChat({ + agent, + requestPlaceholder: 'Waiting...', + requestFallback: 'Mock failed return. Please try again later.', + }); + + const placeholderMessage: BubbleDataType = { + key: 'placeholder', + variant: 'borderless', + className: styles.placeholder_bubble, + content: ( + + } + variant="borderless" + title={locale.greeting_short} + description={locale.description_short} + /> + ), + footer: ( + { + onRequest(item.data.description as string); + }} + vertical + items={[ + { + key: '1-1', + description: locale.question1, + }, + { + key: '1-2', + description: locale.question2, + }, + { + key: '1-3', + description: locale.question3, + }, + { + key: '1-4', + description: locale.question4, + }, + ]} + /> + ), + }; + + return ( + + +
+ + + +
+
+ ({ + key: id, + loading: status === 'loading', + role: status === 'local' ? 'local' : 'ai', + content: message, + })), + ]} + /> + { + if (!nextContent) return; + onRequest(nextContent); + setContent(''); + }} + /> +
+ + + ); +}; + +export default AssistantScene; diff --git a/.dumi/pages/index/components/SceneIntroduction/Independent.tsx b/.dumi/pages/index/components/SceneIntroduction/Independent.tsx new file mode 100644 index 00000000..c362e82a --- /dev/null +++ b/.dumi/pages/index/components/SceneIntroduction/Independent.tsx @@ -0,0 +1,268 @@ +import { Bubble, Prompts, Welcome, useXAgent, useXChat } from '@ant-design/x'; +import { createStyles } from 'antd-style'; +import React from 'react'; +import useLocale from '../../../../hooks/useLocale'; +import CustomizationProvider, { LOCALES } from '../../common/CustomizationProvider'; +import CustomizationSender from '../../common/CustomizationSender'; + +import { BubbleDataType } from '@ant-design/x/es/bubble/BubbleList'; +import { type GetProp, Tag } from 'antd'; + +const sleep = () => new Promise((resolve) => setTimeout(resolve, 1000)); + +const roles: GetProp = { + ai: { + placement: 'start', + typing: { step: 5, interval: 20 }, + style: { + maxWidth: 600, + }, + styles: { + content: { + borderRadius: 16, + }, + }, + }, + local: { + placement: 'end', + styles: { + content: { + borderRadius: 16, + background: '#3877FF', + }, + }, + }, +}; + +let mockSuccess = false; + +const useStyle = createStyles(({ token, css }) => { + return { + container: css` + display: flex; + box-sizing: border-box; + flex-direction: column; + gap: ${token.padding}px; + height: 100%; + padding: ${token.paddingXL}px ${token.paddingLG * 2}px; + `, + bubble_list: css` + flex: 1; + `, + placeholder_bubble: css` + .ant-welcome { + padding: 0; + margin-bottom: ${token.marginSM}px; + } + + .ant-welcome-title { + font-size: 16px !important; + font-weight: 500 !important; + opacity: 0.9; + } + + .ant-welcome-description { + font-size: 12px; + opacity: 0.65; + } + + .ant-welcome-icon { + img { + transform: scale(1.2); + margin-inline-end: 10px; + } + } + + .ant-bubble-content { + overflow: hidden; + background: linear-gradient(135deg, #ffffff26 14%, #ffffff0d 59%) !important; + width: 100%; + border-radius: 16px; + padding: 24px; + } + + .ant-prompts-content { + display: flex; + align-items: center; + justify-content: center; + height: 100%; + } + + .ant-tag { + background: linear-gradient(45deg, #ffffff33 0%, #ffffff00 100%); + border: 1px solid #ffffff4d; + border-radius: 4px; + margin: 0; + width: 18px; + height: 18px; + display: inline-flex; + align-items: center; + justify-content: center; + } + + .ant-prompts { + padding: 0; + } + + .ant-prompts-desc { + line-height: 2 !important; + } + + .ant-prompts-item { + background: rgba(255, 255, 255, 0.05); + padding: 16px; + border: none; + flex: 1; + height: 100%; + } + `, + }; +}); + +const IndependentScene: React.FC = () => { + const { styles } = useStyle(); + const [locale] = useLocale(LOCALES); + + const [content, setContent] = React.useState(''); + + const [agent] = useXAgent({ + request: async ({ message }, { onSuccess, onError }) => { + await sleep(); + + mockSuccess = !mockSuccess; + + if (mockSuccess) { + onSuccess(`Mock success return. You said: ${message}`); + } + + onError(new Error('Mock request failed')); + }, + }); + + // Chat messages + const { onRequest, messages } = useXChat({ + agent, + requestPlaceholder: 'Waiting...', + requestFallback: 'Mock failed return. Please try again later.', + }); + + const placeholderMessage: BubbleDataType = { + key: 'placeholder', + variant: 'borderless', + className: styles.placeholder_bubble, + content: ( +
+ + } + title={locale.greeting} + description={locale.description} + variant="borderless" + /> + { + onRequest(item.data.description as string); + }} + styles={{ + subItem: { + background: 'none', + padding: '4px 0', + }, + }} + items={[ + { + key: '1', + label: locale.hot_question, + children: [ + { + key: '1-1', + icon: 1, + description: locale.question1, + }, + { + key: '1-2', + icon: 2, + description: locale.question2, + }, + { + key: '1-3', + icon: 3, + description: locale.question3, + }, + { + key: '1-4', + icon: 4, + description: locale.question4, + }, + ], + }, + { + key: '2', + label: locale.design_guide, + children: [ + { + key: '2-1', + icon: 1, + description: locale.empathy, + }, + { + key: '2-2', + icon: 2, + description: locale.persona, + }, + { + key: '2-3', + icon: 3, + description: locale.conversation, + }, + { + key: '2-4', + icon: 4, + description: locale.interface, + }, + ], + }, + ]} + /> +
+ ), + }; + + return ( + +
+ ({ + key: id, + loading: status === 'loading', + role: status === 'local' ? 'local' : 'ai', + content: message, + })), + ]} + /> + { + if (!nextContent) return; + onRequest(nextContent); + setContent(''); + }} + /> +
+ + ); +}; + +export default IndependentScene; diff --git a/.dumi/pages/index/components/SceneIntroduction/Nest.tsx b/.dumi/pages/index/components/SceneIntroduction/Nest.tsx new file mode 100644 index 00000000..2978313c --- /dev/null +++ b/.dumi/pages/index/components/SceneIntroduction/Nest.tsx @@ -0,0 +1,51 @@ +import { createStyles } from 'antd-style'; +import React from 'react'; +import CustomizationSender from '../../common/CustomizationSender'; + +import useLocale from '../../../../hooks/useLocale'; +import { LOCALES, useCustomizationBgStyle } from '../../common/CustomizationProvider'; + +const useStyle = createStyles(({ token, css }) => { + return { + container: css` + display: flex; + height: 100%; + width: 100%; + align-items: center; + justify-content: center; + flex-direction: column; + gap: ${token.paddingLG}px; + `, + title: css` + font-size: 42px; + color: #ffffff3f; + line-height: 50px; + font-weight: 500; + `, + }; +}); + +const NestScene: React.FC = () => { + const { styles } = useStyle(); + + const { + styles: { background }, + } = useCustomizationBgStyle(); + + const [locale] = useLocale(LOCALES); + return ( +
+
{locale.greeting_short}
+ +
+ ); +}; + +export default NestScene; diff --git a/.dumi/pages/index/components/SceneIntroduction/index.tsx b/.dumi/pages/index/components/SceneIntroduction/index.tsx new file mode 100644 index 00000000..09159956 --- /dev/null +++ b/.dumi/pages/index/components/SceneIntroduction/index.tsx @@ -0,0 +1,202 @@ +import { Button } from 'antd'; +import { createStyles } from 'antd-style'; +import classnames from 'classnames'; +import React from 'react'; + +import useLocale from '../../../../hooks/useLocale'; +import Container from '../../common/Container'; +import AssistantScene from './Assistant'; +import Independent from './Independent'; +import NestScene from './Nest'; + +const locales = { + cn: { + title: '试一试 , 多种 AI 场景体验', + desc: '提供多场景解决方案 , 帮助用户提高与 AI 协作效率', + + independent_title: 'Web 独立式', + independent_desc: '自然语言为主 , 几乎没有界面操作', + + assistant_title: 'Web 助手式', + assistant_desc: '自然语言和界面操作均衡配合使用', + + nest_title: 'Web 嵌入式', + nest_desc: '界面操作为主 , 偶尔唤起AI指令', + + app_title: 'App 端', + app_desc: '疯狂研发中 , 敬请期待', + }, + en: { + title: 'Multiple AI Scenario Experiences', + desc: 'Offering multi-scenario solutions to help users enhance collaboration efficiency with AI', + + independent_title: 'Web - Independent', + independent_desc: 'Primarily LUI', + + assistant_title: 'Web - Assistant', + assistant_desc: 'Mix of LUI and GUI', + + nest_title: 'Web - Nest', + nest_desc: 'Mainly UI-driven', + + app_title: 'Mobile - APP', + app_desc: 'In development, stay tuned', + }, +}; + +const useStyle = createStyles(({ token, css }) => { + return { + container: css` + position: relative; + `, + content_bg: css` + position: absolute; + top: -200px; + right: -150px; + `, + content: css` + display: flex; + justify-content: space-between; + gap: ${token.paddingXL}px; + width: 100%; + margin-top: ${token.pcContainerMargin / 2}px; + `, + tab: css` + width: 280px; + display: flex; + flex-direction: column; + gap: ${token.margin}px; + `, + tab_content: css` + width: 886px; + height: 600px; + box-sizing: border-box; + background-image: url(https://mdn.alipayobjects.com/huamei_k0vkmw/afts/img/A*9lNZQrgQIikAAAAAAAAAAAAADsR-AQ/original); + background-repeat: no-repeat; + z-index: 2; + `, + item: css` + position: relative; + border-radius: 20px; + height: 86px; + padding: ${token.padding}px; + box-sizing: border-box; + display: flex; + gap: 4px; + flex-direction: column; + align-items: flex-start; + cursor: pointer; + border: none !important; + `, + 'item-disabled': css` + h3,p { + color: ${token.colorTextDisabled}; + } + `, + 'item-active': css` + background: #ffffff1a; + + &::after { + content: ''; + width: 100%; + height: 100%; + box-sizing: border-box; + border-radius: inherit; + + position: absolute; + top: 0; + bottom: 0; + inset-inline-start: 0; + inset-inline-end: 0; + + padding: ${token.lineWidth}px; + background: linear-gradient(180deg, #ffffff26 0%, #ffffff00 100%); + mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); + mask-composite: exclude; + }; + `, + item_title: css` + font-size: ${token.fontSizeHeading4}px; + color: #ffffff; + font-weight: 500; + `, + item_desc: css` + font-size: 14px; + color: #ffffff; + line-height: 22px; + opacity: 0.65; + `, + }; +}); + +const SceneBanner: React.FC = () => { + const { styles } = useStyle(); + const [locale] = useLocale(locales); + + const tabItems = [ + { + key: 'independent', + title: locale.independent_title, + desc: locale.independent_desc, + content: , + }, + { + key: 'assistant', + title: locale.assistant_title, + desc: locale.assistant_desc, + content: , + }, + { + key: 'nest', + title: locale.nest_title, + desc: locale.nest_desc, + content: , + }, + { + key: 'app', + title: locale.app_title, + desc: locale.app_desc, + disabled: true, + content: null, + }, + ]; + + const [active, setActive] = React.useState(tabItems[0].key); + + const genHandleActive = (key: string) => () => setActive(key); + + const activeContent = tabItems.find((item) => item.key === active)?.content; + + return ( + + bg +
+
+ {tabItems.map((item) => ( + + ))} +
+ {!!activeContent &&
{activeContent}
} +
+ + ); +}; + +export default SceneBanner; diff --git a/.dumi/pages/index/components/SiteContext.ts b/.dumi/pages/index/components/SiteContext.ts index 9767a89b..e45a2a0c 100644 --- a/.dumi/pages/index/components/SiteContext.ts +++ b/.dumi/pages/index/components/SiteContext.ts @@ -1,11 +1,5 @@ -import * as React from 'react'; +import SiteContext from '../../../theme/slots/SiteContext'; -export interface SiteContextProps { - isMobile: boolean; -} - -const SiteContext = React.createContext({ - isMobile: false, -}); +export type { SiteContextProps } from '../../../theme/slots/SiteContext'; export default SiteContext; diff --git a/.dumi/pages/index/components/util.ts b/.dumi/pages/index/components/util.ts deleted file mode 100644 index 24244284..00000000 --- a/.dumi/pages/index/components/util.ts +++ /dev/null @@ -1,121 +0,0 @@ -import { useEffect, useState } from 'react'; -import { css } from 'antd-style'; -import fetch from 'cross-fetch'; - -export interface Author { - avatar: string; - href: string; - type: 'design' | 'develop'; - name: string; -} - -export interface Article { - title: string; - href: string; - date: string; - type: 'design' | 'develop'; - author: Author['name']; -} - -export interface Recommendation { - title?: string; - img?: string; - href?: string; - popularize?: boolean; - description?: string; -} - -type SourceType = 'zhihu' | 'yuque'; -export interface Extra { - title: string; - description: string; - date: string; - img: string; - source: SourceType; - href: string; -} - -export interface Icon { - name: string; - href: string; -} - -export type Articles = { - cn: Article[]; - en: Article[]; -}; - -export type Authors = Author[]; - -export type Recommendations = { - cn: Recommendation[]; - en: Recommendation[]; -}; - -export type Extras = { - cn: Extra[]; - en: Extra[]; -}; - -export type Icons = Icon[]; - -export type SiteData = { - articles: Articles; - authors: Authors; - recommendations: Recommendations; - extras: Extras; - icons: Icons; -}; - -export function preLoad(list: string[]) { - if (typeof window !== 'undefined') { - // 图处预加载； - const div = document.createElement('div'); - div.style.display = 'none'; - document.body.appendChild(div); - list.forEach((src) => { - const img = new Image(); - img.src = src; - div.appendChild(img); - }); - } -} - -export function useSiteData(): Partial | undefined { - const [data, setData] = useState(undefined); - - useEffect(() => { - fetch('https://render.alipay.com/p/h5data/antd4-config_website-h5data.json').then( - async (res) => { - setData(await res.json()); - }, - ); - }, []); - - return data; -} - -export const getCarouselStyle = () => ({ - carousel: css` - .slick-dots.slick-dots-bottom { - bottom: -22px; - li { - width: 6px; - height: 6px; - background: #e1eeff; - border-radius: 50%; - button { - height: 6px; - background: #e1eeff; - border-radius: 50%; - } - &.slick-active { - background: #4b9cff; - button { - background: #4b9cff; - } - } - } - } - `, -}); diff --git a/.dumi/pages/index/index.tsx b/.dumi/pages/index/index.tsx index 03d3bfe8..016e806b 100644 --- a/.dumi/pages/index/index.tsx +++ b/.dumi/pages/index/index.tsx @@ -1,71 +1,54 @@ -import { createStyles, css } from 'antd-style'; -import React, { Suspense } from 'react'; - -import useDark from '../../hooks/useDark'; -import useLocale from '../../hooks/useLocale'; -import BannerRecommends from './components/BannerRecommends'; -import Group from './components/Group'; -import PreviewBanner from './components/PreviewBanner'; - -const DesignFramework = React.lazy(() => import('./components/DesignFramework')); - -const useStyle = createStyles(() => ({ - image: css` - position: absolute; - inset-inline-start: 0; - top: -50px; - height: 160px; - `, -})); - -const locales = { - cn: { - assetsTitle: '组件丰富，选用自如', - assetsDesc: '大量实用组件满足你的需求，灵活定制与拓展', - designTitle: '设计语言与研发框架', - designDesc: '配套生态，让你快速搭建网站应用', - }, - en: { - assetsTitle: 'Rich components', - assetsDesc: 'Practical components to meet your needs, flexible customization and expansion', - designTitle: 'Design and framework', - designDesc: 'Supporting ecology, allowing you to quickly build website applications', - }, -}; +import { createStyles } from 'antd-style'; +import classnames from 'classnames'; +import React from 'react'; +import CompIntroduction from './components/CompIntroduction'; +import DesignBanner from './components/DesignBanner'; +import DesignFramework from './components/DesignFramework'; +import DesignGuide from './components/DesignGuide'; +import MainBanner from './components/MainBanner'; +import SceneIntroduction from './components/SceneIntroduction'; + +const useStyle = createStyles(({ token, css }) => { + return { + section: css` + background: linear-gradient(180deg, #1e2226e6 0%, #1c2024 38%, #16191c 100%); + border-radius: 40px 40px 0 0; + backdrop-filter: blur(40px); + display: flex; + flex-direction: column; + gap: ${token.pcContainerMargin}px; + padding: ${token.pcContainerMargin}px 0; + `, + container: css` + margin-top: -40px; + `, + framework: css` + border-radius: 0; + background-image: linear-gradient(90deg, #5a37e6 0%, #0059c9 100%); + `, + }; +}); const Homepage: React.FC = () => { - const [locale] = useLocale(locales); const { styles } = useStyle(); - const isRootDark = useDark(); - return ( -
- - - - -
- {/* 设计语言 */} - - } - > - - - - -
-
+
+ +
+ +
+
+ +
+
+ + +
+
+ +
+
); }; diff --git a/.dumi/pages/theme-editor/index.tsx b/.dumi/pages/theme-editor/index.tsx index 7afe5de7..dd89af51 100644 --- a/.dumi/pages/theme-editor/index.tsx +++ b/.dumi/pages/theme-editor/index.tsx @@ -4,10 +4,19 @@ import type { ThemeConfig } from 'antd/es/config-provider/context'; import { Helmet } from 'dumi'; import React, { Suspense, useEffect } from 'react'; +import { createStyles } from 'antd-style'; import useLocale from '../../hooks/useLocale'; const ThemeEditor = React.lazy(() => import('antd-token-previewer/lib/ThemeEditor')); +const useStyle = createStyles(({ token, css }) => { + return { + editor: css` + margin-top: ${token.headerHeight - token.padding}px; + `, + }; +}); + const locales = { cn: { title: '主题编辑器', @@ -38,6 +47,7 @@ const ANT_DESIGN_V5_THEME_EDITOR_THEME = 'ant-design-v5-theme-editor-theme'; const CustomTheme: React.FC = () => { const { message } = App.useApp(); const [locale, lang] = useLocale(locales); + const { styles } = useStyle(); const [theme, setTheme] = React.useState({}); @@ -55,7 +65,7 @@ const CustomTheme: React.FC = () => { }; return ( -
+
{`${locale.title} - Ant Design`} diff --git a/.dumi/theme/SiteThemeProvider.tsx b/.dumi/theme/SiteThemeProvider.tsx index 92024d61..26a81a71 100644 --- a/.dumi/theme/SiteThemeProvider.tsx +++ b/.dumi/theme/SiteThemeProvider.tsx @@ -4,8 +4,6 @@ import type { ThemeProviderProps } from 'antd-style'; import { ThemeProvider } from 'antd-style'; import React, { useContext } from 'react'; -import SiteContext from './slots/SiteContext'; - interface NewToken { bannerHeight: number; headerHeight: number; @@ -20,6 +18,9 @@ interface NewToken { codeFamily: string; contentMarginTop: number; anchorTop: number; + indexRadius: number; + pcMaxWidth: number; + pcContainerMargin: number; } // 通过给 antd-style 扩展 CustomToken 对象类型定义，可以为 useTheme 中增加相应的 token 对象 @@ -27,14 +28,15 @@ declare module 'antd-style' { export interface CustomToken extends NewToken {} } -const headerHeight = 64; +const headerHeight = 80; const bannerHeight = 38; +const indexRadius = 24; +const pcMaxWidth = 1560; const SiteThemeProvider: React.FC> = ({ children, theme, ...rest }) => { const { getPrefixCls, iconPrefixCls } = useContext(ConfigProvider.ConfigContext); const rootPrefixCls = getPrefixCls(); const { token } = antdTheme.useToken(); - const { bannerVisible } = useContext(SiteContext); React.useEffect(() => { // 需要注意与 components/config-provider/demo/holderRender.tsx 配置冲突 ConfigProvider.config({ theme: theme as ThemeConfig }); @@ -47,6 +49,9 @@ const SiteThemeProvider: React.FC> = ({ children, theme, customToken={{ headerHeight, bannerHeight, + indexRadius, + pcMaxWidth, + pcContainerMargin: 100, menuItemBorder: 2, mobileMaxWidth: 767.99, siteMarkdownCodeBg: token.colorFillTertiary, @@ -60,7 +65,7 @@ const SiteThemeProvider: React.FC> = ({ children, theme, marginFar: token.marginXXL * 2, codeFamily: `'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace`, contentMarginTop: 40, - anchorTop: headerHeight + token.margin + (bannerVisible ? bannerHeight : 0), + anchorTop: headerHeight + token.margin, }} > {children} diff --git a/.dumi/theme/builtins/ResourceArticles/index.tsx b/.dumi/theme/builtins/ResourceArticles/index.tsx deleted file mode 100644 index 781bbfa4..00000000 --- a/.dumi/theme/builtins/ResourceArticles/index.tsx +++ /dev/null @@ -1,159 +0,0 @@ -import { Avatar, Divider, Empty, Skeleton, Tabs } from 'antd'; -import { createStyles } from 'antd-style'; -import dayjs from 'dayjs'; -import { FormattedMessage } from 'dumi'; -import * as React from 'react'; - -import useLocale from '../../../hooks/useLocale'; -import type { Article, Authors, SiteData } from '../../../pages/index/components/util'; -import { useSiteData } from '../../../pages/index/components/util'; - -const useStyle = createStyles(({ token, css }) => { - const { antCls } = token; - - return { - articles: css` - h4 { - margin: 40px 0 24px; - font-weight: 500; - font-size: ${token.fontSizeXL}px; - } - - ${antCls}-skeleton { - h3 { - margin: 0; - } - - ul li { - display: block; - margin-inline-start: 0; - } - } - - table { - width: 100%; - table-layout: fixed; - - td { - width: 50%; - vertical-align: top; - } - } - `, - articleList: css` - li { - margin: 1em 0; - padding: 0; - font-size: ${token.fontSize}px; - list-style: none; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - ${antCls}-avatar > img { - max-width: unset; - } - `, - }; -}); - -interface ArticleListProps { - name: React.ReactNode; - data: Article[]; - authors: Authors; -} - -const ArticleList: React.FC = ({ name, data = [], authors = [] }) => { - const { styles } = useStyle(); - return ( - -

{name}

-
    - {data.length === 0 ? ( - - ) : ( - data.map((article, index) => { - const author = authors.find((auth) => auth.name === article.author); - return ( -
  • - - - - - - {article?.title} - -
    • - ); - }) - )} -
- - ); -}; - -const Articles: React.FC<{ data: Partial }> = ({ data }) => { - const [, lang] = useLocale(); - const isZhCN = lang === 'cn'; - - const { articles = { cn: [], en: [] }, authors = [] } = data; - - // ========================== Data ========================== - const mergedData = React.useMemo(() => { - const yearData: Record> = {}; - articles[lang]?.forEach((article) => { - const year = dayjs(article.date).year(); - yearData[year] = yearData[year] || {}; - yearData[year][article.type] = [...(yearData[year][article.type] || []), article]; - }); - return yearData; - }, [articles]); - - const yearList = Object.keys(mergedData).sort((a, b) => Number(b) - Number(a)); - - if (yearList.length === 0) { - return null; - } - - return ( - ({ - key: year, - label: `${year}${isZhCN ? ' 年' : ''}`, - children: ( - - - - } - data={mergedData[year].design} - authors={authors} - /> - } - data={mergedData[year].develop} - authors={authors} - /> - - -
- ), - }))} - /> - ); -}; - -export default () => { - const { styles } = useStyle(); - const data = useSiteData(); - - const articles = data ? : ; - - return ( -
- {articles} -
- ); -}; diff --git a/.dumi/theme/common/Loading.tsx b/.dumi/theme/common/Loading.tsx index 3c8eeb03..75a3fc02 100644 --- a/.dumi/theme/common/Loading.tsx +++ b/.dumi/theme/common/Loading.tsx @@ -12,7 +12,7 @@ const Loading: React.FC = () => { return (
loading = (props) => { const { value = ['light'], onChange } = props; const { pathname, search } = useLocation(); - // const isMotionOff = value.includes('motion-off'); const isDark = value.includes('dark'); + if (pathname.startsWith('/index') || pathname === '') return null; + return ( { const outlet = useOutlet(); const { pathname } = useLocation(); const [searchParams, setSearchParams] = useSearchParams(); - const [{ theme = [], direction, isMobile, bannerVisible = false }, setSiteState] = - useLayoutState({ - isMobile: false, - direction: 'ltr', - theme: [], - bannerVisible: false, - }); + const [{ theme = [], direction, isMobile }, setSiteState] = useLayoutState({ + isMobile: false, + direction: 'ltr', + theme: [], + }); const updateSiteConfig = useCallback( (props: SiteState) => { @@ -101,15 +100,10 @@ const GlobalLayout: React.FC = () => { useEffect(() => { const _theme = searchParams.getAll('theme') as ThemeName[]; const _direction = searchParams.get('direction') as DirectionType; - // const storedBannerVisibleLastTime = - // localStorage && localStorage.getItem(ANT_DESIGN_NOT_SHOW_BANNER); - // const storedBannerVisible = - // storedBannerVisibleLastTime && dayjs().diff(dayjs(storedBannerVisibleLastTime), 'day') >= 1; setSiteState({ theme: _theme, direction: _direction === 'rtl' ? 'rtl' : 'ltr', - // bannerVisible: storedBannerVisibleLastTime ? !!storedBannerVisible : true, }); document.documentElement.setAttribute( 'data-prefers-color', @@ -130,19 +124,22 @@ const GlobalLayout: React.FC = () => { updateSiteConfig, theme: theme!, isMobile: isMobile!, - bannerVisible, }), - [isMobile, direction, updateSiteConfig, theme, bannerVisible], + [isMobile, direction, updateSiteConfig, theme], ); const themeConfig = React.useMemo( () => ({ - algorithm: getAlgorithm(theme), + // index page should always use dark theme + algorithm: + pathname.startsWith('/index') || pathname === '' + ? getAlgorithm(['dark']) + : getAlgorithm(theme), token: { motion: !theme.includes('motion-off') }, cssVar: true, hashed: false, }), - [theme], + [theme, pathname], ); const [styleCache] = React.useState(() => createCache()); diff --git a/.dumi/theme/layouts/IndexLayout/index.tsx b/.dumi/theme/layouts/IndexLayout/index.tsx index a53e5444..4fbff911 100644 --- a/.dumi/theme/layouts/IndexLayout/index.tsx +++ b/.dumi/theme/layouts/IndexLayout/index.tsx @@ -1,6 +1,6 @@ +import { Helmet } from 'dumi'; import type { PropsWithChildren } from 'react'; import React from 'react'; -import { Helmet } from 'dumi'; import Footer from '../../slots/Footer'; @@ -18,7 +18,7 @@ const IndexLayout: React.FC> = (props) => { {desc && } -
{children}
+ {children}
); diff --git a/.dumi/theme/layouts/SidebarLayout/index.tsx b/.dumi/theme/layouts/SidebarLayout/index.tsx index b2654138..0b958d9a 100644 --- a/.dumi/theme/layouts/SidebarLayout/index.tsx +++ b/.dumi/theme/layouts/SidebarLayout/index.tsx @@ -1,6 +1,6 @@ +import { createStyles } from 'antd-style'; import type { PropsWithChildren } from 'react'; import React from 'react'; -import { createStyles } from 'antd-style'; import CommonHelmet from '../../common/CommonHelmet'; import Content from '../../slots/Content'; @@ -9,7 +9,7 @@ import Sidebar from '../../slots/Sidebar'; const useStyle = createStyles(({ css, token }) => ({ main: css` display: flex; - margin-top: ${token.contentMarginTop}px; + margin-top: ${token.headerHeight}px; `, })); diff --git a/.dumi/theme/slots/Content/index.tsx b/.dumi/theme/slots/Content/index.tsx index 12cab1f5..bbd5635b 100644 --- a/.dumi/theme/slots/Content/index.tsx +++ b/.dumi/theme/slots/Content/index.tsx @@ -52,7 +52,10 @@ const Content: React.FC = ({ children }) => { -
+
{meta.frontmatter?.title ? ( diff --git a/.dumi/theme/slots/Header/Actions.tsx b/.dumi/theme/slots/Header/Actions.tsx new file mode 100644 index 00000000..15e752a4 --- /dev/null +++ b/.dumi/theme/slots/Header/Actions.tsx @@ -0,0 +1,159 @@ +import { GithubOutlined } from '@ant-design/icons'; +import { Button, Select } from 'antd'; +import { createStyles } from 'antd-style'; +import classnames from 'classnames'; +import { useLocation, useSiteData } from 'dumi'; +import React from 'react'; + +import DirectionIcon from '../../icons/DirectionIcon'; +import * as utils from '../../utils'; +import { getThemeConfig } from '../../utils'; +import type { SiteContextProps } from '../SiteContext'; +import SiteContext from '../SiteContext'; +import SwitchBtn from './SwitchBtn'; +import type { SharedProps } from './interface'; + +const useStyle = createStyles(({ css, token }) => { + return { + actions: css` + display: flex; + align-items: center; + margin: 0 ${token.margin}px; + `, + mobile: css` + width: 100%; + justify-content: center; + `, + mini: css` + margin: 0; + `, + select: css` + padding: 0; + border-radius: ${token.indexRadius}px; + `, + }; +}); + +export interface HeaderActionsProps extends SharedProps { + className?: string; +} + +const HeaderActions: React.FC = (props) => { + const location = useLocation(); + + const { pkg } = useSiteData(); + + const themeConfig = getThemeConfig(); + + const { direction, updateSiteConfig } = React.useContext(SiteContext); + + const { styles } = useStyle(); + + const { pathname, search } = location; + + const getDropdownStyle = React.useMemo( + () => (direction === 'rtl' ? { direction: 'ltr', textAlign: 'right' } : {}), + [direction], + ); + + const docVersions: Record = { + [pkg.version]: pkg.version, + ...themeConfig?.docVersions, + }; + const versionOptions = Object.keys(docVersions).map((version) => ({ + value: docVersions[version], + label: version, + })); + + const onDirectionChange = () => { + updateSiteConfig({ direction: direction !== 'rtl' ? 'rtl' : 'ltr' }); + }; + + const handleVersionChange = React.useCallback((url: string) => { + const currentUrl = window.location.href; + const currentPathname = window.location.pathname; + if (/overview/.test(currentPathname) && /0?[1-39][0-3]?x/.test(url)) { + window.location.href = currentUrl + .replace(window.location.origin, url) + .replace(/\/components\/overview/, `/docs${/0(9|10)x/.test(url) ? '' : '/react'}/introduce`) + .replace(/\/$/, ''); + return; + } + // Mirror url must have `/`, we add this for compatible + const urlObj = new URL(currentUrl.replace(window.location.origin, url)); + if (urlObj.host.includes('antgroup')) { + urlObj.pathname = `${urlObj.pathname.replace(/\/$/, '')}/`; + window.location.href = urlObj.toString(); + } else { + window.location.href = urlObj.href.replace(/\/$/, ''); + } + }, []); + + const onLangChange = React.useCallback(() => { + const currentProtocol = `${window.location.protocol}//`; + const currentHref = window.location.href.slice(currentProtocol.length); + + if (utils.isLocalStorageNameSupported()) { + localStorage.setItem('locale', utils.isZhCN(pathname) ? 'en-US' : 'zh-CN'); + } + window.location.href = + currentProtocol + + currentHref.replace( + window.location.pathname, + utils.getLocalizedPathname(pathname, !utils.isZhCN(pathname), search).pathname, + ); + }, [location]); + + const items = [ + + {/* 🌟 会话管理 */} + +
+
+ {/* 🌟 欢迎占位 */} + {!items.length && placeholderNode} + {/* 🌟 消息列表 */} + + {/* 🌟 提示词 */} + + {/* 🌟 输入框 */} + +
+
+ ); +}; + +export default Independent; diff --git a/docs/playground/independent.zh-CN.md b/docs/playground/independent.zh-CN.md new file mode 100644 index 00000000..77ac5c6a --- /dev/null +++ b/docs/playground/independent.zh-CN.md @@ -0,0 +1,8 @@ +--- +group: + title: 样板间 + order: 0 +title: 独立式 +--- + + diff --git a/docs/react/common-props.en-US.md b/docs/react/common-props.en-US.md deleted file mode 100644 index 38cb1168..00000000 --- a/docs/react/common-props.en-US.md +++ /dev/null @@ -1,12 +0,0 @@ ---- -group: - title: Advanced -order: 6 -title: Common Props ---- - -> Tips: The following generic properties apply to most antd components; those not supported are described separately. - -| Property | Description | Type | Default | -| ------------- | ----------------------------- | ------ | ------- | -| rootClassName | ClassName on the root element | string | - | diff --git a/docs/react/common-props.zh-CN.md b/docs/react/common-props.zh-CN.md deleted file mode 100644 index aeb0d1bd..00000000 --- a/docs/react/common-props.zh-CN.md +++ /dev/null @@ -1,12 +0,0 @@ ---- -group: - title: 进阶使用 -order: 6 -title: 通用属性 ---- - -> Tips: 以下通用属性适用于 antd 大部分组件，不支持的组件会单独说明。 - -| 参数 | 说明 | 类型 | 默认值 | -| ------------- | ---------------------------- | ------ | ------ | -| rootClassName | 添加在组件最外层的 className | string | - | diff --git a/docs/react/css-variables.en-US.md b/docs/react/css-variables.en-US.md deleted file mode 100644 index cfc80d33..00000000 --- a/docs/react/css-variables.en-US.md +++ /dev/null @@ -1,41 +0,0 @@ ---- -group: - title: Advanced -order: 3 -title: CSS Variables -tag: New ---- - - -:::info{title=Tips} -The philosophy of X is to embrace the future. In X, the CSS Variables feature will be permanently enabled, which is also what Ant Design v6 aims to do. -::: - -## Advanced - -### Disable Hash - -Hash is one of the features since Ant Design 5.0. Its function is to calculate a unique hash value for each theme, and use it in the class of the component to isolate the theme style. - -However, after enabling CSS variables, the component styles of the same antd version will not change with the token —— because we use CSS variables to fill in the dynamic parts of the styles. So if there is only one version of antd in your application, you can choose to disable hash to further reduce the total size of the styles: - -```tsx - - - -``` - -By the way, we strongly recommend using `extractStyle` to extract static styles, which will bring a certain amount of performance improvement to the application. - -### Customize Theme - -With CSS variable mode, the method of modifying the theme is the same as before, refer to [Customize Theme](/docs/react/customize-theme). - -## API - -`cssVar` configuration: - -| Properties | Description | Type | Default | Version | -| --- | --- | --- | --- | --- | -| prefix | Prefix of CSS Variables, same as `prefixCls` of ConfigProvider by default | string | `ant` | 5.12.0 | -| key | The unique key of theme. Automatically set by `useId` in React 18, but need to be set manually in React 17 or 16 | string | `useId` in React 18 | 5.12.0 | diff --git a/docs/react/css-variables.zh-CN.md b/docs/react/css-variables.zh-CN.md deleted file mode 100644 index 9690381d..00000000 --- a/docs/react/css-variables.zh-CN.md +++ /dev/null @@ -1,41 +0,0 @@ ---- -group: - title: 进阶使用 -order: 3 -title: 使用 CSS 变量 -tag: New ---- - - -:::info{title=Tips} -X 的理念是拥抱未来，X 中将永久开启 CSS 变量功能，且这也是 antd v6 要做的事情。 -::: - -## 进阶使用 - -### 关闭 hash - -hash 是 Ant Design 5.0 以来的特性之一，其功能是为每一份主题计算一个独特的 hash 值，并将其用在组件的 class 上，用于隔离主题样式。 - -但是启用了 CSS 变量之后，相同 antd 版本下的组件样式将不会随着 token 变化而改变 —— 因为我们用 CSS 变量填充了样式中的动态部分。所以如果你的应用中只存在一个版本的 antd，你可以选择关闭 hash 来进一步减小样式体积： - -```tsx - - - -``` - -同时我们非常推荐使用 `extractStyle` 来抽取静态样式，这样会为应用性能带来一定量的提升。 - -### 修改主题 - -在 CSS 变量模式下，修改主题的方法与之前无异，参考 [定制主题](/docs/react/customize-theme-cn)。 - -## API - -`cssVar` 目前支持的参数： - -| 属性 | 说明 | 类型 | 默认值 | 版本 | -| --- | --- | --- | --- | --- | -| prefix | CSS 变量的前缀，默认与 ConfigProvider 上配置的 `prefixCls` 相同。 | string | `ant` | 5.12.0 | -| key | 当前主题的唯一识别 key. 在 React 18 中会默认用 `useId` 填充，小于 React 18 的版本需要手动填充。 | string | `useId` in React 18 | 5.12.0 | diff --git a/docs/react/introduce.en-US.md b/docs/react/introduce.en-US.md index cb81efc4..4ad5d59b 100644 --- a/docs/react/introduce.en-US.md +++ b/docs/react/introduce.en-US.md @@ -6,7 +6,7 @@ title: Ant Design X of React Following the Ant Design specification, we developed a React UI library `@ant-design/x` that Crafting AI-driven interfaces with React, seamlessly integrating smart chat components and API services at your fingertips.
- + +
@@ -15,101 +15,147 @@ Following the Ant Design specification, we developed a React UI library `@ant-de ## ✨ Features -- 🌈 Enterprise-class UI designed for web applications. -- 📦 A set of high-quality React components out of the box. -- 🛡 Written in TypeScript with predictable static types. -- ⚙️ Whole package of design resources and development tools. -- 🌍 Internationalization support for dozens of languages. -- 🎨 Powerful theme customization in every detail. +- 🌈 **Derived from Best Practices of Enterprise-Level AI Products**: Built on the RICH interaction paradigm, delivering an exceptional AI interaction experience. +- 🧩 **Flexible and Diverse Atomic Components**: Covers most AI dialogue scenarios, empowering you to quickly build personalized AI interaction interfaces. +- ⚡ **Out-of-the-Box Model Integration**: Easily connect with inference services compatible with OpenAI standards. +- 🔄 **Efficient Management of Conversation Data Flows**: Provides powerful tools for managing data flows, enhancing development efficiency. +- 📦 **Rich Template Support**: Offers multiple templates for quickly starting LUI application development. +- 🛡 **Complete TypeScript Support**: Developed with TypeScript, ensuring robust type coverage to improve the development experience and reliability. +- 🎨 **Advanced Theme Customization**: Supports fine-grained style adjustments to meet diverse use cases and personalization needs. -## Environment Support +## 📦 Installation -- Modern browsers -- Server-side Rendering -- [Electron](https://www.electronjs.org/) +### Using npm or yarn or pnpm or bun -| [Edge](http://godban.github.io/browsers-support-badges/)
Edge | [Firefox](http://godban.github.io/browsers-support-badges/)
Firefox | [Chrome](http://godban.github.io/browsers-support-badges/)
Chrome | [Safari](http://godban.github.io/browsers-support-badges/)
Safari | [Opera](http://godban.github.io/browsers-support-badges/)
Opera | [Electron](http://godban.github.io/browsers-support-badges/)
Electron | -| --- | --- | --- | --- | --- | --- | -| Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions | +**We recommend using [npm](https://www.npmjs.com/) or [yarn](https://github.com/yarnpkg/yarn/) or [pnpm](https://pnpm.io/) or [bun](https://bun.sh/) to install**, it not only makes development easier, but also allow you to take advantage of the rich ecosystem of Javascript packages and tooling. -Polyfills are needed for IE browsers. We recommend [@babel/preset-env](https://babeljs.io/docs/en/babel-preset-env) for it. You can set `targets` config if you are using [umi](http://umijs.org/). + -## Version +If you are in a bad network environment, you can try other registries and tools like [cnpm](https://github.com/cnpm/cnpm). -- Stable: [![npm package](https://img.shields.io/npm/v/@ant-design/x.svg?style=flat-square)](https://www.npmjs.com/package/@ant-design/x) +### Import in Browser -You can subscribe to this feed for new version notifications: https://github.com/ant-design/x/releases.atom +Add `script` and `link` tags in your browser and use the global variable `antd`. -## Installation +We provide `antdx.js`, `antdx.min.js`, and `antdx.min.js.map` in the `dist` directory of the npm package. -### Using npm or yarn or pnpm or bun +## 🧩 Atomic Components -**We recommend using [npm](https://www.npmjs.com/) or [yarn](https://github.com/yarnpkg/yarn/) or [pnpm](https://pnpm.io/) or [bun](https://bun.sh/) to install**, it not only makes development easier, but also allow you to take advantage of the rich ecosystem of Javascript packages and tooling. +Based on the RICH interaction paradigm, we provide numerous atomic components for various stages of interaction to help you flexibly build your AI dialogue applications: - +- General: `Bubble` - Message bubble, `Conversations` - Conversation management +- Wake-Up: `Welcome` - Welcome messages, `Prompts` - Prompt sets +- Expression: `Sender` - Input box, `Attachment` - Attachments, `Suggestion` - Quick commands +- Confirmation: `ThoughtChain` - Thought chains -If you are in a bad network environment, you can try other registries and tools like [cnpm](https://github.com/cnpm/cnpm). +Below is an example of using atomic components to create a simple chatbot interface: -### Import in Browser +```tsx +import React from 'react'; +import { + // Message bubble + Bubble, + // Input box + Sender, +} from '@ant-design/x'; + +const messages = [ + { + content: 'Hello, Ant Design X!', + role: 'user', + }, +]; + +const App = () => ( +
+ + +
+); -Add `script` and `link` tags in your browser and use the global variable `antd`. +export default App; +``` + +## ⚡️ Connecting to Model Inference Services -We provide `antdx.js`, `antdx.min.js`, and `antdx.min.js.map` in the `dist` directory of the npm package. You can also download them via [![CDNJS](https://img.shields.io/cdnjs/v/@ant-design/x.svg?style=flat-square)](https://cdnjs.com/libraries/@ant-design), [![](https://data.jsdelivr.com/v1/package/npm/@ant-design/x/badge)](https://www.jsdelivr.com/package/npm/@ant-design/x), or [UNPKG](https://unpkg.com/@ant-design/x/dist/). +With the `useXAgent` runtime tool, we make it easy to connect with model inference services that adhere to OpenAI standards. -> **We strongly discourage loading the entire files** this will add bloat to your application and make it more difficult to receive bugfixes and updates. Antd is intended to be used in conjunction with a build tool, such as [webpack](https://webpack.github.io/), which will make it easy to import only the parts of antd that you are using. +Here’s an example of using `useXAgent`: -> Note: You should import `react`、`react-dom`、`dayjs` before using `antdx.js`. +```tsx +import React from 'react'; +import { useXAgent, Sender } from '@ant-design/x'; -## Usage +const App = () => { + const [agent] = useXAgent({ + // Model inference service URL + baseURL: 'https://your.api.host', + // Model name + model: 'gpt-3.5', + }); + + function chatRequest(text: string) { + agent.request({ + // Message + messages: [ + { + content: text, + role: 'user', + }, + ], + // Enable streaming + stream: true, + }); + } + + return ; +}; -```jsx +export default App; +``` + +## 🔄 Efficient Management of Data Flows + +Using the `useXChat` runtime tool, you can easily manage data flows in AI dialogue applications: + +```tsx import React from 'react'; -import { Bubble } from '@ant-design/x'; +import { useXChat, useXAgent } from '@ant-design/x'; const App = () => { - return ; + const [agent] = useXAgent({ + // Model inference service URL + baseURL: 'https://your.api.host', + // Model name + model: 'gpt-3.5', + }); + + const { + // Initiate a chat request + onRequest, + // Message list + messages, + } = useXChat({ agent }); + + return ( +
+ + +
+ ); }; export default App; ``` -### Use modularized antd +## Use modularized antd `@ant-design/x` supports ES modules tree shaking by default. -### TypeScript +## TypeScript `@ant-design/x` provides a built-in ts definition. -## Links - -- [Home page](/) -- [China Mirrors](https://github.com/ant-design/ant-design/issues/25661) -- [Components](/components/overview) -- [Ant Design Pro](https://pro.ant.design/) -- [Ant Design Pro Components](https://procomponents.ant.design/) -- [Ant Design Charts](https://charts.ant.design) -- [Change Log](/changelog) -- [rc-components](https://react-component.github.io/) -- [Mobile Components](https://mobile.ant.design) -- [Mini Program Components](https://mini.ant.design) -- [Ant Design Icons](https://github.com/ant-design/ant-design-icons) -- [Ant Design Colors](https://github.com/ant-design/ant-design-colors) -- [Landing Pages](https://landing.ant.design) -- [Motion](https://motion.ant.design) -- [Scaffold Market](https://scaffold.ant.design) -- [Developer Instruction](https://github.com/ant-design/ant-design/wiki/Development) -- [Versioning Release Note](https://github.com/ant-design/ant-design/wiki/%E8%BD%AE%E5%80%BC%E8%A7%84%E5%88%99%E5%92%8C%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B) -- [FAQ](/docs/react/faq) -- [CodeSandbox Template](https://u.ant.design/codesandbox-repro) for bug reports -- [Awesome Ant Design](https://github.com/websemantics/awesome-ant-design) -- [Customize Theme](/docs/react/customize-theme) -- [How to Apply for Being A Collaborator](https://github.com/ant-design/ant-design/wiki/Collaborators#how-to-apply-for-being-a-collaborator) - -## Non-React Implementations - -Welcome to contribute! - ## Companies using antdx Ant Design X is widely used in AI-driven user interfaces within Ant Group. If your company and products use Ant Design X, feel free to leave a comment [here](https://github.com/ant-design/x/issues/126). diff --git a/docs/react/introduce.zh-CN.md b/docs/react/introduce.zh-CN.md index b6cccd51..4b2283fa 100644 --- a/docs/react/introduce.zh-CN.md +++ b/docs/react/introduce.zh-CN.md @@ -6,7 +6,7 @@ title: Ant Design X of React `@ant-design/x` 是遵循 Ant Design 设计体系的一个 React UI 库，用于构建由 AI 驱动的界面，一键接入智能对话组件与 API 服务。
- + +
@@ -15,30 +15,13 @@ title: Ant Design X of React ## ✨ 特性 -- 🌈 提炼自企业级中后台产品的交互语言和视觉风格。 -- 📦 开箱即用的高质量 React 组件。 -- 🛡 使用 TypeScript 开发，提供完整的类型定义文件。 -- ⚙️ 全链路开发和设计工具体系。 -- 🌍 数十个国际化语言支持。 -- 🎨 深入每个细节的主题定制能力。 - -## 兼容环境 - -- 现代浏览器 -- 支持服务端渲染。 -- [Electron](https://www.electronjs.org/) - -| [Edge](http://godban.github.io/browsers-support-badges/)
Edge | [Firefox](http://godban.github.io/browsers-support-badges/)
Firefox | [Chrome](http://godban.github.io/browsers-support-badges/)
Chrome | [Safari](http://godban.github.io/browsers-support-badges/)
Safari | [Opera](http://godban.github.io/browsers-support-badges/)
Opera | [Electron](http://godban.github.io/browsers-support-badges/)
Electron | -| --- | --- | --- | --- | --- | --- | -| Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions | - -对于 IE 系列浏览器，需要提供相应的 Polyfill 支持，建议使用 [@babel/preset-env](https://babeljs.io/docs/en/babel-preset-env) 来解决浏览器兼容问题。如果你在使用 [umi](http://umijs.org/)，可以直接使用 [targets](https://umijs.org/zh/config/#targets) 配置。 - -## 版本 - -- 稳定版： [![npm package](https://img.shields.io/npm/v/@ant-design/x.svg?style=flat-square)](https://www.npmjs.com/package/@ant-design/x) - -你可以订阅：https://github.com/ant-design/x/releases.atom 来获得版本发布的通知。 +- 🌈 **源自企业级 AI 产品的最佳实践**：基于 RICH 交互范式，提供卓越的 AI 交互体验 +- 🧩 **灵活多样的原子组件**：覆盖绝大部分 AI 对话场景，助力快速构建个性化 AI 交互页面 +- ⚡ **开箱即用的模型对接能力**：轻松对接符合 OpenAI 标准的模型推理服务 +- 🔄 **高效管理对话数据流**：提供好用的数据流管理功能，让开发更高效 +- 📦 **丰富的样板间支持**：提供多种模板，快速启动 LUI 应用开发 +- 🛡 **TypeScript 全覆盖**：采用 TypeScript 开发，提供完整类型支持，提升开发体验与可靠性 +- 🎨 **深度主题定制能力**：支持细粒度的样式调整，满足各种场景的个性化需求 ## 安装 @@ -46,7 +29,7 @@ title: Ant Design X of React **我们推荐使用 [npm](https://www.npmjs.com/) 或 [yarn](https://github.com/yarnpkg/yarn/) 或 [pnpm](https://pnpm.io/zh/) 或 [bun](https://bun.sh/) 的方式进行开发**，不仅可在开发环境轻松调试，也可放心地在生产环境打包部署使用，享受整个生态圈和工具链带来的诸多好处。 - + 如果你的网络环境不佳，推荐使用 [cnpm](https://github.com/cnpm/cnpm)。 @@ -54,63 +37,129 @@ title: Ant Design X of React 在浏览器中使用 `script` 和 `link` 标签直接引入文件，并使用全局变量 `antdx`。 -我们在 npm 发布包内的 dist 目录下提供了 `antdx.js`、`antdx.min.js` 和 `antdx.min.js.map`。你也可以通过 [![CDNJS](https://img.shields.io/cdnjs/v/@ant-design/x.svg?style=flat-square)](https://cdnjs.com/libraries/@ant-design)，[![](https://data.jsdelivr.com/v1/package/npm/@ant-design/x/badge)](https://www.jsdelivr.com/package/npm/@ant-design/x) 或 [UNPKG](https://unpkg.com/@ant-design/x/dist/) 进行下载。 +我们在 npm 发布包内的 dist 目录下提供了 `antdx.js`、`antdx.min.js` 和 `antdx.min.js.map`。 > **强烈不推荐使用已构建文件**，这样无法按需加载，而且难以获得底层依赖模块的 bug 快速修复支持。 > 注意：`antdx.js` 和 `antdx.min.js` 依赖 `react`、`react-dom`、`dayjs`，请确保提前引入这些文件。 -## 示例 +## 🧩 原子组件 + +我们基于 RICH 交互范式，在不同的交互阶段提供了大量的原子组件，帮助你灵活搭建你的 AI 对话应用： -```jsx +- 通用: `Bubble` - 消息气泡、`Conversations` - 会话管理 +- 唤醒: `Welcome` - 欢迎、`Prompts` - 提示集 +- 表达: `Sender` - 发送框、`Attachment` - 附件、`Suggestion` - 快捷指令 +- 确认: `ThoughtChain` - 思维链 + +下面是使用原子组件搭建一个最简单的对话框的代码示例: + +```tsx import React from 'react'; -import { Bubble } from '@ant-design/x'; +import { + // 消息气泡 + Bubble, + // 发送框 + Sender, +} from '@ant-design/x'; + +const messages = [ + { + content: 'Hello, Ant Design X!', + role: 'user', + }, +]; + +const App = () => ( +
+ + +
+); + +export default App; +``` + +## ⚡️ 对接模型推理服务 + +我们通过提供 `useXAgent` 运行时工具，帮助你开箱即用的对接符合 OpenAI 标准的模型推理服务。 + +下面是如何使用 `useXAgent` 的代码示例: + +```tsx +import React from 'react'; +import { useXAgent, Sender } from '@ant-design/x'; + +const App = () => { + const [agent] = useXAgent({ + // 模型推理服务地址 + baseURL: 'https://your.api.host', + // 模型名称 + model: 'gpt-3.5', + }); + + function chatRequest(text: string) { + agent.request({ + // 消息 + messages: [ + { + content: text, + role: 'user', + }, + ], + // 开启流式 + stream: true, + }); + } + + return ; +}; + +export default App; +``` + +## 🔄 高效管理数据流 + +我们通过提供 `useXChat` 运行时工具，帮助你开箱即用的管理 AI 对话应用的数据流: + +```tsx +import React from 'react'; +import { useXChat, useXAgent } from '@ant-design/x'; const App = () => { - return ; + const [agent] = useXAgent({ + // 模型推理服务地址 + baseURL: 'https://your.api.host', + // 模型名称 + model: 'gpt-3.5', + }); + + const { + // 发起聊天请求 + onRequest, + // 消息列表 + messages, + } = useXChat({ agent }); + + return ( +
+ + +
+ ); }; export default App; ``` -### 按需加载 +## 按需加载 `@ant-design/x` 默认支持基于 ES modules 的 tree shaking。 -### TypeScript +## TypeScript `@ant-design/x` 使用 TypeScript 进行书写并提供了完整的定义文件。 -## 链接 - -- [首页](/index-cn) -- [所有组件](/components/overview-cn) -- [国内镜像](https://github.com/ant-design/ant-design/issues/25661) -- [Ant Design Pro](https://pro.ant.design/) -- [Ant Design Pro Components](https://procomponents.ant.design/) -- [Ant Design Charts](https://charts.ant.design) -- [更新日志](/changelog) -- [React 底层基础组件](https://react-component.github.io/) -- [Ant Design Mobile](https://mobile.ant.design) -- [Ant Design Mini](https://mini.ant.design) -- [Ant Design 图标](https://github.com/ant-design/ant-design-icons) -- [Ant Design 色彩](https://github.com/ant-design/ant-design-colors) -- [首页模板集](https://landing.ant.design) -- [动效](https://motion.ant.design) -- [脚手架市场](https://scaffold.ant.design) -- [设计规范速查手册](https://github.com/ant-design/ant-design/wiki/Ant-Design-%E8%AE%BE%E8%AE%A1%E5%9F%BA%E7%A1%80%E7%AE%80%E7%89%88) -- [开发者说明](https://github.com/ant-design/ant-design/wiki/Development) -- [版本发布规则](https://github.com/ant-design/ant-design/wiki/%E8%BD%AE%E5%80%BC%E8%A7%84%E5%88%99%E5%92%8C%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B) -- [常见问题](/docs/react/faq) -- [CodeSandbox 模板](https://u.ant.design/codesandbox-repro) for bug reports -- [Awesome Ant Design](https://github.com/websemantics/awesome-ant-design) -- [定制主题](/docs/react/customize-theme) -- [成为社区协作成员](https://github.com/ant-design/ant-design/wiki/Collaborators#how-to-apply-for-being-a-collaborator) - -## 非 React 的实现 - -欢迎参与贡献！ - ## 谁在使用 Ant Design X 广泛用于蚂蚁集团内由 AI 驱动的用户交互界面。如果你的公司和产品使用了 Ant Design X，欢迎到 [这里](https://github.com/ant-design/x/issues/126) 留言。 diff --git a/docs/react/recommendation.en-US.md b/docs/react/recommendation.en-US.md deleted file mode 100644 index 1d1c568a..00000000 --- a/docs/react/recommendation.en-US.md +++ /dev/null @@ -1,76 +0,0 @@ ---- -group: - title: Other - order: 3 -order: 0 -title: Third-Party Libraries ---- - -`antd` is built to implement [a set of high-quality React UI components](/components/overview) which follow Ant Design specification. It is impossible to include all useful components in one package, so we also recommend that using other great third-party libraries in React community. - -| Category | Recommended Components | -| --- | --- | -| Visualization and charts | [Ant Design Charts](https://charts.ant.design) [AntV Data Visualization](https://antv.vision/en) [reactflow](https://reactflow.dev/) | -| React Hooks Library | [ahooks](https://github.com/alibaba/hooks) | -| React Form Library | [ProForm](https://procomponents.ant.design/components/form) [Formily](https://github.com/alibaba/formily) [react-hook-form](https://github.com/react-hook-form/react-hook-form) [formik](https://github.com/formium/formik) | -| Router | [react-router](https://github.com/ReactTraining/react-router) | -| Layout | [react-grid-layout](https://github.com/react-grid-layout/react-grid-layout) [react-grid-system](https://github.com/sealninja/react-grid-system) [rc-dock](https://github.com/ticlo/rc-dock) | -| Drag and drop | [dnd-kit](https://github.com/clauderic/dnd-kit) [react-beautiful-dnd](https://github.com/atlassian/react-beautiful-dnd/) [react-dnd](https://github.com/gaearon/react-dnd) | -| Code Editor | [react-codemirror2](https://github.com/scniro/react-codemirror2) [react-monaco-editor](https://github.com/react-monaco-editor/react-monaco-editor) | -| Rich Text Editor | [react-quill](https://github.com/zenoamaro/react-quill) | -| JSON Viewer | [react-json-view](https://github.com/mac-s-g/react-json-view) | -| Color Picker | [react-colorful](https://github.com/omgovich/react-colorful) [react-color](http://casesandberg.github.io/react-color/) | -| Media Query | [react-responsive](https://github.com/contra/react-responsive) | -| Copy to clipboard | [react-copy-to-clipboard](https://github.com/nkbt/react-copy-to-clipboard) | -| Document head manager | [react-helmet-async](https://github.com/staylor/react-helmet-async) | -| Icons | [react-fontawesome](https://github.com/FortAwesome/react-fontawesome) [react-icons](https://github.com/gorangajic/react-icons) | -| QR Code | [qrcode.react](https://github.com/zpao/qrcode.react) | -| Top Progress Bar | [react-nprogress](https://github.com/tanem/react-nprogress) | -| i18n | [FormatJS](https://github.com/formatjs/formatjs) [react-i18next](https://react.i18next.com) | -| Code highlight | [react-syntax-highlighter](https://github.com/conorhastings/react-syntax-highlighter) | -| Markdown renderer | [react-markdown](https://remarkjs.github.io/react-markdown/) | -| Infinite Scroll | [rc-virtual-list](https://github.com/react-component/virtual-list/) [react-infinite-scroll-component](https://github.com/ankeetmaini/react-infinite-scroll-component) | -| Map | [google-map-react](https://github.com/istarkov/google-map-react) [@uiw/react-amap](https://github.com/uiwjs/react-amap) | -| Video | [react-player](https://github.com/CookPete/react-player) [video-react](https://github.com/video-react/video-react) [video.js](http://docs.videojs.com/tutorial-react.html) | -| Context Menu | [react-contexify](https://github.com/fkhadra/react-contexify) | -| Emoji | [emoji-mart](https://github.com/missive/emoji-mart) [react-resizable-panels](https://github.com/bvaughn/react-resizable-panels) | -| Split View | [react-split-pane](https://github.com/tomkp/react-split-pane) | -| Image Crop | [antd-img-crop](https://github.com/nanxiaobei/antd-img-crop) [react-image-crop](https://github.com/DominicTobias/react-image-crop) | -| Keywords highlight | [react-highlight-words](https://github.com/bvaughn/react-highlight-words) | -| Text Loop | [react-text-loop-next](https://github.com/samarmohan/react-text-loop-next) [react-fast-marquee](https://github.com/justin-chu/react-fast-marquee) | -| Animation | [framer-motion](https://github.com/framer/motion) [Ant Motion](https://motion.ant.design/components/tween-one) [react-spring](https://github.com/pmndrs/react-spring) | -| Page Footer | [rc-footer](https://github.com/react-component/footer) | -| Number/Currency | [react-countup](https://www.npmjs.com/package/react-countup) [react-number-format](https://github.com/s-yadav/react-number-format) [react-currency-input-field](https://github.com/cchanxzy/react-currency-input-field) | -| Application Frameworks | [umi](https://github.com/umijs/umi/) [remix](https://github.com/remix-run/remix) [refine](https://github.com/pankod/refine) | -| Flow-based UI | [pro-flow](https://github.com/ant-design/pro-flow) [react-flow](https://github.com/wbkd/react-flow) [x6](https://github.com/antvis/x6) | -| Phone Input | [react-phone-number-input](https://gitlab.com/catamphetamine/react-phone-number-input) [antd-phone-input](https://github.com/ArtyomVancyan/antd-phone-input/) | -| AI Chat | [pro-chat](https://github.com/ant-design/pro-chat) | - -## Products we are using ✨ - -There are some products to recommend for developer/designer/product manager. - -| Category | Recommended Products | -| ----------------- | --------------------------------------------------------------------- | -| Documentation | [🐦 Yuque](https://www.yuque.com/?chInfo=ch_antd) | -| Icon | [Iconfont](https://www.iconfont.cn/) | -| Sketch plugin | [Kitchen](https://kitchen.alipay.com) | -| Online Playground | [codesandbox](https://codesandbox.io/) [codepen](https://codepen.io/) | -| Image Compressor | [tinypng](https://tinypng.com/) | - - diff --git a/docs/react/recommendation.zh-CN.md b/docs/react/recommendation.zh-CN.md deleted file mode 100644 index 10b5e132..00000000 --- a/docs/react/recommendation.zh-CN.md +++ /dev/null @@ -1,78 +0,0 @@ ---- -group: - title: 其他 - order: 3 -order: 0 -title: 社区精选组件 ---- - -`antd` 是基于 Ant Design 设计规范实现的 [高质量 React 组件库](/components/overview)，我们倾向于只提供符合该规范且带有视觉展现的 UI 组件，也尽量不重复造轮子。我们推荐使用以下社区已有的优秀实现，与 antd 形成互补。 - -| 类型 | 推荐组件 | -| --- | --- | -| 可视化图表 | [Ant Design Charts](https://charts.ant.design) [AntV 数据可视化解决方案](https://antv.vision/zh) [reactflow](https://reactflow.dev/) | -| React Hooks 库 | [ahooks](https://github.com/alibaba/hooks) | -| 表单 | [ProForm](https://procomponents.ant.design/components/form) [Formily](https://github.com/alibaba/formily) [react-hook-form](https://github.com/react-hook-form/react-hook-form) [formik](https://github.com/formium/formik) | -| 路由 | [react-router](https://github.com/ReactTraining/react-router) | -| 布局 | [react-grid-layout](https://github.com/react-grid-layout/react-grid-layout) [react-grid-system](https://github.com/sealninja/react-grid-system) [rc-dock](https://github.com/ticlo/rc-dock) | -| 拖拽 | [dnd-kit](https://github.com/clauderic/dnd-kit) [react-beautiful-dnd](https://github.com/atlassian/react-beautiful-dnd/) [react-dnd](https://github.com/gaearon/react-dnd) | -| 代码编辑器 | [@uiw/react-codemirror](https://github.com/uiwjs/react-codemirror) [react-monaco-editor](https://github.com/react-monaco-editor/react-monaco-editor) | -| 富文本编辑器 | [react-quill](https://github.com/zenoamaro/react-quill) | -| JSON 编辑器 | [vanilla-jsoneditor](https://github.com/josdejong/svelte-jsoneditor) | -| JSON 显示器 | [react-json-view](https://github.com/mac-s-g/react-json-view) | -| 拾色器 | [react-colorful](https://github.com/omgovich/react-colorful) [react-color](http://casesandberg.github.io/react-color/) | -| 响应式 | [react-responsive](https://github.com/contra/react-responsive) | -| 复制到剪贴板 | [react-copy-to-clipboard](https://github.com/nkbt/react-copy-to-clipboard) | -| 页面 meta 属性 | [react-helmet-async](https://github.com/staylor/react-helmet-async) | -| 图标 | [react-fontawesome](https://github.com/FortAwesome/react-fontawesome) [react-icons](https://github.com/gorangajic/react-icons) | -| 二维码 | [qrcode.react](https://github.com/zpao/qrcode.react) | -| 顶部进度条 | [react-nprogress](https://github.com/tanem/react-nprogress) | -| 应用国际化 | [FormatJS](https://github.com/formatjs/formatjs) [react-i18next](https://react.i18next.com) | -| 代码高亮 | [react-syntax-highlighter](https://github.com/conorhastings/react-syntax-highlighter) | -| Markdown 渲染 | [react-markdown](https://remarkjs.github.io/react-markdown/) | -| 无限滚动 | [rc-virtual-list](https://github.com/react-component/virtual-list/) [react-infinite-scroll-component](https://github.com/ankeetmaini/react-infinite-scroll-component) | -| 地图 | [google-map-react](https://github.com/istarkov/google-map-react) [@uiw/react-amap 高德地图](https://github.com/uiwjs/react-amap) | -| 视频播放 | [react-player](https://github.com/CookPete/react-player) [video-react](https://github.com/video-react/video-react) [video.js](http://docs.videojs.com/tutorial-react.html) | -| 右键菜单 | [react-contexify](https://github.com/fkhadra/react-contexify) | -| Emoji | [emoji-mart](https://github.com/missive/emoji-mart) | -| 分割面板 | [react-split-pane](https://github.com/tomkp/react-split-pane) [react-resizable-panels](https://github.com/bvaughn/react-resizable-panels) | -| 图片裁切 | [antd-img-crop](https://github.com/nanxiaobei/antd-img-crop) [react-image-crop](https://github.com/DominicTobias/react-image-crop) | -| 关键字高亮 | [react-highlight-words](https://github.com/bvaughn/react-highlight-words) | -| 文字轮播 | [react-text-loop-next](https://github.com/samarmohan/react-text-loop-next) [react-fast-marquee](https://github.com/justin-chu/react-fast-marquee) | -| 动画 | [framer-motion](https://github.com/framer/motion) [Ant Motion](https://motion.ant.design/components/tween-one) [react-spring](https://github.com/pmndrs/react-spring) | -| 页脚 | [rc-footer](https://github.com/react-component/footer) | -| 数字/金额 | [react-number-format](https://github.com/s-yadav/react-number-format) [react-currency-input-fiel](https://github.com/cchanxzy/react-currency-input-field) | -| 移动端探测 | [react-device-detect](https://github.com/duskload/react-device-detect) | -| 应用程序框架 | [umi](https://github.com/umijs/umi) [remix](https://github.com/remix-run/remix) [refine](https://github.com/pankod/refine) | -| Flow 流 | [pro-flow](https://github.com/ant-design/pro-flow) [react-flow](https://github.com/wbkd/react-flow) [x6](https://github.com/antvis/x6) | -| 电话输入 | [react-phone-number-input](https://gitlab.com/catamphetamine/react-phone-number-input) [antd-phone-input](https://github.com/ArtyomVancyan/antd-phone-input/) | -| AI 对话界面 | [pro-chat](https://github.com/ant-design/pro-chat) | - -## 推荐产品 ✨ - -还有一些常用的前端/设计/产品相关的工具推荐给大家使用。 - -| 类型 | 推荐产品 | -| ------------ | --------------------------------------------------------------------- | -| 文档管理 | [🐦 语雀](https://www.yuque.com/?chInfo=ch_antd) | -| 图标 | [阿里巴巴矢量图标库](https://www.iconfont.cn/) | -| Sketch 插件 | [Kitchen](https://kitchen.alipay.com) | -| 在线代码编辑 | [codesandbox](https://codesandbox.io/) [codepen](https://codepen.io/) | -| 图片压缩 | [tinypng](https://tinypng.com/) | - - diff --git a/docs/spec/authentic-consistent.en-US.md b/docs/spec/authentic-consistent.en-US.md new file mode 100644 index 00000000..6c632e85 --- /dev/null +++ b/docs/spec/authentic-consistent.en-US.md @@ -0,0 +1,65 @@ +--- +group: + title: 🎭 Role 角色设计 + order: 2 +order: 1 +title: 真实一致 +--- + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*--NqR78UDjUAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

如何定义

+为了增加角色的可信度和真实感，角色的视觉表达以及性格等特征需要在不同的场景中保持一致。具体来说，角色的行为模式和语言风格都应该符合我们对角色的基础背景设定。在与用户的互动中，不同的对话环境下，保持角色前后的一致性，避免用户产生跳出感，从而持续获得符合预期的互动体验。 + +:::tips + +

性格特征一致

+强调角色的内心世界和外在行为之间的一致性。行为、反应、决策和情感表达应与其性格描述相吻合，无论是平静的日常互动还是紧张的情节发展，角色性格特征都应保持一致，以增强角色的可信度和深度。 + +::: + +:::tips + +

视觉表达一致

+角色的外观设计、服装选择、动作表现和表情变化在不同场景和时间点上保持连贯和一致。这包括色彩、图形、姿态和风格等元素，确保角色形象的统一性，使观众能够轻松识别并记住角色。 + +::: + +:::tips + +

**语言风格一致**

+角色的说话方式、用词选择、语气和表达习惯。角色的语言风格应与其性格、背景和情感状态相匹配，无论是在正式场合还是非正式交流中，角色的语言表达都应保持一致，以增强角色的个性和真实感。 + +::: + +:::tips + +

行为模式一致

+在不同情境下的行为反应和处理方式具有连贯性和可预测性。角色的行为模式应与其性格特征、背景故事和当前情境相协调，确保角色在故事发展中的每一个决策和行动都显得合理和自然。 + +::: + +

适用场景

+角色的一致性原则适用于教育辅导、在线咨询、娱乐互动及任何需要与用户进行深度交互的 AI 场景。在这些场景中，角色的一致性能够帮助用户更好地理解 AI 的意图和功能，从而提高交互效率和满意度。 + +- **虚拟助手：**高一致性的虚拟助手，能够帮助用户建立起对它的信任。当用户知道他们可以预期什么样的反应和帮助时，会感觉更加安心，认为虚拟助手是可靠的信息来源和问题解决伙伴。 +- **客户服务**：语言、行为和知识库的一致性，可以确保客户在每次交互中都能获得相同水平的服务，这有助于提升整体的服务质量。 +- **游戏角色**：一个始终保持风趣和友好的角色可以提升用户的娱乐体验，角色背景、性格、形象的一致性，也可以深化角色身份的认同，使角色更为真实沉浸。 +- **教育辅导**：一个始终保持耐心和专业的角色可以帮助用户更好地吸收知识，一致性的表现也帮助用户在辅导过程中感受到连贯性和可靠性，减少学习上的焦虑和压力。 +- **健康顾问**：专业、稳定的互动表现，可以有效增强用户对健康顾问的信任，促进用户积极参与治疗过程，最终达到更好的健康管理效果。 +- **心理咨询**：言行一致、情绪稳定的角色，有助于建立用户对角色的信任，让用户感到安全，更愿意开放心扉，分享内心深处的感受和困扰。 + + …… + +

最佳案例

+

1、为角色赋予独特且符合其背景的性格特征、行为模式、语言风格

+**性格特征、行为模式、语言风格**的设定，都源于角色的故事背景，我们可以为角色设定详细而富有逻辑的角色背景，能让用户在了解角色时，感受到角色的深度和立体感。如一些“基本属性”，姓名、性别、年龄、昵称等，还可以为角色指定一个“职业”，如律师、医生、客服等，也可以为角色赋予一个背景故事，出生环境、成长经历、教育经历、家庭情况等。 + +在背景故事的基础上，可以分别对**性格特征、行为模式、语言风格**进行更详细的剖析和设定，从而保证角色由内到外都有一致的体验。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*0MTlRYAWlCQAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

2、为角色设计统一且符合其背景特征的形象和视觉表达

+为角色设计统一且符合其背景特征的形象，能让用户捕捉并强化对角色的符号记忆，形成统一的印象。可以从形象类型、外貌特征、声音音色和行为动作等方面，详细设计角色的外在形象。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*0MTlRYAWlCQAAAAAAAAAAAAADgCCAQ/fmt.webp) diff --git a/docs/spec/authentic-consistent.zh-CN.md b/docs/spec/authentic-consistent.zh-CN.md new file mode 100644 index 00000000..6c632e85 --- /dev/null +++ b/docs/spec/authentic-consistent.zh-CN.md @@ -0,0 +1,65 @@ +--- +group: + title: 🎭 Role 角色设计 + order: 2 +order: 1 +title: 真实一致 +--- + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*--NqR78UDjUAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

如何定义

+为了增加角色的可信度和真实感，角色的视觉表达以及性格等特征需要在不同的场景中保持一致。具体来说，角色的行为模式和语言风格都应该符合我们对角色的基础背景设定。在与用户的互动中，不同的对话环境下，保持角色前后的一致性，避免用户产生跳出感，从而持续获得符合预期的互动体验。 + +:::tips + +

性格特征一致

+强调角色的内心世界和外在行为之间的一致性。行为、反应、决策和情感表达应与其性格描述相吻合，无论是平静的日常互动还是紧张的情节发展，角色性格特征都应保持一致，以增强角色的可信度和深度。 + +::: + +:::tips + +

视觉表达一致

+角色的外观设计、服装选择、动作表现和表情变化在不同场景和时间点上保持连贯和一致。这包括色彩、图形、姿态和风格等元素，确保角色形象的统一性，使观众能够轻松识别并记住角色。 + +::: + +:::tips + +

**语言风格一致**

+角色的说话方式、用词选择、语气和表达习惯。角色的语言风格应与其性格、背景和情感状态相匹配，无论是在正式场合还是非正式交流中，角色的语言表达都应保持一致，以增强角色的个性和真实感。 + +::: + +:::tips + +

行为模式一致

+在不同情境下的行为反应和处理方式具有连贯性和可预测性。角色的行为模式应与其性格特征、背景故事和当前情境相协调，确保角色在故事发展中的每一个决策和行动都显得合理和自然。 + +::: + +

适用场景

+角色的一致性原则适用于教育辅导、在线咨询、娱乐互动及任何需要与用户进行深度交互的 AI 场景。在这些场景中，角色的一致性能够帮助用户更好地理解 AI 的意图和功能，从而提高交互效率和满意度。 + +- **虚拟助手：**高一致性的虚拟助手，能够帮助用户建立起对它的信任。当用户知道他们可以预期什么样的反应和帮助时，会感觉更加安心，认为虚拟助手是可靠的信息来源和问题解决伙伴。 +- **客户服务**：语言、行为和知识库的一致性，可以确保客户在每次交互中都能获得相同水平的服务，这有助于提升整体的服务质量。 +- **游戏角色**：一个始终保持风趣和友好的角色可以提升用户的娱乐体验，角色背景、性格、形象的一致性，也可以深化角色身份的认同，使角色更为真实沉浸。 +- **教育辅导**：一个始终保持耐心和专业的角色可以帮助用户更好地吸收知识，一致性的表现也帮助用户在辅导过程中感受到连贯性和可靠性，减少学习上的焦虑和压力。 +- **健康顾问**：专业、稳定的互动表现，可以有效增强用户对健康顾问的信任，促进用户积极参与治疗过程，最终达到更好的健康管理效果。 +- **心理咨询**：言行一致、情绪稳定的角色，有助于建立用户对角色的信任，让用户感到安全，更愿意开放心扉，分享内心深处的感受和困扰。 + + …… + +

最佳案例

+

1、为角色赋予独特且符合其背景的性格特征、行为模式、语言风格

+**性格特征、行为模式、语言风格**的设定，都源于角色的故事背景，我们可以为角色设定详细而富有逻辑的角色背景，能让用户在了解角色时，感受到角色的深度和立体感。如一些“基本属性”，姓名、性别、年龄、昵称等，还可以为角色指定一个“职业”，如律师、医生、客服等，也可以为角色赋予一个背景故事，出生环境、成长经历、教育经历、家庭情况等。 + +在背景故事的基础上，可以分别对**性格特征、行为模式、语言风格**进行更详细的剖析和设定，从而保证角色由内到外都有一致的体验。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*0MTlRYAWlCQAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

2、为角色设计统一且符合其背景特征的形象和视觉表达

+为角色设计统一且符合其背景特征的形象，能让用户捕捉并强化对角色的符号记忆，形成统一的印象。可以从形象类型、外貌特征、声音音色和行为动作等方面，详细设计角色的外在形象。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*0MTlRYAWlCQAAAAAAAAAAAAADgCCAQ/fmt.webp) diff --git a/docs/spec/confirm-generation-process.en-US.md b/docs/spec/confirm-generation-process.en-US.md new file mode 100644 index 00000000..bfaa0646 --- /dev/null +++ b/docs/spec/confirm-generation-process.en-US.md @@ -0,0 +1,58 @@ +--- +group: + title: 💻 Hybrid UI 混合界面设计 + order: 4 +order: 5 +title: 确认｜生成过程 +--- + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*bsGjTaJWgR4AAAAAAAAAAAAADgCCAQ/fmt.webp) + +在用户向AI表达意图后等待AI回复的过程中，需向用户展示AI处理请求、生成内容或执行任务的进程与状态。 + +

设计目标

+ +处理过程反馈需要通过流式输出等方式给予用户及时响应，让用户清晰感知AI的工作状态，建立恰当的等待预期。在部分业务场景中，需要完整展现AI的思考过程和处理阶段，减少黑盒感，提升用户对系统的信任度和理解度。 + +--- + +

内容动态加载

+ +

动画加载

+系统接收到用户请求后立即触发的状态反馈。轻量的动画效果既能让用户知道系统已开始处理，又不会带来视觉干扰。动画要即时触发、简洁克制，让用户感知到明确的响应。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*w5T-R6Q2tM0AAAAAAAAAAAAADgCCAQ/fmt.webp) + +

流式输出

+AI处理文本内容时的实时反馈形式。默认使用打字机光标效果，让用户能感知生成节奏；但在模型响应速度非常快时，应直接展示完整内容。保持输出内容的可读性，让用户能实时阅读已生成部分。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*w5T-R6Q2tM0AAAAAAAAAAAAADgCCAQ/fmt.webp) + +

进度展示

+用于异步生成场景下的状态反馈。通过进度百分比或处理阶段提示，展示当前任务进展。对于耗时较长的任务，提供预估完成时间，帮助用户建立等待预期。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*nbk_Q4EfmR0AAAAAAAAAAAAADgCCAQ/fmt.webp) + +

异常状态展示

+ +

生成失败

+当请求处理失败时，及时展示失败原因和可采取的措施。失败提示要醒目但不刺激，文案简洁明确，提供如重试等后续操作建议。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*jSdGT4NGzy0AAAAAAAAAAAAADgCCAQ/fmt.webp) + +

生成终止

+包括用户主动中断和系统自动终止的情况。终止后保留已生成内容，清晰提示当前状态。对于系统终止，需说明原因并给出建议。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*Ul_rR5Ix1XAAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

思考过程展现

+ +

展示思考阶段

+方便用户理解AI的处理流程和进展。在耗时较长的场景（如深度搜索），展示完整的处理步骤；耗时较短时仅展示当前思考状态。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*QOdOQpy-io8AAAAAAAAAAAAADgCCAQ/fmt.webp) + +

展示思考细节

+通过可展开/收起的形式呈现AI推理的具体步骤和依据。在设计时需要满足用户查看决策过程细节，同时避免信息过载。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*DtBxSYxd7WcAAAAAAAAAAAAADgCCAQ/fmt.webp) diff --git a/docs/spec/confirm-generation-process.zh-CN.md b/docs/spec/confirm-generation-process.zh-CN.md new file mode 100644 index 00000000..bfaa0646 --- /dev/null +++ b/docs/spec/confirm-generation-process.zh-CN.md @@ -0,0 +1,58 @@ +--- +group: + title: 💻 Hybrid UI 混合界面设计 + order: 4 +order: 5 +title: 确认｜生成过程 +--- + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*bsGjTaJWgR4AAAAAAAAAAAAADgCCAQ/fmt.webp) + +在用户向AI表达意图后等待AI回复的过程中，需向用户展示AI处理请求、生成内容或执行任务的进程与状态。 + +

设计目标

+ +处理过程反馈需要通过流式输出等方式给予用户及时响应，让用户清晰感知AI的工作状态，建立恰当的等待预期。在部分业务场景中，需要完整展现AI的思考过程和处理阶段，减少黑盒感，提升用户对系统的信任度和理解度。 + +--- + +

内容动态加载

+ +

动画加载

+系统接收到用户请求后立即触发的状态反馈。轻量的动画效果既能让用户知道系统已开始处理，又不会带来视觉干扰。动画要即时触发、简洁克制，让用户感知到明确的响应。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*w5T-R6Q2tM0AAAAAAAAAAAAADgCCAQ/fmt.webp) + +

流式输出

+AI处理文本内容时的实时反馈形式。默认使用打字机光标效果，让用户能感知生成节奏；但在模型响应速度非常快时，应直接展示完整内容。保持输出内容的可读性，让用户能实时阅读已生成部分。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*w5T-R6Q2tM0AAAAAAAAAAAAADgCCAQ/fmt.webp) + +

进度展示

+用于异步生成场景下的状态反馈。通过进度百分比或处理阶段提示，展示当前任务进展。对于耗时较长的任务，提供预估完成时间，帮助用户建立等待预期。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*nbk_Q4EfmR0AAAAAAAAAAAAADgCCAQ/fmt.webp) + +

异常状态展示

+ +

生成失败

+当请求处理失败时，及时展示失败原因和可采取的措施。失败提示要醒目但不刺激，文案简洁明确，提供如重试等后续操作建议。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*jSdGT4NGzy0AAAAAAAAAAAAADgCCAQ/fmt.webp) + +

生成终止

+包括用户主动中断和系统自动终止的情况。终止后保留已生成内容，清晰提示当前状态。对于系统终止，需说明原因并给出建议。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*Ul_rR5Ix1XAAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

思考过程展现

+ +

展示思考阶段

+方便用户理解AI的处理流程和进展。在耗时较长的场景（如深度搜索），展示完整的处理步骤；耗时较短时仅展示当前思考状态。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*QOdOQpy-io8AAAAAAAAAAAAADgCCAQ/fmt.webp) + +

展示思考细节

+通过可展开/收起的形式呈现AI推理的具体步骤和依据。在设计时需要满足用户查看决策过程细节，同时避免信息过载。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*DtBxSYxd7WcAAAAAAAAAAAAADgCCAQ/fmt.webp) diff --git a/docs/spec/confirm.en-US.md b/docs/spec/confirm.en-US.md new file mode 100644 index 00000000..b5bb37aa --- /dev/null +++ b/docs/spec/confirm.en-US.md @@ -0,0 +1,87 @@ +--- +group: + title: 💭 Conversation 会话设计 + order: 3 +order: 4 +title: 确认 +--- + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*y4fLQ4MNM_kAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

WHAT 概述

+ +在对话设计中，确认设计是一种交互设计策略，它允许用户在与 AI 系统交流时验证其输入内容的解析结果。这种设计不仅提升了用户对输入信息准确性的信心，而且通过建立对话共识，增强了用户在与 AI 互动中的安全感和信任感。此外，确认设计通过维护对话的上下文连贯性，有助于推动对话的深入发展，确保交流的流畅性和效率。通过这种方式，AI 系统能够更准确地理解用户的意图，同时用户也能够即时纠正任何错误或误解，从而提高整体的交互质量。 + +

三类确认形式

+ +

显性确认

+ +显性确认要求用户对系统的理解或操作结果进行明确的响应确认。这种确认方式通常涉及简单的是/否回答，或者使用同义词来明确表达用户的确认意图。 + +在实施显性确认时，系统会暂停进一步的操作，直到收到用户的明确指示。这种确认方式特别适用于那些错误成本较高或需要用户明确同意的场景，例如在执行不可逆操作前的用户确认。 + +显性确认确保了用户对即将执行的操作有充分的认识和同意，从而降低了操作错误的风险。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*E6wURJNuKgUAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

隐性确认

+ +隐性确认是一种更为微妙的确认方式，它通过在后续的对话或操作中隐含地确认用户的信息，而无需用户进行直接回复。这种策略通常涉及系统对用户输入的关键信息进行重复或同义词替换，以此向用户展示系统已经理解了他们的意图。 + +隐性确认适用于那些错误成本较低或系统对识别结果有较高信心的情况，因为它可以提高对话的效率，同时减少用户的交互负担。 + +在实施隐性确认时，系统会通过提炼用户表述的关键内容，并将其融入到响应中，使用户能够快速确认系统已经识别到了这些信息。 + +这种方式的优势在于其效率较高，但劣势在于一旦系统识别错误，用户可能不清楚如何纠正。因此，隐性确认策略的运用需要根据系统对信息识别的准确度和出错可能性来谨慎选择。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*OGCvRKZylM8AAAAAAAAAAAAADgCCAQ/fmt.webp) + +

无需确认

+ +在对话设计中，“无需确认”指的是 AI 在接收到用户输入后，并未提供任何形式的确认反馈给用户。这种情况通常发生在信息高度确认，或者确认操作被认为是不必要的场合。在这种模式下，AI 假定用户的输入是正确的，并且不需要额外的确认步骤来验证输入的准确性或完整性。 + +“无需确认”的设计考虑到了用户体验的流畅性和效率，特别是在那些用户操作失误的风险较低，或者系统对于输入的识别有足够信心的场景中。那么“无需确认”交互可以减少用户的操作步骤，提高用户体验。 + +然而，需要注意的是，“无需确认”的设计并不适用于所有情况。在那些错误成本较高或需要用户明确同意的场景中，如执行不可逆操作前，显性确认或隐性确认可能更为合适，以确保用户对其操作有充分的认识和同意。因此，设计者在决定是否采用“无需确认”交互时，需要仔细权衡用户体验的便捷性和操作的安全性。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*VY4ITICKJmsAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

HOW 如何操作

+ +

针对用户输入的参数做隐性确认

+ +在大多数情况下，隐性确认的应用目的并不在于直接验证用户的输入内容，而是在于确认用户所传达或隐含的参数信息。 + +这种策略通过在后续的对话或操作中隐含地确认用户的信息，例如通过重复关键信息或使用同义词替换，来向用户展示系统已经理解了他们的意图。 + +隐性确认为用户提供了必要的上下文环境，以便他们能够更准确地理解系统的响应内容。通过这种方式，隐性确认有助于提升交互的连贯性和用户的满意度，确保了对话流程的顺畅。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*KgMlQ6KyuzIAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

组件构成

+ +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*I-b4RKnBw6YAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

系统动作的隐性确认

+ +动作的隐性确认也是一种间接确认机制，它通过系统的行为和反馈来隐含地表明某个动作已经完成，而不是依赖于直接的言语或明确的信号。这种确认方式一般通过系统响应的自然流程和结果展示，为用户提供了动作执行的证据，从而在不打断用户流程的情况下，增强了用户对系统操作结果的信任和满意度。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*bz8tRL4VG18AAAAAAAAAAAAADgCCAQ/fmt.webp) + +

显性确认

+ +在执行可能导致不可逆后果的操作，例如删除用户数据或完成交易等关键步骤之前，显性确认是必不可少的。这一机制确保用户对即将执行的操作及其潜在影响有充分的认识。 + +AI 必须在采取最终行动之前，明确地向用户展示操作的具体细节，并主动请求用户的明确同意。通过这种方式，显性确认不仅提高了操作的透明度，还强化了用户对操作结果的责任意识，从而降低了误操作的风险，并提升了用户对系统的信任度。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*4HIpQ7M0nHsAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

组件构成

+ +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*HkF4RZwdqh8AAAAAAAAAAAAADgCCAQ/fmt.webp) + +

无需确认

+ +在用户输入明确且系统能够以高置信度识别用户意图的情况下，可以省略确认步骤。这种设计原则适用于那些系统对用户意图的识别具有高度准确性的场景，从而简化了交互流程，提高了用户体验的效率和流畅性。通过减少不必要的确认环节，用户可以更快捷地完成操作，同时保持了操作的安全性和准确性。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*X4qQRJdioRMAAAAAAAAAAAAADgCCAQ/fmt.webp) diff --git a/docs/spec/confirm.zh-CN.md b/docs/spec/confirm.zh-CN.md new file mode 100644 index 00000000..b5bb37aa --- /dev/null +++ b/docs/spec/confirm.zh-CN.md @@ -0,0 +1,87 @@ +--- +group: + title: 💭 Conversation 会话设计 + order: 3 +order: 4 +title: 确认 +--- + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*y4fLQ4MNM_kAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

WHAT 概述

+ +在对话设计中，确认设计是一种交互设计策略，它允许用户在与 AI 系统交流时验证其输入内容的解析结果。这种设计不仅提升了用户对输入信息准确性的信心，而且通过建立对话共识，增强了用户在与 AI 互动中的安全感和信任感。此外，确认设计通过维护对话的上下文连贯性，有助于推动对话的深入发展，确保交流的流畅性和效率。通过这种方式，AI 系统能够更准确地理解用户的意图，同时用户也能够即时纠正任何错误或误解，从而提高整体的交互质量。 + +

三类确认形式

+ +

显性确认

+ +显性确认要求用户对系统的理解或操作结果进行明确的响应确认。这种确认方式通常涉及简单的是/否回答，或者使用同义词来明确表达用户的确认意图。 + +在实施显性确认时，系统会暂停进一步的操作，直到收到用户的明确指示。这种确认方式特别适用于那些错误成本较高或需要用户明确同意的场景，例如在执行不可逆操作前的用户确认。 + +显性确认确保了用户对即将执行的操作有充分的认识和同意，从而降低了操作错误的风险。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*E6wURJNuKgUAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

隐性确认

+ +隐性确认是一种更为微妙的确认方式，它通过在后续的对话或操作中隐含地确认用户的信息，而无需用户进行直接回复。这种策略通常涉及系统对用户输入的关键信息进行重复或同义词替换，以此向用户展示系统已经理解了他们的意图。 + +隐性确认适用于那些错误成本较低或系统对识别结果有较高信心的情况，因为它可以提高对话的效率，同时减少用户的交互负担。 + +在实施隐性确认时，系统会通过提炼用户表述的关键内容，并将其融入到响应中，使用户能够快速确认系统已经识别到了这些信息。 + +这种方式的优势在于其效率较高，但劣势在于一旦系统识别错误，用户可能不清楚如何纠正。因此，隐性确认策略的运用需要根据系统对信息识别的准确度和出错可能性来谨慎选择。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*OGCvRKZylM8AAAAAAAAAAAAADgCCAQ/fmt.webp) + +

无需确认

+ +在对话设计中，“无需确认”指的是 AI 在接收到用户输入后，并未提供任何形式的确认反馈给用户。这种情况通常发生在信息高度确认，或者确认操作被认为是不必要的场合。在这种模式下，AI 假定用户的输入是正确的，并且不需要额外的确认步骤来验证输入的准确性或完整性。 + +“无需确认”的设计考虑到了用户体验的流畅性和效率，特别是在那些用户操作失误的风险较低，或者系统对于输入的识别有足够信心的场景中。那么“无需确认”交互可以减少用户的操作步骤，提高用户体验。 + +然而，需要注意的是，“无需确认”的设计并不适用于所有情况。在那些错误成本较高或需要用户明确同意的场景中，如执行不可逆操作前，显性确认或隐性确认可能更为合适，以确保用户对其操作有充分的认识和同意。因此，设计者在决定是否采用“无需确认”交互时，需要仔细权衡用户体验的便捷性和操作的安全性。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*VY4ITICKJmsAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

HOW 如何操作

+ +

针对用户输入的参数做隐性确认

+ +在大多数情况下，隐性确认的应用目的并不在于直接验证用户的输入内容，而是在于确认用户所传达或隐含的参数信息。 + +这种策略通过在后续的对话或操作中隐含地确认用户的信息，例如通过重复关键信息或使用同义词替换，来向用户展示系统已经理解了他们的意图。 + +隐性确认为用户提供了必要的上下文环境，以便他们能够更准确地理解系统的响应内容。通过这种方式，隐性确认有助于提升交互的连贯性和用户的满意度，确保了对话流程的顺畅。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*KgMlQ6KyuzIAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

组件构成

+ +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*I-b4RKnBw6YAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

系统动作的隐性确认

+ +动作的隐性确认也是一种间接确认机制，它通过系统的行为和反馈来隐含地表明某个动作已经完成，而不是依赖于直接的言语或明确的信号。这种确认方式一般通过系统响应的自然流程和结果展示，为用户提供了动作执行的证据，从而在不打断用户流程的情况下，增强了用户对系统操作结果的信任和满意度。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*bz8tRL4VG18AAAAAAAAAAAAADgCCAQ/fmt.webp) + +

显性确认

+ +在执行可能导致不可逆后果的操作，例如删除用户数据或完成交易等关键步骤之前，显性确认是必不可少的。这一机制确保用户对即将执行的操作及其潜在影响有充分的认识。 + +AI 必须在采取最终行动之前，明确地向用户展示操作的具体细节，并主动请求用户的明确同意。通过这种方式，显性确认不仅提高了操作的透明度，还强化了用户对操作结果的责任意识，从而降低了误操作的风险，并提升了用户对系统的信任度。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*4HIpQ7M0nHsAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

组件构成

+ +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*HkF4RZwdqh8AAAAAAAAAAAAADgCCAQ/fmt.webp) + +

无需确认

+ +在用户输入明确且系统能够以高置信度识别用户意图的情况下，可以省略确认步骤。这种设计原则适用于那些系统对用户意图的识别具有高度准确性的场景，从而简化了交互流程，提高了用户体验的效率和流畅性。通过减少不必要的确认环节，用户可以更快捷地完成操作，同时保持了操作的安全性和准确性。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*X4qQRJdioRMAAAAAAAAAAAAADgCCAQ/fmt.webp) diff --git a/docs/spec/conversation-design.en-US.md b/docs/spec/conversation-design.en-US.md new file mode 100644 index 00000000..92b1c761 --- /dev/null +++ b/docs/spec/conversation-design.en-US.md @@ -0,0 +1,124 @@ +--- +group: + title: 💭 Conversation 会话设计 + order: 3 +order: 0 +title: 介绍 +--- + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*ohp_SLO1eaEAAAAAAAAAAAAADgCCAQ/fmt.webp) + +用户的模糊意图通过会话的方式来逐步与 AI 对焦、拆解，而用户的各项操作指令通常也以交互式卡片的形式贯穿于会话流之中。会话风格与角色的一致性，也是 AI 体验的关键。此外，每一次良好人机的自然会话体验背后，其实都隐藏着一套隐含的、系统性的体验规则。上述这些正是会话设计所需要定义的。 + +

WHY 为什么要做对话设计

+ +在明确用户的意图和 AI 角色定位之后，便可以着手设计对话流程了。这一过程既涉及了对用户意图的深入理解，根据用户意图，有助于设计出更加针对性和有效的对话；又涉及对 AI 角色的精确把握，根据 AI 角色性格，可以选择合适的语言风格，构建更加真实和有说服力的对话场景。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*C94kQK-GA9QAAAAAAAAAAAAADgCCAQ/fmt.webp) + +在人际交往的过程中，交流双方为了实现特定的沟通目标，往往会遵循一系列隐性或显性的规则。这些规则不仅涵盖了语言的语义层面，还包括行为和意图的表达，从而有效推进对话进程，实现预期的交际目的。 + +同样，在人机交互中，对话系统也需遵循一套规则，以确保语义的准确传达、行为的合理展现以及意图的清晰表达。这些规则对于促进用户目标的实现、提升交互体验具有至关重要的作用。通过精心设计的对话规则，可以优化人机对话系统的性能，使其更贴近自然语言交流的流畅性和效率，进而为用户提供更加优质的交互体验。 + +

WHAT 什么是会话设计

+ +![什么是会话设计](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*QI3xQrObsI4AAAAAAAAAAAAADgCCAQ/fmt.webp) + +对话交互组件是构建人机对话系统的核心内容，它们基于用户提出的问题，依据预设的规则生成响应。这些组件旨在准确传达语义、行为和意图，以促进用户目标的实现，构成了对话交互的基础单元。 + +**使用不同的对话交互组件可以形成多样化的对话表达方式：** + +- 通过选择和组合不同的对话交互组件，可以构建出多种对话表达策略。这些策略不仅能够覆盖广泛的语言风格和语境，还能够适应用户的个性化需求和偏好。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*QROUQbGlvcwAAAAAAAAAAAAADgCCAQ/fmt.webp) + +**对于同一个用户请求，可以通过不同的对话设计组件组合，形成同一语义，不同风格的对话：** + +- 语义一致性与风格多样性： 即便面对相同的用户请求，通过灵活运用不同的对话设计组件，可以创造出在语义上保持一致，但在风格上各具特色的对话响应。这种设计允许AI在保持信息传递准确性的同时，也能够提供多样化的用户体验。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*2q8gQZMp9l4AAAAAAAAAAAAADgCCAQ/fmt.webp) + +因此对话交互组件的设计和应用是实现高效、个性化人机对话的关键。通过精心构建和优化这些组件，可以显著提升对话系统的性能和用户的交互体验。 + +

HOW 原则

+ +在人机对话交互中，尽管对话交互组件具有自然性和操作路径简化等优势，但它们也面临着一些挑战，例如意图识别的不准确性可能导致错误回复，以及槽位信息的缺失可能需要多轮对话来补全信息。对话交互的核心目标是解决用户问题并提高效率，任何对话交互设计都应遵循这一原则。针对这些问题，我们制定了对话交互的通用性原则，旨在优化对话设计，发挥其优势同时规避劣势，以更有效地解决用户的实际问题。通过下述原则，可以构建出更加高效、准确且用户友好的对话交互系统。 + +

信息充分且真实

+ +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*h_9JQLDK_JIAAAAAAAAAAAAADgCCAQ/fmt.webp) + +在人机对话交互中，要确保提供给用户的是真实信息，建立用户和 AI 之间的信任，强调以用户为中心。 + +1. **AI 需提供真实的信息：**对话交互系统必须基于事实和数据提供信息，以确保用户能够依据真实、准确的信息做出决策。这要求 AI 在处理用户请求时，必须写明引用的数据源，并确保信息的时效性和准确性。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*_SoFRY_Rm30AAAAAAAAAAAAADgCCAQ/fmt.webp) + +2. ** AI 需告知自己能力界限：**AI 应明确告知用户其功能和限制，避免用户对 AI 能力产生误解。这包括在 AI 无法提供确切答案或执行特定任务时，诚实地向用户说明情况，并提供备选方案或建议。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*83p9R7JFirgAAAAAAAAAAAAADgCCAQ/fmt.webp) + +3. **针对性信息提供：**对话主体应具备针对性，针对特定的决策问题和决策者提供专门的支持。这意味着 AI 需要能够根据用户的具体需求，提供定制化的信息和建议，以增强决策的相关性和有效性 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*BEkxTZKqypgAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

话术要清晰易懂

+ +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*BEkxTZKqypgAAAAAAAAAAAAADgCCAQ/fmt.webp) + +在对话设计中，使用的话术要易于用户记忆、理解及清晰表意，从而实现更加有效的沟通。 + +1. **任务相关性**：对话内容应紧密围绕用户的任务和目标展开，确保信息的相关性，以提高用户对对话的关注度和记忆度。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*wSo8Qa4UqI4AAAAAAAAAAAAADgCCAQ/fmt.webp) + +2. **词汇的普及性**：选用普遍熟悉且易于理解的词汇，有助于降低用户的认知负荷，使得信息传递更加高效。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*VSkrRLuLN2kAAAAAAAAAAAAADgCCAQ/fmt.webp) + +3. **术语的一致性**：在对话过程中，对特定术语或概念的使用应保持一致性，这有助于用户建立稳定的理解框架，避免混淆。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*myBASJk_wp0AAAAAAAAAAAAADgCCAQ/fmt.webp) + +4. **句式的简洁性**：避免使用复杂的句式结构，转而使用简洁、直接的表述方式，以便用户快速把握信息要点。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*tRXKSahVc4wAAAAAAAAAAAAADgCCAQ/fmt.webp) + +5. **清晰度**：信息的表述必须清晰明了，避免歧义，确保用户能够准确理解所传达的内容。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*flR6QIBpFq0AAAAAAAAAAAAADgCCAQ/fmt.webp) + +

自然友好并且尊重用户

+ +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*Dkx5Tat2d6IAAAAAAAAAAAAADgCCAQ/fmt.webp) + +在 AI 与用户的互动中，需要尊重用户，认可用户的感受。 + +1. **自然交流：**应采用自然口语风格，使对话更加贴近日常交流，提高用户的交流体验，确保沟通的亲切感和易理解性。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*hKpWR56DgjAAAAAAAAAAAAAADgCCAQ/fmt.webp) + +2. **尊重与认可：**在所有交互中，AI 将始终保持对用户的尊重，认可并重视用户的感受和观点，以建立信任和积极的互动环境。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*WalpQrw9VvEAAAAAAAAAAAAADgCCAQ/fmt.webp) + +3. **敏感话题回避：**对于可能引起争议或不适的敏感话题，应予以回避，以免造成不必要的误解或冲突。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*vY0wTbb5QKYAAAAAAAAAAAAADgCCAQ/fmt.webp) + +4. **审慎处理内容：**对于用户未主动请求的信息或内容，应保持谨慎态度，避免过度干预或提供不适当的信息。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*I2fZTL6_FpgAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

对话组件预览

+ +为了更直观的了解并使用对话组件，我们将对话流程划分为四个主要环节，每个环节都对应着特定的组件。依次为：欢迎组件、引导组件、追问组件、提示组件、确认组件、错误处理组件以及结束组件。有关这些模块的详细信息，请参阅以下文档。 + +| **对话流程** | **对话组件** | **详细内容** | +| :----------: | :----------: | :---------------------------------------------------------------: | +| **唤醒** | 开始 | [ Link](https://www.yuque.com/ant-design/ierwgq/qm1gguw5cd4uoyzn) | +| **识别** | 追问 | [Link](https://www.yuque.com/ant-design/ierwgq/bkznpghceqmlc576) | +| | 提示 | [Link](https://www.yuque.com/ant-design/ierwgq/fdpn5vbn465d18oc) | +| **确认** | 确认 | [Link](https://www.yuque.com/ant-design/ierwgq/yg5ka8fs2p2qc28a) | +| | 错误 | [ Link](https://www.yuque.com/ant-design/ierwgq/scvwns3hqzc6so9v) | +| **反馈** | 结束 | [ Link](https://www.yuque.com/ant-design/ierwgq/ik6irl09twqg0hnx) | diff --git a/docs/spec/conversation-design.zh-CN.md b/docs/spec/conversation-design.zh-CN.md new file mode 100644 index 00000000..92b1c761 --- /dev/null +++ b/docs/spec/conversation-design.zh-CN.md @@ -0,0 +1,124 @@ +--- +group: + title: 💭 Conversation 会话设计 + order: 3 +order: 0 +title: 介绍 +--- + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*ohp_SLO1eaEAAAAAAAAAAAAADgCCAQ/fmt.webp) + +用户的模糊意图通过会话的方式来逐步与 AI 对焦、拆解，而用户的各项操作指令通常也以交互式卡片的形式贯穿于会话流之中。会话风格与角色的一致性，也是 AI 体验的关键。此外，每一次良好人机的自然会话体验背后，其实都隐藏着一套隐含的、系统性的体验规则。上述这些正是会话设计所需要定义的。 + +

WHY 为什么要做对话设计

+ +在明确用户的意图和 AI 角色定位之后，便可以着手设计对话流程了。这一过程既涉及了对用户意图的深入理解，根据用户意图，有助于设计出更加针对性和有效的对话；又涉及对 AI 角色的精确把握，根据 AI 角色性格，可以选择合适的语言风格，构建更加真实和有说服力的对话场景。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*C94kQK-GA9QAAAAAAAAAAAAADgCCAQ/fmt.webp) + +在人际交往的过程中，交流双方为了实现特定的沟通目标，往往会遵循一系列隐性或显性的规则。这些规则不仅涵盖了语言的语义层面，还包括行为和意图的表达，从而有效推进对话进程，实现预期的交际目的。 + +同样，在人机交互中，对话系统也需遵循一套规则，以确保语义的准确传达、行为的合理展现以及意图的清晰表达。这些规则对于促进用户目标的实现、提升交互体验具有至关重要的作用。通过精心设计的对话规则，可以优化人机对话系统的性能，使其更贴近自然语言交流的流畅性和效率，进而为用户提供更加优质的交互体验。 + +

WHAT 什么是会话设计

+ +![什么是会话设计](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*QI3xQrObsI4AAAAAAAAAAAAADgCCAQ/fmt.webp) + +对话交互组件是构建人机对话系统的核心内容，它们基于用户提出的问题，依据预设的规则生成响应。这些组件旨在准确传达语义、行为和意图，以促进用户目标的实现，构成了对话交互的基础单元。 + +**使用不同的对话交互组件可以形成多样化的对话表达方式：** + +- 通过选择和组合不同的对话交互组件，可以构建出多种对话表达策略。这些策略不仅能够覆盖广泛的语言风格和语境，还能够适应用户的个性化需求和偏好。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*QROUQbGlvcwAAAAAAAAAAAAADgCCAQ/fmt.webp) + +**对于同一个用户请求，可以通过不同的对话设计组件组合，形成同一语义，不同风格的对话：** + +- 语义一致性与风格多样性： 即便面对相同的用户请求，通过灵活运用不同的对话设计组件，可以创造出在语义上保持一致，但在风格上各具特色的对话响应。这种设计允许AI在保持信息传递准确性的同时，也能够提供多样化的用户体验。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*2q8gQZMp9l4AAAAAAAAAAAAADgCCAQ/fmt.webp) + +因此对话交互组件的设计和应用是实现高效、个性化人机对话的关键。通过精心构建和优化这些组件，可以显著提升对话系统的性能和用户的交互体验。 + +

HOW 原则

+ +在人机对话交互中，尽管对话交互组件具有自然性和操作路径简化等优势，但它们也面临着一些挑战，例如意图识别的不准确性可能导致错误回复，以及槽位信息的缺失可能需要多轮对话来补全信息。对话交互的核心目标是解决用户问题并提高效率，任何对话交互设计都应遵循这一原则。针对这些问题，我们制定了对话交互的通用性原则，旨在优化对话设计，发挥其优势同时规避劣势，以更有效地解决用户的实际问题。通过下述原则，可以构建出更加高效、准确且用户友好的对话交互系统。 + +

信息充分且真实

+ +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*h_9JQLDK_JIAAAAAAAAAAAAADgCCAQ/fmt.webp) + +在人机对话交互中，要确保提供给用户的是真实信息，建立用户和 AI 之间的信任，强调以用户为中心。 + +1. **AI 需提供真实的信息：**对话交互系统必须基于事实和数据提供信息，以确保用户能够依据真实、准确的信息做出决策。这要求 AI 在处理用户请求时，必须写明引用的数据源，并确保信息的时效性和准确性。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*_SoFRY_Rm30AAAAAAAAAAAAADgCCAQ/fmt.webp) + +2. ** AI 需告知自己能力界限：**AI 应明确告知用户其功能和限制，避免用户对 AI 能力产生误解。这包括在 AI 无法提供确切答案或执行特定任务时，诚实地向用户说明情况，并提供备选方案或建议。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*83p9R7JFirgAAAAAAAAAAAAADgCCAQ/fmt.webp) + +3. **针对性信息提供：**对话主体应具备针对性，针对特定的决策问题和决策者提供专门的支持。这意味着 AI 需要能够根据用户的具体需求，提供定制化的信息和建议，以增强决策的相关性和有效性 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*BEkxTZKqypgAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

话术要清晰易懂

+ +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*BEkxTZKqypgAAAAAAAAAAAAADgCCAQ/fmt.webp) + +在对话设计中，使用的话术要易于用户记忆、理解及清晰表意，从而实现更加有效的沟通。 + +1. **任务相关性**：对话内容应紧密围绕用户的任务和目标展开，确保信息的相关性，以提高用户对对话的关注度和记忆度。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*wSo8Qa4UqI4AAAAAAAAAAAAADgCCAQ/fmt.webp) + +2. **词汇的普及性**：选用普遍熟悉且易于理解的词汇，有助于降低用户的认知负荷，使得信息传递更加高效。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*VSkrRLuLN2kAAAAAAAAAAAAADgCCAQ/fmt.webp) + +3. **术语的一致性**：在对话过程中，对特定术语或概念的使用应保持一致性，这有助于用户建立稳定的理解框架，避免混淆。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*myBASJk_wp0AAAAAAAAAAAAADgCCAQ/fmt.webp) + +4. **句式的简洁性**：避免使用复杂的句式结构，转而使用简洁、直接的表述方式，以便用户快速把握信息要点。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*tRXKSahVc4wAAAAAAAAAAAAADgCCAQ/fmt.webp) + +5. **清晰度**：信息的表述必须清晰明了，避免歧义，确保用户能够准确理解所传达的内容。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*flR6QIBpFq0AAAAAAAAAAAAADgCCAQ/fmt.webp) + +

自然友好并且尊重用户

+ +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*Dkx5Tat2d6IAAAAAAAAAAAAADgCCAQ/fmt.webp) + +在 AI 与用户的互动中，需要尊重用户，认可用户的感受。 + +1. **自然交流：**应采用自然口语风格，使对话更加贴近日常交流，提高用户的交流体验，确保沟通的亲切感和易理解性。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*hKpWR56DgjAAAAAAAAAAAAAADgCCAQ/fmt.webp) + +2. **尊重与认可：**在所有交互中，AI 将始终保持对用户的尊重，认可并重视用户的感受和观点，以建立信任和积极的互动环境。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*WalpQrw9VvEAAAAAAAAAAAAADgCCAQ/fmt.webp) + +3. **敏感话题回避：**对于可能引起争议或不适的敏感话题，应予以回避，以免造成不必要的误解或冲突。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*vY0wTbb5QKYAAAAAAAAAAAAADgCCAQ/fmt.webp) + +4. **审慎处理内容：**对于用户未主动请求的信息或内容，应保持谨慎态度，避免过度干预或提供不适当的信息。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*I2fZTL6_FpgAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

对话组件预览

+ +为了更直观的了解并使用对话组件，我们将对话流程划分为四个主要环节，每个环节都对应着特定的组件。依次为：欢迎组件、引导组件、追问组件、提示组件、确认组件、错误处理组件以及结束组件。有关这些模块的详细信息，请参阅以下文档。 + +| **对话流程** | **对话组件** | **详细内容** | +| :----------: | :----------: | :---------------------------------------------------------------: | +| **唤醒** | 开始 | [ Link](https://www.yuque.com/ant-design/ierwgq/qm1gguw5cd4uoyzn) | +| **识别** | 追问 | [Link](https://www.yuque.com/ant-design/ierwgq/bkznpghceqmlc576) | +| | 提示 | [Link](https://www.yuque.com/ant-design/ierwgq/fdpn5vbn465d18oc) | +| **确认** | 确认 | [Link](https://www.yuque.com/ant-design/ierwgq/yg5ka8fs2p2qc28a) | +| | 错误 | [ Link](https://www.yuque.com/ant-design/ierwgq/scvwns3hqzc6so9v) | +| **反馈** | 结束 | [ Link](https://www.yuque.com/ant-design/ierwgq/ik6irl09twqg0hnx) | diff --git a/docs/spec/define-intention-type.en-US.md b/docs/spec/define-intention-type.en-US.md new file mode 100644 index 00000000..3422f856 --- /dev/null +++ b/docs/spec/define-intention-type.en-US.md @@ -0,0 +1,41 @@ +--- +group: + title: ❤️ Intention 意图设计 + order: 1 +title: 明确意图类型 +order: 1 +--- + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*Hl54SK43ZcEAAAAAAAAAAAAADgCCAQ/fmt.webp) + +在意图设计的概览中，我们提及了意图可依据不同领域与维度进行分类。 + +- **从用户意图清晰度，可分为意图清晰与意图模糊。**通常来说意图模糊，通过对话的方式，能更加高效洞察与满足意图；而意图清晰的用户，通过简单的操作即可完成用户的目标，例如点击按钮或者图标等。 +- **从用户与系统间交互目的，可分为咨询信息类与执行任务类。**咨询信息类意图主要关联用户的查看与搜索行为，体现了用户对于信息的获取意图；执行任务类意图主要关联用户的操作与管理行为，体现了用户希望系统执行特定任务或操作的意图。 + +我们发现意图分类与用户行为存在着紧密的关联性。以上信息有助于我们更了解用户意图，从而设计出更加符合用户期望的界面交互模式。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*9LwoQ4MwwDMAAAAAAAAAAAAADgCCAQ/fmt.webp) + +在意图类型与用户行为象限图的基础上，如果我们把目前主流的 AI 产品已有的介入方式做一个叠加的话，我们发现意图类型+用户行为与 AI 介入方式存在着一定的关系。 + +- **Do 适合内嵌式：** 以界面操作为主，偶尔唤起AI快捷指令，更适合意图上清晰与行为上做管为主的。 +- **Chat 适合独立式：** 以自然语言为主，几乎没有界面操作。更适合意图上模糊与行为上查看搜索为主的。 +- **Chat+Do 适合助手式：** 自然语言和界面操作均衡配合使用。较强通用性更加适合以上 2 种交叉的场景。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*9gYzSLymZJ8AAAAAAAAAAAAADgCCAQ/fmt.webp) + +这并不意味着每种意图都只能对应一种交互介入方式。在实际应用中，产品设计者需要根据具体的场景和需求来选择最合适的 AI 介入形式。 + +

最佳案例

+
独立式
+ +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*PGBUQpVeVm0AAAAAAAAAAAAADgCCAQ/fmt.webp) + +
助手式
+ +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*lqolSZOH3-4AAAAAAAAAAAAADgCCAQ/fmt.webp) + +
内嵌式
+ +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*39iBTpJDTSEAAAAAAAAAAAAADgCCAQ/fmt.webp) diff --git a/docs/spec/define-intention-type.zh-CN.md b/docs/spec/define-intention-type.zh-CN.md new file mode 100644 index 00000000..3422f856 --- /dev/null +++ b/docs/spec/define-intention-type.zh-CN.md @@ -0,0 +1,41 @@ +--- +group: + title: ❤️ Intention 意图设计 + order: 1 +title: 明确意图类型 +order: 1 +--- + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*Hl54SK43ZcEAAAAAAAAAAAAADgCCAQ/fmt.webp) + +在意图设计的概览中，我们提及了意图可依据不同领域与维度进行分类。 + +- **从用户意图清晰度，可分为意图清晰与意图模糊。**通常来说意图模糊，通过对话的方式，能更加高效洞察与满足意图；而意图清晰的用户，通过简单的操作即可完成用户的目标，例如点击按钮或者图标等。 +- **从用户与系统间交互目的，可分为咨询信息类与执行任务类。**咨询信息类意图主要关联用户的查看与搜索行为，体现了用户对于信息的获取意图；执行任务类意图主要关联用户的操作与管理行为，体现了用户希望系统执行特定任务或操作的意图。 + +我们发现意图分类与用户行为存在着紧密的关联性。以上信息有助于我们更了解用户意图，从而设计出更加符合用户期望的界面交互模式。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*9LwoQ4MwwDMAAAAAAAAAAAAADgCCAQ/fmt.webp) + +在意图类型与用户行为象限图的基础上，如果我们把目前主流的 AI 产品已有的介入方式做一个叠加的话，我们发现意图类型+用户行为与 AI 介入方式存在着一定的关系。 + +- **Do 适合内嵌式：** 以界面操作为主，偶尔唤起AI快捷指令，更适合意图上清晰与行为上做管为主的。 +- **Chat 适合独立式：** 以自然语言为主，几乎没有界面操作。更适合意图上模糊与行为上查看搜索为主的。 +- **Chat+Do 适合助手式：** 自然语言和界面操作均衡配合使用。较强通用性更加适合以上 2 种交叉的场景。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*9gYzSLymZJ8AAAAAAAAAAAAADgCCAQ/fmt.webp) + +这并不意味着每种意图都只能对应一种交互介入方式。在实际应用中，产品设计者需要根据具体的场景和需求来选择最合适的 AI 介入形式。 + +

最佳案例

+
独立式
+ +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*PGBUQpVeVm0AAAAAAAAAAAAADgCCAQ/fmt.webp) + +
助手式
+ +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*lqolSZOH3-4AAAAAAAAAAAAADgCCAQ/fmt.webp) + +
内嵌式
+ +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*39iBTpJDTSEAAAAAAAAAAAAADgCCAQ/fmt.webp) diff --git a/docs/spec/end.en-US.md b/docs/spec/end.en-US.md new file mode 100644 index 00000000..b091565f --- /dev/null +++ b/docs/spec/end.en-US.md @@ -0,0 +1,79 @@ +--- +group: + title: 💭 Conversation 会话设计 + order: 3 +order: 6 +title: 结束 +--- + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*l97pQZf55w4AAAAAAAAAAAAADgCCAQ/fmt.webp) + +

WHAT 概述

+ +AI 在对话过程中，应以优雅的方式结束交流。通过精心设计的结束语，AI 不仅能够展示其社交智慧，还能确保用户在对话结束时感到满意和受尊重。在对话即将结束时，AI 应提供有益的总结或明确的后续步骤建议，使得对话的收尾既流畅又富有成效，为用户留下积极的印象，并为未来的互动奠定良好的基础。 + +

HOW 如何操作

+ +

已完成的意图

+ +当用户的需求或意图得到满足时，AI 应确保用户清楚地认识到任务已经圆满完成，并通过恰当的结束语来确认对话的结束，使用户感到满意和被尊重。此外，AI 应主动询问用户是否需要进一步的帮助或有其他问题，以确保用户在对话结束时感到被充分照顾。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*9AP9RYhIBL8AAAAAAAAAAAAADgCCAQ/fmt.webp) + +

组件构成

+ +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*FrGtRqUj_7MAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

放弃的意图

+ +用户可能会因为多种原因而放弃正在进行的任务。无论具体原因是什么，作为 AI 应当尊重用户的决定，允许他们在适当的时候结束对话。这意味着 AI 需要提供清晰的指示或选项，让用户可以轻松地选择退出对话，同时确保用户知道他们随时可以回来继续或重新开始。通过这种方式，AI 支持用户保持控制权，并在交流过程中感到舒适和尊重。 + +

让用户可以直接退出

+ +除非会丢失重大进展，否则不要进行二次确认。 + +> 请注意，“退出”、“取消”、“停止”、“没关系”和“再见”是默认支持的，因此如果用户说这些，AI 的操作将结束。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*bqwuR5dIx4IAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

合理结束对话

+ +一旦用户表明对话已结束，那就假设你已经失去了他们的注意力。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*CQ5gRb8APpUAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

组件构成

+ +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*CW8eR523owIAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

不支持的意图

+ +当 AI 无法支持用户请求的功能时，对话将会终止。在这种情况下，关键的做法是坦诚地承认 AI 能力的不足，并提供可行的替代方案或引导用户通过其他途径实现目标。此外，这也是收集反馈和数据的宝贵机会，用以未来增强 AI 的功能和效能，更准确地迎合用户需求。通过采取透明且用户友好的错误处理措施，可以最大程度地减少用户的失望感，并保持他们对 AI 服务的信任和满意度。 + +

回复简洁恰当

+ +1. 当请求超出范围时，简要通知用户，并避免过度使用道歉，例如一直说“对不起”。 +2. 避免过度承诺。仅在有计划构建所请求功能的情况下使用“我还不能做 X”这样的短语。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*tpCSSq-dDtsAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

组件构成

+ +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*xbHOQY7fn_kAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

错误

+ +在对话中，遇到无法恢复的错误，例如用户输入超出系统处理能力时，应采取适当的措施来结束对话。 + +1. **超时无响应：**若用户在预设的等待时间内未进行输入，系统应自动终止对话，并提供重新启动对话的选项，以便用户能够继续获取所需服务。 +2. **无法匹配输入：**当用户的输入内容无法被系统解析或与任何预设命令不匹配时，AI应提供明确的错误反馈。同时，AI应给出建议或可能的行动方案，指导用户如何调整输入以获得帮助。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*Qa78S6hhT-QAAAAAAAAAAAAADgCCAQ/fmt.webp) + +3. **系统错误：**如果因为系统限制无法满足用户请求，AI应明确告知用户当前无法提供所需服务，并提供备选或引导至其他服务。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*t4J8T5I2AowAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

组件构成

+ +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*cGTxRbmiHawAAAAAAAAAAAAADgCCAQ/fmt.webp) diff --git a/docs/spec/end.zh-CN.md b/docs/spec/end.zh-CN.md new file mode 100644 index 00000000..b091565f --- /dev/null +++ b/docs/spec/end.zh-CN.md @@ -0,0 +1,79 @@ +--- +group: + title: 💭 Conversation 会话设计 + order: 3 +order: 6 +title: 结束 +--- + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*l97pQZf55w4AAAAAAAAAAAAADgCCAQ/fmt.webp) + +

WHAT 概述

+ +AI 在对话过程中，应以优雅的方式结束交流。通过精心设计的结束语，AI 不仅能够展示其社交智慧，还能确保用户在对话结束时感到满意和受尊重。在对话即将结束时，AI 应提供有益的总结或明确的后续步骤建议，使得对话的收尾既流畅又富有成效，为用户留下积极的印象，并为未来的互动奠定良好的基础。 + +

HOW 如何操作

+ +

已完成的意图

+ +当用户的需求或意图得到满足时，AI 应确保用户清楚地认识到任务已经圆满完成，并通过恰当的结束语来确认对话的结束，使用户感到满意和被尊重。此外，AI 应主动询问用户是否需要进一步的帮助或有其他问题，以确保用户在对话结束时感到被充分照顾。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*9AP9RYhIBL8AAAAAAAAAAAAADgCCAQ/fmt.webp) + +

组件构成

+ +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*FrGtRqUj_7MAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

放弃的意图

+ +用户可能会因为多种原因而放弃正在进行的任务。无论具体原因是什么，作为 AI 应当尊重用户的决定，允许他们在适当的时候结束对话。这意味着 AI 需要提供清晰的指示或选项，让用户可以轻松地选择退出对话，同时确保用户知道他们随时可以回来继续或重新开始。通过这种方式，AI 支持用户保持控制权，并在交流过程中感到舒适和尊重。 + +

让用户可以直接退出

+ +除非会丢失重大进展，否则不要进行二次确认。 + +> 请注意，“退出”、“取消”、“停止”、“没关系”和“再见”是默认支持的，因此如果用户说这些，AI 的操作将结束。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*bqwuR5dIx4IAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

合理结束对话

+ +一旦用户表明对话已结束，那就假设你已经失去了他们的注意力。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*CQ5gRb8APpUAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

组件构成

+ +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*CW8eR523owIAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

不支持的意图

+ +当 AI 无法支持用户请求的功能时，对话将会终止。在这种情况下，关键的做法是坦诚地承认 AI 能力的不足，并提供可行的替代方案或引导用户通过其他途径实现目标。此外，这也是收集反馈和数据的宝贵机会，用以未来增强 AI 的功能和效能，更准确地迎合用户需求。通过采取透明且用户友好的错误处理措施，可以最大程度地减少用户的失望感，并保持他们对 AI 服务的信任和满意度。 + +

回复简洁恰当

+ +1. 当请求超出范围时，简要通知用户，并避免过度使用道歉，例如一直说“对不起”。 +2. 避免过度承诺。仅在有计划构建所请求功能的情况下使用“我还不能做 X”这样的短语。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*tpCSSq-dDtsAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

组件构成

+ +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*xbHOQY7fn_kAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

错误

+ +在对话中，遇到无法恢复的错误，例如用户输入超出系统处理能力时，应采取适当的措施来结束对话。 + +1. **超时无响应：**若用户在预设的等待时间内未进行输入，系统应自动终止对话，并提供重新启动对话的选项，以便用户能够继续获取所需服务。 +2. **无法匹配输入：**当用户的输入内容无法被系统解析或与任何预设命令不匹配时，AI应提供明确的错误反馈。同时，AI应给出建议或可能的行动方案，指导用户如何调整输入以获得帮助。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*Qa78S6hhT-QAAAAAAAAAAAAADgCCAQ/fmt.webp) + +3. **系统错误：**如果因为系统限制无法满足用户请求，AI应明确告知用户当前无法提供所需服务，并提供备选或引导至其他服务。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*t4J8T5I2AowAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

组件构成

+ +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*cGTxRbmiHawAAAAAAAAAAAAADgCCAQ/fmt.webp) diff --git a/docs/spec/error.en-US.md b/docs/spec/error.en-US.md new file mode 100644 index 00000000..a6b56ac7 --- /dev/null +++ b/docs/spec/error.en-US.md @@ -0,0 +1,118 @@ +--- +group: + title: 💭 Conversation 会话设计 + order: 3 +order: 5 +title: 错误 +--- + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*2zMiQIQK9c8AAAAAAAAAAAAADgCCAQ/fmt.webp) + +

WHAT 概述

+ +尽管 AI 在自然语言处理领域有显著进步，但在实际应用中仍可能遇到对话无法继续的情况，这可能导致错误。常见的错误类型包括： + +1. **AI 无法解析用户的输入内容；** +2. **用户提供了无效的输入；** +3. **AI 当前的功能无法满足用户的请求。** + +针对这些错误情况，必须实施有效的错误处理机制，以引导用户回到正确的交流轨道。错误响应的方式对用户体验至关重要，一个处理不当的错误可能会给用户留下深刻印象，甚至超过多次成功的交互。相反，如果错误得到妥善处理，用户可能根本不会意识到曾经出现过错误。 + +为了优化用户体验，错误处理机制应当： + +1. 及时识别并明确指出问题所在； +2. 提供清晰的指导，帮助用户纠正错误或提供有效的替代方案； +3. 保持友好和专业的语气，以减少用户的挫败感； +4. 记录错误情况，以便不断改进AI的理解和响应能力。 + +通过这样的措施，可以最大限度地减少错误对用户体验的负面影响，同时提升AI系统的可靠性和用户满意度。 + +

HOW 如何操作

+ +

**AI 无法解析或无法匹配用户的输入内容**

+ +在 AI 对话设计中，"无匹配"错误是指系统在处理用户输入时，无法找到与用户意图相匹配的响应或操作。这种情况通常发生在用户的问题或请求超出了 AI 系统预设的处理范围，或者用户的表达方式与系统训练数据中的模式不匹配时。例如，如果用户使用非常规的措辞或提出一个系统未被训练来识别的新颖问题，AI 可能无法理解其意图，从而导致无匹配错误。 + +

**引导用户重新表述**

+ +为了应对这种错误，AI 需要具备一定的错误处理和恢复机制。例如引导用户重新表述法，系统应通过提问或提供选项的方式，引导用户以更清晰、更具体的方式重新表述他们的问题或请求。一般在缺少必填槽位（无该内容无法执行任务），必填槽位答案唯一但涉及范围比较广，AI 无法进行猜测时使用该方法 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*CqISQJfdzqoAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

组件总结

+ +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*CoAhR4xjsKQAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

缩小范围

+ +在重新询问用户时，AI 可以采取缩小范围的策略来增强交互的清晰度和效率。包括： + +1. **展示选项**：通过提供清晰的选择，使用户能够快速识别并选择最符合其需求的选项。 +2. **提供示例**：通过示例展示正确的输入格式或期望的答案类型，帮助用户更准确地表达他们的请求。 +3. **预测需求**：利用AI的分析能力，预测用户可能的需求，并主动提供相关信息，以减少用户的输入努力。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*BqzoQIMo8DEAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

组件总结

+ +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*pYSIRqIK5oMAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

承认错误

+ +为了避免用户经历连续的挫败感，AI 应在两次尝试理解用户意图失败后，主动结束对话。在这种情况下，提供不明确的承诺可能会损害用户对系统的信任。因此，应该： + +1. **及时终止对话：**在两次尝试后，如果仍然无法准确理解用户的需求，系统应礼貌地结束对话，避免无谓的尝试。 +2. **明确承认局限：**系统应诚实地向用户说明其当前能力的限制，并承认无法解决用户的问题。 +3. **提供替代方案：**在结束对话前，系统可以提供其他可能的解决方案或建议用户寻求其他帮助渠道。 +4. **保持透明和诚实：**通过透明和诚实的沟通，系统可以维护用户的信任，并为未来的交互留下积极的印象。 +5. **收集反馈：**系统应鼓励用户提供反馈，以便从这些互动中学习并改进未来的性能。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*mXiTTo9E1HAAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

组件总结

+ +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*j21eTJ-CTvUAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

用户提供了无效的输入

+ +在对话交互中，用户可能会因为设备故障或网络不稳定而发送损坏或丢失的信息，或者由于误解 AI 的提示而提供不相关或不精确的数据。这就需要引导用户重新提供信息或通过帮助他们更准确地表达需求。 + +

重诉问题

+ +在对话过程中，用户有时可能会因为设备故障或网络连接问题而发送出受损或不完整的信息。在这种情况下，AI系统应当具备识别这类问题的能力，并主动要求用户重新表述他们的问题或请求。另外如果用户输入的信息不清晰，AI 可以重述其理解的问题，以确认是否正确把握了用户的意图。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*YDlfR6i56soAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

结束之前再次提示

+ +在 AI 对话的设计中，当识别到用户的输入可能存在问题或不完整时，应该在结束对话之前再次给予用户回复的机会，确保了用户有机会纠正或补充他们的请求，从而避免误解或未满足的需求。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*logJRZE1lx4AAAAAAAAAAAAADgCCAQ/fmt.webp) + +

合理结束

+ +为了避免不必要的用户纠缠，并保持对话的效率和尊重，AI 应在尝试两次收集用户输入未果后，主动结束对话。这一策略不仅体现了对用户时间的尊重，也避免了可能的沟通疲劳。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*jEC3S56XqiUAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

系统错误

+ +当用户的意图无误，但执行依赖的系统无法进行任务或因技术故障而失败时，即发生系统错误。此类错误可能表现为： + +- **系统故障：**系统无响应或网络错误，例如网络连接超时，大模型渲染失败等 +- **无效请求：**用户发出的请求在逻辑上不成立，如尝试预约已过去的时间段。 +- **超出能力：**用户发出的请求已经超出 AI 能执行的范围，例如：给我的银行卡打 1 万块钱 + +为了确保系统的可靠性和用户的信任，在发生错误时，应以透明、诚实的态度向用户通报情况，并提供切实可行的后续步骤建议。这包括但不限于： + +1. **明确错误信息：**提供清晰、具体的错误描述，避免使用技术性或模糊的语言。 +2. **解释原因：**尽可能向用户解释导致错误的技术原因，以增加透明度。 +3. **提供解决方案：**根据错误类型，给出用户可以采取的解决步骤或建议。 +4. **引导用户：**如果问题无法立即解决，应指导用户如何寻求进一步的帮助或联系技术支持。 +5. **记录和分析：**系统应自动记录错误详情，以便进行后续分析和改进。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*i9LTSZP6t_QAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

组件总结

+ +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*cs2aS5jtj8AAAAAAAAAAAAAADgCCAQ/fmt.webp) diff --git a/docs/spec/error.zh-CN.md b/docs/spec/error.zh-CN.md new file mode 100644 index 00000000..a6b56ac7 --- /dev/null +++ b/docs/spec/error.zh-CN.md @@ -0,0 +1,118 @@ +--- +group: + title: 💭 Conversation 会话设计 + order: 3 +order: 5 +title: 错误 +--- + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*2zMiQIQK9c8AAAAAAAAAAAAADgCCAQ/fmt.webp) + +

WHAT 概述

+ +尽管 AI 在自然语言处理领域有显著进步，但在实际应用中仍可能遇到对话无法继续的情况，这可能导致错误。常见的错误类型包括： + +1. **AI 无法解析用户的输入内容；** +2. **用户提供了无效的输入；** +3. **AI 当前的功能无法满足用户的请求。** + +针对这些错误情况，必须实施有效的错误处理机制，以引导用户回到正确的交流轨道。错误响应的方式对用户体验至关重要，一个处理不当的错误可能会给用户留下深刻印象，甚至超过多次成功的交互。相反，如果错误得到妥善处理，用户可能根本不会意识到曾经出现过错误。 + +为了优化用户体验，错误处理机制应当： + +1. 及时识别并明确指出问题所在； +2. 提供清晰的指导，帮助用户纠正错误或提供有效的替代方案； +3. 保持友好和专业的语气，以减少用户的挫败感； +4. 记录错误情况，以便不断改进AI的理解和响应能力。 + +通过这样的措施，可以最大限度地减少错误对用户体验的负面影响，同时提升AI系统的可靠性和用户满意度。 + +

HOW 如何操作

+ +

**AI 无法解析或无法匹配用户的输入内容**

+ +在 AI 对话设计中，"无匹配"错误是指系统在处理用户输入时，无法找到与用户意图相匹配的响应或操作。这种情况通常发生在用户的问题或请求超出了 AI 系统预设的处理范围，或者用户的表达方式与系统训练数据中的模式不匹配时。例如，如果用户使用非常规的措辞或提出一个系统未被训练来识别的新颖问题，AI 可能无法理解其意图，从而导致无匹配错误。 + +

**引导用户重新表述**

+ +为了应对这种错误，AI 需要具备一定的错误处理和恢复机制。例如引导用户重新表述法，系统应通过提问或提供选项的方式，引导用户以更清晰、更具体的方式重新表述他们的问题或请求。一般在缺少必填槽位（无该内容无法执行任务），必填槽位答案唯一但涉及范围比较广，AI 无法进行猜测时使用该方法 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*CqISQJfdzqoAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

组件总结

+ +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*CoAhR4xjsKQAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

缩小范围

+ +在重新询问用户时，AI 可以采取缩小范围的策略来增强交互的清晰度和效率。包括： + +1. **展示选项**：通过提供清晰的选择，使用户能够快速识别并选择最符合其需求的选项。 +2. **提供示例**：通过示例展示正确的输入格式或期望的答案类型，帮助用户更准确地表达他们的请求。 +3. **预测需求**：利用AI的分析能力，预测用户可能的需求，并主动提供相关信息，以减少用户的输入努力。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*BqzoQIMo8DEAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

组件总结

+ +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*pYSIRqIK5oMAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

承认错误

+ +为了避免用户经历连续的挫败感，AI 应在两次尝试理解用户意图失败后，主动结束对话。在这种情况下，提供不明确的承诺可能会损害用户对系统的信任。因此，应该： + +1. **及时终止对话：**在两次尝试后，如果仍然无法准确理解用户的需求，系统应礼貌地结束对话，避免无谓的尝试。 +2. **明确承认局限：**系统应诚实地向用户说明其当前能力的限制，并承认无法解决用户的问题。 +3. **提供替代方案：**在结束对话前，系统可以提供其他可能的解决方案或建议用户寻求其他帮助渠道。 +4. **保持透明和诚实：**通过透明和诚实的沟通，系统可以维护用户的信任，并为未来的交互留下积极的印象。 +5. **收集反馈：**系统应鼓励用户提供反馈，以便从这些互动中学习并改进未来的性能。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*mXiTTo9E1HAAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

组件总结

+ +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*j21eTJ-CTvUAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

用户提供了无效的输入

+ +在对话交互中，用户可能会因为设备故障或网络不稳定而发送损坏或丢失的信息，或者由于误解 AI 的提示而提供不相关或不精确的数据。这就需要引导用户重新提供信息或通过帮助他们更准确地表达需求。 + +

重诉问题

+ +在对话过程中，用户有时可能会因为设备故障或网络连接问题而发送出受损或不完整的信息。在这种情况下，AI系统应当具备识别这类问题的能力，并主动要求用户重新表述他们的问题或请求。另外如果用户输入的信息不清晰，AI 可以重述其理解的问题，以确认是否正确把握了用户的意图。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*YDlfR6i56soAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

结束之前再次提示

+ +在 AI 对话的设计中，当识别到用户的输入可能存在问题或不完整时，应该在结束对话之前再次给予用户回复的机会，确保了用户有机会纠正或补充他们的请求，从而避免误解或未满足的需求。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*logJRZE1lx4AAAAAAAAAAAAADgCCAQ/fmt.webp) + +

合理结束

+ +为了避免不必要的用户纠缠，并保持对话的效率和尊重，AI 应在尝试两次收集用户输入未果后，主动结束对话。这一策略不仅体现了对用户时间的尊重，也避免了可能的沟通疲劳。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*jEC3S56XqiUAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

系统错误

+ +当用户的意图无误，但执行依赖的系统无法进行任务或因技术故障而失败时，即发生系统错误。此类错误可能表现为： + +- **系统故障：**系统无响应或网络错误，例如网络连接超时，大模型渲染失败等 +- **无效请求：**用户发出的请求在逻辑上不成立，如尝试预约已过去的时间段。 +- **超出能力：**用户发出的请求已经超出 AI 能执行的范围，例如：给我的银行卡打 1 万块钱 + +为了确保系统的可靠性和用户的信任，在发生错误时，应以透明、诚实的态度向用户通报情况，并提供切实可行的后续步骤建议。这包括但不限于： + +1. **明确错误信息：**提供清晰、具体的错误描述，避免使用技术性或模糊的语言。 +2. **解释原因：**尽可能向用户解释导致错误的技术原因，以增加透明度。 +3. **提供解决方案：**根据错误类型，给出用户可以采取的解决步骤或建议。 +4. **引导用户：**如果问题无法立即解决，应指导用户如何寻求进一步的帮助或联系技术支持。 +5. **记录和分析：**系统应自动记录错误详情，以便进行后续分析和改进。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*i9LTSZP6t_QAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

组件总结

+ +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*cs2aS5jtj8AAAAAAAAAAAAAADgCCAQ/fmt.webp) diff --git a/docs/spec/expression-user-input.en-US.md b/docs/spec/expression-user-input.en-US.md new file mode 100644 index 00000000..155ec181 --- /dev/null +++ b/docs/spec/expression-user-input.en-US.md @@ -0,0 +1,115 @@ +--- +group: + title: 💻 Hybrid UI 混合界面设计 + order: 4 +order: 3 +title: 表达｜用户输入 +--- + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*59IVSLXDTdIAAAAAAAAAAAAADgCCAQ/fmt.webp) + +可用于 AI 对话的开放式输入，当用户开始向 AI 传达自己的意图时，往往需要输入多种类型的内容。 + + + +

设计目标

+ +当用户有明确诉求时，需借助不同形式的输入交互来向 AI 精准表达意图，以此提升 AI 对用户意图传达的理解程度，进而给出准确回应。【输入组件】在表达阶段发挥着重要作用，借助多种形式（如文字描述、图片伤处、语音输入等）的输入组件，为用户与 AI 的交互增添了更多可能性与灵活性，让用户能够以自然、便捷且正确地完成输入内容并发送。 + + + + + +--- + +

🙌文本输入

+输入框为用户提供了编辑文本的控件，是给大模型提供信息最基础和常见的方式。 + + + +

文本框（Input）

+ + +输入较少的字符总数，使用单行的输入形式。为提升数据录入效率，通常可以在输入框内增加暗提示以帮助提醒用户。 + +> 注：可以对一些文本（如数字和网址）运用特别的样式。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*os7CTZgHfZgAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

文本域（Textarea）

+ + +录入长篇幅的单一的文本使用多行的文本区域。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*FE3vSrLOW_UAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

停止生成操作

+停止生成操作常见位于输入框附近，就近方便用户操作。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*gCKFSY3S1oUAAAAAAAAAAAAADgCCAQ/fmt.webp) + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*Ba4tQ6IN6LcAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

🎙️ 语音输入

+

语音倾听过程

+ + +可以提供用户以语音的形式输入，转化为文字供用户确认。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*BM6xRrVP9B4AAAAAAAAAAAAADgCCAQ/fmt.webp) + +

语音初次开始

+ + +初次启动语音，一般会出现系统自带的提示开启，用户允许后开启语音功能，或禁止不允许开启。 + +![授权语音输入](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*N1QbRL-nCdUAAAAAAAAAAAAADgCCAQ/fmt.webp) + +![禁止使用语音输入](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*eaLATo9gzwEAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

语音异常

+ +语音输入中会有异常情况出现，需要及时且清楚告知用户，如超时提醒、因网络异常而中断等。 + +![超时提醒](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*N4eTQokA5akAAAAAAAAAAAAADgCCAQ/fmt.webp) + +![网络异常](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*JrsuTYuyy_UAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

📃 文件输入

+文件上传是用户基于文件有意图的表达，从而让大模型基于上传文件来深入理解并回答 + +

简单上传

+ +基础上传方式通常用于单个文件的上传，且在不需要预览效果的情况下使用。用户只需点击按钮，即可弹出文件选择框，从而选择需要上传的文件。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*E2IPT4lnwj8AAAAAAAAAAAAADgCCAQ/fmt.webp) + +

拖拽上传

+ +用户可以将文件拖入特定区域，从而完成上传。这种方式简洁高效，无需繁琐的操作步骤，只需轻轻一拖，文件即可快速上传至指定位置。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*tosqQ4NLfOMAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

🎯️ 快捷命令

+ +在 AI 大模型产品中，提供常用意图的快捷命令，方便用户快速输入。快捷命令使用户能高效与 AI 交互，避免繁琐输入操作，提高工作效率与使用体验。 + +![“/” 唤起快捷命令](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*NpaOSq__vi8AAAAAAAAAAAAADgCCAQ/fmt.webp) + +![输入框上方固定快捷命令](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*znoMQZL88_EAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

+ +

🧩 槽位填词

+ + +槽位填写通常是指用户触发特定命令后，会出现预先设定的输入模板，用户只需进行填写或者选择操作即可。槽位填写为用户提供了一种便捷输入方式，减少了用户的输入负担，提高了输入的准确性和效率。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*bHm7Q5NFGRUAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

+

💬 引用输入

+ +基于 AI 回答或用户发送的内容，若进行再次提问，可提供引用输入方式，引用样式涵盖文本、图片、文档等。这样方式，能够让用户更加便捷引用相关信息，丰富提问内容和背景，有助于获得更精准、更有针对性的回答。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*UU-SRa-vbhAAAAAAAAAAAAAADgCCAQ/fmt.webp) diff --git a/docs/spec/expression-user-input.zh-CN.md b/docs/spec/expression-user-input.zh-CN.md new file mode 100644 index 00000000..155ec181 --- /dev/null +++ b/docs/spec/expression-user-input.zh-CN.md @@ -0,0 +1,115 @@ +--- +group: + title: 💻 Hybrid UI 混合界面设计 + order: 4 +order: 3 +title: 表达｜用户输入 +--- + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*59IVSLXDTdIAAAAAAAAAAAAADgCCAQ/fmt.webp) + +可用于 AI 对话的开放式输入，当用户开始向 AI 传达自己的意图时，往往需要输入多种类型的内容。 + + + +

设计目标

+ +当用户有明确诉求时，需借助不同形式的输入交互来向 AI 精准表达意图，以此提升 AI 对用户意图传达的理解程度，进而给出准确回应。【输入组件】在表达阶段发挥着重要作用，借助多种形式（如文字描述、图片伤处、语音输入等）的输入组件，为用户与 AI 的交互增添了更多可能性与灵活性，让用户能够以自然、便捷且正确地完成输入内容并发送。 + + + + + +--- + +

🙌文本输入

+输入框为用户提供了编辑文本的控件，是给大模型提供信息最基础和常见的方式。 + + + +

文本框（Input）

+ + +输入较少的字符总数，使用单行的输入形式。为提升数据录入效率，通常可以在输入框内增加暗提示以帮助提醒用户。 + +> 注：可以对一些文本（如数字和网址）运用特别的样式。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*os7CTZgHfZgAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

文本域（Textarea）

+ + +录入长篇幅的单一的文本使用多行的文本区域。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*FE3vSrLOW_UAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

停止生成操作

+停止生成操作常见位于输入框附近，就近方便用户操作。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*gCKFSY3S1oUAAAAAAAAAAAAADgCCAQ/fmt.webp) + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*Ba4tQ6IN6LcAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

🎙️ 语音输入

+

语音倾听过程

+ + +可以提供用户以语音的形式输入，转化为文字供用户确认。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*BM6xRrVP9B4AAAAAAAAAAAAADgCCAQ/fmt.webp) + +

语音初次开始

+ + +初次启动语音，一般会出现系统自带的提示开启，用户允许后开启语音功能，或禁止不允许开启。 + +![授权语音输入](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*N1QbRL-nCdUAAAAAAAAAAAAADgCCAQ/fmt.webp) + +![禁止使用语音输入](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*eaLATo9gzwEAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

语音异常

+ +语音输入中会有异常情况出现，需要及时且清楚告知用户，如超时提醒、因网络异常而中断等。 + +![超时提醒](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*N4eTQokA5akAAAAAAAAAAAAADgCCAQ/fmt.webp) + +![网络异常](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*JrsuTYuyy_UAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

📃 文件输入

+文件上传是用户基于文件有意图的表达，从而让大模型基于上传文件来深入理解并回答 + +

简单上传

+ +基础上传方式通常用于单个文件的上传，且在不需要预览效果的情况下使用。用户只需点击按钮，即可弹出文件选择框，从而选择需要上传的文件。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*E2IPT4lnwj8AAAAAAAAAAAAADgCCAQ/fmt.webp) + +

拖拽上传

+ +用户可以将文件拖入特定区域，从而完成上传。这种方式简洁高效，无需繁琐的操作步骤，只需轻轻一拖，文件即可快速上传至指定位置。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*tosqQ4NLfOMAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

🎯️ 快捷命令

+ +在 AI 大模型产品中，提供常用意图的快捷命令，方便用户快速输入。快捷命令使用户能高效与 AI 交互，避免繁琐输入操作，提高工作效率与使用体验。 + +![“/” 唤起快捷命令](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*NpaOSq__vi8AAAAAAAAAAAAADgCCAQ/fmt.webp) + +![输入框上方固定快捷命令](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*znoMQZL88_EAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

+ +

🧩 槽位填词

+ + +槽位填写通常是指用户触发特定命令后，会出现预先设定的输入模板，用户只需进行填写或者选择操作即可。槽位填写为用户提供了一种便捷输入方式，减少了用户的输入负担，提高了输入的准确性和效率。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*bHm7Q5NFGRUAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

+

💬 引用输入

+ +基于 AI 回答或用户发送的内容，若进行再次提问，可提供引用输入方式，引用样式涵盖文本、图片、文档等。这样方式，能够让用户更加便捷引用相关信息，丰富提问内容和背景，有助于获得更精准、更有针对性的回答。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*UU-SRa-vbhAAAAAAAAAAAAAADgCCAQ/fmt.webp) diff --git a/docs/spec/expression-user-send.en-US.md b/docs/spec/expression-user-send.en-US.md new file mode 100644 index 00000000..db68b19f --- /dev/null +++ b/docs/spec/expression-user-send.en-US.md @@ -0,0 +1,95 @@ +--- +group: + title: 💻 Hybrid UI 混合界面设计 + order: 4 +order: 4 +title: 表达｜用户发送 +--- + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*QtyDRKq5VQEAAAAAAAAAAAAADgCCAQ/fmt.webp) + +用于承载用户侧发送的对话内容，以结构化、易读的方式展示各种类型的用户发送的内容。 + + + +

设计目标

+ +用户发送组件需具备清晰展示效果，以使用户能够直观地审视自己输入的内容，如文本采用合适字体、字号和颜色，排版合理；图片确保高分辨率、快加载速度和合适呈现；文档提供简洁预览。同时，交互设计要简单易懂，操作反馈及时明确，该组件还应提供便捷的再次编辑操作功能，设置明显图标或提示，以便用户能够轻松地对已输入内容进行修改与完善。 + + + +--- + +

发送交互操作

+ +

编辑发送

+ + +用户在发送信息之后，若发现存在错误或需补充内容时，可以对已发送气泡进行再次编辑修改，提供更为便捷灵活的交互体验，使用户能够更好的表达自身意图。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*-uiSQraZL-UAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

删除发送

+ +当用户认为某个气泡的内容不再需要或者发送错误时，可以选择将其删除，为用户提供了更大的灵活性和控制权，也可以提高交互界面的整洁和准确性。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*TJzIR6-vSCAAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

引用发送

+ +用户发送的气泡内容可被引用，为用户和 AI 交流提供便利与灵活，可高效回应 AI 观点或重复利用自身信息，提升交流连贯性与准确性。 + +![全局引用入口](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*4tI0SrL-Q6wAAAAAAAAAAAAADgCCAQ/fmt.webp) + +![部分文本引用](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*eHWARJJ_xIoAAAAAAAAAAAAADgCCAQ/fmt.webp) + +![单图片引用](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*DVouQ6wbeHEAAAAAAAAAAAAADgCCAQ/fmt.webp) + +![单文件引用](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*5q0CRLZwLv4AAAAAAAAAAAAADgCCAQ/fmt.webp) + +

发送异常

+ +发送异常时，系统迅速弹出清晰提示及时告知用户原因，并提供解决方法，如重新发送等。 + +![发送失败](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*iDMOSKj_2bUAAAAAAAAAAAAADgCCAQ/fmt.webp) + +![重新发送](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*2aedT6-bNGQAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

+ +

发送气泡内容

+ +

💬文本类

+ +发送气泡展示文本类内容，方便用户交流，提高信息可读性与可理解性，使交流更顺畅高效。文本采用合适字体、字号和颜色，排版合理。 + +> 注：可以对一些文本（如数字和网址超链接）运用特别的样式。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*Qqs7QbmhhRgAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

**🎨****图片类**

+ + +发送气泡展示图片类内容，增强交流丰富性与生动性，助于清晰传达信息。设计应考虑图片展示效果与用户体验，为交流增添新维度，图片确保高分辨率、快加载速度和合适呈现。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*iDpZSa5acrQAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

**📃****文档类**

+ + +发送气泡能够展示文档类内容，增强和AI的交流的专业性和信息丰富度。在设计上，提供文档简洁预览，需充分考虑清晰性和易用性。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*REJDR5uemYcAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

**🧩****混合类｜图片+文档**

+ + +发送气泡可混合展示图片类和文档类内容，丰富分享方式，提升交流生动性与专业性及信息丰富度。利于全面传达复杂信息，使交流深入高效。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*QjFHTarVmYsAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

**🙌****引用内容**

+ +引用气泡内容再次输入后，发送气泡可展示文本、图片、文档等样式。丰富信息呈现，使交流直观全面高效。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*xCoAS5LeDSEAAAAAAAAAAAAADgCCAQ/fmt.webp) diff --git a/docs/spec/expression-user-send.zh-CN.md b/docs/spec/expression-user-send.zh-CN.md new file mode 100644 index 00000000..db68b19f --- /dev/null +++ b/docs/spec/expression-user-send.zh-CN.md @@ -0,0 +1,95 @@ +--- +group: + title: 💻 Hybrid UI 混合界面设计 + order: 4 +order: 4 +title: 表达｜用户发送 +--- + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*QtyDRKq5VQEAAAAAAAAAAAAADgCCAQ/fmt.webp) + +用于承载用户侧发送的对话内容，以结构化、易读的方式展示各种类型的用户发送的内容。 + + + +

设计目标

+ +用户发送组件需具备清晰展示效果，以使用户能够直观地审视自己输入的内容，如文本采用合适字体、字号和颜色，排版合理；图片确保高分辨率、快加载速度和合适呈现；文档提供简洁预览。同时，交互设计要简单易懂，操作反馈及时明确，该组件还应提供便捷的再次编辑操作功能，设置明显图标或提示，以便用户能够轻松地对已输入内容进行修改与完善。 + + + +--- + +

发送交互操作

+ +

编辑发送

+ + +用户在发送信息之后，若发现存在错误或需补充内容时，可以对已发送气泡进行再次编辑修改，提供更为便捷灵活的交互体验，使用户能够更好的表达自身意图。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*-uiSQraZL-UAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

删除发送

+ +当用户认为某个气泡的内容不再需要或者发送错误时，可以选择将其删除，为用户提供了更大的灵活性和控制权，也可以提高交互界面的整洁和准确性。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*TJzIR6-vSCAAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

引用发送

+ +用户发送的气泡内容可被引用，为用户和 AI 交流提供便利与灵活，可高效回应 AI 观点或重复利用自身信息，提升交流连贯性与准确性。 + +![全局引用入口](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*4tI0SrL-Q6wAAAAAAAAAAAAADgCCAQ/fmt.webp) + +![部分文本引用](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*eHWARJJ_xIoAAAAAAAAAAAAADgCCAQ/fmt.webp) + +![单图片引用](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*DVouQ6wbeHEAAAAAAAAAAAAADgCCAQ/fmt.webp) + +![单文件引用](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*5q0CRLZwLv4AAAAAAAAAAAAADgCCAQ/fmt.webp) + +

发送异常

+ +发送异常时，系统迅速弹出清晰提示及时告知用户原因，并提供解决方法，如重新发送等。 + +![发送失败](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*iDMOSKj_2bUAAAAAAAAAAAAADgCCAQ/fmt.webp) + +![重新发送](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*2aedT6-bNGQAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

+ +

发送气泡内容

+ +

💬文本类

+ +发送气泡展示文本类内容，方便用户交流，提高信息可读性与可理解性，使交流更顺畅高效。文本采用合适字体、字号和颜色，排版合理。 + +> 注：可以对一些文本（如数字和网址超链接）运用特别的样式。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*Qqs7QbmhhRgAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

**🎨****图片类**

+ + +发送气泡展示图片类内容，增强交流丰富性与生动性，助于清晰传达信息。设计应考虑图片展示效果与用户体验，为交流增添新维度，图片确保高分辨率、快加载速度和合适呈现。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*iDpZSa5acrQAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

**📃****文档类**

+ + +发送气泡能够展示文档类内容，增强和AI的交流的专业性和信息丰富度。在设计上，提供文档简洁预览，需充分考虑清晰性和易用性。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*REJDR5uemYcAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

**🧩****混合类｜图片+文档**

+ + +发送气泡可混合展示图片类和文档类内容，丰富分享方式，提升交流生动性与专业性及信息丰富度。利于全面传达复杂信息，使交流深入高效。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*QjFHTarVmYsAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

**🙌****引用内容**

+ +引用气泡内容再次输入后，发送气泡可展示文本、图片、文档等样式。丰富信息呈现，使交流直观全面高效。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*xCoAS5LeDSEAAAAAAAAAAAAADgCCAQ/fmt.webp) diff --git a/docs/spec/feedback-result-application.en-US.md b/docs/spec/feedback-result-application.en-US.md new file mode 100644 index 00000000..1693db20 --- /dev/null +++ b/docs/spec/feedback-result-application.en-US.md @@ -0,0 +1,57 @@ +--- +group: + title: 💻 Hybrid UI 混合界面设计 + order: 4 +order: 7 +title: 反馈｜结果应用 +--- + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*LGETTJIfYe0AAAAAAAAAAAAADgCCAQ/fmt.webp) + +在AI呈现生成结果后，需要为用户提供对AI生成内容的快捷操作能力，包括复制、重新生成、反馈等基础功能，帮助用户高效使用和处理内容。 + +

设计目标

+ +结果应用组件需要结合实际场景，提供必要且便捷的内容处理能力。通过合理的操作项布局和及时的状态反馈，让用户能够轻松地使用和管理AI生成的内容，提升整体交互体验和效率。 + +--- + +

基础操作

+ +

复制

+ +最常用的内容应用方式。点击后立即将AI生成的内容复制到剪切板，同时图标切换为完成状态给予反馈。复制范围包括文本、代码等可复制内容，要保证格式完整性。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*QOSfTLjK1kEAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

重新生成

+ +用于优化或改进当前结果。点击触发AI重新生成请求，支持多个版本结果的切换对比。新生成的内容要在界面中平滑切换，保持良好的过渡体验。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*_5uNR7dvpAAAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

反馈

+ +通过点赞/点踩收集用户对内容的评价。操作后图标立即反映选择状态，清晰展示用户的评价结果。在特定场景下，可通过弹窗收集具体反馈，提供快捷选项的同时保留自由输入的方式。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*i1aMRKn7WLEAAAAAAAAAAAAADgCCAQ/fmt.webp) + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*Am8ARrPiHhYAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

删除

+ +用于移除不需要的回答内容。考虑到操作的不可逆性，使用警示色提醒，并设置二次确认机制避免误操作。确认删除后要平滑移除内容。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*C_PTQIUXkL8AAAAAAAAAAAAADgCCAQ/fmt.webp) + +

朗读

+ +将文本转换为语音输出。点击开始播放，再次点击停止。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*gG4nQZZOQYoAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

引用

+ +快速将AI回答作为新对话的引用内容。点击后自动填充到输入区域，方便用户基于已有回答继续对话。引用要保持原文格式，确保上下文的连贯性。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*GUaJQrP0sqQAAAAAAAAAAAAADgCCAQ/fmt.webp) diff --git a/docs/spec/feedback-result-application.zh-CN.md b/docs/spec/feedback-result-application.zh-CN.md new file mode 100644 index 00000000..1693db20 --- /dev/null +++ b/docs/spec/feedback-result-application.zh-CN.md @@ -0,0 +1,57 @@ +--- +group: + title: 💻 Hybrid UI 混合界面设计 + order: 4 +order: 7 +title: 反馈｜结果应用 +--- + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*LGETTJIfYe0AAAAAAAAAAAAADgCCAQ/fmt.webp) + +在AI呈现生成结果后，需要为用户提供对AI生成内容的快捷操作能力，包括复制、重新生成、反馈等基础功能，帮助用户高效使用和处理内容。 + +

设计目标

+ +结果应用组件需要结合实际场景，提供必要且便捷的内容处理能力。通过合理的操作项布局和及时的状态反馈，让用户能够轻松地使用和管理AI生成的内容，提升整体交互体验和效率。 + +--- + +

基础操作

+ +

复制

+ +最常用的内容应用方式。点击后立即将AI生成的内容复制到剪切板，同时图标切换为完成状态给予反馈。复制范围包括文本、代码等可复制内容，要保证格式完整性。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*QOSfTLjK1kEAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

重新生成

+ +用于优化或改进当前结果。点击触发AI重新生成请求，支持多个版本结果的切换对比。新生成的内容要在界面中平滑切换，保持良好的过渡体验。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*_5uNR7dvpAAAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

反馈

+ +通过点赞/点踩收集用户对内容的评价。操作后图标立即反映选择状态，清晰展示用户的评价结果。在特定场景下，可通过弹窗收集具体反馈，提供快捷选项的同时保留自由输入的方式。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*i1aMRKn7WLEAAAAAAAAAAAAADgCCAQ/fmt.webp) + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*Am8ARrPiHhYAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

删除

+ +用于移除不需要的回答内容。考虑到操作的不可逆性，使用警示色提醒，并设置二次确认机制避免误操作。确认删除后要平滑移除内容。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*C_PTQIUXkL8AAAAAAAAAAAAADgCCAQ/fmt.webp) + +

朗读

+ +将文本转换为语音输出。点击开始播放，再次点击停止。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*gG4nQZZOQYoAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

引用

+ +快速将AI回答作为新对话的引用内容。点击后自动填充到输入区域，方便用户基于已有回答继续对话。引用要保持原文格式，确保上下文的连贯性。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*GUaJQrP0sqQAAAAAAAAAAAAADgCCAQ/fmt.webp) diff --git a/docs/spec/feedback-result-display.en-US.md b/docs/spec/feedback-result-display.en-US.md new file mode 100644 index 00000000..7173c5c8 --- /dev/null +++ b/docs/spec/feedback-result-display.en-US.md @@ -0,0 +1,63 @@ +--- +group: + title: 💻 Hybrid UI 混合界面设计 + order: 6 +order: 8 +title: 反馈｜结果展示 +--- + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*p4l8Q4Hdix0AAAAAAAAAAAAADgCCAQ/fmt.webp) + +AI处理完成用户需求后，需以结构化、易读的方式来呈现各种类型的回答内容。 + +

设计目标

+ +结果展示需要合理规划信息层级，让重要内容和结构化信息更易识别。针对文本、图片、代码等不同类型的内容采用恰当的展示形式，既要保持视觉风格的统一性，又要充分考虑长文本的阅读体验，避免信息过载影响理解。 + +--- + +

内容展示

+ +

文本内容

+ +作为最基础的展示形式，需要处理好单行文本、多行文本和结构化文本（如列表、标题段落等）的呈现。通过合理的间距、字号和段落划分，提升长文本的可读性。对重点内容可使用高亮、加粗等样式突出，但需控制使用频率避免干扰。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*c_8JTrMpRJ8AAAAAAAAAAAAADgCCAQ/fmt.webp) + +

图片内容

+ +展示AI生成或处理的图片结果。默认以合适尺寸展示，支持预览大图和缩放细节。多图场景注意排版美观，加载时提供占位图避免布局跳动。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*S8ljSJ-V6YIAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

代码内容

+ +为展示代码片段设计的专门容器。使用等宽字体，支持代码语法高亮增强可读性。提供代码复制功能，方便用户使用。代码过长时支持横向滚动，保持代码格式不被破坏。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*io9ISYEQJ_sAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

交互卡片

+ +用于特定场景下需要用户操作的结构化内容，如表单填写、参数调整等。卡片内可包含按钮、输入框等交互元素，操作要有明确的反馈。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*5TshRpA9w_4AAAAAAAAAAAAADgCCAQ/fmt.webp) + +

其他

+ +用于展示表格、数学公式等特殊格式内容。可以和普通文本内容混合展示，保持整体的视觉一致性。特殊内容的展示要考虑性能和兼容性，必要时提供降级方案。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*-MuHQo41bPYAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

内容组织

+ +

内容折叠

+ +针对超过一屏的长内容，提供折叠功能提升浏览效率。默认展示预览内容，用户可以根据需要展开查看完整信息。折叠状态要有明确提示，展开/收起过程动画流畅。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*VhKkQ78jX0MAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

内容参考来源展示

+ +在RAG等需要提供引用依据的场景下使用。参考来源默认收起以减少干扰，用户可以通过hover或点击方式查看详细引用内容。来源信息要简洁清晰，增强内容可信度。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*L5sWQ6w_qjoAAAAAAAAAAAAADgCCAQ/fmt.webp) diff --git a/docs/spec/feedback-result-display.zh-CN.md b/docs/spec/feedback-result-display.zh-CN.md new file mode 100644 index 00000000..7173c5c8 --- /dev/null +++ b/docs/spec/feedback-result-display.zh-CN.md @@ -0,0 +1,63 @@ +--- +group: + title: 💻 Hybrid UI 混合界面设计 + order: 6 +order: 8 +title: 反馈｜结果展示 +--- + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*p4l8Q4Hdix0AAAAAAAAAAAAADgCCAQ/fmt.webp) + +AI处理完成用户需求后，需以结构化、易读的方式来呈现各种类型的回答内容。 + +

设计目标

+ +结果展示需要合理规划信息层级，让重要内容和结构化信息更易识别。针对文本、图片、代码等不同类型的内容采用恰当的展示形式，既要保持视觉风格的统一性，又要充分考虑长文本的阅读体验，避免信息过载影响理解。 + +--- + +

内容展示

+ +

文本内容

+ +作为最基础的展示形式，需要处理好单行文本、多行文本和结构化文本（如列表、标题段落等）的呈现。通过合理的间距、字号和段落划分，提升长文本的可读性。对重点内容可使用高亮、加粗等样式突出，但需控制使用频率避免干扰。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*c_8JTrMpRJ8AAAAAAAAAAAAADgCCAQ/fmt.webp) + +

图片内容

+ +展示AI生成或处理的图片结果。默认以合适尺寸展示，支持预览大图和缩放细节。多图场景注意排版美观，加载时提供占位图避免布局跳动。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*S8ljSJ-V6YIAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

代码内容

+ +为展示代码片段设计的专门容器。使用等宽字体，支持代码语法高亮增强可读性。提供代码复制功能，方便用户使用。代码过长时支持横向滚动，保持代码格式不被破坏。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*io9ISYEQJ_sAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

交互卡片

+ +用于特定场景下需要用户操作的结构化内容，如表单填写、参数调整等。卡片内可包含按钮、输入框等交互元素，操作要有明确的反馈。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*5TshRpA9w_4AAAAAAAAAAAAADgCCAQ/fmt.webp) + +

其他

+ +用于展示表格、数学公式等特殊格式内容。可以和普通文本内容混合展示，保持整体的视觉一致性。特殊内容的展示要考虑性能和兼容性，必要时提供降级方案。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*-MuHQo41bPYAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

内容组织

+ +

内容折叠

+ +针对超过一屏的长内容，提供折叠功能提升浏览效率。默认展示预览内容，用户可以根据需要展开查看完整信息。折叠状态要有明确提示，展开/收起过程动画流畅。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*VhKkQ78jX0MAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

内容参考来源展示

+ +在RAG等需要提供引用依据的场景下使用。参考来源默认收起以减少干扰，用户可以通过hover或点击方式查看详细引用内容。来源信息要简洁清晰，增强内容可信度。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*L5sWQ6w_qjoAAAAAAAAAAAAADgCCAQ/fmt.webp) diff --git a/docs/spec/follow-up.en-US.md b/docs/spec/follow-up.en-US.md new file mode 100644 index 00000000..b036692f --- /dev/null +++ b/docs/spec/follow-up.en-US.md @@ -0,0 +1,60 @@ +--- +group: + title: 💭 Conversation 会话设计 + order: 3 +order: 2 +title: 追问 +--- + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*BhgMQIcgCfUAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

WHAT 概述

+ +在 AI 对话交互过程中，若用户所提供的信息不足以支撑 AI 完成既定的任务目标，AI 必须采取主动措施，通过精心设计的询问来引导用户提供额外的槽位信息。这种策略不仅能够确保任务的顺利完成，还能够提升用户体验，避免因信息不足而导致的误解或错误。例如，如果用户在预订酒店时只提供了入住日期，而没有提供退房日期，AI 可以礼貌地询问：“您需要在这里住多久？”这样的询问既明确又具体，有助于获取所需信息，同时保持了对话的流畅性。 + +

HOW 如何操作

+ +1. **明确识别需求：**AI 首先需要准确分析用户输入，以确定哪些信息是缺失的或不充分的。 +2. **构建有效询问：**基于识别出的信息缺口，AI 应构建清晰、具体的询问，直接引导用户补充所需信息。 +3. **保持对话连贯性：**在请求额外信息时，AI 应保持对话的自然流畅，避免突兀的提问，确保用户理解为何需要这些信息。 + +

消歧场景

+ +在对话中，语言往往存在多种解释，通常依赖上下文来消除歧义。当上下文信息不足以明确含义时，应主动向用户请求额外的信息以澄清问题。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*D2ntT7HfxeIAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

组件构成

+ +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*dW_WRphl1w8AAAAAAAAAAAAADgCCAQ/fmt.webp) + +

错误处理

+ +当对话遇到问题时，通过精确定位问题的核心，可以提供更加针对性的帮助，引导用户迅速恢复正确的操作流程。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*mKI4QJKDLEwAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

组件构成

+ +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*ALVHQ4SVycsAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

二次确认

+ +尽管这种情况较少，但在以下场景中，进行再次确认是至关重要的： + +- 当误解用户意图可能导致严重后果时（例如，涉及姓名、地址或用户授权分享的文本）； +- 在执行不可逆操作之前（例如，删除用户数据或完成交易）。 + +进行双重确认可以最大限度地减少错误和风险，确保用户得到准确无误的服务。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*DGmNTpLDwf4AAAAAAAAAAAAADgCCAQ/fmt.webp) + +

组件构成

+ +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*rybpRpR5W_gAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

影响核心体验

+ +如果可选的槽位信息对用户体验至关重要时，AI 也可以主动进行追问，以确保收集到的信息足够支持用户做出决策。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*8lGGTJP2bw0AAAAAAAAAAAAADgCCAQ/fmt.webp) diff --git a/docs/spec/follow-up.zh-CN.md b/docs/spec/follow-up.zh-CN.md new file mode 100644 index 00000000..b036692f --- /dev/null +++ b/docs/spec/follow-up.zh-CN.md @@ -0,0 +1,60 @@ +--- +group: + title: 💭 Conversation 会话设计 + order: 3 +order: 2 +title: 追问 +--- + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*BhgMQIcgCfUAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

WHAT 概述

+ +在 AI 对话交互过程中，若用户所提供的信息不足以支撑 AI 完成既定的任务目标，AI 必须采取主动措施，通过精心设计的询问来引导用户提供额外的槽位信息。这种策略不仅能够确保任务的顺利完成，还能够提升用户体验，避免因信息不足而导致的误解或错误。例如，如果用户在预订酒店时只提供了入住日期，而没有提供退房日期，AI 可以礼貌地询问：“您需要在这里住多久？”这样的询问既明确又具体，有助于获取所需信息，同时保持了对话的流畅性。 + +

HOW 如何操作

+ +1. **明确识别需求：**AI 首先需要准确分析用户输入，以确定哪些信息是缺失的或不充分的。 +2. **构建有效询问：**基于识别出的信息缺口，AI 应构建清晰、具体的询问，直接引导用户补充所需信息。 +3. **保持对话连贯性：**在请求额外信息时，AI 应保持对话的自然流畅，避免突兀的提问，确保用户理解为何需要这些信息。 + +

消歧场景

+ +在对话中，语言往往存在多种解释，通常依赖上下文来消除歧义。当上下文信息不足以明确含义时，应主动向用户请求额外的信息以澄清问题。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*D2ntT7HfxeIAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

组件构成

+ +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*dW_WRphl1w8AAAAAAAAAAAAADgCCAQ/fmt.webp) + +

错误处理

+ +当对话遇到问题时，通过精确定位问题的核心，可以提供更加针对性的帮助，引导用户迅速恢复正确的操作流程。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*mKI4QJKDLEwAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

组件构成

+ +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*ALVHQ4SVycsAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

二次确认

+ +尽管这种情况较少，但在以下场景中，进行再次确认是至关重要的： + +- 当误解用户意图可能导致严重后果时（例如，涉及姓名、地址或用户授权分享的文本）； +- 在执行不可逆操作之前（例如，删除用户数据或完成交易）。 + +进行双重确认可以最大限度地减少错误和风险，确保用户得到准确无误的服务。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*DGmNTpLDwf4AAAAAAAAAAAAADgCCAQ/fmt.webp) + +

组件构成

+ +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*rybpRpR5W_gAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

影响核心体验

+ +如果可选的槽位信息对用户体验至关重要时，AI 也可以主动进行追问，以确保收集到的信息足够支持用户做出决策。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*8lGGTJP2bw0AAAAAAAAAAAAADgCCAQ/fmt.webp) diff --git a/docs/spec/guide-intention-expression.en-US.md b/docs/spec/guide-intention-expression.en-US.md new file mode 100644 index 00000000..a0f535e5 --- /dev/null +++ b/docs/spec/guide-intention-expression.en-US.md @@ -0,0 +1,33 @@ +--- +group: + title: ❤️ Intention 意图设计 + order: 1 +order: 3 +title: 引导意图表达 +--- + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*pNdBQ6XZy0YAAAAAAAAAAAAADgCCAQ/fmt.webp) + +用户意图表达常倾向于口语化的方式，导致 AI 无法高效识别与理解，并反过来影响了用户体验。为了引导 AI 与用户双方意图的准确匹配，我们在设计侧引入了「槽位设计」这一概念。 + + + +什么是槽位呢？槽位可以理解为预定义的参数或变量，用于匹配用户表达的关键信息，如：日期、时间、地点等。这些信息对理解用户意图和提供准确响应至关重要，共同构成对用户需求的完整理解。例如，在智能助手应用中，用户说“提醒我明天下午2点开会”，其中“明天下午2点”就是一个时间槽位。为了准确的引导用户将这些关键信息表达清楚，我们需要在交互过程中有意识的、自然的引导用户进行对应信息的表达。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*JobgQqiiT4YAAAAAAAAAAAAADgCCAQ/fmt.webp) + +在蚂蚁实际业务的实践中我们发现就算是应用意图槽位匹配，依然存在部分场景匹配不到不全的情况，针对此类场景我们也整理了应对策略，去覆盖解决全量意图槽位匹配的场景，意图槽位匹配策略如下： + +- **意图与槽位精准匹配\*\***：\*\*若用户意图的可靠度高且所有必填槽位均已成功填写，系统将直接发送指令到下游服务，执行用户请求。 +- **意图匹配到多个类似槽位：**当用户意图或关键槽位的可靠度较低时，系统将回复意图或槽位确认信息，以请求用户进一步澄清或提供额外信息，确保信息准确无误。 +- **意图未匹配到槽位：**当遇到无法直接处理的用户意图时，采用对话转移或回复兜底话术策略，确保用户得到合理引导或回应。 + +槽位设计的规则后续将在具体的会话设计篇目中有相关的具体应用，大家按需查阅。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*_a2DTZensl8AAAAAAAAAAAAADgCCAQ/fmt.webp) + +行文至此，相信大家对于概述开篇提到“什么时候应该使用会话的方式？如何让 AI 理解用户的意图？等”问题有了初步的答案，接下来让我们进入角色设计篇、会话设计篇、混合界面篇中去进一步了解如何创造更好的 AI 产品体验。 + +

最佳案例

+ +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*SSWhQIEadIYAAAAAAAAAAAAADgCCAQ/fmt.webp) diff --git a/docs/spec/guide-intention-expression.zh-CN.md b/docs/spec/guide-intention-expression.zh-CN.md new file mode 100644 index 00000000..a0f535e5 --- /dev/null +++ b/docs/spec/guide-intention-expression.zh-CN.md @@ -0,0 +1,33 @@ +--- +group: + title: ❤️ Intention 意图设计 + order: 1 +order: 3 +title: 引导意图表达 +--- + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*pNdBQ6XZy0YAAAAAAAAAAAAADgCCAQ/fmt.webp) + +用户意图表达常倾向于口语化的方式，导致 AI 无法高效识别与理解，并反过来影响了用户体验。为了引导 AI 与用户双方意图的准确匹配，我们在设计侧引入了「槽位设计」这一概念。 + + + +什么是槽位呢？槽位可以理解为预定义的参数或变量，用于匹配用户表达的关键信息，如：日期、时间、地点等。这些信息对理解用户意图和提供准确响应至关重要，共同构成对用户需求的完整理解。例如，在智能助手应用中，用户说“提醒我明天下午2点开会”，其中“明天下午2点”就是一个时间槽位。为了准确的引导用户将这些关键信息表达清楚，我们需要在交互过程中有意识的、自然的引导用户进行对应信息的表达。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*JobgQqiiT4YAAAAAAAAAAAAADgCCAQ/fmt.webp) + +在蚂蚁实际业务的实践中我们发现就算是应用意图槽位匹配，依然存在部分场景匹配不到不全的情况，针对此类场景我们也整理了应对策略，去覆盖解决全量意图槽位匹配的场景，意图槽位匹配策略如下： + +- **意图与槽位精准匹配\*\***：\*\*若用户意图的可靠度高且所有必填槽位均已成功填写，系统将直接发送指令到下游服务，执行用户请求。 +- **意图匹配到多个类似槽位：**当用户意图或关键槽位的可靠度较低时，系统将回复意图或槽位确认信息，以请求用户进一步澄清或提供额外信息，确保信息准确无误。 +- **意图未匹配到槽位：**当遇到无法直接处理的用户意图时，采用对话转移或回复兜底话术策略，确保用户得到合理引导或回应。 + +槽位设计的规则后续将在具体的会话设计篇目中有相关的具体应用，大家按需查阅。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*_a2DTZensl8AAAAAAAAAAAAADgCCAQ/fmt.webp) + +行文至此，相信大家对于概述开篇提到“什么时候应该使用会话的方式？如何让 AI 理解用户的意图？等”问题有了初步的答案，接下来让我们进入角色设计篇、会话设计篇、混合界面篇中去进一步了解如何创造更好的 AI 产品体验。 + +

最佳案例

+ +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*SSWhQIEadIYAAAAAAAAAAAAADgCCAQ/fmt.webp) diff --git a/docs/spec/hint.en-US.md b/docs/spec/hint.en-US.md new file mode 100644 index 00000000..3d63c29e --- /dev/null +++ b/docs/spec/hint.en-US.md @@ -0,0 +1,51 @@ +--- +group: + title: 💭 Conversation 会话设计 + order: 3 +order: 3 +title: 提示 +--- + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*4cuyRIqCXe0AAAAAAAAAAAAADgCCAQ/fmt.webp) + +

WHAT 概述

+ +在设计对话式 AI 界面时，应避免教导用户如何与 AI 进行交流。理想的交互方式是让 AI 适应用户的自然语言，而不是要求用户学习并使用特定的命令或短语。 + +会话式界面的核心优势在于其易用性，用户无需额外学习即可上手使用。AI 应利用自然语言处理的能力来理解用户的多样化表达，而不是限制用户必须使用特定的词汇或命令。用户可以更轻松、更自然地进行对话，而无需记忆特定的指令。这种方式不仅提高了用户体验的流畅性，也有助于建立用户对AI的信任和满意度。相反，如果用户必须说出精确的命令才能得到响应，这将限制他们的交互自由，降低界面的直观性，从而影响用户的整体体验。 + +

HOW 如何操作

+ +

不要让用户发出固定指令

+ +在设计 AI 助手的对话体验时，重点应该放在用户能够通过 AI 实现的具体行动上，而不是限制用户必须如何表达这些需求。 + +例如，不是告诉用户“请说‘显示更多选项’来获取更多信息”，而是可以说“你想要了解更多信息吗？” + +这样的提问方式不仅更自然，也更易于用户理解，因为它直接关联到用户可以采取的行动，而不是他们必须如何表达这个愿望。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*XqX4TYFQhUcAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

组件构成

+ +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*PrBsQLK1jnoAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

给提示而不是命令

+ +采用动词短语来明确指示用户可执行的动作。这样用户将更容易跟随并作出相应的反应。在提供示例以阐释用户可以表达的内容时，应避免提倡使用生硬的关键词短语。允许他们按照自己的喜好来表达。用户应有权以任何他们觉得舒适的方式发出指令 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*VeYtSZONca4AAAAAAAAAAAAADgCCAQ/fmt.webp) + +

组件构成

+ +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*4yWJRajksOwAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

未找到匹配项的建议

+ +当出现“未找到匹配项”的错误时，可以向用户提供一些建议性的语句，指导他们在需要进一步协助时该如何表达。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*GJCKQ4nRYdIAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

组件构成

+ +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*Sq7gR4wu-5wAAAAAAAAAAAAADgCCAQ/fmt.webp) diff --git a/docs/spec/hint.zh-CN.md b/docs/spec/hint.zh-CN.md new file mode 100644 index 00000000..3d63c29e --- /dev/null +++ b/docs/spec/hint.zh-CN.md @@ -0,0 +1,51 @@ +--- +group: + title: 💭 Conversation 会话设计 + order: 3 +order: 3 +title: 提示 +--- + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*4cuyRIqCXe0AAAAAAAAAAAAADgCCAQ/fmt.webp) + +

WHAT 概述

+ +在设计对话式 AI 界面时，应避免教导用户如何与 AI 进行交流。理想的交互方式是让 AI 适应用户的自然语言，而不是要求用户学习并使用特定的命令或短语。 + +会话式界面的核心优势在于其易用性，用户无需额外学习即可上手使用。AI 应利用自然语言处理的能力来理解用户的多样化表达，而不是限制用户必须使用特定的词汇或命令。用户可以更轻松、更自然地进行对话，而无需记忆特定的指令。这种方式不仅提高了用户体验的流畅性，也有助于建立用户对AI的信任和满意度。相反，如果用户必须说出精确的命令才能得到响应，这将限制他们的交互自由，降低界面的直观性，从而影响用户的整体体验。 + +

HOW 如何操作

+ +

不要让用户发出固定指令

+ +在设计 AI 助手的对话体验时，重点应该放在用户能够通过 AI 实现的具体行动上，而不是限制用户必须如何表达这些需求。 + +例如，不是告诉用户“请说‘显示更多选项’来获取更多信息”，而是可以说“你想要了解更多信息吗？” + +这样的提问方式不仅更自然，也更易于用户理解，因为它直接关联到用户可以采取的行动，而不是他们必须如何表达这个愿望。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*XqX4TYFQhUcAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

组件构成

+ +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*PrBsQLK1jnoAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

给提示而不是命令

+ +采用动词短语来明确指示用户可执行的动作。这样用户将更容易跟随并作出相应的反应。在提供示例以阐释用户可以表达的内容时，应避免提倡使用生硬的关键词短语。允许他们按照自己的喜好来表达。用户应有权以任何他们觉得舒适的方式发出指令 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*VeYtSZONca4AAAAAAAAAAAAADgCCAQ/fmt.webp) + +

组件构成

+ +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*4yWJRajksOwAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

未找到匹配项的建议

+ +当出现“未找到匹配项”的错误时，可以向用户提供一些建议性的语句，指导他们在需要进一步协助时该如何表达。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*GJCKQ4nRYdIAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

组件构成

+ +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*Sq7gR4wu-5wAAAAAAAAAAAAADgCCAQ/fmt.webp) diff --git a/docs/spec/human-touch.en-US.md b/docs/spec/human-touch.en-US.md new file mode 100644 index 00000000..7b8b1edb --- /dev/null +++ b/docs/spec/human-touch.en-US.md @@ -0,0 +1,75 @@ +--- +group: + title: 🎭 Role 角色设计 + order: 2 +order: 3 +title: 有人情味 +--- + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*y-DHRIdTUp8AAAAAAAAAAAAADgCCAQ/fmt.webp) + +

如何定义

+ +情感化是指在塑造 AI 角色时，赋予其理解和表达人类情感的能力，以便与用户建立更加深入和人性化的互动。这包括识别用户的情绪状态，并通过富有同理心且丰富的语言表达、个性化的关怀以及情感适应性以及富有感染力的视觉表现来响应用户的需求。 + +:::tips + +

**情感的适应性**

+ +角色能够敏感地识别并响应用户的情绪变化，通过适当的语言和行为，展示出对用户情感状态的同理心和关切。情感表达上可以包含一定程度的复杂性，如矛盾感或微妙的情绪变化，使角色更加丰满和真实。 + +::: + +:::tips + +

语言的丰富度

+ +角色的语言风格应与所期望的情感表达相匹配，比如柔和、热情、鼓舞人心或戏谑等风格，以便于在情感上与用户产生共鸣，同时使用情感丰富的语言或语调的符号表达，来增强交流的生动性和真实感。 + +::: + +:::tips + +

互动的个性化

+ +角色的个性化特征应贯穿其话语与行为，展现出角色深层次的个性特征，不同情境下的表现应保持一致性，以通过对用户过往行为的记忆和分析，提供更加贴心的服务和响应，增加情感的连结。 + +::: + +:::tips + +

**视觉的表现力**

+ +对于能够展现非语言交流的角色，如虚拟角色或实体机器人等场景，应通过视觉和听觉的非语言信号，如面部表情、肢体语言、语调等，来加强情感化的表达，使其更富有感染力。 + +::: + +

适用场景

+ +角色的情感化设计在众多场景中显得尤为关键，特别是在那些追求高度用户参与度、建立情感连接或需处理敏感信息的环境中。通过角色情感化，可以更好地满足用户在**情感交流**、**陪伴关怀**、**个性化体验**等方面的需求，提升人机互动的质量和效果。以下是一些典型场景： + +- **家庭与个人助理：**在智能家居和个人助理中，用户需要长期互动与陪伴，如个人助理、健康监测、虚拟宠物等，这些场景需要通过情感反馈增加用户的依赖感和亲密感。而情感化的助手能提供更自然和愉悦的交互体验，通过学习用户习惯与偏好，以更贴心的方式进行日常提醒和管理。 +- **娱乐与社交: **在数字娱乐和社交互动中，情感化的角色可以增加用户的沉浸感和参与度，如游戏、虚拟现实和在线社区中，通过情感反应增强故事叙述和角色互动。 这些场景中角色情感化的运用能够丰富用户体验，使技术交互更接近人与人之间的自然互动。 +- **特殊关怀及服务：**面向老年人的设计，情感化的角色能提供温馨、耐心的陪伴，减轻孤独感，满足情感需求。 针对有特殊需求的用户（如残障人士），情感化设计能提供更加贴心、敏感的支持，增强自主生活能力。面对紧急服务与危机应对，如灾害警报、医疗急救指导，情感化设计能更有效地传达紧迫性并安抚用户情绪。 +- **医疗与教育：**在医疗健康护理领域，特别是在心理健康、疾病管理和远程医疗领域，情感化的角色能提供安慰、鼓励，帮助用户更好地遵循治疗计划，感受到情感上的支持。在教育环境中，情感化的AI可以提供更个性化的学习支持，通过情感反应匹配学生的学习状态，以鼓励和激励学生，提升学习效果。 +- **客户服务与支持：**在客户服务中，情感化的交互可以提升服务品质，让客户感受到更多人性化关怀和同理心，增加客户满意度和忠诚度。 在解决用户问题时，情感化的角色能够以更加贴心和理解的态度响应用户的问题和投诉，提升用户满意度和品牌忠诚度。 + + …… + +在这些场景中，角色的情感化设计不仅仅是外观或语言上的调整，更是深入到交互逻辑、反馈机制及内容生成策略中，确保智能 AI 能够以更加人性化的方式与用户沟通。这些场景强调了角色情感化设计的重要性，它不仅关乎于技术实现，更在于如何通过设计触达人心，建立更加人性化、高效且富有同情心的数字交互体验。 + +

最佳案例

+ +

1、为角色赋予更细腻的情感的适应性、互动的个性化、丰富的语言表达

+ +细腻的**情感适应性**让虚拟陪伴类 AI 能感知并响应用户情绪，建立情感纽带，给予适时的支持与反馈；**互动的个性化**确保体验贴合每位用户的独特性，增强归属感与真实感；**丰富的语言表达**则让交流生动多彩，促进深层次沟通，使互动既智慧又充满人性温度。**情感的适应性、互动的个性化、丰富的语言表达**这三点共同作用，极大提升了 AI 的质量，满足用户情感与心理需求，构建了更加亲密和谐的人机交互环境。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*n-oTTJjH_fIAAAAAAAAAAAAADgCCAQ/fmt.webp) + + + +

2、为角色设定具有感染力的视觉的表现力增强情感化的表达

+ +**视觉表现力**通过直观的形象设计与动态效果，增强 AI 的个性与情感传达，使用户在视觉上获得即时的情感共鸣。不仅丰富了交互的维度，还能够让非言语信息如表情、动作等成为沟通的重要组成部分，进而提升互动的真实感与沉浸感。精心设计的视觉表现力能够跨越语言限制，有效吸引用户注意，深化用户与 AI 之间的情感联系。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*hsuNSKkBNycAAAAAAAAAAAAADgCCAQ/fmt.webp) diff --git a/docs/spec/human-touch.zh-CN.md b/docs/spec/human-touch.zh-CN.md new file mode 100644 index 00000000..7b8b1edb --- /dev/null +++ b/docs/spec/human-touch.zh-CN.md @@ -0,0 +1,75 @@ +--- +group: + title: 🎭 Role 角色设计 + order: 2 +order: 3 +title: 有人情味 +--- + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*y-DHRIdTUp8AAAAAAAAAAAAADgCCAQ/fmt.webp) + +

如何定义

+ +情感化是指在塑造 AI 角色时，赋予其理解和表达人类情感的能力，以便与用户建立更加深入和人性化的互动。这包括识别用户的情绪状态，并通过富有同理心且丰富的语言表达、个性化的关怀以及情感适应性以及富有感染力的视觉表现来响应用户的需求。 + +:::tips + +

**情感的适应性**

+ +角色能够敏感地识别并响应用户的情绪变化，通过适当的语言和行为，展示出对用户情感状态的同理心和关切。情感表达上可以包含一定程度的复杂性，如矛盾感或微妙的情绪变化，使角色更加丰满和真实。 + +::: + +:::tips + +

语言的丰富度

+ +角色的语言风格应与所期望的情感表达相匹配，比如柔和、热情、鼓舞人心或戏谑等风格，以便于在情感上与用户产生共鸣，同时使用情感丰富的语言或语调的符号表达，来增强交流的生动性和真实感。 + +::: + +:::tips + +

互动的个性化

+ +角色的个性化特征应贯穿其话语与行为，展现出角色深层次的个性特征，不同情境下的表现应保持一致性，以通过对用户过往行为的记忆和分析，提供更加贴心的服务和响应，增加情感的连结。 + +::: + +:::tips + +

**视觉的表现力**

+ +对于能够展现非语言交流的角色，如虚拟角色或实体机器人等场景，应通过视觉和听觉的非语言信号，如面部表情、肢体语言、语调等，来加强情感化的表达，使其更富有感染力。 + +::: + +

适用场景

+ +角色的情感化设计在众多场景中显得尤为关键，特别是在那些追求高度用户参与度、建立情感连接或需处理敏感信息的环境中。通过角色情感化，可以更好地满足用户在**情感交流**、**陪伴关怀**、**个性化体验**等方面的需求，提升人机互动的质量和效果。以下是一些典型场景： + +- **家庭与个人助理：**在智能家居和个人助理中，用户需要长期互动与陪伴，如个人助理、健康监测、虚拟宠物等，这些场景需要通过情感反馈增加用户的依赖感和亲密感。而情感化的助手能提供更自然和愉悦的交互体验，通过学习用户习惯与偏好，以更贴心的方式进行日常提醒和管理。 +- **娱乐与社交: **在数字娱乐和社交互动中，情感化的角色可以增加用户的沉浸感和参与度，如游戏、虚拟现实和在线社区中，通过情感反应增强故事叙述和角色互动。 这些场景中角色情感化的运用能够丰富用户体验，使技术交互更接近人与人之间的自然互动。 +- **特殊关怀及服务：**面向老年人的设计，情感化的角色能提供温馨、耐心的陪伴，减轻孤独感，满足情感需求。 针对有特殊需求的用户（如残障人士），情感化设计能提供更加贴心、敏感的支持，增强自主生活能力。面对紧急服务与危机应对，如灾害警报、医疗急救指导，情感化设计能更有效地传达紧迫性并安抚用户情绪。 +- **医疗与教育：**在医疗健康护理领域，特别是在心理健康、疾病管理和远程医疗领域，情感化的角色能提供安慰、鼓励，帮助用户更好地遵循治疗计划，感受到情感上的支持。在教育环境中，情感化的AI可以提供更个性化的学习支持，通过情感反应匹配学生的学习状态，以鼓励和激励学生，提升学习效果。 +- **客户服务与支持：**在客户服务中，情感化的交互可以提升服务品质，让客户感受到更多人性化关怀和同理心，增加客户满意度和忠诚度。 在解决用户问题时，情感化的角色能够以更加贴心和理解的态度响应用户的问题和投诉，提升用户满意度和品牌忠诚度。 + + …… + +在这些场景中，角色的情感化设计不仅仅是外观或语言上的调整，更是深入到交互逻辑、反馈机制及内容生成策略中，确保智能 AI 能够以更加人性化的方式与用户沟通。这些场景强调了角色情感化设计的重要性，它不仅关乎于技术实现，更在于如何通过设计触达人心，建立更加人性化、高效且富有同情心的数字交互体验。 + +

最佳案例

+ +

1、为角色赋予更细腻的情感的适应性、互动的个性化、丰富的语言表达

+ +细腻的**情感适应性**让虚拟陪伴类 AI 能感知并响应用户情绪，建立情感纽带，给予适时的支持与反馈；**互动的个性化**确保体验贴合每位用户的独特性，增强归属感与真实感；**丰富的语言表达**则让交流生动多彩，促进深层次沟通，使互动既智慧又充满人性温度。**情感的适应性、互动的个性化、丰富的语言表达**这三点共同作用，极大提升了 AI 的质量，满足用户情感与心理需求，构建了更加亲密和谐的人机交互环境。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*n-oTTJjH_fIAAAAAAAAAAAAADgCCAQ/fmt.webp) + + + +

2、为角色设定具有感染力的视觉的表现力增强情感化的表达

+ +**视觉表现力**通过直观的形象设计与动态效果，增强 AI 的个性与情感传达，使用户在视觉上获得即时的情感共鸣。不仅丰富了交互的维度，还能够让非言语信息如表情、动作等成为沟通的重要组成部分，进而提升互动的真实感与沉浸感。精心设计的视觉表现力能够跨越语言限制，有效吸引用户注意，深化用户与 AI 之间的情感联系。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*hsuNSKkBNycAAAAAAAAAAAAADgCCAQ/fmt.webp) diff --git a/docs/spec/hybrid-ui-design.en-US.md b/docs/spec/hybrid-ui-design.en-US.md new file mode 100644 index 00000000..109d65c9 --- /dev/null +++ b/docs/spec/hybrid-ui-design.en-US.md @@ -0,0 +1,58 @@ +--- +group: + title: 💻 Hybrid UI 混合界面设计 + order: 4 +order: 0 +title: 介绍 +--- + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*bybpQaS1i9kAAAAAAAAAAAAADgCCAQ/fmt.webp) + +在 AI 时代，图形界面融合了自然语言会话等多通道交互，演变出新的形态。当意图、角色、会话这一切无形的体验规则被确定之后，它们最终也将承载于具体的界面之上。无形的体验融入到有形的体验之中，在这一部分里，我们提出的 HUI 正是要定义界面这一有形的体验，保障好 AI 产品体验的最后一道门槛。 + +Ant Design X UI 资产正是一套基于 RICH 理念而生的、混合了多通道交互模式的 AI 界面资产，希望帮助大家轻松创造卓越 AI 产品体验。 + +

WHY｜为什么是 Hybrid UI

+ +随着人工智能（AI）技术极为快速的发展，在各个领域都出现了更多形式多样的人与AI 配合的工作方式，这种工作方式涵盖了从简单的数据处理到复杂的决策制定等多个层面。由于人与AI的协作方式不断创新和拓展，自然也会不可避免地带来用户交互行为上全方位、深层次的变化。这些变化不仅体现在交互的频率上，还包括交互的方式、内容以及对交互结果的预期和处理等多个方面。人工智能带来了工具功能的强大，也提高了用户对智能体验的期望。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*PmlSR6yuYWgAAAAAAAAAAAAADgCCAQ/fmt.webp) + +在人工智能（AI）时代下，用户行为的变化是：由原来人主要的执行行为（DO），可以增加人为 AI 来提供意图信息（Chat），让 AI 去执行任务，人可以感知 AI 做的过程和结果，并做辅助决策。 + +所以，基于用户行为的变化，会在 GUI + 键鼠的传统操作基础上，增加了自然语言对话新方式。同时，新的用户行为方式也带来了表达障碍的挑战，设计师需要思考，该如何兼顾用户的对话式体验和操作体验？界面载体该如何兼顾呈现呢？ + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*UpqARobh0kYAAAAAAAAAAAAADgCCAQ/fmt.webp) + +基于以上思考，经过蚂蚁内部 50+ AI 产品的设计实践，我们推出了**混合用户界面（ \*\***Hybrid UI ）\*\*，用以解答：AI 赋能的混合意图界面如何兼顾用户的对话式体验和操作体验？我们需要将原来传统 GUI 和 AI 时代下的自然语言带来的新型 UI 模式进行结合，以满足不同场景的界面表达诉求。 + +

WHAT｜Hybrid UI 介绍

+ +由 AI 赋能的 **混合用户界面（ \*\***Hybrid UI ）\*\*适用于探索 AI 对话式界面和 GUI 操作界面的融合，Hybrid UI 可以搭载不同的关键 UI 元素，用于解决用户 Chat 和 Do 的意图表达诉求。基于过去一年业务实践，我们盘点了 50+ 企业级的 AI 产品，抽象概括了三类界面模式，基于用户不同意图，PD 或设计师可以快捷定位产品倾向的界面模式。 + + + +- **Do 为主：**以界面操作为主，偶尔唤起AI快捷指令。如 Quick Bar、固定指令式、内嵌生成式等。 +- **Do + Chat 均衡：**自然语言和界面操作均衡配合使用。如双区联动交互、交互式操作气泡等。 +- **Chat 为主：**以自然语言为主，几乎没有界面操作。如侧边式 Copliot、独立 Web Bot 等。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*MYRbTYaUnToAAAAAAAAAAAAADgCCAQ/fmt.webp) + +另外在资产层，基于 Ant Design 5.0**，**我们也希望提供一套便利的 AI 组件资产，可以方便 PD 或设计师快速搭建起适合的 Hybrid UI 。设计资产是无穷尽且不断变化的，但用户目的和设计目标相对是唯一的，所以我们从用户视角抽象出用户感知 AI 的四个阶段，沉淀出一套典型的 Hybrid UI 界面设计资产，即 **Ant Design X **，让其可以不断生长。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*uBTuR6ymZP0AAAAAAAAAAAAADgCCAQ/fmt.webp) + +- **唤醒阶段：用户要了解 AI 产品的能力与用法。**设计目标是吸引用户，让首次接触的用户快速理解 AI 能做什么，告知用户 AI 可实现的意图范围和预期。相关资产有 [欢迎&提示](https://www.yuque.com/ant-design/ierwgq/zc5hxe2b12mda2ad)。 +- **表达阶段：用户向 AI 准确表达意图。**设计目标是让用户知道如何快捷且正确的表达意图、并看清自己发送的内容。相关资产有 [用户输入](https://www.yuque.com/ant-design/ierwgq/rt5szecixmed200e)、[用户发送](https://www.yuque.com/ant-design/ierwgq/hxm37nohgxg6l1gd)。 +- **确认阶段：用户等待 AI 完成任务。**设计目标是让用户知道该任务的AI执行运转情况。相关资产有 [生成过程](https://www.yuque.com/ant-design/ierwgq/me4dwuedfq0gieqy)。 +- **反馈阶段：用户核查 AI 完成结果并应用。**设计目标是让用户清晰看到并信任AI任务完成的情况、并快速应用AI生成结果。相关资产有 [结果展示](https://www.yuque.com/ant-design/ierwgq/em1gu50owfb91c9a)、[结果应用](https://www.yuque.com/ant-design/ierwgq/nw6o7xc6gxltm4ba)。 + +

HOW｜资产使用

+ +我们与工程师合作，将 Ant Design X 设计组件转化为可重用的代码，最大限度地提高您的生产力和沟通效率。 + +- 研发组件：Ant Design X 的 UI 组件库拥有多类基础组件。 +- Sketch资产：提供设计资产包，包括组件、典型模板等。可点击下载 ：[🌟AntDesignX_UI KIT_20241122版.sketch](https://www.yuque.com/attachments/yuque/0/2024/sketch/635293/1732072368187-dd14a3f0-54d4-4af6-9b82-1a408b879aa0.sketch) +- 演示 Demo：提供真实样板间使用体验，包括独立式、助手式、嵌入式。 + +![典型页面示意](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*UAEeSbJfuM8AAAAAAAAAAAAADgCCAQ/fmt.webp) diff --git a/docs/spec/hybrid-ui-design.zh-CN.md b/docs/spec/hybrid-ui-design.zh-CN.md new file mode 100644 index 00000000..109d65c9 --- /dev/null +++ b/docs/spec/hybrid-ui-design.zh-CN.md @@ -0,0 +1,58 @@ +--- +group: + title: 💻 Hybrid UI 混合界面设计 + order: 4 +order: 0 +title: 介绍 +--- + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*bybpQaS1i9kAAAAAAAAAAAAADgCCAQ/fmt.webp) + +在 AI 时代，图形界面融合了自然语言会话等多通道交互，演变出新的形态。当意图、角色、会话这一切无形的体验规则被确定之后，它们最终也将承载于具体的界面之上。无形的体验融入到有形的体验之中，在这一部分里，我们提出的 HUI 正是要定义界面这一有形的体验，保障好 AI 产品体验的最后一道门槛。 + +Ant Design X UI 资产正是一套基于 RICH 理念而生的、混合了多通道交互模式的 AI 界面资产，希望帮助大家轻松创造卓越 AI 产品体验。 + +

WHY｜为什么是 Hybrid UI

+ +随着人工智能（AI）技术极为快速的发展，在各个领域都出现了更多形式多样的人与AI 配合的工作方式，这种工作方式涵盖了从简单的数据处理到复杂的决策制定等多个层面。由于人与AI的协作方式不断创新和拓展，自然也会不可避免地带来用户交互行为上全方位、深层次的变化。这些变化不仅体现在交互的频率上，还包括交互的方式、内容以及对交互结果的预期和处理等多个方面。人工智能带来了工具功能的强大，也提高了用户对智能体验的期望。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*PmlSR6yuYWgAAAAAAAAAAAAADgCCAQ/fmt.webp) + +在人工智能（AI）时代下，用户行为的变化是：由原来人主要的执行行为（DO），可以增加人为 AI 来提供意图信息（Chat），让 AI 去执行任务，人可以感知 AI 做的过程和结果，并做辅助决策。 + +所以，基于用户行为的变化，会在 GUI + 键鼠的传统操作基础上，增加了自然语言对话新方式。同时，新的用户行为方式也带来了表达障碍的挑战，设计师需要思考，该如何兼顾用户的对话式体验和操作体验？界面载体该如何兼顾呈现呢？ + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*UpqARobh0kYAAAAAAAAAAAAADgCCAQ/fmt.webp) + +基于以上思考，经过蚂蚁内部 50+ AI 产品的设计实践，我们推出了**混合用户界面（ \*\***Hybrid UI ）\*\*，用以解答：AI 赋能的混合意图界面如何兼顾用户的对话式体验和操作体验？我们需要将原来传统 GUI 和 AI 时代下的自然语言带来的新型 UI 模式进行结合，以满足不同场景的界面表达诉求。 + +

WHAT｜Hybrid UI 介绍

+ +由 AI 赋能的 **混合用户界面（ \*\***Hybrid UI ）\*\*适用于探索 AI 对话式界面和 GUI 操作界面的融合，Hybrid UI 可以搭载不同的关键 UI 元素，用于解决用户 Chat 和 Do 的意图表达诉求。基于过去一年业务实践，我们盘点了 50+ 企业级的 AI 产品，抽象概括了三类界面模式，基于用户不同意图，PD 或设计师可以快捷定位产品倾向的界面模式。 + + + +- **Do 为主：**以界面操作为主，偶尔唤起AI快捷指令。如 Quick Bar、固定指令式、内嵌生成式等。 +- **Do + Chat 均衡：**自然语言和界面操作均衡配合使用。如双区联动交互、交互式操作气泡等。 +- **Chat 为主：**以自然语言为主，几乎没有界面操作。如侧边式 Copliot、独立 Web Bot 等。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*MYRbTYaUnToAAAAAAAAAAAAADgCCAQ/fmt.webp) + +另外在资产层，基于 Ant Design 5.0**，**我们也希望提供一套便利的 AI 组件资产，可以方便 PD 或设计师快速搭建起适合的 Hybrid UI 。设计资产是无穷尽且不断变化的，但用户目的和设计目标相对是唯一的，所以我们从用户视角抽象出用户感知 AI 的四个阶段，沉淀出一套典型的 Hybrid UI 界面设计资产，即 **Ant Design X **，让其可以不断生长。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*uBTuR6ymZP0AAAAAAAAAAAAADgCCAQ/fmt.webp) + +- **唤醒阶段：用户要了解 AI 产品的能力与用法。**设计目标是吸引用户，让首次接触的用户快速理解 AI 能做什么，告知用户 AI 可实现的意图范围和预期。相关资产有 [欢迎&提示](https://www.yuque.com/ant-design/ierwgq/zc5hxe2b12mda2ad)。 +- **表达阶段：用户向 AI 准确表达意图。**设计目标是让用户知道如何快捷且正确的表达意图、并看清自己发送的内容。相关资产有 [用户输入](https://www.yuque.com/ant-design/ierwgq/rt5szecixmed200e)、[用户发送](https://www.yuque.com/ant-design/ierwgq/hxm37nohgxg6l1gd)。 +- **确认阶段：用户等待 AI 完成任务。**设计目标是让用户知道该任务的AI执行运转情况。相关资产有 [生成过程](https://www.yuque.com/ant-design/ierwgq/me4dwuedfq0gieqy)。 +- **反馈阶段：用户核查 AI 完成结果并应用。**设计目标是让用户清晰看到并信任AI任务完成的情况、并快速应用AI生成结果。相关资产有 [结果展示](https://www.yuque.com/ant-design/ierwgq/em1gu50owfb91c9a)、[结果应用](https://www.yuque.com/ant-design/ierwgq/nw6o7xc6gxltm4ba)。 + +

HOW｜资产使用

+ +我们与工程师合作，将 Ant Design X 设计组件转化为可重用的代码，最大限度地提高您的生产力和沟通效率。 + +- 研发组件：Ant Design X 的 UI 组件库拥有多类基础组件。 +- Sketch资产：提供设计资产包，包括组件、典型模板等。可点击下载 ：[🌟AntDesignX_UI KIT_20241122版.sketch](https://www.yuque.com/attachments/yuque/0/2024/sketch/635293/1732072368187-dd14a3f0-54d4-4af6-9b82-1a408b879aa0.sketch) +- 演示 Demo：提供真实样板间使用体验，包括独立式、助手式、嵌入式。 + +![典型页面示意](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*UAEeSbJfuM8AAAAAAAAAAAAADgCCAQ/fmt.webp) diff --git a/docs/spec/intention-introduce.en-US.md b/docs/spec/intention-introduce.en-US.md new file mode 100644 index 00000000..bed0c055 --- /dev/null +++ b/docs/spec/intention-introduce.en-US.md @@ -0,0 +1,41 @@ +--- +group: + title: ❤️ Intention 意图设计 + order: 0 +order: 1 +title: 介绍 +--- + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*DY3oSowUuI8AAAAAAAAAAAAADgCCAQ/fmt.webp) + +在简介篇中我们提到在蚂蚁内部 AI 产品实践中，经常冒出诸多的体验困惑，其中最关键的都聚焦在设计的「模糊前期」，比如：什么时候应该使用会话的方式？如何让 AI 理解用户的意图？等等。意图这一体验要素，在 AI 时代变得更加举足轻重，除了技术的努力，设计能在意图方面做些什么呢？ + +

What 什么是意图设计

+ +在人工智能领域，意图通常被定义为用户希望达成的目标，如查询天气情况、办理银行业务、预约服务等。这些意图并不总是直接表达出来，而是隐含在用户的言行之中。 + +在不同的领域和维度，意图也有不同的分类，如按照用户意图清晰度可分成意图清晰与意图模糊；按照用户与系统的交互目的可分为咨询信息类与执行任务类。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*89KfQ7WummEAAAAAAAAAAAAADgCCAQ/fmt.webp) + + + +

Why 为什么要做意图设计

+ +用户的意图常常隐含在言行之中，人们倾向于以自然方式表达需求，而非直接说明意图。因此，准确识别这些隐含意图至关重要。它能帮助 AI 更准确地回应用户需求，更高效完成用户目标。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*lWARTZdjOzkAAAAAAAAAAAAADgCCAQ/fmt.webp) + +换句话说用户目标的实现已从 GUI 时代的繁琐界面操作转变为 AGI 时代 AI 对复杂意图的理解。这大大降低了用户的学习成本，提升了产品体验。然而我们在蚂蚁内部的AI实践中发现，并非所有意图都适合会话式交互，有时简单点击在某些场景下比多轮对话更为高效。 + +除了传统界面交互与会话式等交互界面范式的问题，通过调研我们还发现：大部分用户对于 AI 产品存在认知盲区，即不清楚 AI 能帮我实现哪些意图，以及往往没有能力准确表达意图，这在一定程度上阻碍了 AI 的有效应用。因此，如何提升用户对 AI 能力的认知，并设计出让用户能轻松准确表达意图的界面，成为当前 AI 设计领域待解决的重要课题。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*99HAQ6jTEOIAAAAAAAAAAAAADgCCAQ/fmt.webp) + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*LteUT7RaGMAAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

How 如何应用意图设计

+ +那么该如何应用意图设计策略解决 AI 产品的体验设计问题呢？概览如下图，具体细节内容请查看子篇章。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*ktkvR6RxoNIAAAAAAAAAAAAADgCCAQ/fmt.webp) diff --git a/docs/spec/intention-introduce.zh-CN.md b/docs/spec/intention-introduce.zh-CN.md new file mode 100644 index 00000000..bed0c055 --- /dev/null +++ b/docs/spec/intention-introduce.zh-CN.md @@ -0,0 +1,41 @@ +--- +group: + title: ❤️ Intention 意图设计 + order: 0 +order: 1 +title: 介绍 +--- + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*DY3oSowUuI8AAAAAAAAAAAAADgCCAQ/fmt.webp) + +在简介篇中我们提到在蚂蚁内部 AI 产品实践中，经常冒出诸多的体验困惑，其中最关键的都聚焦在设计的「模糊前期」，比如：什么时候应该使用会话的方式？如何让 AI 理解用户的意图？等等。意图这一体验要素，在 AI 时代变得更加举足轻重，除了技术的努力，设计能在意图方面做些什么呢？ + +

What 什么是意图设计

+ +在人工智能领域，意图通常被定义为用户希望达成的目标，如查询天气情况、办理银行业务、预约服务等。这些意图并不总是直接表达出来，而是隐含在用户的言行之中。 + +在不同的领域和维度，意图也有不同的分类，如按照用户意图清晰度可分成意图清晰与意图模糊；按照用户与系统的交互目的可分为咨询信息类与执行任务类。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*89KfQ7WummEAAAAAAAAAAAAADgCCAQ/fmt.webp) + + + +

Why 为什么要做意图设计

+ +用户的意图常常隐含在言行之中，人们倾向于以自然方式表达需求，而非直接说明意图。因此，准确识别这些隐含意图至关重要。它能帮助 AI 更准确地回应用户需求，更高效完成用户目标。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*lWARTZdjOzkAAAAAAAAAAAAADgCCAQ/fmt.webp) + +换句话说用户目标的实现已从 GUI 时代的繁琐界面操作转变为 AGI 时代 AI 对复杂意图的理解。这大大降低了用户的学习成本，提升了产品体验。然而我们在蚂蚁内部的AI实践中发现，并非所有意图都适合会话式交互，有时简单点击在某些场景下比多轮对话更为高效。 + +除了传统界面交互与会话式等交互界面范式的问题，通过调研我们还发现：大部分用户对于 AI 产品存在认知盲区，即不清楚 AI 能帮我实现哪些意图，以及往往没有能力准确表达意图，这在一定程度上阻碍了 AI 的有效应用。因此，如何提升用户对 AI 能力的认知，并设计出让用户能轻松准确表达意图的界面，成为当前 AI 设计领域待解决的重要课题。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*99HAQ6jTEOIAAAAAAAAAAAAADgCCAQ/fmt.webp) + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*LteUT7RaGMAAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

How 如何应用意图设计

+ +那么该如何应用意图设计策略解决 AI 产品的体验设计问题呢？概览如下图，具体细节内容请查看子篇章。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*ktkvR6RxoNIAAAAAAAAAAAAADgCCAQ/fmt.webp) diff --git a/docs/spec/introduce.en-US.md b/docs/spec/introduce.en-US.md new file mode 100644 index 00000000..f9722526 --- /dev/null +++ b/docs/spec/introduce.en-US.md @@ -0,0 +1,134 @@ +--- +group: + title: RICH 设计范式 + order: 1 +title: 简介 +--- + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*DvQ2Q6gYcaAAAAAAAAAAAAAADgCCAQ/fmt.webp) + +2022 年 11 月 30 日，OpenAI 发布 ChatGPT 3.5，带领人类走向 AGI 人机交互新世纪。AGI 让自然人机交互成为现实，「语言」这一简单、自然的交互方式，一度威胁到统治人机交互领域长达几十年之久的 GUI（图形用户界面）。设计者们纷纷开始各种各样的尝试与改造： + +- 为 BI 软件引入 copilot，让小白也能通过自然语言上手数据分析 +- 将诸多跨平台的企业办公软件集成进一个智能助手，提高办公效率 +- 构建基于自然语言的 AI 原生代码研发软件，取代传统复杂的代码编辑器 +- …… + +无一例外，设计者们在起初，大胆而坚定的拥抱「会话式交互」，仿佛它无所不能，即将成为人机交互领域的主宰。然而，随着时间的流逝，当人们从自然语言交互的“热恋”冷静下来时，才发现纵然会话式交互有着简单易上手等优势，但也存在着诸多的弊端。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*RWo-R660OAoAAAAAAAAAAAAADgCCAQ/fmt.webp) + +一个重要的问题开始浮出水面：**到底 AI 产品界面设计该如何进行？**在蚂蚁内部的 AI 产品设计实践中，我们也经常冒出类似的困惑： + +- 图形界面操作不好吗？一定要用会话的方式吗？ +- 什么样的产品适合用会话交互完成？ +- 会话交互跟图形界面交互可以融合吗？ +- AI 产品设计的体验受到哪些因素的影响？ +- 如何去系统性的思考一个 AI 产品的设计？ +- …… + +这些困惑的本质来源于，我们缺乏对当下融合了多种交互模式的「AI 产品界面设计」缺乏清晰的定义和认知，因而在如何创造好的 AI 体验上遇到了迷茫。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*5I5RRLM5N3kAAAAAAAAAAAAADgCCAQ/fmt.webp) + +因此从 2023 年底开始，我们团队抽调了各个业务领域的设计师，横向成立了 AI 设计研究小组，开始尝试去定义和理解所谓的「AI + Design」是什么、该怎么做的设计命题。 + +在这方面，无论是学术界还是企业界，都有着不少相关的研究和应用。站在巨人的肩膀上，我们力图构建出一套适用于当下的 AI 设计理论，并同时在蚂蚁内部涌现的海量 AI 产品中，去实践和迭代我们的思想。在这个过程中，一套系统性的 AI 设计理论和方法开始涌现——**《RICH 设计范式——创造卓越 AI 产品体验》**。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*kMJkQLqIftsAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

一、What？什么是 RICH 设计范式？

+ +RICH 是我们提出来的一个 AI 界面设计范式，好比 WIMP 范式之于图形用户界面。 + +ACM SIGCHI 2005（人机交互顶会）曾经定义过，人机交互的核心问题可以分为三个层面 + +1. **界面范式层：**界定人机交互界面的设计要素，指引设计者关注的核心问题 +2. **用户模型层：**构建界面体验评估模型，用以度量界面体验的好坏 +3. **软件框架层：**人机界面的底层支撑算法和数据结构等软件开发框架，是隐藏在前端界面背后的内容 + +其中界面范式，是每一个人机交互新技术诞生之时，设计者最需要去关注和定义的层面。界面范式定义了设计者所应该关注的设计要素是什么，基于此才能定义什么是好的设计和该如何进行好的设计。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*g2WzS7qPuTcAAAAAAAAAAAAADgCCAQ/fmt.webp) + +人们追求用户界面的革新，本质上是想要拓宽人机交互的带宽，更大程度解放人的生产力。在整个人机交互的发展过程中，出现了多种广泛使用的用户界面类型，从最早的批处理界面，到后来的命令行界面，再到当下最为流行的图形用户界面。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*cXCbRJO2Rl4AAAAAAAAAAAAADgCCAQ/fmt.webp) + + + +基于** WIMP (Window, Icon, Menu, Point Device) 界面范式**的图形用户界面，最早诞生于 1970 年代的施乐公司，而后在 1980 年代相继被苹果 Macintosh 电脑和微软 windows 电脑借鉴并发扬光大。基于桌面隐喻的 WIMP 界面由于其语法极小化，对象可视化和快速语义反馈等优点，持续统治着界面设计领域 40 年有余。 + +如下图案例，我们如今仍在使用的 WIMP 图形用户界面，与最早的样子并无本质差异。这样强有力的现实，也再一次验证了定义界面范式的重要性。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*bSY2T5wecoEAAAAAAAAAAAAADgCCAQ/fmt.webp) + +在 AGI 时代，机器已经可以理解更复杂、模糊的人们意图，也可以用几乎完全类人的方式与用户交流。这项变革的技术将引领我们不得不从过去的设计经验中跳脱出来，去尝试定义一个新的人机交互界面的范式，从而寻找体验的最优解。 + +RICH 正是我们提出的适用于当下 AGI 人机交互界面设计时代的一种范式的假设，它包含了四个设计要素： + +- Intention 意图 +- Role 角色 +- Coversation 对话 +- Hybrid UI 混合界面 + +每一个设计要素都在牵引着我们设计者需要关注的具体问题。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*6_m8SbyOmlYAAAAAAAAAAAAADgCCAQ/fmt.webp) + +我们认为，在 AI 设计过程中，关注到这四个要素，将有助于我们事半功倍的创造出卓越的 AI 产品体验。 + +

二、WHY? 为什么是 RICH 设计范式？

+在应用之前，我们想先跟大家分享下 RICH 是如何推导出来的？为什么是 RICH 而不是其它？ + +在人机交互变迁史上，机器和交互方式的迭代总是依托于变革性技术的成熟化应用。变化的是技术和交互方式，但不变的永远是人机交互的本质与人的需求。 从不变思变，正是 RICH 推导出来的关键一步。 + +人机交互的本质是用户通过执行某种动作或行为输入给机器，机器理解并完成诉求后产出结果给用户，用户评估是否符合要求，如果符合，一个交互单元就完成了闭环。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*bokiToyWY0QAAAAAAAAAAAAADgCCAQ/fmt.webp) + +基于此，唐纳德·诺曼提出了一个人机交互模型，更进一步的拆解和定义了这个交互单元。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*KjCBRaG4PrkAAAAAAAAAAAAADgCCAQ/fmt.webp) + +在图形界面时代，WIMP 范式中的各个要素，主要作用于人机交互的「执行操作」与输出环节的相关节点： + +- **icon 图标：**通过图形化隐喻，帮助用户完成操作的执行 +- **menu 菜单：**通过有序的结构组织了各种操作，让用户能更加高效的进行系统性任务 +- **pointing 指点设备：**通过键盘、鼠标指向式设备，让用户可以更清楚的选中目标操作 +- **windows 窗口：**通过固定的空间去承载不同的内容，让用户能够阅读、评估不同的多媒体内容 + +受限于图形界面交互的特点，实际上在过去的交互过程中，前期的大量工作需要用户自己完成。用户需要先行根据自己的意图，结合工具——即电脑与图形界面，再进行方案的制定和拆解，才能开始让机器开始执行所明确要求的操作。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*PvCFRqxBjscAAAAAAAAAAAAADgCCAQ/fmt.webp) + +可以看到，过去机器只是被动的在帮助用户完成命令的执行，而用户的意图需要经过自身的先行拆解和细化才能最终转译成一次又一次的点击传达给用户。但是当下 AI 时代，一切都不一样了。机器最大的飞跃在于它越来越像一个“人”了，它能够理解用户模糊的意图，甚至自动制定方案、推动任务执行，最终帮助用户达成他的意图。 + +在这个新的体验环节中，增加了很多隐形的体验规则，过去只要 UI 界面组织的相对可用、美观，就能给用户带来较好的体验感受。但 AI 时代，体验还取决于机器是否听得懂我的意思，是否讲话比较好听等等一系列隐形的体验。因而针对这样一种新的交互特征，关键设计要素需要被重新抽象和定义，确保我们的设计关注点走在正确的方向上。 + +RICH 范式正是我们尝试定义的 AI 时代应该关注的设计要素集： + +- **Intention 意图：**AI 能够听懂并理解用户的意图，协助用户自动完成方案计划和步骤拆解，进而推动执行 +- **Role 角色：**AI 扮演了某种身份角色，来匹配用户的意图，也保障与用户的互动是顺畅、符合预期的 +- **Conversation 会话：** 用户的模糊意图通过会话来逐步与 AI 对焦、拆解，用户的指令也结合其中 +- **Hybrid UI 混合界面：**用户的执行动作和机器的结果输出与反馈承载在融合了多种交互方式的界面当中 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*0ZkdTZND-b8AAAAAAAAAAAAADgCCAQ/fmt.webp) + +上述四个要素，组合在一起构成了 IRCH 这四个字母，为了方便记忆和应用，我们调整了下字母的顺序得到了 RICH 这个单词，刚好十分便于记忆，我们暂且将这个设计范式称之为「RICH 设计范式」😄。 + +

三、How？如何应用 RICH AI 设计范式？

+ +那么该如何应用 RICH 创造卓越的 AI 产品体验呢？在后续的指引文档里，我们将深入浅出，分别针对 RICH 中的四个要素进行介绍和定义，通行提供了开箱即用的设计策略和案例，帮助大家更好的理解和应用 RICH。这套理念和最终的界面资产也集成到 Ant Design X 里，希望能帮助大家轻松创造卓越 AI 产品体验！ + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*eWaFS6DiXtYAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

附

+ +最后，感谢广大开源的各类学术论文、书籍和企业界的 AI 设计理论，过去一年多，在它们的肩膀上，我们构建了一套开箱即用的理论与方法。我们知道 RICH 一定还有很多考虑不周的地方，也希望大家多多给我们反馈。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*tEwGRIqUGVQAAAAAAAAAAAAADgCCAQ/fmt.webp) + +最后感谢我们自己，在忙碌的日常工作中，挤出时间完成了这个几乎是纯公益的指引手册，我们是设计师： + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*h6ZdTq2Bur4AAAAAAAAAAAAADgCCAQ/fmt.webp) diff --git a/docs/spec/introduce.zh-CN.md b/docs/spec/introduce.zh-CN.md new file mode 100644 index 00000000..f9722526 --- /dev/null +++ b/docs/spec/introduce.zh-CN.md @@ -0,0 +1,134 @@ +--- +group: + title: RICH 设计范式 + order: 1 +title: 简介 +--- + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*DvQ2Q6gYcaAAAAAAAAAAAAAADgCCAQ/fmt.webp) + +2022 年 11 月 30 日，OpenAI 发布 ChatGPT 3.5，带领人类走向 AGI 人机交互新世纪。AGI 让自然人机交互成为现实，「语言」这一简单、自然的交互方式，一度威胁到统治人机交互领域长达几十年之久的 GUI（图形用户界面）。设计者们纷纷开始各种各样的尝试与改造： + +- 为 BI 软件引入 copilot，让小白也能通过自然语言上手数据分析 +- 将诸多跨平台的企业办公软件集成进一个智能助手，提高办公效率 +- 构建基于自然语言的 AI 原生代码研发软件，取代传统复杂的代码编辑器 +- …… + +无一例外，设计者们在起初，大胆而坚定的拥抱「会话式交互」，仿佛它无所不能，即将成为人机交互领域的主宰。然而，随着时间的流逝，当人们从自然语言交互的“热恋”冷静下来时，才发现纵然会话式交互有着简单易上手等优势，但也存在着诸多的弊端。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*RWo-R660OAoAAAAAAAAAAAAADgCCAQ/fmt.webp) + +一个重要的问题开始浮出水面：**到底 AI 产品界面设计该如何进行？**在蚂蚁内部的 AI 产品设计实践中，我们也经常冒出类似的困惑： + +- 图形界面操作不好吗？一定要用会话的方式吗？ +- 什么样的产品适合用会话交互完成？ +- 会话交互跟图形界面交互可以融合吗？ +- AI 产品设计的体验受到哪些因素的影响？ +- 如何去系统性的思考一个 AI 产品的设计？ +- …… + +这些困惑的本质来源于，我们缺乏对当下融合了多种交互模式的「AI 产品界面设计」缺乏清晰的定义和认知，因而在如何创造好的 AI 体验上遇到了迷茫。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*5I5RRLM5N3kAAAAAAAAAAAAADgCCAQ/fmt.webp) + +因此从 2023 年底开始，我们团队抽调了各个业务领域的设计师，横向成立了 AI 设计研究小组，开始尝试去定义和理解所谓的「AI + Design」是什么、该怎么做的设计命题。 + +在这方面，无论是学术界还是企业界，都有着不少相关的研究和应用。站在巨人的肩膀上，我们力图构建出一套适用于当下的 AI 设计理论，并同时在蚂蚁内部涌现的海量 AI 产品中，去实践和迭代我们的思想。在这个过程中，一套系统性的 AI 设计理论和方法开始涌现——**《RICH 设计范式——创造卓越 AI 产品体验》**。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*kMJkQLqIftsAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

一、What？什么是 RICH 设计范式？

+ +RICH 是我们提出来的一个 AI 界面设计范式，好比 WIMP 范式之于图形用户界面。 + +ACM SIGCHI 2005（人机交互顶会）曾经定义过，人机交互的核心问题可以分为三个层面 + +1. **界面范式层：**界定人机交互界面的设计要素，指引设计者关注的核心问题 +2. **用户模型层：**构建界面体验评估模型，用以度量界面体验的好坏 +3. **软件框架层：**人机界面的底层支撑算法和数据结构等软件开发框架，是隐藏在前端界面背后的内容 + +其中界面范式，是每一个人机交互新技术诞生之时，设计者最需要去关注和定义的层面。界面范式定义了设计者所应该关注的设计要素是什么，基于此才能定义什么是好的设计和该如何进行好的设计。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*g2WzS7qPuTcAAAAAAAAAAAAADgCCAQ/fmt.webp) + +人们追求用户界面的革新，本质上是想要拓宽人机交互的带宽，更大程度解放人的生产力。在整个人机交互的发展过程中，出现了多种广泛使用的用户界面类型，从最早的批处理界面，到后来的命令行界面，再到当下最为流行的图形用户界面。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*cXCbRJO2Rl4AAAAAAAAAAAAADgCCAQ/fmt.webp) + + + +基于** WIMP (Window, Icon, Menu, Point Device) 界面范式**的图形用户界面，最早诞生于 1970 年代的施乐公司，而后在 1980 年代相继被苹果 Macintosh 电脑和微软 windows 电脑借鉴并发扬光大。基于桌面隐喻的 WIMP 界面由于其语法极小化，对象可视化和快速语义反馈等优点，持续统治着界面设计领域 40 年有余。 + +如下图案例，我们如今仍在使用的 WIMP 图形用户界面，与最早的样子并无本质差异。这样强有力的现实，也再一次验证了定义界面范式的重要性。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*bSY2T5wecoEAAAAAAAAAAAAADgCCAQ/fmt.webp) + +在 AGI 时代，机器已经可以理解更复杂、模糊的人们意图，也可以用几乎完全类人的方式与用户交流。这项变革的技术将引领我们不得不从过去的设计经验中跳脱出来，去尝试定义一个新的人机交互界面的范式，从而寻找体验的最优解。 + +RICH 正是我们提出的适用于当下 AGI 人机交互界面设计时代的一种范式的假设，它包含了四个设计要素： + +- Intention 意图 +- Role 角色 +- Coversation 对话 +- Hybrid UI 混合界面 + +每一个设计要素都在牵引着我们设计者需要关注的具体问题。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*6_m8SbyOmlYAAAAAAAAAAAAADgCCAQ/fmt.webp) + +我们认为，在 AI 设计过程中，关注到这四个要素，将有助于我们事半功倍的创造出卓越的 AI 产品体验。 + +

二、WHY? 为什么是 RICH 设计范式？

+在应用之前，我们想先跟大家分享下 RICH 是如何推导出来的？为什么是 RICH 而不是其它？ + +在人机交互变迁史上，机器和交互方式的迭代总是依托于变革性技术的成熟化应用。变化的是技术和交互方式，但不变的永远是人机交互的本质与人的需求。 从不变思变，正是 RICH 推导出来的关键一步。 + +人机交互的本质是用户通过执行某种动作或行为输入给机器，机器理解并完成诉求后产出结果给用户，用户评估是否符合要求，如果符合，一个交互单元就完成了闭环。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*bokiToyWY0QAAAAAAAAAAAAADgCCAQ/fmt.webp) + +基于此，唐纳德·诺曼提出了一个人机交互模型，更进一步的拆解和定义了这个交互单元。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*KjCBRaG4PrkAAAAAAAAAAAAADgCCAQ/fmt.webp) + +在图形界面时代，WIMP 范式中的各个要素，主要作用于人机交互的「执行操作」与输出环节的相关节点： + +- **icon 图标：**通过图形化隐喻，帮助用户完成操作的执行 +- **menu 菜单：**通过有序的结构组织了各种操作，让用户能更加高效的进行系统性任务 +- **pointing 指点设备：**通过键盘、鼠标指向式设备，让用户可以更清楚的选中目标操作 +- **windows 窗口：**通过固定的空间去承载不同的内容，让用户能够阅读、评估不同的多媒体内容 + +受限于图形界面交互的特点，实际上在过去的交互过程中，前期的大量工作需要用户自己完成。用户需要先行根据自己的意图，结合工具——即电脑与图形界面，再进行方案的制定和拆解，才能开始让机器开始执行所明确要求的操作。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*PvCFRqxBjscAAAAAAAAAAAAADgCCAQ/fmt.webp) + +可以看到，过去机器只是被动的在帮助用户完成命令的执行，而用户的意图需要经过自身的先行拆解和细化才能最终转译成一次又一次的点击传达给用户。但是当下 AI 时代，一切都不一样了。机器最大的飞跃在于它越来越像一个“人”了，它能够理解用户模糊的意图，甚至自动制定方案、推动任务执行，最终帮助用户达成他的意图。 + +在这个新的体验环节中，增加了很多隐形的体验规则，过去只要 UI 界面组织的相对可用、美观，就能给用户带来较好的体验感受。但 AI 时代，体验还取决于机器是否听得懂我的意思，是否讲话比较好听等等一系列隐形的体验。因而针对这样一种新的交互特征，关键设计要素需要被重新抽象和定义，确保我们的设计关注点走在正确的方向上。 + +RICH 范式正是我们尝试定义的 AI 时代应该关注的设计要素集： + +- **Intention 意图：**AI 能够听懂并理解用户的意图，协助用户自动完成方案计划和步骤拆解，进而推动执行 +- **Role 角色：**AI 扮演了某种身份角色，来匹配用户的意图，也保障与用户的互动是顺畅、符合预期的 +- **Conversation 会话：** 用户的模糊意图通过会话来逐步与 AI 对焦、拆解，用户的指令也结合其中 +- **Hybrid UI 混合界面：**用户的执行动作和机器的结果输出与反馈承载在融合了多种交互方式的界面当中 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*0ZkdTZND-b8AAAAAAAAAAAAADgCCAQ/fmt.webp) + +上述四个要素，组合在一起构成了 IRCH 这四个字母，为了方便记忆和应用，我们调整了下字母的顺序得到了 RICH 这个单词，刚好十分便于记忆，我们暂且将这个设计范式称之为「RICH 设计范式」😄。 + +

三、How？如何应用 RICH AI 设计范式？

+ +那么该如何应用 RICH 创造卓越的 AI 产品体验呢？在后续的指引文档里，我们将深入浅出，分别针对 RICH 中的四个要素进行介绍和定义，通行提供了开箱即用的设计策略和案例，帮助大家更好的理解和应用 RICH。这套理念和最终的界面资产也集成到 Ant Design X 里，希望能帮助大家轻松创造卓越 AI 产品体验！ + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*eWaFS6DiXtYAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

附

+ +最后，感谢广大开源的各类学术论文、书籍和企业界的 AI 设计理论，过去一年多，在它们的肩膀上，我们构建了一套开箱即用的理论与方法。我们知道 RICH 一定还有很多考虑不周的地方，也希望大家多多给我们反馈。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*tEwGRIqUGVQAAAAAAAAAAAAADgCCAQ/fmt.webp) + +最后感谢我们自己，在忙碌的日常工作中，挤出时间完成了这个几乎是纯公益的指引手册，我们是设计师： + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*h6ZdTq2Bur4AAAAAAAAAAAAADgCCAQ/fmt.webp) diff --git a/docs/spec/provide-intention-expectation.en-US.md b/docs/spec/provide-intention-expectation.en-US.md new file mode 100644 index 00000000..64d6ffc1 --- /dev/null +++ b/docs/spec/provide-intention-expectation.en-US.md @@ -0,0 +1,16 @@ +--- +group: + title: ❤️ Intention 意图设计 + order: 1 +order: 2 +title: 提供意图预期 +--- + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*X2-8QrjSVdEAAAAAAAAAAAAADgCCAQ/fmt.webp) + +在用户与 AI 的交互过程中，一个普遍存在的挑战是用户对 AI 所具备的能力缺乏了解，这往往导致用户在提问时感到迷茫，既不清楚如何开启对话，也不确定提问的合理范围。鉴于这一现状，**对用户的意图进行有效引导显得尤为重要，旨在帮助用户明确AI的能力边界，从而建立符合 AI 可实现范围的意图预期。** + +

最佳案例

+当用户首次踏入 AI 产品的世界时，可通过提供 AI 可实现意图预期的方式了解 AI 的强大能力以及具体用法。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*ko7MS6Ix5EQAAAAAAAAAAAAADgCCAQ/fmt.webp) diff --git a/docs/spec/provide-intention-expectation.zh-CN.md b/docs/spec/provide-intention-expectation.zh-CN.md new file mode 100644 index 00000000..64d6ffc1 --- /dev/null +++ b/docs/spec/provide-intention-expectation.zh-CN.md @@ -0,0 +1,16 @@ +--- +group: + title: ❤️ Intention 意图设计 + order: 1 +order: 2 +title: 提供意图预期 +--- + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*X2-8QrjSVdEAAAAAAAAAAAAADgCCAQ/fmt.webp) + +在用户与 AI 的交互过程中，一个普遍存在的挑战是用户对 AI 所具备的能力缺乏了解，这往往导致用户在提问时感到迷茫，既不清楚如何开启对话，也不确定提问的合理范围。鉴于这一现状，**对用户的意图进行有效引导显得尤为重要，旨在帮助用户明确AI的能力边界，从而建立符合 AI 可实现范围的意图预期。** + +

最佳案例

+当用户首次踏入 AI 产品的世界时，可通过提供 AI 可实现意图预期的方式了解 AI 的强大能力以及具体用法。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*ko7MS6Ix5EQAAAAAAAAAAAAADgCCAQ/fmt.webp) diff --git a/docs/spec/role-design.en-US.md b/docs/spec/role-design.en-US.md new file mode 100644 index 00000000..68efe66b --- /dev/null +++ b/docs/spec/role-design.en-US.md @@ -0,0 +1,73 @@ +--- +group: + title: 🎭 Role 角色设计 + order: 2 +order: 0 +title: 介绍 +--- + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*rOt6Rq4L6qgAAAAAAAAAAAAADgCCAQ/fmt.webp) + +角色设计让 AI 扮演了某种身份角色，来匹配用户的意图，进而保障与用户的互动是顺畅、符合预期的。角色设计让 AI 产品里隐形的体验得到优化和定义。 + +这一部分，我们将探讨如何为 AI 产品赋予一个清晰的“角色”身份，以更好地提升用户体验。 + +

WHY 为什么要做角色设计

+ +在 AI 时代，角色已成为连接物理与数字世界的桥梁，深刻改变着人类的生活方式与社会结构。在这个时代，角色不再局限于文学、影视等传统媒介中的虚构形象，而是进化为集成先进人工智能技术的智能体，活跃于各种人机交互场景中。这些智能角色不仅拥有精心设计的背景故事、性格特点、语言风格等传统角色属性，还具备学习能力、环境感知、情绪识别及响应等高级功能。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*KlODQbZ-o3oAAAAAAAAAAAAADgCCAQ/fmt.webp) + + + +随着技术的不断进步，这些角色还能通过机器学习不断优化自身，实现更深层次的情感交流与智慧共生，促进人与智能系统之间更加自然、和谐的交互模式，开启人机交互新篇章。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*VlG-RaRy5rIAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

WHAT 什么是角色设计

+角色构成要素是塑造一个立体、真实、令人信服的角色所必需的基础。核心需要关注角色的性格内核和外在形象，必要时需要关注角色的专业能力。以下是主要的角色构成要素： + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*sB8bRIfxIrQAAAAAAAAAAAAADgCCAQ/fmt.webp) + +![](https://cdn.nlark.com/yuque/0/2024/png/338645/1732071434657-5c46fa10-f364-4a9c-9389-7a4a60b27bdf.png) + +

[性格内核](https://yuque.antfin-inc.com/qingmeng.wyy/taqofu/yhy4t4px0xr6trqg)

+性格内核是其行为、决策与情感反应的根本驱动力。包含人物核心性格特质、价值观、信仰动机和情感状态。这些特质构成了角色在面对不同情境下的行为模式和反应。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*iSEIRode8CEAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

[专业能力](https://yuque.antfin-inc.com/qingmeng.wyy/taqofu/zazgup8l8653v7w0)

+专业能力是指其在特定领域内掌握的知识技能、实践经验与解决问题的专长，这些能力支撑其职业表现，实现角色功能，解决场景中的挑战，展现其价值与不可替代性。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*TUwSRIyQkooAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

[外在形象](https://yuque.antfin-inc.com/qingmeng.wyy/taqofu/nmvtgbiz950m4l6i)

+外在形象包括外观特征、服饰风格、肢体语言及声音特点等，是其个性与背景故事的视觉与听觉体现，旨在直观地传达角色特质，增进观众或用户的第一印象与情感共鸣。 + +

外在形象

+外在形象包括外观特征、服饰风格、肢体语言及声音特点等，是其个性与背景故事的视觉与听觉体现，旨在直观传达角色特质，增进观众或用户的第一印象与情感共鸣。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*LHjERb77lp0AAAAAAAAAAAAADgCCAQ/fmt.webp) + +

专业能力

+专业能力是指其在特定领域内掌握的知识技能、实践经验与解决问题的专长，这些能力支撑其职业表现，实现角色功能，解决场景中的挑战，展现其价值与不可替代性。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*CV9ySpFm6RIAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

[性格内核](https://yuque.antfin-inc.com/qingmeng.wyy/taqofu/yhy4t4px0xr6trqg)

+性格内核是其行为、决策与情感反应的根本驱动力。包含人物核心性格特质、价值观、信仰动机和情感状态等。这些特质构成了角色在面对不同情境时的行为模式和反应。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*wnHWSIMreOcAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

HOW 角色设计应该遵循的原则

+角色塑造的精髓在于一致性、自然性与情感化。 + +**角色一致性：**塑造角色时需要深入挖掘角色背景、动机与性格特质，赋予其独特性与层次感，确保其行为逻辑自始至终与角色设定相符。 + +**角色自然性**：塑造角色时需与故事情节和其他角色互动紧密，推动情节发展，使角色鲜活立体，融入适宜的历史、社会环境因素，使角色言行自然，提升故事的信服力与共鸣度。 + +**角色情感化**：塑造角色需具备真实人类的情感和动机，使其可信且有温度。角色的情感应有变化，随着故事的发展，他们的情绪应有起伏，这会使角色更加真实。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*fteJT5kCZV8AAAAAAAAAAAAADgCCAQ/fmt.webp) + + diff --git a/docs/spec/role-design.zh-CN.md b/docs/spec/role-design.zh-CN.md new file mode 100644 index 00000000..68efe66b --- /dev/null +++ b/docs/spec/role-design.zh-CN.md @@ -0,0 +1,73 @@ +--- +group: + title: 🎭 Role 角色设计 + order: 2 +order: 0 +title: 介绍 +--- + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*rOt6Rq4L6qgAAAAAAAAAAAAADgCCAQ/fmt.webp) + +角色设计让 AI 扮演了某种身份角色，来匹配用户的意图，进而保障与用户的互动是顺畅、符合预期的。角色设计让 AI 产品里隐形的体验得到优化和定义。 + +这一部分，我们将探讨如何为 AI 产品赋予一个清晰的“角色”身份，以更好地提升用户体验。 + +

WHY 为什么要做角色设计

+ +在 AI 时代，角色已成为连接物理与数字世界的桥梁，深刻改变着人类的生活方式与社会结构。在这个时代，角色不再局限于文学、影视等传统媒介中的虚构形象，而是进化为集成先进人工智能技术的智能体，活跃于各种人机交互场景中。这些智能角色不仅拥有精心设计的背景故事、性格特点、语言风格等传统角色属性，还具备学习能力、环境感知、情绪识别及响应等高级功能。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*KlODQbZ-o3oAAAAAAAAAAAAADgCCAQ/fmt.webp) + + + +随着技术的不断进步，这些角色还能通过机器学习不断优化自身，实现更深层次的情感交流与智慧共生，促进人与智能系统之间更加自然、和谐的交互模式，开启人机交互新篇章。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*VlG-RaRy5rIAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

WHAT 什么是角色设计

+角色构成要素是塑造一个立体、真实、令人信服的角色所必需的基础。核心需要关注角色的性格内核和外在形象，必要时需要关注角色的专业能力。以下是主要的角色构成要素： + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*sB8bRIfxIrQAAAAAAAAAAAAADgCCAQ/fmt.webp) + +![](https://cdn.nlark.com/yuque/0/2024/png/338645/1732071434657-5c46fa10-f364-4a9c-9389-7a4a60b27bdf.png) + +

[性格内核](https://yuque.antfin-inc.com/qingmeng.wyy/taqofu/yhy4t4px0xr6trqg)

+性格内核是其行为、决策与情感反应的根本驱动力。包含人物核心性格特质、价值观、信仰动机和情感状态。这些特质构成了角色在面对不同情境下的行为模式和反应。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*iSEIRode8CEAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

[专业能力](https://yuque.antfin-inc.com/qingmeng.wyy/taqofu/zazgup8l8653v7w0)

+专业能力是指其在特定领域内掌握的知识技能、实践经验与解决问题的专长，这些能力支撑其职业表现，实现角色功能，解决场景中的挑战，展现其价值与不可替代性。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*TUwSRIyQkooAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

[外在形象](https://yuque.antfin-inc.com/qingmeng.wyy/taqofu/nmvtgbiz950m4l6i)

+外在形象包括外观特征、服饰风格、肢体语言及声音特点等，是其个性与背景故事的视觉与听觉体现，旨在直观地传达角色特质，增进观众或用户的第一印象与情感共鸣。 + +

外在形象

+外在形象包括外观特征、服饰风格、肢体语言及声音特点等，是其个性与背景故事的视觉与听觉体现，旨在直观传达角色特质，增进观众或用户的第一印象与情感共鸣。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*LHjERb77lp0AAAAAAAAAAAAADgCCAQ/fmt.webp) + +

专业能力

+专业能力是指其在特定领域内掌握的知识技能、实践经验与解决问题的专长，这些能力支撑其职业表现，实现角色功能，解决场景中的挑战，展现其价值与不可替代性。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*CV9ySpFm6RIAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

[性格内核](https://yuque.antfin-inc.com/qingmeng.wyy/taqofu/yhy4t4px0xr6trqg)

+性格内核是其行为、决策与情感反应的根本驱动力。包含人物核心性格特质、价值观、信仰动机和情感状态等。这些特质构成了角色在面对不同情境时的行为模式和反应。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*wnHWSIMreOcAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

HOW 角色设计应该遵循的原则

+角色塑造的精髓在于一致性、自然性与情感化。 + +**角色一致性：**塑造角色时需要深入挖掘角色背景、动机与性格特质，赋予其独特性与层次感，确保其行为逻辑自始至终与角色设定相符。 + +**角色自然性**：塑造角色时需与故事情节和其他角色互动紧密，推动情节发展，使角色鲜活立体，融入适宜的历史、社会环境因素，使角色言行自然，提升故事的信服力与共鸣度。 + +**角色情感化**：塑造角色需具备真实人类的情感和动机，使其可信且有温度。角色的情感应有变化，随着故事的发展，他们的情绪应有起伏，这会使角色更加真实。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*fteJT5kCZV8AAAAAAAAAAAAADgCCAQ/fmt.webp) + + diff --git a/docs/spec/smooth-natural.en-US.md b/docs/spec/smooth-natural.en-US.md new file mode 100644 index 00000000..27a145ef --- /dev/null +++ b/docs/spec/smooth-natural.en-US.md @@ -0,0 +1,57 @@ +--- +group: + title: 🎭 Role 角色设计 + order: 2 +order: 2 +title: 流畅自然 +--- + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*_efXTZnDktkAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

如何定义

+角色在与用户互动时展现出人类交流的流畅性和真实性。这涉及到语言表达的自然流畅，使用贴近人类日常对话的词汇和语法，避免机械和生硬的表达。同时，角色的行为反应也应自然合理，能够根据用户的输入做出恰当的、符合情境的回应。 + +:::tips + +

语法自然

+角色在语言使用上遵循正确的语法规则，注意对话视角、人称关系，需表达清晰、准确，避免出现语法错误或结构混乱，使得对话流畅易懂。 + +::: + +:::tips + +

**语气自然**

+角色语气应根据对话上下文和用户的情绪状态进行调整，确保其回应像是真实人类之间的交流，既不过于正式也不过于随意。 + +::: + +:::tips + +

逻辑自然

+角色对话内容应具有逻辑性，能够合理地回应用户的问题或话题，避免出现跳跃性思维或无关紧要的回答，确保对话的连贯性和合理性。 + +::: + +

适用场景

+自然性原则特别适用于那些需要与人类用户进行频繁且复杂交流的应用场景。以下是一些典型的应用场景： + +- **客户服务与支持**：在电商、金融、通信等行业，AI Agent可以通过自然语言处理技术自动回答用户的咨询，处理订单问题和退货请求，提供7\*24的在线服务，提高客户满意度和效率。 +- **智能助手与语音交互**：集成到智能音箱和手机应用中的AI Agent，需要能够通过语音命令进行交互，这要求Agent能够理解和处理自然语言语音指令 +- **智能辅导和答疑**：在教育领域，Agent能够提供24小时在线答疑服务，帮助学生解决学习中遇到的问题，通过自然语言处理技术，理解学生的问题并提供准确的答案 。 +- **情感分析与支持**：通过情感分析技术，Agent能够识别学生的情绪状态，并提供相应的支持和鼓励，创造积极的学习环境 。 +- **模拟社会和元宇宙**：在模拟社会或元宇宙中，Agent需要以自然的方式与环境中的其他个体进行互动，包括合作、竞争和社交等行为 + + …… + +在这些场景中，AI 角色的设计和实现需要特别关注其交流的自然性和人性化，以提高用户的接受度和满意度。通过模拟人类的交流方式和行为模式，AI 能够更好地融入人类的工作和生活环境，提供更加自然和直观的交互体验。 + +

最佳案例

+

1、为角色赋予丰富且富有逻辑的自然语言

+为 AI 设定清晰的角色和目标。这包括定义 AI 的性格特点、行为习惯以及它在特定场景中的作用。这些设定将为后续的设计提供基础。根据基础背景设定，可以继续为 AI 角色赋予更具体的技能、情感、语言等设定，让角色的定义更加丰富和立体。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*PfxLQ5SAGsQAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

2、为角色提供更真实的对话参考

+我们还可以采用低样本的思路，为 AI 角色提供行为和语言参考，通过对用户视角的分析，依据不同的用户类型、语言环境、使用场景等，建立符合人类真实对话的样本库。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*N8GtRp43ZM0AAAAAAAAAAAAADgCCAQ/fmt.webp) diff --git a/docs/spec/smooth-natural.zh-CN.md b/docs/spec/smooth-natural.zh-CN.md new file mode 100644 index 00000000..27a145ef --- /dev/null +++ b/docs/spec/smooth-natural.zh-CN.md @@ -0,0 +1,57 @@ +--- +group: + title: 🎭 Role 角色设计 + order: 2 +order: 2 +title: 流畅自然 +--- + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*_efXTZnDktkAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

如何定义

+角色在与用户互动时展现出人类交流的流畅性和真实性。这涉及到语言表达的自然流畅，使用贴近人类日常对话的词汇和语法，避免机械和生硬的表达。同时，角色的行为反应也应自然合理，能够根据用户的输入做出恰当的、符合情境的回应。 + +:::tips + +

语法自然

+角色在语言使用上遵循正确的语法规则，注意对话视角、人称关系，需表达清晰、准确，避免出现语法错误或结构混乱，使得对话流畅易懂。 + +::: + +:::tips + +

**语气自然**

+角色语气应根据对话上下文和用户的情绪状态进行调整，确保其回应像是真实人类之间的交流，既不过于正式也不过于随意。 + +::: + +:::tips + +

逻辑自然

+角色对话内容应具有逻辑性，能够合理地回应用户的问题或话题，避免出现跳跃性思维或无关紧要的回答，确保对话的连贯性和合理性。 + +::: + +

适用场景

+自然性原则特别适用于那些需要与人类用户进行频繁且复杂交流的应用场景。以下是一些典型的应用场景： + +- **客户服务与支持**：在电商、金融、通信等行业，AI Agent可以通过自然语言处理技术自动回答用户的咨询，处理订单问题和退货请求，提供7\*24的在线服务，提高客户满意度和效率。 +- **智能助手与语音交互**：集成到智能音箱和手机应用中的AI Agent，需要能够通过语音命令进行交互，这要求Agent能够理解和处理自然语言语音指令 +- **智能辅导和答疑**：在教育领域，Agent能够提供24小时在线答疑服务，帮助学生解决学习中遇到的问题，通过自然语言处理技术，理解学生的问题并提供准确的答案 。 +- **情感分析与支持**：通过情感分析技术，Agent能够识别学生的情绪状态，并提供相应的支持和鼓励，创造积极的学习环境 。 +- **模拟社会和元宇宙**：在模拟社会或元宇宙中，Agent需要以自然的方式与环境中的其他个体进行互动，包括合作、竞争和社交等行为 + + …… + +在这些场景中，AI 角色的设计和实现需要特别关注其交流的自然性和人性化，以提高用户的接受度和满意度。通过模拟人类的交流方式和行为模式，AI 能够更好地融入人类的工作和生活环境，提供更加自然和直观的交互体验。 + +

最佳案例

+

1、为角色赋予丰富且富有逻辑的自然语言

+为 AI 设定清晰的角色和目标。这包括定义 AI 的性格特点、行为习惯以及它在特定场景中的作用。这些设定将为后续的设计提供基础。根据基础背景设定，可以继续为 AI 角色赋予更具体的技能、情感、语言等设定，让角色的定义更加丰富和立体。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*PfxLQ5SAGsQAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

2、为角色提供更真实的对话参考

+我们还可以采用低样本的思路，为 AI 角色提供行为和语言参考，通过对用户视角的分析，依据不同的用户类型、语言环境、使用场景等，建立符合人类真实对话的样本库。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*N8GtRp43ZM0AAAAAAAAAAAAADgCCAQ/fmt.webp) diff --git a/docs/spec/start.en-US.md b/docs/spec/start.en-US.md new file mode 100644 index 00000000..3d876993 --- /dev/null +++ b/docs/spec/start.en-US.md @@ -0,0 +1,24 @@ +--- +group: + title: 💭 Conversation 会话设计 + order: 3 +order: 1 +title: 开始 +--- + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*izkdSJ122uoAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

WHAT 概述

+当用户第一次与 AI 交流时，AI 应该用热情的问候开始，并迅速展示其能力，以留下积极的第一印象。目标是让用户迅速感到自信，觉得自己能够掌控对话，同时帮助他们了解 AI 能为他们做些什么，而不是给他们一种正在接受教程的感觉。首要任务是迅速设定正确的期望，引导用户发现 AI 的功能，并将对话的主动权交还给用户。 + +

HOW 如何操作

+在进行初次交流时，有三个核心目标需要通过问候语来实现： + +1. **热情迎接用户：**通过一个友好的问候来表达对用户的欢迎，这有助于建立积极的初步联系。例如：使用“你好”“欢迎”等方式亲切、简单地和用户打招呼。 +2. **明确设定预期：**清晰地传达 AI 的功能和能力，以便用户对 AI 的用途有一个准确的预期，可以举2-3个高频的功能，但不要平铺细节。 +3. **赋予用户控制权：**确保用户感到他们主导着对话，通过提供选项或直接询问用户的需求，让用户感到他们对交流过程有控制权。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*MOx0TraEUzoAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

组件构成

+![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*M4NUQJ-PwkAAAAAAAAAAAAAADgCCAQ/fmt.webp) diff --git a/docs/spec/start.zh-CN.md b/docs/spec/start.zh-CN.md new file mode 100644 index 00000000..3d876993 --- /dev/null +++ b/docs/spec/start.zh-CN.md @@ -0,0 +1,24 @@ +--- +group: + title: 💭 Conversation 会话设计 + order: 3 +order: 1 +title: 开始 +--- + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*izkdSJ122uoAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

WHAT 概述

+当用户第一次与 AI 交流时，AI 应该用热情的问候开始，并迅速展示其能力，以留下积极的第一印象。目标是让用户迅速感到自信，觉得自己能够掌控对话，同时帮助他们了解 AI 能为他们做些什么，而不是给他们一种正在接受教程的感觉。首要任务是迅速设定正确的期望，引导用户发现 AI 的功能，并将对话的主动权交还给用户。 + +

HOW 如何操作

+在进行初次交流时，有三个核心目标需要通过问候语来实现： + +1. **热情迎接用户：**通过一个友好的问候来表达对用户的欢迎，这有助于建立积极的初步联系。例如：使用“你好”“欢迎”等方式亲切、简单地和用户打招呼。 +2. **明确设定预期：**清晰地传达 AI 的功能和能力，以便用户对 AI 的用途有一个准确的预期，可以举2-3个高频的功能，但不要平铺细节。 +3. **赋予用户控制权：**确保用户感到他们主导着对话，通过提供选项或直接询问用户的需求，让用户感到他们对交流过程有控制权。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*MOx0TraEUzoAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

组件构成

+![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*M4NUQJ-PwkAAAAAAAAAAAAAADgCCAQ/fmt.webp) diff --git a/docs/spec/wake-up-ai-icon.en-US.md b/docs/spec/wake-up-ai-icon.en-US.md new file mode 100644 index 00000000..81247e5d --- /dev/null +++ b/docs/spec/wake-up-ai-icon.en-US.md @@ -0,0 +1,93 @@ +--- +group: + title: 💻 Hybrid UI 混合界面设计 + order: 4 +order: 1 +title: 唤醒｜AI 标识 +--- + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*qCaWR6G8J4oAAAAAAAAAAAAADgCCAQ/fmt.webp) + +人工智能需要一些具有代表性的视觉符号，以便与人类头像或其他图标区分开来。 + + + +

设计目标

+ +产品界面中使用代表 AI 的图像标识，可吸引用户关注并开启新探索。人工智能视觉符号应具高辨识度，能在众多的图像中迅速吸引用户目光，让用户一眼能识别出代表人工智能。同时具备简洁性和通用性，易被不同用户理解接受，考虑与不同平台和界面协调性，能够自然地融入各种数字环境中，为用户提供一致流畅视觉体验。 + + + + + +--- + +

AI 标识方案

+一致的图像设计可以提高用户和消费者的可预测性和信任度。随着 AI 使用案例不断发展，我们会看到图标使用也随之发展。四芒星闪光点极为常见，通常代表着有 AI 的功能，也用于区分由 AI 生成或借助 AI 生成的信息。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*2gfURKz5UPoAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

💻网页端场景示意

+我们以本次新增的 AI 图像标识为例，进行几款常见的场景示意。 + +

📌 固定在浏览器拓展栏

+ + +众多 AI 助手入口搭载于各类浏览器之上，常被固定在浏览器拓展栏，这些 AI 助手凭借着其便捷、明显的入口位置，不断吸引着用户主动去打开并加以使用，为生活和工作带来极大便利。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*xUwtTb1jvA4AAAAAAAAAAAAADgCCAQ/fmt.webp) + +

🍃 悬浮在页面侧边

+ + +AI 助手会以悬浮方式出现在页面侧边，它们以便捷的位置和独特形态的设计引人注目，能够在用户工作时随时待命，为用户提供高效的协助，成为用户工作中的得力伙伴。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*UqW4QrzMeWoAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

😋 可跟随场景出现入口

+ + +还有 AI 助手并非固定存在，而会伴随着特定的任务场景适时地出现入口。当用户处于特定的工作情境或进行特定任务时，AI 助手便会以恰到好处的方式展现其入口，及时助力用户高效地完成各种任务。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*GBHEQpizsHIAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

👋 可触发智能工具栏 (Quick Bar)

+ + +此外，还有一些 AI 助手在编辑过程中，能够触发智能工具栏（Quick Bar）。当用户沉浸于编辑任务时，在恰当时机激活 AI 智能工具栏，为用户提供便捷高效的辅助工具，使得工作过程更加流畅精准。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*WTtjQJzj2-QAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

📱手机端应用场景

+ +

🤖️ AI 原生应用

+ +

📌 固定在产品底部导航栏

+ + +移动端 AI 入口常会被固定在产品的底部导航栏处，底部导航栏上的 AI 入口 相对是稳定的模块，无论何时何地，只要用户需要进行AI互动，都能迅速通过这个固定的入口与强大的人工智能进行交互。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*8pXySLYwzbMAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

+🍃 悬浮在产品侧边

+ + +在移动端还有一些 AI 入口会以悬浮形式出现在产品的侧边，既不占用过多的屏幕空间，又能在用户需要的时候及时出现，为用户提供便捷的 AI 服务。例如在地图类产品中，当用户有需求时可以将其唤醒。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*k09gQIBak5cAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

+😋 可跟随场景出现入口

+ + +在移动端某些场景中，会随着用户任务场景出现一些贴心的 AI 智能操作入口，为用户提供便捷高效的人工智能辅助。它紧密贴合用户的实际需求，在用户最需要的时刻伸出援手，助力用户顺利完成各种任务。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*0zDSSrXdP-IAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

👋可触发智能工具栏 (Quick Bar)

+ + +同样地，在移动端一些编辑场景下，会触发智能工具栏（Quick Bar）。当用户沉浸于移动端的编辑任务时，它以其便捷高效的特性，为用户的编辑工作增添一份智能与高效。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*KAtAQ7-XntIAAAAAAAAAAAAADgCCAQ/fmt.webp) diff --git a/docs/spec/wake-up-ai-icon.zh-CN.md b/docs/spec/wake-up-ai-icon.zh-CN.md new file mode 100644 index 00000000..81247e5d --- /dev/null +++ b/docs/spec/wake-up-ai-icon.zh-CN.md @@ -0,0 +1,93 @@ +--- +group: + title: 💻 Hybrid UI 混合界面设计 + order: 4 +order: 1 +title: 唤醒｜AI 标识 +--- + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*qCaWR6G8J4oAAAAAAAAAAAAADgCCAQ/fmt.webp) + +人工智能需要一些具有代表性的视觉符号，以便与人类头像或其他图标区分开来。 + + + +

设计目标

+ +产品界面中使用代表 AI 的图像标识，可吸引用户关注并开启新探索。人工智能视觉符号应具高辨识度，能在众多的图像中迅速吸引用户目光，让用户一眼能识别出代表人工智能。同时具备简洁性和通用性，易被不同用户理解接受，考虑与不同平台和界面协调性，能够自然地融入各种数字环境中，为用户提供一致流畅视觉体验。 + + + + + +--- + +

AI 标识方案

+一致的图像设计可以提高用户和消费者的可预测性和信任度。随着 AI 使用案例不断发展，我们会看到图标使用也随之发展。四芒星闪光点极为常见，通常代表着有 AI 的功能，也用于区分由 AI 生成或借助 AI 生成的信息。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*2gfURKz5UPoAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

💻网页端场景示意

+我们以本次新增的 AI 图像标识为例，进行几款常见的场景示意。 + +

📌 固定在浏览器拓展栏

+ + +众多 AI 助手入口搭载于各类浏览器之上，常被固定在浏览器拓展栏，这些 AI 助手凭借着其便捷、明显的入口位置，不断吸引着用户主动去打开并加以使用，为生活和工作带来极大便利。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*xUwtTb1jvA4AAAAAAAAAAAAADgCCAQ/fmt.webp) + +

🍃 悬浮在页面侧边

+ + +AI 助手会以悬浮方式出现在页面侧边，它们以便捷的位置和独特形态的设计引人注目，能够在用户工作时随时待命，为用户提供高效的协助，成为用户工作中的得力伙伴。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*UqW4QrzMeWoAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

😋 可跟随场景出现入口

+ + +还有 AI 助手并非固定存在，而会伴随着特定的任务场景适时地出现入口。当用户处于特定的工作情境或进行特定任务时，AI 助手便会以恰到好处的方式展现其入口，及时助力用户高效地完成各种任务。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*GBHEQpizsHIAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

👋 可触发智能工具栏 (Quick Bar)

+ + +此外，还有一些 AI 助手在编辑过程中，能够触发智能工具栏（Quick Bar）。当用户沉浸于编辑任务时，在恰当时机激活 AI 智能工具栏，为用户提供便捷高效的辅助工具，使得工作过程更加流畅精准。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*WTtjQJzj2-QAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

📱手机端应用场景

+ +

🤖️ AI 原生应用

+ +

📌 固定在产品底部导航栏

+ + +移动端 AI 入口常会被固定在产品的底部导航栏处，底部导航栏上的 AI 入口 相对是稳定的模块，无论何时何地，只要用户需要进行AI互动，都能迅速通过这个固定的入口与强大的人工智能进行交互。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*8pXySLYwzbMAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

+🍃 悬浮在产品侧边

+ + +在移动端还有一些 AI 入口会以悬浮形式出现在产品的侧边，既不占用过多的屏幕空间，又能在用户需要的时候及时出现，为用户提供便捷的 AI 服务。例如在地图类产品中，当用户有需求时可以将其唤醒。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*k09gQIBak5cAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

+😋 可跟随场景出现入口

+ + +在移动端某些场景中，会随着用户任务场景出现一些贴心的 AI 智能操作入口，为用户提供便捷高效的人工智能辅助。它紧密贴合用户的实际需求，在用户最需要的时刻伸出援手，助力用户顺利完成各种任务。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*0zDSSrXdP-IAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

👋可触发智能工具栏 (Quick Bar)

+ + +同样地，在移动端一些编辑场景下，会触发智能工具栏（Quick Bar）。当用户沉浸于移动端的编辑任务时，它以其便捷高效的特性，为用户的编辑工作增添一份智能与高效。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*KAtAQ7-XntIAAAAAAAAAAAAADgCCAQ/fmt.webp) diff --git a/docs/spec/wake-up-welcome-message.en-US.md b/docs/spec/wake-up-welcome-message.en-US.md new file mode 100644 index 00000000..09ae3cd8 --- /dev/null +++ b/docs/spec/wake-up-welcome-message.en-US.md @@ -0,0 +1,79 @@ +--- +group: + title: 💻 Hybrid UI 混合界面设计 + order: 4 +order: 2 +title: 唤醒｜欢迎提示 +--- + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*DMkuSr4HMfEAAAAAAAAAAAAADgCCAQ/fmt.webp) + +当用户首次踏入 AI 产品的世界时，可通过欢迎推荐的方式迅速了解并开启 AI 的强大能力以及具体用法。 + +

设计目标

+欢迎&提示组件适用于【唤醒AI阶段】，让首次接触 AI产品的用户快速理解AI能做什么，可以清晰传达给用户AI可实现的意图范围和预期功能。使用合适的欢迎推荐组件，可以有效降低用户学习成本，让用户能够在短时间内对 AI 的各项能力有一个清晰的认知，并掌握其正确的使用方法，让用户快速了解并顺利开始。 + + + + + +--- + +

👋欢迎组件

+ + +可通过用生动文案和直观介绍让用户迅速了解 AI产品，减少学习成本和困惑；精心视觉呈现吸引用户注意力，以此打造温馨、便捷、充满惊喜的初始体验，提升用户对 AI 产品的满意度和忠诚度。 + +> 注：资产提供多款样式，一般会搭载推荐组件，适用于不同场景。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*6n0jSYQyAz0AAAAAAAAAAAAADgCCAQ/fmt.webp) + +

👂提示组件

+ + +根据用户行为、偏好和历史数据，为用户精准推荐个性化内容和服务，提高用户发现有价值内容的效率，增强用户与产品间的互动和粘性。AI 提示组件也会随着用户数据积累和变化，持续优化推荐结果，以满足用户日益变化需求。 + +> 注：资产提供多款样式，一般会搭载欢迎组件，适用于不同场景。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*TGlzSpZj9a0AAAAAAAAAAAAADgCCAQ/fmt.webp) + +

组合场景示例

+

示意1：

+ +欢迎介绍和问题推荐都比较简洁清晰，让用户快速理解。 + +![独立式](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*GpyiT7xY6pkAAAAAAAAAAAAADgCCAQ/fmt.webp) + +![助手式](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*Z23ITozF1aQAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

示意2：

+ + +简明清晰的欢迎介绍，推荐提示功能显示主标题和辅助解释，让用户更易理解，文案可自定义。 + +![独立式](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*6e0LQaW4N4EAAAAAAAAAAAAADgCCAQ/fmt.webp) + +![助手式](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*KVWLR7tsSNsAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

示意3：

+ + +将欢迎背景去掉，更突显推荐功能，给予更多描述，让用户对推荐功能深入理解。 + +![独立式](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*b36lTJbK4zUAAAAAAAAAAAAADgCCAQ/fmt.webp) + +![助手式](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*ihV2QYtq2UUAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

示意4：

+ + +加入品牌形象会更加生动亲切，推荐功能较多时，可以进行合理分组，信息分层展示，直观清晰。 + +![独立式](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*jbGiSbAalWMAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

示意5：

+ + +以精心设计的视觉效果和生动的文案呈现，在用户首次接触 AI 产品时，给予更多引导，更加吸引用户开启使用。 + +![独立式](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*zXz3SKUcYCkAAAAAAAAAAAAADgCCAQ/fmt.webp) diff --git a/docs/spec/wake-up-welcome-message.zh-CN.md b/docs/spec/wake-up-welcome-message.zh-CN.md new file mode 100644 index 00000000..09ae3cd8 --- /dev/null +++ b/docs/spec/wake-up-welcome-message.zh-CN.md @@ -0,0 +1,79 @@ +--- +group: + title: 💻 Hybrid UI 混合界面设计 + order: 4 +order: 2 +title: 唤醒｜欢迎提示 +--- + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*DMkuSr4HMfEAAAAAAAAAAAAADgCCAQ/fmt.webp) + +当用户首次踏入 AI 产品的世界时，可通过欢迎推荐的方式迅速了解并开启 AI 的强大能力以及具体用法。 + +

设计目标

+欢迎&提示组件适用于【唤醒AI阶段】，让首次接触 AI产品的用户快速理解AI能做什么，可以清晰传达给用户AI可实现的意图范围和预期功能。使用合适的欢迎推荐组件，可以有效降低用户学习成本，让用户能够在短时间内对 AI 的各项能力有一个清晰的认知，并掌握其正确的使用方法，让用户快速了解并顺利开始。 + + + + + +--- + +

👋欢迎组件

+ + +可通过用生动文案和直观介绍让用户迅速了解 AI产品，减少学习成本和困惑；精心视觉呈现吸引用户注意力，以此打造温馨、便捷、充满惊喜的初始体验，提升用户对 AI 产品的满意度和忠诚度。 + +> 注：资产提供多款样式，一般会搭载推荐组件，适用于不同场景。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*6n0jSYQyAz0AAAAAAAAAAAAADgCCAQ/fmt.webp) + +

👂提示组件

+ + +根据用户行为、偏好和历史数据，为用户精准推荐个性化内容和服务，提高用户发现有价值内容的效率，增强用户与产品间的互动和粘性。AI 提示组件也会随着用户数据积累和变化，持续优化推荐结果，以满足用户日益变化需求。 + +> 注：资产提供多款样式，一般会搭载欢迎组件，适用于不同场景。 + +![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*TGlzSpZj9a0AAAAAAAAAAAAADgCCAQ/fmt.webp) + +

组合场景示例

+

示意1：

+ +欢迎介绍和问题推荐都比较简洁清晰，让用户快速理解。 + +![独立式](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*GpyiT7xY6pkAAAAAAAAAAAAADgCCAQ/fmt.webp) + +![助手式](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*Z23ITozF1aQAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

示意2：

+ + +简明清晰的欢迎介绍，推荐提示功能显示主标题和辅助解释，让用户更易理解，文案可自定义。 + +![独立式](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*6e0LQaW4N4EAAAAAAAAAAAAADgCCAQ/fmt.webp) + +![助手式](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*KVWLR7tsSNsAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

示意3：

+ + +将欢迎背景去掉，更突显推荐功能，给予更多描述，让用户对推荐功能深入理解。 + +![独立式](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*b36lTJbK4zUAAAAAAAAAAAAADgCCAQ/fmt.webp) + +![助手式](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*ihV2QYtq2UUAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

示意4：

+ + +加入品牌形象会更加生动亲切，推荐功能较多时，可以进行合理分组，信息分层展示，直观清晰。 + +![独立式](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*jbGiSbAalWMAAAAAAAAAAAAADgCCAQ/fmt.webp) + +

示意5：

+ + +以精心设计的视觉效果和生动的文案呈现，在用户首次接触 AI 产品时，给予更多引导，更加吸引用户开启使用。 + +![独立式](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*zXz3SKUcYCkAAAAAAAAAAAAADgCCAQ/fmt.webp) diff --git a/index-with-locales.js b/index-with-locales.js deleted file mode 100644 index 173bfb7d..00000000 --- a/index-with-locales.js +++ /dev/null @@ -1,12 +0,0 @@ -const antd = require('./components'); - -const req = require.context('./components', true, /^\.\/locale\/[A-Za-z]+_[A-Za-z]+\.tsx?$/); - -antd.locales = {}; - -req.keys().forEach((mod) => { - const matches = mod.match(/\/([^/]+).tsx?$/); - antd.locales[matches[1]] = req(mod).default; -}); - -module.exports = antd; diff --git a/package.json b/package.json index 19058119..a56df336 100644 --- a/package.json +++ b/package.json @@ -43,7 +43,7 @@ "clean": "antd-tools run clean && rm -rf es lib coverage locale dist report.html artifacts.zip oss-artifacts.zip", "precompile": "npm run prestart", "compile": "father build", - "predeploy": "antd-tools run clean && npm run site && cp CNAME _site && npm run test:site", + "predeploy": "npm run site && cp CNAME _site && npm run test:site", "deploy": "gh-pages -d _site -b gh-pages -f", "predist": "npm run version && npm run token:statistic && npm run token:meta", "legacy_dist": "antd-tools run dist", @@ -199,6 +199,7 @@ "jsonml.js": "^0.1.0", "lint-staged": "^15.2.10", "lodash": "^4.17.21", + "lottie-web": "^5.12.2", "lunar-typescript": "^1.7.5", "lz-string": "^1.5.0", "markdown-it": "^14.1.0", @@ -273,10 +274,6 @@ { "path": "./dist/antd-x.min.js", "limit": "350 KiB" - }, - { - "path": "./dist/antd-with-locales.min.js", - "limit": "400 KiB" } ] } diff --git a/tests/dekko/dist.test.js b/tests/dekko/dist.test.js index eea42af7..35d53352 100644 --- a/tests/dekko/dist.test.js +++ b/tests/dekko/dist.test.js @@ -1,15 +1,7 @@ const $ = require('dekko'); const chalk = require('chalk'); -$('dist') - .isDirectory() - // .hasFile('antd-x-with-locales.js') - // .hasFile('antd-x-with-locales.js.map') - // .hasFile('antd-x-with-locales.min.js') - // .hasFile('antd-x-with-locales.min.js.map') - .hasFile('antdx.js') - .hasFile('antdx.min.js') - .hasFile('antdx.min.js.map'); +$('dist').isDirectory().hasFile('antdx.js').hasFile('antdx.min.js').hasFile('antdx.min.js.map'); // eslint-disable-next-line no-console console.log(chalk.green('✨ `dist` directory is valid.')); diff --git a/webpack.config.js b/webpack.config.js index 0cdc4342..763c7dfd 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -7,15 +7,6 @@ const CircularDependencyPlugin = require('circular-dependency-plugin'); const DuplicatePackageCheckerPlugin = require('@madccc/duplicate-package-checker-webpack-plugin'); const path = require('path'); -function addLocales(webpackConfig) { - let packageName = 'antd-with-locales'; - if (webpackConfig.entry['antd.min']) { - packageName += '.min'; - } - webpackConfig.entry[packageName] = './index-with-locales.js'; - webpackConfig.output.filename = '[name].js'; -} - function externalDayjs(config) { config.externals.dayjs = { root: 'dayjs', @@ -43,7 +34,6 @@ if (process.env.PRODUCTION_ONLY) { if (process.env.RUN_ENV === 'PRODUCTION') { webpackConfig.forEach((config) => { - addLocales(config); externalDayjs(config); externalCssinjs(config);