明远湖畔MINGYUAN LAKESIDE进入交互原型 ↗
EXPERIENCE DESIGN · 2026

校园论坛，
清楚一点。

版块、公告、讨论各自有明确的位置。保留校园识别，强化内容层级，让阅读、找帖和参与讨论更直接。

明远湖畔 / 移动端优先 / 前端设计提案 v0.2

为明远湖畔创作的秋日校园概念插画湖畔 · 秋日来信

01 / 首页与功能分区

MOBILE FIRST

先找到版块，
再进入讨论。

首页按版块入口、公告、讨论分区。底部保留首页、版块、发布、消息、我的，桌面导航区分社区与个人功能。

01

内容优先

帖子先呈现版块、标题、摘要；作者和互动收在底部。标题加重、正文加深，减少同一行内的标签堆叠。

02

操作明确

统一使用“发布帖子”“消息通知”等直接命名。排序使用分段按钮，版块选择同时改变边框、底色和讨论标题。

03

分区清楚

浅灰背景承托白色内容区；公告用暖色提示。右侧热议、活动、社区使用独立成区，减少重复入口和抒情文案。

版块目录 ↗图文与楼中楼 ↗校园投票 ↗消息与申诉 ↗个人中心 ↗

02 / 颜色与阅读层级

VISUAL LANGUAGE
浅灰 / 页面底色#F1F3F4
墨绿 / 阅读主体#243631
朱红 / 主要操作#A23E38
浅绿 / 状态提示#E9F1ED
银杏 / 点缀#EBD9A3

品牌 / 宋体

明远湖畔 · 川大校园论坛

品牌保留宋体辨识度；功能页面和帖子标题统一使用系统黑体，减少装饰感。

内容与界面 / 系统黑体

期中复习经验：先列问题，再查漏。

手机详情正文 15px / 2 倍行高，列表正文 13px。版块色标位于标题上方，互动操作集中在底部。

03 / 也认真设计“不顺利”的时刻

STATES & FEEDBACK

内容审核中

你的帖子正在审核中
通过后将自动发布，处理结果会通过消息通知你。

修改版本待审

新版本正在审核
当前仍展示此前的内容，通过后自动更新。

加载失败 · 可以重试

暂时没能加载新的讨论。已显示的内容会保留。

加载中 · 结构不跳动

只在真实等待时显示；减少动态效果时保持静态。

动作反馈 · 轻、快、克制

按压 180ms，页面切换 240ms，投票结果 400ms。尊重系统的“减少动态效果”设置。

身份与权限

游客可以阅读。需要账号或校园认证的动作，在用户真正参与时给出说明，不用弹窗打断浏览。

访客态 ↗未认证态 ↗

04 / 从原型走向前端仓库

ENGINEERING HANDOFF

建议独立：mingyuanhu-web

前端拥有独立构建、预览和发布节奏。Go 仓库继续管理业务；设计仓库继续管理接口契约。线上通过同一域名路由到页面与 API，降低登录和跨域的复杂度。

建议采用 Nuxt / Vue / TypeScript。公共内容页使用服务端渲染，个人页面按私有状态处理。此处为方案建议，尚未创建新仓库。

mingyuanhu-web/
├── app/pages/         页面与路由
├── app/components/    内容与交互组件
├── app/assets/        设计变量与样式
├── app/composables/   登录、分页与 API
├── contracts/         固定版本的接口契约
└── tests/             核心用户路径

05 / 设计自检

QUALITY REVIEW

排版

品牌与阅读分工；标题不孤字，长内容不横向溢出。

留白

使用 4px 基础节奏；正文连续，分区有呼吸感。

视觉层级

版块、标题、摘要、作者与动作次序明确；主操作使用朱红。

色彩

提高辅助文字对比度；颜色与文本共同表达状态。

动效

动态只服务于状态变化，不劫持滚动，不循环装饰。

微交互

回复有回音，投票有结果，草稿有恢复，审核有进度。

响应式

320px 起重排；底部安全区、完整弹窗和表单字号单独考虑。

原创性

保留原创湖景和朱印，配合固定版块标识，避免泛化装饰。