很多人对交互设计的印象停留在 "画原型" 上，但实际上，从拿到需求到产品上线，交互设计要经历一套完整的流程。兰亭妙微在多年的项目实践中，把交互设计的工作梳理为四个阶段：分析阶段、设计阶段、配合阶段、验证阶段。今天我们把每个阶段的具体工作内容详细拆解一遍。

兰亭妙微ui设计公司分享：现如今，网页在电脑、平板、手机多端适配，是设计师经常会遇到的难题，本篇文章带你搞懂响应式布局的底层原理与实操设计方法，全文分为三大部分：什么是响应式页面、响应式布局核心规则、响应式完整设计流程。

一、什么是响应式页面

早期网站只为电脑大屏开发，在手机打开只能看到被整体缩小的网页。曾经也有专门面向手机的 WAP 站点，但页面简陋，体验很差，无法满足用户需求。

随着智能手机、移动网络与 HTML5 技术普及，移动端访问网页的用户暴涨。响应式布局就此诞生：依靠同一套前端代码，自动适配电脑、平板、手机等不同尺寸设备的显示效果，Nike 官网就是典型的响应式案例，多端内容同源，布局随屏幕自动变化。

原生手写完整响应式逻辑复杂度很高，所以市面上绝大多数响应式网站，都会借助开源前端框架实现，其中Bootstrap是应用最广泛的工具。设计师做项目时，如果开发选用这类框架，设计稿就要遵循框架的约束来输出，不能随心所欲设计页面样式。

注意区分：响应式 vs 自适应

• 响应式：一套代码适配全部设备，各端展示内容大体一致，适合官网、展示类页面。
• 自适应：为不同设备分别开发独立代码，移动端可以大量删减、替换内容，适合各端业务差异巨大的产品，例如爱奇艺网页版，手机端和电脑端内容结构差别很大。

二者没有优劣，只看项目业务需求选择。

二、响应式布局两大核心规则

响应式的核心判断依据是浏览器窗口宽度，而非设备本身。我们直接缩放浏览器窗口，就能看到页面排版发生变化，这就是响应式的直观体现，星巴克官网就是很好的示例。

1. 分段响应规则（断点 Breakpoint）

我们设置若干个临界宽度数值（断点），把屏幕划分为多个宽度区间，每一个区间对应一套专属页面样式。 常用区间划分参考：

• 320‑800px：手机移动端
• 800‑1200px：平板、小型上网本
• 1200px 以上：电脑显示器

当窗口跨越断点，页面组件一般会发生三类变化：

1. 内容增减：部分模块在小屏隐藏、大屏显示，减少移动端信息过载。

   

2. 布局调整：改变模块排列方式，比如多列排版变成单列。

   

3. 样式变更：组件样式完全改写，最常见的就是导航栏，大屏是顶部导航，移动端转为底部 Tab 菜单或者折叠汉堡菜单。

   

不同组件可以独立选择变化类型，不需要全部组件统一改动。

2. 组件宽度适应

分段断点是大的排版切换逻辑；在同一个断点区间内部缩放浏览器，组件也要跟随窗口平滑改变大小，就是组件宽度适应，也是手机多尺寸屏幕适配的底层逻辑，分为两种模式：

1. 容器宽度适应：容器跟随父级窗口拉伸，内部元素保持相对位置。

   

2. 容器比例缩放：容器整体等比例放大缩小。

   

常见错误：容器拉伸，但内部元素不会自动跟着合理变化，出现布局错乱。 正确做法：定义内部子元素相对于父容器的适配规则，例如固定边距、对齐方式、固定尺寸等。Figma、Sketch、XD 软件里的「响应式约束」功能，就是用来模拟这个效果，提前在设计稿里验证适配表现。

小结：响应式页面 = 断点分段切换样式 + 区间内组件跟随窗口自适应。

三、响应式完整设计流程

响应式是面向开发的设计，不能只凭设计师主观想法，必须和前端开发协同工作。

