企业官网建设流程全解析

Open WebUI交互体验深度体验：自托管 WebUI 的交互设计实操指南

【免费下载链接】open-webuiUser-friendly AI Interface (Supports Ollama, OpenAI API, ...)项目地址: https://gitcode.com/GitHub_Trending/op/open-webui

Open WebUI 是一款可以部署在自己服务器上的自托管 WebUI，让你通过浏览器统一使用 Ollama、OpenAI API 等多种模型。这篇文章带你从打开页面、发送消息到切换模型，走一遍它的交互设计，看看哪些细节让对话体验变得顺手。

🖥️ 打开即见——三栏布局与响应式适配

打开页面后，你会发现界面被自然地分成三块：左侧是会话列表，New Chat、Search、Notes、Workspace 依次排列，下面还挂着 Channels、Folders 和最近的历史对话；中间是对话区，模型名居顶，输入框悬在画面中央，等你开口；右侧默认收起，点一下控制按钮才滑出，里面是参数面板、文件浏览等工具。

这种"侧边栏 + 主区 + 控制面板"的结构在src/app.html里通过 viewport 元标签打好底子：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover" />

换到手机上再看，侧边栏会折叠成一个按钮，整个布局根据mobile状态做条件渲染切换，不会出现挤成一团的按钮。右侧控制面板则更灵活——它由ResizableSidePanel组件实现，拖动边缘就能调宽度，点一下就能整体收起，像分屏显示器一样随你滑动。

💬 一条消息的旅程——输入、对话与模型切换

把光标点进输入框，这是整条旅程的起点。你会先注意到它支持富文本：加粗、列表随手就能加，边输入还会弹出灰色文字的智能补全建议，按 Tab 或继续敲就能采纳。换行不用靠回车，Shift+Enter 换一行，Enter 直接发送（也支持在设置里切成 Ctrl+Enter）。这些行为集中在src/lib/components/chat/MessageInput.svelte里：

<RichTextInput bind:value={prompt} shiftEnter={!$mobile} autocomplete={true} generateAutoCompletion={async (text) => {...}} />

更顺手的是拖拽：把一个 PDF 或图片直接拖进输入框，松手它就成了这条消息的附件，不用去找上传按钮。发送之后，你的消息以气泡形式落在右侧，模型的回复逐字流式吐在左侧，气泡边界清晰，读起来像真实的对话。

把鼠标悬停在任意一条消息上，会出现一排小按钮：编辑、删除、评分、复制、重新生成。想改上一句？空着输入框按方向键 ↑，光标会直接跳回上一条消息的编辑状态。最后看顶部——点一下模型名就弹出选择器，在 Ollama 和 OpenAI 的模型之间来回切换只需两次点击，切完还会有一条提示告诉你"已切换到某某模型"。

⚡ 系统不会让你干等——加载动画与 Toast 反馈

自托管服务冷启动往往有几秒，这段时间 Open WebUI 不会甩给你一个白屏。启动画面中央是呼吸闪烁的 Logo，下面压着一条进度条，由src/static/loader.js随资源加载实时推进，等待有了方向感，焦虑就少了一半。

日常操作的结果反馈则交给 Toast。它像系统在你耳边轻说一句"搞定了"，说完几秒就自己消失，不打断你打字。在src/lib/components/chat/Chat.svelte里，成功和失败各走一条路：

toast.success($i18n.t('File uploaded successfully')); toast.error(`Error uploading file: ${e.message}`);

文件上传成功、上下文压缩完成会看到绿色提示；模型没选、没有权限这类问题则是红色警告并带上原因。每个关键操作都有回音，你永远不会猜"刚才到底成没成"。

🎤 打开麦克风和相机——语音转写与图片交互

打字累了，点输入框右侧的麦克风。按住说话，VoiceRecording组件开始录音并实时转写，文字直接填进输入框——确认，语音就变成了一段文字消息；取消，录音作废，光标自动回到输入框：

<VoiceRecording bind:recording on:confirm={async (e) => (prompt += e.detail.text)} />

这条链路把"想到什么说什么"的门槛降到了最低，长段口述不用逐字敲。

图片侧同理。上传的照片会缩略预览在输入框上方，一眼能看出是哪张；想撤掉，点缩略图上的小叉即可，文件列表和消息内容会同步更新。图片和语音都不是什么高深功能，价值在于：它们让"输入"这件事不再被键盘卡住，想怎么表达就怎么表达。

⌨️ 不用鼠标也能用——键盘导航与屏幕阅读器

习惯键盘的人会发现这套界面相当友好：Enter 发送（或 Ctrl+Enter），Esc 随时叫停正在生成的回答，空输入框按 ↑ 快速回到上一条消息编辑。停止生成的实现就是监听一个键位：

on:keydown={async (e) => { e = e.detail.event; if (e.key === 'Escape') stopResponse(); }}

对屏幕阅读器用户，界面上那些纯图标按钮——控制开关、侧栏折叠、模型切换——都带了aria-label描述，读屏软件会把它们念成"Controls""折叠侧边栏"而不是干巴巴的"按钮"。这不是给界面打标签，而是一种包容性设计：让不同能力的用户走的是同一条路，而不是被挡在图标墙外面。

总结

Open WebUI 的交互设计核心就一件事：让"和模型对话"这件事尽量接近"和人对话"。三栏布局把信息摆在顺手的位置，输入框吞下文字、语音、图片和拖拽，Toast 与进度条保证每个操作都有回音，键盘和读屏让所有人都进得来。它把自托管 WebUI 的默认体验拉高了一截。

• 官方文档
• 前端项目架构
• 聊天核心组件目录

【免费下载链接】open-webuiUser-friendly AI Interface (Supports Ollama, OpenAI API, ...)项目地址: https://gitcode.com/GitHub_Trending/op/open-webui