断断续续打磨了三个月的后台管理系统 UI 终于定稿,放上来给大家品品,求轻喷求建议。
【设计目标】
面向中后台运营人员,日均使用 6 小时以上。所以一切围绕「低疲劳、高效率」:信息密度适中、动效克制、快捷键全覆盖。
【布局体系】
经典左侧导航 + 顶部面包屑 + 卡片工作区。导航支持折叠成图标模式,多标签页可固定常用页。栅格基于 8px 网格,间距只用 8/12/16/24 四档,强迫症狂喜。
【图表与配色】
主色只允许出现在关键操作上,图表用一组低饱和的蓝紫渐变系。暗色模式不是简单反色,而是重新校准了一整套色阶,对比度全部过 WCAG AA。
【组件细节】
表格全部支持列宽拖拽、虚拟滚动(万行不卡);表单校验信息就地展示;空状态插画统一一套风格,拒绝甩白屏。
【交付物】
Figma 源文件 400+ 组件变体,全部走 Auto Layout;开发侧配套了 Design Token 表,颜色、圆角、阴影一一对应 CSS 变量,还原度能到 95% 以上。
有想看局部细节的可以在评论区点名,我补截图。也欢迎聊聊你们后台设计的痛点。
分享一套我设计的后台管理系统UI
断断续续打磨了三个月的后台管理系统 UI 终于定稿,放上来给大家品品,求轻喷求建议。
【设计目标】
面向中后台运营人员,日均使用 6 小时以上。所以一切围绕「低疲劳、高效率」:信息密度适中、动效克制、快捷键全覆盖。
【布局体系】
经典左侧导航 + 顶部面包屑 + 卡片工作区。导航支持折叠成图标模式,多标签页可固定常用页。栅格基于 8px 网格,间距只用 8/12/16/24 四档,强迫症狂喜。
【图表与配色】
主色只允许出现在关键操作上,图表用一组低饱和的蓝紫渐变系。暗色模式不是简单反色,而是重新校准了一整套色阶,对比度全部过 WCAG AA。
【组件细节】
表格全部支持列宽拖拽、虚拟滚动(万行不卡);表单校验信息就地展示;空状态插画统一一套风格,拒绝甩白屏。
【交付物】
Figma 源文件 400+ 组件变体,全部走 Auto Layout;开发侧配套了 Design Token 表,颜色、圆角、阴影一一对应 CSS 变量,还原度能到 95% 以上。
有想看局部细节的可以在评论区点名,我补截图。也欢迎聊聊你们后台设计的痛点。
【设计目标】
面向中后台运营人员,日均使用 6 小时以上。所以一切围绕「低疲劳、高效率」:信息密度适中、动效克制、快捷键全覆盖。
【布局体系】
经典左侧导航 + 顶部面包屑 + 卡片工作区。导航支持折叠成图标模式,多标签页可固定常用页。栅格基于 8px 网格,间距只用 8/12/16/24 四档,强迫症狂喜。
【图表与配色】
主色只允许出现在关键操作上,图表用一组低饱和的蓝紫渐变系。暗色模式不是简单反色,而是重新校准了一整套色阶,对比度全部过 WCAG AA。
【组件细节】
表格全部支持列宽拖拽、虚拟滚动(万行不卡);表单校验信息就地展示;空状态插画统一一套风格,拒绝甩白屏。
【交付物】
Figma 源文件 400+ 组件变体,全部走 Auto Layout;开发侧配套了 Design Token 表,颜色、圆角、阴影一一对应 CSS 变量,还原度能到 95% 以上。
有想看局部细节的可以在评论区点名,我补截图。也欢迎聊聊你们后台设计的痛点。
Topics:
#设计
評論 (5)
登入 to comment
于洋50
2026-08-31
有没有更详细的资料?
科技达人
2026-09-05
设计得很干净!图表部分的配色特别舒服。
电商运营
2026-09-05
请问这套UI有开源吗?想用到自己的项目里。
高翔55
2026-09-11
已经转发给朋友了
电商运营
28 天前
这个问题我也研究过
評論 (5)