1. 前期沟通：和前端确认需要适配多少个宽度区间，以及每个断点的像素数值。
2. 输出多套设计稿：每一个断点区间，都要输出完整设计稿，不能只靠口头描述，交给开发自由发挥。

3. 定义组件适配规则：明确每个区间内组件的宽度适应约束。规则简单可以口头沟通；规则复杂，则写在设计标注里。
4. 切图导出：完成切图，响应式项目的背景图切图逻辑会和普通页面不一样，建议交给前端复核资源。

全程遇到疑问，及时和前端对齐，避免设计稿无法落地。

写在最后

响应式不是万能方案，不要所有项目都盲目套用。 框架会带来很多限制，复杂炫酷的视觉效果很难实现，页面往往偏简约，高度依赖图片质量。 如果项目业务复杂、视觉表现要求高，可以选择固定内容宽度的网页方案，不一定非要做响应式布局。

转载：优设

兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。

兰亭妙微ui设计公司分享：作为交互设计师，我既有国内零售电商项目经验，也参与过跨境出海产品设计。当服务对象从国内用户切换到欧美海外用户时，我曾直接沿用国内成熟的设计范式，结果产品体验屡屡踩坑。

中西方电商网站的交互、界面存在大量显而易见的差异，而表象背后，是用户习惯、语言逻辑、文化思维的深层区别。下文将从三个典型差异点展开剖析，希望给跨境电商、国际化产品设计带来参考与启发。

一、页面跳转逻辑：新标签页打开 VS 当前页面跳转

核心差异

国内电商：点击商品、商品详情页，普遍默认开启新标签页加载页面；国内主流浏览器（QQ 浏览器、360、搜狗等）也默认新标签打开链接。 西方电商：点击链接优先在当前页面内跳转，不额外生成标签页。

典型案例：亚马逊中国站适配本土习惯，商品详情改为新标签打开；而美国原版站点，依旧保持当前页跳转的交互逻辑。

两种模式优劣

• 新标签页打开：优势是用户不会彻底退出网站，便于多商品并行对比浏览；弊端是标签页越开越多，用户容易在大量页面中迷失路径。
• 当前页面跳转：优势是浏览链路连贯，用户操作路径清晰，注意力集中；短板在于，一旦网络加载卡顿，后退操作失效，很容易直接跳出整个业务流程。

差异溯源

操作习惯的区别，根源不只是头部产品的示范效应，还关联思维模式的不同。 国内用户习惯关闭标签页返回上一步，西方用户更频繁使用浏览器 “后退” 按钮。哲学家张东荪提出，语言结构塑造思维逻辑： 英语属于拼写语言，对应同一律名学，思维讲究二分法，分类边界清晰完整，希望保持单一、不被打断的主线流程； 汉语属于象形语言，对应相关律名学，更看重事物之间的关联关系，接受在主流程上衍生多条并行的相关浏览分支，新标签页恰好契合这种思维习惯。

二、购物车定位：混合收纳 VS 纯粹待结算容器

核心差异

国内购物车：定位模糊，是「购物车 + 收藏夹」的混合载体。购物车内商品不必全部结算，用户可以勾选其中一部分下单，其余商品继续留存在购物车内，后续再处理。

西方购物车：定义边界清晰，购物车内全部为待结算商品。如果暂时不想购买，商品不能留在购物车，需要移除，或者移入专门的收藏 / 愿望清单（Save for later），购物车只存放准备付款的货品。

西方文化思维习惯清晰的二分界定：是什么、不是什么划分明确，所以购物车的功能职责不会和收藏功能混淆。

三、筛选导航布局：顶部横向筛选 VS 侧边竖向筛选

核心差异

国内电商（淘宝、京东、唯品会等），商品筛选组件大多放在页面顶部，采用上下式布局； 西方主流电商（亚马逊、Ebay、Macys），筛选栏普遍放在页面左侧，采用左右分栏布局，该模式在海外是主流（近年有少量产品尝试顶部筛选，但属于少数）。

