# 工业设备网站设计：场景与参数的两种尺度

原网页：https://www.jvds.cn/share/ui-design/viking-kran-equipment-catalog-u051
语言：zh-CN
发布：2026-10-14
作者：界达设计工作室（JVDS）

VIKING KRAN的工业设备网站设计，先用山谷与塔吊展现尺度，再用安静的灰白目录让型号和参数排在一起。场景负责让设备回到环境，目录负责逐项查找，两种观看方式衔接得很直接。

## 山谷的大尺度，让设备不只是一张产品图

塔吊伸向薄雾，山体与河道形成很深的纵向空间。服务标题位于左下，用大块白字压住较暗山体，顶部导航则落在明亮天空附近。文字位置顺着照片的明暗变化，没有把所有信息堆到同一区域。

红白标志在左上，右侧电话单独放在白色块里。品牌色很少，却因为面积克制而醒目。大型工业画面本来已有很多结构线，导航无需再增加复杂纹理。

几个白色加号分布在场景里，一张项目卡含照片、年份与箭头。它将全景和具体项目接在同一视野中，给欣赏画面的人一个继续了解的方向。设备入口也在顶部，已有型号需求的人不必只靠热点寻找。

界达设计更看重这种入口分工。主视觉可以有情绪和尺度，目录路径应保持直接；热点是否易点、能否用键盘操作，还需实际页面检查。

![山谷与塔吊首屏中的服务标题、导航和项目卡](https://www.jvds.cn/upload/2026/1008/d187-tp/u051-i1.webp)

首屏上方与中央｜设备入口独立于场景热点，项目卡承担补充说明。

## 目录减少颜色，让字段位置变得重要

机型目录左侧放品牌勾选和范围选择，右侧是三列设备卡。图片风格较统一，型号紧跟图后，参数又按固定行排列。相同字段在几张卡里位置相近，[横向比较](https://www.jvds.cn/share/website-design/b2b-product-comparison-page)时不用每次重新找名称。

卡片边角有折线变化，细边框延续工业感，却没有厚阴影。红色退回标志位置，主要内容用黑灰表达。这是从宣传画面转到选型资料的清楚节奏，规格不需要和大场景争夺视觉力度。

载重、幅度和高度等数字需要和单位、条件一起读。目录上的具体参数是样图内容，本文不作为设备选型依据；实际信息维护可先核对字段顺序与条件是否一致，避免不同工况的数字被误放在同一比较行。

标题旁单独出现28，却没有紧邻数量名词。若表示型号条目，可直接写出含义；若表示可租数量，则应有对应业务资料。大数字有强调作用，含义还要用文字补足。

![塔吊目录的品牌勾选、载重范围与三列型号参数](https://www.jvds.cn/upload/2026/1008/d187-tp/u051-i2.webp)

目录左侧与主体｜筛选条件靠近结果，卡片使用固定参数行。

## 项目档案与设备目录共享卡片框架

项目列表也采用三列照片卡，名称、地点与年份排在图后。卡片边角延续设备页的折线，浏览者可以认出同一套网站结构，内容类型又通过标题和字段分辨。

部分项目条目重复照片与名称，正式内容需要说明阶段差异或换成可辨认的项目。卡片数量的整齐不应依赖相同占位信息；少量真实项目也可以通过地点、时间和工作内容讲得具体。

联系页换成深色底，地图与文字并排，地址、电话和邮件分别成块。地图提供位置线索，文字方便核对渠道，红白标记继续维持识别。本文只讨论布局，不把图示联系资料录为正文外链。

![项目页卡片、联系地图及其他页面组合](https://www.jvds.cn/upload/2026/1008/d187-tp/u051-i3.webp)

项目页中部与联系页左侧｜项目时间地点用于说明经验，重复条目仍需有身份差异。

## 连错误页也保留了设备主题

组合图中的错误页用吊钩大图和红白斜纹延续品牌，旁边有返回方向。它没有把[错误状态](https://www.jvds.cn/share/website-design/404-error-page-design)留成一个与整站无关的默认页面，设备图像依旧承担识别。

工业服务网站可以借鉴这套方法：图像用于解释场景与身份，参数表用于比较，项目用于展示具体内容，联系页用于准备沟通。先把型号、地点和使用周期整理清楚，再安排询价入口，会比单独加大按钮更有帮助。

## 为设备与工业服务建立可查的目录

如果你的业务有复杂型号、项目档案和询价需求，可以先整理参数字段与联系时需要的信息。界达设计工作室（JVDS）提供UI/UX设计与网站设计、开发服务，协助规划工业产品目录和企业网站。

[联系界达设计，聊聊你的项目](https://www.jvds.cn/contact)