一、项目概述 本项目旨在为筑泰打造一个风格独特、功能完备的官方网站，涵盖网站的设计与开发工作，包括但不限于视觉设计、交互设计以及前端开发等内容，确保网站在手机、平板、桌面电脑等多种设备上均能实现响应式展示，为用户提供优质的浏览和交互体验。 二、技术要求 （一）设计系统 建立统一的设计系统，确保全站风格高度一致。 针对各组件，需充分考量所有可能出现的使用情境，并对组件的默认、悬停、点击、禁用等状态进行详细标注说明。 （二）页面设计 响应式布局：确保所有页面具备响应式（RWD）设计，在手机、平板、桌面电脑等不同设备上均能正常展示，页面布局合理，无变形、错乱等问题。 交付成果：需交付高保真设计稿。 页面跳转流程：若页面之间存在跳转的先后顺序，请以文字描述或箭头标注的方式，清晰说明跳转流程。 动效设计：若页面包含动画效果，可通过原型演示或文字描述进行呈现。若无法在原型中模拟动画效果，则需附上动画效果的示例链接。 风格参考：整体网站期望通过酷炫的动画效果实现交互的连贯性，设计风格可参考以下网站： https://www.oshanehoward.com/ https://www.theo.be/families/artisme 设计依据：Wireframe（线框图）与网站架构可参考 Figma 文件：[具体 Figma 链接]。最终设计成果需在 Figma 中完成，并提交可编辑的 Figma 链接。 三、页面架构设计要求 （一）首页 首页主要划分为两大板块（可根据实际排版情况进行灵活调整）： Section A：主视觉 banner 区域。 Section B：主要代表颜色的图片板块。 每个图片代表一种颜色，颜色需严格参照 “官网资料” 文件中的色码，不得自行修改。 前 10 个颜色为主色系，可根据排版需要，适当新增或删减额外的辅助色。 动画效果要求： 当鼠标悬停在图片板块时，需通过动画效果突出显示该图片及其代表的色系名称。 点击图片应跳转到图库页面，并自动筛选出与该图片所代表色系关键字相符的结果进行展示。 当鼠标在各个图片板块间滑动时，期望呈现出类似参考网站 1 的寻找目标的滑动效果。 （二）关于我们 该页面主要分为七个板块，顺序如下： 公司简介 设计流程 施工流程 收费标准 我们的团队 合作客户 联络我们表单 联络人（必填） 公司资讯 Email（必填） 手机（必填） 空间类型（必填）：包括商业空间、住宅空间、办公室等。 点击 “送出” 按钮后，显示已收到表单的提示弹窗。各板块具体内容请参考 “官网资料” 文件。 （三）图库 筛选功能： 支持多选筛选，可分为颜色、风格、类型三大类进行筛选，每类筛选条件下各自设有 20 - 30 个不等的标签（具体标签名称后续提供）。 筛选器位于页面左侧，需充分考虑选择标签后页面的展示效果，且筛选后可进行清除操作。 图片展示： 页面右侧展示所有图库图片，每张图片均设有收藏按钮。 点击图片可查看大图，放大后的图片上方需显示该图片的标签和收藏按钮，再次点击可关闭大图。 页面采用无限加载模式，往下加载更多图片时，需显示 loading 动画与 skeleton 样式。 （四）时事专栏 该板块分为时事列表页和时事详情页。 时事列表页：展示所有时事内容的列表，包括封面、标题、发布时间。 时事详情页：展示内容包括封面、标题、时间、图片、文字、embed（嵌入内容）、标签（参考一般文章博客的示例），页面下方显示 3 篇相关时事推荐。 （五）作品 该板块分为作品列表页和作品详情页。 作品列表页： 筛选功能：支持多选筛选，筛选类型与图库一致，分为颜色、风格、类型三大类，每类设有 20 - 30 个不等的标签（标签名称待提供），筛选器位于页面左侧，需考虑选择标签后的页面展示效果。 作品展示：页面右侧展示所有作品，当鼠标悬停在作品图片上时，需清晰显示作品名称。点击作品图片可进入相应的作品详情页。 作品详情页： 页面左上方设置返回作品列表页的入口。 页面主要分为三大板块： Section A：展示作品名称、大图、标签、作品介绍。 Section B：展示约 8 - 10 组 AI 生成的图片及对应的介绍文字，期望通过特定的排版方式，体现出该作品是由这些图片获取灵感而创作的感觉。 Section C：展示 3 个相关作品，包括作品大图、作品名称、作品简介。 （六）会员中心 会员中心通过 TabBar 形式切换我的资料、我的收藏、我的案件三个页面。 我的资料： 可编辑的必填字段包括姓名、手机、信箱，同时支持密码设定功能。 设有保存和取消按钮，用于保存或放弃编辑操作。 我的收藏： 展示所有已收藏的图片，支持在页面上进行取消收藏操作。 可勾选图片发起 “发起案件” 流程，具体流程如下： 在图库页面收藏图片后，进入会员中心的我的收藏页面查看。 在 “我的收藏” 页面选择图片，勾选后图片显示勾选状态且可取消勾选，页面新增显示 “已选择 X 张图库” 提示文字、“取消勾选 / 全选” 按钮以及 “发起案件” 按钮。 点击 “发起案件”，进入发起案件页面。 发起案件页面： 展示所有勾选的图片，每张图片下方设有输入框，用户需针对每张图片填写喜欢的元素等描述（字数限制约 200 字，每个输入框均为必填项）。 支持删除图片操作，“删除图片” 仅表示在本次发起案件流程中不使用该图片，不会将其从收藏中移除。 点击 “上一步”，返回 “我的收藏” 页面，并保留之前的收藏状态；点击 “下一步”，进入 “填写案件表单” 页面。 填写案件表单页面： 页面显示五个问题（可能根据实际情况新增）。进入页面时，第一个问题与选项以高光显示，尚未回答的问题以半透明显示。回答完当前问题后，下一个问题自动高光显示。 鼠标悬停在选项上时，期望呈现 hover 效果。 点击 “上一步”，返回 “发起案件” 页面，并保留之前填写的状态；点击 “提交案件”，显示资料验证弹窗。 资料验证：若会员尚未填写姓名和手机，需显示资料验证弹窗。会员需填写姓名并成功验证手机后，方可成功提交案件。 我的案件： 展示案件列表，列表内容包括案件类型（设计、工程）、案件编号、发起日期。 点击 “展开” 按钮，显示案件进度条（进度状态根据案件类型有所不同）。 （七）注册 / 登录 注册：显示手机、密码、确认密码字段，输入框需设置必填与错误提示样式。 登录：显示手机、密码字段，输入框需设置必填与错误提示样式。 设定密码：显示旧密码、新密码、确认密码字段，输入框需设置必填与错误提示样式。 基本资料：用户第一次注册成功后，弹出基本资料填写弹窗（可选择略过不填），显示姓名、手机、密码字段，输入框需设置必填与错误提示样式。 （八）Header&Footer Header 导航列：展示 LOGO、“关于”“图库”“作品”“时事”“联系” 导航选项，以及登入按钮（若用户已登入，则显示会员中心入口）。 Footer：展示 LOGO、社群 icon（Facebook、IG、LINE、Threads）、“关于”“图库”“作品”“时事”“联系” 链接，公司名称、统一编号、地址、电话，以及底部 copyright 文案。 四、交付要求 设计完成后，需交付高保真设计稿、样式说明文档、动效说明文档。 提供的设计成果需在 Figma 中完成，并提交可编辑的 Figma 链接。 五、合作方要求 经验要求：具备 3 年以上 Figma 设计开发经验，拥有丰富的项目实践经验，能够熟练运用 Figma 完成复杂的设计和开发任务。 合作形式：不限制地域，无需驻场办公。合作方可以是个人，也可以是团队形式参与投标。 发票要求：必须具备开具技术服务类或者软件界面设计服务发票的能力，优先考虑可进行公对公付款的合作方。若选择劳务合作形式，合作方需自行接受 20% 劳务税点（但不建议）。 服务质量：具备良好的服务意识和专业素养，过往项目服务质量佳，能够按时、按质、按量完成项目任务，且可与我方建立长期稳定的合作关系。 报价与时间评估：合作方需根据个人或团队的时间安排以及项目经验，合理评估薪资报酬和项目设计时间，并在投标文件中明确说明。 资料提交：投递者请主动出示履历或相关作品集。履历应涵盖个人或团队过往从事 Figma 设计开发项目的详细经历，包括项目名称、担任角色、项目成果等；相关作品集需展示使用 Figma 完成的设计作品，突出设计能力、交互设计思路及动效设计水平，以便我方全面评估合作方实力。