成品网站收藏功能是什么？它是让访客把喜欢的商品、文章、服务或案例保存到个人收藏夹，方便日后再次查看的交互模块。下面以界面图片素材合集的形式，展示收藏按钮、个人收藏夹、商品与文章卡片、空白提示等常见场景，并附上功能参数示例，方便对照屏幕布局与操作反馈。

按钮状态：收藏前后如何呈现

这组素材重点表现“未收藏—已收藏”的前后差异。图标旁可搭配“收藏”和“已收藏”文字，帮助不熟悉图形含义的访客理解操作；手机端也可使用较大的点击区域，减少误触。若收藏需要登录，可在按钮附近用简短提示说明登录后即可保存，避免访客点击后没有反馈。

收藏列表：已保存商品与文章的集中查看

收藏夹是访客再次查看已保存条目的主要入口。访客可以从个人中心或导航菜单进入，继续浏览已保存的商品、文章或案例，也可以取消收藏、打开详情或按分类筛选。横向卡片可用缩略图帮助快速识别，纵向排列则适合窄屏，避免操作按钮挤压标题与摘要。

商品与文章卡片：收藏按钮和主体元素的组合

若同一张卡片同时提供点赞、分享和收藏，应通过图标、文字或间距区分动作含义。收藏表示留待以后查看，点赞表达认可，分享则用于转发；三个操作可以并列，但主次需要明确。点击后出现轻量提示或图标变化，能让访客确认操作已经生效。

空白与反馈状态：把操作结果说清楚

状态素材还可展示加载中、收藏成功和操作失败等场景。成功提示适合短暂出现，不宜遮挡浏览；失败提示应说明本次操作未完成，并提供重新尝试的机会。从点击按钮到返回收藏夹，画面反馈与操作步骤保持连贯，访客才容易理解结果。

功能参数参考

下表列出成品网站收藏模块的一组配置示例，用于展示图集中常见的参数字段；具体数值可按站点规模、展示对象和交互方式调整，并非所有网站都必须采用相同设置。

查看素材时可关注的画面重点

• 图标辨识度：描边、实心和强调色状态应有明显区别，避免仅靠细微色差表达收藏结果。
• 视觉层级：先呈现商品名称、文章标题和缩略图，再安排价格、摘要或发布时间等辅助字段，收藏入口不应遮挡主体。
• 反馈连贯性：按钮变化、提示文案与收藏夹列表应相互对应，让访客确认保存或取消操作已经完成。
• 多端适配：桌面端可将按钮放在卡片角落，窄屏端则需留出足够的点击空间，避免与分享等操作挤在一起。

整体来看，成品网站收藏功能由收藏入口、状态反馈和个人收藏夹共同构成。按钮素材适合观察操作前后的变化，列表素材可用于规划商品、文章或案例的排列方式，空状态与提示素材则补齐操作过程中的反馈。将这些画面放在同一套视觉规范下，访客就能从浏览、保存到再次查看，顺畅完成整个收藏流程。