兰亭妙微ui设计公司分享：在 Vibe Coding 中，经常出现脑子里是有画面的，但是给 AI 讲了半天，最终做出来个完全不相关的页面，我知道自己想要什么，但我不知道该怎么把它说出来。

举个例子，你告诉 AI：“点击这个按钮，弹出一个窗口。”

AI 确实给你做出来了，但可能是屏幕中央一个大方框，还带着灰色遮罩。而你真正想要的，只是按钮旁边展开一块小面板。

问题出在哪里？

有了 AI 之后，技术能力已经不再是问题，很多过去需要十几个程序员才能开发的大型网站和系统，现在 Claude 和 GPT 半天就能搞定。

但是另一种困境开始显现：我知道自己想要什么，但我不知道该怎么把它说出来。因为一个行业里总会有专有名词，AI 补平了技术能力，但是怎么把语言体系和 AI 对齐，反而成为外行人的门槛。当 AI 逐渐消除技术实现的门槛，人的表达能力可能正在成为新的能力分水岭。

因为不知道专业名词，无法进行行业表达，所以我们只能一遍一遍地要求 AI “高级感、电影感、有质感”，但这些需求如同“五彩斑斓的黑”一样，AI 也不知道你到底想要啥，只能猜。但也许，你想要的“游戏质感”，只需要用“迪卡姆风格”一个词就能精准表达。

所以，这篇文章，就开启一个小专题，回到我产品经理搞 AI 的老本行，来把 VibeCoding 中常用到的术语，做一些普及，让大家在 VibeCoding 的时候，能够把模糊的视觉感受，转化为精准的组件名称和交互规则，减少 AI 猜测，提高生成界面的质量。

就从“弹窗”开始说起。首先有一点，别把页面上所有弹出来的东西，都叫做“弹窗”，它们其实各有名字。

模态与非模态

模态（Modal）是一种交互形式，简单定义来讲，就是：当一个界面出现后，用户必须先处理它，才能继续操作原来的界面。

模态的交互形式非常常见，就以对话框弹窗为例，进行删除操作时，页面上往往会弹出一个弹框，二次确认是否真的要删除，然后提供两个按钮：「取消」和「确认删除」，这种情况下，用户必须得对弹框的选项进行选择后，才能继续操作。

模态的交互比较强，适用于关键信息确认、强阻断流程等场景。

与之相对的，是非模态（Non-Modal），弹窗或其他元素出现后，用户依然可以操作原来的页面，并不需要先把弹窗关闭。

非模态的弹窗比较少见，比较典型的就是 Word 里面的“查找与替换”窗口，在输入框输入文字后，依然能够对文档进行编辑和阅读。

但是其他的交互组件中，非模态的交互形式使用很高频，比如悬浮球、下拉菜单、输入框的报错提示等等。

所以，下次如果想让一个组件，提示用户但不打算用户操作流程，不需要给 AI 讲一大段话，只需要告诉它“这个组件交互形式为非模态”。

对话框：需要集中处理的事

对话框（Dialog）是最熟悉的弹窗，大部分人说弹窗时，实际上指的就是对话框，它的英文名称叫 Dialog，会直接在页面中弹出来，给出选项或者做出提示。

比如删除一份订单记录时，屏幕中央突然出现一个窗口：“确定删除吗？”下面有取消、确认两个按钮。

和前面讲过的「模态」结合起来，就会有 模态对话框（Modal Dialog）和 非模态对话框（Non-Modal Dialog）。模态对话框的核心是打断当前操作、集中用户注意力，因此，它适合删除确认、关键授权等重要场景，最好都用「模态对话框」这种弹窗形式。

Vibe Coding 时可以这样说：“点击删除按钮后，打开模态对话框，背景添加半透明遮罩，提示用户确认删除，提供取消和确认两个按钮。”

气泡浮层：贴着按钮展开的小面板

假设我们点击头像，希望在头像下方展开一个小面板，里面显示账号信息、个人设置、退出登录等选项。