很多国内用户初次使用海外电商，会很不适应左侧筛选，本质是长期使用习惯带来的认知差异。

差异溯源

该布局很大程度受文字本身特性约束：英文单词长短差异极大，如果做顶部横向排布，极易出现文字挤压、换行错乱，排版很难规整。 而竖向侧边布局，更适配英文，字母拥有固定排序，纵向陈列时整体整齐有序，用户查找筛选项效率更高。不止搜索结果页，海外电商的结算、购物车、商品详情，也大量沿用左右分栏的布局范式。

延伸：其他细节设计差异

除了上面三个典型交互差异，还有很多细节区别：

1. 优惠形式：国内大量使用优惠券；海外更常用 Promo Code（兑换码）；
2. 折扣展示：国内习惯把折扣大字印刷在商品主图上；海外折扣信息多放在图片外部的文字区域，不会直接叠加在商品图上。

写在最后

中西方电商的设计差异，是多重因素共同作用的结果：既有语言特性、文化思维的底层影响，也有头部平台建立行业范式、用户长期使用习惯的助推。

做国际化设计，不能只简单复刻表面 UI，更要读懂差异背后的底层逻辑。不能直接把国内方案照搬出海，也不要盲目照搬海外设计套给国内用户；尊重目标用户的认知与行为习惯，同时敢于跳出固有经验，才能产出真正适配用户的产品体验。

转载：优设

兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。

导读

从个性化推荐、智能搜索到订单追踪，构建完整的电商购物行为闭环。本文不止评价画面风格，而是从产品目标、信息组织、行为路径、视觉语义和落地风险五个层面拆解这套方案。

一、产品定位：先回答系统替谁解决什么问题

Banggood并没有把自己限制为一款简单的商品目录或比价工具，而是试图建立覆盖发现、比较、购买、追踪的全链路个人购物操作系统。移动端承担高频浏览与即时购买，AI则被安排在个性化推荐、智能搜索与购物决策辅助等关键决策点。

桌面端展示设计总览与品牌视觉规范，移动端承接高频执行——从首页商品发现到下单支付，AI被安排在智能推荐、搜索联想与订单状态预测等关键节点，形成从"看见"到"买到"的完整闭环。

【配图1：UI Showcase设计总览——品牌视觉规范与界面架构概览】

二、信息架构：把功能转译为用户的工作顺序

信息架构围绕"我想买什么—正在看得怎样—下一步如何下单"展开。首页以热门趋势、分类导航、个性化推荐为优先层级；搜索、分类浏览和商品详情被组织为可进入的任务模块；订单与账户数据则沉淀到个人中心。这样的分层既照顾即时购物需求，也保留用户对物流追踪和售后管理的需求。

【配图2：移动端首页——商品发现与个性化推荐】

【配图3：多场景界面流程——从注册引导到购物全链路】

三、关键交互：从浏览信息走向完成任务

交互亮点是把复杂的购物流程转译为可执行反馈。商品卡片、评分星级、价格对比和一键加购不是装饰，而是把商品价值、用户评价和购买动作直接显性化。智能搜索将关键词识别与分类筛选连接，购物车采用增减数量和实时价格更新，减少用户在购物过程中的额外操作步骤。

心愿单功能让用户可以跨会话保存感兴趣的商品，订单追踪模块则将物流状态以时间轴形式可视化，使用户随时掌握配送进度。这些设计共同降低了购物决策的认知负荷，让"加入购物车"到"确认下单"的路径尽可能短。

四、视觉系统：品牌表达必须承担信息语义

活力橙色作为核心操作色，在大面积白灰背景中保持清晰焦点；商品图片与卡片圆角设计让购物界面不至于显得冰冷，同时保持跨页面视觉一致。星级评分、价格标签和促销标识形成具有语义的视觉层级，引导用户快速决策。

卡片圆角、柔和阴影和商品抠图让电商数据不至于显得枯燥，同时保持跨模块视觉一致。顶部导航栏、底部导航栏和弹窗组件采用统一的圆角半径与阴影深度，形成可识别的品牌视觉语言。

