SEE Conf 2020 学习笔记

于 2021-01-05 02:04:21 发布
阅读量607 收藏 1
点赞数
文章标签： SEE Conf 2020
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40693643/article/details/112210970
版权

目录

主会场：

技术专场：

第三届 SEE Conf 2020 视频回放&&PPT:https://www.yuque.com/seeconf/2020/slide

1. 体验科技与好的产品

SaaS产品的体验演进：

  • 从无到有
    数字化转型，让大量SaaS产品从无到有。

  • 从有到美
    大量产品从功能堆积到默认好看，颜值 = 进步。
    颜值不仅仅关于视觉呈现，也需要从信息架构，功能排布等很多方面对产品进行重构

  • 从美到好
    努力让产品从默认好看到默认好用
    好用 = 效用 + 爱用

    企业级SaaS产品领域：
    一个好用的产品，需要在理性上好用，也需要在感性上好用。
    在这里插入图片描述

    好的产品要富有创意，创新，有用，易用，不放过任何细节，要美，要环保，要尽可能少的设计，要含蓄不招摇，要诚实，要经久不衰。

    好的产品是诚实的，能做什么就做什么，不能做什么就不做什么，不对用户说谎，不忽悠欺瞒用户。

    好的产品需要对用户有效用，对企业有利润，要可持续发展。
    对用户的效用，即用户价值：用户价值 = 新体验 - 旧体验 - 替换成本
    新体验往往来自新技术或新的商业模式。但对于企业中后台产品来说，新体验往往来自于产品功能的清晰梳理和产品流程的大幅简化。

2. 基于地域文化的设计创新
3. Ant Design 4.0：创造快乐工作

在这里插入图片描述
WIMP界面

  • 让用户找功能
  • 过渡依赖用户，容易走不通
  • 过渡依赖意识触发，容易费脑力
  • 面对海量功能，WIMP界面的人机交互局限

措施：
守正出奇: 增加主动式交互，让功能找到用户

例子：

  • 支付宝收钱码，手机翻转一定角度，页面反转显示，有利于对方查看。
  • 输入法优化，热词
    在这里插入图片描述
    让功能找到用户，节省用户脑力体力

资产

  • UI资产
  • 可视化资产
    图表生成
    智能工具：1. Kitchen图表生成(Sketch智能设计工具) 2. ChartCube(AntV在线工具，拖拽之间快速制作图表)
  • 图形化资产
    HiTu
    在这里插入图片描述
4. 决策机构体验科技 数字驾驶舱

数字驾驶舱： 一套沉浸式的，模拟场景的人机交互系统。

产业互联网 —— 社会数字化转型（必要性，必然性）

数字化转型依赖的基础：数字化转型需要依赖坚实的信息化建设
企业/政府机构可以推动：

  • 工作流更精简，标准（进一步标准化，提高过程透明度）
  • 信息传递扁平化（扁平化处理原本单向/线性的信息传递）
  • 创造更便于协同的场景（打破部门间数据壁垒，提高团队协同性）

幻鹦（COCKA）数字驾驶舱

  • 业务信息的数据中枢
  • 决策思维的可视化载体
  • 成果对外展示的窗口
    在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
艺术化：
设计师应当尽最大的努力，去创作一种最强有力，最纯粹，最准确的形式来传达意义表现意像。

启发性：
设计师的智慧不仅表现在审美形式的布局与构造上，同时还表现在这些形式所传达的意义的深刻程度上。

在这里插入图片描述
三位一体解决方案：

  • 市场（政府机构，企业）
  • 中台（丰富的组件资产积累，作品制作全流程覆盖，作品部署运维监控）
  • 生态（大量中小生态企业，开发经验丰富）

Cocka Studio 1.0 （没开源，仅对生态公司开放）

  • 组件资产库
  • 核心能力
    大规模场景自动化生成管线
    大规模实时分布式渲染框架
    基于JavaScript业务开发
    可视化拖拽配置Studio
    实时数据接入，推送能力
  • 配套设施
    数据接入平台
    运营配置平台
    运维播控系统
    控制端
5. 智能可视化体系AVA

https://github.com/antvis/AVA
在这里插入图片描述
ChartCube

https://chartcube.alipay.com/
AntV 在线图表制作工具 拖拽之间快速搞定图表制作

