做中后台系统的设计师，经常面临一个尴尬：C 端产品拼颜值、拼创意，后台产品拼的却是 "信息密度" 和 "操作效率"。同样的设计手法，用在 C 端是加分，用在后台可能就是灾难。

画原型只是最终的输出手段。交互设计的真正价值，在于把一个模糊的业务需求，一步步转化为用户可以顺畅操作的界面。这个过程有清晰的方法论，不是凭感觉画出来的。

全文速览

兰亭妙微ui设计公司分享：AI 设计工程化，核心是从交付静态设计稿，升级为直接交付可落地的工程代码，尤其适配页面结构标准化、组件高度复用的 B 端业务场景。整套工作流有 5 个关键转变：

1. 交付物革新：不再输出设计稿，直接产出工程代码，消除设计到开发的二次翻译损耗
2. 流程自动化：把设计师与 IDE 反复沟通的环节沉淀为 SOP‑Skill，降低人工交互成本
3. 质量设计驱动：按照「业务流程→页面框架→组件复用→全局样式」的设计思维组织 Skill，引导 AI 生成符合业务逻辑的页面
4. 规范分层维护：Design Token、布局、基础组件统一托管；各业务线独立维护业务专属规范，避免上下文膨胀
5. 设计师把控质量：AI 是加速器，标准页面目标达成 80‑90% 提效，但模型幻觉与能力边界客观存在，设计师不能缺位质量校验

一、背景：AI 时代，B 端设计师还只能输出设计稿吗？

随着大模型快速普及，很多团队都在尝试用 AI 提升设计产能，但 AI 对不同类型需求的价值截然不同：

• 标准型需求：页面结构固定、组件复用率高、视觉自由度低、业务链路稳定，AI 理解效果最好，适合规模化提效；
• 定制 / 创意型需求：无统一范式、高度依赖业务定制，AI 更多用于发散思路、启发创意，很难直接产出终版交付物。

以淘宝闪购商家 B 端推广业务为例，业务月均 20 个需求，72% 都属于标准型页面，需求密度高、重复模式多，非常适合落地 AI 设计提效。这也抛出一个行业思考题：AI 浪潮下，设计师的产出是否可以跨过设计稿，参与到代码落地环节？本次实践就是围绕这个命题展开的实战探索。

二、技术选型：为什么选择 AI 设计工程化？

市面上 AI 赋能 UI 一共有 4 条主流实现路径，彼此核心差异在于最终交付产物：

表格

重点区分：HTML 更偏向模型输出的 “效果图”，而 React 工程代码是可直接参与项目迭代的真实产物。

AI 设计工程化两大核心优势

1. 强标准化：设计师交付产物直接对接业务代码库，研发可直接复用，省去设计稿、HTML 到工程代码的二次转译环节；
2. 高效降沟通成本：规避标注、切图等重复劳动，页面还原度接近 100%，设计‑研发之间的还原走查沟通趋近于零。

三、落地全流程：完整跑通 AI 设计工程化

整套落地分为五大阶段：

1. 前期准备：安装基础 Skill、业务流程 SOP‑Skill；
2. 仓库准备：创建设计代码仓库，创建业务开发分支；
3. 业务理解：输入 PRD 并转为结构化文档，确认 AI 对业务理解无误；
4. 一键生成设计：依据 PRD 与 Skill 驱动 AI 生成页面，完成双重 AI 校验，人工验收页面效果；
5. 推送交付：推送代码至目标分支，完成构建，交付可用代码与设计产物。

四、落地两大核心难点与解法

难点 1：全新协作模式，设计师能力边界发生变化

传统模式设计师输出效果图，而 AI 工程化模式下，设计师需要触达下游实现环节，完成从 “交付图纸” 到 “交付代码” 的转变。实践中设计师会额外承担约 30% 原属于前端的工作，带来两类痛点：

1. 不熟悉全新工作流，不知道如何推进项目；
2. 高度依赖设计师与 IDE 多轮对话，反复调试，整体效率偏低。

✅ 解决方案：联动研发沉淀SOP‑Skill，把完整流程固化，实现流程自动化，降低普通设计师上手门槛，提升工程部署效率。

难点 2：AI 生成质量不可控，如何稳定输出？

核心思路：用设计师的思考逻辑定义 Skill，搭建高质量生成框架，沉淀可复用经验。

1. 内容层：复刻设计师思维路径 设计师处理需求的完整链路：理解业务→梳理业务流程→确定页面框架→选用对应组件→对齐全局样式规范。把这套链路抽象为「业务流程‑页面框架‑组件使用‑全局样式」四步，作为 Skill 的底层逻辑，同时调研多款 AI‑UI 工具，摸清模型能力边界。
2. 框架层：轻量简洁原则 初期设想父子嵌套多层 Skill，但是层级复杂会干扰 AI 理解。最终收敛为单设计 Skill，遵循轻量、渐进式信息披露的设计原则。
3. 资产共建维护机制，规避上下文爆炸 不把所有业务规范塞进同一个 Skill，避免文件膨胀。

