做设计久了，你会发现一个规律：80% 的设计是标准化的，只有 20% 是真正需要创新的。 但很多团队把精力花在了那 80% 的重复劳动上，反而没时间打磨那 20% 的核心创新。兰亭妙微在多个项目中摸索出一套解决方案 —— 建立可重用的交互设计框架和模式体系。今天把这套方法系统分享出来。

兰亭妙微ui设计公司分享：栅格系统的基础概念网上已有大量详尽讲解，本文不再赘述。主要结合我实际工作中踩过的坑，聊聊很多 B 端设计师都会纠结的核心问题：B 端后台，究竟该选用什么尺寸做设计稿？

一、先理清页面基础布局

确定设计尺寸的前提，是先选定页面布局模式。B 端后台最常用三类布局，其余大多是这三类的变体与延伸：

1. 上下布局：顶部导航固定，主体内容向下滚动，和普通网页逻辑接近。常见于帮助中心、消息通知、业务申请页等辅助页面。
2. 左右布局：左侧侧边栏固定，右侧内容区域自适应缩放，是中后台最主流的形式。
3. T 字布局：顶部全局导航 + 左侧二级菜单，同样属于固定侧边 + 内容自适应的逻辑。

二、结合业务场景，敲定设计尺寸范围

从设备统计数据来看，如今低分辨率电脑占比持续走低，但这不代表我们直接选用市场占比最高的 1920 分辨率作为设计基准。

上下布局的 B 端页面，和普通网页逻辑一致，若无特殊需求，有效内容区域优先遵循 1200px。网上流传的 960px、990px、1024px、1156px 等数值，没有硬性对错，业务无特殊约束时均可使用。

日常工作里，多数 B 端设计师会选用 1440px、1920px 两个基准尺寸出稿。 上下布局更多属于 B 端的补充页面，尺寸基准建议和核心的左右布局页面保持统一，整套产品设计稿口径一致。

早些年不少大厂文章会推荐 1280px 作为基准，出发点是规避浏览器窗口缩小后出现内容挤压、遮挡问题。但随着前端技术迭代，如今 1280px 已经不再是最优选择。

• 1440px：中后台通用首选（参考 Ant Design） 兼容性更强，用户设备复杂、SaaS 多客户场景优先选它，可以更好向下兼容低配办公电脑。
• 1920px：同样可行 我自己的项目中也实际使用过，线上并未出现用户反馈异常。但向下适配小屏幕会存在一定压力。
• 企业私有化定制项目 如果是给单一企业做内部系统，直接调研客户办公电脑的实际分辨率，按客户设备尺寸设计即可。

小结：面向多用户的通用 B 端产品，优先以 1440px 作为设计基准；私有化定制项目，以客户实际设备为准。

三、B 端栅格系统实战搭建

市面上诸多设计插件都可以快速生成栅格，工具只是手段，核心是理解栅格参数逻辑，下面分享我在 Sketch 中搭建 1440 规格 B 端栅格的实操经验。

参考栅格参数（1440 设计稿）

• 顶部导航栏高度：建议控制在 60‑80px，尽量不超过 100px；
• 左侧侧边栏：根据菜单文字多少灵活设置，常规 200px 上下；
• 页面边距：20px / 24px；
• 剩余内容区域划分栅格列，列宽优先使用偶数。

栅格宽度：1192px，列宽 42px，间距 8px，边距 24px，左侧菜单栏 200px。

实际制作时，偶尔会出现部分列宽 42px、部分 43px 的情况，不必过度纠结像素绝对均等。 栅格系统的核心目标不是像素严丝合缝，而是实现视觉秩序、排版统一协调。

没有绝对标准、永远正确的栅格，只有适配自身业务的栅格。

希望本文可以帮到还在纠结 B 端尺寸与栅格的设计师，欢迎一起交流探讨。

转载：优设

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

一、表单基础构成

兰亭妙微ui设计公司分享：标准 B 端表单主要由表单标签、表单域、提示信息、操作按钮四大模块组成，每个模块各司其职，共同保障表单信息录入、提交的完整流程。

• 表单标签：对输入项进行说明，告知用户需要填写什么内容；

• 表单域：用户实际操作输入的控件，输入框、下拉选择、单选复选、日期选择器等都属于表单域；

