Heliograin：社区太阳能合作社 Web UI 概念（Landing / Overview / Credits）

Heliograin 是一款原创高保真 Web UI 概念，面向社区太阳能合作社：同一条街上的多户人家共用屋顶光伏和储能电池，每月再把电费积分分给各户。

三个页面

Landing（落地页）。 标题“Shared rooftops. One fair ledger.”旁边是一条暖色插画街道，屋顶铺满光伏板。几张悬浮卡片预览实时发电、共享电池和每月积分分配，下方四张功能卡片用平实的语言介绍产品。

Overview（总览）。 给合作社财务负责人的简洁仪表盘。指标行展示发电量、本地消纳、电池电量和积分池。24 小时曲线对比屋顶发电、街区用电和电池充电。旁边是抽象的屋顶地图、成员积分表，以及显示晚间储备的深色电池卡片。

Credits（积分）。 在变暗的页面上弹出一个专注的弹窗，引导完成一个月的积分分配：选择分配方式（平均、按屋顶份额或按本地用电），查看每户分配前后的预览，决定是否预留 5% 作为维护基金、是否发送通俗易懂的账单说明，最后确认金额。

视觉系统

• 暖纸色背景、白色卡片、墨色文字
• 以太阳琥珀色为唯一强调色，绿色表示“就绪”，蓝色代表电池
• Bricolage Grotesque 标题，Plus Jakarta Sans 界面文字，JetBrains Mono 数字
• 示例数据前后一致，各页面的分配金额能对得上

说明

Heliograin 是虚构品牌。所有姓名、数字和地址均为演示用 DEMO 数据。这是一份静态设计作品，不是能源、计费或金融产品。包括街道插画和图表在内的所有图形均由代码绘制，未使用照片或第三方标志。