2025年9月鹦鹉知产网UI修改总结

阅读:32467 2025-09-11 23:22:12 来源:yingwu.net 作者:鹦鹉知产网
字体大小:
摘要:为提升鹦鹉知产网前端视觉统一性与用户体验,2025年9月期间,对商标服务、资讯展示、交易流程等多个模块的 UI 进行了优化与改版

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 等分,支持小屏缩放。

七、整体成效

  • 页面风格更简洁现代,品牌色使用统一。

  • 左右布局更加协调,减少错位、空白问题。

  • 动态数据展示更合理,用户操作指引清晰。

  • 所有新样式与站点其他模块保持一致,便于后续迭代和维护。

本文《2025年9月鹦鹉知产网UI修改总结》网址: https://www.yingwu.net/news/3963.html
🚩鹦鹉®️、PARROT®️、YINGWU®️、图形®️标识图案等为鹦鹉知识产权有限公司注册商标, 核准使用在第35类、第36类、第45类等商品/服务项目中。✅️ ➡️查看详情⬅️
上一篇: 没有了
相关文章
{{ v.title }}
{{ v.description || (cleanHtml(v.content)).substr(0, 100) + '···' }}
你可能感兴趣