返回作品集
TrailerHome 首页：标题“Live your own space. Wherever you are.”，第二句为红色；旁边是一座玻璃墙、木纹外饰、带木平台的移动房屋，位于橄榄树下；文字下方有一个通往车型的红色按钮和一个描边电话按钮。
在新标签页中打开 trailerhome.gr

TrailerHome by NIKITAS — 移动房屋制造商的双语网站

项目概述

NIKITAS COMPANY 自 1977 年起在塞雷斯的普罗瓦塔斯生产汽修设备和特种钢结构，1981 年开始出口。TrailerHome 是它的移动房屋品牌：建在钢制拖车底盘上的完整小屋，配有保温墙体和屋顶、门窗、电气、给排水、厨房和卫生间，由卡车运送、吊车就位，可送达希腊各地及海外。产品分为 Modern、Classic、Nature 三个系列，也可以与客户一起从零设计。网站有三项任务：清楚展示产品范围，建立对背后工厂的信任，并把兴趣转化为一通电话或一封邮件——因为这里既没有网店，也没有在线表单。

希腊语是默认语言，英语是完整的第二版本：同样的十四个页面，同样的文件名。首页以三段短片开场，每个系列一段，彼此淡入淡出。接着是标志性设计：Modern 系列的立面图依据实物照片描绘，随着滚动一笔一笔画出，然后让位于那张照片。每个系列都有独立页面，包含照片、视频和构造细节；其余内容由对比表、五步流程、可筛选的真实成品与交付图库、公司大事记，以及关于尺寸、许可和交付的常见问题来完成。照片和视频都取自客户自己的素材，每张照片都不超过 100 KB。

挑战

客户手里有很好的素材，却没有任何适合网络的文字：手机里的照片和视频、两份宣传单、一张名片，以及旧网站上的一份传单。所有内容都要按系列、用途和阶段整理，再用两种语言从头写起。这类产品还容易让人许下轻率的承诺——无需许可、几周交付、价格固定——而这些并不总是成立，所以每一句关于许可、尺寸、价格和交期的话都必须谨慎，又不能显得含糊其辞。此外，网站要在没有网店、价目表和联系表单的情况下促成销售，还要带着十几段视频，在信号微弱的手机网络下依然流畅——因为挑选地块的人，往往正站在那块地上。

解决方案

每个页面只写一次源文件，再由一个小型 Python 脚本构建成两种语言：共用的页眉、菜单和页脚，带真实尺寸的响应式图片，以及集中维护的企业信息——电话、地址、工厂坐标——并由此写入结构化数据、地图链接、站点地图和供 AI 助手读取的全文版本。每次上线前，检查脚本会核对链接、替代文本、标题层级、canonical、hreflang、结构化数据以及每张图片 100 KB 的上限。动画基于 GSAP 和 ScrollTrigger，失败时安全降级：脚本没有加载，或访客偏好减少动效时，所有内容都会直接显示。内容安全策略（CSP）不允许内联样式，并用哈希值锁定唯一的内联脚本。无障碍性是在浏览器里实测的，而不是想当然——所有页面在手机和桌面宽度下共 4,954 个文本节点，零问题——每段产品与交付视频都附有文字说明其内容。关于许可，常见问题给出诚实的回答：取决于用途、规划分区和管线接驳，请咨询当地工程师。