• 统一维护：Design Token、布局规则、基础组件、基础模板这类通用资产；
• 业务规范：交由各业务设计师独立维护，各司其职，兼顾通用性与业务差异化。

五、业务数据结果与未来展望

针对 B 端推广标准页面，本次实战拿到明确提效结果：

• 设计侧整体提效 51%：其中设计输出环节提效 40%，还原走查环节提效 90%；随着设计资产持续完善、设计与前端持续磨合，标准页面还有更大提升空间；
• 研发侧整体提效 38%：研发无需手写样式代码，可以聚焦后端业务逻辑；代码输出环节提效 25%，走查还原环节提效 90%。

团队长期目标：标准型页面实现80‑90% 设计提效，持续迭代优化。同时需要客观看待 AI 的局限：受限于模型能力与幻觉问题，现阶段无法完全替代设计师，质量把关依旧必须由人完成。

新模式对设计师的能力新要求

1. 更体系化的设计思维：跳出感性经验，学会分层拆解业务与界面；
2. 更全栈的产品能力：向前做架构设计，向后掌握基础代码认知，实现自我闭环；
3. 主动解决问题意识：不能被动等待研发排期，主动保障业务最终用户体验。

AI 是强大加速器，而非替代者。设计工程化不是让设计师写前端，而是让设计资产真正以代码形态流入产品生产链路。

转载：优设

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

兰亭妙微ui设计公司分享：界面看着粗糙、精致度不足，却找不到优化切入点？首页顶部 Banner（广告大图）往往就是问题的关键。

界面配图除普通素材填充之外，还包含运营广告类素材。二者属性不同，排版逻辑也存在明显差异。如果 Banner 处理草率，会直接拉低整个页面的视觉质感，尤其是 App 首页顶部的大广告位，设计失当带来的负面影响尤为突出。

今天我们聚焦首页顶部 Banner，系统讲解它的设计思路与落地方法。

一、顶部 Banner 的两大类型

早年绝大多数 App 首页都会配置顶部 Banner 模块，如今不少产品已经将该组件移除，或是下移至页面中下部（如淘宝、京东）。但依然大量产品在首页或二级页面保留了这类布局逻辑。

按照用途，Banner 可以分为固定广告图与运营活动图两类：

1. 固定广告图 具备标准化布局与设计规范，支持高频更新，部分由系统模板、算法自动生成。分为两种实现形式：一是完整图片；二是「图片背景 + 系统 UI 文字」分层渲染。

分层渲染的优势在于：文字可后台快速编辑替换；背景与文字分层，能够实现视差等差异化动效。

2. 运营活动图 多为大促、专题活动使用，以整张合成图片为主，一般不使用系统 UI 文本。无固定版式，优先烘托活动氛围，对和产品 UI 体系的统一性要求较低。

   

二、固定 Banner 的核心设计原则

固定广告图想要做到稳妥耐看，需要守住 4 条基础准则：

1. 标题信息清晰醒目，字号充足，文字和背景对比度足够；
2. 标题优先选用黑体，笔画简洁、边缘干净利落；
3. 画面主体识别度高，色彩与背景拉开对比，保证主体突出；
4. 版式尽量简化，优先选用左右布局、居中布局两种成熟范式。

正式设计前，需要先选定版式，搭建对应的栅格参考系统，约束元素摆放位置。移动端 App Banner 最常用的就是左右布局、居中布局。左右布局兼容性强、不容易翻车，但相对普通；居中布局视觉冲击力更强，对素材、场景有一定要求。

方案 1：左右布局 Banner（万金油版式）

左右布局需要先定义四周边距参考线，四边内边距无需完全均等：

• 上边：参考线位置低于搜索框，保证核心内容不会被搜索框遮挡、切割。
• 左边：作为文案对齐基准。文本左内边距要大于页面通用边距的 2 倍，避免文字过于贴边拥挤，不必强制和下方列表内容对齐。
• 下边：预留轮播指示器（圆点）的空间，先确定指示器高度位置，再划定内容下边界。
• 右边：主体图形侧不需要严格约束边距，允许图形适度溢出，重点把控画面重心即可。

四边约束完成后，继续细化栅格：增加垂直中线分割画面；绘制水平参考线约束文案垂直位置；设置右侧竖线对齐主体图形中轴线。

栅格搭建完成后落地流程：