【配图4：个人中心与账户管理——用户资产管理】

五、面向产品与设计团队的可复用价值

对产品经理而言，最值得借鉴的是跨场景闭环：商品浏览并非终点，而是必须进入搜索筛选、加入购物车、下单支付和物流追踪。对设计团队而言，要重点维护商品信息、价格变化和订单状态之间的可追溯关系，使用户清楚每个操作的结果和下一步。

Banggood的设计方案展示了如何将"发现—比较—购买—追踪"的电商全链路压缩到一个连贯的移动体验中。其可复用价值在于：用统一的卡片语言承载不同业务场景（商品列表、心愿单、购物车），用一致的交互模式（加购、收藏、追踪）降低学习成本。

【配图5：订单追踪与物流可视化——购后体验闭环】 

六、专业审视：仍需补齐的体验边界

现有方案的主要风险是功能密度较高，商品卡片在列表页容易出现视觉竞争。建议强化"当前操作目标"，将次要信息折叠为按需展开；订单追踪应增加实时位置更新和异常预警；社交分享与评价模块也应允许用户控制个人购物数据的可见范围。

此外，深色模式适配、无障碍设计（如色盲友好的评分展示）和弱网环境下的降级策略也是值得关注的体验边界。AI推荐的可解释性——即告诉用户"为什么给你推荐这个商品"——同样能显著提升信任感。

结语：设计的最终判断标准是业务与使用价值

Banggood展示了电商应用从工具走向陪伴式购物系统的路径：以推荐建立发现，以搜索形成意图，以追踪维持信任。真正决定产品可信度的，不是展示了多少商品，而是每条商品信息是否透明、购买流程是否顺畅、每次交付是否可被用户追踪。

当购物不再是一次性的交易行为，而是一段持续的用户关系时，设计的价值才真正开始显现。Banggood的方案为同类电商产品提供了一个可参考的框架：用数据驱动个性化，用交互降低决策成本，用视觉建立品牌信任。

兰亭妙微作为作为专业的用户体验公司，我们始终坚持：好的界面设计公司不仅要交付好看的画面，更要交付可执行、可追溯、可修正的产品体验。无论是UI咨询还是完整的UI设计公司项目交付，核心始终不变——让技术真正服务于人的需求。

兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。

交互设计到底要做到什么程度才算好？兰亭妙微在团队内部经常讨论这个问题。偶然看到一张思维导图，把软件交互设计分成了五个层次，结合我们的项目经验，发现这个分层模型非常实用 —— 它不仅是一套评价标准，更是一条设计师的成长路径。

很多交互设计师拿到需求就开始画原型、抠细节：这个地方用复选框还是单选框？点按钮后菜单从顶部弹还是底部弹？流程能不能少一步？这些工作当然重要，但兰亭妙微在项目中反复强调：如果方向错了，细节做得再精致也没有意义。

做设计久了，我们越来越意识到一个事实：用户选择一个产品，很多时候不是因为它功能最强，而是因为它 "让人舒服"。这种舒服，来自情感化设计。兰亭妙微团队最近重读了《怦然心动 —— 情感化交互设计指南》，把书中的核心观点结合我们的项目经验做了一次梳理。

任何一款 APP 都少不了提示。当系统需要告知用户某些特殊消息时，弹框就出场了。但提示是一把双刃剑 —— 用得好，用户觉得贴心；用不好，用户在连续操作中突然被打断，体验瞬间崩塌。兰亭妙微在项目中整理了一套完整的提示体系，今天分享给大家。

导读｜从AI植物扫描、智能分析到养护教程，构建连续的植物健康照护闭环。本文不止评价画面风格，而是从产品目标、信息组织、行为路径、视觉语义和落地风险五个层面拆解这套方案。

一、产品定位：先回答系统替谁解决什么问题

Zolve并没有把自己限制为一款简单的植物识别工具，而是试图建立覆盖扫描诊断、数据分析、养护指导与成长追踪的个人植物健康操作系统。移动端承担高频执行，AI则被安排在植物识别、健康诊断和养护建议等关键决策点。

