案例 06 · Epitagen
把科学背景和科研产品浏览连在一起。

01 项目概况
内容边界清晰的科研类网站。
Epitagen 把科学科普和科研产品目录结合在一起。网站既要支持浏览,也要传达“仅供科研使用”的前提,并让产品信息保持有序。
- 业务背景
- 科研多肽供应商,网站包含科学内容和产品目录。
- 核心内容
- 科学介绍、产品目录、产品详情和科研用途声明。
- 主要受众
- 正在评估现有产品的合格科研及专业访客。
02 挑战
产品浏览需要科学背景,也需要清楚的访问提示。
只有产品目录,会丢掉重要的背景信息。只有科学内容,产品又很难被找到。这个项目需要理清科普内容、产品分类和单个科研产品之间的关系。
03 目标
有信息量,有结构,每一步都有明确意图。
- 在访客进入目录之前,先说明相关的科学领域。
- 为产品信息建立可重复的结构。
- 在合适的位置持续显示科研用途说明。
- 既支持整体浏览目录,也支持直接访问单个产品。
- 在不同类型的内容上,保持一致的移动端体验。
04 策略与结构
三层结构:背景、目录、产品详情。
科学板块交代背景和用途,产品目录承担整体浏览,单个产品页用统一格式组织具体信息。三层分开,避免每个页面都试图讲完整个故事。
05 视觉方向
界面精确,科研品牌形象鲜明。
视觉系统使用有节制的对比度、统一的标签和以产品为中心的版式。年龄与科研用途确认被当作体验中的一个功能环节来设计,而不是一层装饰性的遮罩。
06 开发与技术
用内容模板,让不断增长的目录保持一致。
可复用的 WordPress 模板支持科学内容、目录浏览和产品页面。响应式实现让声明、产品信息和导航在不同屏幕尺寸下都清楚易懂。
07 结果
从科研背景到产品信息,路径更连贯。
网站把科学说明和产品浏览放进同一个有结构的系统。访客可以先了解背景,再浏览目录、查看单个产品,整个过程都保持在网站的科研用途框架之内。
08 页面截图
网站中的关键页面。




线上网站在交付后可能有变化,截图反映的是上线或记录时的状态。