1. 选用黑体，设置大字号输入主标题，完成基础排版；
2. 遵循亲密性原则：标题上方放置标签，下方排布副标题、行动按钮，信息层级自上而下递减；
3. 导入产品 / 实物素材，把视觉重心锁定在预设主体区域；简单实物素材可以借助 AI 辅助生成；
4. 细节微调：为标题增加轻量化修饰，搭配细线条、少量装饰字体；优化背景，给主体增加柔和投影。

注意：修饰效果点到为止。目标是用最少的加工提升完成度，不要按照 H5 大促主视觉的标准做过度复杂的特效。

方案 2：居中布局 Banner（强视觉版式）

居中布局分为两种形式：①标题在上，主体在下；②标题与主体全部居中，文字叠加于主体之上。

第一种适合 Banner 高度充足的场景；移动端首页 Banner 高度普遍偏扁，因此文字 + 主体叠加居中是更常用的形式。

栅格搭建要点：

• 上下预留安全边距逻辑和左右布局一致；左右边距要进一步放大，限制主体尺寸，防止画面元素过大造成视觉过载。
• 设置垂直中轴，用于全部元素居中对齐；设置偏上的水平参考线放置主标题。

✨视觉小知识：Banner 视觉会向上延伸到状态栏区域，如果标题严格放在画布正中，人眼观感会觉得整体偏下。因此核心标题应当摆放在画布中上位置，实现视觉平衡。

栅格就绪后填入标题、辅助文案与主体图形，再做细节打磨。

⚠️素材避雷：细长型物体（黄瓜、眉笔、香蕉等）不适合居中版式，优先选择轮廓饱满、比例适中的主体素材。

背景简易处理技巧（非实景场景）：不直接使用完整场景图，采用「纯色 + 弥散光斑」。从主体物体取色微调作为底色，叠加半透明模糊圆形光斑，高效做出柔和的层次氛围。

三、新手避坑指南

这套方法不会做出惊艳炸裂的效果，但可以有效避免凭感觉设计带来的各种问题，适配 UI 界面的整体调性，做到安全、合格、不出错。

很多新人会追求一步到位做出高表现力 Banner，但复杂视觉效果对平面功底要求很高，仅靠框架模板很难驾驭。新手应当优先夯实基础落地能力，牢记以下禁忌：

1. 慎用 AI 生成细节繁杂的 3D 主体。细碎元素过多，会倒逼字体、背景同步增加复杂度，极易造成 Banner 顶部视觉过载。
2. 不要盲目照搬强场景化案例。优秀场景 Banner 的字体、光影、元素全部为特定氛围定制，新手直接临摹很容易翻车。

重点认知：Banner 只是 UI 界面的其中一个模块，不需要它抢尽风头。不给整体界面拖后腿，就是合格的 Banner。

四、最后总结

Banner 设计不能完全依赖 AI 一键生成，AI 痕迹过重的广告图会严重降低界面品质。设计师需要掌握基础栅格与排版逻辑，自主把控文案、素材、层次细节。

转载：优设

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

兰亭妙微ui设计公司分享：栅格系统一直是不少设计师的困惑点，无论是日常落地使用，还是理解它在产品体系中的价值，都存在诸多疑问。本文结合实际业务场景，讲解栅格的落地用法，以及各类网页布局之间的核心差异。

上期回顾：B 端设计指南：栅格的定义和使用方法 在 B 端页面设计中，很多人都会对栅格的用法感到疑惑，欢迎阅读往期文章系统了解。

聊栅格的本质，其实就是在梳理网页的布局逻辑，理清不同布局方案的区别。

网页布局，核心是解决浏览器窗口宽度与页面内容之间的适配关系。 用户会用不同尺寸的浏览器窗口访问系统，页面内容该如何响应窗口变化？主流分为四类：固定布局、流式布局、自适应布局、响应式布局。

一、固定布局（Static Layout）

固定布局是最简单的布局模式，页面内容尺寸完全写死，全部以px像素作为单位，页面元素不会跟随浏览器窗口缩放而改变大小。

窗口尺寸与页面内容存在两种表现：

1. 浏览器窗口大于页面设定宽度：页面整体居中，两侧留白；
2. 浏览器窗口小于页面设定宽度：页面出现横向滚动条。

   

✅ 优势：逻辑简单，设计还原成本低； ❌ 劣势：完全不做多尺寸兼容，小窗口体验较差。

适用场景：老旧政务系统、网页登录注册页等对多端适配要求很低的项目。

二、流式布局（Liquid Layout）

流式布局是基础的弹性适配方案。可以把页面内容比作 “水”，外层容器卡片就是 “杯子”；文字、图标等内容像水一样，会跟随容器（杯子）的宽度自动延展收缩，容器高度保持固定，仅宽度动态变化。