从Scangrow品牌标识到zolve应用本体，产品通过"扫描—分析—建议"的核心链路，将植物养护从经验驱动转变为数据驱动。桌面端承担全局洞察与长期趋势，移动端承接高频执行，AI则被安排在计划生成、动作反馈和植物变化解释等关键决策点。

图1：Zolve AI植物扫描诊断界面——核心扫描能力展示

二、信息架构：把功能转译为用户的工作顺序

信息架构围绕"我的植物怎么了—正在做得怎样—下一步如何调整"展开。首页以当日植物扫描入口、实时健康指标为优先层级；养护教程、智能语音分析和成长记录被组织为可进入的任务模块；长期数据则沉淀到生长看板。这样的分层既照顾即时行动，也保留专业用户对趋势和细节的需求。

着陆页以"Plant Scan"为核心入口，将Growth Rate、Leaf Hydration、Soil Moisture等关键指标前置展示，配合"Get Free Trial"和"Download App"的行动号召，形成清晰的信息优先级。72K用户数据的社会证明进一步强化了产品可信度。

图2：Zolve产品着陆页——信息层级与核心入口

三、关键交互：从浏览信息走向完成任务

交互亮点是把复杂植物数据转译为可执行反馈。植物健康指标卡片（Water Level、Humidity、Light、Fertilization）、智能分析语音播报、生长趋势图表和近期更新记录不是装饰，而是把植物状态、偏差和建议直接显性化。

植物扫描将摄像头识别与健康指标连接，Smart Analysis功能采用语音播报形式提供养护要点，减少用户在植物养护方面的额外学习负担。Plant Care Tutorial由专家指导，形成从诊断到执行的完整闭环。

图3：Spathiphyllum植物分析仪表盘——交互式数据面板

图4：植物养护教程详情——专家指导与实时指标

四、视觉系统：品牌表达必须承担信息语义

浅色背景建立清新、自然与专业感，绿色作为核心操作色，在大面积白灰中保持清晰焦点；橙色仅用于湿度偏低、光照过强等需关注指标，形成具有语义的第二强调色。

卡片圆角、柔和阴影和植物摄影让医疗级数据不至于显得冰冷，同时保持跨设备视觉一致。Smart Analysis的音频播放器控件、Growth Month的趋势折线图和Recent Updates的时间线列表，共同构建了一套既专业又亲和的视觉语言。

图5：植物健康详情面板——视觉设计与数据可视化

五、面向产品与设计团队的可复用价值

对产品经理而言，最值得借鉴的是跨场景闭环：数据采集并非终点，而是必须进入诊断生成、养护执行、反馈解释和再次调整。Zolve将植物扫描、健康指标监测、专家教程和成长追踪串联为完整闭环，每个环节的数据都服务于下一个决策点。

对设计团队而言，要重点维护指标口径、植物状态和AI建议之间的可追溯关系，使用户知道系统为何给出某项养护建议，而非只展示漂亮的植物健康分数。Recent Updates时间线设计值得借鉴——它将每一次养护操作（Growth、Watering、Light）都记录在案，形成可回溯的植物照护日志。

跨行业经验复用：本项目的UI 交互设计方法论并非孤立存在。我们作为一站式 UI设计服务公司，同时也是专业的软件界面设计公司，在银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计等多个垂直领域积累了深厚的经验。作为 UI交互设计公司，我们深知不同行业对界面交互的特殊要求；作为数据可视化设计公司的复杂仪表盘方案，以及高端网站设计公司的品牌级视觉呈现，这套"以用户任务为中心"的信息架构逻辑均可复用。同时，我们在软件qt开发、软件wpf开发、软件vue开发等技术栈上均有成熟落地能力，确保设计稿能够被高保真还原。

六、专业审视：仍需补齐的体验边界

