原文地址：修先森撩设计（公众号）
作者：修先森
转载请注明：学UI网》2022老虎海报大赏！！！
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
1. 短视频背景
随着短视频平台整体视频消费量上升（抖音家居建材企业号数量增长2.42倍，投稿总数增长3倍），消费者对家居视频兴趣度也越来越高（播放量增长115%，点赞增长80%，评论增长142%，分享增长168%）(数据来源: 抖音企业号家居建材行业白皮书)。
对于家居市场消费者来说，他们的痛点是：缺乏对尺寸和搭配的感知，3D视频内容可以帮助消费者线上完成对产品材料/整体设计的初步感知，进行初步筛选。对于酷家乐客户，市场开源和回头客都需要“新内容”、“新渠道”来刺激，而视频内容是重要的切入点。
2. 视频内容特性
3. 本业务线的产品目标
业务团队在初期是先孵化过一款3D视频制作工具，但在运营和推广的过程中我们发现产品的接受度远不如预期。最大的分歧在于客户虽然认可视频的价值、对视频工具抱有期待，但结果却相反——他们使用视频工具的意愿极低。
我们通过实地走访调研数10家客户后，结合JCD思维，进一步完善了做视频、使用视频的3种角色画像：设计师、市场部、企业管理层；并从影响用户决策的4种主要要素——工作内容、协作模式、相关目标、痛点中找寻我们的发力点。
1）企业管理层（客户）
企业管理层希望提升公司的营销获客能力，但不愿意投入过多的人力成本。
2）市场部（用户）
市场部门的主要工作是打通公司本身或公司产品的的推广渠道、制作投放推广物料。他们希望利用短视频破局营销，但却面临以下痛点：
3）门店设计师/总部设计师（用户）
以室内设计师为例，他们的主要工作有两种，其一是接单设计并与业主持续沟通改进方案，其二是积累设计作品并进行营销获客。在具有一定规模的装修公司中，设计师还会为市场部提供或者从0搭建公司级别的营销材料（即做出高质量的、符合营销要求的室内设计方案并渲染出图）。从设计师视角来看，由于“图片”作为个人营销媒介已经基本够用（仅有少量高水平设计师会用在短视频平台营销自己），所以“做视频”大部分情况下是在为公司做嫁衣，对自身的利益刺激较弱；其次，设计师能力有别，其中大部分人不会用视频语言讲故事，面临创作困难的问题。
综上得出，在短视频营销、短视频带货大行其道的今天，装修建材企业期望在短视频领域破局营销、分一杯羹，但尚未有高效率、低成本、质量可控的视频设计服务供企业选择，“没有故事、没有内容”便是在视频工具推广上的最大痛点。
从福格行为模型来看，“从0到1做视频”在用户（即设计师、市场部）角度来看是一种中等动机但非常难做的行为，因此“做视频”很容易就落在行动线下方，即用户会放弃去做这件事。
基于酷家乐的3D云设计能力，我们的3D视频模板化策略正立足于此，以弥补客户在需求与痛点之间的gap：希望用更简单的方式做出效果更好的视频，以帮助客户在短视频领域提升营销转化。
3D视频模板是什么？模板是将一个事物的结构规律予以固定化、标准化的成果，它体现的是结构形式的标准化。3D视频模板则是指：将3D相机按既定规则自动运镜渲染，将视频素材按既定序列自动剪辑排列，以固定形式生成视频所有内容的模板。
3D视频模板化对于用户的主要意义在于：
在产品概念成立之初，我们就明确了产品设计需要满足以下三点：
对于UX来说，模板产品的设计策略主要是围绕“易用”展开的。如果想让交互界面的呈现更简单易用，那隐藏在幕后的复杂性就会增加。因为系统复杂性的总量是一个衡量。
模板设计的复杂性主要体现在模板类型多样，从而导致
经过多次集体讨论与思考，我们最终围绕”降低用户创作门槛“、”降低用户学习成本“、”更快获取设计成果“三个方面产出了系统化的产品设计策略。
在设计视频模板前，我们的首要任务就是拆解出3D短视频的所有基本要素（模板的设计变量），并明确用户对模板的控制关系，找到最简化的交互点。
“短视频”作为一个上层对象，由“形式（视频所表达的故事）”和“材料（用于表达故事的内容）”两个基本要素构成。构成“形式”和“材料”的更小分子会在下一节做具体阐述。
用户在利用模板生成视频的过程中承担了“指挥官”的角色，仅需录入必要的、对“内容”产生关键影响的参数。
1.1 故事模板化 · 内容模板化
视频故事模板化即视频类型、脚本、分镜结构模板化。
推导我们需要做什么故事模板时，应当站在客户角度思考：企业投放视频时，其目标用户是谁（给谁看）？→ 为什么要看？→ 需要看什么？从而得出可复用故事脚本的构建方向。
视频内容模板化，即从技术层面拆解视频内容的维度，给每个维度制定适配规则，使视频可以自动生成。用户即使在不做调整的情况下，也能收获一份效果不错的视频原材料。
1.2 用户操作最简化
在故事和内容已模板化的基础上，我们只将最重要的参数暴露给用户去调整，降低用户的操作门槛。
减少参数暴露的额外优势则是，通过既定规则产出的视频内容（运镜、动效、后期），质量下限得以把控。
产品使用举例：使用视频模板时，用户先看模板的演示视频，再确认少量参数，即可用当前设计方案生成同款视频。
通过”一键生成”得到视频质量在60-80分之间，为了将60分的视频优化至能用，将80分的视频提高到更好，提供用户手动编辑的能力是很有必要的。除此之外，对于半自动模板，用户也无法避免编辑环节。
然而不同类型的视频差异较大，可编辑的要素并不统一，和纯粹的后期剪辑类视频模板大相径庭（剪辑类视频的编辑要素是统一的）。为了让复杂的编辑功能更易学，提升用户的编辑完成漏斗就成了关键的设计要点。
我们通过遍历所有模板的编辑能力，以酷家乐的工具设计原则作为依据，推导并建立了一种统一的、聚焦的线性编辑流程
2.1.将复杂的视频编辑能力拆解为多个独立任务，降低用户理解费力度，实现能力配置化
2.2.建立视频模板统一的线性编辑流程
即通过使用任务进度条明确告知用户当前所处的任务与还需要执行的任务，同一任务应使用一致的文案。
不同类型模板的任务和流程如下图所示。
渲染图片是相当消耗GPU的，更别说渲每秒24帧的视频了，即使使用酷家乐云端渲染一段720P视频（通常约15秒，每秒24帧）也需要等到第二天才能拿到，在这之前用户是拿不到任何可预览、传播的视频成品的。从客诉中也发现用户曾多次诟病“隔夜取视频”的缺陷。
而视频模板想要传达给用户的概念就是 简单、快速、质量高，怎么能被“出图”这个环节卡脖子呢？因此产品策略上，我们默认采用了录屏即出预览视频的方案，让用户能在数分钟内拿到结果。对于比较满意的预览视频则可选择阶梯渲染档位进行渲染，从而避免了隔天拿到高清视频却发现效果不如人意还需再花几天调试效果的尴尬局面。
视频产品的搭建并不是一蹴而就的，前期我们过于重视生产视频的“工具”（基于我们本身就以做工具为本）而忽略了更重要的视频“内容池”，从而在业务初期并没有太多进展。后来在一次又一次的客户沟通中，我们才得以明确他们最本质的需求是“内容”，也才诞生了视频模板这样的idea，并取得了初步成功。除了在本质需求挖掘上的经验收获以外，这个项目给UX带来的另一大挑战和收获便是对复杂工具制定智能化、简单化、可复用的设计策略了，它甚至没有可以直接对标的行业竞品或解决方案，基本要靠自己所掌握的用户画像与设计原则来设计，过程中也需要多次与行业专家进行沟通交流。
目前的模板视频平台对我们来说只是开始，整个产品需要深化、改善的地方还有很多，我们接下来也会不断去跟踪、打磨，达成我们的愿景。
参考
2. 福格行为模型
3. NNG – Stop Counting Clicks: The 3 Click Rule is Nonsense
原文链接：酷家乐用户体验设计（公众号）
作者：西橙、月熙
转载请注明：学UI网》3D视频模板化的设计思路
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
设计师日常拿到的图片形式就是矩形图，矩形裁切也是最基础的裁图技巧，接下来通过三个案例进行讲解：
1. 简化（裁剪多余内容）
通常情况下画面都需要有着明确的主体，这样才能够有效的吸引受众的视线，将画面所要传达的信息清楚地呈现出来。
通过对图形的裁切，简化可能抢走主体视觉的多余元素，保证图片的简洁度，以达到主体更加突出的效果，提升信息传递的效率。
对原图进行适当的裁切，减少多余元素对主体的干扰，能更突出设计主题，但在裁切时，需要注意主体元素的完整性。
留出右边空间进行文字排版：
2. 放大（突出主体）
通过图片裁切，放大主体，让主体更突出，强调细节和情感，增加视觉冲击力。
如左图是一张视觉效果质量不错的拳击手图片，但缺少视觉冲击力，通过裁切让主体更突出，满版占据画面，更具气势。
把照片调整为黑白，并加强对比度，质感也更好。留出右边空间，根据图片的外轮廓进行文字的编排。
3. 局部特写（特殊视觉体验）
同样的主体，经过裁切，让画面集中于整体目标的一部分，可以看到不一样的细节，呈现出特殊的视觉体验。
如下图，选取篮球局部特写，看似取景小了，但是会扩展观看者的联想空间。更戏剧性的表达设计主题，更加浓郁的营造氛围，这样的处理手法让版面显得简洁而高级。
虽然使用矩形图片进行设计也可以获得不错的视觉效果，但看多了会让人感到乏味，将图片裁切为其它图形会让整个设计显得更加新颖。
所谓的异形裁切就是使用除了矩形以外的其它形状对图片进行裁切，需要注意的是裁切图形后不能影响到观众的理解。
1. 几何形状
使用规则的几何形态，如三角形、圆形、多边形等，对图片的外轮廓进行裁切，得到新颖的几何形状图形。
2. 不规则形状
不规则形状形式多种多样，运用在版式设计中很考验设计师想象力。优点是可自由发挥设计的空间很大，缺点是操作难度高，排版难以把控。
此案例根据建筑的流线型造型，按照建筑的外形进行裁切处理，使版面具有更强的形式感，视觉效果更加灵动美观。
还有另一种不规则的形状是无规律、复杂多变、偶然产生形状，视觉感受自然、生动、有灵性。如笔触、墨点之类的偶然形态等。
裁切后得到的不规则图形，能够打破页面的单调乏味，让画面更具设计感。
3. 特定形状
将图形按照特定意义的形状（如数字、logo、人物等）来限定，使用剪贴蒙版来将图片约束在特定的图形的轮廓当中，使版面尝试新颖、独特的视角，更有趣的传递信息。
本期讲解了图形裁切常用的方法，当图形处理好以后，我们会根据图形的位置、轮廓等因素进行文字的编排，那么如何在设计中做到图文互动，我们将在下期进行讲解，下期见！
原文地址：艺海拾贝Design（公众号）
作者：邓海贝
转载请注明：学UI网》神奇的图形裁切术技巧！你值得拥有！
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
「基础组件」和「高级组件」并不存在严格的界限区别，以至于很多设计师对二者没有做过多的区分，但两者各自有明显的特点。
1 . 基础组件
「基础组件」也可以被叫做「原子组件」或「通用组件」，是一种底层组件，其特点如下：
一部分基础组件的示例
最为大家熟知的、典型的基础组件库就是 Ant Design，通用、开源、包容是其主要特点。迄今为止，Ant Design 已拥有超过 1k+ 的设计和开发贡献者，被应用于 2w+ 的企业各类业务场景中。
2 . 高级组件
「高级组件」也可以被叫做「区块组件」或「业务组件」，是一种相对来说更具备业务属性的组件，其特点如下：
复合表单组件，提炼于政务类业务场景
指标+统计数值的复合组件，来源于数据统计类业务场景
业务组件来源于业务，是设计师对有业务特色的、出现频次高的组件进行的整理和沉淀。Ant Design Pro（TechUI）就是 AntD 团队根据业务中的实际应用场景和需求，总结出的更适合蚂蚁集团业务场景的高级组件库。
「基础组件」和「高级组件」在搭建和设计的过程中要注意哪些内容？什么样的内容可以被做成基础组件？什么样的内容和组件又可以/应该被封装成业务组件？
1 . 基础组件设计依据
基础组件可以直接借鉴已有的、成熟的开源组件设计体系，减少重复劳作。如果自己的团队也想做，判断依据通常包括：
2 . 高级组件设计依据
相比于基础组件，高级组件因其独特的业务属性，以及与产品的强绑定关系，很难找到已有的组件库进行借鉴和应用。判断内容是否应该被沉淀的依据通常包括：
需要注意的是，业务组件库中的组件数量不是越多越好。“专而精” 有时会更高效。毕竟设计系统的根本目的是降本提效，而非设计师炫耀设计价值的工具。
另外，“专而精” 也是另一个维度的 “全”。当我们通过对业务需求和属性的深入研究，将业务组件做的足够专业，也会从另一个维度对业务进行补充和赋能，从设计侧推动业务进行体验优化，促进产品质量的提升。
业务组件的搭建标准和规则，更多由业务设计师来决定，也是所有 B 端设计师应该精进的能力。
3 . 完整概念列表
所以回到我们开篇遇到的问题：
“为什么对于弹窗的尺寸、抽屉的宽度、输入框的长度、表格每一栏的宽度等等组件的细节尺寸，为什么 Ant Design 几乎没有给出明确的数值定义？”
因为每个产品各具特色，对于这种与业务强相关的组件尺寸，在通用的、开源的基础组件库中，不太好给出一刀切的定义。但在我们日常面对业务需求所用的高级业务组件库中，则需要有明确的规范。
那么到底哪些数据需要被规范？应该如何编写规范？「基础组件」和「高级组件」在设计中还要注意到哪些细节？为了帮助大家更清晰地区分概念，关于「基础组件」和「高级组件」我总结出了一个完整的清单列表：
原文链接：长弓小子（公众号）
作者：元尧
转载请注明：学UI网 »详解｜ 一文带你了解「基础组件」和「高级组件」
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
徽标组件有纯圆点、数值、文字、图标4种常见的类型：
纯圆点
纯圆点徽标是最常用的类型，作为一个轻量级的提醒，引导用户点击某些特定的功能。
纯圆点徽标还可以用来区分用户的状态，显示用户是否在线。
数值
带有数值的徽标用来表示具体的数量，主要用在消息通知、添加购物车、外卖点餐等场景。例如在消息通知的场景中，消息icon上显示的数值可以用来告诉用户有几条未读的新消息。
又或者在网购或点餐等场景中，通过购物车的数值徽标的变化，就能知道已经选择了多少商品或食物。
文字
文字主要有两种使用类型，一种是单独的文字徽标，多用在电商运营等活动场景中，通过显示优惠促销来吸引用户。例如在某多多首页的功能图标区域，通过加入不同的文字徽标，能够告诉用户有新的“限时秒杀”活动和“立减2元”的充值优惠，鼓励用户采取行动。
另一种是作为文字标签，放在UI卡片的任意一角，用来展示某个热门的话题或者显示浏览量等。
或者放在内容中，用来突出重要的活动。关于标签组件，还有很有需要注意的设计点，后期设计夹会单独出一篇文章展开讲讲标签设计。
图标
在元素基础上叠加一个图标来显示当前的状态，或者对用户的反馈做出响应，常用的图标状态包括成功、失败、警告。
在一些交友类产品中，可以用图标徽标表示哪些用户已经过实名认证。
Tips：根据使用场景的需要，一个UI页面中可以包含多种徽标类型。在收件箱中，使用右上角的数值徽标展示新收到的邮件数量，下方纯圆点提示可以明确区分出新邮件和已读邮件。
虽然徽标看起来很简单，但想要得到一个独特的徽标，仍然需要考虑颜色、圆角、描边、阴影、位置等设计要素。
颜色填充
利用徽标颜色来调整内容优先级。背景色100%的徽标比半透明(不透明度为15–20%)的徽标视觉效果更明显，那么重要的内容优先使用100%的颜色填充，相对次要的内容则使用半透明度的徽标。
徽标的颜色并不局限于某一种，更重要的是要灵活使用，做到在每个页面中都能有效吸引用户视线并且易于识别。
圆角半径
调整徽标的圆角半径来改变容器的外形。除了基础的圆形、方形，也可以考虑使用长条状矩形、气泡形、不规则形状等外形样式。
轮廓描边
仔细观察就会发现，大多数徽标并没有和原有元素贴在一起，而是相切一定距离的宽度。
通过给徽标加入与背景色相同的描边，既能将徽标单独展示出来，还能保证徽标在任何背景颜色上都能够被看到。
添加阴影
通过给徽标设置一个平滑的阴影(使用相同的颜色)，能够得到一个微妙而优雅的悬停效果。
位置关系
徽标容器的长度根据根据内容量的多少而定，容器长度可以向左、向右或从中心扩展。当徽标向右延伸时，需要注意徽标距离右侧相邻的图标之间的距离，避免徽标太长影响相邻图标的显示。
灵活运用特定的文字缩写可以有效减少内容量并节省空间，例如使用“99+”来表示超过100条的消息，用“4.8k”表示4800位关注者。
以上就是徽标(Badge)设计容易忽略的设计点，希望通过这些细节能帮助你打磨和改善产品的体验。
「组件系列」的其他文章，近期也会不断更新，欢迎大家关注~
最后为大家分享一套微信 WeUI 官方组件库，包括深浅两个版本和详细的设计规范，数据图表源文件, 文件已打包好, 大家后台回复关键词即可领取。
慢慢来比较快，希望对你有帮助！
资料参考: How to design Badges
原文地址：Clip设计夹（公众号）
作者：Clippp
转载请注明：学UI网》APP上的“小红点”设计，居然有这么多你不知道的设计细节
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
我们在听知识点的时候，看别人咔咔几下就把效果做出来了，听着也很简单，感觉很容易嘛。
我们很有可能就陷在这个错误的思维里，知识点听着很容易理解，是因为别人拆解的很透彻，看别人做效果做的很轻松，是因为别人已经私下做了不下于5遍的练习，以上这些和我们是没有任何关系的，真正能和自己产生关系的，只有听了知识点后去上手操作，我们才会发现，原来真的没有那么简单。
所以才会有以下这么多的版本：
所以，做起来的时候发现，挺不容易的。
在做大氛围的时候，背景和元素很重要，需要有一定的空间感，除此之外，其实主体素材也很关键，我们一定要选择一些底子比较好的素材，比如素材本身最好带有一定的明暗关系、暗部最好能看到一些细节，不然全都是死黑死黑的，那就不好了。
所以我们可以看一下，我最开始找的素材和最后的素材：
很明显，后者会更加立体饱满，调整起来会相对容易一些。
最开始我找的这张素材，其实光源是在左前方，但是我的背景光源是在后侧偏上的位置，结果就导致画面看起来不是很和谐：
左侧光很大，上面的光也很大，我们虽然可以把两个光源都留下来，但是一定要统一好，分清主次和强弱，比如我定的顶光是主光源，左测是试辅光源，在后面的调整之后：
就可以很明显的分清楚光源主次了，素材光源和背景就很好的统一了。
画面很怕曝光，一旦曝光，就会有很多纯白色，纯白色一多，就看不到细节，细节一旦缺失，画面就不高级了。
我们看前面的版本，很多地方都曝光了：
这也是因为素材的限制，因为对比如果调整的太过，原版素材高亮的地方就会曝光过度。
但我们也有办法弥补，其实很多太白的地方，我们完全可以去填充一些内容，比如我们下面这张图，地方2本来是曝光过度的，后来我用仿制图章工具，把地方1的内容给复制过来了：
这样就好了很多。
切记，画面别曝光过度哦！
我们不可能所有的画面都去修字体，但即使选择默认字体，也一定要选择符合画面气质的，这个是必须的。
比如我这个画面是相对比较男性的、战斗热血的，所以我们选字体尽量要方正机械一点，千万不能随便整上去一个，比如最开始我选的是这个字体：
最开始没太注意，后来发现还是很违和的，因为这个字体有很多曲线，配合起来有点难受，所以最后我才选了这个字体：
要比那个和谐很多。
这个英文字体叫：Zilap Orion Personal Use Futuristic，文末有获取方式。
好了，以上就是今天分享的内容啦，最后说下，为什么我一个UI设计师，要去练视觉项的东西，其实所有和美术、视觉相关的东西，基础都是一样的，我们很多ui设计师，都很缺少对于视觉基础的理解，透视、空间、配色、构成等等，我只是在不断练习基础，毕竟我的基础太过薄弱了。
不足之处还有很多，继续加油。
转载请注明：学UI网》第一次做这种氛围海报，挺难的！
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
目前为止，我发现大部分市面上的文章都在告诉大家，竞品分析怎么做、场景分析怎么做、体验地图怎么做、访谈怎么做、度量模型怎么做，但唯独少了最后落地方案怎么做。
我曾经试着利用迪士尼和环球影城的两个案例来优化他们的产品，但是很多人开始无脑喷，因为没有业务做背景，别人想怎么说怎么说，都是“我觉得”。正因为这样，市面上你几乎看不到有什么文章教大家实际的交互解决方案，因为怕被喷子喷，反正没有业务背景你也无法论证自己方案的合理性，靠经验？别人不认同，你也没有数据来说服别人，所以这事大家都不敢去做。
但是没有业务背景的交互方案就不能做了吗？当然不是，有了业务背景你可以更针对性的选择你自己知识库里的方案和页面结构来解决业务和用户的问题，那么前提是你的知识库里有那么多案例才行，否则有再多再清晰的业务背景，你掏不出来，没有用。
所以从今天开始，我会陆续提供一些咱们小伙伴在做练习时候遇到的一些交互问题，大家一起来探讨一下。业务背景会适当的提到，但是还是以交互方案的多样性为主去讨论，再强调一遍，不要揪着业务去框住自己的思维。
学习交互也好，学习UI也罢，如果你完全不懂理论是行不通的，所以很多刚入行的小伙伴基础不够扎实，觉得理论没用，这是不对的，理论有用但是也配合实践，利用更多的实际案例去加深理论的印象，做到举一反三，这样的效果比较好。所以在做案例之前大家务必也要多去了解一下交互的设计理论和基础指南。
其实以前有文章聊到过，但是大家都有不同的声音，那么我们就继续来探讨一下有哪些不同的方案。既然业务背景不确定，那么我们的交互方案就不存在最优解。
下文描述以图片顺序做记号，例如第一张界面即为p1。
产品功能为什么这么布局、为什么用这个控件、为什么用这个交互形式，取决于业务目标和设计目标，还有用户的心智模型，以及该单元本身的属性。那么首先来看案例1-p1，该练习的背景没有描述业务特征，所以这个布局说明，该产品是一个平台型的产品，有各种球馆的列表，除了细节不完整以外没啥大的问题。
再看p2和p3这两个页面是这个练习的核心页面，我们总说产品形态取决于产品本身的定位，平台型产品的球馆详情大致是可以这样的，如果产品是自我品牌的产品，那么形态就会发生很大的变化。例如你可以在美团上点星巴克，你也可以在星巴克小程序上下单，但是这两个应用中的星巴克，是不一样的内容呈现。
我们从p2依次往下看，从业务和用户两个角度来看这个方案，首先从业务的角度看，有问题的点在于场地说明，平台型的产品一般都会给商家做管理后台和营销工具，但是场地说明这个板块就有点鸡肋了，
原因1: 大部分球馆的标准都是统一的，不可能一块木地板一块pvc这样错开，很难看，也不可能。如果有区别那么只有尺寸规格的区别。
原因2：场地类型展示并不是核心用户需求，只是一种辅助决策，并且是“一次性”决策，该流程的核心任务还是要让用户可以去预定场地，但是目前整个页面只有底部一个预定的按钮（等会说这个按钮）
原因3: 页面顶部有场馆的图片及环境介绍了，所以场地图片展示可以集中在顶部的图片区域展示，例如大众点评，点开后会有更多分类的图片和视频标签。
所以中间这块区域可以展示快捷预定的入口，比单纯展示场地类型性价比高的多。
那么底部是否需要有一个立即预定的按钮呢？如果这个产品是一个专门用来给篮球馆做推广的平台，我觉得可以放。但如果是类似大众点评这样的平台的话，就要继续思考了。
而我们看到大众点评为什么底部不做成一个大按钮的形式，岂不是会更加强化这个任务的核心目标吗？平台类型的产品对接商家的种类非常多，同时类似这样的平台产品核心的产品定位是给帮助用户去找到好吃、好玩、好看的地方，侧重的是真实用户反馈，所以说到真实用户反馈这里再举个小例子，大众点评在评价的时候当点击第五颗星的时候是显示4.5星，而不会直接显示5星，要再次点击后才会变成5星。
产品认为为了快速点击5星好评的行为并不是真实反馈，当真实想要给5星的时候才会再操作一步（题外话）。
回正题，平台型的产品定位是为了把所有商家和用户进行高效的匹配（花钱匹配度、曝光更高），而不是为某一个商家去做转化。并且使用该产品的用户场景和需求比较丰富，大部分用户都只是来看看这些场所的评分、口碑和详情。
所以底部就不会只放一个预定/买单的大按钮，而改成了用户反馈的相关功能。为了帮助商家做销售，营销管理工具做的还是很成熟的，什么拼团啦、套餐啦、代金券的工具啦等等。
有同学会问，那不就是大众点评嘛，有什么区别。首先不要为了不同而不同，为了创新而创新，如果有更优秀的解决方案当然是最好了，但在当下的环境中，没有什么必要。如果一定要做差异化，一定是业务诉求出现了。比如这个产品变成了自有品牌做的一个app/小程序，而不再是靠平台帮我去宣传篮球场地，那么会变成什么样呢？
那我们可以想到的时候在预约入口的地方就会发生了变化（同星巴克），平台通过列表进入，而自有产品则是在产品首页中放一个入口，形态也完全改变，首页不仅仅有场地预定，还会有私教培训、课程套餐、活动组织等等，围绕着这个场地衍生出很多的业务。并且像用户评价这个东西，在自有产品中也变得不那么透明，表现形式肯定也会更加弱化。
所以在本身是平台的属性下，这个页面正常就是这样，p2缺少了用户侧的一些支线场景和功能的补充，例如咨询入口、举报入口等支线的功能。
再看p3，点击预约入口后开始进行选择场地的交互，选择场地需要几个关键要素：1.日期 2.时间 3.场地号 4.场地规格 5.价格，那么这里又涉及到业务背景了，场地号是什么？场地规格又是什么？商家如果要让别人预定场地，是按照全场预定还是可以半场预定，场地的类型是否有多样，都会影响到我们这整个预约的交互流程。
p3的这个方案的问题在于：
1.信息关联度没做好，这里的日期和时间要更紧密，和买电影票不一样。
2.时间的交互效率低，并且没有展示全，可扩展性不好，如果场馆早上8点开门怎么办？商家要求最低2小时起订或者1小时起订怎么办？
3.半场和全场的选择不够简单，全场其实等于两个半场，而现在的展示形式变成了一个切换按钮，虽然加了一个箭头，但是这样的交互形式和控件的用法是不符合常规的，并且指向性很差，当切换到3/4号场地的时候箭头就指向了半场，这样就会产生歧义，所以是不可行的。
所以我们这里就会发现这些信息是需要联动的，联动表单最常见的就是横纵联合。一般最初级的做法就是一个行为管一个信息，就比如这样：把选项放入picker中
这种交互方式一般不单独用，因为其实算是一种树状结构，这种结构一般运用在添加收货地址等完全独立的信息填写或者一些多行表单中。
而这里的选择日期、时间、类型、编号并不完全独立，而且需要实时查看。
所以这样也不够直观，picker挡住了价格，无法实时查看。更何况在这个页面中所有内容都收起来版面利用率大幅下降，交互层级更深了。
再看一些其他的方案，难道就一定要选场地吗？我只需要时间、日期行不行。不行，为什么？
那我们再来看下面这个方案：
这个方案中，同学把图片加入进来，希望帮助用户去辅助决策，其实没必要，之前也说过，图片属于认知信息的一部分，在外面认知完了解过就可以了，里面就不需要再展示一遍了，可能也是为了不让页面这么空，因为底部用了一个卡片的块选择日期时间。但是少了场地类型的选择（半/全）长，为什么说半全场和场地号一定要选呢？因为有很多场景缺失了，比如你要帮朋友订另一个场地怎么办？我要订两个半场打全场怎么办？每次预定只定了时间，老板还要手动标记哪些场地在哪些时间没有预定，非常的麻烦。所以不选择场地是不行的。
再来看一个方案：
这个方案的选项和操作过于分散，而一般也不会将需要交互的选项放在左侧，有个原则就是内容在上/左，操作在下/右，虽然不能一概而论但大部分情况都要遵循。参考古腾堡图标原则，左侧的日期不经意看以为是一个标题。大部分第一次做交互原型的同学可能都会这样，一些按钮和控件的用法和该放、可以放的位置不太清楚，在做交互的时候还有一件事要清楚，就是谁控制谁，控制器怎么触发。
而这个方案和p3也是一样，触点顺序乱了：选择日期-选择场地类型-选择场地号-选择时间。因为预约场地的场景是，今天小王想约朋友去打球，他问了一下朋友哪天有空，朋友说下周六都可以，最好是下午，于是小王打开应用软件，选择了下周六的日期和下午的时间，看看还有哪些场地可以预约。
同样也是顺序乱了：场地编号-日期-时间。为什么顺序很重要，这就和我们买电影票的习惯一样，大部分情况是我们想要看某一本电影，然后再考虑自己的时间和去哪个电影院，有人说，我就不一样，我会先选择电影院，比如我逛街途中突然想看电影了，再看看电影院最近有什么电影。我只能说，满足大部分、大概率的用户需求和场景才是正事，产品是无法满足全部用户的。
抛开日期和时间的关联性，这个方案还有一个问题就是如果要预定多个场地就会比较复杂，例如只有1号场地和9号场地的某一个时间段可以预约，那么就需要用户在几个场地中展开收起进行操作，非常繁琐。
再来看一个案例
这位同学将步骤分为了先通过picker选择日期和时间，确定后再选择场地。这个流程问题就在于：
1.picker用的不对，picker虽然叫做选择器，但往往不会作为一个中间任务承载的模块去用，而是对于一个页面中需要选择一些选项的时候才会用到，选择完后依然停留在该页面。否则进入下一个页面后，再返回，就看不到picker了，还要再选择一次。
2.场地可能会出现被人预定的情况，所以当选择日期和时间后再选择场地，如果被预定了，那么用户就会比较抓狂。
所以在这个页面中我们会选择将其全部展开，怎么展开呢，有人觉的日期时间可以不动，把场地和类型展开。有人觉得全部展开才更直观，那我们来看这两个方案
如果日期和时间不展开，会有一个问题，那就是无法选择多个时间段的场地，只能选择某个时间段的多个场地，无法满足这部分用户需求，并且在信息展示上也会比较拥挤。那么我再看看全部展开，全部展开之后将时间和日期也做一个横纵形式，然后将半/全场和编号进行结合，默认选择一个块即为半场，但是在场地命名上还是需要做一个小心思，那就是如果有人要包全场，如果我们单纯给场地编号1、2、3、4….就会让用户不知道哪个半场和哪个半场是一体的，所以命名就可以改成1号场A、1号场B…...
当然如果不要编号问题也不大，主要是场地还有些特殊情况，比如不同场地的通风、灯光的区别，所以会有场地编号。
在之前的留言中，也有小伙伴会问，即便是自有产品，用户在选择场地的时候到底是否需要再看场地的图片，直接从入口进来不显示图片就让用户去定场地合理吗？这里主要就是分针对老用户还是新用户，只要去过一次的用户基本上也就不需要再看场地图片了，新用户的话就需要，他们还需要知道场馆的地址、联系方式等等，所以这些内容会聚合在选择场馆的上一步，也就是首页，具体首页可以怎么放这些内容留给大家思考。
我们讲到这里，还有一些抬杠冠军又要说了，一个页面这么多信息太复杂了，我选择第一个方案，多简单，就两个选项。如果我们知道复杂性守恒定律，那么不管怎么压缩信息复杂度是不变的，把那么多场地选择压缩在一个picker中会更加复杂和难操作。
其实当大家看到这些原型的时候，都明白问题出在哪里，真实情况是，如果让你们从0开始，一下子就懵逼了。比如预定篮球场地的这个流程，从无到有，如果让你自己来设计一遍，你可以完整的做下来吗？每一个细节是否到位。大家产生了一种幻觉，看懂了，等于自己会做。一定一定要脚踏实地去做一遍才知道自己哪里搞懂哪里没有搞懂。
分享此文一切功德，皆悉回向给文章原作者及众读者.
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
什么是设计？简而言之，就是用逻辑和美来解决人们的问题，满足他们的愿望。在本文中，我们将讨论美在用户体验设计中的作用：让我们看看它如何让用户和企业都感到高兴。
为什么美对设计很重要
网站或移动应用程序应该有效、轻松、直观地解决他们的问题。但是接下来会发生什么，当产品不再是唯一的，不再是独家的东西，自然竞争开始发挥作用时？人们开始看得更深，争取更多。他们将审美愉悦和情感吸引力添加到他们的愿望清单中。而在两款功能同样出色的产品之间，绝大多数情况下，用户会选择美观的一款。
基于需求层次，人们获得的越多，他们的选择就越复杂。教育和收入水平让他们思考超越功能：除此之外，用户追求和谐与美感。所以，美的作用越来越高。
以下是美在用户体验设计中以这种方式起作用的一系列原因：
1) 它使设计充满情感，也就是人性化
2) 它使数字事物与现实世界保持联系
3) 它支持可用性
4) 满足审美需求
5) 它将不同的事物与一种风格结合在一起
6) 它让产品在竞争中脱颖而出。
美与美学是连接设计的过去、现在和未来的坚实桥梁。今天，新的布局和图形基于数百年来收集的丰富的世界文化遗产。现代设计师和艺术家通过一些趋势和创新对其进行改造：建立一个新的文化历史圈，他们保留了历代最优秀艺术家的作品。这就是艺术和美学吸引力在设计中发挥作用的时候。我们不是在重新发明——我们是让它变得现代化，让它解决人们的问题。
审美-可用性效应
用户体验设计大师尼尔森诺曼集团将其描述为审美可用性效应现象。它指的是用户倾向于认为有吸引力的产品更有用。人们倾向于相信看起来更好的东西会更好地工作——即使它们实际上并没有更有效率。这种效果是为什么良好的用户体验不能只是功能性UI的一个重要原因——设计一个既有吸引力又实用的界面是值得付出努力的。
基于此，让我们考虑一下美感对UX 目标的影响。UX设计有 4 个基本方面，外观视觉和谐呈现出赋予所有要点的因素。
可用性意味着产品可以工作并且用户了解如何工作。
可访问性则允许界面适用于具有不同能力和跨各种设备的不同人。
实用性意味着它可以解决问题。
可取性意味着它是令人愉快的，并使用户感到高兴。
业务目标
但是，启动新产品或改进知名产品的公司也必须从另一个角度思考。它通过各种财务因素、转换、销售和所有其他业务来运作。
银幕上的美会影响他们的商业目标吗？确实会。色彩理论和心理学、屏幕上的和谐、可读的文本内容和有吸引力的图像不仅是让用户开心的关键。
用户体验美学元素
不同的元素可以让美融入用户界面并构建其美学，其中包括：
a) 排版
b) 布局
c) 照片
d) 插图
e) 3D图形
f) 动画片
g) 视频
h) 人物
所有这些元素构成了交互的美感，并直接影响积极的用户体验。
一致性
从美学可用性效应考虑的另一个核心点在于用户体验和业务的十字路口——一致性。正如雅各布尼尔森所说，“一致性是最强大的可用性原则之一：当事情总是表现相同时，用户不必担心会发生什么。”
事实上，它比交互更进一步。它还有助于建立强大的品牌。标志和品牌商品、网站、应用程序、电子邮件和社交网络——产品与其用户的每个接触点都应遵循一个总体理念和一组价值观，并以一致和完整的风格包装。
最后
在全球范围内，所有的设计解决方案都应该回答一个问题——Why？我们做出的所有决定都应该从“Why”开始，这将形成如何与用户交谈，无论沟通的来源是什么。无论与品牌的连接点是什么，您都应该确定与您交流的是什么。这会建立信任感并使品牌更强大，而这正是美有助于使用户体验更加稳固和有用的地方。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
轻量渐变
首先值得一说的是轻量渐变，轻量渐变属于弱渐变范畴，其特点为渐变色彩邻近，幅度轻柔，节奏缓慢，融合感和细腻感较强。
因为轻量渐变多会选择那些明度高、饱和度低的邻近色，所以能很好地表达出设计中的“呼吸感”。这种呼吸感和通透感给人的感觉非常清新，所以在2022年应该还会持续地流行下去。
高饱和度撞色
高饱和度色系的应用在2020年就已经成为了重要趋势之一，因为高饱和度的色彩更能吸引人的注意力，从而有效的吸引用户的视觉落点。
可尽管“吸睛”对品牌来说非常重要，但我们在使用时仍需克制，因为过高饱和度的搭配，往往会给页面的一体性造成一定程度上的背离，且非常容易带来视觉疲劳。
所以设计师在使用这类颜色时，也通常会对其饱和度和明度进行一定程度的降低，让颜色“丰盈却不拥挤”，从而保证我们视觉上的舒适性。
另外，从高饱和的UI案例中我们也能够看到，在搭配色彩时，选用大量的邻近色营造氛围，再用一两个对比色产生冲突，就会使得整个页面轻重相平衡，带来不错的视觉体验。
糖果色
糖果色以粉色、粉蓝色、粉绿色、粉黄色、明艳紫、柠檬黄、宝石蓝和芥末绿等甜蜜的女性色彩为主色调，它能带来一种纤细,柔软的感觉。所以哪怕一个画面中出现过多的色彩，也不会让人觉得很冲突和背离！
emoji表情
表情符号在现如今是一个超越文本并且能够得到广泛认知、跨越文化和多领域的一种视觉语言，在文字段落的末尾加上 Emoji 能够更好传达情绪，这使得表情符号不仅在网页、文本甚至在海报中作为主视觉，都能带来非常不错的氛围感。
在2021年，emoji不仅被广泛应用起来，还被广泛3D化。加上阴影效果的emoji，其情绪的传达也变得更加丰富。
2022，emoji的表达依旧会持续进行，只是其形式会更加丰富，例如这种“假3D”效果等
3D化
说到了emoji的3D表达，就不得不说2021最为流行的一个设计趋势，那就是大量的平面内容通过增加了阴影的效果而被立体的表达了出来。
像我们熟悉的苹果应用程序icon等，其设计细节都因此变得更加的丰富而有层次。
而2022，3D设计趋势也会通过不断的发展进一步明确了其自身的地位。它能够为设计师提供无限的可能性，为任何你能想象的东西提供更多可发挥的空间。
2022年我们也会看到更多关于2D和3D之间完美结合的设计，像下图的案例，手绘线条的手指和球体表情之间的互动，不仅让整个页面显得更加有趣生动，还能使2D3D这两种设计方式的优点都能得到更充分的展现。
玻璃拟态
同样，在2021年超级流行的毛玻璃效果，我们也会在2022年看见更加丰富的表达~
比如最近在dribble上很火的这组效果图，就是在平面的基础上，将毛玻璃的效果运用在3D的物体上，让整体的虚实感更加的生动，也会给设计增加一点与众不同的活力。
除此以外，我们还可以看到的，这一趋势已经明显转移到了玻璃和水晶质感上，而且以令人难以置信的用立体拟真度将图形设计提升到了一个全新的高度。所以，2022我们也将看到更多与全息和3D趋势相辅相成的透明质感和逼真的玻璃背景等元素的设计。
几何抽象
完全不同于写实的3D风格，2022年的设计风格可能也会开始往抽象发展。用几何图形来表达意象，用色彩传达情感。少了繁琐的装饰，用更简洁有力的方式去传达设计理念。
当分形形状与色彩完美结合时，就可以创建出极具吸引力的视觉效果。
的确，每年的设计趋势似乎总有相似的地方，2022年的设计风格也是在2021的基础上进行演变和发展的。所以更重要的是，我们要学会持续地积累这些设计素材，并不断地审视自己的设计作品，学会将他人的设计思路结合在自己的设计灵感上，才能成为一个一直拥有输出能力的设计师~
原文地址：CSDN
作者：摹客
转载请注明：学UI网》2022最新盘点，这些设计趋势今年会怎样？
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
色彩规范一般包含品牌色、辅助色和中性色，在B端产品中，颜色除了迎来传达品牌调性，更多的用来传达一些提示或警告，通过不同的颜色给予用户信息反馈，不同的状态运用不同的颜色展示，比如：
绿色通常代表成功、已发送、已签到等状态；
红色通常代表失败、未发布、未签到等状态。
另外，通过颜色可以对内容进行分层级展示，提高用户阅读信息的效率。
品牌主色
一套产品只有一个品牌主色，是界面中出现最多的颜色。在需要用色强调而且没有其他要求时，一般都会选择主色。
网络上很多人说B端产品大部分用蓝色或者偏冷色系作为主色，可以带给用户一种严肃冷静的感觉，但在工作日常中，很多企业会要求颜色必须是公司的品牌色。
例如当前任职的公司品牌色是饱和度较高的紫色，那么在定主色时，我们就不能跳脱这个色彩范围，在这样的情况下，我们可以考虑将品牌色饱和度降低或者用其他暗色系的颜色进行搭配，从而在观感上尽量显得不是那么刺眼，降低用户眼睛疲劳度。
辅助色
用于提示其他场景，比如：成功、失败、警告、无效等，辅助色主要是帮助用户高效获得信息。
中性色
常用于文本、背景、边框、分割线等。
在B端的设计上，文字的字体，字重，字号，行号、颜色用来区分界面信息的层级关系。
字体
中文字体一般用苹方体、思源黑体、微软雅黑，英文字体一般为Helvetica Neue、思源黑体、微软雅黑。
字号
系统中字体大小为：12px、14px、16px、18px、20px、24px、26px、28px、30px、36px…
在开发中，浏览器最小字体一般为12px，注意设计中不可以低于最小字体设计。
行高
行高上，可以采用行高=文字大小+8px，例如14px字体，则14px+8px=22px，则行高为22px。
字重
通常采用regular、medium、semibold三个字重。
颜色
目前最常用的字体颜色是#333333、#666666、#999999，区分标题、正文、辅助文字，具体可根据设计进行调节。
在B端设计中，图标要简洁易懂，用来帮助用户更快导航，提高用户使用产品的效率。
在绘制完图标后，可以存储成svg方式上传至Iconfont，这样方便和开发进行对接，也可以打造自己的图标库，在后续的项目中，方便直接运用或修改。
B端系统的主流分辨率主要为1920、1440和1366，个别系统存在1280的显示设备，通过适配布局来完成在不同分辨率下展示内容。
一般选用24栅格布局，不同栅格结构中栅格区域也会有所不同，固定区域会存在于响应式网格之外，不随着页面的变化而改变大小。
B端组件库的建立，常用的组件包括按钮组件、面包屑、导航菜单、分页、下拉控件、上下左右滑条、日期选择框、单选复选框、树形选择、标签页、输入框、表单、上传样式、气泡卡片、表格列表、警告提示、弹窗等。
按钮
按钮的五种样式：主按钮、默认按钮、虚线按钮、文本按钮、链接按钮。
按钮的四种状态：常规、悬停、选中、禁用。
面包屑
显示当前页面在系统层级结构中的位置，并能向上返回，用于系统拥有超过两层以上的层级结构，同时可以告诉用户当前页面在哪里，并提供导航功能。
导航菜单
导航菜单为页面和功能提供导航的菜单功能，用户依赖导航在各个页面中进行跳转。
分页
采用分页的形式分隔长列表数据，每次只加载一个页面。当加载/渲染所有数据将花费很多时间时可采用分页。
下拉菜单
当选项过多时，使用下拉菜单展示并选择内容。
时间日期选择器
用于选择或输入日期，分为固定时间点&范围、任意时间点&范围、选择日/月/年范围。
选择框
用于在一组备选项中进行选择，包括单选框和多选框。
标签页
通过切换不同的选项标签，查看不同的页面内容。
输入框
需要注意输入框在输入前、输入中、输入后三种不同的状态。
上传
通过点击或拖拽上传文件。
表格
用于展示多条结构类似数据，可对数据进行排序、筛选、对比或其他自定义操作。
警告提示
用于页面中展示重要的提示信息。警告提示一般分为四个状态：成功、信息注释、警告、错误(失败)。
弹窗
用于消息提示、成功提示、错误提示、询问信息、填写表单。
希望通过这套B端设计规范，能让你对B端系统有一个全面的了解。在之后的文章中，设计夹会持续分享这些设计规范的具体用法。
例如那么多的B端组件，实际上每个组件都值得单独用一篇文章来仔细研究如何使用。
如果你想学习更多关于「B端设计」的知识，记得及时关注文章推送哦~
最后设计夹分享一套简约风格样机模型供大伙包装作品时使用，这套样机包含手机端、Pad端、手表端、PC端等多种尺寸，有PSD、Al、XD三种格式，样机已打包好, 大家后台回复关键词即可领取。
领取方式：关注公众号，后台回复【样机】获取源文件
慢慢来比较快，希望对你有所帮助！
原文地址：Clip设计夹（公众号）
作者：Fix-
转载请注明：学UI网》从设计实战中，总结了这份B端产品设计规范
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com