项目概述

在 JY HEALTH 的 SHOPLINE 网站设计中，我们围绕保健品品牌的两项需求展开：让商品容易查找，也让品牌值得进一步了解。AIRSANG 将首页、商品列表、详情、品牌介绍与联系页面串联起来，用自然生活图像、浅紫点缀和清晰的文字层级，把浏览、比较与咨询安排在各自合适的位置。

设计挑战

保健品网站同时承载商品图、成分说明、品牌理念和购买操作，信息多，却不能让每一项都抢占视线。我们先划分页面职责：首页帮助选择方向，列表支持比较，详情集中核对，品牌页和联系页继续回答品牌是谁、如何沟通。视觉上再通过字体、色彩和间距维持一致，让读者切换页面时仍有熟悉的阅读节奏。

整体策略：把多页面组织成连续的选购路径

01 让不同页面回答不同问题

我们在首页先交代产品主题与需求分类，把商品比较留给列表，把成分和购买信息留给详情页。品牌与联系页面各自展开，避免把所有说明压进首页。用户可以从当前问题出发，继续找到下一步内容。

02 用字体与色彩形成统一的阅读层级

我们以 Jost 承担英文标题，以 Poppins 组织英文正文和数字；繁体中文沿用协调的系统字形。标题加大并提高字重，说明文字用较轻字重拉开层级。浅紫用于栏目提示与图标，米白用于主题背景，黑色保留给标题和操作重点，让自然摄影与商品包装更突出。

03 让留白与交互服务于内容

我们用较宽的模块上下间距分开主题，用规则网格组织并列信息；需要继续浏览的地方，再安排商品横向轮播、图册切换和数量加减。动效集中在用户操作后的反馈，让内容衔接自然，也让操作对象保持清楚。

首页首屏：把产品与主题放在第一眼

我们把 GLUCODROP 瓶身安排在右侧，以水果、叶片和浅色台面构成自然场景，左侧留给主题与产品名。上方浅紫公告条与白色导航分开，品牌、栏目和主视觉各占一层，进入页面后可以先认出产品，再选择浏览方向。

字体上，英文产品名采用 Jost，桌面端约 48px；上方中文主题约 40px，并提高字重。大字与较宽的空白共同建立重点，黑色文字在柔和背景上保持清晰。我们让摄影提供氛围，让文字承担信息，两者在首屏形成明确分工。

首页分类：用六张卡片组织需求入口

这张图中，我们以六列照片卡片呈现“熱門功效”，让不同需求拥有独立入口。栏目标题采用约 34px 的粗体；卡片标题与简短说明再逐级减小，形成栏目、分类、补充解释三个层次。

我们为这一模块预留约 72px 的上下内边距，卡片之间保持约 16px 间隔，让六组内容并排时仍有呼吸空间。下方四组线性图标继续补充品牌表达，从照片分类过渡到简短说明，阅读节奏也随之放缓。

首页精选：用平滑横移延展商品浏览

我们把“人氣精選”组织为白色圆角商品卡片：包装图占据主要面积，名称与紫色价格在下方依次排列。统一容器保留包装本身的颜色差异，用户横向浏览时，可以沿相同位置寻找名称与价格。

左右箭头承担继续浏览的功能，点击后商品轨道平滑横移，新的商品进入当前区域。我们把动效用于连接前后两组内容，让浏览位置的变化可感知；同时保留两侧留白与卡片间隔，避免一屏塞满商品。

商品列表：让筛选、排序与商品各有位置

我们用米白色横幅承接“All Products”标题与面包屑，再把下方主体拆成左侧筛选和右侧四列商品。宽幅标题区与商品网格之间保留明显空白，从页面定位过渡到商品选择，层次更清楚。

供货与价格筛选集中在左侧，排序放在商品区右上方；商品图下以粗体港币价格和黑色按钮形成操作重点。这里我们加强黑白对比，让浅色商品图、筛选文字与操作入口彼此区分，帮助用户按条件整理选择。

商品详情首屏：把图片与购买信息并置

Glucodrop 详情采用左图右文，我们给商品图较大的展示面积，右侧以约 50px 的 Jost 标题建立识别，再依次安排价格、数量、库存与加入购物车入口。两列之间留出空白，使包装中的图文与页面操作互不挤压。