现有方案的主要风险是功能密度较高，卡片在小屏上容易出现同权竞争。建议强化"今日唯一主任务"，将次要指标折叠为按需展开；AI植物诊断应增加置信度与非诊断性提示，避免用户将AI建议当作绝对权威；社交模块也应允许用户控制植物数据的可见范围。

此外，Plant Care Tutorial的专家内容生产机制需要持续投入，若更新频率不足容易形成内容空心化。Smart Analysis的语音播报在嘈杂环境下可用性有限，应考虑提供文字摘要作为备选。

结语：设计的最终判断标准是业务与使用价值

Zolve展示了AI植物护理产品从工具走向陪伴式系统的路径：以扫描建立理解，以分析形成认知，以即时反馈维持养护行动。真正决定产品可信度的，不是模型生成了多少建议，而是每条建议是否透明、可执行、可被用户修正。

从Scangrow的扫描入口到zolve的完整养护闭环，这套设计方案展示了AI原生产品设计的成熟思路——让技术隐形，让体验显性，让每一株植物都能获得科学、及时、可追溯的照护。

兰亭妙微作为作为专业的用户体验公司，我们始终坚持：好的界面设计公司不仅要交付好看的画面，更要交付可执行、可追溯、可修正的产品体验。无论是UI咨询还是完整的UI设计公司项目交付，核心始终不变——让技术真正服务于人的需求。

兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。

写在前面

兰亭妙微ui设计公司分享：一套完整的 Web 设计语言库，由设计价值观、设计法则、布局、视觉、数据可视化、动效六大模块共同搭建。本文聚焦布局模块（后续将覆盖视觉、数据可视化）展开完整解读优设网。

本文参考 Ant Design、Element Design、Google Design 等成熟业界设计体系，结合多类已上线 Web 产品实践沉淀而成，涵盖展示官网、交易商城、后台管理系统、组件工具平台等不同业务场景。 内容基于 2020‑2021 年项目 1.0 版本总结，互联网产品迭代速度快，部分内容仍有待实践验证与迭代更新，欢迎大家交流指正。

Web 布局体系将从四大维度展开：框架布局、页面层级、栅格系统、Web 页面适配。

提示：全文篇幅较长，建议收藏阅读。各章节知识点关联性较强，合并成文更利于建立完整认知。版权归原出处所有。

一、框架布局

框架布局是 Web 页面的骨架基底。只有确定整体页面框架，才可以在此基础上搭建统一视觉样式、定义功能操作、完善交互流程。本章节包含设计原则、基础布局、扩展布局、懒加载四部分。

1. 设计原则

1. 一致性：保证全产品布局结构与视觉表现统一，降低用户认知成本，提升使用舒适度。
2. 逻辑性：页面模块划分、信息排布具备清晰逻辑，模块之间结构关系通顺。
3. 可扩展性：无论业务简单或复杂，布局框架可跟随需求迭代做结构延展，支持功能扩容。
4. 可预测性：选用用户熟悉、可识别的布局范式，贯穿产品全使用场景，合理引导用户行为。

2. 基础布局

基础布局包含上下布局、左右布局、T 型布局，结构简单，是 Web 产品中最高频使用的框架模式。

1. 上下布局 页面上半部分为导航区，下半部分承载主内容。导航栏宽度会限制导航条目数量与文字长度；适合导航条目较少、页面内容篇幅较长的产品，是应用范围最广的布局形式。
2. 左右布局 页面左侧放置全局导航，右侧为内容区。导航常驻可视区域，便于多页面快速切换；适合整体业务结构简单的网站。
3. T 型布局 多用于资讯、社交文章类产品。顶部设置全局导航承接全部一级入口；内容区域继续二次切分，一边为侧边菜单栏，另一边为主内容，侧边栏可置于左侧或右侧。

3. 扩展布局

扩展布局是基础布局的进阶变体，包含C 型布局、口型布局，适合承载大量信息、业务模块复杂的系统。

