一句话说清 HPE 卖什么
来到网站的人，要找的就是压缩空气或集尘系统。这两样要在开场画面写清楚。
Hydro Pneuma Engineering工业设备供应 · 公司网站
网站的最后一幕是公司的客货车。
这是 Hydro Pneuma Engineering Supply 的网站。这家公司设在槟城北海，供应压缩空气系统和集尘系统。页面从买家熟悉的厂房开始，最后来到 HPE 自己的客货车前，车身印着公司标志和办公室电话。
概要
Hydro Pneuma Engineering Supply Sdn Bhd（HPE）的总行设在槟城北海，巴生谷分行位于雪兰莪 Seri Kembangan，为马来西亚的工业界供应压缩空气系统和集尘系统。Potadot 为这家公司设计并开发网站。首页按工厂买家考虑事情的顺序安排：厂房、机器、经验、服务，再到机器背后的品牌。页面最后是一张 HPE 客货车的照片，车身印着公司标志、网址和办公室电话。
客户
北海这家供应商有两条产品线和两间分行。
HPE 自 1989 年起为工业界服务，业务分成两条产品线。压缩空气包括空气压缩机、干燥机、过滤器、制气设备和医用空气。集尘包括集尘系统、集尘滤芯和粉尘防爆安全系统。
首页在授权经销商的标题下列出四个品牌：Ingersoll Rand、Parker、Donaldson Torit 和 Trident。HPE 也提供上门咨询，以及售后维修和保养。
- 1989
- 年起服务工业界
- 300+
- 位满意客户
- 16+
- 个服务行业
- 2
- 间分行
客户所托
工厂买家最看重的是机器、品牌和售后。
没有人会一时兴起买空气压缩机。工程师或采购人员都会先比较几家供应商。网站要帮他们很快比较清楚，要打电话时也一下子找得到号码。
看上去要懂工厂
供应工业设备的公司，网站也要让人一看就觉得懂工厂。所以画面多放机器，用色鲜明，装饰尽量少。
让买家看到背后的品牌
买家早就认识这些品牌。这些标志放在页面上，比 HPE 自己写多少话都更让人放心。
让买家知道有人接电话
机器装好以后还要有人保养。电话、两个地址、办公时间和 WhatsApp 都要容易找到。
设计概念
从厂房开始，到客货车结束。
HPE 供应的机器，买回去要在工厂里一直运转，也要有团队上门照看。所以页面从买家每天工作的厂房开始，四周是管道和阀门，然后一步步走近 HPE：机器、经验、服务、品牌。最后一张照片是一辆白色客货车，车身印着 HPE 标志和电话号码。看到这里，买家眼中的 HPE 已经不只是屏幕上的一个名字。
浏览路线
-
1
厂房
标题旁边就是管道和阀门。
-
2
机器
蓝卡片讲压缩空气，灰卡片讲集尘。
-
3
经验
蓝色横幅上的 30+、300+ 和 16+。
-
4
服务
售后和上门服务排在最前面。
-
5
品牌
四个经销品牌的标志轮流滑过。
-
6
客货车
车身有标志和电话，旁边一个联络按钮。
灵感从何而来
公司标志
三个粗体蓝色字母。每一条横幅和每一块色块都用这种蓝色，页面和客货车看起来就是同一家公司。
厂房
管道、阀门和筒仓是工厂买家天天看到的东西。照片放在蓝色色块底下或旁边，买家看着熟悉，也认得出是 HPE 的页面。
客货车
一辆白色客货车，车身有 HPE 和 Ingersoll Rand 的标志，还有 www.hpe.my 和 04-3326987。买家看到这辆车，就知道 HPE 是一家实实在在的公司，所以这张照片留到最后。
设计风格
蓝色留给品牌，橙色留给重点。
颜色刻意用得少。蓝色代表品牌，橙色标出关键词，白色让产品文字读起来轻松。
色彩
- 白色
#FFFFFF文字章节 - HPE 蓝
#001CA8横幅、色块和标题 - 海军蓝
#000E54蓝色渐变的底部 - 浅灰
#E6E6E6集尘卡片和四张理由卡片 - 橙色
#FFAE3E关键词、相框和横线 - 黑色
#000000正文
开场标题里，只有 Compressed Air Solutions（压缩空气方案）和 Dust Collector Systems（集尘系统）是橙色。到了斜切横幅，Dust Collector System 和 Compressed Air System 又是橙色，访客滑到页面中段，再看一次 HPE 卖什么。
字体
Empowering Industries with Compressed Air Solutions
Lato · 开场标题30 YEARS IN INDUSTRIAL SERVICES
Roboto · 章节标题和数字Providing professional consultations, including on-site visits, to thoroughly understand your industrial requirements.
Lato · 正文斜切线
一条微微倾斜的直线。开场画面靠这条线分开蓝色色块和照片，页面中段的横幅靠这条线裁出形状，客货车的橙色相框也这样裁切。三处都朝同一边倾斜，方正的页面就多了方向感。
细节
每台机器都有一部分高出卡片，看起来有分量，不像贴上去的。一张卡片蓝色，一张灰色，两条产品线一眼就分得开。
节奏
- 开场
- 关于
- 专长
- 数字
- 理由
- 横幅
- 经销
- 联络
- 页脚
蓝色横幅和白色章节一路交替，产品文字就不会连成一大片。上面的色条就是真实首页，按比例绘制，每一段用的是那一段面积最大的颜色。
逐章导览
顺着这个页面从厂房一路看到客货车。
请您像采购人员一样，从厂房照片一路滑到客货车。每个框出的位置都是一项设计决定，旁边写明原因。
一句标题讲完两条产品线
标题放在蓝色色块上。只有 Compressed Air Solutions（压缩空气方案）和 Dust Collector Systems（集尘系统）是橙色，在白字之间特别显眼。
用意 买家一进来，就该知道 HPE 有没有卖他们需要的东西。
厚厚的橙色相框
一排机器的照片放在厚厚的橙色相框里，叠在蓝色色块上。
用意 相框跨过蓝色色块的边缘，把视线从深色的开场带到白底的章节。
每条产品线一张卡片
压缩空气用蓝色卡片，集尘用灰色卡片。每台机器都站在卡片上方，下面是标题和产品范围的简短说明。
用意 要找集尘器的人，可以直接看屏幕右半边，其余的先跳过。
蓝色横幅上的三个数字
行业经验的年数、满意客户和服务行业，各配一个白色图标和橙色数字：30+、300+ 和 16+。
用意 看完产品，买家接着想知道这家供应商做了多久。滑过这条横幅就有答案。
服务排在其他卖点之前
四张灰色卡片列出选择 HPE 的理由。第一张讲售后维修和保养，第二张讲咨询和上门服务。
用意 买下机器只是开始，保养才是厂长最操心的事。所以卡片从这件事讲起。
四个品牌轮流滑过
斜切横幅下方，经销品牌的标志横向滑过：Ingersoll Rand、Parker、Donaldson Torit 和 Trident。
用意 工程师早就认识这些名字。一个熟悉的标志，比一段自我介绍更让买家放心。
客货车留到最后
HPE 的客货车放在斜切的橙色相框里，车身印着公司标志、网址和办公室电话。旁边有一句话请访客向技术人员咨询，下面是一个 Contact Us（联络我们）按钮。
用意 前面几章都在介绍公司。这张照片让买家看到 HPE 自己的客货车和可以拨打的电话，又正好出现在买家决定联络的时候。
橙色的两条产品线
相框叠在蓝色色块上一蓝一灰两张卡片一眼读完售后排第一四个品牌轮流出现标志、电话、按钮
手机版
手机版的开场标题放在深色底板上。
从厂房到客货车的顺序不变。改变的是每一章在窄屏幕上的排法，页面也不必左右滑动。
- 开场标题移到深色底板上，叠在照片上也读得清楚
- 产品卡片排成一列，机器依然站在卡片上方
- 客货车保留斜切相框，Contact Us 按钮在下方
幕后功夫
外壳底下的功夫。
这些细节买家多半不会留意，但买家找到 HPE、很快联络上 HPE，靠的就是这些。
搜索用词选得准
网页标题以 “Air Compressor Supplier Penang, Malaysia”（大意：马来西亚槟城空气压缩机供应商）开头，网页说明也写明空气和集尘产品。
Google 读得懂
页面用搜索引擎读得懂的格式，说明公司、网站和页面路径。
WhatsApp 一路跟着
绿色按钮在滑动时一直留在屏幕角落，一按就打开聊天，第一句讯息已经写好。
按一下就能打电话
三个办公室号码都是电话链接，买家用手机按一下就能拨打。
两间分行都在页脚
北海和巴生谷放在一起，还有电话、传真、电邮和办公时间。
公司编号放在最上方
电脑版页首的标志旁边写着注册号码和公司编号，页脚也有，采购人员很容易核对。
- 1
了解您的业务
HPE 供应什么、经销哪些品牌，买家拿起电话之前要确认什么。
- 2
文案撰写
把种类繁多的产品整理成两条产品线，再写清楚经验、服务和经销品牌。
- 3
设计与开发
先定蓝色、橙色和斜切线，再从厂房到客货车逐章做好手机版和电脑版。
- 4
SEO 与上线
按买家常用的词设好网页标题、说明和 Google 所需的资料，然后上线，并提供后续支援。
常见问题
您可能想问。
您的客户也是工厂吗？欢迎 WhatsApp Ricky（+6011-1142 1029）详谈。
Potadot 为 Hydro Pneuma Engineering 做了什么？
我们构思概念、整理文案、设计页面并开发网站，也设好 SEO 和 WhatsApp 按钮。正式网站的页脚有我们的署名。
为什么首页要以一张客货车照片收尾？
工厂挑供应商，看的是售后有没有人来。这辆客货车把这件事说得最直接，公司标志和电话号码也正好在买家看到 Contact Us 按钮时出现。
为什么客户的网站要放其他公司的标志？
HPE 是授权经销商，这些品牌本来就是公司业务的一部分。买家信任某个品牌，自然会多看一眼经销这个品牌的供应商。
你们也能为我的公司做这样的网站吗？
可以。我们会先了解您供应什么、买家打电话之前要确认什么，网站的构思就从这里来，就像这辆客货车来自 HPE 自己的业务。把产品清单发给我们，再告诉我们谁向您订货，我们就说明会怎么做。
