我们需要了解一下设计模式，例如它是什么、什么时候用、怎么使用，可以让我们在没有参考的情况下，也能设计出合理、好用的界面。
把不同的内容模块，放到一组顺序排列的面板中，这些面板每一个都可以折叠、可以展开，互不干扰。
你需要在页面上显示大量各种各样的内容，可能包括文本、列表、按钮、表单控件等，而你又没法把它们都显示在页面上。
1、用户可能一次只需要查看一个模块的内容。有些模块比别的模块更长或更短，不过它们的宽度一样。
2、这些模块组成了一个工具箱，或者两级菜单，或者包括一些交互式元素的某种结构，这些模块的内容要么彼此相关，要么彼此类似。
3、要注意的是，当一个大模块打开或者打开了很多个模块的时候，模块底部的标签可能会滚动到屏幕或窗口的外面。如果这一点对用户来说有问题，那就要考虑一下其他的解决方案。
竖向排列这些模块，并使用对于用户来说有意义的排列顺序。
例如：QUICK BI 右侧折叠面板，顺序是从大到小，从外到内。
为每个模块选择一个简短而富描述性的标题，并把这个标题放到一个横条上，让用户可以单击它来打开或关闭这个模块。
也可以用一个可以变换方向的三角形图标来提示打开/关闭的操作：关闭的时候向右或向下，打开的时候向上。
一次允许打开多个模块。
人们在这个问题上有一些不同的看法，有的人喜欢一次只能打开一个模块。不过根据经验，特别是在各种应用里，一次允许打开多个模块更合适。这样可以避免一个之前打开的模块突然消失，这样会让用户觉得很粗鲁，也很意外:“喂, 那个菜单哪里去了?之前就在这里的!
当用户在登录状态时，折叠面板应该在多个操作期间，保持它们各自模块的打开和关闭状态，这点很重要。
如果模块内容需要进一步拆分，折叠面板还可以级联使用，不过这样看起来会有点混乱。 因此只用一个一级折叠面板模块更合适，如果有必要可以采用其他结构代替，比如tab页。
把页面上的内容组合到几个不同的区块里，每一个都可以独立打开或关闭。可以随意在界面上放置这些区块，用户还可以移动它们，形成自己定义的布局。
你正在设计一个桌面应用（例如：钉钉、飞书）或者一个网页应用（例如：纷享销客、ONES），应用中会涉及看板、工作台、仪表盘、数据分析等页面，你希望用户对这些页面有一定的控制权。 这些页面应该是应用中的主页面、是用户会经常查看的页面。
在这个页面上，需要显示大量各种各样的内容，可能包括文本、列表、按钮、表单控件、图表等，而你又没法把它们都显示在一个模块上。
1、用户想同时查看好几个模块。
2、不同的模块对每个用户来说，有着不一样的价值。例如，有些人想看到A、B、C这三个模块，而另外一些人可能想看到的是D、E、F。 3、在空间大小方面，各个模块差异可能比较大。例如，用户希望把信息少的模块缩小。
4、模块在界面上的位置对用户来说很重要。例如，重要的内容用户希望放在前面。
5、有时候模块数量比较多，用户不希望全部展示出来。例如：用户汇报工作时不需要这个模块，可以把它先移除，汇报完后，再添加回来。
6、控制这些模块的功能可能是一个工具条，或其他交互式结构的组成部分。
因为不同的用户关注点也不同，他们希望能自己选择想看的内容。 可以把需要的内容放到显眼的位置，把不需要的东西隐藏起来。同时，他们还可以利用“空间记忆”来记住不同的内容在什么位置。
空间记忆：当人们需要使用某个东西时，经常是通过回忆它们的位置来寻找它们，而不是它们的名字。 例如：你因为有事外出，需要同事打开你的电脑帮你发一份文件，通常你也说一句文件好像再桌面的右边，这也是利用了空间记忆帮助快速寻找。很多软件把对话框的按钮（确定、取消）放在右下方，有一部分原因也是考虑到用户的空间记忆依赖性。
总结：使用可移动的面板可以让用户的工作效率更高，工作更舒服。
为每个模块提供名称、标题栏和默认尺寸，并为它们提供合理的默认设置。 让用户按自己的喜好在页面上移动这些模块，如果可能的话，可以提供拖曳功能。
让每个模块可以通过简单的操作进行编辑和隐藏，也可以考虑让用户可以彻底移走这些模块，在标题栏上放一个关闭按钮就可以。
可移动面板要清晰的体现编辑与预览状态，如果用户误操作打乱模块顺序，需要提供一个“恢复默认设置”的按钮。
把次要内容和可选内容放到用户能自己打开、收起的面板里。
你需要在页面上显示大量各种各样的内容，可能包括文本、列表、按钮、表单控件等，而你又没法把它们都显示在页面上。 同时，还可能有一些适用中央舞台模式的内容需要在视觉上优先处理，需要把面板收起。
1、这些模块为界面上的主要内容提供注释、修改、说明或支持。（例如：WPS右边的快捷键、样式、帮助、资源）
2、这些模块可能不是很重要，不需要默认展开。
3、对不同的用户来说，它们的价值并不一样。（例如：图中新手入门指导，老用户可能并不需要）
4、甚至对同一个用户来说，这些模块可能有时候非常有用，换个时间就不一定了。当 它们收起的时候，这些空间最好留给界面上的主要内容。
5、这些模块之间可能彼此没有多大关系。当用到Tab和折叠面板时，这两个模式会把各个模块组合到一起，表示它们之间有一些关联，而可收起面板不会对内容进行分组。
把无关紧要的内容隐藏起来可以让界面变得简洁。
当用户选择隐藏某个模块时，只要简单地收起这个模块就可以了。 它所占用的空间也会还给主要内容。
这也是渐进式展开原则的一个例子—只在用户需要的时候，需要的地方立即显示那些隐藏的内容。
总的来说，想让界面保持整洁，通过对内容进行分组和隐藏是非常有效方式。而可收起面板、Tab、折叠面板、可移动面板，这4种模式正是有效方式的工具。 如何使用
把内容放到一个单独的面板里，让用户可以用一次单击来打开或关闭这些面板。 可以利用引导性的文字来表示这里可以展开（例如：更多），也可以利用三角形的图标来表示这里可以展开。
当用户关闭这个面板时，把它所占用的空间收起来，用来显示主要内容。
也可以在打开和关闭这些面板的时候加上动画效果，这样会让打开和关闭时的过渡更加平滑。
如果有多个模块要用这种方式来隐藏，可以把这些模块放在一起，或者用Tab、折叠面板来组织，还可以把它们分开放在主界面上。
如果发现大部分用户都打开了一个默认为关闭状态的可收起面板，那么应该让它默认打开。
谢谢大家观看！
我与ICON的设计好像有什么不结之缘。早在2017年我就写过一篇如果对抗APP中ICON设计同质话的问题。提出了自己的一些建议。而在之后的工作中也多次改版或设计过成套的APP应用中心的ICON和系统后台ICON库。ICON设计的经验那是不得不丰富的存在。
ICON，中文翻译为图标。是对象的图像表示，指用图形指代某些名词，如：打开、警告、爱、学校、山等。ICON，是上世纪九十年代伴随IT 产业出现的一个技术词汇，原指计算机软件编程中为使人机界面更加易于操作和人性化而设计出的标识特定功能的图形标志。
下面是我总结了这几年设计icon的经验结合大厂的后台规范。给新手设计师的一些建议，都是经验之谈希望能够帮到你。可以让你在设计的这条路上走的越来越轻松。
那位美女设计师：啊！搞什么呀，B端设计师icon还有设计，你傻不傻呀。我给你分享几个现成的icon网站吧下载了就能用。
我：是的我也用现成的icon在很多的需求里。但是我更喜欢自己设计，自己去做。直接用现成的icon不爽吗。嗯当然爽呀。看是你要要知道做的更好的方法和可能性。不要总把自己当美工吧，我们可以是设计师的。
做为什么师我们大概都应该知道icon作为我们界面的重要构成元素，它会在很大程度上影响我们界面的风格。甚至会影响我们品牌的调性。所以一套符合我们设计风格具有我们品牌调性的icon是很有必要的。总之你想明白一个道理，你一整个屋子都装修好了，房间里独独到处都放了几把破椅子。不难受吗。
Ant design设计规范：图标是 UI 设计中必不可少的组成。通常我们理解图标设计的含义，是将某个概念转换成清晰易读的图形，从而降低用户的理解成本，提升界面的美观度。在我们的企业级应用设计范围中，图标在界面设计的诸多元素中往往只占了很小的比重，在调用时也会被缩到比设计稿小很多倍的尺寸，加上在图形素材极度丰富并且便于获取的今天，在产品设计体系中实现一套美观、一致、易用、便于延展的图标体系往往会被不小心忽略掉。Ant Design 相信一整套优质的图标对于设计质量的影响是非常巨大的，这考验着设计师的协作能力，以及对图形塑造的系统性思维，同时也能反映一个团队对于细节的追求。
中后台使用的icon大部分规范平台也好或者一有系统也好他们的设计原则基本是大同小异的。我的建议是如果你要设计一整套的icon图标。在设计之前确定自己icon的设计原则。这个设计原则可以依照自己的界面设计风格或期望的界面设计风格以及行业属性、自己品牌等去制定。
Ant Design 的图标设计原则源自「确定」和「自然」，落实到图标设计领域，一共有四个。准确、简单、节奏、愉悦。
设计造型准确的图标（保持偶数原则，去小数点）；选择表意准确的图标，不对用户的认知造成困扰。
在表意清晰准确的基础上，尽量保持图形的简洁，不做多余的修饰。
挖掘构图中的秩序之美。
赋予适度的情感。在部分图标设计中，会适度的注入拟人化的元素，令图标具备生命力。
Icon 作为 UI 构成中重要的元素，它一定程度上影响整体 UI 界面呈现出的风格，TDesign 初期提供一套适用于中后台场景的线性 Icon，以普适、通用的标准进行设计，风格契合默认 TDesign 的风格，线性、圆角。在TDesingv中设计原则为、从简、精确、适度
制作时保证参数的简化，尽量消除小数点以及非整数的角度。处理线条以及轮廓时删除多余的锚点，输出时应避免出现不必要的装饰，保持图标的简洁。
在设计时避免使用那些含义模糊的图形，当同个事物存在多个图形表述时，应选取最为流通的样式，必要时进行针对性的强化。在图标输出时也应遵守命名规范，精确的文字描述便于他人查找。
单个图标作为一个独立的视觉个体，在线条的疏密以及图形的搭配上要呈现适度感。在处理一些必要的高密度图标时也要考虑线条的节奏感，让其舒适不压迫。系列图标要遵守适度原则，将变化控制在一定范围内。
发现没大厂规范为了普世所以他们的图标设计原则定的基本都是一样的。只是换了一个词而已。而且他们的大部分原则和细节都是来自平面设计里的板式设计和标志设计里的形式美法则。
设计一套优秀的图标设计应该简洁明了、直观性强、独特性好、可识别度高、适应性广、细节处理精细、可扩展性强，并且能够根据用户反馈及时改进和优化。如果要具备这些特征，那我们在设计的时候就要遵循一些特定的规范。
icon设计的栅格在大场的设计规范里面分为两种。一种ant design设计规范里面的那种栅格。另一种是TDesign设计规范里面的栅格。我之前在做的时候是直接呀的阿里巴巴示例图库的上传模板里面的栅格进行设计的不过。没有这设计规范里面的栅格好用。
Ant Design 的系统图标都是按照 1024 x 1024 的画板进行制作的。
出血位： 在图标的设计过程中预留出血位的做法，可以预防某些造型的图标在具体应用时出现边缘被切掉的风险；同时在设计过程中，也为设计师把握图标间平衡留下了进退的余地。新版的设计规格在图形的外围预留了 64px 的出血位，多数的图标在设计中我们都不建议超过这个区域。
栅格作为图表绘制的底层结构，是一切属性设计的基础。线条的长短粗细、图标的大小比例等关键因素均在其基础上制定。图标常见尺寸为16*16；20*20；24*24；32*32这四种输出尺寸。这些尺寸均可以清晰的显示在常规的显示器上。TDesign 最终选择以16*16px 的尺寸作为图标绘制的统一栅格尺寸
我记得最早入行的时候画icon就用的这种栅格。但是我不太喜欢，因为在实际的设计之中会出现好多问题。当时的我是无法解决的。
面对各式各样的icon我们在上一步有了栅格，接下来就要处理在栅格里如何让形状不同的icon在视觉上大小是一致的，在视觉上是平衡的。所以转对不同形状的icon在栅格里所占的轮廓规范就产生了。基本这个轮廓都是一样的。因为他是一个很基础的东西。
但其实可能是我技术的问题。在过往的很多次设计中如果你完全按照这个轮廓去执行。做出来的icon你会发现其实在视觉上还是会存在问题的，我都会在做一次优化。不过这很大可能是我技术和设计能力的问题吧。
即使有了规范，栅格轮廓等。但是往往我们在设计制作的时候还是会有很多的细节需要去处理的。这样我们的设计才会更专业。因为我用ant 规范比比较多所以。我们就一起看一下ant的规范里对icon设计细节的一些建议。
在ant的图标设计规范中，对icon图标进行了、形式感、韵律、平衡、辨识这几方面对我们在设计和制作icon可能遇到的问题给了一些建议。
Ant Design图标设计建议详情：https://ant-design.antgroup.com/docs/spec/icon-cn#%E8%BD%AE%E5%BB%93%E7%BA%BF%E4%B8%8E%E6%A8%A1%E7%89%88
以上的内容主要在探讨一类icon图标的设计。那就是中后台的图标设计。但其实icon图标是有很多的分类的。交互性图标、装饰性图标、说明性图标
这类图标主要用于应用程序的界面设计，它们可以向用户传递某种信息，引导用户执行特定操作，同时也允许用户向程序传递控制信息。例如，登陆注册按钮、开关按钮、数量按钮、点赞、转发分享等都属于交互性图标。
这类图标主要用于提高页面设计性，它们可以加深个性化设计风格，提升用户线上体验感，迎合受众群的偏好，提升设计亲和度。例如，符合节日需求的线上活动呼应图标、个性化图标等都属于装饰性图标。
这类图标主要用于阐明信息，它们是区分不同功能或内容的视觉标记，简单地说，就是对功能的解释说明。例如，象形图标、隐喻图标、工具图标和混合图标等。
此外，根据图标的具体功能和用途，还可以将图标分为表意图标（又称解释性图标）和标识性图标。表意图标是通过原本不存在实物的符号表达某些特定的含义或操作行为，这些符号逐渐继承了一些象形符号的特性并不断演化。例如，“箭头”已经从最初的“弓箭”衍生为一种特定的表意符号。而标识性图标主要用于标识品牌、产品或服务，它们通常具有独特的设计风格和视觉效果，以便在市场上脱颖而出。例如，苹果公司的苹果图标就属于标识性图标。
为我以往的设计经验里大部分都是在做B端的设计和交互工作。在我的理解里图标就分两类。1、规规矩矩的ICON。2、花里胡哨的ICON。就这么简单。
再优秀的理论也只能是理论。实践才是检验真理的唯一标准。这不是我说的。这是老马（卡尔·海因里希·马克思）说的。所以就请大家进入我的实践过程吧。
需要还是要从最初开始讲。我负责的SAAS平台要迭代换框架。然后对界面视觉交互、产品功能都迭代一个大的版本。这次设计部分的任务就我来负责。
因为是大的迭代嘛。所以这次icon设计的需求是跟着整个平台一起走的。你要设计新的视觉还用之前的那套老icon显示是不合适的。在者说那套icon的质量也是一个难以想象的存在。是开发直接从网上个个平台找的。所以这次这个平台的视觉迭代就有了搞一套适合我们界面和行业的icon图标。
这是我们SaaS平台的设计价值观
因为是先有了界面，要做一套配合界面的菜单icon图标。我想我们的icon要符合整体页面的风格。不说给界面加分了，也不破坏我辛苦做的界面视觉。
结合我们品牌的logo图标的特点。让我们的icon也拥有独属于他们自己的丝带偶。把公司logo的设计特点加入到我们这次icon的设计原则里。
是的优美，是我们这一套icon的特点。也是从我们logo里提取出来的设计要点。然后把他运用到icon设计里。
规范的知道基本是使用的阿里巴巴矢量图库早期的那个上传图标模板的AI文件。为什么会选择使用这个呢。因为我们SaaS平台的所以icon都是从阿里巴巴矢量图库引用的。我要把我做的icon上传到阿里巴巴矢量图片他们使用，而不是直接切图给他们用。
在这套图标设计的时候，其实并没有完全的按照大厂的设计规范进行。在很多的细节上做了调整。为的是达到更好的效果。当然。也有很多遗憾。在很多的方面并不是很标准。在下次优化设计时，会更好的去执行制定的设计原则和设计规范。
之所以写这部分内容，是因为我觉得在平面设计里标志设计的知识对我们现在图标设计是很有用的。可以是图标设计本身就是适应了显示屏后的标志设计。如果你搞懂了标志设计的系统知识，那图标设计不就是手拿把掐的事了。标志设计就是杀鸡的牛刀。
一般我们说到标识设计可能大概览的就是会认为是品牌形象设计，也就是LOGO设计。是的我大学学的标志设计就是在讲品牌LOGO的设计。但我现在理解的标志设计可能意义更广泛。因为在很多的时候我是把标志设计的知识和原理来应用到其他的设计方面。
标志是品牌形象核心部分（英文俗称为：logo），是表明事物特征的识别符号。它以单纯、显著、易识别的形象、图形或文字符号为直观语言，除表示什么，代替什么之外，还具有表达意义、情感和指令行动等作用。
LOGO、标志、徽标、商标是现代经济的产物，它不同于古代的印记，现代标志承载着企业的无形资产，是企业综合信息传递的媒介。
标志的来历，可以追溯到上古时代的"图腾"。最初人们将图腾刻在居住的洞穴和劳动工具上，后来就作为战争和祭祀的标志，成为族旗、族徽。国家产生以后，又演变成国旗、国徽。
古代人们在生产劳动和社会生活中，为方便联系、标示意义、区别事物的种类特征和归属，不断创造和广泛使用各种类型的标记，如路标、村标、碑碣、印信纹章等。
到本世纪，公共标志、国际化标志开始在世界普及。随着社会经济、政治、科技、文化的飞跃发展，21世纪以来经过精心设计从而具有高度实用性和艺术性的标志，已被广泛应用于社会一切领域，对人类社会性的发展与进步发挥着巨大作用和影响。
随着“读图”时代的到来，标志以简洁、 独特、易识别的图形符号传达着特定的含 义和综合信息，成为人们相互交流和传递 信息、沟通情感、表达愿望的视觉语言。 特别是在注重品牌效能与品质的今天，标 志发挥着重要的作用。 标志最主要的功能是以其简洁、醒目、 美观的图形符号传递信息。
标志能够表述某种组织、某项活动或某 企业品牌的性质、服务和宗旨。标志作为一种视觉识别符号，能有效 区别各种品牌给消费者的印象。也就是说， 它能够表述出个性特点，使其从众多同类 产品的标志中被区别出来。
市场上的商品花色、品种繁多。在商品的海洋里，消费者只能根据不同的 标志区别同类商品的不同品牌和不同生产厂家，并以此进行比较与选择。商业企业在经营商品时，有的 也用自己的标志表示各自的经营特色。标志的这种作用是其取得法律保护的主要依据，在国际贸易中， 这种作用也得到了普遍的认可。
标志是现代经济的产物，它不同于古代的印记。现代标志承载着企业的无形资产，是企业综合信息 传递的媒介。对于企业而言，不仅要表明“我是谁”，还要说明“我怎么样”。标志通过在不同场合、 不同载体的反复出现，使人们在看到标志的同时，就能自然联想到产品
可口可乐欧洲太平洋集团公司前总裁乔戈斯曾经说：“可口可乐成功的原因很简单，许多制造商只 热衷于为消费者提供产品，而大多数消费者则需要产品的牌子。请记住，一听可口可乐不只是饮料，它 还是一个朋友。
如今的社会，享用名牌似乎成为身份的象征、地位的体现和个人魅力的表现，这就使标志有了某种 精神的力量，这种精神力量代表着品牌的价值。
名牌价值是无形资产，无形资产的价值远远高于企业的有形资产价值和年销售额。“可口可乐”“百 事可乐”的品牌价值都达到上百亿美元。标志在各个国家都受到法律的保护，从这个意义上说，名牌标 志是企业的无价之宝，丝毫也不为过。
美国可口可乐公司的一位经理说，即使可口可乐工厂一夜之间被毁坏殆尽，公司也能凭借“可口可乐” 标志的声誉从银行立即贷款重建工厂。可见，对拥有名牌标志的企业来说，标志就是企业发展的一种依 托与保证，是一笔巨大的无形资产。
标志作为企业和产品形象的象征，它用无声的具有美感的图形语言宣传着产品的质量与特色。标志 设计的好坏直接影响企业和产品的信誉度。成功的标志不仅代表了产品本身，也增强了产品的魅力。
著名的香奈儿（CHANEL）的标志以简约明快的图形和相得益彰的字体搭配给人以典雅、高贵之感。 香奈儿于 1913 年由创始人加布里埃·可可·香奈儿（Gabrielle Chanel）在法国巴黎创立，其标志是由两 个背向的“C”重叠而成，图形平衡对称，充满温文尔雅、端庄聪慧之气，
标志的本质是信息传播，这是现代的 标志设计的核心。标志的设计创意应该从 信息入手，从功能需要出发。需要告诉大家的是什么，而不是把形式作 为设计的唯一出发点。
在标志设计中，有的人喜欢造型简单的，这得到了大部分人的认可；而有的人则认为在简单中可适 当复杂，这要取决于实际的用途。不论简单或复杂，需要把握一点：标志需要具备的特质是独特。没有 哪个企业甘愿平凡，大多数企业都在竭尽所能地建立自己独特的企业文化和市场经营特色，所以在设计 标志时必须深思熟虑。
独特性是标志设计的最基本要求。标志的形式法则和特殊性就是具备各自独特的个性，不允许丝毫 的雷同。这就要求标志的设计必须做到独特、别致，追求创造与众不同的视觉感受，给人留下深刻的印象。
醒目的设计是所有标志希望达到的视觉效果。优秀的标志能够吸引人，给人以较强的视觉冲击力。 因为只有引起人的注意，才能使标志所要传达的信息对人产生影响。在标志设计中，注重对比、强调视 觉形象的鲜明与生动，这是产生醒目性的重要形式要素。
标志要易于识别、记忆和传播。这并不是说简单化，而是指以少胜多、立意深刻、形象明显、雅俗共赏。 通俗性强的标志具有公众认同面大、亲切感强等特点。对于商标而言，一个易记的商标形象首先要有一个与众不同的响亮、动听的商标名称，以好的商标名称为基础，综合考虑商标的特点，选择最佳方案， 再进行具体的图形设计。
标志色彩的配置一般有三种基本方法；
-是原色配合
原色的颜色单纯、强烈、鲜艳夺目，艺术效果和传播效果显著。
-是同类色配合
只选择一种颜色，采用依靠色彩明亮度变化的办法，如用桔红、桔黄、中黄、浅黄进行搭配，形成由浅入深的过度色视觉，能表达出动态感。
-是补色配合
这种色彩配置，对比鲜明，图形格外醒目鲜艳，能给人以很强的视觉冲击效果。
标志设计也是艺术设计的一种。所以他也同样适用于我们设计里的形式美法则。用这些法则去设计你的标志或ICON让他们的信息传递更准确。视觉表现更优秀。
形式美法则
标志设计是一种视觉艺术，人们在观看一个标志图形的同时、也是一种审美的过程。在审美过程中，人们把视觉所感受的图形，用社会所公认的相对客观的标准进行评价、分析和比较，引起美感冲动。
任何一个完美的标志图形必须具有统一性，这种统一性越单纯，越有美感。但只有统一而无变化，则不能使人感到有趣味、美感也不能持久，这是因为缺少刺激的缘，变化是刺激的源泉，有唤起兴趣的作用，但变化也要有规律，无规律的变化，然起混乱和繁杂。因此变化必须在统一中产生。
均衡是在不对称中求平稳。均衡可分为调和均衡和对比均衡两大类，调和均衡是指同形等量，即在中轴线两面所配列的图形的形状、大小、分量相等或相同。除图案造型的均衡外，还有量的均衡、色的均衡，在标志图形设计时必须相应考虑，以追求标志视觉张力。
节奏是韵律的条件，韵律是节奏的深化，节奏也就是“律”，这种律不仅表现在音乐上，而且反映在其他方面，当物体失去均衡则会引起运动。此种运动如有规律，则称之为“律”。在标志图形设计中，如果将线的长短、粗细、曲直、方位等进行不同程度的变化和巧妙组合，便会创造出不同感的“律”的形式，归纳起来分为：循环体、反复体及连续体。
在标志设计中，对比与调和应用极广，如在大小、方向、虚实、高低、宽窄、长短、凹凸、曲直、多少、厚薄、动静以及奇数与偶数的对比。对比是标志图形取得视觉特征的途径，调和是标志完整统一的保证。
任何一个完美的图形都必须具备协调的比例尺度。在标志图形中常用的比率有整数比、相加级数比、相差级数比、等比级数比、黄金比等。标志设计的形式美法则，不能孤立和片面地理解，因为一个美图形的设计，往往要综合利用多种法则来表现。这些法则是相互依赖，相互渗透，相互穿插、互相重叠、相互促进的，随着时代的变化，审美标准、设计手法也在不断发展。
近年来，标志设计发展越来越成瘦。总的发展趋势是由复杂到简约、具象到抽象、色彩更多样话、标志的发展是一个设计相互交融、设计风格的多样化过程。设计手段是次要的，目的才是第一位的。更注重的应使其商业性。
以下标志设计趋势内容引用自标志情报局编译的作者为Bill Gardner是logolounge.com的创始人的《2023标志设计趋势报告》。https://www.logonews.cn/logo-design-trends-for-2023.html
我们每年收到的所有标志清晰解读并整理成这份报告并不是一项容易的工作。总共超过30,000个标志，对我和一群杰出的设计师来说，这就像是世界上最大规模的配对游戏。最初，我们归纳出大约60-70个组别，然后将它们进一步划分为具有最大影响力的15个类别。
我只是通过对提交的30,000多个标志进行彻底分析（还有国际上每个重要品牌的更新和重塑）后呈现的报告。因此你要了解的是，就像任何气象学家会告诉你的那样，他们不能保证天气预报的准确性。同样，我们也无法总是预测设计师将向哪个趋势方向发展，这就是这份报告能让我们保持警惕并感到有趣的原因所在
01、Wildflowers(野花)；02、Bloblend(流动混合)；03、Fades(逐渐模糊)；04Foreshort(透视)；05、Thrust(推进)；06、Spirals(螺旋)；07、Sonics(声波)；08、WireForms(线框)；09、BallCaps(球形顶端)；10、NameFills(名字填充图形)；11、Stretchers(元素拉伸)；12、NeoStencil(喷漆模版艺术)；13、HalfAster(半星号)；14、Double Os(双圆环)；15、Ritz(饼干)；
重新读了一遍标志设计的内容。果然受益匪浅的感觉。还是要时常温故而知新的。学习了大厂的ICON设计规则也是很有收获的。
伴着公司业务发展，开源的组件库已无法满业务需要，搭建一套更适合公司业务的UI组件库，势在必行；设计系统承载着作为一个沉淀基础能力的支持平台，同时也具有赋能多多边业务、多种角色的重要作用和价值；
为了更适用于企业级产品的开发和使用，通过大量中后台场景的的实践，B+Design设计系统提炼出以下设计原则：
搜索框的设计并不简单，很多的细节需要设计师去注意和思考的。下面总结一下我在设计搜索框的经验，分享给大家。
你可能认为，搜索不就是一个矩形框+放大镜图标再加一个占位符不就搞定了吗？
经过多年的设计工作频繁设计搜索功能后，我发现在不同类型的产品中搜索框的交互方式、视觉样式都有所不同，且用户在搜索前、搜索中、搜索后都需要注意用户在搜索各个流程中的可能操作，包括正向流程、反向流程。
搜索框的设计并不简单，很多的细节需要设计师去注意和思考的。下面总结一下我在设计搜索框的经验，分享给大家。
友情提示：文章尾部有福利相送，不要错过~
搜索是用户将查询的信息输入搜索器中，搜索引擎就会在约定的规则下将获取到的信息反馈给用户的过程。
搜索是B端产品中非常重要的一个功能模块，通过搜索框用户可以快速找到或者筛选出自己想要的内容，在引导用户走向方面起到了绝对性的作用。
体验设计中有个概念叫用户分层，即便是同一个页面，我们也需要去细分不同的场景对用户做分层，为不同的用户做设计，搜索功能就是最好的为有明确目标的用户分层的设计。
搜索功能的用户分层可分为几种场景：
搜索首先要确定哪几个字段可以被搜索到，名称？编号？等等...
有明确目的型用户在进行了搜索这个行为后，便生成了搜索历史。因此，我们可以通过挖掘用户搜索行为背后的目的，来分析为什么使用不同的布局。
模糊搜索使用的频率居多，毕竟有时候用户不一定可以精准的记住想要搜索的准确信息。不过也不是绝对的，两者皆可选择，可根据产品场景选择。
搜索功能可以简单地输入，快速输出，只要几个关键字就可以获得符合用户需求的内容，将原有的用户行为成本转移给系统，从而让使用体验更加快捷、轻松。
同时语音输入和拍照搜索进一步降低了用户行为门槛。
搜索功能可以帮助用户快速定位信息，从而提高了用户对内容的触达效率。常见的例子就是：bi r用户有明确的购物需求时，不需要一步步点击商品分类，选择商品类型、品牌等信息，就可以快速直达自己所需的商品。
所以，搜索框的体验如何，决定着B端产品解决问题的能力、效率以及用户的使用频率。
好的搜索框一方面能帮助用户节约时间成本，让用户在大量且复杂的信息中筛查所需目标，提升用户体验；另一方面，还能协助产品收集用户行为目标并做好数据埋点，为后期的更新迭代提供强有力的依据。
除了设计方式外，搜索还涉及到结果信息的数据匹配规则，受到算法精准性、商业化干预程度的影响，设计师同样需要关注搜索结果如何更好地匹配用户的精确搜索、模糊搜索需求，以从信息设计层面提升用户体验。
搜索流程，即搜索前、搜索中、搜索后的页面跳转以及搜索框形态的变化。
对应的就有：搜索入口——搜索推荐页——搜索联想页——搜索结果页——搜索结果页返回。
设计师想要设计流畅的搜索体验是无法避开梳理搜索流程的，考虑完整的搜索链路和用户关键体验路径，并且设计出对应的所有细节，将搜索功能的价值发挥到最大化。
对于搜索系统来说，整个流程可以分为三步，分别是：
B 端业务中搜索使用的场景有两类：一类是全局搜索，一类是页面局部搜索（常见的有列表搜索、表单搜索）。
对于B端系统中模块分类较多，所涉及到的内容比较全面的，一般会选择全局搜索，全局搜索是通过关键词匹配全局范围内的信息来搜索的。
优势：无学习门槛，用户无需考虑内容对应的分类只需输入关键词；
劣势：精准度不够高；搜索出来内容泛；需用户二次查找目标内容。
注意：设计全局搜索时要注意搜索后的结果展示逻辑，如果分类较多，界面还可以根据分类tab分别归类不同。
tips：搜索功能在页面中的重要程度及搜索范围，决定了搜索的位置和样式。
目前大部分网站在布局搜索框位置时，大致遵循以下几个规则：页面居中、页面顶部居中、页面顶部右边、页面顶部左边
知乎的搜索入口位于顶部导航栏的显著位置，引导用户进行搜索，并且搜索框内的占位文字根据算法会间隔一段时间改变，引导用户发现新的内容，促进用户在知乎上的使用时长。
最常见的搜索方式之一，将搜索以输入框的形式居于页面顶部（状态栏或标题栏下方），在视觉上非常醒目，用户进入应用即能快速找到，很符合用户的视觉浏览动线，也是C端产品提高转化率的流量入口。
形态相对比较简单，通常以“放大镜”样式的 icon 出现在界面右上角，视觉上不会过于突出，常用于搜索行为不是特别频繁的场景，需点击后才会跳转至搜索框页面。
Icon 搜索入口相较于上述提到的类型在视觉引导方面略逊一筹，相对弱化了搜索功能，但节省了更多的导航栏空间，呈现位置比较灵活，可单独呈现、也可与其多个其他功能 icon 并列组合展示。
指的是在页面中的某个模块加入搜索的功能。
常见在数据列表页面加入搜索的功能，搜索的目标只在该模块该内容中进行搜索，搜索的信息具有局限性，当然也是更加准确地搜索用户想要的目标信息。
下图是一个美团商家后台的列表页面，此页面加入了搜索的功能。
另外，B端常见在表单页面加入搜索的功能，搜索的目标只在表单选择内中进行搜索，搜索的信息同样具有局限性，可以通过控制某个字段或者某几个字段的信息来展开搜索。
B端业务中复杂的场景中存在同一个页面中有多个搜索入口（如上图美团），设计前需梳理清楚每一个搜索入口的交互逻辑，不同搜索入口覆盖的搜索范围、搜索过程、搜索结果是否一致，在占位文本上也需体现出该搜索入口的搜索内容。
模糊搜索是用户搜索意图不明确时，将用户的查询与待检索的内容进行模糊匹配。
模糊搜索无法精确理解用户的查询意图，搜索结果可能有大批量用户不想要的信息，使用模糊搜索时一定要结合实际场景，慎重使用。
优点：只要有相关的内容都会被检索出来，减少了精准搜索带来的记忆负担；
缺点：容易把相关的信息也带出来，例如检索186，把相关号码也匹配出来。
精确搜索是指用户在搜索时，针对某一数据字段搜索，来查找所需要的数据。
根据业务场景不同，我们会查找某一字段，或者是用标签切换不同字段来查找。可以帮助用户在巨大的信息池中缩小目标范围，快速而准确的定位到目标数据，并速获取需要的信息。
优点：搜索匹配精准度高。
缺点：每次只能对单一条件进行搜索。
总结：
我们可以根据产品的发展阶段、需求侧重、用户的专业度和使用习惯来综合决策使用哪一种方式更合适。如果侧重查询效率且用户是有专业门槛的使用者时，可以优先考虑精确搜索；如果侧重查询结果的丰富度，可以优先考虑模糊搜索。
基于搜索栏的表现形式，可以分为以下四种类型：单属性搜索、切换属性搜索、多属性模糊搜索以及多属性组合搜索。
类型之间没有优劣之分，根据业务场景使用对应的类型即可。
单属性精确搜索：通过某个特定属性就可以快速定位到目标数据，具有唯一识别性的、高使用频率的、对用户决策有意义的。
适用场景：表格单一数据信息特征突出，可以用此数据标签快速定位目标数据。
切换属性搜索也被称为定向搜索，是由用户主动选定搜索范围后再进行搜索；
优势：搜索精准度高。
劣势：增加了部分用户的学习成本及操作步骤。
适用于注重搜索结果的精准性或展示产品搜索能力等场景，定向搜索适用的几种场景：
a、产品数据量足够大且重搜索功能，用户对于搜索有明确目标，定向可以帮助用户提高搜索的精准范围和效率；
b、搜索时输入的内容无法通过同一套搜索交互方式和后台计算逻辑承载；如单次搜索和批量搜索的输入格式不同，搜索结果存在多样性；
c、需外露产品亮点功能，有多个常用的搜索属性，对于前置条件的数据计算能力和开发成本更高。
明确并固定选项类别，降低用户操作难度。下拉筛选适合的选项类别有限，不适合多类别、复杂维度的分类。
平铺展示搜索条件内容，每个 Tab 标签代表一个筛选维度，操作便捷。Tab 标签的数量不宜过多。
B 端类产品数据量丰富，在实际使用时，简单的方式很难全面覆盖到各个搜索场景，精准定位搜索结果。所以通过多个筛选维度的结合，形成多属性的组合搜索，能够大幅提升搜索结果的准确性。
B端系统还有一种比较常见的搜索类型，是在定向搜索的基础上，进一步丰富了搜索选项，比如指定搜索的时间范围、数据类型等，设置的选项越详细越能够提升搜索结果的效果和准确性。
在设计时需要注意，B 端系统用户角色多，层次不同，所以更加需要注重搜索前的引导，针对搜索规则、搜索限制等，应该适时的以简练易懂的语言提示。
多标签模糊搜索：表格多个数据都具有特征，往往业务要求对数据的精确度较高。
适用场景：业务类型多样用户可能记忆不精确且有多个数据特征，对搜索的便捷性要求高精确性要求低。
多属性组合搜索：可以输入多个字段进行组合搜索（取并集），对空间的利用率高，适合更加复杂的列表内容。
适用场景：综合筛选项，对空间的利用率高，多标签组合搜索可以得到较为精准的搜索结果。
聊了这么多搜索内容，与设计师密切相关且对外输出的首要就是搜索栏设计。
对于用户来说，搜索是为了解决用户明确或者不明确的搜索需求，让用户能够快速准确搜到想搜的内容。设计栏设计的目的就是，让搜索能够提高用户获取信息、内容的效率。
常见搜索框设计样式
1、填充色：通常选用与页面背景颜色反差较大的颜色作为搜索框的填充色，方便用户查找。
2、线框：多用于干净简洁的背景页面。
3、投影：常用于风格简洁轻量的风格页面，同时搜索功能级别较高的场景。
4、透明度：常用于背景色复杂的场景，目的是为不破坏背景页面的整体效果，在视觉上更和谐。 无外框：用于风格简洁的大留白的页面。
完整的搜索流程包含了各种细节：例如搜索栏的形式、光标停留、输入状态、异常数据、搜索结果、二次筛选等等。整个过程包含很多交互的细节设计，下面从激活搜索栏、输入反馈、触发方式来展开说明。
搜索激活指用户激活搜索框时出现的搜索下拉面板，B端业务中搜索激活内容常见以下三种：
搜索记录通常以标签或列表的形式显示，以时间顺序从新到旧排列，一般不会完全展示，可以滑动查看更多，或者折叠展开。
注意：搜索记录会涉及对用户行为的记录，关系到用户的搜索隐私，所以应当允许用户手动删除。
在 PC 端产品具有页面空间优势，用户的搜索过程完全是通过搜索栏完成的。
搜索栏中会增加历史搜索记录，下方增加推荐关键词，帮助用户快速完成搜索。同时也可以唤醒用户对某些商品的兴趣和记忆，从而挖掘用户潜在的搜索需求，这一点电商产品用得偏多。
在面板中展示“搜索历史”和“最近浏览”，增加相关内容曝光，去给用户提供更多选择以触达目标内容，该交互形式通常出现在全局性搜索或多维度搜索功能中。
搜索发现是系统基于用户的搜索记录，依据算法向用户展示的搜索关键词推荐，但并不是必需模块，可以基于产品定位进行考量。常规的c端产品上用得多，B端产品用得少。
由于搜索发现也涉及用户隐私，但应用一般不会让用户直接删除，所以应当允许用户对搜索发现进行隐藏，不然极其容易引起用户的反感。淘宝、京东都有搜索发现，并且也允许用户进行关闭/显示的操作。
热门推荐是搜索推荐页里面内容推荐的总称，可以演变成多种推荐形式，比如“热搜推荐”、“推荐活动”等，热门搜索是应用商业化的重要手段，许多应用都有这种模块，并且内容形式多样。
知乎的热搜就是结合热搜、时事热点等进行推荐。
搜索反馈指用户输入本文时未确认搜索执行的中间过程状态。在B端场景下搜索反馈具备很强的引导作用给予用户当下的状态提示；
是通过已输入的关键词来预测可以找到的搜索结果，为用户创造更加便捷的体验。
搜索联想承载的不止显性的设计呈现，还有背后的算法逻辑；例如是否可以识别拼音、不同搜索方式呈现的联想词范围，都需要提前确认落地可行性后再统一定义相关交互规则，并在产品中的所有搜索场景中保持相同的交互逻辑。
用户在搜索时输入了错误的词汇，系统经过判断后会展示正确词汇的搜索结果给用户，并友好地告知用户正确的搜索方式。特殊状态包含无结果状态、网络不佳状态等。
实时搜索+实时显示；搜索只有一个文本输入框，没有按钮可点击，这样的搜索交互是通过输入关键词后，系统自动检测所有内容中符合关键词的目标信息，随着关键词的持续输入，与之相匹配的结果会逐渐减少、直至找到目标，类似自定义筛选功能。
这种交互一般对于数据信息比较少的情况下会比较友好，加载的速度更快，避免服务器的压力太大、影响反馈效率，例如地址搜索、查找联系人等。
关键词输入完成后，需要手动点击搜索按钮向服务器发送指令才会得到相应的搜索结果，这种方式适合大部分表格场景，更加适合B端产品复杂且庞大的数据场景。
搜索结果页是用户搜索的落脚点，在这个页面，用户会有目的性地浏览搜索结果。
搜索结果中隐含着搜索逻辑，全局搜索场景下多数为模糊搜索，即把与搜索关键词详尽的内容页反馈出来，匹配度低，需要花时间对结果二次筛选。
1. 快速浏览数据，并能够准确找到数据。
2. 需要经常变换条件的组合迭代查询数据，对查询结果精准定位。这就需要搜索结果后，不要清除用户的查询内容。
3. 对数据进行操作，如收藏、删除、下载等。
不同的内容需要不同的页面布局来支撑的，b端场景中最常见的两种布局，筛选上下布局和左右布局，当然内容部分又分列表布局和栅格布局。
1、凸显关键信息：
为了便于用户找到精准高效的信息或者进行便捷操作，在搜索联想页状态时，当用户输入的信息足够清晰可预测，可以将关键信息凸显呈现，以引起用户的注意力，在进入搜索结果页之前就可以提升转化的可能性。
此外，这种关键信息凸显的形式，在搜索的商业转化方面也有明显的作用。
2、没有结果，如何设计
搜索没有结果会让用户感到非常沮丧的，尤其是当用户进行了好几次搜索之后，依然没有结果，应当为他们提供有价值的替代品。
一般出现无结果的状态有两种情况：
a. 用户输入错误，一般会提用户正确的搜索方式，并且自动帮助用户纠错，
b.搜索结果无，这种情况一般设计会以空状态提示用户，采用友好的方式提醒用户更换关键词。
在使用中，搜索本身应该是0思考成本的，否则就失去了索引的核心价值，基于此，总结一下5个设计注意点：
当用户输入搜索文本，点击搜索按钮，就进入了搜索结果页流程，此时搜索框内应当保留搜索文本，以便于用户明确搜索的内容（不要依赖用户的记忆力），同时，也便于用户再次编辑搜索文本。
考虑到输入/清除的便捷性，应用也应当提供一键清除按钮，点击一键清除搜索的文本，减少用户的操作成本。
搜索项目不可避免的比较多时，可以进行分类展示，降低寻找成本，常用的有两种分类方式：
无效的自动建议让整个搜索体验降低，而精准的自动建议会让整个体验好上许多，它会根据用户用户的输入内容（词汇词根和后台数据）为用户提供有用和精准的输入内容建议，这有助于帮助用户提高搜索过程的精准度，提升整个搜索体验。
输入错误绝对是最常见的错误，如果用户错误地输入某个关键词，而你的检测到了，并且针对错误提供更正之后的结果，这样就成功的规避了因为错误的关键词所导致的不良后果，用户也不用再次进行搜索了。
即使用户熟知搜索引擎的全部功能，也需要借助大脑记忆来挑选关键词，进行搜索。
想要找出有意义的、可用的搜索关键词搭配，用户需要结合他们的搜索方向，最近的查询，联想相关的属性和关键词，使搜索体验更便捷流畅。
总结
搜索是我们日常中频繁接触的功能，看似简单，背后都隐藏了很多流程与逻辑，不建议设计师盲目遵从原型依葫芦画瓢。
设计师更应该在设计之初从业务类型、功能定位、使用场景等多维度综合分析选择，从交互体验层面去深思搜索功能，因为搜索除了数据匹配精准度、搜索内容广度之外，搜索体验的便捷性也会影响用户搜索的感受。
每一处细节背后的设计思路就变得尤为重要。
本文总结梳理了搜索功能，从搜索基本属性、应用场景，到搜索分类，再到搜索栏设计，都进行了阐述，最后再总结了搜索设计的一些注意点。希望你能够帮忙理解搜索功能的设计。
作者：三原设计社
链接：https://www.zcool.com.cn/article/ZMTUzOTE0OA==.html
来源：站酷
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan。
不知道你们有没有思考过“对话框”和“弹窗”的区别，我们平常所称呼的“弹窗”主要着眼于动作，意思就是弹出来的窗口，是泛指，在GUI（Graphical User Interface）屏幕中几乎所有弹出来的对象都可以称之为“弹窗”。
在常用的两个前端网页开发组件Ant Design和ElementUI中，没有单独命名为“弹窗”的组件，都是细分在各个功能分类中。比如Ant Design中相关的细分就有警告提示、全局提示、对话框、通知提醒框、气泡确认框等，而ElementUI中则又是不一样的细分法，除了分类方法和命名不一样，归根结底达到的目的是一样的，以上我们都可称之为“弹窗”，当然在工作中用细分的称呼会更专业更明确。
这里的“窗口”对标“对话框”和“弹窗”的概念，窗口是承载应用程序的区域，应用程序的窗口被打开，则表示该应用程序正在运行中。窗口可以移动、可以放大缩小，主要有二种姿态，一种是“独占式”，一种是“暂时式”。顾名思义，“独占式”就是需要占据大部分屏幕的应用，ps、ai的窗口就是“独占式”窗口，而“暂时式”则大部分时间在后台运行，比如音乐播放器、杀毒软件等，只需在必要时打开即可。
一个应用通常由一个主窗口和若干辅助窗口构成，弹窗就是典型的辅助窗口之一。
对话框强调了用户与计算机进行对话的过程，是叠加在应用主窗口上的弹出框，一般在对话中它会给出消息或要求输入。当对话完成后，即可关闭对话框。说人话就是，对话框一般需要用户进行操作，当用户输入或者点击“确认”、“取消”等按钮时，计算机会根据指令进行工作，这是一个人机“对话”的过程，因此称之为“对话框”。
无论在现实中还是界面交互中，我们都不希望对话被打断，所以对话框通常是模态的（下文会解释模态和非模态的定义）。
梳理完三个容易混淆的概念之后，接下来主要从弹窗的二个角度展开讨论：弹窗的分类和应用场景；弹窗的设计细节和技巧。
弹窗可分为两大类型：“模态弹窗”和“非模态弹窗”。
模态弹窗：用户必须给予弹窗反馈，除非点击关闭或者操作完成，否则弹窗会一直在。形式上来说就是给当前页面添加蒙层，使用户将注意力集中在弹窗上。上文提到，无论在现实中还是界面交互中，我们都不希望对话被打断，模态弹窗不会轻易被打断，所以对话框通常也都是模态弹窗。
模态弹窗的常见场景：你打开了一个应用的模态弹窗后没有管它，然后切换到其他应用程序中去，等你忙完回到原来的应用时，那个当初的模态弹窗仍旧在那儿等你。这就是模态弹窗，虽然看起来僵硬死板，但是它的目的和使用范围通常是非常清晰的。
非模态弹窗：不需要给出反馈，不影响用户的其他操作，主要有属性配置弹窗、Tooltips、消息通知、气泡框等类型。
下图红框中就是典型的非模态弹窗，它们可以同时开启且互不影响，不会影响主程序的进程。
非模态弹窗的另一个特点就是：实时生效。点开非模态弹窗的同时仍然可以看见主界面，主界面会根据你的操作实时变化，你可以随心所欲地不断选择、改变、选择、改变，而模态弹窗则无法在你点击其中一个表单的当下立即做出改变。
下图例子就是非模态的属性配置弹窗。
出于营销目的，这类弹窗都会第一时间出现在你面前，直到手动关闭，它的特点就是不用登录也会出现，提高曝光率，便于拉新和转化。
主要是为了将一些重要信息通知给用户，这些信息要么来自一些被触发的事件，要么来自应用开发者的信息，一般在用户登录后第一时间弹出，确保用户不会错过。需要注意的是，在应用的通知中心一般也需要保留这类重要或者高级别的通知，以便用户可以随时查看回顾。
提示类弹窗是由应用程序主动弹出的消息，主要有三种状态：错误、警告、确认。通常是用户进行某项操作后给出的反馈信息，会中断当前工作流，属于阻塞型提示。
以上都属于通知公告类的“模态弹窗”，特点就是一般不需要用户具体操作，用户将其关闭或者点击“确认”等按钮即代表用户已经接收到该消息，弹窗就完成了它的任务。
“简单”意义上的弹窗可以理解为只有平铺的表单让你选择或输入，交互清晰明了。比如创建项目、分享链接、更改名称等操作。
有些应用的功能配置中有很多复杂的属性，简单平铺的弹窗无法满足需求，需要分层分类归纳，于是从20世纪90年代开始出现了选项卡/标签页弹窗。它的优点是合理利用了空间，也能让用户更好的理解信息层级。
mac os 8.5系统的弹窗（发布于1998年10月）
monday.com的配置弹窗（简洁的标签页）
标签页弹窗的设计必须合理且适度，找到信息之间的因果关系，仔细斟酌并加以连接整理。同时，单个弹窗中的标签页不宜过多，一般不超过五个（动态可增减的标签页除外）。
如果你的标签页过度堆叠，你需要尝试改变交互方式，重新整理信息。一种办法是增加标签页的深度，将能够归纳在一起的内容尽量整合，放置在单个标签页中；另一种办法是拆分信息，分成多个简单的弹窗。
下图中的例子就是第一种办法，整个弹窗有三个标签页，但是单个标签页中又划分了更详细的结构化信息，是一个典型的标签页少但信息量大的弹窗。
流程步骤弹窗与标签页弹窗接近，区别就是步骤弹窗需按顺序进行，一般上一步未完成之前无法进入下一步，用户注册常用这种方式。
属性配置弹窗主要为了让用户改变某一对象的属性，可以是局部属性也可以是全局属性。
属性配置也可以用模态弹窗，如何选择用“模态”还是“非模态”？当你需要让用户实时看到界面的变化或者表单项简单的时候可以选择“非模态”，如果操作复杂或者信息加载比较耗时，则采用“模态”更合理。
下图为实时生效的日期选择弹窗
下拉菜单几乎都是非模态，它的优势明显，没有复杂操作和各种表单，只需要鼠标划过点击即可，快速高效。
上文中应用级的消息提示通常是模态弹窗，而非模态的消息提示弹窗则通常从页面的顶部或者右侧弹出，这类弹窗可以长时间驻留在屏幕边缘，也可以一段时间后自动消失。
点击按钮时，弹出气泡式的弹窗就是气泡框，气泡框可以针对元素进行简单的操作，尺寸也会根据内容大小不一。
Tooltips跟上图的气泡框很类似，区别在于Tooltips更轻量，属于页面中最小的弹窗类型，用于功能的提示说明，通常都是文字，背景用深色来与主界面拉开层次。
一般来说，如果是明确的属性配置弹窗都应该有一个标题来说明用途或功能，以及关联的动词来方便理解。比如“创建列表”、“删除列表”、“修改配置”、“配置参数”等，不同标题对应不同的功能场景，前提是方便理解。另外，动词在名词前面或者后面都可以，注意统一规范即可，不要一会儿在前一会儿在后。
标题字号一般比默认文本字号大2px或4px，也有应用为了突出标题，选择使用更大的字号，但大的字号也应该符合文字规范，而不是随意使用。
模态弹窗应至少包含一个以上的关闭方式，常见的弹窗关闭方式有4种：（1）、右上角的关闭按钮；（2）、弹窗底部的“取消”按钮；（3）、弹窗外的任意区域；（4）、一段时间后自动消失。
“关闭”按钮在弹窗外：常见于营销弹窗，一方面按钮远离弹窗，比较隐蔽，拖延用户关闭弹窗的时间，提高信息的曝光率。
“关闭”按钮在弹窗上：版式设计中有一个“破型”的概念，是一种打破规矩的设计技巧，能让画面快速吸引眼球，所以营销类弹窗经常采用这种设计方法。这种概念可以理解为，我们希望用户关注于被强调的部分，常见的场景就是ios系统批量删除App的时候，应用图标左上角会出现“移除”按钮。这种方式强调了“关闭”按钮，视觉上增加层次外，用户的关闭体验也更佳，减轻干扰性弹窗对用户的负面情绪。
“关闭”按钮在弹窗内：这是应用最广泛最不容易出错的方式，对用户来说，固定在弹窗右上角的“关闭”按钮代表了安全感，在误操作或者想中断操作时我们会自然而然地去右上角点击“关闭”。
弹窗底部的按钮一般有2种功能:（1）、取消或者确认；（2）、进入下一步流程。基于大多数用户右手掌握鼠标的习惯，一般按钮居右下角的设计方式更广泛。这些按钮上的文字大不相同，代表了对计算机的不同指令，但相同的结果都是关闭了当前弹窗。
有些应用也会采取按钮居左的设计，这种方式有一个优点就是减少误操作，让按钮远离鼠标点击热区。
这种方式一般用于模态弹窗，除了弹窗中的关闭按钮外，点击弹窗外的任意区域关闭体验更佳。操作配置类弹窗不建议采用这种方式，容易误操作导致正在配置中的弹窗被关闭。
B端弹窗的标题字号通常比内容文本大2px或4px，常用字号为12px、14px、16px，14px为默认文本字号，12px为辅助说明字号，也有紧凑型页面将12px作为常规字号。无论选用何种字号，都应跟主界面的字体规范保持一致。
左对齐：弹窗中应用最多的对齐方式，适合表单较多的配置类弹窗。
居中对齐：常见于消息提示类弹窗，适合图文结合或者信息较少时的排版方式。
两边对齐：两边对齐的方式让弹窗看起来更规整，适用于平铺的配置类弹窗。一般表单较多的情况下不建议使用两边对齐的方式，一方面左对齐比两边对齐看起来更有层次，另一方面多表单时两边对齐会使弹窗看起来冗长。
除了对齐方式，表单的排列是B端弹窗中最令人头疼的一块内容了，在一些复杂的操作弹窗中，常常包含各种类型的表单，例如下拉框、输入框、日期框、穿梭框以及各种组合模式的表单项，很容易让表单看起来凌乱，也影响了交互操作。
单行一个表单项：常见的表单排列，适用于表单较少的排版方式。
单行多表单并排：在复杂场景中，单行只排列一个表单项会让弹窗超长，因此会采用多个表单并列分布的方式。这种方式存在2个问题：（1）、如果表单的标题长短不一，看起来参差不齐，下图中的表单标题一样长是最理想的场景；（2）、横向距离长，导致弹窗过大。
标题与表单分行排列：越来越多的应用采用这种表单排版方法，这种方法可以兼顾更多场景，可拓展性也更高。这种方法会增加纵向空间的占用，不过眼睛焦点的纵向浏览比横向浏览获取信息效率更高，所以在表单复杂的情况下，相比于上一种方法也是一种更优解。
表单的排版不只局限于一种，我们需要根据表单内容来设计。但是需要注意3点：
(1)、当表单标题长短不一，上下无法等距排列时，我们要尽量将标题和表单分行排列；
(2)、一行不要出现太多的表单项，一般来说弹窗中最多一行排列三个；
(3)、表单的灵活性很强，哪些需要宽度固定，哪些需要根据内容可扩展可换行，我们都要在设计中加以规范说明，多考虑可能会出现的样式问题，提前规避。
弹窗是一个容器，容器的大小取决于放置其中的内容物。这里主要讨论场景复杂的对话框的尺寸规范，其他例如Tooltips之类可作为单独的组件在需要的场景直接调用即可。
对话框的大小主要根据内容而定，B端应用中，一个尺寸无法满足所有类型的弹窗需求，所以我们要设定几种常规尺寸，一般可设定为4种：S（通知提示类）、M（配置简单）、L（配置复杂或者扩展详情）、特殊（根据实际情况而定）。pc的小屏幕分辨率为1024*768，所以高度尽量控制在600px以内（除去导航栏、工具栏高度），宽度控制在1000px以内，如果你所设计的B端产品在某个固定的场景中使用，也可以根据使用场景而定，原则就是要让弹窗能够一屏展示完全。
这里主要分享一个小技巧，对于弹窗来说很实用。sketch右侧属性面板有一个“调整尺寸“功能，非常适合各种组件化的应用。不同场景下我们会需要不同尺寸的弹窗，有了这个功能，我们不需要每个弹窗都画一遍，只需要创建一组基本的弹窗规范，其他尺寸可以根据所需场景调整。
未调整过的组件不能随意更改尺寸，否则将变形不可用。
创建弹窗组件时，把弹窗里需要固定不便的尺寸参数设置好。（设置方法：靠左的左边固定，靠右的右边固定，对角的靠两个边固定，分割线高度固定，文字图标宽高都固定）。
设置好后的弹窗组件即可在设计稿中随意调整大小，固定参数不会发生变化，因此我们在设计规范中只需要做一种或二三种常见的弹窗样式即可，不需要把设计稿中的每种尺寸都放到设计规范中。
表单同理，在组件中设置好参数后，调用时可以根据情况替换图标、文字和宽高，非常方便。
在B端设计中，随着数据量的增加和业务线的扩大，设计师在设计时，常常需要考虑到交互的可扩展性，我们设计的交互至少要满足未来半年到一年的产品应用。因此作为使用频率很高的弹窗，我们在设计时尤其需要考虑全面，不只为了满足当前的场景，也要考虑未来可能应用的场景。
作者：time不休
链接：https://www.zcool.com.cn/article/ZMTE3NjYyMA==.html
来源：站酷
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
蓝蓝设计的小编 http://www.lanlanwork.com