2025年9月鹦鹉知产网UI修改总结
为提升鹦鹉知产网前端视觉统一性与用户体验,2025年9月期间,对商标服务、资讯展示、交易流程等多个模块的 UI 进行了优化与改版,主要调整点如下:
一、整体风格统一
-
色板统一:确立主蓝
#3369E3
与辅绿#008A64
渐变为核心色彩,替换原有背景图、杂色块,统一按钮、标签、进度条等交互元素。 -
卡片化设计:服务详情页、左侧菜单、资讯列表均采用浅色卡片 + 阴影风格,提升层次感,弱化杂乱感。
-
响应式适配:优化宽度、间距、字号,保证 PC 与移动端显示的一致性。
二、服务详情页优化
-
顶部 Banner:去掉背景大图,改为渐变色卡片,并加入简洁边框,标题/描述文字改为白色高对比。
-
价格区域:价格采用大字号 + 高亮色,支持动态 SKU/规格切换。
-
操作按钮:主操作(立即办理)为渐变填充按钮,次操作(售前咨询)为描边按钮,交互状态统一。
-
下方 Tabs:服务介绍/常见问题等标签切换改为渐变下划线,悬停与选中效果一致。
三、左侧菜单栏改版
-
分组条目:原有背景深色条替换为白色卡片 + 浅灰描边,提升与主区域的协调感。
-
子菜单:子项悬停/激活时采用淡蓝背景和左侧高亮指示条,层级更清晰。
-
常用下载:保留深蓝底突出显示,但做成圆角卡片风格。
四、商标交易模块调整
-
分类 Tabs:从原有 5 个分类扩展到 10 个(03、09、25、30、35、05、21、29、33、43),支持更多类别展示。
-
默认显示:调整数据逻辑,确保新增分类正常在前端显示,保持每类默认展示 8 条商标数据。
-
查看更多按钮:在列表底部增加统一样式的“查看更多商标 >>”,引导跳转。
五、资讯与公告展示
-
更多文章:将原本的
<el-tab-pane label="更多文章">
改为固定超链接/notices
,避免出现空白 Tab。 -
列表优化:显示最新 5 则公告/文章,保证内容动态但不留空位。
六、交易流程进度条
-
纯 CSS 实现:替换原先图片进度条,改为 HTML + CSS 实现的数字方块 + 分隔点样式。
-
状态控制:当前步骤为红色,后续步骤为灰色,可扩展支持“已完成步骤”样式。
-
自适应布局:采用 Flex 等分,支持小屏缩放。
七、整体成效
-
页面风格更简洁现代,品牌色使用统一。
-
左右布局更加协调,减少错位、空白问题。
-
动态数据展示更合理,用户操作指引清晰。
-
所有新样式与站点其他模块保持一致,便于后续迭代和维护。