这种时候，就没必要用一个占据屏幕中央的大对话框了，更合适的组件叫气泡浮层（Popover）。

气泡浮层（Popover）的特点是依附于某个元素出现，而不是让用户离开当前的操作位置。

比如点击颜色按钮，在旁边展开一块颜色选择面板；点击筛选按钮，在下面显示一组筛选条件。

它通常不会阻止用户操作整个页面，也可以容纳按钮、输入框等交互元素。

和对话框相比，气泡浮层更加轻量，更适合局部的辅助操作。

Vibe Coding 可以这样说：“点击筛选按钮后，在按钮下方展开一个气泡浮层，显示筛选选项，不添加全屏遮罩，点击外部区域后关闭。”

工具提示：只解释，不打扰

气泡浮层 还有个经常被混淆的兄弟，叫 Tooltip（工具提示）。

有些按钮只有一个图标，没有文字。比如工具栏里有个小剪刀，鼠标移过去，提示出现“裁剪图片”四个字，这个时候用户就知道；噢，这个小剪刀的作用是裁剪图片。

它主要用于解释某个元素的含义，通常在鼠标悬停或键盘聚焦时出现，不需要用户主动点击。

工具提示和气泡浮层有些相似，但二者的职责不同，工具提示负责解释，气泡浮层可以承载操作，所以一般来说，工具提示在页面中的面积会小得多。

工具提示（Tooltip）在 PC 操作中比较常见，在 App 交互当中几乎没有，这是因为他们天然的形态差异导致，电脑可以“鼠标悬停”，手机很难用手指做出“手指悬停”这种动作。

下拉菜单：展开一组选项

还有一种非常常见的效果：点击一个按钮，下方出现一组选项。

比如点击“排序”，出现“最新优先、最早优先、名称排序”；或者点击“更多操作”，展开重命名、复制、删除等功能。

这类交互经常使用 下拉菜单（Dropdown）。

它和 气泡浮层 也有些相似，但区别在于：下拉菜单 一般是一组同类型的、同级的一组选项或操作，而气泡浮层可以容纳更加自由的内容，比如点击头像可以出现昵称、设置、余额、客服入口等各种不同类型的东西。

Vibe Coding 可以这样说：“点击文件右侧的更多按钮，展开下拉菜单，包含重命名、复制、删除三个操作，点击选项后关闭菜单并执行对应功能。”

Toast：通知结果但不打断

Toast 大概是常见程度仅次于对话框的一种弹出形式，中文可以叫「轻提示」，但一般更普遍的叫法就叫 Toast。

在做出某个操作、或者进入某个页面的时候，页面会弹出一个提示，几秒后自动消失，这种就是 Toast。

Toast 的典型特点是，它只负责反馈，不要求用户必须回应。

常见的场景包括保存成功、复制完成等轻量提示，来解决对话框太“强”的问题，比如每次保存成功都弹出一个对话框，让用户点击“确定”，流程完全被打断，使用体验就会非常糟糕。而 Toast 就不会打断用户当前的工作流程，用户可以继续操作，Toast 的状态提示一闪而过，用户扫一眼就知道保存成功了。

不过，轻提示不适合承载必须被用户看到的重要信息。因为它通常会自动消失，用户可能还没来得及阅读，所以，特别重要的提示，还是对话框弹出更稳妥一点。

Toast 一般出现 3 秒，是一个既能被注意到，又不会过于打扰的时长。Vibe Coding 时可以这样说：“保存成功后，在页面右下角显示轻提示，内容为‘保存成功’，持续 3 秒后自动消失。”

抽屉面板：从侧边滑出窗口

如果你正在做一个后台管理系统，应该会经常遇到这种需求：用户在浏览一个数据列表，点击其中一条后，希望查看详细信息，但又不想直接跳转到另一个页面。

这时候就很适合使用抽屉面板（Drawer）。

抽屉面板通常从页面左侧或右侧滑出，能够容纳较多内容，比如用户详情、编辑表单、配置选项等。

