Open WebUI交互体验深度体验自托管 WebUI 的交互设计实操指南【免费下载链接】open-webuiUser-friendly AI Interface (Supports Ollama, OpenAI API, ...)项目地址: https://gitcode.com/GitHub_Trending/op/open-webuiOpen WebUI 是一款可以部署在自己服务器上的自托管 WebUI让你通过浏览器统一使用 Ollama、OpenAI API 等多种模型。这篇文章带你从打开页面、发送消息到切换模型走一遍它的交互设计看看哪些细节让对话体验变得顺手。️ 打开即见——三栏布局与响应式适配打开页面后你会发现界面被自然地分成三块左侧是会话列表New Chat、Search、Notes、Workspace 依次排列下面还挂着 Channels、Folders 和最近的历史对话中间是对话区模型名居顶输入框悬在画面中央等你开口右侧默认收起点一下控制按钮才滑出里面是参数面板、文件浏览等工具。这种侧边栏 主区 控制面板的结构在src/app.html里通过 viewport 元标签打好底子meta nameviewport contentwidthdevice-width, initial-scale1, maximum-scale1, viewport-fitcover /换到手机上再看侧边栏会折叠成一个按钮整个布局根据mobile状态做条件渲染切换不会出现挤成一团的按钮。右侧控制面板则更灵活——它由ResizableSidePanel组件实现拖动边缘就能调宽度点一下就能整体收起像分屏显示器一样随你滑动。 一条消息的旅程——输入、对话与模型切换把光标点进输入框这是整条旅程的起点。你会先注意到它支持富文本加粗、列表随手就能加边输入还会弹出灰色文字的智能补全建议按 Tab 或继续敲就能采纳。换行不用靠回车ShiftEnter 换一行Enter 直接发送也支持在设置里切成 CtrlEnter。这些行为集中在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 发送或 CtrlEnterEsc 随时叫停正在生成的回答空输入框按 ↑ 快速回到上一条消息编辑。停止生成的实现就是监听一个键位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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考