兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
B端表单标签的对齐方式对用户体验和界面设计至关重要。本文深入探讨了不同表单标签对齐方式的优劣势及适用场景，包括行内标签、顶标签、左标签文字右对齐和左标签文字左对齐等，帮助设计师在实际工作中做出最佳选择，提升表单填写效率和用户体验。
表单作为B端系统最常见的组件之一，一些常见的do、don’t想必大家已经十分熟。今天我们唠一唠【表单标签】这个细节。
在一些成熟的组件库中，大都提供了上下布局的顶标签、左右布局的左标签等样式可供选择。左标签样式，在不同的产品中，又存在标签文字左对齐、右对齐的情况，那它们之间差异在哪呢？如何选择呢？
最近工作中，正好在梳理相关的规范，于是把自己的一些思考及处理经验整理了一下，分享出来～
先对齐一下语言：表单标签、表单域。
会从这几个维度进行比较，放一个简易版表格，下文细说。
优势：
劣势：
用户操作阻塞：如输入框聚焦，输入内容时，行内标签隐藏，用户操作会受阻。
使用场景：
一般用于用户心智已经十分成熟的页面，比如登录页、注册页等。
优势：
劣势：
Y轴屏效低：对页面纵向空间的利用率会比较低。
使用场景：
优势：
劣势：
使用场景：
优势：
劣势：
使用场景：
优势：
劣势：
优势：
劣势：
使用场景：
本文由人人都是产品经理作者【Clippp】，微信公众号：【Clip设计夹】
原文链接：https://www.woshipm.com/share/6208137.html
原创/授权 发布于人人都是产品经理，未经许可，禁止转载。
题图来自Unsplash，基于 CC0 协议。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan。
关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司、银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发
编辑导语：交互设计本质上就是设计产品的使用方式的过程，“如何才能做出合理的B端交互决策”是很多人都在思考的问题。在这篇文章里，作者聚焦具体的实战场景，分享了一些自己做B端交互设计的经验，一起看看吧。
这阵子想了想关于交互知识的分享，还是应该要拓展成一整个系列的内容，包含各类组件、控件和行为的解析。
基于我的分享习惯，我会尽量避免使用太过理论还是空泛的方式进行讲解，而是聚焦具体的实战场景，帮助大家理解如何做出合理的交互决策。
交互设计本质上就是设计产品的使用方式的过程，账号怎么填写，表单怎么导出，数据怎么筛选，列表怎么排序等等……针对每个功能的使用方式，都可以花很长的时间去考虑其合理性。一个项目的交互，就是这个项目所有功能使用方式的总和。
那设计师如何开始项目的交互设计？直接进入细节，开始跟着原型制定输入框的状态，下拉菜单的展开逻辑吗？
这样肯定是不行的，项目的交互内容又多又杂，设计师会很快陷入这些细枝末节中疲于奔命。头疼医头脚疼医脚，容易造成项目细节缺乏统一性，前后矛盾，体验割裂。
所以，理解项目交互设计的正确思路，就要知道在项目中有哪些交互内容，它们对应的层级和设计对象是什么。
在这里，我把需要设计的交互对象拆分成4个种类，它们从大到小依次为：
我们先围绕在全局框架这个类型进行解释，什么是项目的主要模块排版和布局，以及为什么全局框架可以决定产品的主要使用依据和步骤。
比如大家都用过 Adobe 的软件，应该会有个感觉，就是熟悉了其中一款后用下一个，立马就能上手，完成一些最基本的操作。而如果不是 Adobe 系列的软件，用起来感觉就感觉非常别扭，往往要从头开始学起，比如对标 PS 的 Affinity Photo、Pixelmator。
为什么会出现这样的反差？就是因为 Adobe 尽可能统一了自己生态内的软件全局框架，操作方式，让全家桶用户可以用最快的方法适应不同的软件。
包括顶部的属性栏，左侧的工具栏，中间的标签栏、创作区域，右侧的不同工作窗口排列形式。
除了主要界面的布局框架外，还包含一些二级窗口的框架结构也是统一和固定的。比如打开 PS 内的首选项设置和属性设置窗口，和其它几个软件的属性设置窗口几乎一致。
而在 Affinity 中，软件首选项设置就没有使用左侧导航，而是类似 Mac 通用设置的快速入口分层模式，用惯了 Adobe 再换这个就会有股说不出的别扭。
可能有同学有疑问，Photoshop 并不是只有这几种窗口，其它窗口不就样式和上面这类不一样嘛？那是因为窗口的框架肯定是要考虑功能和场景的，即使使用了多种窗口类型，那也是有规律的应用在操作方式相近的场景中。
再回想一下 PhotoShop 的基本操作流程，就是在创建文件以后，通过左侧工具添加图层元素到中间画布区域进行排版，再在右侧属性栏中调节画布对象的图层顺序、属性。
PhotoShop 作为平面领域中的独角兽，直接影响了绝大多数同类设计软件的框架结构和布局方法。因为绝大多数设计师学习设计的入门软件都是 PS，想要让用户更快上手自己的软件，那就应该顺着他们已经习惯的方式来。
所以，从 Sketch 开始，它的框架和操作流程都和 PhotoShop 高度相似，再之后的 Adobe XD、Figma、即时设计等，都应用了几乎相同的全局框架，所以你只要掌握其中一个就能立马熟悉其它软件的使用。
而当实际功能和 UI 设计软件高度相似的其它几个 “办公应用” 结构框架不同时，上手就变得异常的困难和别扭。比如 Axure、Keynote、PowerPoint，先学了设计软件再去学这几个软件的同学一定深有感触。
而其它行业的软件，如果没有一个具备绝对主导性的产品作为标杆，那么每家公司的产品框架就各不相同。比如 3D 建模软件中的 C4D、Blender、犀牛，视频剪辑工具中的 Pr、Finalcut、达芬奇，你就是熟练掌握其中一款，对专业术语和必要功能逻辑了如指掌，也需要通过基本教学才能掌握其它同类软件。
这就是框架带来的作用，它是软件使用方式和操作流程的主要依据，其它细节的交互和操作都是附着于全局框架下的子集内容。之所以交互设计要从全局框架开始，原因就是设计师要：
先确定产品整体操作的方式，再去考虑按钮和表单那些细节的处理。
虽然前面举例的都是软件案例，但只要仔细留意，你们就会发现网页端管理系统的操作框架和一般软件别无二致。只不过相比较五花八门的专业软件来说，B 端管理系统的操作框架模式经过了长期的演化形成了固定的几种套路。所以网上找到的管理界面案例，看起来只是围绕几个固定的布局翻来覆去的改颜色和图标。
虽然它们看起来都很像，但依旧包含很多交互细节是需要设计师留意和制定的，不是简单照搬就能设计出符合项目需要的全局框架。
所以，交互的全局框架到底怎么设计？
它不是一个个体，而是一个由多个组件、页面类型、适配方式组成的合集概念。想要有效制定，就需要先了解合集中包含的要素有哪些，以及它们的基本特点。
在全局框架的范畴中，包含的组件模块类型可以分成两个大类，全局组件和浮层元素。
全局组件是指在项目多数页面中都会存在并进行交互的组件，功能往往和当前页面没有直接联系，比如路径跳转、色彩切换、快捷操作等。
而包含的浮层元素，本质上也是全局组件，只是它们的共性是不会默认展示，需要被特定条件触发才能被感知。比如断网提示、删除确认、侧边抽屉等都是全局化的浮层要素，也是需要在前期做好规划的内容。
下面就针对这个两种类型的组件一一展开解释。
（1）全局组件
a. 导航栏
导航栏不仅仅是 B 端管理系统，也是网站设计中最重要的组件。优秀的导航栏可以清晰的展示项目的页面层级结构，帮助用户高效的访问目标页面。全局框架制定的一步，就是根据项目的具体情况，选择合适的导航类型。
导航栏主要使用上方、左侧、混合型三种布局形式：
确定导航栏的类型，还需要确定导航的操作逻辑，包含几级菜单，默认、展开、选中、关闭的交互。
b. 顶部栏
除了导航外，另一个基本必备的组件，就是顶部栏，除了放最基础的用户和设置选项外，它的角色定位要根据需求决定，最常见的包含下方几种：
当然，以上几种情况并不是绝对的。设计师需要根据项目的实际需求出发，去梳理项目包含哪些全局控件或操作，然后再决定如何分配到导航或者顶部菜单上，而不是先定义菜单的类型再往里面填内容和字段。
c. 页面标签栏
页面标签栏是一个类似浏览器标签栏的组件，用来展示和关闭当前项目内打开的页面。
标签栏的使用在远古时期的 B 端项目应用非常普遍，因为已经入土的 IE 浏览在那个年代是没有页面标签功能的，导致开启多个页面的切换非常麻烦。
随着浏览器标签的普及，它已经不适用于多数 B 端项目，但依旧有一小部分项目是需要结合它的优势才可以更好的提升操作效率。
在一些需要持续打开和来回切换页面的项目，如客服系统、财务审核、合同审批，因为打开新页面仅仅需要加载内容区域而不是全局，没有新建窗口后的空白页面加载过程，就能带来更好的体验。
d. 内容模块
内容模块是用来容纳和显示页面相关内容的模块，这是个被很多人忽略的组件类型，包含模块标题栏和操作区域。
一个成熟的 B 端项目会统一制定内容模块的组件结构，保证大量页面和模块之间样式的统一性。比如下面的模块案例。
如果只是简单做个标题再统一间距参数，那么这个组件也就没必要在这里提了，因为这仅仅是设计问题而不是交互问题。内容模块的制定是为了尽可能考虑各种内容场景，并进行统一处理。
例如要应用一级分页标签、多层级分页标签、操作按钮、内容折叠等。考虑的越全，后面处理起来越工整，否则就像下方淘宝卖家端千牛的案例一样，损害用户的体验和操作效率。
内容模块是很难在初期一口气全部定完，不仅需要产品经理前期给出详尽的需求和产品原型，还依赖设计师自身的经验判断。
所以，它的制定流程是在前期先根据掌握的信息制定出最初的版本，然后在完成后续的页面中逐渐进行补充、优化并替换。
作者：酸梅干超人；
本文由 @超人的电话亭 原创发布于人人都是产品经理，未经许可，禁止转载。
题图来自Unsplash ，基于 CC0 协议。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
B端设计规范如何正确搭建，好的设计规范对设计有什么帮助呢？设计夹老师在这篇文章中围绕清晰、高效、友好、可控四个关键设计原则，带你一步步建立起设计规范，推荐各位设计er和对交互产品、B端产品设计感兴趣的童鞋阅读。
Halo，这里是设计夹，今天为大家分享的是「B端设计」。B端设计离不开设计规范这个话题，而做好设计规范是一个庞大复杂工程，很多人对这些处于一知半解状态。在这个系列文章里通过结合平时的项目案例来谈谈自己对B端设计规范的一些理解，希望可以带来一些启发。
本篇先谈谈设计规范制作的指导思想–设计原则，后续文章再展开讲一下常见各种组件的设计规范。
设计规范作为B端设计中非常重要的一环，它的作用主要体现在以下三个方面：
在日常工作中，当项目组收到一个新的需求时，如果已经具备了成熟的设计规范体系，其工作效率往往会得到很好的提升。最后上线的页面不用走查还原度。以下是具体工作流程：
通过前面内容我们知道了设计规范对于产品设计意义重大，那么制定设计规范制定依据又是什么呢？这里就要引出设计原则这个话题，设计原则是设计规范的总纲领，所有的设计规范都应当以设计原则为基准。设计原则主要包含以下内容：
接下来就围绕设计原则清晰、高效、友好、可控这四个方面展开讲解。
清晰原则主要从视觉角度让界面信息传达合理，提高用户信息获取效率。主要包含对比，亲密，对齐，重复四个方面。
1.对比
对比是指界面中为了区分信息层级，强化元素对比度，使用的很常见的一种手段。例如，下图中利用大色块按钮与线框按钮形成对比来凸显关键按钮；通过对文字字号加大，字体加粗，颜色加深来与弱文案形成对比，凸显关键文字信息。
2.亲密
如果信息之间关联性越高，它们之间的距离就应该越接近，也越像一个视觉单元；反之，距离就应该越远，也越像多个视觉单元。亲密性的根本目的是实现组织性，让用户对页面结构和信息层次一目了然。
3.对齐
在界面设计中，将元素进行对齐，既符合了用户的认知特点(我们往往倾向使知觉对象的直线延续还是直线，曲线延续还是曲线)，也能引导用户视觉流，让用户更流畅地接收信息。
4.重复
重复是指相同的元素在项目中重复引用，作用是可以有效降低用户的学习成本，同时提高这些元素之间的关联性。
高效原则体现在便捷、轻量、简化、一致几个方面，目的是通过合理的方式让产品操作更加便捷；交互体验与内容更加轻量和简化；以及产品风格保持一致。下面结合常见案例说明如何应用这一原则。
1.合理利用拖拽–便捷、轻量
在涉及到诸如上传文件，排序，滑动输入，搭建等需求时，合理采用拖拽交互往往可以打造更加便捷用户体验。
2.尽量减少不必要的跳转–便捷、轻量
用户操作过程尽量减少跳转，以实现交互减步长，从而使用户操作更高效轻量。例如能用原位操作就不考虑展开收起；能用展开收起就不用气泡…依次类推(优先级从高到低：原位＞展开收起＞气泡＞弹窗＞抽屉＞新页面)
3.放大点击热区–便捷
放大可点击按钮热区，相对于较小点击热区，具备更丝滑操作体验。
4.悬停即现–轻量
利用悬停即现，避免信息过于重复啰嗦，简化页面提高阅读体验。
5.折叠次要功能–简化
页面功能按钮过多时，可将次要按钮收纳到一起，点击时再展开，外面只展示高频操作或重要按钮，保证页面内容简洁。
6.统一样式–一致
一致性是指在不同页面中相同操作应保持一致视觉与交互样式，可有降低用户学习成本与企业开发成本。
友好原则应贯穿用户操作前，操作中及操作后三个阶段，给予用户及时反馈与帮助。
1.操作前
在用户操作前给到合适的引导与帮助，有效减少用户迷茫感。
2.操作中
通过交互效果及页面样式让用户可以清晰感知到自己当前操作。
3.操作后
利用界面中元素变化清晰直观展示当前的状态。
可控主要体现在自由和导航两个方面。
1.自由
自由即指用户可以自由完成一些操作，例如回退，撤销，终止等。
2.导航
导航是指用户随时知晓当前所在位置，而且可以利用导航随意到达目标页面。
通过本篇内容我们大概知道了制作设计规范主要方向，那么具体到每个组件上，我们该如何去设计呢？后续篇章将细分聊聊如何去设计「B端常见组件」。
专栏作家
作者：Clippp，每周精选设计文章，专注分享关于产品、交互、UI视觉上的设计思考。
本文原创发布于人人都是产品经理，未经作者许可，禁止转载。
题图来自 Unsplash，基于CC0协议。
该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
毫无疑问，表格之于B端产品而言是及其重要的一部分，那么，如何系统掌握B端产品中的表格设计呢？本文作者从表格设计规范与交互逻辑两个角度提出了15点建议，干货满满，希望对你有帮助。
表格作为B端产品中重要的界面组成部分，承载着内容展示、数据记录等多重任务。每家产品的表格看起来构成差不多，但在交互细节上仍然有很多好的地方值得我们仔细思考。
本次通过整理10条B端表格设计规范+5条B端表格交互逻辑，系统掌握B端产品中的表格设计～
表格内的信息通过对齐，会更加规范易理解，给用户视觉上的统一感，且视线流动顺畅，能够让人快速捕捉到所要的内容。
默认展示的列数为3-8列，如果需要展示更多列数，则需要优先固定展示重要列，其余的列的内容会以滚动条滑动而展示出来。
有操作时需固定，操作项不固定时无法快速定位会降低操作效率；重要信息固定，有利于快速获取重要的内容。
宽度的尺寸大小自适应，但需要根据文字的重要性显示，重要文字内容优先完整显示。（如果由于屏幕小表格会出现省略，就要考虑多一个浏览器自带的title提示。）
注：当第一列是序号或多选项时，列宽不需要太宽，这样视觉不会显得空洞。
字符不要多，如果文字太多，就需要做文字信息精简化。同样，对于专业术语或用户不常见的名词应给予一定的帮助说明。
表格内容较多且有长文本时，长文本缩略展示；表格内容较少时有长文本，长文本换行展示。
表格中经常会出现空数据或无数据的情况，留白处理会给用户造成一定的困惑和误解，是系统没有加载出来吗？明智的做法，使用「-」填充显示。图片为空时使用图片占位符。
同一项目中的操作列命名应该保持统一，例如：常规增、删、改、查命名为新增、删除、编辑、详情。
操作项超过三个时，将操作低频折叠收起，可以帮助页面突出更加重要的信息，减轻空间压力，减少干扰。
给数据做升降区分可以快速判断数据的趋势，国内数据升图标默认为红色，降的为绿色。
全局操作为无需选择数据内容即可进行的操作，常见的有新增、导入、筛选。
批量操作就是对表格的多行数据同时操作，常见的有导出、删除。
全局和批量都不属于单个对象因此需要放在表格外，操作具体的位置排放根据操作的重要程度一次从左到右递减。
条纹颜色：标题背景色透明度60%左右；（条纹颜色视觉上应该比标题栏弱一点）鼠标hover颜色：主题色透明度10%。
当阅读丰富且繁多的表格时，由于屏幕有限，用户不得不拖动横向或纵向滚动条来阅读信息。
固定表头，能够让用户明白当前单元格内信息的属性而不至于不知道该信息的意思。固定表头也是一种界面友好性的体现。
可以让无序信息内容进行有序排列，排序分为升序和降序，一般用在数据、时间、数量上。
允许调整列的宽度来查看更加完整的缩略数据。被截断的数据，默认支持鼠标悬停时浏览器自带title显示完整数据。
呈现大型数据集时，水平滚动是不可避免的，通过横向滚动查看其它数据。将首列进行固定（若包含勾选操作，则一起固定），以便用户将数据与对象进行对应。
若表格是分页处理的，分页会放在上部、下部或上下部均有，分页固定省去了用户需要翻到顶部或底部进行操作的麻烦。
作者：谭檀檀
本文由 @Clippp 授权发布于人人都是产品经理，未经作者许可，禁止转载
题图来自 Pixabay，基于 CC0 协议
该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
都是交互反馈和提示组件，大家可能会疑惑：文字气泡 Tooltips 和气泡卡片 Popover 的区别是什么，两者之间的应用场景如何？本文对两者的差异进行总结，希望对你有所帮助。
同样都是交互反馈及提示组件，你可能会疑惑：文字气泡 Tooltips 和气泡卡片 Popover 有什么区别？分别有哪些特定的使用场景？
本文就来详细分析下这两个组件的区别和联系，帮助你做好应用。
气泡卡片（Popover）是当用户点击 / 鼠标移入元素时，就会弹出气泡式的卡片浮层。当对于某个元素有更多的解释性描述和相关操作时，这些内容可以收纳到元素的气泡卡片中，根据用户的操作行为进行展现。
其用法特征是：
1. 用户可以在浮层卡片上进行相关操作，也即气泡卡片可以并需要承载更复杂的内容和交互功能。
2. 卡片中可以包括的内容有：文字说明，图片内容，操作按钮，相关链接等等。
3. 组件功能侧重于：承载信息和操作。即收纳并在需要的时候展示与该元素内容相关的信息和操作。这些信息的特征通常是：
文字气泡（Tooltips）是相对简单的文字提示气泡框。用户使用鼠标移入元素后显示提示，移出后提示消失。
其用法特征是：
1. 文字气泡通常不承载复杂的信息和操作，仅提供一段文案解释，也即用户在文字气泡中不能做除阅读外的其它操作。
2. 该组件功能侧重于：解释说明。即对局部内容或元素进行文字性的解释说明。通常来说该气泡是对其载体本身的解释，比如：
有同学看过 Ant Design 组件库提供的组件样例，会觉得气泡卡片 Popover 是白色背景，而文字气泡 Tooltips 是半透明黑色背景。
其实这两个组件的背景颜色上的差异并不是重点，因为这两个组件都可以使用其他颜色（比如带有透明度的品牌色）做背景底色。颜色并不具备唯一标准。AntD 就提供了多种颜色的文字气泡样式：
也许你已经发现，即使我们将一个组件的使用规范和应用场景解释得再全面，在使用时也总会出现一些特殊的业务需求和应用场景无法严格按照规范来执行。
面对复杂多样的业务需求，我们更应该学会：在理解业务需求的基础上，合理调整组件的使用方式和样式。
组件的规范对设计师来说并不应该是限制或约束，而是一种能够帮助我们快速实现产品设计一致性，保证基础体验的快速方式。
专栏作家
元尧，人人都是产品经理专栏作家。
本文原创发布于人人都是产品经理，未经许可，禁止转载。
题图来自 Unsplash，基于 CC0 协议。
该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
编辑导语：B端产品的展现形式包含了很多类型，标签页、弹窗、悬浮层等等。本篇文章中作者分享了如何正确的呈现B端产品，让产品的交互体验更加丝滑。感兴趣的小伙伴们快来一起看看吧，希望对你有所帮助。
在B端产品操作中，需要高频率地打开各类链接和按钮，如果点击后需要展示新的内容，那么展现形式就包含了很多种类型，标签页、新页面、悬浮层、弹窗、抽屉等等。
在面对数量庞大的B端页面、组件、交互场景下，应该选择哪种展示形式就变成了一个棘手的问题。
本篇分享就将集中在解决如何选择正确的呈现形式上，让产品的交互体验更顺滑。
网页是一种可视化的UI界面，也是一种内容载体，它是浏览器访问网站后显示的主要对象，也是浏览器展示内容中层级最高的单位。
在同一个网站中，如果我们想要访问其它网页，就需要点击按钮或链接触发，这时候，打开新网页的方式就有两种，在新窗口/标签中打开（_blank）或者在本窗口/标签中打开（_self）。
不管是哪种，本质上都需要浏览器重新加载新的页面。对于一般的企业官网、新闻网站来说，这种加载的模式没有太大的问题，因为操作频次相对适中，用户中间会有比较长的时间停顿下来查看页面的内容信息。
而B端项目则不同，虽然也有不少查看页面信息的需求，但是包含了更多需要短平快完成操作目标的使用场景，比如修改个标题，更改商品价格，添加分类字段等。
如果所有高频操作的场景，都要重新加载页面，使用起来的 “顿挫感” 是非常强的，降低使用体验。
早期的网站加载内容必须刷新页面，所以顿挫感是难以解决的，只能想办法减少跳转流程来提升用户体验。
随着网页技术的发展，异步处理（AJAX数据交换方式）技术的应用，让网页的内容可以通过不刷新或加载新网页的形式加载和显示。
简单解释，就是早期的网页加载完成以后就是 “静止” 的，里面所有内容是固定的（不是HTML的静态）。而异步处理，就是让页面中的指定模块处于 “运动” 的状态，客户端可以在不重载网页的情况下只加载和更新这个模块的内容。
比如下面的案例，设置不同的条件选项，在过去的网页中只能重载页面更新，而使用异步处理就可以直接和服务器请求数据刷新这个图表模块，而不用重载整个页面。
所以，在B端项目中，我们不再是只有重载网页一个选项，而有了其它的选择，如下图所示。
其中，网页展示作为一个基础展示对象，我就不多做介绍了。我会通过分别介绍其它几个内容的载体，帮助大家区分它们和重载页面有何不同，以及如何正确选择内容加载形式。
首先介绍浮层，它是我对通过悬浮在页面基础内容之上的内容层的统称。例如各类气泡、提示框、下拉菜单，都是浮层的表现形式。
浮层是比较底层的形式，其展示内的容完全不需要使用一个新的页面，且和触发的元素有较强的视觉联系（对比弹窗）。
浮层并不是由内容的多和少决定的，复杂的浮层可以包含非常多的交互选项和内容信息，导致我们很容易和下方解释的弹窗搞混。
比如客户端软件常见的隐藏式侧边栏，搜索栏中展开的复杂面板，都是浮层的一种而不是弹窗。
浮层最大的特点，源自它的位置定义逻辑，它会和触发它的元素具有非常紧密的位置关系，而不是像弹窗一样无差别显示在界面或浏览器视图的固定区域。
如果我们想要显示内容，完全没到用一个新页面展示的地步（如搜索建议面板），且和触发它的控件有较强的联系，就可以考虑使用浮层来展示。
弹窗，也是一种悬浮在基础内容之上的内容层，它和浮层的不同之处，就在于弹窗通常是居中固定的显示区域，和触发它的元素没有什么位置联系。并且，弹窗可以包含的内容量级也是高于浮层的。基础的弹窗包含强提示弹窗，或类似注册登录这种表单弹窗。
而高级的弹窗，则类似下方案例，约等于打开一个独立的网页。
之所以使用这些高级弹窗作为页面载体，原因就是对原触发页面的使用和关注并没有结束，需要支持快速关闭当前的窗口并返回原来的页面中去。
比如在一个非常长的列表中，你下滑了几十页的高度，肯定不想放弃掉当前的页面位置，所以Behance或者花瓣等应用，都采用窗口模式加载新页面。
或者类似一个列表页面中需要大量创建新的数据，这些数据又不复杂。于是就通过弹窗表单的形式，快速完成创建并在原页面中再次点击 “新增” 按钮。
高级的弹窗使用除了保持原页面位置、高频操作等防止加载的原因之外，还有个更重要的特征，就是强制吸引用户的注意力到窗口上。
因为弹窗主要以模态 （Modal，后方有黑色遮罩）居中显示，通过深色蒙版进行前后隔断，凸显弹窗区域，意味着我们强制让用户关注眼前的信息和任务。
如果我们想要显示的内容，需要保留原页面状态，减少页面跳转数量，又需求用户强行关注，就可以使用这种模式展示。
最后，就是最难选择，也最容易和其它组件搞混的抽屉了。
抽屉本身的特征包含悬浮属性，覆盖在原页面之上。而我们常见的侧边栏、侧边菜单并不能和抽屉画上等号，因为他们会占用画布的实际显示区域，和原有内容同层。
比如下方案例中，Jira左侧导航（不分左右）可以隐藏收入，页面内容变大，这是侧边栏。而点击列表选项，右侧弹窗的窗口覆盖原有页面，才是抽屉。
和高级的弹窗类似，抽屉也可以当成一个独立的页面展示信息。但它和弹窗不同的是，抽屉通常是从页面的右侧展开，没有遮挡左侧的空间。它的主要特征是还需要在原页面进行交互。
比如Teambition案例中的列表，我们每开一个抽屉都还可以直接点击原列表的其它选项切换下一个抽屉，省掉关闭步骤或者原页面被遮挡的情况。
它比较适合应用在表格/列表环境中，作为表格/列表内容的详情页形式展开，这样用户可以在一个页面中快速查看不同列表的具体信息或编辑。并且，表格/列表本身的特征会将标题放在最左侧，也方便抽屉的切换。
也因为这种特性，抽屉不太需要使用模态和遮罩将左侧内容遮挡掉。如果需要通过遮挡来吸引用户注意力，那么这种情况往往更适合使用弹窗。
所以，如果不想通过新页面打开的列表详情内容，且不是强制要求用户聚焦的任务，就可以使用抽屉的形式展现。
以上就是几种基本的内容展现形式说明，时间关系还有后半部分关于如何站在系统框架级的角度使用内容载体的分享，我会留在下次分享。
如果有关于这部分的实际项目疑问，也可以在下方留言。
我们下篇再见～
作者：酸梅干超人；公众号：超人的电话亭
本文由 @超人的电话亭 原创发布于人人都是产品经理。未经许可，禁止转载。
题图来自 Unsplash，基于CC0协议。
专栏作家
韩叙，微信公众号：运营狗工作日记，人人都是产品经理专栏作家。原猫眼电影产品运营专家，创业时经历了0到1的艰辛，在百度时规划了海量用户的玩法。从业10年，专注互联网运营领域，包括产品运营、用户运营、社区运营和UGC运营。
本文原创发布于人人都是产品经理，未经许可，不得转载。
题图来自Unsplash，基于CC0协议。
该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
本文深入分析了B端弹窗设计的尺寸规范问题，提供了科学定义弹窗尺寸的方法和思路，旨在帮助设计师提升操作效率并确保良好的用户体验，希望对您在弹窗设计上的决策有所启发。
相信大多B端设计师对web弹窗设计的规范都不陌生：比如弹窗按交互形式可分为模态弹窗和非模态弹窗；
按承载内容类型分为：提示类、操作类、展示类弹窗；按弹窗承载信息量的大小可以分为：小尺寸弹窗、中尺寸弹窗、大尺寸弹窗…等等但最近，在做一个操作提效的需求设计时遇到了需求方对弹窗尺寸的规范挑战~
大致需求是这样：为节省弹窗内对选项选择的时间，现将原本弹窗内的级联选择下拉框改成平铺按钮的形式。（见下图）ps：本平台为人工审核平台，使用用户为审核员，平台设计要为审核员的审核效率负责，审核效率一般表示为：单人单天（8小时）xxx条审核量。
问题点：承载内容信息量不固定原因：弹窗内用户选择项为不通过原因，而此选择项是用户根据自身企业的风险标签来自定义配置，这就涉及到级联选择数量的问题，有的客户风险标签体系细，多则几百个，有的客户只需要粗粒度标签，例如只有一级标签，总数可能不超过十个…
需求方：我要一个这么大的弹窗！好让信息呈现更全面！
但做设计从来不是凭空定义一个弹窗大小，要做到有理有据；前期选择先跟使用此平台的审核负责人沟通，来确定目前已接入的客户在此处自定义配置的原因数量量级并整理出沟通结论：
存在少量客户10个以内的原因个数、常规客户在30个左右的原因个数、现存一家客户使用最大量级100+原因个数。但由于控制权在客户方，原因量级不可控，未来也可能出现几百的数量。在以上结论中，可以确定出可能的备选 600px中弹窗、800px的大弹窗、或者需求方提出的将近1200px的超大弹窗，但到底哪个最为合适需要进一步判断。
在有可能的600px、800px、1200px三种宽度中选取最合适的弹窗尺寸，分别从操作效率与适配性角度对其进行判断。操作效率层面：
当原因个数在30个以下时：
若不同宽度时，都选择第一个处置原因，根据交互方法论–菲茨定律，指点设备到达目标的与两个因素有关：（1）设备当前位置和目标位置的距离（D）。距离越长，所用时间越长；（2）目标的大小（S）。目标越大，所用时间越短。
由此可见此操作的最终目标按钮为右下角的确定按钮，目标按钮大小不变，但整体的选择距离是相对两个较小弹窗要远的。D3>D2>D1，所用时间 T3>T2>T1。由于对审核员任务操作时间和效率要考虑到秒或毫秒级别，此大小对用户快速完成此操作起到负向作用。
另外，当原因个数10个以内时，可见此时弹窗宽度过宽，导致空白区域过大。
当原因个数在30个以下时，操作效率评分：
1200px ⭐️⭐️
800px ⭐️⭐️⭐️
600px ⭐️⭐️⭐️
当超过100个原因个数时：1200px 一屏内展示完全，不需要滚屏滑动；800px 可在两屏内展示完全，需要滚屏滑动；600px 超出两屏展示才可展示完全，需要滚屏滑动。
当原因个数超过100时，操作效率评分：
1200px ⭐️⭐️⭐️
800px ⭐️⭐️⭐️
600px ⭐️⭐️
适配性层面：
根据市面主流屏幕分辨率尺寸调研：
市面上存在部分 1024 分辨率的显示屏，所以：600px能够适配所有市面主流分辨率显示器；800px能够适配所有市面主流分辨率显示器；1200px不能能够适配市面主流1024*768的分辨率显示器，弹窗不能在显示器内显示完全，固适配性相对较弱。
综合三种弹窗大小的操作效率和适配性：
800px的表现最优，固选取800px的弹窗大小。
高度规范：由于信息量的不同可以根据内容多少进行自适应高度，限定max high 700px。由于一般超出800px可能出现浏览器外滚动条，所以选取高度为600-800px之间。
滚动条规范：限高后，若信息超出max high支持出现内滚动条。浏览器适配规范：浏览器窗口>800px，弹窗宽度保持固定宽度800px。浏览器窗口600-800px之间弹窗同步在600-800之间自适应。浏览器窗口<600px，弹窗宽度保持600px，出现浏览器外滚动条。
本文由人人都是产品经理作者【Clippp】，原创/授权 发布于人人都是产品经理，未经许可，禁止转载。
题图来自Unsplash，基于 CC0 协议。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
在当今这个信息爆炸、竞争激烈的市场环境中，用户体验已成为企业核心竞争力的关键因素。在这一背景下，我们启动了一项名为“简单设计”的专项优化项目，旨在通过化繁为简，重塑用户体验，提升B端产品的用户满意度和忠诚度。
在当今信息爆炸、竞争白热化的市场大环境下，企业核心竞争力的内涵已悄然变迁，不再单纯聚焦于产品或服务本身，而是将重心逐渐倾向于用户体验这一关键维度。
于招聘领域而言，B 端产品作为衔接招聘方与求职者的关键纽带，其设计的合理性、操作的便捷性以及语义的明晰度，犹如三把密钥，直接决定着用户满意度与忠诚度的高低。
今年，58招聘B端开启了“简单设计”专项优化的征程，作为项目主导设计师，我全程深度参与了从调研、剖析、设计至实施的各个环节，在这一过程中，深刻领悟到设计对于提升用户体验的非凡意义。
项目伊始，我们即对58招聘B端产品的现有用户展开了全面且深入的调研行动。
我们深知，唯有精准洞悉用户需求与痛点，方能打造出契合用户期望的产品。
为此，设计团队全员深入一线，置身于用户的实际使用环境，与各行业用户进行深度的面对面沟通。同时，我们运用多种调研方法，包括问卷调查、用户访谈、数据分析等，多维度、全方位地搜集用户信息。
在调研过程中，一系列影响用户体验的关键问题浮出水面。
其中，操作繁琐成为用户反馈最为突出的问题。众多用户抱怨，在使用B端产品时，完成诸如客户认证、发布职位、筛选简历等简单任务，往往需历经多个复杂步骤。
这种繁复的操作流程，不仅耗费大量时间与精力，更易引发用户的挫败感和不满情绪，宛如一道无形的屏障，拉远了用户与平台的距离。
此外，语义晦涩难懂也是普遍存在的问题。
B端产品中的专业术语和复杂表述，对于非专业用户而言，仿若天书，极大地增加了学习成本，甚至可能导致误解和误操作，严重损害了用户体验。
这些问题的根源，经深入分析，与传统产品设计理念的局限、对用户体验的忽视以及用户研究与沟通的不足密切相关。
基于此，我们决定从这三个层面入手，重塑设计思路，以提升用户体验。
在扎实调研的基础上，我们对问题进行了抽丝剥茧般的分析。
我们深刻意识到，若要从根本上解决用户问题，必须对设计理念进行大刀阔斧的革新。
首先，我们毅然摒弃传统的以产品为核心的设计理念，转而拥抱以用户为中心的设计哲学。用户作为产品的最终使用者，他们的需求和体验是产品设计的灵魂所在。因此，我们将用户需求与体验置于首位，重新审视产品的功能布局、操作流程以及语义表达等各个维度。
其次，我们将用户体验的重视程度提升至前所未有的高度。用户体验，作为产品竞争力的核心要素，贯穿于设计的全过程。我们通过简化操作流程、优化界面布局、明晰语义表述等手段，致力于提升用户的操作效率和满意度，打造流畅、高效的用户交互体验。
最后，我们强化了用户研究与沟通机制。深知只有深入了解用户需求与痛点，才能设计出符合用户期望的产品。因此，在与用户的每一次接触中，我们都用心收集他们的意见和建议，为产品设计与优化注入源源不断的智慧源泉。
基于对问题的深度剖析，我们开启了具体的设计工作。
设计，作为解决问题的关键环节，需要我们充分施展设计师的专业素养与创新能力，以用户为中心，对招聘B端产品进行全方位的重塑。
在操作流程优化方面，我们对现有流程进行了细致梳理和深度优化，大刀阔斧地去除了冗余步骤和环节，使操作流程如行云流水般简洁明了。
例如，在发布职位这一关键功能上，我们简化了信息填写步骤，并贴心地提供模板和自动填充功能，极大地降低了用户操作难度和时间成本，让用户在操作过程中感受到前所未有的便捷。
在语义表述清晰化上，我们对界面上的专业术语和复杂表述进行了精心简化和优化，使其通俗易懂且易于记忆。同时，对重点文案和标题进行突出处理，便于用户快速抓取关键信息，清晰知晓每一步操作的目的，辅助用户迅速决策，从而进一步提升用户体验。
在界面布局精简方面，我们对界面进行了精心雕琢，去除了繁杂的信息和多余的按钮。通过合理的布局与色彩搭配，提高了界面的可读性和美观度，营造出简洁大气的视觉体验。此外，增加搜索和筛选功能，使用户能够快速定位所需信息，进一步提升操作效率和满意度。
在整个设计过程中，我们充分发挥设计师的专业能力和创新精神，运用多种先进的设计方法和工具，如用户画像、设计原型、用户体验测试等，确保设计方案的科学性和有效性。同时，与产品经理、开发人员等团队成员紧密协作，形成强大的合力，共同推动项目顺利前行。
设计完成后，项目进入实施阶段。
我们深知，实施是设计落地生根的关键一步，需要团队充分发挥协作精神和强大执行力，确保项目顺利推进。
在实施过程中，我们采用敏捷开发方法，通过持续迭代和优化，不断提升产品的功能和性能。定期收集和分析用户反馈意见，及时对产品进行调整和改进。同时，加强与用户的沟通，通过多样化的用户调研方式，积极捕捉用户的每一个意见和建议，为产品的持续优化提供坚实支撑。
经过不懈努力，“简单设计”专项已取得显著成效。用户操作效率和满意度大幅攀升，产品留存率和口碑亦显著改善。然而，我们明白，设计优化是一场永无止境的修行。随着用户需求的持续演变和技术的不断革新，我们需持续探索与创新，以维持产品的竞争力和生命力。
展望未来，我们将坚定不移地秉持以用户为中心的设计理念，持续优化产品功能和性能。同时，进一步加强用户研究与沟通，通过持续收集和分析用户信息与意见，不断改进和优化产品设计。我们坚信，在全体设计师的共同努力下，58招聘B端产品将为用户带来更便捷、高效、愉悦的使用体验，成为招聘领域的璀璨之星。
总之，“简单设计”专项不仅是产品设计层面的优化与提升，更是对用户需求深度洞察与积极回应的生动实践。未来，我们将继续坚守这一理念，为用户创造更多价值与惊喜，同时不断提升自身设计能力与创新力，为产品的持续优化与创新注入源源不断的动力。
设计团队：老李头、王丹、温正远、崔秉鉴、赵德馨、陈浩然、刘静颐、刘春明
本文由人人都是产品经理作者【58UXD】，原创/授权 发布于人人都是产品经理，未经许可，禁止转载。
题图来自Unsplash，基于 CC0 协议。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
蓝蓝设计的小编 http://www.lanlanwork.com
