最近我发现，微信给输入框加了一圈明显的黑色描边，把语音输入在视觉效果上做了强化。
旧版是这样的。
被人吐槽很多后，又做了一些优化，我的另一个号是这样的样式。
我在群里和朋友圈都能看到不少人吐槽，怎么改得这么丑。
我有一个猜测，微信这次可能又在把大家熟悉的输入框，往下一代AI交互入口推。其实语音输入不仅仅是在输入框这里做了加强，其他地方加的更多。
就像2011年第一次发布的语音版就是按住说话，当时也是把语音这个按钮做的特别强，连文案都一直没变过。
微信内部具体怎么考虑，我现在没在腾讯了，也没啥内部信息。下一代AI入口，是我对这些功能变化的理解。
结合我自己的使用体验，我会觉得，这也许和 AI 时代的输入方式有关。文字本来就是为了记录而发明的，但人与人日常交流最自然的方式，一直都是说话。能语音说清楚的事情，通常就不想再费力写一遍。我自己的输入习惯，也正在往这个方向走。只是受限于环境，不得不看文字。
过去我们依赖键盘，是因为语音识别还不够准确。现在识别已经足够准，再加上 AI 可以帮我们整理和修改，语音终于成了一种真正好用的输入方式。
我现在已经越来越少打字了。
我现在很享受晚上一个人在公司楼下，找个安静的地方，把一天的思考快速说出来，再让 AI 帮我整理。前段时间我是用Claude，也是在那个时候逐渐习惯了这种记录方式。在我的claude被封号之后，突然觉得以前打字其实是一件挺辛苦的事。
说话时，我基本不用看手机屏幕，只要顺着思路往下讲，就能一口气说出很多内容。现在语音识别已经足够准确，转出来的文字通常不用大改，最多让 AI 帮我整合一下就可以了。我之前也跟大家专门分享过这个语音整理的skill，我现在会放在codex里用，也挺好用的。
地址是这个 https://github.com/ColourCloudSky/voice-note-polish ，有需要的话，也可以拿去用。
以前用手机码字的时候，很多时候我有想法了就只能用几个关键词快速记录，之后还要再找时间补充。如果不是有特别强的行动力的话，这个其实挺难持续的。因为你可能会存很多关键词，但却没时间去补。
而且，说话和打字带来的状态很不一样。说的时候，我不会预先考虑太多，往往能把最直接的感受讲出来，思路也更容易自然地往下走。打字的时候，总要一边写，一边斟酌措辞，想着想着思路可能就断了。
以前我为了记得更快，我连双拼都专门学过。双拼确实很快，但现在只要环境允许，我还是愿意直接说。
尤其是在跟人聊天的场景里，语音识别和 AI 结合之后，沟通会越来越接近线下交流的状态。我们像平时一样自然地说话，系统把语音准确转成文字，这个过程会非常方便。
这跟直接给朋友发一条语音消息，还是有区别的。发语音的时候，接收的人需要找时间听完，倍速真的太重要了。语音转文字，再配合整理和修改，才更接近我现在愿意一直用的这套方式。
所以，我说的下一代AI交互入口，具体就是让用户自然地表达意思，系统接着帮助处理这段表达，最后由用户确认结果。
我们还是需要文字，只是有一部分文字，可以不用再亲手一个字一个字打出来。
从这个角度看，微信把语音输入变得更显眼，我能理解它可能想推动的方向。输入框本来就在我们每天交流的路径上，如果它能接住这套新用法，用户就有机会在熟悉的地方慢慢形成新的习惯。
但一种功能能做出来，到大家愿意用，中间还有很多事要做。
一个语音入口藏得太深，有需求的人可能发现不了。把它做得更显眼，确实可以让人注意到它。但输入框也要供那些习惯打字、暂时不想说话的人使用，新增的强调会不会打扰他们，同样需要考虑。
我愿意在公司楼下说话，是因为那里安静，也方便开口。换到不适合说话的环境，或者需要输入一段很精确的内容，键盘依然是必须的。
设计要给不同的输入方式留出位置，让用户根据当下的情况选择。产品看好一个新方向，也得照顾眼前这些真实的使用差别。
如果目的是让人发现语音功能，可以尝试描边，也可以考虑提示文案、入口位置，或者在合适的时机介绍新用法。具体选哪一种，要看原来的问题发生在哪里。
原来没看见入口，和看见了但不知道怎么用，需要解决的事情就不一样。已经会用的人，每次打开聊天还需不需要这么强的提示，也值得继续想一想。
这里需要设计师判断，什么该强调，强调到什么程度，以及用户熟悉之后该怎么办。线条的颜色、粗细、圆角，都会影响它和整个聊天界面的关系。
用户反馈很丑也是很有价值的，它至少提醒了设计师，这个变化让一部分人觉得不舒服。接下来可以继续看看，这个不舒服来自视觉上的突兀，还是使用过程里的不顺手。
入口被看见之后，还要考虑用户后续的操作体验。
还是拿微信这个语音转文字、修改后再发送这个功能来说。
一个按钮设计，拍脑袋想下应该是很简单的，如果一切顺利的话就那么几步，按下去，说话，文字出来了，发出去。
但设计还要处理那些没那么顺利的情况。录到一半想放弃，怎么取消？一个名字识别错了，怎么修改？内容正在处理，用户切走了，回来还能不能接着用？这些都要想好怎么设计。
如果再加上AI整理，还有一个判断要留给用户。它整理后的文字，是否仍然是自己想表达的意思。
重复的语气词可以删掉，但一句话里的犹豫、保留和不确定，有时就是原意的一部分。对这样的输入设计，我会希望修改后的结果容易核对，不满意时也方便重新调整。
尤其是发送这一步，用户需要清楚，自己现在是在录音、修改，还是已经把内容发给了对方。整理得再通顺，也得先让人知道自己准备发出去什么。
这些地方处理好了，用户才有理由继续使用。只让他第一次注意到一个功能，还不够。
一个按钮的描边修改，对UI来说只是最简单的一步，但背后的设计逻辑，都要思考清楚，以及说对用户的体验和对产品的战略价值怎么平衡，需要想清楚才能设计的好。
因为写设计文章的原因，我创建了10多个UI设计群，从以前每天几百条信息聊UI，聊上首页，发作品链接，到现在群里已经越来越少认真聊UI了。大家忙着讨论怎么写Skill，怎么去AI味。
难得一个输入框的改动，又让大家认真说起好不好看，我还挺感慨的。
一个看似简单的输入框设计，却需要考虑这么多复杂的事情。所以，UI设计绝对不像某些人想的那样，就是个画图的。
微信这么多年，UI视觉一直也没咋变化，那按很多人的理解，早就应该把UI干掉了，但其实他们还在，就说明一直都有更重要的东西需要去琢磨，而不仅仅是一个按钮样式。
想要把体验真正做好，真的没那么简单。背后的输入逻辑、用户习惯和产品想推动的方向，都要放在一起想清楚。产品想推动一种新习惯，设计就得把每一次使用里的麻烦处理好。
所以，别再因为看过几个AI视频和演示demo，就说要替代设计师了，优秀的设计师永远稀缺。
转载：人人都是产品经理
在字体设计当中，合理运用书写逻辑规律，既能依靠笔画势态营造独特的视觉节奏感，也可以精准控制笔画与部件形态。我们还可以借由字形本身开展字与字之间的重组，以合体字的形式传递文字内涵；在保留单字独立属性的前提下，赋予字体意象化的表达能力。
关于创意字体的识别度思考 创意字体的识别度是相对概念。很多时候并非字形识别失效，只是它跳出了常规方块汉字的阅读逻辑。高识别度只是字体众多表现可能性中的其中一种。视觉传达目标与内容概念，才是决定识别度取舍的核心。把大众熟悉的汉字范式融入概念化创意，即便适度牺牲部分识别度，也能用陌生化视觉完成概念可视化，承载多层意象，实现多维度的情感解读，这也是字体创意极具魅力的表达方式。
转载：站酷
兰亭妙微ui设计公司分享：很多新手做网页设计，直接上手画页面，却忽略画布尺寸、导航选型、屏幕适配这些底层问题，最终设计稿交付开发后，出现页面错位、首屏信息被遮挡、不同设备体验差异巨大等问题。本文从画布与内容区、导航模式选型、布局与屏幕适配三大模块，拆解 PC 网站设计的关键实操要点。
在完成用户调研之后，正式设计的第一步，就是确定画布大小，画布基准要参考市场主流设备的分辨率分布。
根据 2021 年 PC 分辨率统计数据，1920×1080是市场占有率最高的分辨率，占比 40.75%；1920×1080、1366×768、1440×900 三者合计占比达到 62.75%。
设计选型小提示：遵循小屏适配大屏优于大屏适配小屏的兼容原则，B 端项目可以选用 1440×900作为设计画布，阿里、Material Design 的 B 端规范均采用该尺寸。 如果产品面向特定人群，可直接以用户实际设备为准，例如企业内部办公系统，员工普遍使用 1366×768 笔记本，则直接以此作为画布标准。
网页运行在浏览器当中，系统 UI、浏览器控件都会挤占可视区域的高度，直接用屏幕分辨率当做首屏高度，会导致核心内容被遮挡。
真实可视首屏高度计算公式： 严格版：屏幕分辨率高度 − 浏览器控件高度 − 系统 UI 占用高度 简易版：屏幕分辨率高度 − 浏览器控件高度
设计时以此划定首屏线，把最重要的业务信息放置在首屏可视范围内。
PC 网页最主流的两种导航形式：左侧导航、顶部导航。
早在 2004 年，学者 JR Kingsburg 就针对三级菜单导航做可用性实验，对比 8 种导航组合，在完成明确任务的场景下，一级导航放置在侧边，用户操作效率更高，选择错误、操作犹豫的情况更少。
左侧导航（侧导航） 优势：
顶部导航 优势：横向排布，几乎不占用横向空间，最大化释放内容展示区域。 劣势：二级菜单依赖 hover 悬浮唤起，鼠标移开菜单就消失，多层级导航的阅读、理解成本更高。 适用场景：内容消费型网站，资讯、图片、视频平台，代表产品：花瓣、知乎、爱奇艺。
同一个网站不同模块，也会混合使用两种导航：以百度为例，搜索浏览页面使用顶导航，给内容让出空间；进入个人中心，需要修改资料、管理收藏等明确操作，切换为左侧导航，提升功能查找效率。 很多综合网站会采用混合方案：顶导航承载登录、全局搜索这类通用能力，左侧导航承载细分业务菜单。
基础参数参考：
200+8n的数值区间，208‑272px 都属于行业常见范围；不同分辨率对应有安全内容宽度区间，设计时需要参考安全宽度，再结合栅格系统、适配策略确定最终内容区大小。
PC 网页一共 3 种主流适配实现方案，设计阶段就需要和前端对齐方案，避免后期返工：
页面整体设定固定 px 宽度，无论大屏小屏，页面尺寸不会变化。 优点：设计还原简单，开发成本低； 缺点：兼容性差。小屏幕下会出现横向滚动条，大屏幕两侧留出大量空白。
不改变页面整体模块排布结构，将 px 单位替换为百分比、rem，页面元素会跟随屏幕等比缩放，布局结构保持不变。 大多基于栅格系统实现，栅格由列（Column）、间距（gutter）、外边距（margin）组成，移动端设计规范，很多也是栅格体系的简化版本。
依靠 CSS 媒体查询@media，针对不同屏幕断点编写多套样式，屏幕尺寸变化时，不仅元素大小改变，模块排布结构也会发生变化，大屏、小屏呈现不一样的页面结构。 优点：各尺寸体验最优； 缺点：需要维护多套代码，开发工作量大。 实操中，通常结合栅格系统 + 屏幕断点共同实现。
协作建议：设计输出前，提前与开发确认适配方案，约定最大、最小适配屏幕边界，搭建统一的栅格规范，大幅降低沟通成本，减少还原偏差。
从零设计 PC 网站，不要直接陷入视觉细节：
兰亭妙微ui设计公司分享：近年已有不少完整落地项目由 AI 辅助完成，部分网站甚至可以实现产品 360° 交互预览，细节放大查看，技术的迭代正在重塑互联网行业的工作模式。
过去二十年间，互联网行业有着清晰分工：产品、研发、设计、用户研究各司其职，组成团队协作产出产品。 这套模式成立的底层逻辑，是落地实现的门槛很高，高度依赖专项技能。行业为此搭建了成熟的晋升路径，从初级、高级到专家，大家沿着专业赛道稳步向上成长。
但 AI 大幅降低了落地执行的成本。当 1‑2 个人，借助工具就能完成过去 6 个人的工作量，传统岗位分工正在遭遇拷问。 Julie 提出核心观点：AI 浪潮之下，无论身处哪个岗位，我们都要完成身份转变，成为一名「构建者（builder）」。
成为构建者，不等于要求你精通全部技能，而是重塑做事思维。
旧模式里，我们习惯边界化工作：“我只负责自己模块，其余交由他人处理”。 如今 AI 可以写代码、生成文案、完成数据分析，个体完全有机会把一个想法，完整推进至落地。你的身份，不再是流水线当中的一环，而是整件事的主导者。
转变包含两个层面： 第一，心态转变 过去遇到职责外工作，第一反应是 “这不归我管”。而构建者的思考逻辑是：想要达成目标，目前还欠缺什么？我能否借助 AI，或是联动伙伴补齐缺口？ 关注点从「我的岗位要做什么」切换为「这件事如何才能做成」。
第二，能力定位转变 不要被岗位标签定义自我，聚焦你的真实能力：有的人拥有顶尖视觉能力，有的人擅长梳理复杂系统，有的人擅长从 0 到 1 开拓新项目。 认清自己的核心长板，以优势为根基，借助 AI 与他人协作补足短板。
简言之，过去比拼的是单一专业的深度；而当下，更考验整合全部资源，交付完整成果的能力。专业功底依旧是立身之本，但仅有手艺，已经不足以应对时代变化。
如今 AI 足以输出大量中等偏上水平的成果，方案的执行门槛被抹平。但甄别优劣、洞察问题、指明优化方向的判断力，成为人的核心价值。
该怎样打磨这份专业判断力？
就好比请毕加索点评画作，不是远远仰望，而是拿出自己的作品，在反馈中实现自我成长。
Julie 反复强调一个认知：不亲手实操工具，就不可能真正理解 AI。
她的观点十分直白：如果连当下技术的能力边界都不了解，很难称得上是 AI 时代优秀的设计师、产品人。行业认知无法靠读文章、听播客获得，必须亲身实操。
她本人便是如此：写代码会逐一测试 Cursor、Claude Code、v0、Lovable；会议记录依靠 Granola；数据分析使用自家产品 Sundial。 对待工具，她像面试候选人一般，逐一测评，不为追逐新潮，只为摸清每个工具的优势、短板，清楚什么任务适合交给哪款工具。
有一个很值得反思的细节：即便本身写作能力很强，Julie 依旧强迫自己切换到 AI 协作的写作模式。
人天然会依赖顺手的旧流程，越是自己擅长的领域，越抗拒改变。但恰恰是这些熟门熟路的工作方式，最容易让人停滞不前。固守旧有习惯，就很容易被善用新工具的同行超越。
道理简单朴素：不要只停留在围观讨论，把 AI 嵌入日常工作流，哪怕初期体验别扭。实操越多，越懂 AI 的能与不能，也更明白个人努力该投向何方。
这是一个容易被忽略的洞察：管理，正在从少数人的岗位职能，变成全员必备基本功。
经典管理模型包含三大要素：目标、人、流程。这套框架在 AI 时代依旧成立，只是资源对象发生变化。
过去，我们主要的协作资源是团队同事；现如今，AI 模型已经成为重要的 “团队成员”。 不同模型各有所长：部分擅长代码编写，部分擅长文案创作，部分擅长处理复杂数据。我们需要像管理团队一样用好 AI。
工作逻辑就变成管理者思维：明确项目目标；将合适的任务分配给适配的 AI 模型；理顺整体协作流程，让人与 AI 协同完成任务。
过去专属于领导力的各项能力，不会被 AI 替代，反而成为每个职场人的必修课。
看完这些思考，未必能完全消解焦虑，但可以理清方向。 AI 替代的是重复执行工作，却夺不走人的判断力，以及从构思到落地的完整闭环思考能力，而这正是设计、产品工作最内核的价值。
不必过度纠结被 AI 取代的风险，做好两件事即可：持续打磨辨别好坏的专业眼光；跳出口头谈论，实实在在把 AI 运用到工作当中。
兰亭妙微ui设计公司分享：AI 设计工程化，核心是从交付静态设计稿，升级为直接交付可落地的工程代码，尤其适配页面结构标准化、组件高度复用的 B 端业务场景。整套工作流有 5 个关键转变：
随着大模型快速普及，很多团队都在尝试用 AI 提升设计产能，但 AI 对不同类型需求的价值截然不同：
以淘宝闪购商家 B 端推广业务为例，业务月均 20 个需求，72% 都属于标准型页面，需求密度高、重复模式多，非常适合落地 AI 设计提效。这也抛出一个行业思考题：AI 浪潮下，设计师的产出是否可以跨过设计稿，参与到代码落地环节？本次实践就是围绕这个命题展开的实战探索。
市面上 AI 赋能 UI 一共有 4 条主流实现路径，彼此核心差异在于最终交付产物：
表格
| 方案 | 代表工具 | 工作流特点 |
|---|---|---|
| AI 设计工具 | DoneAI、FigmaMake | 需求→思考→输出 HTML / 设计稿→工程二次实现→设计走查 |
| IDE+HTML | Qoder、Cursor | 需求→思考→输出 HTML→工程二次实现→设计走查 |
| AI 设计工程化 IDE+Skill+React | Qoder、Cursor | 需求→思考→直接输出 React 工程代码 |
| 自建 Agent 平台 | - | 按需定制方案，整体实现成本极高 |
重点区分：HTML 更偏向模型输出的 “效果图”，而 React 工程代码是可直接参与项目迭代的真实产物。
整套落地分为五大阶段：
传统模式设计师输出效果图，而 AI 工程化模式下，设计师需要触达下游实现环节，完成从 “交付图纸” 到 “交付代码” 的转变。实践中设计师会额外承担约 30% 原属于前端的工作，带来两类痛点：
✅ 解决方案：联动研发沉淀SOP‑Skill，把完整流程固化，实现流程自动化，降低普通设计师上手门槛，提升工程部署效率。
核心思路：用设计师的思考逻辑定义 Skill，搭建高质量生成框架，沉淀可复用经验。
针对 B 端推广标准页面，本次实战拿到明确提效结果：
团队长期目标：标准型页面实现80‑90% 设计提效，持续迭代优化。同时需要客观看待 AI 的局限：受限于模型能力与幻觉问题，现阶段无法完全替代设计师，质量把关依旧必须由人完成。
AI 是强大加速器，而非替代者。设计工程化不是让设计师写前端，而是让设计资产真正以代码形态流入产品生产链路。
兰亭妙微ui设计公司分享：界面看着粗糙、精致度不足，却找不到优化切入点？首页顶部 Banner（广告大图）往往就是问题的关键。
界面配图除普通素材填充之外，还包含运营广告类素材。二者属性不同，排版逻辑也存在明显差异。如果 Banner 处理草率，会直接拉低整个页面的视觉质感，尤其是 App 首页顶部的大广告位，设计失当带来的负面影响尤为突出。
今天我们聚焦首页顶部 Banner，系统讲解它的设计思路与落地方法。
早年绝大多数 App 首页都会配置顶部 Banner 模块，如今不少产品已经将该组件移除，或是下移至页面中下部（如淘宝、京东）。但依然大量产品在首页或二级页面保留了这类布局逻辑。
按照用途，Banner 可以分为固定广告图与运营活动图两类：
分层渲染的优势在于：文字可后台快速编辑替换；背景与文字分层，能够实现视差等差异化动效。
固定广告图想要做到稳妥耐看，需要守住 4 条基础准则：
正式设计前，需要先选定版式，搭建对应的栅格参考系统，约束元素摆放位置。移动端 App Banner 最常用的就是左右布局、居中布局。左右布局兼容性强、不容易翻车，但相对普通；居中布局视觉冲击力更强，对素材、场景有一定要求。
左右布局需要先定义四周边距参考线，四边内边距无需完全均等：
四边约束完成后，继续细化栅格：增加垂直中线分割画面；绘制水平参考线约束文案垂直位置；设置右侧竖线对齐主体图形中轴线。
栅格搭建完成后落地流程：
注意：修饰效果点到为止。目标是用最少的加工提升完成度，不要按照 H5 大促主视觉的标准做过度复杂的特效。
居中布局分为两种形式：①标题在上，主体在下；②标题与主体全部居中，文字叠加于主体之上。
第一种适合 Banner 高度充足的场景；移动端首页 Banner 高度普遍偏扁，因此文字 + 主体叠加居中是更常用的形式。
栅格搭建要点：
✨视觉小知识：Banner 视觉会向上延伸到状态栏区域，如果标题严格放在画布正中，人眼观感会觉得整体偏下。因此核心标题应当摆放在画布中上位置，实现视觉平衡。
栅格就绪后填入标题、辅助文案与主体图形，再做细节打磨。
⚠️素材避雷：细长型物体（黄瓜、眉笔、香蕉等）不适合居中版式，优先选择轮廓饱满、比例适中的主体素材。
背景简易处理技巧（非实景场景）：不直接使用完整场景图，采用「纯色 + 弥散光斑」。从主体物体取色微调作为底色，叠加半透明模糊圆形光斑，高效做出柔和的层次氛围。
这套方法不会做出惊艳炸裂的效果，但可以有效避免凭感觉设计带来的各种问题，适配 UI 界面的整体调性，做到安全、合格、不出错。
很多新人会追求一步到位做出高表现力 Banner，但复杂视觉效果对平面功底要求很高，仅靠框架模板很难驾驭。新手应当优先夯实基础落地能力，牢记以下禁忌：
重点认知：Banner 只是 UI 界面的其中一个模块，不需要它抢尽风头。不给整体界面拖后腿，就是合格的 Banner。
Banner 设计不能完全依赖 AI 一键生成，AI 痕迹过重的广告图会严重降低界面品质。设计师需要掌握基础栅格与排版逻辑，自主把控文案、素材、层次细节。
兰亭妙微ui设计公司分享：栅格系统一直是不少设计师的困惑点，无论是日常落地使用，还是理解它在产品体系中的价值，都存在诸多疑问。本文结合实际业务场景，讲解栅格的落地用法，以及各类网页布局之间的核心差异。
上期回顾：B 端设计指南：栅格的定义和使用方法 在 B 端页面设计中，很多人都会对栅格的用法感到疑惑，欢迎阅读往期文章系统了解。
聊栅格的本质，其实就是在梳理网页的布局逻辑，理清不同布局方案的区别。
网页布局，核心是解决浏览器窗口宽度与页面内容之间的适配关系。 用户会用不同尺寸的浏览器窗口访问系统，页面内容该如何响应窗口变化？主流分为四类：固定布局、流式布局、自适应布局、响应式布局。
固定布局是最简单的布局模式，页面内容尺寸完全写死，全部以px像素作为单位，页面元素不会跟随浏览器窗口缩放而改变大小。
窗口尺寸与页面内容存在两种表现：
✅ 优势：逻辑简单，设计还原成本低； ❌ 劣势：完全不做多尺寸兼容，小窗口体验较差。
适用场景：老旧政务系统、网页登录注册页等对多端适配要求很低的项目。
流式布局是基础的弹性适配方案。可以把页面内容比作 “水”，外层容器卡片就是 “杯子”；文字、图标等内容像水一样，会跟随容器（杯子）的宽度自动延展收缩，容器高度保持固定，仅宽度动态变化。
借助栅格系统定义容器的最大、最小宽度，就可以实现基础适配：
…截断，避免内容错乱。✅ 优势：开发成本低，可实现小范围屏幕尺寸适配； ❌ 劣势：屏幕尺寸跨度很大时适配效果有限。
适用场景：博客、资讯类网页，适合变化区间不大的 PC 端场景。
自适应布局会针对差异较大的屏幕，产出多套独立设计稿与代码，每套方案对应一类设备尺寸。浏览器通过屏幕断点（媒体查询@media）或者设备 UA 识别当前设备，切换对应的页面方案。
通俗来讲：桌面端、平板、移动端分别独立设计，各自一套代码。典型案例如语雀：区分桌面、移动端、小程序三套独立界面。
屏幕断点，即 CSS 的媒体查询@media，以屏幕宽度作为判断依据，切换不同布局规则。 除显示器原生物理分辨率断点，B 端 ISV 项目还会产生设计断点：例如钉钉弹窗容器 1024px、企业微信 980px、飞书 1280px，要针对这些业务特殊尺寸做布局处理。
提示：自适应不等于抛弃栅格，不同设备页面内部，依旧会使用流式布局、栅格来完成页面排版；断点只是切换整套页面，并非最终目的，如果业务场景不需要，无需强行设置断点。
✅ 优势：不同设备体验可以做到高度定制； ❌ 劣势：多套设计稿、多套代码，设计与开发维护成本高。
适用场景：需要严格区分 PC / 移动端，业务复杂度高的产品。
响应式布局在 2015 年由 Google 大力推广，初衷解决安卓设备屏幕碎片化的适配难题，YouTube 就是典型代表。 它是流式布局 + 自适应的结合体：同一套代码，适配桌面、平板、手机各类设备。在不同屏幕断点下，动态调整栅格列数、水槽宽度、页面边距，完成布局的平滑切换，不需要多套独立页面。
以 Ant Design Pro 的 B 端响应式规则举例：
表格
| 屏幕断点 | 列数 | 水槽宽度 | 页边距 | 内容宽度 |
|---|---|---|---|---|
| 576px | 4 | 24 | 24 | 528 |
| 768px | 8 | 24 | 24 | 640 |
| 992px | 12 | 24 | 24 | 688 |
| 1200px | 12 | 24 | 24 | 896 |
策略采用向下兼容，随着屏幕缩小，减少栅格列数，压缩内容区域。
✅ 优势：一套代码覆盖多设备，维护成本可控； ❌ 劣势：设计复杂度高，需要完整梳理全尺寸下页面组件、表格、卡片的表现。
适用场景：官网、中台工作台，需要兼顾 PC 与移动端访问的 B 端产品。
布局是页面的适配策略，栅格是实现布局的工具。 栅格用来定义流式布局的伸缩比例，也定义响应式布局在各个断点下的排版规则。
⚠️ B 端不要 “为了栅格而栅格”： 并不是所有页面都必须使用栅格。工作台、官网首页是栅格的高频使用场景；而表单、复杂业务详情页，往往很难套用标准栅格。
B 端小屏幕下有一个很实用的优化技巧：浏览器窗口缩小时，自动收起侧边导航，释放更多空间留给业务内容，显著提升窄屏的使用体验。
表格
| 布局类型 | 代码套数 | 适配逻辑 | 核心特征 |
|---|---|---|---|
| 固定布局 | 1 套 | 完全固定 px | 缩放窗口会出现滚动条 / 居中留白，无弹性变化 |
| 流式布局 | 1 套 | 容器百分比伸缩 | 内容跟随容器宽窄流动，适合小范围尺寸变化 |
| 自适应布局 | 多套 | 断点切换整套页面 | 不同设备独立页面，维护成本高 |
| 响应式布局 | 1 套 | 断点改变栅格参数 | 一套代码，动态调整列数、边距适配全设备 |
兰亭妙微ui设计公司分享：在 G/B 端网页项目的设计实践中，很多设计师常会陷入思路匮乏的困境，不知道该如何搭建页面版式。想要做出兼具质感与实用性的网页，不仅要吃透排版布局底层逻辑，还要把握当下的设计趋势，更要深度对接业务需求，挖掘适配项目的版式表达。而一切设计落地的前提，是搭建一套合理的页面布局框架，以此支撑信息高效传递，为流畅完整的用户体验筑牢基础。
本文分为四大模块：版式布局结构、版式设计和风格、设计策略、案例分析
网页排版，就是在浏览器可视空间内，遵循视觉表达逻辑与审美规律，结合平面设计特性，对信息内容、视觉元素进行有序编排。不同于印刷品固定长宽比例，网页尺寸具备高度自由度，设计师可以根据业务需求灵活规划页面排版空间。
网页基础布局主要分为栏式结构与区域结构两大类型。
栏式结构以竖向分割的方式，将页面划分为多列，适配不同内容与功能场景。
宽窄栏与视觉优先级：宽栏、居中位置更容易捕获用户视线；同等宽度下，三栏页面视觉权重：中间＞左侧＞右侧。设计师可以调整栏位宽窄排布，制造页面的灵活变化。
栏中栏：当单栏内信息复杂，可对栏位做二次竖向、横向切分。但过度分割会破坏栏式结构原本大气舒展的特质，页面会趋近区域结构，容易造成视觉琐碎，需要把控分割尺度。
页长与栏底：分栏线条贯通至页面底部，才能最大化体现栏式布局特征；如果页面仅一屏高度，即便采用分栏，栏式结构的氛围感也会被弱化。
栏式结构以竖向切割为主，当业务需要更多样化的信息编排，便衍生出区域结构：在竖向划分基础之上增加大量横向分割，把页面拆分为多个独立内容区块。
区域布局的自由度更高，设计师可以自主调控区块疏密节奏，插图、图形元素能够和页面框架深度融合，因此更容易打造精致、富有创意的网页效果。
核心特点
如今绝大多数网页框架，都是栏式、区域结构演化结合而来，融合栏式的大气规整与区域结构的创意美感，更好适配复杂业务与大众审美。
网页版式有七大核心设计原则，是实现美观、高可用页面的底层准则：
对齐原则：文字、图片、组件统一对齐（左对齐 / 居中 / 右对齐 / 两端对齐），提升版面整洁度，降低信息识别成本。
色彩原则：把控色调、明度、饱和度，注重色彩之间的协调性，强化页面视觉吸引力。
间距原则：合理设置字距、行距、段间距、组件外边距，保障阅读舒适度。
留白原则：预留页面空白，给视觉 “呼吸空间”，实现页面平衡。
简洁性原则：剔除多余装饰，减少冗余元素，避免页面杂乱干扰。
统一性原则：页面元素、视觉语言保持统一，强化整体感与连贯性。
重点突出原则：依靠大小、颜色、位置、形状差异，放大核心信息，引导用户视线。
AI 深度参与完整设计链路：生成参考图像提供灵感、润色页面文案，辅助布局、配色、字体调试，大幅压缩设计迭代周期，提升产出效率。
重视网站包容性：完善图片替代文本、做好响应式适配、优化色彩对比度，保障不同用户群体都可以顺畅访问网站。少量的设计投入，即可显著提升业务价值。
大模型对话能力赋能网页：自动生成产品文案、根据用户偏好定制页面内容，充当智能客服完成咨询引导，提升站点服务效率。
垂直分屏布局热度持续走高，同一页面分区展示两套信息，支持不对称视觉表达，帮助用户快速区分不同内容模块。
缓解暗光环境下的视觉疲劳，延长移动端续航，自带科技、时尚气质；设计师需要同时掌握浅色、深色两套方案的适配。
强对比、高饱和度配色，快速抓住用户注意力，打造记忆点鲜明的视觉效果。
利用竖纹模糊漫射效果处理图片、文字，增加页面层次感与精致氛围感。
点阵字体、半色调圆点背景，融合复古与未来科技感，塑造独特的页面氛围。
跳出常规渐变套路，采用混搭色彩打造艺术化、超现实的渐变效果，打造差异化视觉，但需要把控整体审美平衡。
将网格框架显性化呈现，强化页面秩序感；同时局部打破网格束缚，兼顾秩序与创意。
G 端网页既要满足业务功能诉求，也要保障优秀用户体验，核心策略如下：
项目落地两大重中之重： ① 明确目标用户需求，深度融入客户主题色，维持视觉体系统一，强化品牌识别，提升用户满意度。 ② 依托网格系统统一元素间距，完成初稿后开展用户测试，收集反馈迭代优化版式，持续提升体验。
现代网页版式早已不局限简单切分，更加注重层次表达，强化重点信息，让页面更加灵动。
版式与风格二者相辅相成，无法简单评判孰轻孰重。
实际项目中，需要结合业务目标、受众、品牌特质综合权衡：用版式保障可用性，用风格赋予页面个性，最终实现 “信息高效传达 + 优质视觉感受 + 品牌价值输出” 三者统一。
兰亭妙微ui设计公司分享：想要从零完成 PC 端网站设计，除去前期用户调研工作，画布尺寸规范、导航模式选型、布局与多端适配，是决定网页体验的三大核心板块。很多新手容易直接上手做视觉，忽略底层的尺寸、导航逻辑和适配规则，最终造成上线后页面错乱、用户操作低效等问题。本文结合行业数据、可用性实验与实战案例，拆解网站设计的关键实操要点。
画布是网页设计的起点，画布尺寸、首屏可视范围直接决定不同设备下用户看到的页面效果，需要结合设备分辨率、系统与浏览器占用空间综合考量。
根据 PC 端分辨率市场占比统计，1920×1080 是占有率最高的屏幕规格，但 1920 大屏向下兼容小屏体验较差；排名前三的分辨率 1920×1080、1366×768、1440×900 合计市场占比达 62.75%。
遵循小屏适配大屏优于大屏适配小屏的兼容原则，很多 B 端设计规范，例如阿里、Material Design，都选用 1440×900 作为设计基准画布。
小提示：如果网站面向特定内部群体，可直接以目标人群实际办公设备分辨率作为画布标准，例如企业员工统一使用 1366×768 笔记本，就以此尺寸做设计。
网页在浏览器中打开，电脑系统（Mac 菜单栏、Windows 任务栏）、浏览器界面（页签栏、地址栏、书签栏）都会占用屏幕高度，不能直接把屏幕分辨率高度当做网页首屏高度。
主流浏览器界面占用参考：
严格算法：真实首屏高度 = 屏幕分辨率高度 − 浏览器占用高度 − 系统菜单栏 / 任务栏高度 宽松算法：真实首屏高度 = 屏幕分辨率高度 − 浏览器占用高度
我们需要把核心信息、重要操作控制在首屏线以内，保证用户打开页面第一眼就能获取关键内容。
不同屏幕有对应的内容安全宽度，设计内容不要超出安全区间，避免小屏设备下内容被裁切，可参考下表：
表格
| 分辨率 | 安全宽度范围 | 推荐内容宽度 |
|---|---|---|
| 1366×768 | 1140‑1200 | 1200 |
| 1440×900 | 1140‑1200 | 1200 |
| 1920×1080 | 1200‑1400 | 1200、1400 |
实际项目中，结合安全宽度、适配方案、栅格体系，最终敲定页面内容区大小。
导航决定用户浏览、跳转页面的效率，PC 网页主流分为左侧导航和顶部导航两种模式，二者没有绝对优劣，要匹配网站业务场景来选择。
学者 JR Kingsburg 曾针对三层级菜单导航做可用性实验，对比 8 种导航组合模式，测试导航耗时、误操作、鼠标移动轨迹、用户犹豫程度。实验结果表明：一级导航采用左侧侧导航时，用户完成任务效率更高，错误更少，主观偏好度也更高。
原因在于：
但实验存在局限：实验任务都是明确的目标式操作，而现实场景中用户也存在 “漫无目的浏览” 的需求。侧导航也存在短板 —— 侧边栏占用页面横向空间，会压缩内容展示区域。
同一个网站不同页面，也可以混用两种导航。以百度为例：搜索浏览页面使用顶导航，让出空间展示搜索结果；个人中心需要修改资料、查看收藏等操作，切换为左侧导航，提升功能查找效率。
也可以做混合导航：顶部放置登录、全局搜索等通用功能，左侧承载业务菜单，兼顾浏览与操作。
200+8n，区间 208‑272px；PC 设备屏幕尺寸差异巨大，设计稿输出后，要提前和前端确认适配策略。网页主流分为固定宽度、自适应、响应式三种实现方案，配合栅格系统完成布局。
页面所有模块像素尺寸完全固定。
放弃固定 px，改用百分比、rem 单位，页面整体布局结构不变，元素随屏幕尺寸同步缩放，大多基于栅格系统实现。
栅格由列（column）、间距（gutter）、边距（margin）构成，把页面划分为多列等宽网格，约束内容排布，保证页面秩序感。栅格不只用于 PC 网页，移动端 UI 规范也大量使用简化版栅格。
依靠 CSS 媒体查询@media设置屏幕断点，不同屏幕尺寸下加载不一样的页面样式，屏幕变化时会改变模块排布，甚至增减模块。
实战建议：项目前期设计师与开发对齐适配方案，定义栅格参数，确定页面需要兼容的最大、最小屏幕断点，后续输出设计稿就可以规避大量还原问题。
网页设计不是单纯做视觉美化，画布规范决定基础体验，导航模式匹配业务场景，适配方案保障多设备可用性。在动手绘制界面之前，先把这三件事梳理清楚，能够大幅减少后期改稿，实现更流畅的网页用户体验。
兰亭妙微ui设计公司分享：在 B 端业务场景中，官网承载着企业行业解决方案对外输出的核心使命。相比后台产品高频迭代组件、页面的模式，B 端官网更多改动来自运营侧的内容调整，很难直接套用组件库快速沉淀一套标准化设计方法论，这也是很多设计师做官网时的困惑。
经过大量项目实践与复盘，我梳理出一套可落地的 B 端官网设计思路。本文结合行业案例，从心流体验视角拆解 B 端官网完整设计逻辑，希望能给各位设计师带来参考与启发。
B 端官网是集产品展示、资讯动态、线上获客于一体的商业平台，也是企业对接潜在客户最重要的沟通窗口。它不仅对外输出企业形象，还承接产品体验入口、表单留资、客服咨询等自助服务，在降低企业人力成本的同时，为客户提供一站式信息获取渠道。
当下 B 端赛道同质化严重，官网早已不止 “展示企业、介绍产品” 这么简单，塑造差异化品牌认知成为核心诉求。
但差异化不等于盲目猎奇。过度追求个性、形式大于内容的页面，会严重损害浏览体验，反而阻碍信息传递。
因此 B 端官网设计需要把握平衡：兼顾品牌独特性与用户浏览体验，用设计讲好产品价值，抓住潜在客户注意力，最终实现从访客到注册、付费客户的转化闭环。
心流由心理学家米哈里・契克森米哈伊 1975 年提出，属于认知心理学范畴，指人在投入某件事时完全沉浸、高度专注，忽略外界干扰，甚至忘记时间流逝，在能力与任务难度匹配的状态下获得愉悦感。
放到 B 端官网场景：心流就是潜在客户浏览页面时高度专注，高效获取有效信息，顺利找到注册、试用等转化入口的状态。
心流模型横轴代表用户认知 / 技能水平，纵轴代表任务挑战难度。二者高低组合，会生成觉醒、心流、控制、厌倦、放松、担忧、冷漠、焦虑 8 种用户情绪：
Novak 和 Hoffman 将心流 9 大特征归纳为三类因素：条件因素、体验因素、结果因素。这套框架刚好可以直接指导官网设计：
条件因素是触发心流的前提，核心做好两件事：信息分层、明确转化目标。
信息分层是对页面信息做归类、权重排序，把庞杂业务信息拆解成模块化内容。
B 端官网经典模块顺序：导航栏→首焦→核心优势→产品介绍→业务数据→客户案例→售后服务→品牌背书→免费试用 CTA→页脚 Footer。
这套排布逻辑贴合 B 端客户决策路径：
CTA（Call‑to‑Action，行为召唤），即引导用户行动的按钮，B 端官网常见文案：免费体验、注册账号、申请演示。依靠高对比度视觉，吸引访客点击，直接影响留资、注册转化率。
优化 CTA 按钮的实操要点：
完成底层信息架构后，需要通过视觉与交互维持用户沉浸，分为形式节奏、互动感知两大板块。
“立” 代表整套视觉体系，包含布局、内容密度、色彩、字体系统。B 端官网主流布局共三类，各有优劣，需要结合业务调性选型：
表格
| 布局类型 | 优势 | 劣势 |
|---|---|---|
| 固定版心 | 开发成本低，兼容性好 | 屏幕空间利用率低 |
| 宽度自适应 | 内容承载量大，屏效高 | 适配逻辑复杂，开发成本高 |
| 单屏切换 | 沉浸式浏览，仪式感强 | 不支持快速滚动浏览，查看效率低 |
不同行业也适配不同视觉语言：云产品多用 3D 渲染元素；数码硬件偏向实景摄影；OA 协同工具偏好简约线稿，凸显高效干练。
统一之上做变化，避免页面单调疲劳，通过破形、破色、破域、破静四种手法制造差异化：
细微的微交互，是 “触发‑反馈” 的组合。用户操作界面后获得即时反馈，就像界面在和用户对话，强化掌控感。
官网合理运用微交互有两个价值：
当用户被内容吸引、持续浏览之后，最后一步就是顺畅完成注册 / 留资，完成完整心流闭环。
冗长复杂的表单是 B 端官网流失用户的重灾区，优化方向有两点：简化表单 + 优化文案。
参考 Teambition、Miro 等产品的设计：首页直接露出核心转化入口，仅保留少量必填项，点击 CTA 直接跳转流程，最大程度提升最终转化率。
本文借助心流理论，从条件、体验、结果三个维度完整拆解 B 端官网设计。在商业环境快速变化的当下，设计出能够引导用户进入心流状态的官网，既是业务获客的需要，也是体验设计师的专业追求。心流不仅提升用户满意度，更能助力业务目标落地。
设计之路漫漫，期待和大家一起交流、共同成长。
蓝蓝设计的小编 http://www.lanlanwork.com