借助栅格系统定义容器的最大、最小宽度，就可以实现基础适配：

• 窗口超过容器最大宽度：内容固定，右侧留白；
• 窗口小于容器最小宽度：触发横向滚动条；
• 内容溢出容器：文字使用省略号…截断，避免内容错乱。

✅ 优势：开发成本低，可实现小范围屏幕尺寸适配； ❌ 劣势：屏幕尺寸跨度很大时适配效果有限。

适用场景：博客、资讯类网页，适合变化区间不大的 PC 端场景。

三、自适应布局（Adaptive Layout）

自适应布局会针对差异较大的屏幕，产出多套独立设计稿与代码，每套方案对应一类设备尺寸。浏览器通过屏幕断点（媒体查询@media）或者设备 UA 识别当前设备，切换对应的页面方案。

通俗来讲：桌面端、平板、移动端分别独立设计，各自一套代码。典型案例如语雀：区分桌面、移动端、小程序三套独立界面。

核心概念：屏幕断点

屏幕断点，即 CSS 的媒体查询@media，以屏幕宽度作为判断依据，切换不同布局规则。 除显示器原生物理分辨率断点，B 端 ISV 项目还会产生设计断点：例如钉钉弹窗容器 1024px、企业微信 980px、飞书 1280px，要针对这些业务特殊尺寸做布局处理。

提示：自适应不等于抛弃栅格，不同设备页面内部，依旧会使用流式布局、栅格来完成页面排版；断点只是切换整套页面，并非最终目的，如果业务场景不需要，无需强行设置断点。

✅ 优势：不同设备体验可以做到高度定制； ❌ 劣势：多套设计稿、多套代码，设计与开发维护成本高。

适用场景：需要严格区分 PC / 移动端，业务复杂度高的产品。

四、响应式布局（Responsive Layout）

响应式布局在 2015 年由 Google 大力推广，初衷解决安卓设备屏幕碎片化的适配难题，YouTube 就是典型代表。 它是流式布局 + 自适应的结合体：同一套代码，适配桌面、平板、手机各类设备。在不同屏幕断点下，动态调整栅格列数、水槽宽度、页面边距，完成布局的平滑切换，不需要多套独立页面。

以 Ant Design Pro 的 B 端响应式规则举例：

表格

策略采用向下兼容，随着屏幕缩小，减少栅格列数，压缩内容区域。

✅ 优势：一套代码覆盖多设备，维护成本可控； ❌ 劣势：设计复杂度高，需要完整梳理全尺寸下页面组件、表格、卡片的表现。

适用场景：官网、中台工作台，需要兼顾 PC 与移动端访问的 B 端产品。

布局与栅格的关系

布局是页面的适配策略，栅格是实现布局的工具。 栅格用来定义流式布局的伸缩比例，也定义响应式布局在各个断点下的排版规则。

⚠️ B 端不要 “为了栅格而栅格”： 并不是所有页面都必须使用栅格。工作台、官网首页是栅格的高频使用场景；而表单、复杂业务详情页，往往很难套用标准栅格。

B 端小屏幕下有一个很实用的优化技巧：浏览器窗口缩小时，自动收起侧边导航，释放更多空间留给业务内容，显著提升窄屏的使用体验。

补充：四种布局快速对比

表格

转载：优设

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

前言

兰亭妙微ui设计公司分享：在 G/B 端网页项目的设计实践中，很多设计师常会陷入思路匮乏的困境，不知道该如何搭建页面版式。想要做出兼具质感与实用性的网页，不仅要吃透排版布局底层逻辑，还要把握当下的设计趋势，更要深度对接业务需求，挖掘适配项目的版式表达。而一切设计落地的前提，是搭建一套合理的页面布局框架，以此支撑信息高效传递，为流畅完整的用户体验筑牢基础。

本文分为四大模块：版式布局结构、版式设计和风格、设计策略、案例分析

一、版式布局结构

网页排版，就是在浏览器可视空间内，遵循视觉表达逻辑与审美规律，结合平面设计特性，对信息内容、视觉元素进行有序编排。不同于印刷品固定长宽比例，网页尺寸具备高度自由度，设计师可以根据业务需求灵活规划页面排版空间。

网页基础布局主要分为栏式结构与区域结构两大类型。

1. 栏式结构

栏式结构以竖向分割的方式，将页面划分为多列，适配不同内容与功能场景。

（1）栏式结构分类