图片集

  • TrailerHome 首页：标题“Live your own space. Wherever you are.”，第二句为红色；旁边是一座玻璃墙、木纹外饰、带木平台的移动房屋，位于橄榄树下；文字下方有一个通往车型的红色按钮和一个描边电话按钮。

    首页一打开，就是房子本身

  • Modern 系列的白色线稿画在深色网格上，只画了一部分；门窗和底盘上标有红色编号，上方是尺寸标注“Length built to order”，下方列出五项编号特点。

    标志性设计：随滚动自行绘出的立面图

  • 标题“A home for every way of living”下的三张卡片：Modern 系列是夕阳下石砌平台上白色墙板、深色框架的房屋，Classic 系列是群山下草地上一座带一扇门和两扇窗的白色房屋，Nature 系列是带木平台的玻璃墙房屋，每个名称上方都有一个小线稿。

    同一种构造，三种性格

  • 标题为“Which line suits you?”的对比表，列为 Modern、Classic、Nature 三个系列，行为风格、外观、门窗、屋顶和最适用途。

    五行对比，看懂三个系列

  • Modern 系列页面：深色面板上有面包屑导航、系列名称和简短介绍，一个红色的“Ask for a quote”按钮和一个描边的“Photos”按钮；旁边是一座停在工厂院子里的房屋，深色框架、白色墙板、卷帘窗，装在拖车底盘上。

    每个系列都有自己的页面，以影片开场

  • 标题“From first conversation to the keys”下，红色时间线上排着编号步骤——Your needs、Design & quote、Built in our factory；旁边是一段卡车拖着房屋的视频，说明文字指出这是交付现场的画面。

    五个步骤，一家制造商，没有中间商

  • 标题“Filter by line or stage”下有筛选按钮：全部、三个系列、室内、运输和图纸，下方是成品房屋的照片网格。

    真实成品与交付，按系列或阶段筛选

  • 工厂地址卡片（附导航链接）和公司 Instagram 账号卡片，下方是卫星地图，红色图钉标在普罗瓦塔斯主路旁的工厂上。

    没有表单：打电话、写邮件，或直接去工厂

  • 平板上的首页：夕阳下山坡上的石砌平台上，停着一座深色框架、带卷帘的移动房屋；标题和按钮依次排在下方，视频上有一个暂停按钮。

    首屏轮流播放三个系列，并带暂停按钮

  • 平板上的“White or wood-look”板块：一张白色房屋的照片，门旁有两扇带百叶的窗，装在拖车上；下方是白色墙板的小标题、简短说明和特点列表。

    Classic 系列的饰面，直接看实物

  • 平板上的“See the home before it is built”板块：一段短文和三个打勾要点，下方两张图——带凉棚的房屋立面图，以及标有尺寸的瓦屋顶 3D 研究图。

    动工之前，先看图纸和 3D

  • 标题为“Nearly half a century of making things”的时间线，红色年份从 1977 年一直到今天：创立、首次出口、两项奖项、ISO 9002、ISO 9001，以及 TrailerHome。

    近半个世纪的制造，串成一条线

  • 标题“The product”下的问答：前两条已展开，解释什么是 TrailerHome 移动房屋、三个系列有何不同；其余收起，显示加号；下方是标题“Permits & placement”。

    打电话之前，大家最常问的问题

  • 手机上的首页：夕阳下湖边一座木纹外观、红色坡屋顶的房屋，下方依次是标题、简介和红色的“See the models”按钮。

    同样的故事，为手机重新搭建

  • 手机上展开的菜单：当前页 Home 显示为红色，Models 下缩进列出三个系列，接着是 Custom builds、Uses、Projects、Company、FAQ 和 Contact，另有电话按钮、邮件按钮和希腊语版本链接。

    全屏菜单，电话号码始终触手可及

  • 手机上的“Drawn on paper. Built in Serres.”板块：立面线稿叠在成品照片上，配有说明文字，下方列出前几项特点。

    在手机上，线稿只播放一次，随后停留在照片上

  • 手机上的 Modern 系列卡片：夕阳下石砌平台上的房屋照片、一个小线稿、一句话介绍、三个特点标签，以及“Explore the line”链接。

    每个系列，一张卡片讲清楚

  • 手机上的“Holiday rentals & glamping”板块：湖边一座木纹外观、红色屋顶的房屋，标签“Tourism”，一段短文和打勾的用途列表。

    围绕用途来写，而不只是产品

  • 手机上的项目图库：标题“Filter by line or stage”，筛选按钮分三行排列，已选中“All”，下方是第一批房屋照片。

    七个筛选，单手拇指也够得着

  • 手机上的联系卡片：两个大字号的电话号码，邮箱地址及邀请发送地块草图和照片的说明，以及工厂地址卡片的开头。

    两个号码、一个邮箱，字大到一按就中