第 3 节：社区首页、帖子详情和发布页如何设计

HORU 跨境社区实战 · 第 03 节

把发现话题、理解内容和发布需求连成连续流程，同时处理登录、空状态和不可见内容。

本文记录 HORU 跨境社区 的实际建设过程。HORU（horu.world）同时提供蜡笔小账本、租的值与博客，各项目使用统一身份入口。文中历史页面和验收记录按当时状态说明。

三个页面是一条流程

首页负责发现话题，详情页负责理解上下文，发布页负责表达需求。分别画好三个页面还不够，用户从一个页面到另一个页面时，需要保留正在做的事情。HORU 社区的设计围绕这条流程展开，统一登录也是其中的一段，而不是独立于产品之外的页面。

首页让入口有优先顺序

首页需要让访客尽快看懂社区主题，再进入搜索、置顶区或全部话题列表。最新、热门、待解答和精选等筛选表达不同阅读意图，不能只改变按钮颜色。每个筛选都应有与之相符的数据依据。没有话题时，页面仍然需要解释当前状态，并提供清楚的发布入口。

详情页保持内容层次

详情页先交代标题、标签和作者等背景，再呈现正文与交流动作。登录后的阅读范围与回复权限，应由服务器决定。用户提供的旧版真机截图中包含登录提示与话题内容，这些截图可作为历史界面的记录，不能用来证明当前社区仍有这些帖子。

发布页帮助用户把话说完整

HORU 社区的发布界面包含标题、标签和正文编辑区域，并提供格式、媒体和预览等入口。提示语强调“说清楚你需要或能提供什么，以及希望大家如何联系”。这些说明直接影响内容质量。草稿保存提示也应与真实保存行为一致，切换账号或设备时不能把本机草稿误解成云端同步。

空状态与错误状态要分别设计

没有内容、没有权限、网络失败和帖子已下架是不同情况。网络请求失败时显示“暂无帖子”，会让用户误以为内容被清空。无权访问后台时应给出登录或返回路径。对于已经撤下的示例地址，返回恰当的 HTTP 状态，也有助于搜索系统停止把旧页面当成有效内容。

如何验收页面之间的连接

分别用访客和已登录账号检查首页、详情、发布入口。检查登录回跳后是否仍在正确页面，取消操作是否能返回合理位置。通过浏览器的实际点击验收流程，再用公开 HTTP 请求核对页面状态与正文输出。界面上的文案、接口返回和实际权限应指向相同的状态。

建设过程中的真实界面

以下为用户提供的历史手机截图，包含拍摄时的演示内容，展示界面结构与浏览器环境。画面中的帖子和统计不代表当前运营数据。

把这一节用到自己的项目

先选一个真实入口或一条测试数据，按下面的顺序记录结果，再扩大检查范围。

1. 登录后返回来源页面
2. 网络失败与空列表分别显示
3. 旧示例详情有撤下策略

继续阅读本系列

HORU 跨境社区实战 · 完整目录

1. 第 1 节：为什么做跨境社区，以及第一版解决什么问题
2. 第 2 节：从招聘、货源、服务商到项目合作，如何组织社区内容
3. 第 3 节：社区首页、帖子详情和发布页如何设计
4. 第 4 节：手机端如何适配阅读、搜索和发帖
5. 第 5 节：多个项目如何统一账号，并自动回到原项目
6. 第 6 节：邮箱注册与忘记密码，怎样验证真实发送和收件
7. 第 7 节：如何统一超级管理员、项目权限与后台入口
8. 第 8 节：清理演示帖子和虚假统计，让后台反映真实数据
9. 第 9 节：社区如何接入官网，以及如何做上线验收
10. 第 10 节：如何让搜索引擎与 AI 理解社区和系列文章

封面为 AI 辅助制作的主题插画，正文中的界面截图另有说明。项目入口：HORU 跨境社区 · HORU 官网