大模型UI界面换肤规范.docxVIP

大模型UI界面换肤规范

此规范旨在规定大模型UI界面整体换肤风格，整体展示风格为会白配色的扁平化风格。提升用户一致性操作体验，提升团队协作效率。

此规范基于1920*1080px尺寸设计，前端工程师需根据浏览器分辨率进行自适应。

浏览器需兼容360浏览器和chrome浏览器。

左右布局

首页布局采用左右布局的方式。

左侧导航区域涵盖两部分内容：菜单和会话记录。

字体

中文字体为：思源黑体，英文为MiSans，数字为MiSans。

根据不同场景内容，使用不同字号。

导航

导航区域宽度280px。背景色为#F7F8FA。

菜单默认颜色#242426，选中后颜色为#0052FF，选中后矩形底色为：#E8EEFF。

5、按钮

按钮形式分为文字按钮、实心按钮、幽灵按钮。按钮自适应，最小宽度为80px。超过4个字时，左右边距固定为16px。

文字按钮使用场景为列表操作按钮，实心按钮使用场景为列表、弹窗等主要按钮。

例如：

弹窗类：

新增助手弹窗：原来蓝色的主按钮，新增agent和确定按钮，均替换成蓝黑色：

列表类：

原蓝色查询主按钮，替换成蓝黑色：#343A46，鼠标悬浮颜色为#4D5769。

幽灵按钮使用场景为列表、弹窗等次要按钮。

弹窗中：例如取消按钮，列表中：例如重置按钮。

默认颜色不变，悬浮和点击颜色由原来文字蓝色，变为文字不改变颜色，悬浮背景色为：F4F6FF。

列表

（1）表头底色