1. C 型布局：T 型布局的延伸，同时融合水平顶部导航与垂直侧边导航，清晰区分高频业务操作与辅助功能；多用于模块繁多的后台管理系统。
2. 口型布局：C 型布局进一步拓展，双侧均增加侧边栏，最大化利用屏幕版面，能够容纳最多功能与信息。缺点是页面信息密度高，灵活性偏弱，常见于工具类、资讯类平台。

4. 懒加载

懒加载是长页面的图片延迟加载方案：图片仅在滚动进入浏览器可视区域后才触发请求渲染，能够加快页面首屏渲染、减轻服务器压力。骨架屏（灰色占位） 是懒加载过程中的过渡占位效果。

以电商长列表页面举例：如果一次性加载全部商品图片，海量资源请求会造成长时间白屏、页面闪烁，极端情况甚至引发页面崩溃，严重损害用户体验，懒加载可以很好规避该类问题。

二、页面层级

页面层级用于规范页面元素的堆叠顺序、所属层级与组合规则。 从底层到顶层固定顺序：背景层 → 内容层 → 全局控制层 → 蒙版层 → 弹出层。下文以复杂度较高的口型布局为例做分层说明。

1. 背景层

位于整个页面最底层，样式固定。通常使用中性底色，目的是衬托上层的内容层与全局控制层。 分为纯色背景与图片背景：

• 纯色：常用中性色 #ffffff、#fafafa、#f5f5f5；
• 图片背景：由图形、图像、装饰文字构成，多用于页面美化、视觉引导。

2. 内容层

业务关联性最强的核心层级，位于背景层之上。承载用户需要获取的核心业务信息与配套操作，例如表单录入、数据列表、详情弹窗、说明文本等。

3. 全局控制层

堆叠在内容层之上，承载全站级的导航、菜单、侧边栏，负责整个产品的全局跳转与功能切换。

4. 蒙版层

极少单独使用，通常配合弹出层出现；通用样式为半透明黑色遮罩 rgba(0,0,0,0.5)。 作用：锁定下层内容、导航栏的交互，视觉聚焦弹窗，引导用户完成当前任务。

5. 弹出层

页面最高优先级层级，用来承载临时交互任务，典型代表为对话框组件。 以弹窗、侧边滑出等形式唤起；弹窗出现时底层页面被蒙版禁用不可操作，用于需要强聚焦的分支业务流程。

三、栅格系统

栅格系统为页面排版、尺寸定义提供标准化参考，让页面设计具备可遵循的规律。熟练运用栅格，能够降低设计决策成本、提升团队协作效率，同时实现响应式，保障设计稿还原质量。

① 关于栅格

• 轻量简单项目：12 栅格即可满足绝大多数需求；
• 信息量大、模块分组复杂的大型后台项目：推荐24 栅格，拆分粒度更细。

栅格两大基础单元：

• Column（列）：内容容器；
• Gutter（水槽 / 槽）：列与列之间的留白间距，控制页面呼吸感。

计算公式：列宽 + 水槽宽度 + 页面左右边距 (Margin) = 页面总宽度 内容可视区域宽度 = N 个列 + (N‑1) 个水槽。

以上下布局的 24 栅格举例：水槽 Gutter 为固定值；浏览器缩放时，列 Column 会跟随视口伸缩，水槽保持固定不变，12 栅格逻辑同理。

② 模块

模块即页面设计区块，可以是文本、图片、卡片等各类内容。装饰性背景元素不需要严格遵守栅格约束。

以 12 栅格为例，模块可以做均等分割（2/3/4/6/12 等分），也可以做非对称比例划分（1:2、1:3:2、3:5 等），设计师可以结合业务场景自由组合。

③ 间距系统

栅格不仅管控排版，同时规范页面元素对齐与间距，保证整体页面的韵律与一致性。 目前主流桌面设备分辨率大多可被 8 整除，行业普遍采用8n 原子间距规则：模块尺寸、内外间距优先取 8 的倍数。

对比参考：

• 2/4/6：粒度太细碎，容易打乱页面节奏感；
• 10：数值跨度偏大，细分场景灵活性不足；
• 8：兼顾细分能力与整体节奏，适用性更广；极小细节可补充 4px 作为辅助。