它最有价值的地方，是可以让用户在查看详情时，保留对原页面的上下文感知。

抽屉面板也可以有模态和非模态之分，有些抽屉展开后会遮挡并锁定背景页面；有些则允许用户继续操作原来的列表，可以根据需要，选择合适的处理方式。

因此，向 AI 描述 抽屉面板 时，最好明确是否允许操作背景内容。

Vibe Coding 可以这样说：“点击用户列表中的某条数据后，从右侧展开宽度为 480px 的非模态抽屉面板，展示用户详细资料。左侧列表保持可操作，切换用户时更新右侧详情。”

底部弹出面板：移动端的选择

抽屉面板 主要在 PC 端上用，左右弹出，因为屏幕更宽。在手机端上，宽度不够，但是高度会大一点，所以弹出面板的地方，就成了底部弹出。

于是，这就是底部弹出面板（Bottom Sheet）。

比如点击分享按钮，屏幕底部向上展开一块区域，里面显示微信、复制链接、保存图片等操作。

在移动设备上，用户主要使用手指操作，把常用的选项放在屏幕下方，往往更符合触控习惯。

底部弹出面板在下达 AI 指令时，最好带上如何关闭的设计，一般有两种：

• 一种是有一个明确的 × 号或者“关闭”按钮，点击后可以关闭
• 另一种是点击页面其他区域，自动收起底部弹出面板，包括衍生出来的「向下滑动关闭」等手势操作

Vibe Coding 可以这样说：“移动端点击分享按钮后，从底部展开一个底部面板，展示分享渠道，支持向下滑动关闭，并在展开时显示半透明背景遮罩。”

总结

最后，总结一个全景图：

你会发现，这些组件看起来都像“弹窗”，但实际承担着完全不同的任务。

有的负责要求用户做决定，有的负责展示更多内容，有的只是解释一个图标，还有的仅仅是告诉用户操作成功了。它们的区别，不只是长得不一样，而是什么时候出现、在哪里出现、会不会打断操作，以及如何消失。

知道了这些名称，再与 AI 沟通时，就不必讲半天描述效果，最后两边还理解叉劈了。

英国哲学家、科学家迈克尔·波兰尼（Michael Polanyi）提出过一个著名观点：

我们知道的，往往比我们能够说出来的更多。

一个有经验的设计师，可能一眼就能判断某个页面不协调，但让他立即解释所有原因，也未必能够完全说清楚。一个摄影师可能凭经验选出最好的一张照片，却不一定能够把所有审美判断转化成参数。

波兰尼称这类难以充分言说的知识为 Tacit Knowledge（隐性知识）。

它与 AI 时代有一个有意思的交集，过去，一个人的隐性知识可以通过自己动手，在不断实践中转化成作品。今天，当越来越多的执行工作交给 AI，如何将隐性的知识、经验和审美判断传递给另一个执行主体，开始成为新的挑战。

所以，AI 时代，未必必去真正掌握具体的技术，但需要先对齐行业里的语言体系，才能通过 AI 在一个新领域快速落下脚。

这篇文章就到这里，下篇再见。

转载：人人都是产品经理

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

本文翻译文章围绕米勒法则（神奇数字 7±2）展开，解释人类短时工作记忆的认知上限，同时结合序列位置效应，讲解该理论在产品设计、企业管理层面的启发。

本文介绍一套原创服务设计共创工具：双矩阵方法，适合跨学科多人工作坊，把复杂社会类服务问题结构化，把传统 3 天的工作坊压缩至半天，降低专业术语门槛，促成不同背景参与者共创共享价值方案，文章以社会护理作为实战测试领域。

让杂志般的视觉情绪，延伸到真正可用的界面。

