很多时候既让初入B端行业的设计师感到一丝丝迷茫，因为不同的B端系统也就意味着，它的业务一定就会有所不同。比如CRM系统当中的客户生命周期管理，OA的办公自动化，特定的行业往往都会蕴含着不同的业务类型
而作为设计师，如果只了解设计模式、设计组件，不去分析设计最后的业务诉求，其实是没有任何意义。因此想要通过B端设计指南，和大家一起聊聊B端业务，以及背后所牵涉的具体逻辑。今天就简单聊聊最为常见的 审批
开始之前，还得再多说两句，因为一个系统当中，业务本身就不是独立存在的。因此在去讲述审批的过程，一定会涉及到 流程、权限、表单配置 等一些基础内容，建议可以先做初步了解，再结合文章进行阅读
虽然在说起源，其实我更想给大家讲清楚 审批在B端系统 当中的重要性
审批字面意思是审查并加以批示，通常指对 下级呈报上级的公文进行审查批示，报请上级审批
现如今，任何事情一定都会有分工协作，而使用审批的好处是可以
规范员工行为
提高企业运转效率
系统存档便于溯源
保护环境（毕竟减少了纸张浪费）
当然在不同的阶段的公司，对于审批的诉求是不太一样
小公司：因为审批的决策路径短、流程上都非常简单，但因此就会缺乏规范保障。比如在外出办公时，看似只需要与老板当面进行口头上的沟通即可，但是在外出出现意外时，由于缺乏外出办公的相关证据，员工的权益则很难得到保障
大公司：因为审批的决策路径长，流程上都极其复杂，因此会在多人协作下完成整个流程审批。比如想要申请购买办公用品时，会由 行政、Leader、财务 层层审批，从提交审批到最终落实可能需要十天半个月，但是这样的流程，能够确保企业在清查财务状况时，更加有理有据
审批的演变，就是从最开始的规章制度而来。比如在早期去政务机构办理各种业务时，会让你去填写各种纸质表单。在审核过程中，则需要有各个机关的盖章及批准，而这种形式正是政府对于普通市民的自上而下的管理方式
审批其实是整个B端系统的灵魂，因为在B端系统当中，企业想要使用系统的一大痛点便是 核心的管控
因此你会发现，只要一个独立的系统，一定会存在独立的审批模块。因为B端管理系统当中企业的最终目的，是管理手中的人，而审批便是最为常见的一种手段
审批在如今的B端系统当中，可以理解为它是一组消息，在这一组消息当中会有：“具体的文本、对应的附件、以及照片视频”这些内容都是辅佐 申请人 去讲诉你需要申请的内容
比如我们在申请病假时，往往需要出示 三甲医院所开设的证明，对于这个证明，如何在表单当中出现，你会发现最为常见的便是拍摄证明图片，然后上传到表单当中（这个与字段属性紧密相连，我就不做不过介绍）
审批的这组消息还会有些特殊，因为它非常重要，你可以理解为它是一则“加急消息”会提醒审批人快速的进行处理，同时会告知相关的参与人（处理人、抄送人）审批的进度、并且无论成功与否，都会在系统当中留下 足迹，因此它起到了 “追踪、通知、留存” 三个非常重要的作用，我们首先对于审批进行一个基础的拆解
如果把审批单独拿出来，你会发现审批会牵涉到 发起人、处理人、抄送人
审批的发起人，也是整个审批流程的归属人，他最关心整个审批进展
因为在发起人的角度，创建完审批事项后，可能还需要进入审批页面，完善 后续附加信息、及时了解审批状态、催促审批人的审核、处理驳回意见 等等，因此站在发起人的角度，审批需要尽可能详细的展示 当前审批的状态、完整的审批流程、驳回信息的快速操作、成功信息的必要通知
审批的处理人主要在审批过程做出决策，因此他更在乎的是审批申请内容的信息。比如 审批的信息内容、直接的审批操作、多条审批的管理
当然，在一些大型的集团企业当中，会将审批分为审批「直接处理人」与「间接处理人」（后文以 直处人、间处人 简称）
「直处人」作为审批的第一处理人，也就意味着他的意见至关重要，如果「直处人」通过过后，相对而言整条审批的通过几率会大大增加。通常「直处人」是作为申请人的直系领导居多，因此多数情况下可以理解为直属领导进行 “把关”
「间处人」作为审批的后续处理人，同样在流程当中也十分重要。但在有些情况下，比如一些偏平化管理的企业，「间处人」更多像是“权利”的象征，因为权利已经下放给「直处人」，而「间处人」起到知晓审批以及企业的规章制度要求
审批抄送人主要起到通知对应角色的作用，因为一条审批的出现，会造成诸多影响，假设今天你需要申请事假，如何通知同部门的其他成员呢？
发送即时消息，显得过于简单；每个打电话，又有些麻烦；发送企业邮件，又怕他们没有看到
这时候抄送人会显得尤为关键
通常抄送会有企业流程上管理员配置的固定抄送人，以及发起人选择的自行抄送人 两种类型
固定抄送人 角色通常与管理员配置整个流程有关，他是角色当中 管理员 所配置的重要通知人，比如今天你的请假信息，肯定会告知行政，像这类默认的通知流程，则可以将其设为固定抄送人
自行选择抄送人 则是提供给发起人自行选择，该条审批可能会影响到的相关人群。比如就是发送给同事，让他们知晓今天你不在岗位上，因此自行选择可以增加审批抄送的灵活性
这里肯定会有很多读者会问，我选择抄送人与我发消息给同事，有什么区别么？
看似完全相同，实则有明确的区分
通过消息，将审批内容传达，本质上是你自行将内容发送给对方，对方会对于你这个消息的真实性会产生疑问？你是否通知了
而选择抄送，更为权威，更能体现你这条消息的真实性，并且整个流程都已经由领导进行批准，因此不会存在太大问题
其实审批的本质就是一组消息，而这一组消息当中，申请人 通过 表单配置 去获取需要补充的消息内容，而流程会根据企业所配置的流程方式将这一组消息进行合并转发给对应人，而审批人则需要对这一组消息进行回复“通过、驳回” 来让整个流程继续延续
审批当中，最主要的便是流程。因为你可以通过查看流程图，去了解整个企业的组织架构、规章制度、员工管理方式
串行审批主要是指当一个审核节点通过后，才能进入下一个审核节点。如果节点驳回，则可以根据业务实际需要，配置驳回的返回路径，会有：拨回到发起人、驳回到上一个节点、或驳回之前任意一个节点 重新审批
并行审批是指一个审批节点存在多个角色同时审批，这里会存在两种情况
任何一个人审批通过，则可以进入下个节点，这也就是系统当中常说的 「或签」
所有审批人员通过，才能进入下个节点，这也是系统当中常说的 「会签」
条件审批就是将企业当中的规章制度映射到实际的项目当中，通常就是某个审批内容会根据 金额多少、实际数量 等 进而选择哪个角色进行审批
比如销售人员在申请一个合同审批时，会根据合同金额的不同，审批人也会有所差异
当金额小于8000时，合同直接由财务专员进行审批，进而让流程进行快速审批
当金额大于8000时，合同会由销售主管进行审批，让销售主管能够掌握企业的重要合同
通过发起人选定一个审批事项后，将自主选择后续的审批内容，进而实现审批的后续选择。这是一种较为灵活的审批流程，当企业尚未形成标准化流程时，自主的核心就是当发起人发起一个审批，提交时需要自行选择下一个环节的审批人。而下一个环节的审批人审批通过后，可以选择继续流转到再下一个人去审批，或者结束这个流程
审批的背后，它映射的其实是企业的一条条管理制度，而它的设计一定是要满足企业的实际需求。因为你负责的产品不是为某一家企业提供的服务（定制化产品），并且企业管理制度的变动其实是家常便饭，你需要去考虑一个通用的解决方案，这个解决方案拆解下来会分为三个内容，分别是：申请表单、流程配置、更多配置 进行讲解
审批表单是最为一个“简单”的用户可配置化表单，因为现如今大多数B端产品都是以 SaaS 作为基础（如果是定制化产品 它的审批内容、流程也不会是固定不变的）也就意味着审批表单需要为企业提供“DIY”的方式，通过表单提供不同的字段类型，去构建审批的实际要求
比如在一个选择请假时，年假、事假、病假、婚假 等的要求都会有所不同
如何知道他们的差别，其实可以根据《劳动法》的相关规定 以及 各个其实的实际公司制度，进行个性化的处理
在申请婚假时，需要上传你的结婚证，以证明其真实性；在病假时，需要有3甲医院的病情证明；在年假时，则需要有你的剩余年假天数。而这些特殊诉求，其实都需要在表单当中进行各种定制化表单
当然这只是极为常见的 请假 场景，而在实际业务当中的复杂场景（更多需要将 审批与其他系统关联）一个简单的表单是没有办法进行满足
这也是很多企业会发现，无论是飞书、钉钉、企业微信，都没有办法满足其实际流程需求。又没有办法改变自身流程，只能够自研、定制化 产品，这也是为什么即便各行各业都有了初具规模的 SaaS 产品，但是还是会有很多企业愿意自行研发软件
企业可以根据自身的系统流程，在流程配置当中去定制特定的流程。在这个页面的设计上，需要注意不同参与人的状态，以及复杂流程时如何才能够进行清晰的阅读，因此增加了 颜色区分（发起人、审批人、抄送人）+ 视图缩放 功能
颜色自然不必多说，整个系统需要统一，因此不能够只考虑在管理后台的颜色，是一定要在详情页当中也能过保证颜色的一致。这样才能够满足实际业务所需
视图缩放只是小小提一下，常见的视图缩放会放在左侧，至于为什么，自己稍稍揣摩揣摩
由于流程配置的属性页面会涉及很多表单的复杂逻辑，这个只能够留在我的 训练营的课程 当中进行拆解，这里就不过多赘述
更多配置项则是审批在实际情况下的特殊处理，比如：申请人修改审批的具体时间、能够将审批转发给其他人、出现多次相同的审批人是否去重 等等... 其实就是将审批的设计方案进行“赋能”，去满足更多企业在实际场景当中的需求，感兴趣的同学可以去 钉钉、飞书 了解详情
审批，核心还是提高企业运转效率，如果在审批之间，还需要不同角色私下反复沟通，本质上就失去了审批的意义。而审批本身，就是一个典型的B端产品 从场景到需求，进而研发功能，最后又回归场景，你设计的好与坏，落地到真实的场景当中，试试便知
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
用户体验（User Experience，简称UE/UX）这个词是在上世纪90年代中期，由用户体验设计师 唐纳德·诺曼（Donald Norman）所提出和推广。
定义：用户在使用产品过程中建立起来的一种纯主观感受。即用户在使用一个产品或系统之前、使用期间和使用之后的全部感受，包括情感、信仰、喜好、认知印象、生理和心理反应、行为和成就等各个方面。
可用性指的是产品对用户来说有效、易学、高效、好记、少错和令人满意的程度，即用户能否用产品完成他的任务，效率如何，主观感受怎样，实际上是从用户角度所看到的产品质量，是产品用户体验的核心，不好的可用性会导致用户放弃使用产品。
可用性由易学性、效率、可记忆性、容错性、满意度、实用性、个性化、可预测性组成。
指的是用户学习如何与产品进行交互，以实现目标所花费的时间和精力，即用户能否在初次使用产品时完成简单的任务或实现用户目标。
用户在使用产品一段时间后，能否在合理的时间完成想要达成的目标任务。这里以腾讯视频为例，用户能否快速的下载想要的东西，在同一系列中，可以快速下载更多的相关内容。
我们常说互联网是有记忆的，好的产品体验是帮助用户去记忆。用户在体验中，要对一些有意识、无意识的行为进行记忆是一个比较大的负担，如果在一些环节通过系统能帮用户记录，会降低用户的负担。比如在搜索、历史记录、浏览记录等。
用户在使用产品时，发生错误后，能否快速帮助用户识别和纠正错误，帮助用户从错误中恢复的能力。如常见的注册登录，当用户属于邮箱格式不对的时候，给出提示，并且告知错在哪里。如果提示语只是："请输入正确的邮箱" 用户可能会疑惑，错在哪里。
满意度指的是用户与设计互动产生的愉悦程度，可以是用户使用产品时流畅的交互和优秀的视觉设计，也可以是用户在产品中得到的满足感。比如sir语音交互，王者荣耀等级（满足感）
产品能否提供用户在完成任务时所需要用到的基本功能，例如P图类软件，用户需要对图片进行裁剪、添加滤镜、抠图、美颜、补妆、添加文字、去除水印、添加文字等操作。
在满足实用性的基础上 针对用户提供不同场景下的功能定制，如美图秀秀，在提供图片美化的同时，针对用户不同的使用场景还提供视频剪辑、视频美容等功能。
用户能够预测到下一步操作或者整个流程的交互，将会发生什么。举例淘宝的购买流程。点击购买按钮> 选择商品属性> 付款> 输入密码> 购买成功; 用户在点击购买按钮开始就能够预测到下一步或者整个流程的步骤会发生什么。
可见性是用户根据界面中可见元素确定产品可以做什么的设计原则。
物理功能可见性是基于对象的物理外观。在视觉上，这种类型的功能可见性使用户能够立即清楚地看到在设计界面中能干什么。例如当我们使用音乐类软件，最常使用的就是播放/暂停，上一曲/下一曲。我们就会寻找去这些图标。其次是分享、收藏、下载、评论等功能需要用到的功能展示在页面中，这就是功能可见性。
当信息或者列表过多时区分状态的展示，将重要的状态信息呈现在尽可能高的信息层级当中。如iOS信息和QQ邮箱中区分未读信息的微标。如果将这些徽标隐藏起来，会极大地破坏易用性，因为人们将不得不进入一个个邮件详情页当中进行确认，才能获取到原本由徽标提供的状态信息，这样的互动非常低效且乏味。
当用户在执行某项任务的时候应该清晰明了的告知用户目前在什么步骤，后面还有多少步骤，完整清晰的流程展示。如果将这些信息隐藏起来，用户会困惑当前进行到哪一步，接下来还有多少步骤。
强调需要明确的视觉线索向用户展示产品可以做什么。例如用户界面中的交互元素（如滚动条、命令按钮和图标等）的设计必须能够为用户提供足够清楚的建议，让用户可以清晰地辨别出这些元素所代表的意思是什么、它们的功能是什么，以及如何与它们进行交互行为（点击、长按、滑动 等）
给用户及时、恰当的反馈，是体验设计中非常重要的一项原则；对每个用户的操作都应该有恰当的系统反馈（包含视觉、听觉、触觉）。
明确告知用户当前操作发生了什么。如点击下载和下载过程给出相对应的反馈及进度条。
当用户产生某个动作时，给予相对应的连接反馈。如大概用户点击某个按钮时，按钮默认的外观与点击后的外观发生变化，结合现实世界的开关去思考（按下 开灯）动作与反馈是连接的，即时的。
希克定律，是1951年由威廉·埃德蒙·希克首先提出的，认为人们从数组中选择目标的时间取决于可用选项的数量。也就是当一个人所面临的选择越多，做出选择所花的时间就越多，当面临选择的数量增加，做出决定的时间也会跟着增加。
如京东筛选，在搜索结果页会将筛选条件收起，因为里面的筛选条件内容过多。用户会在当前页面选择的时间增加.将一些项目分组放入二级下单，并且做好归类，用户能够更迅速的作出决定。
费茨定律，是1954 年 由保罗.菲茨首次提出，在人机交互中指的是通过图形用户界面使用鼠标或其他类型的指针从一个起始位置移动到一个最终目的所需的时间。
T：代表完成移动所需的平均时间
A：代表光标开始/停止时间
B：代表光标移动速度
D：代表从起点到目标中心的距离
W：代表目标的尺寸
简单来说就是指：随着目标的距离增加，移动到目标的时间更长，并且随着目标的尺寸减小，选择目标的时间也会增加。
所以在界面设计当中会遵循越重要的功能，占据面基会越大。重要图标的点击热区也会增大。便于用户快速点击。
屏幕外边缘和四个角部比屏幕中的其他位置都更容易被定为和选中，所以我们在进行产品设计的过程中，会将常用/重要的操作放置在屏幕边缘处，便于用户操作。
神奇数字7±2法则是1956年由 乔治·米勒 所提出的，根据乔治·米勒的研究，人类短期的记忆一般一次只能记住5-9个。也就是为什么大多数APP底部导航为5个的原因。
由于人类的大脑处理信息的能力有限，大脑会将复杂信息划分成 块 和小的单元。如：京东和每日优鲜的分类处理。
人类短期的记忆一般一次只能记住5-9个，所以人们总是倾向于把一串数字拆分为多个较短的部分进行记忆。如银行卡号和手机号码等。
复杂守恒定律是1984年由 拉里·泰斯勒 所提出的，也称作泰斯勒定律。认为每一个产品设计的过程中，都有其固有的复杂性，存在着一个临界点，超过了这个点产品设计的过程就不能再简化了，你只能将固有的复杂性从一个地方转移到另外一个地方。
在产品设计中，会尽量的简化界面。当功能过多时进行一个整合的处理，跳转或者滑动操作。如查看更多或者常见的汉堡导航。
新乡重夫认为遗忘有两种：一种是疏漏，另一种是忘却。他建议采用一些措施来预防产品的缺陷。
防错原则认为大部分的意外都是由设计的疏忽，而不是人为操作疏忽。因此，在设计中要有必要的防错机制；比如常见的信息输入状态，未输入置灰不可点，输入变为可点击状态。
微信拍一拍：微信在出了拍一拍功能之后，很多时候点击头像的时候会不小心拍到别人，现在的拍一拍是可以撤销的，在客户端鼠标悬浮上就可以进行撤回，移动端长按出现撤回弹窗，两分钟内有效。
微信朋友圈动态：点击返回图标会出现的弹窗，避免误操作。利用防错原则，可以避免用户重新编辑。微信当中有很多友好的体验细节。可以多多去感受。
奥卡姆剃刀 定律 ：它是由14世纪英格兰的逻辑学家、圣方济各会修士奥卡姆的威廉 （William of Occam，约1285年至1349年）提出。 这个 原理 称为“如无必要，勿增实体 ”，即“ 简单有效原理 ”
不必要的元素会降低设计的效率，不管是实体、视觉或者认知上，多余的设计元素，有可能造成失败或者其它问题。这并不意味着不能提供给用户很多的信息，可以用「更多信息」来实现。如夸克浏览器，首页只放置重要功能 搜索 和几个整合内容的图标入口。
让用户通过较少的点击就能找到他们想要的东西或使用功能。如音乐类软件，在播放音乐之后进入其他的tab，在上面都会悬浮播放/暂停的区域。都能够随时操作。
就是产品的易用性，如果年纪大点的人，也能够轻松使用所设计的产品那么是成功的。如抖音沉浸式的体验，简单的滑动就能够观看想看的内容。目前抖音的用户老年人也逐渐包含在内，并且抖音会根据用户的停留时长等推送用户感兴趣的内容。
页面的使用率，当你想要在一屏新增很多内容时，页面的布局就会变得拥挤和区域变小，容易过于干扰用户做出选择，重要功能不够突出等。夸克浏览器首页强化了搜索功能 和几个整合内容的图标入口；uc浏览器首页内容过多，当用户想要使用搜索功能时很容易被其他内容干扰。
前面说到的希克定律说到，当选择的数量越多，用户做决定的时间就更长。做过多的决定也是一种压力，在展示内容的时候要努力减少用户的思维负担。如携程和马蜂窝金刚区的内容展示，马蜂窝根据产品属性放置了6个重要的功能入口，便于用户更快的去选择所想要的功能。
最后我们来探讨一下设计和艺术的区别是什么。我看到一句话觉得挺好的。设计和艺术的重要区别是：艺术抛出问题，而设计解决问题。
我们设想一个场景，当你在艺术展厅站在一副名画面前，你所思考的是什么？是惊叹画家的画技还是整个画面给你的感觉是一种故事，你会不会思考艺术家在作画时的心情，处境，为什么要这么去画？想表达怎么样的情感？
然后我们再设想一个场景，同样在艺术展厅，你身上带有手机和相机。你会选择用相机拍照还是用手机。答案是 相机 对吧？因为相机的拍照效果在任何环境下都会比手机好。这就是设计。是能够真真切切的解决用户问题的。能够去感知到的。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
一、马蜂窝 — 人性化设计识别文章地点
二、微博 — 社区游戏化设计提升互动率
三、QQ — 通过手势消除未读消息
四、最右 — 情感化设计保护用户隐私
五、抖音 — 深夜提醒贴心的功能
六、网易音乐 — 把分享游戏化
七、QQ音乐 — 歌词沉浸式体验
八、盯潮 — 趣味性banner轮播，增加用户点击
在马蜂窝任意文章中，如果出现地区则可以通过当前页面对地区进行提取
减少用户操作路径，降低产品使用成本
日常在各个平台浏览文章时大家都会遇到在文章内会出现一些如地名、人名、物品等相关名词，此时如果对名词感兴趣则需要切换场景去进行搜索，而马蜂窝在这方面深入洞察到用户痛点，基于旅游社交产品背景下在添加地点直达（包含多个地点）功能，解决了对景点感兴趣的用户使用体验。
根据马蜂窝这个人性化功能，是否可以在不同的产品内进行应用，如在一些游戏社区中所提到的虚拟装备、道具等物品添加弹窗简要说明，帮助新手玩家快速理解玩法、功用等
在微博动态详情中进行长按点赞触发动画
通过游戏化点赞玩法激励用户进行互动，提升互动率
打破传统点赞动画，微博设计动效采用大胆创新的全屏动画并搭配上散发的微表情，在长按与连点两种手势下动效规律不同，消除用户枯燥感，微博作为国内最大社交平台，页面展示上已经形成用户深刻认知，在不影响基本风格上进行彩蛋设计有效的提成用户互动率
在qq聊天页面中对底部消息气泡进行拖动，消除所有未读消息
提升用户操作效率和使用体验
qq作为社交工具，每位用户都会添加大量人、群以及关注各种推送，在这种场景下用户每条消息都去操作需要花费大量时间，QQ把传统的消息已读以一种简单的交互手势作为代替，相对全部已读在操作上更佳便捷
通过qq的这个交互细节，在其他产品场景中同样适用，如一些音乐、电台相关的产品在离开播放页面后播放状态会悬浮在页面之上，如果关闭的话则需要点击暂停或者进入详情后关闭，也可以考虑使用拖动手势进行关闭
在最右登录页面输入密码时ip形象会出现捂眼睛动作
强化用户隐私和心理信任感
日常在使用一些敏感性操作时我们都会注重隐私，如一些表单的填写、密码输入等相关操作，最右在登录页面使用到了ip形象的动作去向用户传递心理上的暗示，这种手法很好的把品牌曝光与体验相结合
长时间刷抖音时会系统会提示，在深夜使用时会支持设置提醒时间
防止用户疲劳使用产品，定时缓解注意力
在使用抖音时大家可能会经常深陷其中无法自拔，往往忽略了时间影响身体健康，提醒机制则在深夜不同时间段进行间接提示，虽然在用户体验中不提倡打扰用户，但在短视频这个场景下如果过渡沉浸便会造成反向影响
在网易音乐对某首音乐进行分享时可以对音乐进行个性化定制，对歌曲进行编辑添加文字、图片、语音等以视频方式呈现
把分享以一种偏游戏化的形式呈现，提升用户分享率
传统分享基本是直接让用户分享到第三方平台，而网易音乐这个设计把分享场景进行多元化处理，以定制音乐罐子为切入点，用户自由编辑个性化处理装进罐子进行分享，是一种视频剪辑融合音乐的一种新玩法，破圈传统枯燥的分享场景，提升用户分享率
在音乐歌词页面中可以支持设置歌词主题
新颖的呈现手段，强化用户沉浸式听歌
传统的音乐产品在详情页面展示了一屏歌曲歌词，面对大量的文字用户在寻找某段歌词时效率不是很高，对大量的字段也极为枯燥，而qq音乐使用了创新的展现形式，把手机主题概念融入歌词中达到新的视觉体验，根据不同的主题对应的动画也不同，大大的提高了用户的视听体验
在盯潮首页banner处对其进行拖动甩出
通过交互玩法提升用户对banner的点击
banner在页面通常点击率较低，用户会默认为广告，在盯潮内滑动banner时会发现banner可以进行拖动，并且松开时会自由掉多，把传统的banner切换做出了可玩性更高的效果，同时这个设计手段也能吸引用户注意力引导用户对banner进行点击
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
少即是多。极简主义的概念可以用这句足够极简的话进行总结。而且它不仅仅是一种设计理念，更是一种生活理念，甚至于是一种系统的思维方式，而不仅仅视作为一种「更干净」的视觉风格。
在设计当中，极简主义是呈现内容的诸多艺术概念之一，应用范畴非常广。极简主义是使用尽可能少的素材和色彩，以有限的形态和元素，来呈现信息。
在数字产品设计当中，极简主义，是一个相当考验技术的门类，如何从「简单」跨越门槛，走到到「极简」，其实并不容易。
今天的文章，是一篇「相对极简」的「极简主义设计指南」，掌控好下面的 5 大要素，应该就能够很好地拿捏这种风格。
每一个要素下面都有一些颇为具有代表性的设计范例，这些作品的参考价值还是蛮高的 ~
有没有听说过「白纸综合症」？当你在画画或者创作的时候，面对着空无一物的白纸，陷入焦虑的情绪的状态，就是「白纸综合症」。
这种状态广泛存在，这种病症很多人都有，尤其是设计师。而当你在设计风格简约的作品的时候，需要你学会拥抱白纸，面对留白，因为「留白」也是一种元素。
相反，在极简主义的设计当中，过多的视觉元素会让整个设计显得不堪重负，降低可用性和易读性。
留白的使用方法很多，但是最主要的方式，是让留白以外的元素，仅保留必须的部分，把留白视作为一个必须的模块，考虑如何保持可见的元素和留白之间的整体平衡。
留白当然不一定是白色，也可以是其他的颜色，你还可以搭配各种不一样的配色方案和组合。
色彩和留白的结合是很自然的选择，两者能够更好地赋予设计以更强的情绪和个性化的视觉，制造整体氛围。
但是值得注意的是，除了留白使用一种颜色之外，其他元素的色彩也尽量不要用得太多太花。简单的色彩搭配更容易营造出对比，在不复杂的配色体系下，制造出出色的视觉效果。
尽量将主要配色控制在 1~2 种，对比色能够营造出更强的戏剧感和视觉张力。
「一图胜千言」是被说烂了的老话，但是这句话怎么说都是对的。单张图片能够承载的信息量是巨大的。不过一样的，插画在极简主义设计当中的应用也是相当讲究的。
通常而言，你需要将插画当作重要的视觉焦点来使用，让它周围有足够多的留白，这样能够保持极简设计应有的呼吸感。
这个时候，经典的排版布局方式就可以发挥极大的作用，左右布局、上下布局、中心式布局等等等等，不用复杂的花样，就可以制造出让人惊喜的效果。
当然，记得控制好元素和整体布局之间的空间比例。
当然，配色、图片和留白都说了，剩下就是文本的部分了。文本在极简主义设计当中的使用方式也有一些事项值得注意。
文本排版在极简主义设计当中的玩法当然也很多，实验性的文本排版和布局设计是很多设计师提升极简设计的视觉观感的一种有效的方式，结合一些比较独特的配色或者效果，都可以。但是无论哪种，在「想法」上要保持极简——不要想在一个设计中承载过多的排版方式和元素，你最好着力表现一种「理念」，或者一种排版风格，呈现某一种的气质，千万不要掺杂太多的想法。
此外，相对传统的字体设计也同样可行，适当地运用一些个性化的排版技巧，就可以了。
从包豪斯和瑞士现代主义设计开始，图形元素就很好地同极简主义设计结合到一起。
你可以充分发挥你的创造力，使用独特的图案来提升极简设计的视觉效果，也可以从其他已有的设计当中汲取灵感，提取元素，应用到你的构图和元素当中。
图形与图案其实可以玩的花样很多，如果不是作为视觉主体的话，其实适当的装饰即可。作为视觉焦点存在，强化形式感就好，不必要弄的太过于繁复。
极简主义设计并不复杂，重点在于你怎么简化整体设计，如何将有限的元素打磨好，控制留白和主次，从而以较少的内容呈现出丰富的效果。当然，在把握的核心要义之后，多研究一下成功的案例，其实你也可以做很好。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
上次整理了一些大厂的可视化服务平台，平台的优势显而易见，组件化的操作，快速搭建的方式节省了很多的开发和时间成本。有兴趣的戳这里：数据可视化大屏设计工具整理（上）。
对于上期的一些更正：8月28日百度Suger更新了收费标准，也就是说现在百度Suger也收费了！目前是分版本收费，但是对新老用户还是提供了30天的全功能试用的。
本次整理的是下半部分的内容：
一、数据大屏与数据可视化
二、大厂的可视化服务
三、技术开源库
四、设计辅助工具
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
三、技术开源库
了解一些技术开源库，一方面可以参照其图表案例，了解各类不同图表的展示方式；另一方面是为了保证自己设计的可实现度，不然再炫酷的设计效果最终如果因为技术开发能力无法实现也是徒劳的。
Echarts -百度开源可视化库
这是一个使用JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器。4.0版本还提供了对微信小程序的适配。DataV中的一些组件也是依赖Echarts生成的。
Echarts提供的图表很多样化，几乎包含常用的、不常用的各类图表样式。且提供有可交互组件，可以对数据进行多维度数据筛取、视图缩放、展示细节等交互操作。
△来源Echarts实例
Mapv - 百度地理信息可视化开源库
用以展示大量地理信息点、线、面的数据。创建需先上传地理信息数据，再设置地图样式后，即可下载保存。目前仅开放Beta版本。
△来源Mapv官网
蚂蚁AntV
https://antv.alipay.com/zh-cn/index.html
蚂蚁金服的Ant Design作为设计师应该都是较为熟悉的。AntV是蚂蚁Ant系列下的一个数据可视化解决方案。分为G2、G6、F2、L7不同产品，分别对应不同的特性需求。
△来源AntV官网
Amcharts - 矢量地图定制下载
http://pixelmap.amcharts.com/#
这个网站可以用来绘制地图。有些特殊情况下，开发可能需要自己绘制地图。如果开发自己使用canvas绘制，难度较大。这个网址提供了地图svg、HTML以及image的下载。
△来源Amchats官网
D3.js - 数据驱动的文档
D3js 是一个基于数据来操作文档的JavaScript 库，适宜用来建造各类可视化图表。支持大型数据集和交互与动画的动态行为。
△来源D3js官网
billboard.js - 简易界面的可交互图表库
https://naver.github.io/billboard.js/
这是一个基于D3 V4+的JavaScript的图表库。可以对数据进行视图缩放、展示细节等交互操作。
△来源billboard官网
FusionCharts
FusionCharts提供了100多个交互式图表和2,000多个数据驱动的地图，对不同平台都可兼容。同时提供了前端和后端各类框架及代码语言的插件来方便开发快速入门。不过这款是收费的，根据不同的使用环境定价不同。
△来源FusionCharts官网
四、设计辅助工具
Kitchen - 蚂蚁金服官方插件
这是一个sketch的插件工具。主要功能如下图。
△来源Kitchen官网
Iconfont 图标库我比较常用，可以直接在sketch中搜索拖拽，不用再去打开网页查找了。其次数据填充也比较常用，自动填充时间地址城市等挺方便的。sketch也有自带的功能，但毕竟自带的填充都是英文，想要中文的需要自己编写填充文档，相对还是比较麻烦。其他是像智能排版、色板等功能，我用的不多，还是以sketch自带功能为主。
另外，与可视化设计相关的就是里面的图表生成器了。不过Kitchen当前只有一些常规的图表，不过胜在简洁明了，很适合在此基础上进行二次设计。该插件还是蚂蚁Ant系列的官方插件，可以自动配置符合Ant Design 规范的组件，配合公司采用的Ant系列的框架，会方便不少。
△来源Kitchen插件界面
FusionCool - 阿里Fusion Design开源中后台UI解决方案辅助工具
这也是一个sketch的插件工具。分为图标、图表、组件、模块和模板五大功能区。
Fusion Design作为一个开源中后台解决方案，和Ant Design有一定类似，但也有所差别。Ant Design 是一套组件库, Fusion Design 更像是一个组件库生成工厂。
直接下载安装FusionCool的话，打开sketch看到的将是一个默认组件库，图表部分的种类样式比Kitchen多了不少。而更厉害的是，你可以在Fusion Design上基于官方库编辑改造成属于你自己的设计系统，发布主题后获得新的主题包，此时你在FusionCool中就可以看到专属于你的主题包了，在sketch中完成设计后，开发使用Iceworks安装你的主题库就可以直接编码实现你的设计。
△来源FusionCool插件界面
Map Generator - 快速地图生成填充
https://github.com/eddiesigner/sketch-map-generator
这是一款基于谷歌地图的自动填充的Sketch插件，输入地址后就可以自动生成不同风格样式的地图，个人比较喜欢第三款灰色的。
△图为Map Gnerator生成效果
Amcharts - 矢量地图定制下载
http://pixelmap.amcharts.com/#
这个网站上面提过，但其实设计师用来获取矢量地图也很好用，选择地图样式和地区之后，右下方即可以下载SVG、HTML、Image格式的图，十分方便。点击“Generate Ppxel Map”还可以转化为像素圆点形式的地图。
如果需要省份的地图，网站上无法直接下载，但可以要先下载中国svg地图，然后再打开svg选择自己需要的省份模块就可以了。
另外，在使用地图的时候，要注意正确用图，规范用图。要有国家版图意识，符合测绘法。
标准地图可以参考国家自然资源局提供的标准地图服务，服务网址：http://bzdt.ch.mnr.gov.cn/index.html
Chart - 图表插件
https://github.com/pavelkuligin/chart
这个插件是收费的，每年10美元，但是你可以去找那啥啥的（我知道你懂）。优势在于可以在Sketch中创建包含随机、表格或者JSON数据的图表。图表样式也是非常的丰富了。
△来源Chart官网
-END--
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
这是目录：
一、数据大屏与数据可视化
二、大厂的可视化服务
三、技术开源库
四、设计辅助工具
一、数据大屏与数据可视化
数据可视化是目前对数据展示最常用的方式。数据的可视化设计有助于将复杂的数据用最易理解的方式展示在用户的面前。
数据可视化在中后台的设计中很常见，通常主要用于分析和决策，对实时性要求不高，从一部分功能上讲，其实也有着报告数据的作用。设计以2D平面展示为主，几乎不会有3D设计出现，视觉设计重点更注重简单直接，一目了然。
△来源 dribbble 作者wuze，侵删
△来源 dribbble 作者William Chen，侵删
关于制作数据大屏的一点小建议：
△来源Suger官网
△来源Suger编辑平台
△2018天猫双11大屏
△DataV平台创建编辑界面
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
Sketch是设计人员的首选选择
用Marvel构建页面非常简单
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
UI圈儿刮起了一股势头猛劲的新拟物风（Neumorphism），起因是乌克兰设计师亚历山大·普卢托 （Alexander Plyuto） 在 Dribble 平台发布了一张应用了新拟物风格的UI作品，便引发了圈内的激烈讨论，更一直占据着当时的热点榜首。此风格出现后，也给流行的扁平化设计添加了新的展现形式。
普卢托的《Skeuomorph Mobile Banking》，在Dribble获得了3000多次喜欢
也有一些非常著名的品牌公司在设计上结合了新拟物风格，像三星召开的Galaxy Unpacked活动、MKBHD的介绍视频等，效果都很出彩。当趋势热潮退去，新拟物风格并没有像一部分评论者坚持的那样，“洗牌”式地接管整个设计圈。
三星 Galaxy Unpacked 活动
MKBHD在2020年的简介中使用了这种风格
复习结束回归正题，我们看到现今又出现了一种新样式—Glassmorphism，字面上由玻璃（glass）和拟物化（skeumorphism）组成，叫法颇多：玻璃拟态、玻璃拟物化设计、玻璃拟物风格，其实意思都对，它比新拟物风格更直观清晰。那么，玻璃拟物风格最具有定义性的特征是什么呢？一起来看：
-透明度，使用背景模糊的磨砂玻璃效果；
-物体漂浮，画面中有多个漂浮层级；
-鲜艳的色彩，在磨砂玻璃后更突出整体效果；
-浅色边框，应用在半透明物体上衬托质感。
玻璃拟物风格特征显著，用户也能快速确定界面的层次结构和深度。画面中清晰显著的则是最迫切想要表达的重点，非常好辨认。
在Drrible的#Glassmorphism#下，大家已经纷纷提交自己的作品了，也让辞典酱发现了一些它独有的「魅力」：
-颜色明艳、欢快，视觉上带来一定的刺激性；
Music Player Apps by Adhiari Subekti
glassmorphism redesign by Frédéric Musso
-icon虚实结合，营造出了一种「小而精」的质感；
MEDIACRAFT ICONS by Ayo Kid
Glassmorphism Iconography by Hemanth Ravi
-边缘细框，模拟玻璃，带来微妙的「高级感」。
Procreate app icon redesign by Zhenia ievgen
Coffee Shop App by Saud Ali
说到由来，那么苹果带来的影响力毋庸置疑。苹果早期的设计系统为拟物风格，从2013年推出的iOS 7开始，系统风格进行了全新尝试，背景模糊也是从那时起进入大众视线，虽然人们褒贬不一，但使用过的用户还是很买账的。
与苹果互为对手的微软也推出了这种类似于毛玻璃质感的Vista系统，但距离真正的玻璃拟物还有一段路程要走。
最新的macOS Big Sur 和 iOS 14系统都已经使用了偏向玻璃拟物化的半透明效果。
通知栏的弹出变成了一件有趣的事，你可以清楚地看到新面板下的图标是如何弹出和消失的。
微软的Fluent设计系统也很重视这种效果，他们称此特殊元素称为「亚克力」，并将其作为设计系统中不可分割的一部分。
Microsoft Fluent设计系统
实现玻璃拟物效果需要注意的是，与任何基于卡片的布局一样——物体离我们越近，它吸引的光就越多，也就意味着它会变更加透明，反之亦然。
它依靠3个基础元素来实现，分别是阴影、透明度和背景模糊。还可以使用一个或多个透明层，假设在一个颜色相对复杂的彩色背景中应用，那么至少加两个半的透明层级，要展示的文字或图标的可见性才会最大最突出。
不要设置对象的透明度，而是调整填充透明度。下图示例中，两种不透明度的数值调整，得到了完全不同的视觉感受。
背景在玻璃拟物效果中至关重要，太单调会导致完全不出效果。这可能就是Apple选择彩色背景作为MacOS Big Sur默认壁纸的原因，背景图片的色调差异大，玻璃拟物的效果越强烈。
别小看了这1px的细微边框，它模拟了玻璃的边缘，将其单独设置透明度，就能让形状从背景中脱颖而出。
半透明边框图形（左）vs 无边框图像（右）
建立一个良性的层次结构同样重要，和新拟物类似，它们都不是Material Design被广大用户熟知与接受的呈现形式，装饰味道会相对浓郁。所以设计师在应用前，最好能确保——元素和各层级在没有花哨背景加持下，一样能被用户以及视力障碍人群轻松识别理解。
下图就是一个很好的例子，卡片具有清晰的结构，即使完全去除玻璃背景。它也能正常使用。
作为人类，我们很容易对各种趋势感到厌倦，所以每隔一段时间就会迸发出新的灵感与创意。但作为设计师，我们需要探索所有可能创新产品的方式。在当下，玻璃拟物的应用的确会使产品看起来更好，对用户更具吸引力。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
简单讲，新拟态是一种图形样式，其原理是为界面的UI元素赋予真实感。
其实他也是算拟物风格的一种，只不过表现形式不一样，最早出现在追波上，从2020年慢慢被大家熟知，讨论，重视起来。暂且不论是不是未来的必然趋势之一，一个事物的兴起多少是有些道理，我们持辩证的眼光去看到，去学习、去了解便好。
原生名词有几个叫法，Neumorphism / soft ui，翻译过来叫新拟态或者是软ui。其实按照我们国内的翻译应该叫，新拟物风格。Neumorphism，是New +Skeuomorphism的组合词。
地球是圆的，很多事情总是轮回的，原理是不变的，只不过是换了一种表达方式出现在我们的面前，在了解新拟物之前，先简单说下UI整个风格的发展历史，
说起ui设计风格不得不说起我们乔老爷子了，在2007时候年最早的iphone手机的手机界面就是拟物风格的，那时候觉得怎么会有那么好看的界面，设置图标的齿轮，阅读器的书架，以前的youtube图标还是一个小小的电视，从而掀起一波拟物图标风格流行趋势。
说起拟物风格，不得不提一下当年的拟物大神——MIke，当时在追波掀起一波轰动，在国内也迎来一阵临摹潮，我还记得那时候我还临摹过下面那只钢笔，还有那个马卡龙蛋糕，都是满满的回忆。对于当时MIke大神作品，用现在话说，奈何没文化，一句卧槽走天下... ...
到了2014年，苹果对界面进行了“扁平化”处理，以使外观更简单，同时又使其用户易于理解。一直到今天扁平化设计风格仍然是UI设计的标准。
其实最早最早将扁平化风格设计运用在产品中的公司是微软。他在Windows 8系统使用扁平化设计语言，但是Windows 8一直饱受争议，但是反响并没有很好。
Window 8平面设计示例
还是从追波说起，这一切的开始是源于在2019年11月05日的在Dribbble-Alexander Plyuto发布的作品，获得了26W+的浏览，4400个赞，以及1800个收藏。以后在Dribbble上便成为流行，在探索更多的可能性。
再说新拟态有什么特点之前，我们先看几个比较典型代表的视觉作品，以便于更好的了解这一风格
我们看下上面的一些视觉作品，第一眼看到比较明显的是，在一些可点击区域做了一些“浮雕”效果，点击状态和非点击状态，在视觉处理上是未选中状态是凸出来的，已经选中状态是凹进去的，但显然凹凸之间是有很多质感细节处理的，等下再实操组件部分会讲解到。
左上角亮色投影，右下角深色投影（有且只有一个光源照射）
元素与背景对比度比较弱
常常用于按钮组件和卡片
按钮状态，视觉上凸出代表未选中，凹进去表示已选中状态
1.有且只有一个光源照射
那作者在追波上按钮也好还是卡片处理也好，仔细观察不难发现，它定了一个光源，是从左上向右下照射的，所以，越靠近光源的部分，越亮，远离光源的越暗（素描的绘画时常常用到）。因为新拟态的光源是唯一的，是从左上角照射的，所以就不难解释，或者分析得到，左上角亮色投影，右下角深色投影。这一基础规律，不单单适用于新拟态风格的按钮，它还适用于所有新拟态风格表现手法的视觉组件。
可以看到下图，卡片、转盘、按钮，他们的受光面都是在左上角。
这里就要讲一下，另一个叫法了soft ui，即软ui。软，有柔和的意思。为什么这么命名呢？其实就是由于新拟态的组件与背景的对比度很弱，我把收集到的几千张素材中，挑选一部分进行进行色值对比，可以发现无论是亮色模式下和暗色模式下对比度都是很低的。
按钮、投影、背景之间的关系都处理的非常柔和，这是新拟态的特征之一
素材库
基于这一点，其实我们只要建立好卡片的和按钮的样式组件，新拟态在设计层的表现就可以高效率的实现，可能稍微麻烦的就是，在一些质感细节上做一些优化，前面也说到，新拟态是一种无纹理的拟物风。所以想要表现卡片/按钮的质感，在光影、厚度细节上，需要做更多的细节处理。
比如卡片的厚度感细节的处理，为了体现银行卡的厚度感，在卡片增加了一个对角渐变描边，从渐变色块可以看到，渐变的规律，也是遵循“有且有个光源”定义的，靠近光源的是纯白，近暗色投影端是比投影更重的一点的描边色。
这样做的好处不单单是为了体现卡片的厚度，因为我们前面讲到，新拟态是软ui，是对比很弱的。风格柔和带来的另个一个不太好的就是，界面清晰度不够，很容易把视觉处理“糊掉”。所以，增加对角渐变描边在一定程度上也起到了，让界面的视觉层级更加清新的作用。在实操部分，将会一一拆解各种情况的一些处理方式。
在新拟态中，视觉上凸出代表未选中，凹进去表示已选中状态。是大部分人的处理方式，在这一小节里，先讨论大部分的，在实操部分在列举其他的处理手法。
这里可以明显感受到，按钮状态的区别，凸出/悬浮的是没有选中状态，凹陷下去的是选中状态。
细节观察，新拟态风格，在按钮上面的元素是做了内阴影处理的，看起来有一点点雕刻的感觉，
在选中状态按钮的处理，首先是在光源的处理上是统一的，加上光影的处理，就很容易做出来凹进去的感觉，想要是凹槽的厚度感、质感看起来更加舒服，这里的处理方式和卡片的处理方式原理一样，添加渐变描边就可以解决。
这里影响新拟态界面的可见性，主要有两个因素，一个是可见性，另一个就是视觉层级关系。
识别度
前面我们说到，新拟态的的一个设计风格特点，就是低对比，弱对比。带来界面柔和一面的同时，在视觉层上，也会很容易出现界面”糊掉“的一些情况，这样就非常不利于信息的传递。试想，一个页面从色调、按钮、布局、交互上都很好，但是，就是看不清哪跟哪儿（识别度），那设计出来的东西是没办法落地的，顶多是个好看的花瓶。
所以，在设计新拟态风格的时候，需要格外的注意界面的识别度。但同时也要注意，界面的投影不能太重，如果太重，界面就很容易显得“脏”。
那么，前面讲到的，卡片厚度的塑造方法（增加渐变外描边）可以在一定程度上提高界面的识别度，提高信息的传递。
因为新拟态风格的基础原理是依托光影关系来塑造的，那在很多样式组件界面中，就会产生很多悬浮或者下凹的投影，那么在很多时候是很难区分视觉层级关系的，用户在看到这样的界面的时候，第一时间会觉得页面很“满”，用户就无从下手。
所以在做新拟态设计风格时候，一定要学会“视觉降噪”，需要避免整个页面都很满，最重要的是克制。
那前面说到可见性和视觉层级，这两点是易用性原则里面的基础组成部分，如果基础组成部分都没有得到很好的解决的话，那产品的易用性就无从谈起。能用、好用的产品是前提，美感是对产品易用性的补充，能用、好用才是核心。
所以在设计新拟态风格的时候，对页面的信息层级细分要求更高，对这个页面的节奏处理需要更细腻，对用户体验的理解需要更加彻底，在商业与交互层面的持衡中，需要考虑的层面有多一个比较关键维度的考量——可见性
那么当我们可以处理好页面元素之间的关系，也满足易用性基本原则的时候，新拟态带来的局限性将会变得不那么重要。
针对前面我们说到新拟态的一些特点，一些局限，目前比较适合以下两个大类产品。
工具类的APP内容相对固定，不需要时时更新，这样设计师在视觉风格方面的表达空间更大一些。在追波上，发现大部分的作品都是偏工具类的
和工具类APP一样，这些类页面上运营性质的东西相对较少，内容的形式相对可控。
那么，大家最关心的问题来了，新拟态到底是不是2020年即将要流行的设计风格？相信 大家最近这段时间多多少少也看过很多关于新拟态一些介绍，在趋势文章里面或者在其他文章里面看到。
首先必须得中肯的说，像大多数设计趋势一样，新拟态是设计用户界面的一种看起来视觉比较新颖的表现手法，让产品界面看起来既柔软又方便，但是它也存在一些局限，前面我们也提到一些，比如它实现起来还是有一点难度，也不够灵活等等
但是我说一点不同的是，这也是我一直认为的一点，就是UI设计运营化，运营设计游戏化，这是未来的趋势。
反观我们APP的主要生力军，90、00这一批人，其实他们就是互联网的原住民，他们就是在这注重交互，注重游戏化体验的大环境出生的，成长起来的，所以他们对这些东西是非常了解的，他们也能接受这种游戏ui，这种写实的东西，包括现在的这种体验。
当然，趋势不是我们预测的，因为只要苹果出一个新的设计风格，那个风格就会是成为新的设计趋势，目前来看，这是必然的。
分享此文一切功德，皆悉回向给文章原作者及众读者. 原创：木七设设计坊
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
团队按领域分组收集素材
我们认为影响设计趋势的因素主要有以下三个：
新冠疫情的持续除了改变了大众的生活习惯外，也意外地推动了各行业加速线上化转型、提供「无接触」服务，出行上的限制催生了游戏等线上娱乐市场的蓬勃势态，甚至一定程度上疫情也影响了社会和经济格局，导致了一些新政策的出台。
新生代的崛起导致了流行风格的一系列变化：二次元等亚文化成功破圈进入主流消费市场、复古设计的重心从 90 年代向千禧年偏移。他们以更开放多元的思维方式和新视角，影响着下一个 10 年设计题材的选择。
近年来智能设备的性能上限不断被刷新，诞生了许多创新的设备形态，使更生动的交互体验成为可能，另一方面，AR/VR 技术经过上一个十年的雕琢，性能和效果逐步得到验证，具备了量产的技术沉淀，将迎来一波商用普及的浪潮。
「 酸性平面」风格融合「Y2K」美学的未来感，形成了独特的「未来酸性金属风」，典型特征有：
酸性渐变：一种会引起不适但足够刺激的迷幻渐变色。这类配色打破了传统美感的标准，追求感官刺激，给人异次元下致幻而不安的感受。
金属感：以熔融形态在环境光下呈现出诡秘的反射，这种反常规的液态质感所带来的违和，在传统科技感上增添了几分神秘。
未来酸性金属风反差感兼具未来感的特征，决定了它在时尚、音乐、潮流以及艺术圈有很好的延展性。服装鞋包、艺术家创作，以及传达个性自我的品牌平面广告，都可以看到其身影。
The Future Vision of Microsoft 365 宣传视频
随着产品硬件性能的不断升级，设计语言也开始追求真实感。相比过去，「类玻璃柔光材质」除了更注重「轻」的概念，在质感上也呈现出更加轻盈、细腻以及自然的趋势。
类玻璃材质的表面呈现微磨砂感的半透明质感，透光而不透视，通过清晰的边缘来强化物理质感，两者对比呈现出一种「虚实结合」的美感。该材质多以轻薄的片状形态悬浮于场景中，减轻重量感以带来轻盈的视觉感受。
「类玻璃柔光材质」轻盈与通透的视觉感受，能营造出未来感十足的场景，很适合阐述科技智能的概念。因此该风格成为了一大波科技背景公司的设计首选，其中主要以硬件系统以及B端、工具类的产品为主，应用场景包括界面设计、推广视频等。
Louis Vuitton × League of Legends Collection
近年来，品牌跨界合作的对象不再局限于品牌之间或明星名流，众多服装、奢侈品、数码产品等消费市场的强势品牌纷纷向游戏和二次元等虚拟 IP 抛出跨次元合作的橄榄枝。这种合作方式成就了「三次元」品牌与「二次元」IP 的双赢局势，将在 2021 年继续发展并造成更广泛的影响。
游戏和二次元元素大热，手机、化妆品、服装等产品通过结合该类元素，以新的形式吸引年轻用户：为像素风格的游戏设计服装、为全息的虚拟偶像捏脸塑形、为动漫人物拍摄杂志封面、在一款电子游戏里搭建新品发布会等，相应地，跨界应用对设计师的涉猎领域和技术跨度也有了更高的要求。
一线顶尖奢侈品品牌相比以往与动漫游戏类二次元 IP 合作更频繁，除了经典动漫，也不乏新鲜的热度 IP。
在《Evangelion 新世纪福音战士》25 周年，OPPO联名这部影响一代人的动画神作，推出了一款从快递包装、外盒甚至是卡针，里里外外都深度融合 EVA 元素的联名机型。
OPPO × EVA 定制版手机 OPPO Ace2
美国说唱歌手 Travis Scott 2020 年在《堡垒之夜》（一款线上竞技游戏）中办了一场虚拟演唱会。这场演唱会共吸引了 1230 万玩家同时在线观看。
Travis Scott 在网络游戏《堡垒之夜》内举办虚拟演唱会
Photographed by Sean Thomas, Vogue, January 2020
「亲生命性设计」原为建筑和空间设计中的概念，意为「运用天然材料、自然光和植物创造令人愉悦舒适的建筑环境」。受城市化进程加剧及全球疫情的影响，人们渴望亲近自然的欲望和需求变得越来越强。产品和自然元素彼此交融，从主客体关系转为互相依赖的存在，以更为和谐与自然的交互方式与用户进行沟通与连接。
自然元素将在不同感知维度以更贴近真实自然的方式融入各个领域的设计，比如在工业产品设计中使用更加贴近自然物体的表面肌理，在建筑设计中将人造空间作为自然空间的延伸，在数字产品设计中使用更拟真的自然音效和光照等等。
2021 时尚界不约而同地强调了自然元素的使用和对环境保护的呼吁，各大品牌都用自己的方式演绎了「自然共生」的服装设计系列。
还原自然界中的真实材质成为了新的设计灵感，被应用到各种设计中。
Vivo OriginOs
山水 Mountains & Rivers by Particle (Gao Yang)
近年，国人的文化自信逐渐增强，国家扩大内需、扩大消费的政策导向为国内消费品品牌带来了巨大的机会。「中国设计」的标签已经成为新一代的时尚潮流，带有中国本土个性、体现中式美学的设计受到更多品牌的青睐。
越来越多中国品牌开始注重汉字 Logo 的使用和设计，更多现代设计力求为中式美学摆脱民俗、皇家的刻板印象，木、石、竹这些蕴含中式精神内核的元素成为了工业设计、建筑设计中新的缪斯。
随着中国的国际影响力进一步扩大，国际品牌也会提高对中国市场与文化的关注，在设计上融入更多本土元素。
各品类的国产品牌在包装或产品设计上通过对中国元素的运用来塑造具有特色的国风产品。
可口可乐中国与汉字文化推广机构「好字在」和方正字库联合推出的这款字体，反映了可口可乐对中国文化的深入理解和对本地化运营的关注度。
可口可乐联合推出的中文字体「在乎体」
同仁堂旗下「知嘛健康」在北京开设线下体验店，店铺设计提炼汉字、中药、药房等中式元素作为灵感，用现代化的方式呈现，是极具现代感的「中式」空间设计。
同仁堂旗下「知嘛健康」线下体验店 by 无象空间建筑
Microsoft Haptic PIVOT 微软腕带触觉设备
在增强现实中，人机交互将更多发生在物理空间里，虚拟的数字信息将借助形变和震动被模拟为触感。得益于新型传感器的拓展应用，硬件设备实现了对温度、形态、力量的数据监测，同时各大硬件厂商也逐步对震动马达等硬件进行了完善升级，从而为进一步的触觉模态设计提供了支持。
涉及领域除了现有的游戏、驾驶、健身等场景外，更有趋势被应用于创新教育、操作培训及有风险的试验演练中。
任天堂在健身环 Ring-Con 内加入的力学传感器实现了对力量（张力、拉力、压力等）的监测，并利用 Joy-con 震动来对用户动作的标准性进行反馈提示。
《健身环大冒险》on Switch
微软研发部开发出了一套 Haptic PIVOT 腕戴触感反馈方案，通过活动的机械结构，更逼真地模拟出物体的握持感。
Haptic PIVOT 使用演示
索尼推出配备了音圈马达的 PS5 DualSense 无线手柄，扳机键内增加了一个由电机驱动的齿轮，通过震动模拟出枪支的后坐力、弹簧的弹力、绳索的拉力等物理效果。
PS5 DualSense 无线手柄使用演示
Flight Booking AR application by Bala GN
现实生活中，人与人、人与物接触产生的实体服务称为线下服务，由网络等技术支撑的人与硬件设备交互的服务称为线上服务。在硬件设备、网络技术成熟的当今社会，线下服务向线上服务迁移的过程中融入了更多 AR/VR 等虚拟服务，也带来更多新的设计行为和交互方式。
原本需要亲临现场才能完成的体验，现在可以通过线上的方式实现，这不仅体现在因疫情催化产生的线上办公、线上毕业展等强需求场景，也在购物、试衣、健身等更贴近生活的领域应用。
用户在 Gucci APP 上挑选自己喜欢的手表后，将手机摄像头对准手腕，就会显示「试戴」效果。
Gucci APP 虚拟试表
各大院校毕业展因疫情无法在线下举行，一些学校通过线上展厅的方式，让学生的毕业作品可以通过网络浏览。
中央美术学院 云端美院
香港理工大学 polyudesignshow
Balenciaga 2020 年用一款电子游戏代替了线下时装发布会。在视频游戏中，玩家能够在五个主题场景中欣赏到 2021 秋季系列的新款服饰。
Balenciaga：《后世：明日世界》
硬件设备的创新使线上健身指导有了更合理的使用场景和更人性化的体验，用户通过线上内容和服务在家也可以获得接近健身房的体验。
Tempo Studio：家庭智能健身设备
POPMART 泡泡玛特
「情感疗愈」是一种有温度，无攻击性，注重细节的设计方向。这类设计旨在治愈修补心灵中的创伤，不只注重功能的完善，也更在意情感内涵的打磨。它也可以帮助人们敞开心胸，接纳自己内在的所有面。
在产品设计中，一些抚慰人心的小功能、小彩蛋往往带有着治愈人心的力量。在角色形象上，柔软、可爱的造型在带给人无攻击感的同时强调着陪伴的意义。在娱乐领域，也出现不一味强迫用户达成某个目的慢节奏「佛系」游戏。
网易云音乐来自「张开双臂拥抱别人」动作灵感的抱一抱彩蛋，让原本只有文字点赞的评论区更有温度。
网易云音乐的「抱一抱」动效
Switch 游戏《动物森友会》在 2020 年异常火爆，归功于其萌系治愈的风格和追求自然随性的生活方式，也让疫情期间的玩家们暂时逃离严峻紧张的现实生活。
Switch：《集合啦！动物森友会》
盲盒的精神内核是「收集、陪伴、治愈」，泡泡玛特签约的 IP 形象，大多以可爱、萌系为主。
泡泡玛特的盲盒萌系 IP 形象
Disney 与 Pixar 出品的动画电影《心灵奇旅》用轻松的方式探讨生活的意义和人生的价值，电影用它独特的美术风格和感人的故事斩获超高的口碑和评分。
Disney · Pixar《心灵奇旅》
OceanPlastic 废弃塑料重造
2020 年世界各地重大自然灾害频发，环境污染严重，刺激着人类对生活环境的审视。更多品牌开始探索材料再利用的可能性，从自然衍生产物出发，从而降低对大自然的破坏。年轻一代对于再创造产品有更高的接受度，循环材料转化为塑料颗粒，组合成独一无二的花纹和肌理，给人专属限量感，再生材料成为新的流行元素。
消费者将继续青睐和卫生健康、环境保护相关的价值品牌，越来越多的快消、包装厂商开始研究材料回溯，组建相关部门，加入循环经济浪潮中。
运动品牌 Adidas 与 Nike 都推出了由回收废料制作的充满设计感的产品，在宣传品牌环保意识的同时也引领了再生产品的潮流。
adidas 与 Parley Ocean 合作推出由海洋回收废料制作的联名产品
同样使用了废弃材料的 adidas 球衣
Nike 将生产车间加工过程中产生的边角料转化为产品设计的主要材料
由 99% 废弃奶茶杯+ 1% 废弃原茶渣再生而成的「真垃圾·手机壳」
TRASHAUS 真垃圾再生手机壳
Freitag 的 2020 新款 F601 MALCOLM 是一款个性化背包，用一块再生的防水油布保护，并由用空PET瓶制成的防水织物制成。
F601 MALCOLM
除消费产品外，肯德基的可回重复利用餐盘、星巴克倡导的纸质吸管、外卖行业各公司的环保举措等也体现了餐饮外卖行业对循环经济的重视。
结语
无论是后疫情时代世界的变化、新技术的发明应用或是国际社会环境的走向，都会影响大众的生活习惯、行为方式和审美取向，同时也决定了未来设计的发展方向。但这其中不变的，是软硬件发展不断突破视觉表现的上限、设计师追求「以人为本」的核心理念以及通过设计去提出和解决问题的目标。
我们期待着上述预测性的分析能在今年的设计中被验证。但设计本身是一个迸发新奇创意的过程，也希望上述的设计趋势能激发设计师们更丰富的灵感、为设计领域提供更多的可能性。
新的一年，在「变化」与「希望」的新主题下，我们一同加油！
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
蓝蓝设计的小编 http://www.lanlanwork.com