Muhan design
"AI Chat input" component
智能对话输入框 组件设计
Background
To support a range of ZEISS digital services—such as the GPT assistant and web-based customer support—I designed a universal Chat Input component. In addition to basic text entry, the component includes extendable ports for uploading voice messages, images, documents, and links to cloud storage. As part of the ZEISS Beyond design library, it was developed with strict adherence to brand language, while ensuring consistency and scalability across platforms and product lines.
项目背景
为了支持蔡司旗下的多种数字服务，如智能GPT 助手和网页客服，我设计了一个通用的“对话输入框”组件。除了基础的文本输入功能，该组件还预留了上传语音、图片、文档及链接云盘的扩展端口。作为蔡司设计组件库 Beyond 的一部分，其设计不仅遵循了品牌语言，也兼顾了跨平台、跨产品的一致性与可扩展性。
Responsive and Adaptability
The component is fully responsive across desktop, tablet, and mobile breakpoints. On mobile devices, a dedicated fullscreen input mode enhances typing comfort and readability. The visual behavior of the input field has been carefully designed to adapt to various input lengths and states—such as long-form typing, system responses, or message failures—ensuring clarity and guidance throughout the user journey.
响应式与多场景
“对话输入框” 支持多种屏幕尺寸下的样式响应，包括桌面端、平板端和移动端。在移动设备上，特别引入了全屏输入模式，以提高打字体验与可读性。输入框在不同文字长度和状态下的视觉反馈也被细致设计，以确保在长文本输入、系统响应、发送失败等情况下提供明确的用户引导。
Prompt Suggestions and Interaction Design
To improve user efficiency when initiating a conversation, the component supports contextual prompt suggestions that appear when the input is empty. I defined the sizing, placement, and interaction behavior of these prompts to ensure they remain informative without interfering with the typing experience. Their logic, quantity, and animation behavior were iteratively refined in close collaboration with developers to balance usability and visual performance.
提示词与交互优化
为了提升用户在启动对话时的效率，该组件支持在空闲状态下显示 prompt 提示词。我设计了提示词的尺寸、位置与点击交互，使其既不干扰输入，又能起到启发作用。提示词的数量、展示逻辑及动画细节也都在与开发团队的配合中反复优化，确保兼顾功能性与流畅体验。
Guidelines and Collaboration
As a core element of the ZEISS design system, I created comprehensive documentation and usage examples for the Chat Input component to support its adoption by global teams. Throughout the design process, I worked closely with developers to align implementation details with design intent—ensuring consistency, maintainability, and seamless integration across projects.
使用规范及前端开发协作
作为设计库中的基础组件之一，我为对话输入框编写了详细的使用规范与场景示例，帮助来自不同市场和团队的设计师快速理解和复用。同时在设计过程中，我也与开发团队密切配合，确保实现细节与组件规范一致，最大程度提升跨项目的可维护性与一致性。