兰亭妙微专注 UI 与用户体验设计，持续关注国内外优秀作品，分享界面设计与交互思路，进行设计审美积累。今天分享 Pinstripe 时尚探索 App 设计。摄影负责吸引目光，偏好设置、门店发现与账户内容则承接持续使用。
一、项目背景：在风格表达与寻找效率之间建立联系
用户既希望遇见有个性的内容，也需要容易理解的搜索与选择。Pinstripe 让强烈影像与简洁组件交替出现，用少量颜色串起从入门到探索的体验。     

图 1  手机号与输入状态

橙色背景包裹白色表单卡片，黑色按钮形成明确焦点。手机号输入与键盘状态被纳入同一布局，时尚氛围延续下来，眼前需要完成的动作也很清楚。

图 2  购物偏好的多选设置

购物偏好以列表展开，选中行同时改变底色并显示勾选，个性化信息变成容易回答的小问题。大块留白与黑色主按钮保持克制，选项多时仍有整齐的阅读节奏。

二、设计策略：让影像与黑白组件各有表达空间
①信息架构：入门采集购物偏好与风格，探索和账户页面继续整理内容。②视觉语言：大幅摄影营造编辑感，黑白文字与按钮建立秩序，橙色背景为引导流程补充鲜明记忆。

Pinstripe | 界面细节与设计启发

图 3  风格标签与可修改偏好

不同长度的风格名称被整理成标签网格，选中项带有可移除标记。自由的时尚词汇进入统一组件后显得有序，标签、留白和继续按钮之间也形成清楚层级。

图 4  账户 引导与活动发现

这张组合图并列展示账户、摄影引导与活动发现页面。图片主导的界面释放品牌情绪，列表界面保持简洁，同一套黑白按钮与图标把不同内容连接起来。

③场景化交互：购物偏好通过列表多选，风格偏好通过标签表达，搜索与过滤入口集中呈现。不同类型的信息采用不同选择方式，黑色主按钮始终提供清楚的继续方向。

三、设计启发：品牌情绪与操作秩序，可以在不同页面交替主导
摄影丰富的页面让人停留，简洁的表单和列表帮助完成动作。做精品零售或生活方式产品时，可以积累这种节奏：让内容释放个性，让重复组件提供熟悉感，整体体验就更容易连贯。

如有时尚零售、电商类 App的 UI/UX 设计需求，欢迎联系兰亭妙微，交流产品场景与设计需求。

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

一句需求就能生成一组页面，几轮对话就能做出可点击原型，这种速度让设计讨论变得很直观，也容易让团队太早进入制作。兰亭妙微这次阅读 NN/g 的 Tanner Kohler 关于智能代理参与软件生产的文章。它让我们重新关注一个老问题：当实现越来越快，谁来判断正在做的东西是否值得做？下面结合一个假设的企业知识库，聊聊用户体验工作在需求、验证和迭代中仍然需要承担的具体任务。

过去讨论一条用户路径，通常会画出一个人如何搜索、比较、点击和完成任务。现在，部分步骤可能由 AI 助手代劳，人只在关键时刻回来确认。兰亭妙微这次分享 NN/g 的 Raluca Budiu 关于 Experience Design 的文章：当人与代理共同参与数字系统，设计视角也需要扩展。不过，操作主体变多，不代表人的目标变得次要。以下用旅行计划与商品比较的假设场景，观察这种变化会如何落到页面上。

用 AI 整理一份资料，第一次结果看起来流畅，仔细读却发现日期不对。这时用户需要的，通常不是一句更热情的道歉，而是知道错在哪里、能不能改、之前的工作会不会丢。兰亭妙微这次分享 Tushar Deshmukh 关于算法错误与信任的文章。我们借这个问题，把注意力放到日常工具的界面上：下面的资料摘要和文件整理均为假设场景，讨论的是交互设计的补救方法，不涉及医疗、金融等专业决策。

设计稿里每一行文字都刚好，每张卡片都有数据，按钮点击后总能进入下一页。真正上线以后，长名称、等待、权限和失败才一起出现。兰亭妙微这次阅读 Pavel Bukengolts 的设计协作文章，关注其中关于设计意图在交付中流失的讨论。它提醒我们，视觉稿只是沟通的一部分。以下用一个假设的资料管理产品展开：如果要和交互设计公司或研发团队一起把方案做实，哪些细节值得在交付前讲清楚？