• 二栏式：页面分割为两列，一般左侧承载核心内容，右侧放置辅助信息、公告或广告。结构简洁清爽，适合信息体量适中、需要突出主体内容的页面。
• 三栏式：中间为宽度占比更大的主内容区，左右两栏作为导航、辅助资讯模块。能够承载海量信息，多用于资讯更新频繁的平台。用户视觉会优先聚焦中间栏位，其次为左侧，最后浏览右侧内容。实际项目中无需全站强制三栏，内页可以切换为二栏、通栏灵活适配内容。
• 四栏 / 五栏式：应用场景相对有限，过多分栏容易造成页面拥挤，干扰信息阅读。
• 通栏（无分栏）：不做竖向切分，整块页面作为内容载体，适合文章阅读页、注册表单等大段文字场景。

  

宽窄栏与视觉优先级：宽栏、居中位置更容易捕获用户视线；同等宽度下，三栏页面视觉权重：中间＞左侧＞右侧。设计师可以调整栏位宽窄排布，制造页面的灵活变化。

栏中栏：当单栏内信息复杂，可对栏位做二次竖向、横向切分。但过度分割会破坏栏式结构原本大气舒展的特质，页面会趋近区域结构，容易造成视觉琐碎，需要把控分割尺度。

页长与栏底：分栏线条贯通至页面底部，才能最大化体现栏式布局特征；如果页面仅一屏高度，即便采用分栏，栏式结构的氛围感也会被弱化。

（2）栏式结构核心特点

1. 逻辑清晰：明确的分栏边界，帮助用户快速定位目标信息
2. 灵活适配：可按需调整分栏数量，匹配差异化业务内容
3. 信息高密度：有限页面空间内承载更多资讯，适合资讯类站点
4. 阅读友好：规整排布降低用户的信息获取成本，优化浏览体验

（3）栏式结构适用场景

• 新闻门户、资讯博客等信息量大、更新频繁的网站（优先三栏式）
• 产品展示站点，利用二栏 / 三栏排布产品图文、操作按钮
• 文章详情、表单页面，优先选用通栏布局，避免阅读被割裂

2. 区域结构

栏式结构以竖向切割为主，当业务需要更多样化的信息编排，便衍生出区域结构：在竖向划分基础之上增加大量横向分割，把页面拆分为多个独立内容区块。

区域布局的自由度更高，设计师可以自主调控区块疏密节奏，插图、图形元素能够和页面框架深度融合，因此更容易打造精致、富有创意的网页效果。

核心特点

1. 高度灵活：区块可自由拆分重组，适配多样化的内容模块
2. 信息分层：通过区块松紧排布，区分信息优先级，突出重点内容
3. 创意表现力强：给予设计师充足发挥空间，塑造个性化页面气质
4. 必须兼顾响应式：需要适配多终端屏幕尺寸；移动端按钮、链接尺寸要满足触控操作要求，保障移动端可用性。

   

如今绝大多数网页框架，都是栏式、区域结构演化结合而来，融合栏式的大气规整与区域结构的创意美感，更好适配复杂业务与大众审美。

二、网页版式设计和风格

网页版式有七大核心设计原则，是实现美观、高可用页面的底层准则： 

对齐原则：文字、图片、组件统一对齐（左对齐 / 居中 / 右对齐 / 两端对齐），提升版面整洁度，降低信息识别成本。 

色彩原则：把控色调、明度、饱和度，注重色彩之间的协调性，强化页面视觉吸引力。

 间距原则：合理设置字距、行距、段间距、组件外边距，保障阅读舒适度。

 留白原则：预留页面空白，给视觉 “呼吸空间”，实现页面平衡。

简洁性原则：剔除多余装饰，减少冗余元素，避免页面杂乱干扰。

 统一性原则：页面元素、视觉语言保持统一，强化整体感与连贯性。

重点突出原则：依靠大小、颜色、位置、形状差异，放大核心信息，引导用户视线。

当下主流网页设计趋势

1.AI 辅助网页设计

AI 深度参与完整设计链路：生成参考图像提供灵感、润色页面文案，辅助布局、配色、字体调试，大幅压缩设计迭代周期，提升产出效率。

2. 可访问性网页设计

重视网站包容性：完善图片替代文本、做好响应式适配、优化色彩对比度，保障不同用户群体都可以顺畅访问网站。少量的设计投入，即可显著提升业务价值。

3.AI 聊天机器人集成

大模型对话能力赋能网页：自动生成产品文案、根据用户偏好定制页面内容，充当智能客服完成咨询引导，提升站点服务效率。

4. 分屏布局网页设计

垂直分屏布局热度持续走高，同一页面分区展示两套信息，支持不对称视觉表达，帮助用户快速区分不同内容模块。

5. 深色模式网页设计

缓解暗光环境下的视觉疲劳，延长移动端续航，自带科技、时尚气质；设计师需要同时掌握浅色、深色两套方案的适配。