④ 关于适配

定义三个基础概念：

• Fixed固定宽度：尺寸写死，不跟随浏览器缩放；
• Auto自适应宽度：随视口大小自动拉伸收缩；
• Min最小宽度：页面允许压缩的下限。

1. 上下布局：分为固定宽度、全屏宽度两种模式
   • 固定宽度：PC 端常用固定值 1200px，两侧 Auto 区域随屏幕自适应；
   • 全屏宽度：内容区设置左右最小边距 Min，防止内容贴边被截断。
2. 左右布局、T 型布局：侧边导航、菜单栏 Fixed 固定，主内容区 Auto 自适应。
3. C 型、口型扩展布局：两侧边栏 / 导航栏为 Fixed 固定，中间内容区域 Auto 自适应。

四、Web 页面适配

本章节覆盖响应式、中断点、布局类型、流动布局模块处理、自适应五大知识点。

① 响应式（Responsive）

一套代码、一套页面同时适配多终端设备。 适用场景：交互简单、迭代频率低的展示类官网。

实现两大必要条件：

1. 页面建立弹性网格，元素尺寸优先百分比，减少大量固定 px；
2. 图片资源支持伸缩，不写死图片宽高。

栅格系统正是实现响应式网页的基础手段。

② 中断点（断点 Breakpoint）

浏览器窗口不断缩放到某一临界值，原有布局已经无法正常展示，必须变更内容排布，这个临界像素值就是中断点。

断点设置需要结合业务内容、主流设备分辨率、用户体量、研发成本综合确定。参考 Material Design、Bootstrap 成熟断点标准。

断点设置越多，适配效果越细腻，但开发成本会上升；资源有限时，选取 3‑4 个核心断点即可满足基础业务。

③ 布局类型

根据视口缩放时网格模块的变化策略，分为固定布局、流动布局、混合布局三类。

1. 固定布局 列宽、水槽全部固定，设置 PC 最小宽度（常用 1200px）。视口大于最小宽度时，内容居中，两侧留白；视口小于最小宽度，页面出现横向滚动条。
2. 流动布局 浏览器缩小时，元素自动变窄、文本自动换行；在未抵达断点前整体布局结构不变，到达断点后触发布局切换。 适合仪表盘、数据可视化、图文编辑页面。视口变化优先改变内容大小，而不是单纯增加 / 减少展示条目。

   

3. 混合布局 固定布局 + 流动布局组合使用。典型案例：后台 Dashboard，侧边栏 Fixed 固定，右侧内容区域流动自适应。不同区域使用独立缩放规则，适合工具系统、B 端后台。

   

④ 流动布局下的模块处理

响应式不等于简单整体等比缩放。需要结合内容优先级灵活调整，共有 5 种处理策略：

1. 挤压‑拉伸：元素跟随视口挤压拉伸；适合文本、按钮、输入框等不怕形变的控件。

   

2. 左右‑上下：多列横向排布转为纵向堆叠；适用于图文列表、主内容 + 侧边推荐等左右结构。

   

3. 删减‑增加：小屏舍弃次要非核心内容（广告、次要入口、附属推荐），保留主线任务流程。移动端屏幕空间有限，需要优先保障核心业务。

   

4. 变换位置：不删除模块，调整模块位置。PC 端侧边次要模块，移动端挪至页面底部；多栏转单栏，模块上下顺序按照业务优先级排序，优先级越高位置越靠上。

   

5. 隐藏‑展开：内容收起，通过弹窗、呼出菜单、独立页面展示；最典型场景：PC 顶部导航，窄屏下收拢成汉堡图标，点击展开菜单。

   

⑤ 自适应（Adaptive）

为不同终端（PC、平板、手机）分别开发独立页面与代码。 适用场景：交互复杂、功能繁多、访问量大的电商等产品；可以针对不同设备深度定制交互与功能，体验上限更高。

转载：优设

兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。