打开一款企业软件，最先映入眼帘的往往是表格、筛选器和状态标签。它们需要准确，也容易让第一次使用的人感到拘谨。兰亭妙微这次分享 Roman Yakovlev 关于 B2B SaaS 吉祥物设计的文章：作者以 TitanApps 和 Coupler.io 的探索，讨论角色如何帮助技术产品建立更鲜明的表达。这个话题很适合带回 B端界面设计里继续想一想。不过，亲和力不能只靠放上一只可爱的动物。下面结合几个假设界面场景，聊聊角色的位置、分寸，以及它怎样和真正的任务配合。

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

本文参考 Ant Design、Element Design、Google Design 等成熟业界设计体系，结合官网展示类、商城交易类、后台功能类、工具组件类等多种已上线 Web 产品实践总结而来。 部分内容来源于早期项目 1.0 版本，受互联网产品快速迭代影响，个别内容仍有待验证与迭代，欢迎各位读者交流指正。

Web 布局体系将分为四大核心板块：框架布局、页面层级、栅格系统、Web 页面适配。

提示：全文体量较大，建议收藏分段阅读。将相关知识点整合为一篇，是为了保证知识体系完整性，避免内容碎片化。版权归属原项目所有。

一、框架布局

框架布局是整个 Web 页面的骨架基底。只有确定页面框架之后，才可以进一步落地统一视觉、功能交互、业务流程。本章节围绕设计原则、基础布局、扩展布局、懒加载策略四个维度讲解。

1. 框架布局设计原则

1. 一致性：保证全站布局结构、视觉范式统一，降低用户认知成本，提升使用舒适度。
2. 逻辑性：页面信息分类、模块组织遵循业务逻辑，模块之间结构关系清晰通顺。
3. 可扩展性：无论业务简单或复杂，布局框架支持业务迭代，可灵活扩充、调整结构。
4. 可预测性：选用用户熟悉、可识别的布局范式，贯穿产品全体验链路，合理引导用户行为。

2. 基础布局

基础布局包含上下布局、左右布局、T 型布局，结构简洁，是 Web 产品中最高频的布局方案。

1. 上下布局 页面上方为导航模块，下方承载主内容区。导航栏宽度会约束导航条目数量与文字长度。 适用：导航条目少、页面纵向内容长的网站，是 Web 最通用的框架布局。
2. 左右布局 页面左侧放置全局导航，右侧为主内容区域。导航常驻可视区域，页面切换感知强。 适用：业务结构相对简单的网站。
3. T 型布局 广泛应用于资讯、社交文章类产品。顶部设置全局导航承接全部一级入口；内容区域继续二次切分，分为侧边菜单栏 + 主内容区，侧边栏可居左也可居右。

3. 扩展布局

扩展布局是基础布局的进阶形态，分为C 型布局、口型布局，适合信息密度高、功能复杂的系统。

1. C 型布局 T 型布局的延伸，同时融合水平导航与垂直侧边导航，清晰区分高频业务操作和次要辅助操作。 适用：模块繁多、逻辑复杂的后台管理系统。
2. 口型布局 C 型布局进一步拓展，在页面两侧同时增设侧边栏，最大化利用屏幕版面，可承载海量信息与功能。 缺点：页面信息密度高，灵活性偏弱，容易产生拥挤感。 适用：工具类、资讯类高密度页面。

4. 懒加载

懒加载是长页面图片的延迟加载策略：图片仅滚动进入可视区域时才发起资源请求，有效加快页面首屏速度，减轻服务器压力。 加载过程中使用骨架屏（灰色占位）作为过渡反馈。

在电商等图片密集的长页面中，如果一次性加载全部图片资源，极易出现长时间白屏、页面闪烁，极端情况会造成页面崩溃，严重破坏用户体验，懒加载就是解决这类场景的重要手段。