图表推荐原理：

  • knowledge 知识库
    图表类型：名称，定义，分析目的，所需数据，涉及通道。。。
  • rule 推荐规则
    HARD 硬性规则：
    • 字段属性检查
    • 分析目的检查
    • 冗余字段检查
    • 。。。
      SOFT 软性规则：
    • 分类数量评估
    • 数值差异评估
    • 相关性评估
    • 。。。
  • advisor 推荐器
    在这里插入图片描述
    智能可视化的未来
  • 研发态： 全智能图表推荐，代码极简
  • 阅读态：交互分析组件智能增强
    在这里插入图片描述
  • 分析态：运行时的可视分析智能辅助
    在这里插入图片描述
6. 使用 React 开发小程序 - Remax
7. Evolution: Serverless For Frontend - 探索下一代 Node 研发模式

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
Node.js能胜任BFF么？

  • 语言层面，Node.js是完备的，足够胜任BFF的主要场景。
  • BFF要求服务自治，但不限制技术选型。
  • 缺“沉淀”
    基础设施的建设和完善
    最佳实践的沉淀和积累
    人员能力平均水平的提升

做的沉淀：

  • 框架: Egg && 插件生态
    统一开发约束，降低团队的沟通成本
  • 中间件服务
    融入后端生态。分布式配置，缓存，限流，熔断。。。
  • 平台能力
    AliNode问题定位，TNPM包管理，研发管控平台，应用治理。。。
  • BaaS服务
    常用能力下沉，如渲染服务，消息服务，文件服务，构建服务

遇到的问题：

  • 学习成本
    额外的服务端，运维相关知识的学习成本
  • 治理成本
    依赖升级，锁版本，中间件服务跨语言SDK的维护成本
  • 招人难
    大爆炸时代，前端设计的领域太多，人员储备不够，培养成本高
  • 资源利用率
    BFF通常的水位较低（< 30%）微服务的高可用诉求，导致资源浪费
    在这里插入图片描述

Serverless For Frontend
为高效地开发人机交互界面提供无感的服务能力
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
接口模型标准化
在这里插入图片描述

  • 元数据 -> 前端SDK
    自动生成前端Client SDK
    屏蔽终端兼容性
    屏蔽协议细节
  • 元数据 -> 后端SDK
    自动生成后端SDK
    屏蔽协议细节：不管是后端TR服务，DB服务，通通标准化为BaaS的调用方式
  • 服务编排能力
  • 压测 + 容量评估
    自动生成压测脚本
    配合Serverless自动扩缩容
    即可预估峰值容量
  • And More…
    自动生成接口文档
    Mock接口
    在线调试接口
    自动生成回归测试数据

Serverless 免运维

  • 支持k8s, FC等Serverless引擎
  • 根据流量自动扩缩容，精细化部署，高密度部署
  • Servicemesh降低中间件服务的异构语言 SDK 维护成本
  • 标准化的Serverless YML
    在这里插入图片描述
8. 云凤蝶可视化搭建的推导与实现

文档：https://www.yuque.com/seeconf/2020/yunfengdie#7Ipxc
云凤蝶：面向中后台产品的快速研发平台

云凤蝶技术实现：
在这里插入图片描述

  1. 组件识别与导入
    在这里插入图片描述
    在这里插入图片描述
1.组件导入功能：
  • 一方面云凤蝶会采用 TypeScript 当做 Parser 来分析 npm 包的类型信息得到组件元信息
  • 另一方面云凤蝶会用 Webpack 来二次构建你的 npm 包得到一个可执行的组件入口文件，最终运行时则会采用 SystemJS 来加载这些组件，并且灌入用户的配置数据完成渲染。
2. 组件拖拽与组合