6. 高饱和鲜艳色彩

强对比、高饱和度配色，快速抓住用户注意力，打造记忆点鲜明的视觉效果。

7. 长虹玻璃效果

利用竖纹模糊漫射效果处理图片、文字，增加页面层次感与精致氛围感。

8. 点阵屏网页设计

点阵字体、半色调圆点背景，融合复古与未来科技感，塑造独特的页面氛围。

9. 抽象渐变网页设计

跳出常规渐变套路，采用混搭色彩打造艺术化、超现实的渐变效果，打造差异化视觉，但需要把控整体审美平衡。

10. 显性网格边界设计

将网格框架显性化呈现，强化页面秩序感；同时局部打破网格束缚，兼顾秩序与创意。

三、G 端网页设计策略

G 端网页既要满足业务功能诉求，也要保障优秀用户体验，核心策略如下：

1. 厘清目标用户与真实需求：研究用户特征、行为习惯，基于需求定义网页功能模块。
2. 打磨高品质界面表现：精选配色体系、排版与图标，善用定制插图、动效、特殊图形，提升页面高级感。
3. 极致的用户体验：完善响应式适配；优化加载速度、导航链路，降低交互操作成本。
4. 精细化内容输出：打磨文案深度，选用高质量图像与插图，传递专业的品牌气质。
5. 简洁有序的导航系统：菜单、内链逻辑清晰，让用户快速找到目标信息。
6. 坚守品牌一致性：统一复用品牌色、标识、字体，强化品牌认知。
7. 优化交互逻辑：参考费茨定律优化控件尺寸；运用席克定律减少无效选项，简化用户操作路径。
8. AI 工具赋能设计：借助 AI 获取创意灵感，快速输出草图，优化视觉方案。
9. 接入对话机器人：集成 AI 客服，实现个性化服务。
10. 对标优秀案例学习：参考成熟网页的布局、配色、交互，转化适配自身项目。

项目落地两大重中之重： ① 明确目标用户需求，深度融入客户主题色，维持视觉体系统一，强化品牌识别，提升用户满意度。 ② 依托网格系统统一元素间距，完成初稿后开展用户测试，收集反馈迭代优化版式，持续提升体验。

四、案例分析

现代网页版式早已不局限简单切分，更加注重层次表达，强化重点信息，让页面更加灵动。

1. 自由编排网站（Nicepage）：对比 Web2.0 与 Web3.0 设计，新版跳出刻板分割，模块排布更自由，视觉层次更加丰富。
2. 校园官网迭代案例：作为学校形象窗口，页面运用重复、对称等构图手法，兼顾校园文化传递、资讯展示，经过多版迭代打磨版式，平衡信息密度与页面美观。

总结

版式与风格二者相辅相成，无法简单评判孰轻孰重。

• 版式设计的价值：搭建信息骨架，实现清晰高效的信息传递，减轻用户视觉负担，也是品牌视觉体系的重要组成。
• 设计风格的价值：抓取用户注意力，传递品牌情绪、文化理念，实现差异化竞争，和竞品拉开差距。

实际项目中，需要结合业务目标、受众、品牌特质综合权衡：用版式保障可用性，用风格赋予页面个性，最终实现 “信息高效传达 + 优质视觉感受 + 品牌价值输出” 三者统一。

转载：优设

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

北京兰亭妙微 UI 设计公司，成立 16 年来，始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势，从中提炼可落地的设计方法论，分享给同样热爱设计的你。

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

• 核心痛点解决：针对传统工作流中“通话、CRM、日历、消息”四端割裂的现状，SoftPhone 提出了“The whole loan call, in one app”的理念。
• 角色聚焦：专为贷款专员（Loan Officer）设计，强调在通话过程中保持专注，避免因切换应用而打断与借款人的沟通流。
• AI 赋能：AI 不仅仅是后台算法，更是前台的“副驾驶”，负责自动起草回复、实时转录通话内容以及生成通话摘要，将专员从繁琐的记录工作中解放出来。

二、信息架构：把功能转译为沟通的工作流

• 概览层（Overview）：首页即仪表盘，以巨大的半圆环仪表展示“本月总通话时长”，并将未接来电（Missed calls）作为高优先级任务悬浮展示，确保专员一眼看到待办事项。
• 执行层（Conversations & Calls）：打破传统电话本逻辑，采用“对话流”设计。通话记录与短信/IM 消息合并在同一个时间轴中，确保每一次触达（Touchpoint）都有上下文可循。
• 辅助层（Calendar & Stats）：日历模块直接嵌入“下一个会议”提醒，支持在不离开当前界面的情况下快速调整日程；统计模块则将月度数据转化为直观的柱状图，支持周报/月报一键发送。