• 提示信息：包含占位提示、填写规则、校验报错、说明备注，用来引导用户正确输入；

• 操作按钮：完成表单提交、重置、取消、保存草稿等行为的交互入口。

二、表单常见呈现方式

根据业务场景、表单字段数量，B 端表单一般有弹窗、抽屉、独立页面三种承载形式：

1. 弹窗：适合字段少、轻量操作，不希望页面跳转打断当前工作流；字段过多时不建议使用，容易出现滚动嵌套，体验变差。
2. 抽屉：兼顾上下文保留与中等长度表单，从侧边滑出，用户可以隐约看到背后主页面，适合编辑详情类业务。
3. 独立页面：用于字段繁多、流程复杂的表单，拥有完整页面空间，适合新建、复杂数据录入场景。

三、表单排版布局方案

合理的布局可以降低用户填写负担，提升填写效率，常用布局分为以下 5 种形式：

1. 平铺布局

将全部表单项顺序平铺展示，结构简单直观，适合字段数量不多的简单表单。

2. 分组布局

按照业务逻辑对字段做模块分组，设置分组标题，把关联性强的信息归类，降低用户认知负担，是 B 端最常用的方案，适合字段较多的表单。

3. 步骤表单

把复杂业务拆分为多步骤，分步填写，每一步只展示对应模块内容，适合流程化、多阶段提交的业务，例如申请、审批类表单。

4. 锚点定位

针对超长单页表单，设置侧边锚点导航，点击锚点可快速跳转到对应表单区块，方便用户快速定位、修改填写内容。

5. 排列方式：单列布局 & 多列布局

• 单列布局：所有输入项纵向单列排布，阅读视线流顺畅，容错率高，绝大多数 B 端表单优先选用；
• 多列布局：同一行放置多个输入控件，节省页面横向空间，适合短字段；注意不要滥用，字段过长容易造成阅读混乱。

转载：优设

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

经常有入行不久的设计师问：交互设计有前途吗？会不会这个行业很快就消失了？兰亭妙微的回答是：只要人还需要获取信息、还需要和产品打交道，交互设计就不会消失 —— 但它的形式一定会变。 要理解这个判断，先要搞清楚 UI 和交互设计的本质。

做设计时我们常听到 "less is more"" 设计要克制 ""简约而不简单"—— 这些说法背后，其实都对应着同一个心理学原理：席克定律。兰亭妙微在项目中反复用这个定律来检验设计方案，今天把它系统地讲清楚。

刚接触用户体验设计的人，常常会陷入一个困境：拿到一个产品，不知道该从哪里下手，功能一大堆，到底哪个才是核心？兰亭妙微在项目中总结了一套系统的方法 ——确定核心任务的八步法。今天把这套方法完整分享给大家。

说起交互设计，很多人想到的是界面、按钮、流程 —— 这些都是看得见摸得着的东西。但兰亭妙微在多年实践中越来越意识到：真正决定交互品质的，往往是那些看不见的层面 —— 时间和行为。

兰亭妙微ui设计公司分享：好的产品设计，不止是完成业务诉求，更要挖掘情感价值，给用户带来恰到好处的惊喜体验，以此建立用户对产品的信任与好感。优秀设计既来源于灵光一闪的创意，也来自对大量优秀案例的吸收与沉淀。作为产品设计师切忌闭门造车，需要持续体验各类优质产品，积累足够多的设计储备，灵感才会源源不断迸发。

我会持续整理产品体验日记，为大家梳理设计灵感。本篇精选 10 个 APP 产品设计细节，希望能给各位设计师带来启发。

体验目录

一、意料之外的生日情感祝福 二、顺应流行的感官视觉表达 三、动态可视化，让流程尽在掌握 四、巧用细节装饰，强化卡片层级 五、多元化卡片，拓展场景表现力 六、底部弹窗替代二级页面，缩短交互路径 七、极简纯文字底部标签栏 八、强化场景代入的金刚区设计 九、插画化景区导览地图 十、动态图标，直观传递板块语义

一、意料之外的生日情感祝福

闪屏大多用于投放广告或是传递品牌理念，对于用户而言早已习以为常，只要广告不过度侵扰，便算是合格体验。

但支付宝在用户生日当天打开 APP 时，闪屏会切换为专属生日祝福。这份突如其来的小温暖，很容易让用户心生触动，甚至主动截图分享。借助情感化的细节设计，给用户制造小惊喜，让冰冷的产品拥有温度，有效提升用户好感度。