第一种流派：DSL流派
像下面的 SwiftUI 这种的，半边屏幕是写代码的，半边屏幕是拖拽视图的，两者之间双向等价转换，用户可以按自己的口味选择。
缺点：
对用户的专业技能要求高，学习成本比较高
优点：
一旦熟练之后，确实效率杠杠的，因为本质上就是在写代码了。
在这里插入图片描述
第二种流派：半自由流派（Flex 流式的编排或者 Grid 栅格网格式的编排）
优点：
在特定的垂直场景下非常高效，比如：一行一行排版的 Form 表单
缺点：
适用的场景比较有限
在这里插入图片描述
第三种流派：自由画布（类似设计师用的 Sketch，PD 用的 Keynote 那样的自由编辑模式）
在这里插入图片描述
云凤蝶自由画布之道：分层模型：https://zhuanlan.zhihu.com/p/97768853
云凤蝶如何打造媲美 sketch 的自由画布：
https://zhuanlan.zhihu.com/p/92469406
在这里插入图片描述

  • 云凤蝶会依靠“位置直接被包含”的一个算法去识别出组件树。

  • 这个算法的最核心原理就是基于一个非常简单的判定：每个组件都是一个矩形盒子，如果一个组件的矩形盒子面积直接被另一个组件的矩形盒子包含了，那我们就认为它们是直接父子关系。

  • 第二个问题是自由拖拽摆放从用户的感受上来说是它绝对定位的

  • 那么运行时如何转换为 CSS 的相对定位呢？毕竟在运行时我们还是要还原成一个普通的自适应的 Web 页面的。

  • 这里依赖的原理则是另一个“行列格式化”的算法，它是指将一个页面里面摆放的所有元素进行从顶向下递归的行列切分，像切豆腐一样，将一个巨大的页面分割为一个一个的小行列，这样大的绝对定位就化解为小的局部的相对定位了。

3. 组件配置与扩展

在这里插入图片描述
第一类所谓“横向“扩展

  • 就是指云凤蝶会用 HOC 高阶组件的原理去包裹原始组件，给它附加非常多它本身并不具备的一些通用高阶能力
  • 比如链接跳转，悬浮提示，loading，条件渲染，重复等等。

第二个所谓”纵向“扩展

  • 是指云凤蝶采用了一套实体 Loader 的机制去扩展属性值类型，也就是在云凤蝶属性面板上，你除了可以配置 JavaScript 基本类型，比如字符串，数字等等，还可以配置许多特殊的”实体“类型
  • 如：
    • 数据绑定：属性的值既可以是静态的数据，也可以是动态的来自某个变量，或者来自服务端
    • 图片素材库：图片地址可以是静态，也可以从第三方素材库挑选
    • 国际化文案
    • iconfont
    • …

云凤蝶的 Runtime 也就是运行时，会递归地扫描组件的属性配置数据，调用对应的实体 Loader 进行翻译。

4. 组件布局自适应

云凤蝶在调研过后设计了一套类似 ios AutoLayout 的规则系统

为什么云凤蝶不直接采用 CSS 布局体系？

我们主要的考虑是因为两点：

  • CSS 由于它的不成交性和多范式 （所谓多范式，是指它多版本更迭而且一直向下兼容，新老体系共存导致实现一个功能有多种解决方案），它还是过于复杂了。
  • 而实际需求上中后台场景的布局模式相对收敛，可能用不上整套 CSS 的强大能力。
5. 组件状态与联动

在这里插入图片描述
在这里插入图片描述

9. "云"端的语雀 — 用 JavaScript 全栈打造商业级应用

文档：https://zhuanlan.zhihu.com/p/101917567

10. 蚂蚁金服 Web 3D 技术探索之路

互联网产品游戏化
业务背景：

  • 业务视角：提升业务的趣味性和商业转化数据
  • 技术视角：储备3D图形技术的开发能力

技术调研：

  • Web-based（three.js, babylon.js）
    非移动优先
    工作流太弱
  • Native-based（unity, Unreal Engine ）
    非Web优先
    上手成本过高

自研3D引擎： Oasis 3D

  • 以Web为基础，面向前端工程师
  • 移动优先，极致性能
  • 适合蚂蚁金服的业务与技术发展
Oasis 3D引擎

官网文档：https://oasis-engine.github.io/#/

  • 架构
  • 渲染
  • 动画

架构
在这里插入图片描述
在这里插入图片描述
渲染
在这里插入图片描述
动画
在这里插入图片描述
Oasis 3D引擎总结：

  • 微内核架构，组件式扩展
  • glTF2.0及配套PBR材质支持
  • 丰富多样的动画系统

Oasis 3D工作流

  • 资产： 资产云端标准化，打通资产市场
  • 编排： 能力编排和动画编排可视化
  • 协作： 与设计和前端开发顺畅协作

在这里插入图片描述

11. 精雕细琢，打造极致可视化体验