二、页面层级

页面层级用于定义页面元素的堆叠顺序、归属层级与组合规范。 从底层到顶层固定顺序：背景层 Background → 内容层 Content → 全局控制层 Global control → 蒙版层 Mask → 弹出层 Pop‑up。 下文以结构最复杂的口型布局作为演示案例。

1. 背景层｜最底层

永久处于页面最底部，一般使用中性底色，目的是衬托上层的内容与导航。 分为纯色背景与装饰图片背景两类：

• 纯色常用中性色：#ffffff、#fafafa、#f5f5f5
• 图片背景：图形、纹理、装饰插画组成，用于美化页面、引导视觉流向。

2. 内容层｜业务核心层

业务关联性最强，也是页面复杂度最高的层级，位于背景层之上。 承载用户需要获取的核心业务信息，以及配套操作，例如表单录入、数据列表、详情展示、信息说明等。

3. 全局控制层

置于内容层上方，承担全站导航、全局操控能力，包含顶部导航、菜单栏、侧边栏等组件。

4. 蒙版层

不会独立使用，配合弹出层出现；标准样式为半透明黑色遮罩 rgba(0,0,0,0.5)。 作用：锁定下层页面的全部交互，视觉聚焦弹窗，引导用户完成当前操作。

5. 弹出层｜最高优先级

临时浮层，优先级最高，承载临时任务，典型代表是对话框组件。 以弹窗、抽屉滑出形式唤起；蒙版会禁用底层页面交互，用于需要强聚焦的分支任务流程。

三、栅格系统

栅格系统为页面排版、尺寸设定提供标准化参考，让设计具备秩序感。 合理运用栅格，可以降低设计决策成本、提升团队协作效率，保障视觉还原质量，同时实现响应式布局。

分为四个部分：栅格基础概念、模块划分、间距系统、布局适配规则。

① 关于栅格

• 轻量简单项目：12 栅格即可满足需求；
• 业务庞大、信息分组复杂的中台项目：推荐 24 栅格，实现更细粒度划分。

栅格两大基础单元：

• Column（列）：业务内容的容器；
• Gutter（水槽 / 槽）：控制列与列之间留白间距。

公式：列宽 + 水槽间距 + 页面左右边距 = 页面总宽度 内容区域宽度 = N 个列宽度 + (N‑1) 个水槽宽度

以上下布局的 24 栅格为例：水槽 Gutter 为固定值；浏览器缩放时，列宽会弹性变化，水槽间距保持不变。12 栅格逻辑可以同理推导。

② 模块

模块指页面内的业务区块，可以是一段文本、一张图片或组合组件。

注意：装饰性背景元素不属于业务模块，不需要严格遵守栅格约束。

以 12 栅格举例，模块既可以均分 2/3/4/6/12 份，也支持非对称比例（1:2:1、1:3:2、2:3:3、1:2、3:1 等），设计师根据业务场景自由组合。

③ 间距系统

栅格不仅管控排版，同时规范页面内全部元素对齐与留白，以此保障页面韵律与一致性。

桌面端主流屏幕尺寸大多可以被 8 整除，行业普遍采用8 为最小原子单位，采用 8n 规则定义模块尺寸与间距。

• 2、4、6：粒度太小，容易造成页面元素细碎，节奏感差；
• 10：步长过大，间距跳跃感明显； 因此 8n 是普适性最优方案。

④ 关于适配

定义三个关键概念：

• Fixed固定宽度：尺寸写死，不受浏览器窗口影响；
• Auto自适应宽度：跟随浏览器窗口自动伸缩；
• Min最小宽度，限制页面收缩下限。

基础布局适配规则

1. 上下布局 分为固定宽度、全屏宽度两种模式。

• 固定宽度：内容区 Fixed 建议设置1200px，适配绝大多数屏幕，两侧 Auto 区域自动留白；
• 全屏宽度：需要设置内容区 Min 最小边距，避免内容贴边被裁切。