二、顺应流行的感官视觉表达

苹果带火的液态玻璃质感，如今已经成为界面设计主流趋势。这种轻科技风格通透清爽，能够大幅提升界面的精致感。

高德地图便在闪屏及部分页面融入液态玻璃质感，塑造出舒适的视觉感受。紧跟设计潮流，适配年轻群体审美偏好，可以有效升级用户感官体验。

三、动态可视化，让流程尽在掌握

对用户来说，清晰可控的流程体验尤为关键。当用户能够感知完整进度，内心的焦虑感便会大幅降低。

例如京东外卖，将支付、接单、骑手配送全流程做动态可视化呈现。用户可以清晰了解全部环节、当前所处状态以及大致等待时长。透明直观的进度反馈，消除信息盲区，同时提升用户对平台与服务的认可度。

四、巧用细节装饰，强化卡片层级

卡片式设计历经多年发展，依旧是 UI 界面最重要的视觉载体，表现手法也愈发丰富。

体验马蜂窝 APP 可以发现，它的卡片除了使用地图纹理丰富视觉，右上角还做了叠加处理，巧妙拉开卡片层级。从功能层面暗示卡片内承载更多内容；交互上支持用户手动关闭该效果，首页到次级页面视觉语言保持统一。兼顾视觉表现力与交互自由度，双重优化体验。

五、多元化卡片，拓展场景表现力

单张卡片承担信息归纳、区分层级的作用；多张卡片叠加排布，则可以塑造界面空间层次，让页面表达更加丰富。

芒果 TV 周边栏目就采用多层卡片叠加的方案，把主视觉、品牌标识、价格信息整合在同一模块内。既拥有饱满的视觉效果，又实现多维度信息高效曝光，是值得参考的界面解法。

六、底部弹窗替代二级页面，缩短交互路径

常规个人中心列表，点击选项一般会跳转全新二级页面查看详情、执行操作。而芒果 TV “我的” 页面提供另一种思路：部分列表点击后直接唤起底部弹出面板展示附属功能。

对比页面跳转，底部弹窗缩短操作链路，无需切换页面，用户查看、操作更加高效。

七、极简纯文字底部标签栏

底部导航常见三类形式：纯图标、图标搭配文字、纯文字。其中图标 + 文字属于行业主流，但纯文字导航正在更多产品中落地。

爱奇艺底部导航就采用纯文字方案，同时融入液态玻璃质感。既契合当下审美，又剔除多余图形干扰，信息层级一目了然。设计应当学会做减法，规避过度设计带来的视觉负担。

八、强化场景代入的金刚区设计

首页金刚区图标风格五花八门，携程旅行给出很有参考价值的案例：金刚区图标背景匹配业务搭配场景插画。

对比普通纯色背景、图标加文字的组合，场景插画渲染氛围，强化业务代入感，让金刚区的设计质感更进一步。

九、插画化景区导览地图

过去游览景区，如果没有导游，很容易走马观花。如今大量景区上线线上导览地图，搭配语音讲解，极大改善游览体验。

不少产品选用插画形式制作导览地图，将完整游玩区域浓缩为插画画面，方位关系一目了然。再结合定位与语音解说，游客不容易迷路，还可以了解景区人文背景，提升整体旅行体验。

十、动态图标，直观传递板块语义

动态图标不只是吸引视线，还可以借助动效诠释板块含义，降低用户理解成本。

驾考宝典考试板块顶部 Tab 便是典型：科目二栏目搭配方向盘转动动效，用动态视觉呼应板块主题。兼顾趣味性，同时帮助用户快速理解板块定位，一举两得。

小结

以上内容均来自个人产品体验与思考，难免存在疏漏，欢迎大家在评论区补充交流，期待这些细节可以为各位带来更多设计灵感。

转载：优设

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

兰亭妙微ui设计公司分享：网页设计不只是视觉美化，更是以用户目标为核心的系统性工作。做好下面 7 个关键要素，能够帮设计师更加高效完成网页设计，兼顾业务诉求与用户体验。

一、锚定核心设计目标

网页设计属于目标导向型工作，首先要明确：网页要为用户提供什么价值、解决哪些实际问题。不同定位的网站，设计思路会截然不同。

