哈啰，大家好，我是廖尔摩斯，一位从业超过 13 年的全链路产品设计师，同时也是一家为企业提供数字化产品设计服务的设计工作室负责人！
今天向大家分享我在去年年底为 Cxhub 社区设计的用户体验升级方案，希望你能从这篇产品体验分析中有所收获。如果你觉得我的文章有价值，欢迎分享给你的朋友！
Cxhub 是一个专注于客户体验和用户体验设计的学习社区平台，由国内顶尖客户体验专家龙国富、杠叔发起，为设计师、产品经理和用户研究人员提供专业的知识分享与交流空间。平台汇集了优质的客户体验和 UX 设计案例、方法论文章及行业洞察，帮助从业者持续提升专业能力。作为垂直领域的学习型社区，Cxhub 致力于构建高质量的内容生态，促进用户体验设计知识的传播与实践。
Cxhub 产品团队是一群热爱用户体验设计的互联网从业者组成，大家均是靠业余时间来负责 Cxhub 社区的设计研发，并非全职工作团队。而我正是其中一员，主要负责 Cxhub 社区的产品设计。
目前 Cxhub 社区在视觉设计上缺乏统一的规范，导致不同页面、不同模块之间的视觉表现不一致。色彩使用、字体层级、间距规则都没有形成标准化体系，这不仅影响了品牌认知的一致性，也降低了用户在使用过程中的流畅度。建立完整的设计系统（Design System）成为本次升级的基础工作之一。
当前 Cxhub 社区的视觉设计仍停留在较为传统的网页风格，缺乏现代化的设计语言。在色彩运用上过于保守，界面层次感不足，图标和插图风格也未能体现品牌特色。相比同类型的学习社区产品，Cxhub 在视觉呈现上的吸引力明显偏弱，这在一定程度上影响了用户对平台专业度和品质感的认知。
Cxhub 目前仅提供 PC 端的 Web 体验，尚未开发移动端应用或响应式设计。用户无法在移动设备上获得良好的浏览和学习体验。随着移动端成为用户获取信息的主要场景，碎片化学习需求日益增长，缺少移动端支持严重限制了产品的使用场景和用户覆盖范围。因此，本次升级不仅要考虑响应式设计，移动端的设计开发也是核心目标之一。
本次 Cxhub 社区用户体验升级采用"以用户为中心"的设计理念，通过用户研究、竞品分析和数据洞察，确定了三个核心策略：
简化信息架构、提升阅读体验，优化学习路径
。
在执行层面，我们遵循"渐进式增强"原则——优先解决核心体验问题，同时为未来功能拓展预留空间。整个设计过程注重可用性测试与迭代验证，确保每个决策都能真正提升用户价值。
此外，受 Medium 在 2025 年底新版本的启发，我们将其设计风格作为主要参考之一，力求在用户体验上达到同等水准。
Cxhub 的设计组件体系基于 Arco Design 进行优化和完善。作为 Arco Design 的拥趸，我习惯于站在巨人的肩膀上构建设计系统——这不仅节省了大量设计和开发时间，更重要的是可以借鉴经过实践验证的设计模式和交互逻辑。
Arco Design 是字节跳动推出的企业级设计系统，最吸引我的是它全部使用自动布局，让设计组件的增删变得极其高效。我们在此基础上，结合 Cxhub 社区的业务需求和品牌特色，对组件进行了针对性调整和扩展。
我们严格遵循 Arco design 色彩系统化分级的标准，基于 Cxhub 当前的品牌色，通过 Arco Palette 生成十个梯度层次的辅助色，用于不同场景下的信息层级区分。
在中性色的生成上，我们借鉴了腾讯 TDesign 的方法：在标准灰度色中加入 12% 比例的品牌色进行混合。这样，界面在保持专业感的同时，也能传递出品牌的独特气质。这种处理方式让中性色不再是"纯粹的灰"，而是带有品牌基因的"有温度的灰"——即使大面积使用，也能保持品牌识别度。
字体规范是构建清晰信息层级的基础。通过明确的分级，内容更易读，信息更有秩序。从标题到正文，再到辅助说明，每个层级都有明确的字号、行高和字重定义。此外，我们在 Arco Design 系统默认字体规范的基础上，针对特殊场景补充了 13/15/18pt 等字号，让系统显得更灵活，符合我们的设计需求。
Arco Design 内嵌了 IconPark 的大量图标，这也是我们图标的主要来源。结合 IconPark 开源、高质量的图标资源，我们统一了所有图标的描边粗细，构建了一套完整的图标库，涵盖导航、功能操作、状态提示等多个使用场景。
作为专业信息聚合的社区平台，我们采用卡片式信息流设计，为用户提供清晰的内容结构和舒适的浏览体验。每张卡片都是独立的信息单元，内容边界更清晰，用户可在快速浏览与深度阅读之间自由切换，从而提升阅读效率与信息获取效果。
在小程序导航栏中加入 Cxhub 的 logo，强化品牌元素，有助于提升用户对品牌的记忆。
用户可在头部标签栏快速切换「最新」「社区精选」与「订阅」内容。
Cxhub 社区对内容有严格的审核机制，内容均来自国内优秀创作者，因此数量相对较少。目前平台尚未采用千人千面的推荐机制，而是按发布时间顺序展示信息。
每隔 5 张卡片会插入其他版块的推荐内容，例如最新入驻作者、课程等，在保证信息流顺畅阅读的同时，也增强了首页的拓展性。
和移动端根据微信小程序的规范重构不同，PC 端我们主要优化了信息布局，让网页彻底遵循响应式布局规范，提升用户的阅读体验和操作体验。
资讯详情页是用户在社区停留时间最长的页面，也直接影响阅读体验。因此，我们从阅读节奏到字号等细节都做了充分考量。设计包含头部吸顶、阅读进度条、点击评论的展开效果，以及评论区的缺省状态与交互逻辑。
用户进入详情页，头部展示进度条、底部菜单栏展示快捷按钮：启发、评论、收藏和分享。
点击分享，可把文章转发给好友，也可以生成对应文章的朋友圈海报。
在 PC 端的资讯详情页，我们在左侧加入了文章目录的跳转，用户点击后可快速跳转到对应的内容，提升阅读效率。
课堂是承载 Cxhub 商业变现和内容升级的重要方式，不过当前阶段由于内容的缺乏我们主要把体验管理公开课作为课堂主要承载的内容，也就是以比较传统的录播课点播形式进行观看。
课程分为免费课程和付费课程，列表页清晰展示课程观看人数和课程时长。
用户可以在课程详情页可以查看课程的详细介绍、目录，并支持收藏和分享。
点击购买，进入课程订单页，可直接使用微信支付付款，付款后可进行观看。
播放详情页加入了免费试看和资料下载，方便用户下载课程所配套的资料。
PC 端设计和移动端设计保持一致，不过充分了利用 PC 端的空间，加入了用户的学习数据等。
经过半年多的努力，Cxhub 已积累上千份免费分析报告，涵盖消费购物、金融服务、社交通讯等行业，以及行业报告、商业分析和综合研究等多个场景。用户可以免费下载阅读，这也是 Cxhub 的特色版块。
头部可查看最新报告和精选报告，右侧输入关键词可在当前页面快速检索。
支持多层级筛选，用户可根据行业、内容分类、报告类型和发布时间进行检索。
报告详情页清晰展示每份报告的详细内容，包括文件大小、格式、TAG 标签、报告摘要、关键结论和图片摘要（这部分通过训练 AI 自动生成，极大节省了更新成本）。
在微信端，用户点击下载后可直接转发到微信文件助手。
PC 端设计和移动端设计保持一致，另外支持网盘等多种方式下载。
用户中心承担着各子功能的“数据总览 + 操作入口”双重角色，我们需要确保用户在这里可以一眼看到与自己相关的关键数据，并快速进入对应功能继续操作。通过这种明确的导航与可读的信息展示，我们降低了查找成本与迷失感，帮助用户在多功能场景中也能稳定、顺畅地完成目标。
读者、课程、文章和收藏等数据统计清晰可见，点击后可查看详情。
学习中心统计了用户历史以及最近观看视频的学习时长。
PC 端设计和移动端设计保持一致，用户可以一眼看到与自己相关的关键数据，并快速进入对应功能继续操作。
此次 Cxhub 社区升级的核心目标，是打造微信移动端，并建立一套统一、标准的视觉语言系统。因此，在功能层面我们没有做额外的增加或重构，而是聚焦于现有业务场景，对交互与视觉进行优化。它并不花哨，也缺少 AI 时代那些令人惊艳的创新功能，但对于这样一款以沉淀专业内容为主的社区产品而言，高效、简洁与良好的阅读体验，才是设计的重点。
以此为起点，后续版本将在成本可控的前提下，尝试更多功能创新，力图让 Cxhub 具备更强的核心竞争力与差异化。不过需要特别说明的是，受限于兼职团队的时间投入，这个版本虽然早在去年年底就已设计完成，但至今仍未正式上线。若想访问线上版本，还需要大家再耐心等待。
在写这篇案例分享的过程中，我和 ChatGPT 助理 Nova 讨论了一个问题——
现在还会有读者愿意看这种和 AI 几乎不沾边的内容吗？
我越来越感觉，如今这个时代，所有的互联网从业者似乎都在思考如何用 AI 代替我们的工作，无论是产品经理、UI 设计师还是开发工程师。
我有点担心，像我这样长篇大论的输出会显得毫无价值。因为我没有讲 AI 如何为我提效，也没有分析 AI 如何帮助我们提升效率。无处不在的 AI 内容，让我挺焦虑。
如果不考虑 AI 的焦虑，你写这些文章的初心是什么？你的答案会决定这件事到底值不值得继续做。
A. 建立个人品牌 B. 沉淀设计思考 C. 获取客户 D. 纯兴趣
当我把这几个选项认真排列后，突然恍然大悟。我热爱和享受的是设计和创作的过程，而非依靠 AI 直接为我快速输出结果。我花时间阅读、思考、创作，这个过程是任何 AI 工具都无法替代的——而这正是我真正追求和热爱的。不管今天还有没有人愿意阅读这样的文章，甚至会嘲笑这种输出形式像远古时代的猿人，但这些沉淀和分享本就是为了自己而写、而创作。
遵循热爱的初衷，坚定自己的职业目标，AI 的噪音总会退去。
突然很开心——我是人类，这篇文章由人类创作！
