SparkCause的筹款平台界面设计用人物照片说明公众主题,再以玻璃感卡片展示项目管理。两端风格轻盈,任务却不同:首页解释支持什么,管理页核对进度与记录。百分比和币种因此都需要明确对象。

核心结论

  • 公众主题与管理资料分层,两个入口适合不同了解深度。
  • 目标评分与多币种汇总各有口径,明细应能回查。

公众首页先给主题和两种入口

白底首屏左侧大标题与简短说明,右侧儿童照片占据主要视觉,Donation和Read More在文字之后。金额卡与近期提示只叠在照片边缘,没有把全部管理统计搬到首屏。

这类公益网站设计适合先讲对象,再让愿意参与或继续了解的人分别进入。照片带来情境,文字仍应解释用途、计划与更新,不能让表情代替这些资料。

界达设计认为,Read More下一层最好围绕同一项目继续,了解之后能回到对应参与入口。图中人物与金额仅作页面内容观察,不当作已核实募款或受助结果。

SparkCause儿童主题首页的Give hope标题、Donation与Read More及照片上的捐赠金额卡
公众首页文字区与照片边缘|行动和了解各有入口,管理统计没有占据主阅读区。

项目进度和My Grade是两种指标

Fund manager先显示项目名与金额,旁边My Grade用一处比例,To goal又在进度条附近显示另一处比例,下面是捐赠、支持者、访客和更新。各值都有空间,但靠近时需要解释不同口径。

目标进度说明离某个目标多远,评分需要另一个定义;次数、人数和浏览也各有对象。界达设计会让名称、样式与解释入口一起区分,不能让读者只记住一个百分比却认错指标。

目标进度可以分别显示已到账、待结算和目标额度,再说明百分比基于哪部分。若一个项目临时调整目标,旧记录与新目标的关系也应可查,而不只让环形数值跳到另一位置。My Grade若表达另一种评分,则保留名称与解释入口,不与筹款完成比例共用含糊的“进度”。同一项目的总览和明细使用相同范围,才能让透明卡片中的数值有清楚来路。

SparkCause移动Fund manager页的项目名称、已筹金额、78% My Grade、63.5% To goal和参与统计
管理页金额到进度区|评分与目标百分比同时出现,应使用独立名称和解释。

原币明细与汇总,分别保留读法

Recent Donations上方是蓝黄绿环形图,中央总额,下方图例按Dollar、Euro、Other分组,列表再显示类型、日期、姓名和金额。颜色与币种文字共同说明分类。

原币记录值得保留,汇总则需说明采用哪种币、换算时点和图表口径。环形面积究竟表示金额还是笔数,应该直接命名。仅有一个货币符号,不足以解释所有明细怎样进入总额。

界达设计会从总览回查一笔记录,再返回同一项目,检查日期和范围没有丢失。漂亮的透明卡片可以提供气氛,记录来源与口径也应有稳定可读背景。

SparkCause近期捐赠环图的Dollar、Euro、Other图例与Type、Date、Donor、Amount记录列表
近期捐赠上部图例与下部明细|币种各自保留,中央总额仍需交代汇总范围。

常见问题

筹款总额和币种明细怎样配合?

保留原币金额与日期,并说明汇总币种、换算范围和时点。图表还需说清是金额份额还是笔数。

设计检查清单

  • 分别命名目标进度和评分定义。
  • 核对总览与明细的项目币种和时间范围。

把公众故事接到可核对记录

如果你的公益或活动平台需要整理项目介绍、进度与资金记录,可带着对象和统计字段来讨论。

界达设计工作室(JVDS)提供UI/UX设计与网站设计、开发服务,可一起梳理页面内容、界面结构与实现需求。

联系界达设计,聊聊你的项目