BIOLAND 爱奥乐官网 UI/UX Design System 升级 Medical Technology Website · UI/UX & Design System
面向全球市场的医疗检测设备与 Connected Health 官网升级。以已验证的品牌与产品内容为基础，重构中英文信息架构、产品中心和系统能力表达，并建立跨桌面与移动端一致的界面体系。
概览 · Overview
项目围绕 BIOLAND 爱奥乐医疗集团官网升级展开。我负责定义核心页面的视觉与体验方向，梳理信息层级、页面布局与组件样式，覆盖首页、产品中心、Connected Health 及多端适配；同时通过统一的导航、栅格、卡片、按钮与内容模块，使中英文站点保持一致的品牌和交互逻辑。
项目背景 · Background
从产品陈列网站，升级为完整的医疗科技品牌体验
升级前的中文与英文站点分别形成了不同的视觉语言和内容组织方式：首页以传统轮播、产品陈列和企业介绍为主，产品信息密集，但品牌定位、Connected Health 能力与全球服务价值缺少统一叙事。项目需要在保留真实品牌与产品资料的前提下，让用户更快理解产品体系、专业能力与业务范围。
核心目标
不是简单替换视觉皮肤，而是建立一套可持续扩展的医疗科技官网系统：品牌可信、产品好找、能力讲清、双语一致、移动端可用。
我的角色 · Role & Scope
从体验方向到核心页面与组件规范
负责项目目标与页面体验方向、核心页面视觉设计、信息层级与布局、组件样式、响应式规则及跨页面一致性验收。
围绕医疗检测设备、POCT 与 Connected Health 建立统一叙事，明确首页信息优先级和用户浏览路径。
以克制留白、清晰排版和可信的医疗科技气质，完成首页、产品中心与连接健康页面的核心视觉。
重组品牌、产品、研发制造、全球服务、新闻与联系内容，使长页面仍保持明确的阅读节奏。
通过产品分类、筛选标签、卡片层级与详情入口，提升大量产品的浏览效率与可比较性。
统一字体、间距、圆角、按钮、卡片、栅格、标签和页头页脚规则，支撑多页面持续扩展。
定义桌面与移动端的重排逻辑、触控尺寸与长页节奏，并检查核心页面的视觉与交互一致性。
设计重点 · Design Focus
把品牌、产品与系统能力组织为同一套界面语言
升级前状态 · Before
两套站点内容，缺少统一的品牌与页面系统
保留真实品牌事实与产品内容，但不延续原页面的视觉结构。升级重点是把中文站与英文站分散的内容表达，收拢为统一的多语言网站体验。点击任意页面可查看完整长页。
最终页面 · Final Screens
从品牌首页到产品中心与 Connected Health
首页建立品牌与产品叙事，产品中心承载多品类检索与浏览，Connected Health 页面解释设备、连接与系统能力。所有页面沿用同一套栅格、排版、卡片和 CTA 规则。点击任意页面可在灯箱中滚动查看完整长页。
响应式体验 · Responsive
长页面在移动端保持清晰的浏览顺序
移动端将桌面多列内容重排为单列，保留产品卡片、能力模块、新闻与联系入口的层级关系，并控制标题尺度、卡片间距和触控区域，避免信息密集页面在小屏上失去节奏。
系统化交付 · Deliverables
一套可持续扩展的医疗科技官网 Design System
最终交付不止于单个页面，而是形成可持续新增产品、内容与语言的统一界面系统：
- 首页 UI/UX
- Product Center
- Connected Health
- 中英文导航与页面映射
- 产品分类与筛选标签
- 产品卡片与内容模块
- 字体与间距规则
- 栅格与响应式规则
- 按钮、CTA 与语言切换
- 页头页脚组件
- 核心页面视觉 QA
项目价值：将品牌介绍、产品体系、研发制造、连接健康与全球服务组织为一套连贯的网站体验，在不依赖虚构数据的前提下，清晰呈现 BIOLAND 的医疗科技品牌与业务能力。
设计资产双语信息架构、产品中心组件、Connected Health 表达框架与响应式页面规范，可支持站点后续内容扩展与一致性维护。