01
首页
HOME从场景进入。
通过应用场景认识品牌，找到所需产品。
- 应用场景
- 品牌介绍
- 品类入口
B2B WEBSITE / MATERIALS & ARCHITECTURESELECTED CASE — 01
AVID.
BRAND → PRODUCT → INQUIRY
从空间的想象，
到材料的选择。
建材品牌独立站 · 网站结构与视觉设计
探索项目 ↓01 / THE CONTEXT
让产品、品牌与询盘
在同一个界面相遇。
AVID 面向海外市场展示 WPC 木塑复合材料及相关建材产品。网站需要同时回答三个问题：产品是什么、供应商是谁，以及如何进一步沟通。
MY CONTRIBUTION从结构到视觉，
从结构到视觉，
参与完整呈现。
负责网站结构规划、页面排版、视觉方向与图片素材处理；与外部开发团队协作，网站技术实现由工程师完成。
01
网站结构
组织页面类型与内容关系。
02
页面排版
确定模块顺序、图文比例与阅读层级。
03
视觉方向
在空间场景与材料展示之间建立统一表达。
04
图片素材
处理并应用网站所需图片。
02 / INFORMATION ARCHITECTUREAVID — WEBSITE SYSTEM
以产品为中心的信息组织
围绕产品，组织每一次访问。
连接产品选型、企业资料与询盘入口，
让访问者逐步找到所需信息。
五个栏目 · 各司其职左右滑动查看全部栏目 ↔
02
产品
PRODUCTS让选择更具体。
从品类到型号与规格，逐步明确选型需求。
- 浏览品类
- 比较型号
- 确认规格
03
公司
COMPANY让信任有依据。
了解工厂、资质与服务，判断合作是否合适。
- 工厂介绍
- 资质证书
- 服务支持
04
新闻
NEWS持续看见品牌。
通过展会资讯与企业动态，了解品牌近况。
- 展会资讯
- 企业动态
05
联系
CONTACT把了解变成沟通。
找到联系方式，提交产品需求与合作咨询。
- 联系方式
- 询盘表单
典型访问路径
- 认识品牌
- 查看产品与规格
- 了解企业实力
- 发起询盘
五个栏目为平级入口。以上为典型访问路径，访客也可直接进入产品页，按需求查阅相关信息。
03 / VISUAL LANGUAGE
先看见空间，
再理解材料。
大幅场景建立第一印象，深色页面承接品牌叙事。应用场景、产品近景与材料色板，在不同层级传递信息。
SCENE / FORM / TEXTURE统一视觉语境，
统一视觉语境，
保留材料的差异。
01 / DARK02 / LIGHT03 / ACCENT
色彩关系依据原网站页面观感归纳，作为案例分析示意。
04 / PRODUCT DISCOVERY
从“需要什么”，
到“选择哪一款”。
目录、型号列表与产品详情，各自承担不同的信息任务。由场景感知转向参数比较，让选型信息逐步具体。
先找到产品类别
再比较型号与形态
相近的视角与浅色底，让材料颜色、纹理和截面差异成为比较的重点。
03 / SPECIFICATION让选型信息，
让选型信息，
靠近报价入口。
产品形态、颜色、尺寸与材料信息集中排列，与 Get Quote 入口形成清晰的阅读关系。
05 / COMPANY & INQUIRY
产品之外，
看见供应商。
企业介绍、工厂影像和证书资料补充品牌信息；联系页面将沟通渠道集中呈现。
A CLEAR NEXT STEP让下一步沟通，
让下一步沟通，
有明确入口。
联系方式、地图和表单分区组织，帮助访问者找到合适的沟通方式。
此处展示页面布局，不将未经验证的询盘或转化效果作为项目成果。
06 / COLLABORATION & REFLECTION
设计的落地，
也包含取舍。
项目中多位负责人参与评审，部分设计在反馈中被调整或舍弃。这段经历让我更关注如何建立共同的判断标准。
提前统一目标
先明确客户、核心信息与页面任务，再展开视觉。
集中整理反馈
把意见归入内容、结构和视觉，明确优先级。
明确评审节点
在框架、风格和关键页面阶段确认方向。
以上为项目复盘后的改进方向。案例依据已完成网站截图及提供的职责说明整理，网站开发由工程师完成。