Download - CardKit & DOMO UI - 移动时代技术与设计的十字路口
![Page 1: CardKit & DOMO UI - 移动时代技术与设计的十字路口](https://reader030.vdocuments.pub/reader030/viewer/2022012318/54b7a9854a795993718b490a/html5/thumbnails/1.jpg)
移动时代技术与设计的十字路口 �
CardKit � & � DOMO � UI � !
蒙晨 � � 杨扬 � � 2014.04
![Page 2: CardKit & DOMO UI - 移动时代技术与设计的十字路口](https://reader030.vdocuments.pub/reader030/viewer/2022012318/54b7a9854a795993718b490a/html5/thumbnails/2.jpg)
![Page 3: CardKit & DOMO UI - 移动时代技术与设计的十字路口](https://reader030.vdocuments.pub/reader030/viewer/2022012318/54b7a9854a795993718b490a/html5/thumbnails/3.jpg)
主讲人介绍
蒙晨(波希米亚) � 豆瓣资深交互设计师,参与过多个项目,现
主要负责豆瓣网移动化项目。曾任新浪微博
交互设计主管,负责新版微博信息架构交互
设计,国内早期的微博交互设计师。 �
前Yahoo! � UED交互设计师。 �
!http://blog.b3inside.com �
http://douban.com/people/bohemia �
http://weibo.com/b3inside
![Page 4: CardKit & DOMO UI - 移动时代技术与设计的十字路口](https://reader030.vdocuments.pub/reader030/viewer/2022012318/54b7a9854a795993718b490a/html5/thumbnails/4.jpg)
公司、产品和项目的需求
• 豆瓣在传统web上的深厚积累和丰富内容 �
• 产品线多,既有内容(媒体性)又有功能(工具性) �
• 资源有限,产品迭代快,对开发和维护成本有要求
起因和需求
![Page 5: CardKit & DOMO UI - 移动时代技术与设计的十字路口](https://reader030.vdocuments.pub/reader030/viewer/2022012318/54b7a9854a795993718b490a/html5/thumbnails/5.jpg)
什么方法? 如何运转? 实际应用?
![Page 6: CardKit & DOMO UI - 移动时代技术与设计的十字路口](https://reader030.vdocuments.pub/reader030/viewer/2022012318/54b7a9854a795993718b490a/html5/thumbnails/6.jpg)
什么方法? 如何运转?
设计
技术
实际应用?
![Page 7: CardKit & DOMO UI - 移动时代技术与设计的十字路口](https://reader030.vdocuments.pub/reader030/viewer/2022012318/54b7a9854a795993718b490a/html5/thumbnails/7.jpg)
从设计出发
![Page 8: CardKit & DOMO UI - 移动时代技术与设计的十字路口](https://reader030.vdocuments.pub/reader030/viewer/2022012318/54b7a9854a795993718b490a/html5/thumbnails/8.jpg)
什么方法
01
![Page 9: CardKit & DOMO UI - 移动时代技术与设计的十字路口](https://reader030.vdocuments.pub/reader030/viewer/2022012318/54b7a9854a795993718b490a/html5/thumbnails/9.jpg)
?
![Page 10: CardKit & DOMO UI - 移动时代技术与设计的十字路口](https://reader030.vdocuments.pub/reader030/viewer/2022012318/54b7a9854a795993718b490a/html5/thumbnails/10.jpg)
![Page 11: CardKit & DOMO UI - 移动时代技术与设计的十字路口](https://reader030.vdocuments.pub/reader030/viewer/2022012318/54b7a9854a795993718b490a/html5/thumbnails/11.jpg)
适合移动 �
浏览器 �
App内嵌 �
跨平台 �
全部内容
![Page 12: CardKit & DOMO UI - 移动时代技术与设计的十字路口](https://reader030.vdocuments.pub/reader030/viewer/2022012318/54b7a9854a795993718b490a/html5/thumbnails/12.jpg)
Web � App
Mobile
![Page 13: CardKit & DOMO UI - 移动时代技术与设计的十字路口](https://reader030.vdocuments.pub/reader030/viewer/2022012318/54b7a9854a795993718b490a/html5/thumbnails/13.jpg)
![Page 14: CardKit & DOMO UI - 移动时代技术与设计的十字路口](https://reader030.vdocuments.pub/reader030/viewer/2022012318/54b7a9854a795993718b490a/html5/thumbnails/14.jpg)
无需安装 �
获取内容更快捷 �
功能完整 �
产品间互通 �
UI/交互统一 �
跨平台
![Page 15: CardKit & DOMO UI - 移动时代技术与设计的十字路口](https://reader030.vdocuments.pub/reader030/viewer/2022012318/54b7a9854a795993718b490a/html5/thumbnails/15.jpg)
需要注意
无法控制访问路径(谁都可能是Landing � page)
![Page 16: CardKit & DOMO UI - 移动时代技术与设计的十字路口](https://reader030.vdocuments.pub/reader030/viewer/2022012318/54b7a9854a795993718b490a/html5/thumbnails/16.jpg)
设计思想
一切元素都是积木
![Page 17: CardKit & DOMO UI - 移动时代技术与设计的十字路口](https://reader030.vdocuments.pub/reader030/viewer/2022012318/54b7a9854a795993718b490a/html5/thumbnails/17.jpg)
设计思想
简单,易理解 �
高效,快速搭建 �
品质,一致性体验
![Page 18: CardKit & DOMO UI - 移动时代技术与设计的十字路口](https://reader030.vdocuments.pub/reader030/viewer/2022012318/54b7a9854a795993718b490a/html5/thumbnails/18.jpg)
![Page 19: CardKit & DOMO UI - 移动时代技术与设计的十字路口](https://reader030.vdocuments.pub/reader030/viewer/2022012318/54b7a9854a795993718b490a/html5/thumbnails/19.jpg)
Douban Mobile
![Page 20: CardKit & DOMO UI - 移动时代技术与设计的十字路口](https://reader030.vdocuments.pub/reader030/viewer/2022012318/54b7a9854a795993718b490a/html5/thumbnails/20.jpg)
![Page 21: CardKit & DOMO UI - 移动时代技术与设计的十字路口](https://reader030.vdocuments.pub/reader030/viewer/2022012318/54b7a9854a795993718b490a/html5/thumbnails/21.jpg)
如何运转 � 之 � 「协作」
02
![Page 22: CardKit & DOMO UI - 移动时代技术与设计的十字路口](https://reader030.vdocuments.pub/reader030/viewer/2022012318/54b7a9854a795993718b490a/html5/thumbnails/22.jpg)
这样注释有效吗?
标注的错误使用
![Page 23: CardKit & DOMO UI - 移动时代技术与设计的十字路口](https://reader030.vdocuments.pub/reader030/viewer/2022012318/54b7a9854a795993718b490a/html5/thumbnails/23.jpg)
结构与样式分离
有效的标注
Layout Style
![Page 24: CardKit & DOMO UI - 移动时代技术与设计的十字路口](https://reader030.vdocuments.pub/reader030/viewer/2022012318/54b7a9854a795993718b490a/html5/thumbnails/24.jpg)
结构与样式分离
有效的标注
Layout Style
![Page 25: CardKit & DOMO UI - 移动时代技术与设计的十字路口](https://reader030.vdocuments.pub/reader030/viewer/2022012318/54b7a9854a795993718b490a/html5/thumbnails/25.jpg)
抽象化的结构
有效的标注
Layout Style
![Page 26: CardKit & DOMO UI - 移动时代技术与设计的十字路口](https://reader030.vdocuments.pub/reader030/viewer/2022012318/54b7a9854a795993718b490a/html5/thumbnails/26.jpg)
不是注释,而是结构 �
少些外观,多些模式
标注
![Page 27: CardKit & DOMO UI - 移动时代技术与设计的十字路口](https://reader030.vdocuments.pub/reader030/viewer/2022012318/54b7a9854a795993718b490a/html5/thumbnails/27.jpg)
实现高效并行协作
![Page 28: CardKit & DOMO UI - 移动时代技术与设计的十字路口](https://reader030.vdocuments.pub/reader030/viewer/2022012318/54b7a9854a795993718b490a/html5/thumbnails/28.jpg)
建立UI模式库
高效协作
Architecture Component Pattern Library
![Page 29: CardKit & DOMO UI - 移动时代技术与设计的十字路口](https://reader030.vdocuments.pub/reader030/viewer/2022012318/54b7a9854a795993718b490a/html5/thumbnails/29.jpg)
应用UI模式库提升效率
高效协作
BrowserWireframePatterns
![Page 30: CardKit & DOMO UI - 移动时代技术与设计的十字路口](https://reader030.vdocuments.pub/reader030/viewer/2022012318/54b7a9854a795993718b490a/html5/thumbnails/30.jpg)
以DOMO � UI为基础, �
工程师对照原型线框图,拼装页面
高效协作
![Page 31: CardKit & DOMO UI - 移动时代技术与设计的十字路口](https://reader030.vdocuments.pub/reader030/viewer/2022012318/54b7a9854a795993718b490a/html5/thumbnails/31.jpg)
实际应用?
技术
设计
什么方法? 如何运转?
![Page 32: CardKit & DOMO UI - 移动时代技术与设计的十字路口](https://reader030.vdocuments.pub/reader030/viewer/2022012318/54b7a9854a795993718b490a/html5/thumbnails/32.jpg)
杨扬(dexteryy) � https://github.com/dexteryy �
!• 豆瓣前端工程师 �
• 前土豆网「前端总工程师」 �
• 从06年开始做前端开发和JS开发 �
• 阿尔法城客户端开发者 �
• OzJS, � Ozma, � DollarJS, � NervJS, � EventMaster, � … �
主讲人介绍
![Page 33: CardKit & DOMO UI - 移动时代技术与设计的十字路口](https://reader030.vdocuments.pub/reader030/viewer/2022012318/54b7a9854a795993718b490a/html5/thumbnails/33.jpg)
从技术出发
![Page 34: CardKit & DOMO UI - 移动时代技术与设计的十字路口](https://reader030.vdocuments.pub/reader030/viewer/2022012318/54b7a9854a795993718b490a/html5/thumbnails/34.jpg)
如何运转 � 之 � 「实现」
03
![Page 35: CardKit & DOMO UI - 移动时代技术与设计的十字路口](https://reader030.vdocuments.pub/reader030/viewer/2022012318/54b7a9854a795993718b490a/html5/thumbnails/35.jpg)
重新思考传统web技术
![Page 36: CardKit & DOMO UI - 移动时代技术与设计的十字路口](https://reader030.vdocuments.pub/reader030/viewer/2022012318/54b7a9854a795993718b490a/html5/thumbnails/36.jpg)
![Page 37: CardKit & DOMO UI - 移动时代技术与设计的十字路口](https://reader030.vdocuments.pub/reader030/viewer/2022012318/54b7a9854a795993718b490a/html5/thumbnails/37.jpg)
起家本领 � 内容展现
文档
低级语义
起源低级结构
HTML5?
布局
结构≠表现≠行为
语义
久经考验
![Page 38: CardKit & DOMO UI - 移动时代技术与设计的十字路口](https://reader030.vdocuments.pub/reader030/viewer/2022012318/54b7a9854a795993718b490a/html5/thumbnails/38.jpg)
起家本领 � 内容展现
文档
低级语义
起源低级结构
HTML5?
布局
结构≠表现≠行为
语义
久经考验
万能交互 � 链接+文档(+少量表单控件)
粒度粗 交互重
使用成本上下文
情景
服务器端
AJAX?过于亲密
声明式
基本需求 开发成本
生命周期短 状态少
唯一标识符
标记语言
设计成本
![Page 39: CardKit & DOMO UI - 移动时代技术与设计的十字路口](https://reader030.vdocuments.pub/reader030/viewer/2022012318/54b7a9854a795993718b490a/html5/thumbnails/39.jpg)
起家本领 � 内容展现
文档
低级语义
起源低级结构
HTML5?
布局
结构≠表现≠行为
语义
久经考验
万能交互 � 链接+文档(+少量表单控件)
粒度粗 交互重
使用成本上下文
情景
服务器端
AJAX?过于亲密
声明式
基本需求 开发成本
生命周期短 状态少
唯一标识符
标记语言
设计成本
动态语言和配置语言 � UI的快速实现、修改和调试
从零开始 丢弃重写
业务需求->UI实现
UI实现->内容描述MV*?
灵活
画笔 随心所欲按需实现
不怕改版
![Page 40: CardKit & DOMO UI - 移动时代技术与设计的十字路口](https://reader030.vdocuments.pub/reader030/viewer/2022012318/54b7a9854a795993718b490a/html5/thumbnails/40.jpg)
起家本领 � 内容展现
文档
低级语义
起源低级结构
HTML5?
布局
结构≠表现≠行为
语义
久经考验
万能交互 � 链接+文档(+少量表单控件)
粒度粗 交互重
使用成本上下文
情景
服务器端
AJAX?过于亲密
声明式
基本需求 开发成本
生命周期短 状态少
唯一标识符
标记语言
设计成本
动态语言和配置语言 � UI的快速实现、修改和调试
从零开始 丢弃重写
业务需求->UI实现
UI实现->内容描述MV*?
灵活
画笔 随心所欲按需实现
不怕改版
无状态的入口(URL) � 自由传播/随时访问/按需获取/及时更新
访问路径
全局上下文
网状结构杀手级特性
![Page 41: CardKit & DOMO UI - 移动时代技术与设计的十字路口](https://reader030.vdocuments.pub/reader030/viewer/2022012318/54b7a9854a795993718b490a/html5/thumbnails/41.jpg)
起家本领 � 内容展现
文档
低级语义
起源低级结构
HTML5?
布局
结构≠表现≠行为
语义
久经考验
万能交互 � 链接+文档(+少量表单控件)
粒度粗 交互重
使用成本上下文
情景
服务器端
AJAX?过于亲密
声明式
基本需求 开发成本
生命周期短 状态少
唯一标识符
标记语言
设计成本
动态语言和配置语言 � UI的快速实现、修改和调试
从零开始 丢弃重写
业务需求->UI实现
UI实现->内容描述MV*?
灵活
画笔 随心所欲按需实现
不怕改版
无状态的入口(URL) � 自由传播/随时访问/按需获取/及时更新
访问路径
全局上下文
网状结构杀手级特性
跨平台 � 真有这种东西吗?
控制力 次等公民
渐进增强平稳退化
入乡随俗
厂商节操平台无关
开放 互通 混搭
标准化 无处不在
![Page 42: CardKit & DOMO UI - 移动时代技术与设计的十字路口](https://reader030.vdocuments.pub/reader030/viewer/2022012318/54b7a9854a795993718b490a/html5/thumbnails/42.jpg)
文档
低级语义
起源低级结构
HTML5?
粒度粗 交互重
使用成本上下文
情景
服务器端
AJAX?过于亲密
从零开始 丢弃重写
业务需求->UI实现
UI实现->内容描述MV*?
访问路径
全局上下文
网状结构
控制力 次等公民
渐进增强平稳退化
入乡随俗
厂商节操
布局
结构≠表现≠行为
语义
久经考验
声明式
基本需求 开发成本
生命周期短 状态少
唯一标识符
标记语言
设计成本
灵活
画笔 随心所欲按需实现
不怕改版
杀手级特性
平台无关
开放 互通 混搭
标准化 无处不在
专注单⼀一内容⾼高频互动 快速反馈
过渡效果 独⽴立于后端
成熟模式 流⾏行模式复杂交互 创新交互
迎合现状 噱头资源有限竞争激烈
⽤用户期望
更丰富 更抽象进⼀一步分离
![Page 43: CardKit & DOMO UI - 移动时代技术与设计的十字路口](https://reader030.vdocuments.pub/reader030/viewer/2022012318/54b7a9854a795993718b490a/html5/thumbnails/43.jpg)
现状是……
![Page 44: CardKit & DOMO UI - 移动时代技术与设计的十字路口](https://reader030.vdocuments.pub/reader030/viewer/2022012318/54b7a9854a795993718b490a/html5/thumbnails/44.jpg)
现状是……
WAP � Style
![Page 45: CardKit & DOMO UI - 移动时代技术与设计的十字路口](https://reader030.vdocuments.pub/reader030/viewer/2022012318/54b7a9854a795993718b490a/html5/thumbnails/45.jpg)
现状是……
WAP � Style
MVP � Style
![Page 46: CardKit & DOMO UI - 移动时代技术与设计的十字路口](https://reader030.vdocuments.pub/reader030/viewer/2022012318/54b7a9854a795993718b490a/html5/thumbnails/46.jpg)
现状是……
WAP � Style
MVP � Style
Responsive � Style
![Page 47: CardKit & DOMO UI - 移动时代技术与设计的十字路口](https://reader030.vdocuments.pub/reader030/viewer/2022012318/54b7a9854a795993718b490a/html5/thumbnails/47.jpg)
现状是……
WAP � Style
MVP � Style
Responsive � Style
SPA � Style
![Page 48: CardKit & DOMO UI - 移动时代技术与设计的十字路口](https://reader030.vdocuments.pub/reader030/viewer/2022012318/54b7a9854a795993718b490a/html5/thumbnails/48.jpg)
现状是……
WAP � Style
MVP � Style
Responsive � Style
SPA � Style
Rich � Media/Innovative � Tools
![Page 49: CardKit & DOMO UI - 移动时代技术与设计的十字路口](https://reader030.vdocuments.pub/reader030/viewer/2022012318/54b7a9854a795993718b490a/html5/thumbnails/49.jpg)
如果能……
?WAP � Style
MVP � Style
Responsive � Style
SPA � Style
![Page 51: CardKit & DOMO UI - 移动时代技术与设计的十字路口](https://reader030.vdocuments.pub/reader030/viewer/2022012318/54b7a9854a795993718b490a/html5/thumbnails/51.jpg)
• 积木:用组件封装UI/交互模式 �
• 配置:更高抽象层级的标记语言 �
• 分离:实现的不同层级
CardKit技术与设计的共同解决方案
![Page 52: CardKit & DOMO UI - 移动时代技术与设计的十字路口](https://reader030.vdocuments.pub/reader030/viewer/2022012318/54b7a9854a795993718b490a/html5/thumbnails/52.jpg)
• 积木:用组件封装UI/交互模式 �
• 配置:更高抽象层级的标记语言 �
• 分离:实现的不同层级
CardKit技术与设计的共同解决方案
![Page 53: CardKit & DOMO UI - 移动时代技术与设计的十字路口](https://reader030.vdocuments.pub/reader030/viewer/2022012318/54b7a9854a795993718b490a/html5/thumbnails/53.jpg)
积木:用组件封装UI/交互模式
CardKit
![Page 54: CardKit & DOMO UI - 移动时代技术与设计的十字路口](https://reader030.vdocuments.pub/reader030/viewer/2022012318/54b7a9854a795993718b490a/html5/thumbnails/54.jpg)
积木:用组件封装UI/交互模式
CardKit
![Page 55: CardKit & DOMO UI - 移动时代技术与设计的十字路口](https://reader030.vdocuments.pub/reader030/viewer/2022012318/54b7a9854a795993718b490a/html5/thumbnails/55.jpg)
卡片组件——信息组织模式
![Page 56: CardKit & DOMO UI - 移动时代技术与设计的十字路口](https://reader030.vdocuments.pub/reader030/viewer/2022012318/54b7a9854a795993718b490a/html5/thumbnails/56.jpg)
更多卡片组件
• 容器卡片(Box) �
• 列表卡片(List) �
• 摘要卡片(Mini) �
• 表单卡片(Form)
核心模式
• 视图卡片(Page)
![Page 57: CardKit & DOMO UI - 移动时代技术与设计的十字路口](https://reader030.vdocuments.pub/reader030/viewer/2022012318/54b7a9854a795993718b490a/html5/thumbnails/57.jpg)
• deck: “navdrawer” • isPageActive!• isDeckActive!• cardId: “myNavCard” • blankText: “coming soon…”
• title!• actionbar!• nav!• banner!• blank
• box!• list!• mini!• form
• subtype: “menu” • blankText!• limit!• col!• paperStyle: false!• plainStyle: true
• hd!• ft!• item
• link: “#defaultCard”
• “Index”
page
卡片组件的基本元素• 状态 � (state):HTML属性或自定义Getter/Setter �
• 内容 � (content):普通HTML或文本节点 �
• 子组件 � (component):作为「零件」或作为「内容」 �
• 脚本 � (darkscript): � 执行时间和上下文不同的普通JS
• <div class="my-navdrawer">...
![Page 58: CardKit & DOMO UI - 移动时代技术与设计的十字路口](https://reader030.vdocuments.pub/reader030/viewer/2022012318/54b7a9854a795993718b490a/html5/thumbnails/58.jpg)
交互组件/控件• 状态控件(Control) �
• 取值控件(Picker) �
• 浮层控件(Overlay)
on / enable
off / disable
.ck-switch .ck-post-button .ck-foldercontrol
.ck-segment .ck-tagselector .ck-actions
.ck-select
![Page 59: CardKit & DOMO UI - 移动时代技术与设计的十字路口](https://reader030.vdocuments.pub/reader030/viewer/2022012318/54b7a9854a795993718b490a/html5/thumbnails/59.jpg)
actionViewmodalView
交互组件/控件• 状态控件(Control) �
• 取值控件(Picker) �
• 浮层控件(Overlay)
![Page 60: CardKit & DOMO UI - 移动时代技术与设计的十字路口](https://reader030.vdocuments.pub/reader030/viewer/2022012318/54b7a9854a795993718b490a/html5/thumbnails/60.jpg)
• 积木:用组件封装UI/交互模式 �
• 配置:更高抽象层级的标记语言 �
• 分离:实现的不同层级
CardKit技术与设计的共同解决方案
![Page 61: CardKit & DOMO UI - 移动时代技术与设计的十字路口](https://reader030.vdocuments.pub/reader030/viewer/2022012318/54b7a9854a795993718b490a/html5/thumbnails/61.jpg)
• 描述内容 �
• 描述界面 �
• 描述功能
传统HTML语义
![Page 62: CardKit & DOMO UI - 移动时代技术与设计的十字路口](https://reader030.vdocuments.pub/reader030/viewer/2022012318/54b7a9854a795993718b490a/html5/thumbnails/62.jpg)
更抽象的语义
• 描述内容 �
• 描述界面 �
• 描述功能 �
• 描述组件
![Page 63: CardKit & DOMO UI - 移动时代技术与设计的十字路口](https://reader030.vdocuments.pub/reader030/viewer/2022012318/54b7a9854a795993718b490a/html5/thumbnails/63.jpg)
• subtype: “grid” • blankText!• limit!• col: 3!• paperStyle: false!• plainStyle: true
• hd!• ft!• item
list � card
把HTML看做配置仍然用声明式风格搭建UI、设定交互和组织信息
![Page 64: CardKit & DOMO UI - 移动时代技术与设计的十字路口](https://reader030.vdocuments.pub/reader030/viewer/2022012318/54b7a9854a795993718b490a/html5/thumbnails/64.jpg)
a[href=“#console”]
a[href=“#consoleCard”]
a[href=“#usage”]a[href=“#ckNavdrawer”]
a[href=“#ckDefault”]
a[href=“#ckDefault”]
#usage
链接仍然是基本交互
![Page 65: CardKit & DOMO UI - 移动时代技术与设计的十字路口](https://reader030.vdocuments.pub/reader030/viewer/2022012318/54b7a9854a795993718b490a/html5/thumbnails/65.jpg)
=
on
off
交互组件 � 只是不同的皮肤和事件代理
单例工厂 � 同一个DOM对象总是获得
同一个Control实例
![Page 66: CardKit & DOMO UI - 移动时代技术与设计的十字路口](https://reader030.vdocuments.pub/reader030/viewer/2022012318/54b7a9854a795993718b490a/html5/thumbnails/66.jpg)
运行时 � DOM对象即组件对象
脚本 � 响应事件 �
修改状态 �
扩展组件
组件行为 � 不通过扩展方法 �
而是通过状态转移
OR
![Page 67: CardKit & DOMO UI - 移动时代技术与设计的十字路口](https://reader030.vdocuments.pub/reader030/viewer/2022012318/54b7a9854a795993718b490a/html5/thumbnails/67.jpg)
• 积木:用组件封装UI/交互模式 �
• 配置:更高抽象层级的标记语言 �
• 分离:实现的不同层级
CardKit技术与设计的共同解决方案
![Page 68: CardKit & DOMO UI - 移动时代技术与设计的十字路口](https://reader030.vdocuments.pub/reader030/viewer/2022012318/54b7a9854a795993718b490a/html5/thumbnails/68.jpg)
组件自身 � UI/交互的实现
组件的配置语言 � 接口的实现
组件的配置和脚本 � 业务需求的实现
![Page 69: CardKit & DOMO UI - 移动时代技术与设计的十字路口](https://reader030.vdocuments.pub/reader030/viewer/2022012318/54b7a9854a795993718b490a/html5/thumbnails/69.jpg)
组件自身 � UI/交互的实现
组件的配置语言 � 接口的实现
组件的配置和脚本 � 业务需求的实现
![Page 70: CardKit & DOMO UI - 移动时代技术与设计的十字路口](https://reader030.vdocuments.pub/reader030/viewer/2022012318/54b7a9854a795993718b490a/html5/thumbnails/70.jpg)
组件自身 � UI/交互的实现
组件的配置语言 � 接口的实现
组件的配置和脚本 � 业务需求的实现
![Page 71: CardKit & DOMO UI - 移动时代技术与设计的十字路口](https://reader030.vdocuments.pub/reader030/viewer/2022012318/54b7a9854a795993718b490a/html5/thumbnails/71.jpg)
组件自身 � UI/交互的实现
组件的配置语言 � 接口的实现
组件的配置和脚本 � 业务需求的实现
![Page 72: CardKit & DOMO UI - 移动时代技术与设计的十字路口](https://reader030.vdocuments.pub/reader030/viewer/2022012318/54b7a9854a795993718b490a/html5/thumbnails/72.jpg)
独立迭代、统一更新、自动适配
多种风格、多种版本、中间语言
抽象实现、快速响应、简单维护
组件自身 � UI/交互的实现
组件的配置语言 � 接口的实现
组件的配置和脚本 � 业务需求的实现
![Page 73: CardKit & DOMO UI - 移动时代技术与设计的十字路口](https://reader030.vdocuments.pub/reader030/viewer/2022012318/54b7a9854a795993718b490a/html5/thumbnails/73.jpg)
组件自身 � UI/交互的实现
组件的配置语言 � 接口的实现
组件的配置和脚本 � 业务需求的实现
高效的协作是不用协作
![Page 74: CardKit & DOMO UI - 移动时代技术与设计的十字路口](https://reader030.vdocuments.pub/reader030/viewer/2022012318/54b7a9854a795993718b490a/html5/thumbnails/74.jpg)
从「声明式编程的回归」到「可视化组件化设计工具」
CardKit技术与设计的共同解决方案
![Page 75: CardKit & DOMO UI - 移动时代技术与设计的十字路口](https://reader030.vdocuments.pub/reader030/viewer/2022012318/54b7a9854a795993718b490a/html5/thumbnails/75.jpg)
CardKit背后的技术
DarkDOM MouiDollarJS
mo/lang
EventMasterSovietJS
momo/tap
mo/mainloop
momo/scroll
bower gruntsass
compass
karmamocha
oz.js ozma.js
CardKit
![Page 76: CardKit & DOMO UI - 移动时代技术与设计的十字路口](https://reader030.vdocuments.pub/reader030/viewer/2022012318/54b7a9854a795993718b490a/html5/thumbnails/76.jpg)
完整版
DarkDOM:组件和配置的抽象https://github.com/dexteryy/DarkDOM
![Page 77: CardKit & DOMO UI - 移动时代技术与设计的十字路口](https://reader030.vdocuments.pub/reader030/viewer/2022012318/54b7a9854a795993718b490a/html5/thumbnails/77.jpg)
control
picker
actionView
overlay
modalView growl imageView
• https://github.com/dexteryy/moui �
• 用鸭式类型看待宿主 �
• CardKit的再封装和单例工厂
Moui:交互的抽象
![Page 78: CardKit & DOMO UI - 移动时代技术与设计的十字路口](https://reader030.vdocuments.pub/reader030/viewer/2022012318/54b7a9854a795993718b490a/html5/thumbnails/78.jpg)
其他
• DollarJS:能放心使用的jQuery-like � API �
• SovietJS:brightDelegate � 和 � darkDelegate �
• Momo:模块化的手势框架,输出DOM事件,别名机制 �
• EventMaster,Mo,OzJS
![Page 79: CardKit & DOMO UI - 移动时代技术与设计的十字路口](https://reader030.vdocuments.pub/reader030/viewer/2022012318/54b7a9854a795993718b490a/html5/thumbnails/79.jpg)
• Web � Component, � Shadow � DOM, � Custom � Elements相似:扩展或自定义HTML元素,组件化,与实际UI分离 区别:扩展或自定义HTML的方法 �
• Polymer, � X-Tag � + � Brick 相似:UI组件库,用HTML配置 区别:组件体系,实现方式 �
• AngularJS 相似:用HTML配置 区别:以DOM模板和依赖注入为卖点的MVC框架, � � � � � � � � � � 操作UI的接口在model层,UI组件基于特定model对象 �
• React相似:纯view层技术,组件封装区别:配置方式(JSX � vs � HTML),接口风格(JS对象 � vs � DOM对象)
那些看上去相似的
![Page 80: CardKit & DOMO UI - 移动时代技术与设计的十字路口](https://reader030.vdocuments.pub/reader030/viewer/2022012318/54b7a9854a795993718b490a/html5/thumbnails/80.jpg)
Shadow � DOM
DarkDOM
Result
![Page 81: CardKit & DOMO UI - 移动时代技术与设计的十字路口](https://reader030.vdocuments.pub/reader030/viewer/2022012318/54b7a9854a795993718b490a/html5/thumbnails/81.jpg)
实际应用
04
![Page 82: CardKit & DOMO UI - 移动时代技术与设计的十字路口](https://reader030.vdocuments.pub/reader030/viewer/2022012318/54b7a9854a795993718b490a/html5/thumbnails/82.jpg)
CardKit在豆瓣
![Page 83: CardKit & DOMO UI - 移动时代技术与设计的十字路口](https://reader030.vdocuments.pub/reader030/viewer/2022012318/54b7a9854a795993718b490a/html5/thumbnails/83.jpg)
2012 20142013
11月 3月 12月 3月
读书条目页移动化 �
检验新设计和新方案 �
自顶向下实现CardKit
电影票务 �
公共业务组件 �
小组全站 �
电影全站 �
读书全站 �
日记 �
相册 �
首页
CardKit � 2
2月
测试向后兼容 �
demo应用 �
文档
可视化工具 �
全站升级
开发历程
![Page 84: CardKit & DOMO UI - 移动时代技术与设计的十字路口](https://reader030.vdocuments.pub/reader030/viewer/2022012318/54b7a9854a795993718b490a/html5/thumbnails/84.jpg)
自顶向下构建还是
自底向上构建
平稳退化的起点
平台侦测特性侦测
还是不要侦测
跟随原生实现hack原生实现 还是纯JS实现
厂商领地之「前进后退」
厂商领地之「窗口滚动」
CardKit � 0.x � - � 1.x那些年我们踩的坑
![Page 85: CardKit & DOMO UI - 移动时代技术与设计的十字路口](https://reader030.vdocuments.pub/reader030/viewer/2022012318/54b7a9854a795993718b490a/html5/thumbnails/85.jpg)
CardKit � 2https://github.com/douban-f2e/CardKit
• 从应用框架到工具库 �
• 用DarkDOM提供大部分核心机制,每个组件的实现只需
要少量DarkDOM配置代 �
• 组件的配置风格可以轻松替换或多版本共存 �
• DarkDOM让组件机制覆盖到运行时 �
• 概念的精简和一致,JS接口 简化 �
• 原生体验,避免hack,局部JS实现
![Page 86: CardKit & DOMO UI - 移动时代技术与设计的十字路口](https://reader030.vdocuments.pub/reader030/viewer/2022012318/54b7a9854a795993718b490a/html5/thumbnails/86.jpg)
#
Q&A
![Page 87: CardKit & DOMO UI - 移动时代技术与设计的十字路口](https://reader030.vdocuments.pub/reader030/viewer/2022012318/54b7a9854a795993718b490a/html5/thumbnails/87.jpg)
什么方法01
• Mobile � Web � App �
• 一切元素都是积木
如何运转 � 之 � 「协作」02
• 以DOMO � UI为基础的UI模式库 �
• 工程师要的“不是注释,而是结构” �
• 使用UI模式库实现高效协作
如何运转 � 之 � 「实现」03
• web技术的光明面和黑暗面
积木:用组件封装UI/交互模式 �
• 配置:更高抽象级的标记语言 �
• 分离:实现的不同层级 �
• CardKit背后的技术
实际应用04
• CardKit在豆瓣的应用
开发历程 �
• 那些年我们踩的坑 �
• CardKit2
CardKit � & � DOMO � UI
![Page 88: CardKit & DOMO UI - 移动时代技术与设计的十字路口](https://reader030.vdocuments.pub/reader030/viewer/2022012318/54b7a9854a795993718b490a/html5/thumbnails/88.jpg)
谢谢
蒙晨(波希米亚) � 新浪微博:@b3inside
杨扬(dexteryy) � https://github.com/dexteryy