2. 左右布局、T 型布局 侧边导航 / 菜单栏为 Fixed 固定宽度；中间主内容区为 Auto 自适应。

扩展布局适配规则

C 型布局、口型布局：两侧导航栏、侧边栏均采用 Fixed 固定，中间内容区 Auto 自适应。

四、Web 页面适配

本章节讲解响应式、断点（中断点）、布局类型、流动布局模块处理、自适应五大内容。

① 响应式 Responsive

一套代码，兼容多终端。

适用场景：展示官网、交互简单、迭代频率低的产品，维护成本更低。

实现响应式两个必要条件：

1. 布局具备规律性，依托弹性网格，尽量用百分比替代固定像素；
2. 图片资源支持弹性缩放，不写死图片宽高。

栅格系统，正是实现响应式网页的底层基础。

② 中断点（断点 Breakpoint）

断点即页面尺寸临界阈值：浏览器窗口收缩到该数值，页面布局规则需要发生变化，适配新的视口。

断点的设置，需要结合业务内容、主流设备分辨率、用户规模、研发成本综合判断；当现有布局无法良好展示内容，就应该设置断点。

参考业界标准：Material Design、Bootstrap 断点体系。

断点越多适配效果越细腻，但开发成本随之提升；资源有限的项目，选取少量核心断点即可。

③ 布局类型

按照页面缩放行为，分为固定布局、流动布局、混合布局三类。

1. 固定布局 列宽、水槽全部固定，设置 PC 端常用最小宽度（一般1200px）。

   

• 窗口大于最小宽度：内容居中，左右留白；
• 窗口小于最小宽度：页面不再收缩，底部出现横向滚动条。

2. 流动布局 浏览器窗口缩小时，元素自动变窄、文本自动换行；只有抵达断点阈值，才会变更整体布局结构。 适合仪表盘、编辑器、图文、数据可视化页面；对用户而言，内容弹性收缩，优于单纯增减显示条目。

   

3. 混合布局 固定布局 + 流动布局结合。最典型例子：后台系统 Dashboard，侧边栏 Fixed 固定，右侧内容区 Auto 流动。 不同维度使用不同缩放规则，部分区域固定、部分区域弹性伸缩。 适用后台系统、工具界面。

   

④ 流动布局下的模块处理策略

响应式不等于简单整体等比缩放。需要基于内容优先级灵活调整模块，一共 5 种处理手段：

1. 挤压‑拉伸 模块跟随视口挤压拉伸；适合文本、按钮、输入框、纯色背景，拉伸不会产生形态损坏的元素。

   

2. 左右‑上下 PC 端左右排布，窄屏转为上下堆叠；适合图文列表、主内容 + 侧边推荐等双栏排版。

   

3. 删减‑增加 小屏幕下舍弃次要内容（广告、次要快捷入口、附属推荐链接），保留核心业务主线。 移动端可视区域狭小，优先保障核心任务体验。

   

4. 变换位置 不删除模块，调整模块顺序；PC 端侧边次要模块，移动端移动至页面底部；多栏转为单栏。

   

模块上下顺序由业务优先级决定，优先级越高越靠页面上方。

5. 隐藏‑展开 内容收起，通过弹窗 / 独立页面呼出。典型场景：PC 顶部导航，窄屏幕收纳进汉堡菜单，点击展开。

   

⑤ 自适应 Adaptive

不同终端，维护独立的页面与代码。

通过检测视口尺寸、设备特征，调用对应版本页面。 适用场景：电商、交互复杂、用户量大的产品；可以针对设备深度定制交互与功能，体验上限更高，但维护成本更高。

结语

布局是 Web 设计语言库的地基，从宏观页面框架、元素堆叠层级，到微观栅格间距、跨端适配，层层约束共同保障整套产品体验统一。后续可以结合视觉规范、数据可视化规范，完成完整设计语言库搭建。

转载：优设

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