电鸭
31人浏览/0人投稿
271天前
待托管赏金
一、项目概述
本项目旨在为筑泰打造一个风格独特、功能完备的官方网站，涵盖网站的设计与开发工作，包括但不限于视觉设计、交互设计以及前端开发等内容，确保网站在手机、平板、桌面电脑等多种设备上均能实现响应式展示，为用户提供优质的浏览和交互体验。
二、技术要求
（一）设计系统
建立统一的设计系统，确保全站风格高度一致。
针对各组件，需充分考量所有可能出现的使用情境，并对组件的默认、悬停、点击、禁用等状态进行详细标注说明。
（二）页面设计
响应式布局：确保所有页面具备响应式（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 完成的设计作品，突出设计能力、交互设计思路及动效设计水平，以便我方全面评估合作方实力。
