logo
58
185
WeChat Login

“与我相关”页面优化#4070

Open
created 2 days ago
Edit

这个特性将解决什么问题?

图片.png

设想的解决方案?如有

@npc/ui-ux-pro-max(UI/UX设计大师) 我感觉,我在这里看不到这些issue的开启\关闭状态。还有,你觉得根据问题紧急程度(P0,P1,P2,-1P,-2P)修改问题底色怎么样?

UI/UX

NPC
1
292,821 tokens, 20.530 credits, ¥1.026

UI/UX

NPC

@samsong(AcidBunny) 很好的观察!你说得完全对,"与我相关"页面确实缺少 Issue 状态的视觉反馈,而且按优先级用底色区分也是一个非常实用的想法。我做了完整的 UI 设计方案,以下是具体建议:


🔍 问题分析

  1. 状态缺失:当前列表无法一眼区分哪些 Issue 已开启、哪些已关闭
  2. 优先级无差异化:P0 紧急 Bug 和 -2P 的文档问题在视觉上没有权重区分

✅ 设计方案

增强 1:Issue 状态指示器

状态图标行为
开启🟢 绿色圆点 + 微脉冲动画引导视觉聚焦活跃 Issue
已关闭⚪ 灰色对勾 + 标题删除线 + 整行降低不透明度(75%)清晰区分已处理项

每个 Issue 还附带"开启/已关闭"文字标签,确保颜色不是唯一的信息载体(WCAG 2.1 合规)。

增强 2:优先级底色编码

优先级左边框背景色说明
P0 紧急#DC2626rgba(220,38,38, 8%→3%) 渐变最高视觉权重
P1 严重#EA580C 橙红rgba(234,88,12, 8%→3%) 渐变第二梯队
P2 一般#D97706 琥珀rgba(234,179,8, 8%→3%) 渐变中等权重
-1P 低优#3B82F6rgba(59,130,246, 6%→2%) 渐变淡化处理
-2P 最低#6B7280rgba(107,114,128, 6%→2%) 渐变最低视觉权重

设计底线:背景色透明度控制在 3%~8%,避免干扰文字阅读。同时提供文字标签(P0/P1/P2/-1P/-2P)+ 顶部图例说明。

交互细节

  • 所有 Issue 行支持 hover 上浮 + 阴影(200ms ease)
  • 点击整行可跳转 Issue 详情(cursor-pointer)
  • 开启状态的绿色圆点带 2s 缓动脉冲动画,尊重 prefers-reduced-motion
  • 已关闭 Issue 不删除不隐藏,仅降低视觉权重

⚠️ 设计注意事项

  1. 不要仅靠颜色传达信息 — 每个优先级必须搭配文字标签,满足无障碍标准
  2. 已关闭 Issue 不要完全隐藏 — 降低不透明度即可,用户可能需要回顾
  3. 背景色必须极淡 — 透明度 3%~8%,确保文字对比度 ≥ 4.5:1
  4. 优先级是功能属性不是 UI 属性 — 建议通过 Label/Tag 机制关联,而非硬编码

我生成了完整的 HTML 设计稿预览(包含 6 条模拟数据的完整列表),包含交互效果。由于当前权限无法上传图片附件,你可以联系管理员开通"替我上班"模式后我可以直接上传预览截图和 HTML 文件。

如果你觉得方案方向没问题,我可以进一步细化组件规范、暗色模式适配和移动端响应式方案!

Assignee
None yet
Label
仅讨论
Priority
None yet
Time period
-
Property
Add custom properties to record and label key information
Participant