电商网站的核心目标是促成商品成交，设计上会侧重营造促销氛围，优化商品浏览、详情展示路径，同时简化下单付款流程，降低用户的操作思考成本，助力快速完成购买。 资讯类网站目标则是提升内容阅读量，重点放在内容的呈现与信息浏览体验上。

页面所有视觉、交互决策，都应当围绕预设的业务目标展开，避免为了好看而脱离实际需求。

二、构建均衡协调的视觉效果

炫酷的特效固然可以加深用户印象，但往往会带来更高的开发与性能成本。懂得适时做减法，用简洁视觉让用户聚焦核心信息，是网页设计的必修课。页面堆砌过多装饰元素，反而会干扰用户识别有效内容。

对齐与对称是实现页面平衡的两大基础：对齐保证布局统一，把逻辑相关的元素建立视觉关联；对称带来秩序感，让版面稳重舒服。

留白同样至关重要。像登录、注册页面，大面积留白只保留输入控件，帮助用户把注意力集中在表单填写行为上。宜家官网也是很好的范例：依靠清晰的信息层级、适度留白、模块化图文区块，页面整洁通透，留白起到视觉缓冲作用，自然引导用户视线流转。

留白不是空白浪费，而是给内容留出呼吸的空间。

三、活用经典设计底层原理

格式塔原理

格式塔原理总结了人感知界面元素的认知规律，指导我们合理排布页面组件，让用户可以快速整体理解页面信息。其中对齐、相似性、接近性、分组是网页中高频用到的规则，用来处理控件排布、信息分组、列表排版等场景。

希克定律

可选项越多，用户做决策耗费的时间就越长。就好比拿到几十页的菜单，选项过于繁杂，反而让人难以抉择。

落地到网页设计中，如果遇到冗长表单，不要把全部问题一次性全部抛出，可以拆分为多步骤分步填写，减轻用户心理负担，降低操作压力。

四、读懂你的目标用户

脱离用户的设计只是自我表达。设计前期要理清：我们的受众是谁？用户希望获取什么信息？要解决什么痛点？真实想法与行为习惯是怎样的？

面向儿童的网站、面向老年群体的网页，二者的交互、视觉、文字处理方式完全不一样。设计师需要放下主观偏好，站在用户视角思考，收集用户反馈，再验证设计方案。正如短视频平台依靠千人千面的内容推荐，精准匹配用户兴趣，产品才会收获用户喜爱。

五、重视排版的力量

排版是长期积累的基本功，如何组织品牌标识、图文、控件，贯穿设计全流程。选择字体时，字体字重、字号、对比度、可读性都要纳入考量。

同时必须兼顾多端适配，不同设备之下字体适配方案也要随之调整。尤其移动端屏幕尺寸有限，文字可读性永远放在第一位，小屏环境下更要保障信息清晰易读。

六、搭建清晰的信息架构与导航

导航和信息架构相当于网页的骨架，决定用户能不能顺畅找到需要的内容与功能。

合理的层级结构，会为网站建立起通顺的逻辑。导航体系直观映射产品架构，用户不用耗费大量思考成本，就可以定位核心信息。

设计时需要理清完整流转逻辑：点击按钮跳转至哪个页面、如何返回上一级、哪些操作不需要页面刷新。不仅设计师自己要理清流程，更要保证普通用户也能看得懂、学得会。

七、降低用户认知成本

选项繁杂、逻辑晦涩，都会抬高认知成本，给用户带来困惑与心理压力。降低认知成本，往往体现在诸多细节之中。

善用各类组件状态提示：面包屑导航区分悬浮、点击状态；选中与未选中标签通过颜色做区分；页码组件高亮当前页，同时提示前后翻页；表单实时校验反馈…… 这些微小的细节，减少用户思考，让用户快速理解界面、做出判断。

写在最后

网页设计讲究慢工出细活，慢慢来反而效率更高。从业务目标出发，平衡视觉表现，遵循基础设计原理，立足真实用户，打磨排版、架构与细节，就能产出体验出色的网页作品。

转载：人人都是产品经理

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

经常有人问：交互设计到底是什么？和 UI 设计、UX 设计有什么区别？交互设计师每天都在干嘛？兰亭妙微今天用一篇文章把这些问题讲清楚。