三、关键交互：从手动记录走向自动化流转

• AI 实时辅助：在通话界面，AI 能根据情境（如迟到）自动起草得体的短信回复；通话结束后，系统自动生成完整的文字转录（Transcript）和摘要，无需人工打字。
• 悬浮与多任务：设计中大量运用悬浮卡片（如 Recent recordings），允许用户在查看日历或统计数据时，依然能控制通话或收听录音，保持工作流的连续性。
• 数据可视化反馈：将枯燥的通话时长转化为动态的仪表盘，未接来电数量直接显示在首页显眼位置，利用视觉压力驱动用户进行回访（Call back）。

四、视觉系统：专业信任感与情绪安抚的平衡

• 色彩心理学：主色调采用深邃的皇家蓝（Royal Blue）搭配柔和的浅蓝渐变。蓝色在金融领域代表信任、稳重与科技，大面积的蓝色背景能有效降低高压工作环境下的焦虑感。
• 卡片式布局：采用大圆角白色卡片承载内容，在深色或渐变背景上形成清晰的层级。这种设计不仅现代，还能有效区隔不同的功能模块（如通话列表、统计图表）。
• 品牌一致性：从 App 图标、工牌设计到 Apple Watch 界面，甚至社交媒体海报，都保持了高度统一的“S”形 Logo 和蓝白配色，强化了企业级产品的专业形象。

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

• 对产品经理：最值得借鉴的是“场景化整合”的思路。不要为了做功能而做功能，而是要思考用户在特定场景下（如正在打电话时）还需要什么信息（如客户资料、下一步日程）。SoftPhone 证明了将低频但必要的功能（如看报表）高频化展示的价值。
• 对设计团队：学习如何处理复杂数据的“轻量化”表达。通过仪表盘、进度条等图形化元素，让原本需要阅读大量文字才能获取的信息（如通话时长对比、未接比例）变得一目了然。

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

• 隐私与合规：作为金融工具，通话录音和 AI 转录涉及极高的隐私敏感度。设计中应增加明确的录音提示状态（如波形图变色），并在设置中提供便捷的数据删除选项。
• 信息密度控制：首页的仪表盘虽然直观，但如果数据项过多（如增加了转化率、平均通话时长等），可能会显得拥挤。建议提供自定义仪表盘功能，允许专员关注自己最核心的指标。
• 弱网环境体验：考虑到专员可能在外出跑业务时使用，需重点优化弱网下的通话质量和数据同步机制，避免 AI 转录失败导致的体验断层。

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

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

经常有人问兰亭妙微的设计师："你们做交互设计，每天到底在干什么？是画原型吗？"

画原型只是最终的输出手段。交互设计的真正价值，在于把一个模糊的业务需求，一步步转化为用户可以顺畅操作的界面。这个过程有清晰的方法论，不是凭感觉画出来的。

很多人觉得运营活动页就是 "堆商品、放红包、写大字"，视觉够热闹就行。但兰亭妙微在做了大量运营项目后发现：活动页的转化高低，视觉风格只是表层，真正决定效果的是交互设计 —— 用户进来后知不知道往哪走、愿不愿意往下逛、最后会不会下单和分享。

兰亭妙微ui设计公司分享：想要从零完成 PC 端网站设计，除去前期用户调研工作，画布尺寸规范、导航模式选型、布局与多端适配，是决定网页体验的三大核心板块。很多新手容易直接上手做视觉，忽略底层的尺寸、导航逻辑和适配规则，最终造成上线后页面错乱、用户操作低效等问题。本文结合行业数据、可用性实验与实战案例，拆解网站设计的关键实操要点。

一、画布与内容区：定好页面的基础框架

画布是网页设计的起点，画布尺寸、首屏可视范围直接决定不同设备下用户看到的页面效果，需要结合设备分辨率、系统与浏览器占用空间综合考量。

1. 画布尺寸，参考真实设备分辨率

根据 PC 端分辨率市场占比统计，1920×1080 是占有率最高的屏幕规格，但 1920 大屏向下兼容小屏体验较差；排名前三的分辨率 1920×1080、1366×768、1440×900 合计市场占比达 62.75%。

遵循小屏适配大屏优于大屏适配小屏的兼容原则，很多 B 端设计规范，例如阿里、Material Design，都选用 1440×900 作为设计基准画布。

小提示：如果网站面向特定内部群体，可直接以目标人群实际办公设备分辨率作为画布标准，例如企业员工统一使用 1366×768 笔记本，就以此尺寸做设计。

2. 计算真实首屏可视高度

网页在浏览器中打开，电脑系统（Mac 菜单栏、Windows 任务栏）、浏览器界面（页签栏、地址栏、书签栏）都会占用屏幕高度，不能直接把屏幕分辨率高度当做网页首屏高度。

