GoGreen Tableware 

1. 项目背景

客户

GoGreen Tableware Solution

行业

生态环保食品包装领域，目标客户群体包括需要可持续、环保包装解决方案的餐饮和食品行业客户。

简介

GoGreenTableware 从事环保食品包装和餐饮一次性用品的供应，专注于甘蔗渣餐具和纸质食品包装产品的生产与销售。公司致力于提供高质量的产品和服务，致力于为全球客户提供一站式环保包装解决方案。

目标

客户期望通过更新网站，提升品牌知名度，吸引更多来自全球的客户。通过一站式解决方案来满足不同地区和行业的需求。

挑战

• 语种单一，网站没有针对不同国家做本地化支持；
• 之前是用WordPress建站，数据结构比较混乱，调整困难。

---

2. 项目目标

业务需求

• 增强网站的视觉设计和用户体验
• 提高移动设备的访问性能
• 实现多语言本地化功能
• 能够第一时间在客户询盘时收到通知

设计与开发目标

• 设计一个现代化且符合品牌形象的网站
• 集成最新的前端和后端技术，确保性能和安全性
• 提供高效的内容管理系统，让客户能够轻松更新内容
• 提供本地化支持，能够以较为方便的方式对目标地区的语言进行后台管理、更新

---

3. 设计阶段

调研

在进行品牌设计时，首先通过前期的市场调研，明确了客户的行业关键词：绿色、环保、洁净。这些关键词不仅是品牌的核心价值，也是设计方向的指引。

为了呼应环保理念，我们选定了绿色作为主题色，象征着自然与生命力。同时，为了突显洁净感，选择了偏蓝的灰色系作为辅助色。灰蓝色的冷静与洁净感，使得整体设计既符合环保主题，又不失现代感和专业性。

线框图和原型设计

在项目初期，我们选择使用在线设计工具进行原型图的绘制。这种工具不仅能够提高设计效率，还允许客户实时在线预览设计进度，实现对项目的即时反馈与控制。以下是我们采用的具体策略：

实时预览与进度跟踪

在线设计工具的一个显著优势在于其实时协作功能。客户可以随时登陆查看当前原型的进展情况，并提供即时反馈。这种透明度确保了客户对项目进度的全面把控，增强了沟通效率，减少了反复修改的时间。

色彩搭配的初步呈现：方向不偏离

在低保真原型阶段，我们已经将确定的色彩搭配融入设计中。通过在原型中初步展现色彩风格，客户能直观地感受到设计的大致方向。这种方法确保了在早期阶段，我们就能获得客户的认可，避免在后期深入设计时出现重大偏差。

视觉设计

一旦客户对初步页面架构的配色风格表示满意，我们便可以安心地进行更深入的设计阶段。通过这个逐步确认的过程，我们不仅确保了设计的一致性和方向性，还能够在细节上进行更精细的打磨，以达到最佳的视觉效果。

将确定的色彩搭配在原型中体现，让低保真原型也能看到一些大概的设计风格效果，确保大方向不会跑偏。整体配色风格如果客户接受，则可以进行后续深入的设计。

字体选择：圆润、亲和，提升用户体验

考虑到环保餐具产品与人们日常生活的紧密接触，我们决定采用圆润的字体。这种字体设计不仅显得更加亲和、友好，同时能够传递出温和与自然的品牌形象。圆润的字形让人感受到安全感，也能增强品牌的亲和力，给用户带来愉悦的视觉体验。

因此在字号选择过程中，标题部分字体选用了整体较为圆润的Quicksand¹字体，正文部分主要关注阅读，选择与Quicksand搭配较为和谐的字体即可，最终选用ubuntu字体作为正文字体。

设计系统 ：层次分明，确保一致

在定义设计系统阶段，我们遵循基础 → 组件 → 模式 → 页面的顺序，从低到高层逐步展开设计。这样的分层方法确保了设计的连贯性和层次感，既提升了用户体验，也为后续的扩展与维护提供了便利。

完成组件层次的定义后，可以使用组件拼装成模块，例如顶部导航、表格、联系我们表单等。

图标处理：完善细节，提升质感

在页面设计中，图标元素的统一性不可忽视。我们对所有图标的尺寸、色彩进行了统一化的处理，这样能够在细节处增强网站的专业感。

小结

在品牌设计的初期，我们通过市场调研确定了核心行业关键词——绿色、环保、洁净，并基于这些关键词确定了色彩、字体和设计方向：绿色作为主题色，偏蓝灰色系作为基础色，圆润字体增加亲和力，同时确保设计系统的一致性和图标元素的统一处理，提升品牌的专业感。

接下来，我们将进入开发阶段，确保设计理念能够精准转化为实际的线上表现，提升用户体验和品牌影响力。

---

4.开发阶段

技术栈选择

网站开发采用了 Laravel 作为基础框架，并结合使用了 Filament 作为后台管理框架。这两个开源框架在市场上广泛流行，功能完善、生态丰富，且具备较低的上手门槛，方便找到 PHP 开发人员进行后续拓展，确保客户不会因技术选型而与我们形成强绑定。

这种架构选择不仅满足了当前需求，也为未来的扩展和维护提供了灵活性和可持续性。

前端开发

在前端开发方面，由于网站的交互功能相对较少，我们选择了使用 Laravel 自带的 Blade 模板进行前端开发，简化了开发流程。

为了提高开发效率并实现更好的组件化管理，我们使用了 Tailwind CSS 作为 CSS 框架。Tailwind CSS 提供了丰富的实用类，可以快速、灵活地进行样式调整，进一步降低了复杂度，同时提升了开发的灵活性和可维护性。

后端开发

后端开发我们使用 MySQL作为数据库，根据客户的业务数据量身定制数据表结构。

此外根据本地化的需求，融入了自动翻译的功能，能够根据单一语言一键翻译为其他目标语言。

测试与优化

SEO：确保收录

在上线前，我们使用了 Lighthouse 工具对网站进行全面的 SEO 审核，查找并修复了可能影响 SEO 收录的问题。

通过这一过程，我们优化了网站的性能、可访问性、最佳实践和 SEO 基础，确保网站能够在搜索引擎中获得更好的排名和曝光，从而提升整体的流量和用户访问体验。

本地缓存：提升访问速度，降低服务器成本

在网站设计中，考虑到网站主要以静态展示内容为主，我们对页面进行了静态化处理，通过生成 HTML 页面缓存来优化用户访问体验。这样一来，后续的用户请求无需每次从数据库中拉取数据，从而显著降低了服务器的负担，减少了系统资源的消耗，同时有效节约了服务器的运营成本。

这种优化方式不仅提高了页面加载速度，还提升了网站的整体性能和可扩展性。

---

总结

为了确保系统的扩展性和维护性，我们在开发过程中始终坚持降低系统复杂度的原则，同时从客户的角度出发，避免与客户形成强绑定关系，尊重客户的选择自由。因此，选用的框架不仅注重开发成本和后期维护的难易程度，还需要具备完备的组件生态和强大的社区支持。

Laravel 和 Filament 作为成熟的开源框架，具备了这些优势，能够满足中小企业在有限预算下实现可维护、可扩展且高质量的网站建设。这一技术选型有效解决了企业在网站建设过程中的核心痛点，帮助客户以最低成本获得最大的长期价值。

Footnotes

1. Quicksand - Google Fonts ↩