数量选择采用加减控件，调整后数值即时变化；库存用绿色圆点作小范围提示。我们让加购入口横向铺开，以黑色细边框与白底区分操作区域，周围保留间距，用户可以在同一信息列中完成核对与数量选择。

商品详情下段：让图册与长说明互相补充

这张图展示了商品图下方的三张缩略图，以及右侧继续展开的成分、条目说明、使用方式和到期信息。我们将缩略图紧接主图排列，选中项以边框区分；点击另一张后可以切换商品画面，在当前页面继续查看不同说明图。

右侧采用黑字白底，把长内容拆成小标题、条目和短段落，并在不同信息组之间增加留白。页面下方再用居中的“YOU MAY ALSO LIKE”开启相关推荐，字号明显放大，让单品说明与继续选购形成新的段落边界。

品牌介绍首屏：用自然光线建立品牌语气

我们在品牌页采用植物、窗边光线与柔和的自然色，让视觉从商品选择转向品牌表达。主题文字拥有独立阅读区域，后续生活照片与理念内容继续展开，比首页首屏保留更多叙述空间。

版式沿用黑色标题、浅色背景与清晰的无衬线层级，避免品牌页突然切换成另一套视觉语言。我们用较宽的模块间距控制节奏，让读者先读主题，再进入图文内容；自然图像中的绿色与米色，也与商品页面形成呼应。

品牌价值：把四个关键词落实到图文卡片

我们把“品質感、安心感、清晰感、陪伴感”拆成四张并列卡片，分别搭配产品、人物与日常活动照片。统一的圆角图片、左对齐标题与短说明，让每个价值词都有对应画面，读者可以逐项浏览。

主标题居中放大，紫色英文副标题提供轻量提示；卡片之间保持均匀间隔，模块下方再留出较宽空白，衔接“我們對健康的看法”。我们用标题尺度与留白区分价值概览和后续理念，让两组内容相连又各有重点。

联系页面：用分栏与留白梳理沟通入口

我们把电话、地理位置和邮件分成三列，用浅紫图标与细竖线区隔。标题加粗，联系方式采用较轻字重；中间较长的中英文地址独立成段，避免与两侧信息混排。

下方表单采用姓名与邮件并排、电话与留言单独占行的结构，细灰边框让输入范围清楚可见。我们在联系方式与表单之间预留较宽间距，把直接联系和整理问题分为两步，让页面保留简洁的阅读顺序。

手机首页：把有限宽度留给主题与商品

我们在手机端收起横向导航，以菜单图标、居中的品牌标识和右侧账户、购物袋入口组成顶部。首屏将主题与商品按窄屏比例重新组织，保留产品识别，也为文字留出独立空间。

小屏布局沿用浅紫公告条和自然图像，标题与说明通过字号、字重保持差异。我们压缩导航占用，把可用宽度优先留给内容，后续分类沿纵向继续展开，让读者顺着主题进入需求选择。

手机详情：先看商品，再核对信息

我们把桌面的左右结构调整为上下阅读：商品图先展示，图册页数与切换入口靠近图片，随后接上名称、价格、数量与库存。图像浏览与购买信息分段出现，减少在窄屏中同时处理多列内容的负担。

字体与黑白操作语言保持一致，商品名、价格和字段标签各有层级。我们在图册与文字之间留出间隔，让用户看完商品后自然进入下一组信息；数量加减等控件继续贴近对应字段，保持操作对象清楚。

设计总结：让品牌表达与商品选择相互衔接

在这个项目中，我们用统一的字体层级、浅紫与米白配色、自然摄影和规则留白，连接了商品页面与品牌页面。每个页面围绕具体任务展开：首页指引方向，列表帮助比较，详情承接核对，品牌与联系页面继续补充认知和沟通方式。

我们也把交互放在需要继续浏览和调整选择的位置：精选商品通过平滑横移延展内容，详情图册支持多图切换，数量控件提供即时反馈。视觉与功能围绕同一条浏览路径组织，让品牌表达和商品选择衔接得更自然。

为您的品牌规划清晰的SHOPLINE网站

您可以向我们提供现有网址、产品目录、品牌素材和需要的页面范围，沟通适合自身商品与市场的内容结构、网站视觉及实施需求。