在这里插入图片描述

AntV
  • 架构升级——G2 4.0
  • 打磨图表细节体验——G2Plot

架构升级 G2 4.0
https://github.com/antvis/G2Plot
G2 4.0
在这里插入图片描述

约束布局

Auto Padding vs 约束布局
在这里插入图片描述
约束布局
在这里插入图片描述
在这里插入图片描述
约束布局：

  • 将画布布局问题转化为数学问题
  • 解除了组件依赖关系带来的代码耦合
  • 强大的布局能力，是响应式图表的基础

约束布局可以解决图表在静态绘制上的带来的遮挡，裁剪等体验问题

交互语法
在这里插入图片描述
在这里插入图片描述

神小夜
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
SEE Conf 2022 第五届支付宝体验科技大会PPT合集（33份）.zip
05-21
SEE Conf 2022 第五届支付宝体验科技大会PPT合集（33份）。 打造沉浸编排体验图编辑器搭建策略 当我们在 Web 里跑起了小程序 基于用户UI偏好的个性化展示探索 可视化叙事的探索与应用 跨端智能在蚂蚁的应用 蚂蚁链前端在区块链领域的探索 蚂蚁前后端联调的一些实践 蚂蚁森林里的游戏化设计 前端轻研发实践 让你喜欢支付宝多一点 如何打造高质量的 Electron 应用 如何打造业务专属的CAN I USE 如何提升 B 端工具型产品自助率 如何制作一个媲美原生体验的选择器 设计工程化三部曲 探索中后台设计提效次时代 提效神奇 Design Token 的探索与应用 通过减少 draw call 提升渲染性能 图可视化有点意思 小程序构建与函数计算 新宇宙、新挑战、新设计 移动端的真实感渲染 营销场景下互动技术的应用与探索 由数据到洞察：基⾦图数据可视化分析的实践与思考 余额宝品牌年轻化实验 云原生架构下蚂蚁 Cloud IDE 的应用实践 在线时代先进文档编辑器设计探索 支付宝地推的设计故事-商服作业 CRM 设计 ⼀种秒级安装 npm 的⽅式 等等文档共33份。
SEE Conf 大会直播邀请函丨体验技术风向标
蚂蚁金服技术团队
12-24 1781
蚂蚁金服体验科技大会（SEEConf），是由蚂蚁金服体验科技举办的，集专业分享、产品展台、Workshop 等内容于一身的科技盛筵。SEE 是 Seeking Experience & Engineering 的缩写，意为探索用户体验与工程实践。我们希望通过 SEE Conf, 与业界同行一起分享交流体验科技的当前进展，探讨切磋体验科技的未来发展，共同努力促进体验设计与技术的开放，让生态繁...
第三届 SEE Conf 2020 视频回放 && PPT
禅思院
01-15 1423
第三届 SEE Conf 2020 视频回放 && PPT 会议介绍 SEE Conf 是蚂蚁金服体验科技大会，是一个“看见者的大会”，希望技术能看见设计的价值，希望设计能看见技术的力量，彼此看见中互相融合成长，一起让世界更美好。 官网 https://seeconf.antfin.com/ 资料 参与知乎互动，https://www.zhihu.com/que...
SEEConf_体验一起造_白龙
01-08
蚂蚁金服 SEE Conf 2018-01-06 ppt 体验一起造_白龙
SEEConf_AntV返璞归真幻化万千可视化表达
01-08
蚂蚁金服 SEE Conf 2018 ppt - 05 AntV返璞归真幻化万千可视化表达_绝云&御术.pdf
MySQL主从配置学习笔记
12-14
● 本打算买个云数据，为我的新项目做点安全保障。阿里云，腾讯云转了一圈，两个字太贵。不就数据有备份吗，既然这样那我不如...修改mysql配置文件，一般在/etc/mysql/my.conf server-id=1 //设置mysql的id标识 log-bi
蚂蚁金服 SEE Conf 2018 ppt 合集
01-08
蚂蚁金服 SEE Conf 2018 ppt 合集 包含活动当天所有演讲的 ppt 内容
2020 SEE Conf 蚂蚁金服体验科技大会PPT汇总.zip
10-13
2020 SEE Conf 蚂蚁金服体验科技大会PPT汇总，共17份。 SEE Conf 是蚂蚁金服体验科技大会，是一个“看见者的大会”，希望技术能看见设计的价值，希望设计能看见技术的力量，彼此看见中互相融合成长，一起让世界更...
蚂蚁金服 SEE Conf 2018 PPT - TWA的理念与实践
01-08
蚂蚁金服 SEE Conf 2018 蚂蚁金服 SEE Conf 2018 PPT - TWA的理念与实践_不四.pdf
.NET Conf China 2020讲师 PDF
01-05
.NET Conf China 2020讲师 PDF
SEEConf_从前端技术到体验科技_玉伯
01-08
蚂蚁金服 SEE Conf 2018 从前端技术到体验科技_玉伯.pdf
SEEConf_蚂蚁开发者工具
01-08
蚂蚁金服 SEE Conf 2018-01-06 SEEConf_蚂蚁开发者工具
蚂蚁金服 SEE Conf 2018 PPT - Ant_Design_背后的故事
01-08
2018-1-06 蚂蚁金服 SEE Conf 2018 PPT 01_SEEConf_Ant_Design_背后的故事_勺子.pdf
SEE Conf 支付宝体验科技大会（2018年第一届-2022年第五届）PPT合集（83份）.zip
05-22
SEE Conf 支付宝体验科技大会（2018年第一届-2022年第五届）PPT合集（83份）。 SEE Conf 2022 第五届支付宝体验科技大会PPT合集（33份） SEE Conf 2021 第四届支付宝体验科技大会PPT合集（15份） SEE Conf 2020 第三届支付宝体验科技大会PPT合集（16份） SEE Conf 2019 第二届支付宝体验科技大会PPT合集（9份） SEE Conf 2018 第一届支付宝体验科技大会PPT合集（8份） 共83份PPT文档资料。
node-v9.6.0-x86.msi
04-29
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
Python基于机器学习的分布式系统故障诊断系统源代码，分布式系统的故障数据进行分析，设计故障诊断模型，高效地分析并识别故障类别
04-29
基于技术手段（包括但不限于机器学习、深度学习等技术）对分布式系统的故障数据进行分析，设计故障诊断模型，高效地分析并识别故障类别，实现分布式系统故障运维的智能化，快速恢复故障的同时大大降低分布式系统运维工作的难度，减少运维对人力资源的消耗。在分布式系统中某个节点发生故障时，故障会沿着分布式系统的拓扑结构进行传播，造成自身节点及其邻接节点相关的KPI指标和发生大量日志异常
JavaScript前端开发的核心语言前端开发的核心语言
最新发布
04-29
javascript 当今互联网时代，JavaScript已经成为了前端开发的核心语言它是一种高级程序设计语言，通常用于网页的交互和动态效果的实现。JavaScript的灵活性以及广泛的使用使得它变得异常重要，能够为用户带来更好的用户体验。 JavaScript的特点之一是它的轻量级，它可以在网页中运行无需单独的编译或下载。这意味着网页可以更快地加载并且用户无需安装额外的软件才能运行网页上的JavaScript代码。此外，与HTML和CSS紧密结合，可以直接在HTML文档中嵌入，使得网页的开发变得非常便捷。 JavaScript具有动态性，它可以在浏览器中实时修改页面内容和样。它可以通过操作DOM（文档对象模型来动态地修改网页的结构和布局，并且可以根据用户的行为实时地响应各种事件，如点击、标悬停、滚动等。这使得开发者可以轻松地为网页添加交互性和动态效果，提供更好的用户体验。 JavaScript也是一种面向对象的语言。它支持对象、类、继承、多态等面向对象编程的概念，使得代码结构更加清晰和可维护。开发者可以创建自定义的对象和方法，对功能进行封装和复用，提高代码的可读性和可维护性。
四则运算自动生成程序安装包
04-29
四则运算自动生成程序安装包
基于Linux的私有文件服务器(网盘).zip
04-29
基于Linux的私有文件服务器(网盘)
尚硅谷redis学习笔记
09-08
尚硅谷是一个教育机构，他们提供了一份关于Redis的学习笔记。根据提供的引用内容，我们可以了解到他们提到了一些关于Redis配置和使用的内容。 首先，在引用中提到了通过执行命令"vi /redis-6.2.6/redis.conf"来编辑...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

神小夜

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值