主流浏览器界面占用参考：

• Chrome：页签栏 40px + 地址栏 46px + 书签栏 34px，合计 120px
• Safari：页签栏 28px + 地址栏 52px，合计 80px

严格算法：真实首屏高度 = 屏幕分辨率高度 − 浏览器占用高度 − 系统菜单栏 / 任务栏高度 宽松算法：真实首屏高度 = 屏幕分辨率高度 − 浏览器占用高度

我们需要把核心信息、重要操作控制在首屏线以内，保证用户打开页面第一眼就能获取关键内容。

3. 各分辨率安全内容宽度

不同屏幕有对应的内容安全宽度，设计内容不要超出安全区间，避免小屏设备下内容被裁切，可参考下表：

表格

实际项目中，结合安全宽度、适配方案、栅格体系，最终敲定页面内容区大小。

二、导航模式选型：左导航 vs 顶导航

导航决定用户浏览、跳转页面的效率，PC 网页主流分为左侧导航和顶部导航两种模式，二者没有绝对优劣，要匹配网站业务场景来选择。

1. 可用性实验结论：任务场景侧导航效率更高

学者 JR Kingsburg 曾针对三层级菜单导航做可用性实验，对比 8 种导航组合模式，测试导航耗时、误操作、鼠标移动轨迹、用户犹豫程度。实验结果表明：一级导航采用左侧侧导航时，用户完成任务效率更高，错误更少，主观偏好度也更高。

原因在于：

1. 左侧导航利用换行、缩进，更直观展示菜单层级；
2. 二级子菜单常驻显示，不需要鼠标悬浮才出现，减少用户记忆负担。

但实验存在局限：实验任务都是明确的目标式操作，而现实场景中用户也存在 “漫无目的浏览” 的需求。侧导航也存在短板 —— 侧边栏占用页面横向空间，会压缩内容展示区域。

2. 场景化选型：任务型选左导航，内容型选顶导航

• 左侧导航（侧导航）：适配任务型网站 用户带有明确操作目标，需要频繁切换功能菜单，如后台管理系统、邮箱、机酒订票平台。案例：QQ 邮箱、微信公众号后台、携程操作页。
• 顶部导航（顶导航）：适配内容消费型网站 以浏览、消费内容为主，需要把更多屏幕空间留给图文、视频素材。案例：花瓣、知乎、爱奇艺。

同一个网站不同页面，也可以混用两种导航。以百度为例：搜索浏览页面使用顶导航，让出空间展示搜索结果；个人中心需要修改资料、查看收藏等操作，切换为左侧导航，提升功能查找效率。

也可以做混合导航：顶部放置登录、全局搜索等通用功能，左侧承载业务菜单，兼顾浏览与操作。

小尺寸参考

• 侧导航宽度常用：200+8n，区间 208‑272px；
• 顶部导航高度浮动较大，36‑80px，根据品牌、菜单数量灵活设定。

三、布局与适配：三种 PC 网页适配方案

PC 设备屏幕尺寸差异巨大，设计稿输出后，要提前和前端确认适配策略。网页主流分为固定宽度、自适应、响应式三种实现方案，配合栅格系统完成布局。

1. 固定宽度布局

页面所有模块像素尺寸完全固定。

• 优点：设计还原简单，开发成本低；
• 缺点：兼容性差，大屏出现两侧空白，小屏会出现横向滚动条。

2. 自适应布局（Responsive layout）

放弃固定 px，改用百分比、rem 单位，页面整体布局结构不变，元素随屏幕尺寸同步缩放，大多基于栅格系统实现。

栅格由列（column）、间距（gutter）、边距（margin）构成，把页面划分为多列等宽网格，约束内容排布，保证页面秩序感。栅格不只用于 PC 网页，移动端 UI 规范也大量使用简化版栅格。

3. 响应式布局（Adaptive layout）

依靠 CSS 媒体查询@media设置屏幕断点，不同屏幕尺寸下加载不一样的页面样式，屏幕变化时会改变模块排布，甚至增减模块。

• 优点：大小屏体验都可以做到最优；
• 缺点：需要维护多套样式代码，开发工作量大。

实战建议：项目前期设计师与开发对齐适配方案，定义栅格参数，确定页面需要兼容的最大、最小屏幕断点，后续输出设计稿就可以规避大量还原问题。

写在最后

网页设计不是单纯做视觉美化，画布规范决定基础体验，导航模式匹配业务场景，适配方案保障多设备可用性。在动手绘制界面之前，先把这三件事梳理清楚，能够大幅减少后期改稿，实现更流畅的网页用户体验。

转载：优设

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