本書(shū)共13章, 第1章從宏觀上介紹了體驗(yàn)技術(shù)為什么應(yīng)該升級(jí), 能帶來(lái)哪些效率上的提升, 以及智能UI的概念; 第2-4章詳細(xì)講解了智能UI的基礎(chǔ)知識(shí)、如何設(shè)計(jì)一體化智能UI方案, 以及智能生成代碼技術(shù)D2C; 第5-12章分別講解了如何打造UI的個(gè)性化承接能力, UI方案智能投放算法的應(yīng)用和優(yōu)化、業(yè)務(wù)價(jià)值歸因分析、用戶(hù)體驗(yàn)供給鏈路、用戶(hù)體驗(yàn)消費(fèi)鏈路、端智能鏈路、數(shù)據(jù)分析、歸因分析等; 第13章對(duì)UI領(lǐng)域未來(lái)的發(fā)展趨勢(shì)進(jìn)行了展望。
(1)作者背景資深:作者是阿里巴巴“前端智能化”概念的提出者,也是阿里巴巴前端智能化方向的負(fù)責(zé)人,個(gè)人影響力在阿里巴巴內(nèi)部排名前3。
(2)作者經(jīng)驗(yàn)豐富:作者先后在騰訊和阿里從事前端工作16年,提出并實(shí)現(xiàn)了設(shè)計(jì)稿生成代碼,免費(fèi)向行業(yè)提供imgcook工具,幫助數(shù)萬(wàn)前端工程師和設(shè)計(jì)師用該工具一鍵從設(shè)計(jì)稿生成 UI 代碼。
(3)阿里實(shí)踐總結(jié):本書(shū)主要內(nèi)容源于作者在阿里的實(shí)踐經(jīng)驗(yàn)總結(jié),系統(tǒng)且深入地闡述了UI智能化的工程技術(shù)、實(shí)現(xiàn)方法和編程思想。
(4)專(zhuān)家高度評(píng)價(jià):本書(shū)得到了玉伯、張克軍、winter、大漠4位前端和UI領(lǐng)域的資深專(zhuān)家高度評(píng)價(jià)并推薦。
Preface 前 言
寫(xiě)作動(dòng)機(jī)
2017年,我在負(fù)責(zé)UC瀏覽器部分內(nèi)核工作時(shí),為了解決前端測(cè)試的問(wèn)題,引入了機(jī)器學(xué)習(xí)技術(shù)。借助計(jì)算機(jī)視覺(jué)和其他算法模型能力,我在UI的還原質(zhì)量、布局問(wèn)題、排版問(wèn)題和樣式問(wèn)題等方面都取得了不錯(cuò)的成績(jī)。在此基礎(chǔ)上,我在阿里前端委員會(huì)共創(chuàng)會(huì)議上正式提出“前端智能化”概念,期望通過(guò)引入機(jī)器學(xué)習(xí)能力對(duì)現(xiàn)有前端技術(shù)和工程進(jìn)行升級(jí)。在這次共創(chuàng)會(huì)議后,阿里前端智能化小組正式成立。
從2017年提出前端智能化開(kāi)始,到2022年NoCode業(yè)務(wù)的交付,近5年時(shí)間如白駒過(guò)隙。我一直想把自己和團(tuán)隊(duì)的思考與實(shí)踐分享給讀者。本書(shū)以“智能UI”為切入點(diǎn),旨在詳細(xì)闡述前端智能化,幫助讀者為業(yè)務(wù)賦能、對(duì)工程提效。
其實(shí),如果智能UI沒(méi)有與內(nèi)部的技術(shù)工程體系耦合得那么緊密,我也可以像 imgcook一樣開(kāi)放出來(lái),然后以文檔方式教讀者如何使用。不幸的是,智能UI先是緊密耦合大促場(chǎng)景,后又與頻道的研發(fā)體系相耦合,而內(nèi)部的模塊標(biāo)準(zhǔn)、持續(xù)集成、組件和研發(fā)框架等都和行業(yè)標(biāo)準(zhǔn)有較大差異,如果把智能 UI 開(kāi)放,相當(dāng)于逼迫讀者使用現(xiàn)有的技術(shù)棧,這對(duì)技術(shù)選型和工程改造都有巨大的成本壓力。因此,我選擇把智能 UI 的設(shè)計(jì)思想、實(shí)現(xiàn)路徑乃至背后的部分智能化編程思想都分享出來(lái),使讀者在讀完本書(shū)后可以構(gòu)建自己的NoCode業(yè)務(wù)交付能力、個(gè)性化UI供給和消費(fèi)能力、UI 調(diào)控能力。
授人以魚(yú),不如授人以漁。本書(shū)把問(wèn)題分析、定義和解決的過(guò)程,以及這些過(guò)程背后的思考,都完整、清晰、全面地呈現(xiàn)出來(lái),希望這些內(nèi)容能夠給讀者帶來(lái)啟發(fā),進(jìn)而提高讀者解決現(xiàn)實(shí)問(wèn)題的能力。
綜上所述,本書(shū)的寫(xiě)作動(dòng)機(jī)是:
通過(guò)實(shí)踐幫助讀者學(xué)會(huì)構(gòu)建自己的智能 UI 技術(shù)工程體系。
通過(guò)思考過(guò)程的分享幫助讀者學(xué)會(huì)用前端智能化分析并解決業(yè)務(wù)和技術(shù)問(wèn)題。
通過(guò)可微編程幫助讀者了解前端智能化編程思想。
讀者對(duì)象
本書(shū)適合以下讀者:
對(duì)低代碼UI開(kāi)發(fā)技術(shù)實(shí)踐感興趣的程序員。
希望提升研發(fā)效率、對(duì) UI 和交互進(jìn)行創(chuàng)新的前端程序員和前端愛(ài)好者。
對(duì)智能 UI 技術(shù)感興趣的技術(shù)管理者。
想借助智能 UI 提升業(yè)務(wù)價(jià)值的業(yè)務(wù)人員、產(chǎn)品經(jīng)理和設(shè)計(jì)師。
本書(shū)內(nèi)容和閱讀建議
本書(shū)探討的是前端和機(jī)器學(xué)習(xí)兩個(gè)領(lǐng)域的知識(shí),以智能 UI 為場(chǎng)景,介紹前端智能化的技術(shù)工程實(shí)踐原理、方法和編程思想。書(shū)中內(nèi)容分為三篇:第一篇“關(guān)于智能 UI”包括第1~3章,主要介紹前端智能化的基本概念、智能化的思維框架,以及實(shí)現(xiàn) UI 個(gè)性化的方法;第二篇“智能UI實(shí)戰(zhàn)”包括第4~7章,主要介紹智能 UI 從設(shè)計(jì)到實(shí)現(xiàn)的全過(guò)程;第三篇“智能UI編程思想”包括第8~10章,主要介紹 UI 智能化、交付智能化和編程思想智能化。
本書(shū)有以下3種閱讀方式。
快速實(shí)戰(zhàn):對(duì)于對(duì)前端智能化有所了解的讀者,推薦從第二篇開(kāi)始閱讀,直接進(jìn)入智能UI 的實(shí)戰(zhàn)部分,快速掌握業(yè)務(wù)和技術(shù)工程,然后閱讀第三篇,進(jìn)一步創(chuàng)造業(yè)務(wù)價(jià)值,提升研發(fā)效率,最后閱讀第一篇,了解前端智能化和 D2C 原理。
快速應(yīng)用:對(duì)于致力于構(gòu)建自己的前端智能化團(tuán)隊(duì)和技術(shù)產(chǎn)品的讀者,例如開(kāi)發(fā)自己的 imgcook,推薦從第三篇開(kāi)始閱讀,再讀第一篇和第二篇。
循序漸進(jìn):第一次接觸前端智能化和智能 UI的讀者可以循序漸進(jìn)地逐篇瀏覽和實(shí)踐。
致謝
本書(shū)引用了部分團(tuán)隊(duì)內(nèi)部的文檔資料,特此感謝妙凈、蘇川、笑翟、吖克、卡貍、欣余、數(shù)斯、缺月、昭如、卓風(fēng)、大漠、禹哲、澤它、連山等資料貢獻(xiàn)者。
書(shū)中內(nèi)容如有不當(dāng),請(qǐng)廣大讀者批評(píng)指正,聯(lián)系郵箱為zyk1980@sohu.com。
前言
第一篇 關(guān)于智能UI
第1章 前端智能化2
1.1 AI改變前端編程2
1.2 AI進(jìn)行頁(yè)面重構(gòu)的要求3
1.3 AI進(jìn)行頁(yè)面重構(gòu)的能力4
1.4 AI進(jìn)行頁(yè)面重構(gòu)的方法6
1.4.1 原理7
1.4.2 過(guò)程7
1.4.3 調(diào)試方法8
第2章 面向不確定性編程11
2.1 運(yùn)行時(shí)的不確定性帶來(lái)的全新
挑戰(zhàn)11
2.2 編程本身受到的影響12
2.2.1 想不清楚12
2.2.2 做不明白14
2.3 快速上手前端機(jī)器學(xué)習(xí)16
2.3.1 訓(xùn)練17
2.3.2 預(yù)測(cè)19
2.3.3 部署20
第3章 UI個(gè)性化23
3.1 UI個(gè)性化的研發(fā)成本問(wèn)題24
3.2 UI個(gè)性化表達(dá)的能力問(wèn)題27
3.3 UI個(gè)性化的業(yè)務(wù)價(jià)值問(wèn)題29
本篇小結(jié)31
第二篇 智能UI實(shí)戰(zhàn)
第4章 智能UI的目標(biāo)、方法
和步驟34
4.1 智能UI具體做什么34
4.1.1 在UI上實(shí)現(xiàn)信息有效
表達(dá)34
4.1.2 個(gè)性化UI方案數(shù)量的
重要性35
4.1.3 UI的可變性35
4.1.4 UI設(shè)計(jì)約束37
4.2 供給鏈路概述39
4.2.1 UI個(gè)性化元素供給39
4.2.2 UI個(gè)性化方案組裝40
4.3 消費(fèi)鏈路概述41
第5章 智能UI供給鏈路44
5.1 實(shí)現(xiàn)UI的可變性44
5.1.1 視覺(jué)設(shè)計(jì)的基礎(chǔ)45
5.1.2 視覺(jué)設(shè)計(jì)的基本元素45
5.1.3 視覺(jué)設(shè)計(jì)的原則50
5.1.4 設(shè)計(jì)交付與前端
交付的關(guān)系52
5.1.5 Web應(yīng)用的交付過(guò)程53
5.1.6 原子設(shè)計(jì)理論53
5.2 設(shè)計(jì)系統(tǒng):設(shè)計(jì)生產(chǎn)一體化
方案56
5.2.1 設(shè)計(jì)、研發(fā)、UI個(gè)性化
消費(fèi)三位一體的新輪子56
5.2.2 設(shè)計(jì)系統(tǒng)的技術(shù)選型58
5.2.3 設(shè)計(jì)系統(tǒng)的方案設(shè)計(jì)61
5.2.4 設(shè)計(jì)系統(tǒng)的詳細(xì)設(shè)計(jì)67
5.2.5 關(guān)于自適應(yīng)樣式76
5.3 設(shè)計(jì)令牌:設(shè)計(jì)體系的技術(shù)
承接78
5.3.1 令牌類(lèi)型79
5.3.2 設(shè)計(jì)令牌的組織結(jié)構(gòu)80
5.3.3 從簡(jiǎn)單的令牌結(jié)構(gòu)設(shè)計(jì)
開(kāi)始80
5.3.4 設(shè)計(jì)令牌主要的分層命名83
5.3.5 如何設(shè)計(jì)一個(gè)令牌96
5.3.6 有效地使用設(shè)計(jì)令牌99
5.4 代碼生成:智能UI的基石105
5.4.1 代碼生成基礎(chǔ)107
5.4.2 熟悉插件、CLI的擴(kuò)展
能力127
5.4.3 在D2C代碼生成中應(yīng)用
設(shè)計(jì)令牌128
第6章 智能UI消費(fèi)鏈路143
6.1 方案:AI輔助規(guī)則生成145
6.1.1 整體規(guī)則生成146
6.1.2 局部規(guī)則生成149
6.1.3 AI輔助的篩選和過(guò)濾152
6.2 架構(gòu):技術(shù)工程體系166
6.2.1 擁抱云原生167
6.2.2 算法模型層167
6.2.3 算法服務(wù)層180
6.2.4 構(gòu)建層188
6.3 迭代:歸因和度量214
6.3.1 A/B測(cè)試實(shí)驗(yàn)?zāi)芰ㄔO(shè)215
6.3.2 智能UI歸因和度量方法226
6.3.3 智能UI歸因和度量實(shí)戰(zhàn)231
第7章 智能UI與端智能237
7.1 端智能技術(shù)工程基礎(chǔ)238
7.1.1 評(píng)估和準(zhǔn)備算法模型240
7.1.2 基于編譯的模型優(yōu)化244
7.1.3 TensorFlow Lite的
Android應(yīng)用254
7.1.4 Core ML的iOS應(yīng)用259
7.2 實(shí)時(shí)性實(shí)踐266
7.2.1 技術(shù)體系267
7.2.2 運(yùn)行態(tài):數(shù)據(jù)能力268
7.2.3 無(wú)入侵?jǐn)?shù)據(jù)采集269
7.2.4 運(yùn)行態(tài):模型能力269
7.2.5 端智能研發(fā)態(tài)270
7.2.6 產(chǎn)品落地271
7.3 個(gè)人信息安全實(shí)戰(zhàn)272
7.3.1 零知識(shí)證明簡(jiǎn)介273
7.3.2 安全多方計(jì)算和RSA
加密算法276
7.3.3 安全多方計(jì)算實(shí)戰(zhàn)277
7.3.4 MP-SPDZ簡(jiǎn)介282
7.3.5 TensorFlow Federated:
沒(méi)有集中訓(xùn)練數(shù)據(jù)的
協(xié)作機(jī)器學(xué)習(xí)286
本篇小結(jié)295
第三篇 智能UI編程思想
第8章 UI智能化298
8.1 接口和界面的區(qū)別298
8.1.1 什么是操作298
8.1.2 操作對(duì)象變遷史299
8.1.3 接口和界面在操作中
的作用303
8.1.4 界面隱藏自己的魔法304
8.2 GUI給應(yīng)用程序帶來(lái)的
變化305
8.2.1 GUI易用性背后的復(fù)
雜度305
8.2.2 GUI開(kāi)發(fā)中面向用戶(hù)
體驗(yàn)的程序設(shè)計(jì)308
8.3 如何實(shí)現(xiàn)UI智能化325
第9章 交付智能化:設(shè)計(jì)
生產(chǎn)一體化之旅330
9.1 設(shè)計(jì)生產(chǎn)一體化詳解332
9.1.1 端到端交付的必要性332
9.1.2 端到端交付的挑戰(zhàn)334
9.2 工業(yè)領(lǐng)域端到端交付的
先進(jìn)思想340
9.2.1 MBD設(shè)計(jì)制造一體
化概覽340
9.2.2 PMI協(xié)同制造需求結(jié)
構(gòu)化342
9.2.3 設(shè)計(jì)制造一體化過(guò)程
分析343
9.2.4 借鑒工業(yè)化思想改進(jìn)端
到端交付349
9.2.5 前端工程的工藝信息367
9.2.6 基于結(jié)構(gòu)化工程鏈路信
息和需求信息的業(yè)務(wù)
驗(yàn)證376
9.3 設(shè)計(jì)生產(chǎn)一體化展望381
9.3.1 技術(shù)賦能381
9.3.2 基于產(chǎn)品經(jīng)理工作臺(tái)
重塑工作流383
9.3.3 基于投放實(shí)驗(yàn)?zāi)芰B透
運(yùn)營(yíng)工作流384
9.3.4 基于智能UI體系的一體
化交付成果384
9.4 反思和展望387
第10章 編程思想智能化:
可微編程390
10.1 什么是可微編程392
10.1.1 可微編程和自動(dòng)微分的
關(guān)系393
10.1.2 可微編程實(shí)現(xiàn)智能應(yīng)用
程序396
10.1.3 Swift的可微編程398
10.2 TensorFlow可微編程405
10.2.1 TensorFlow計(jì)算圖示例408
10.2.2 TensorFlow梯度計(jì)算411
10.2.3 TensorFlow自動(dòng)微分419
10.3 可微編程應(yīng)對(duì)未來(lái)421
10.3.1 可微編程實(shí)現(xiàn)彈性動(dòng)畫(huà)423
10.3.2 展望未來(lái)436
本篇小