本書共13章, 第1章從宏觀上介紹了體驗(yàn)技術(shù)為什么應(yīng)該升級, 能帶來哪些效率上的提升, 以及智能UI的概念; 第2-4章詳細(xì)講解了智能UI的基礎(chǔ)知識、如何設(shè)計(jì)一體化智能UI方案, 以及智能生成代碼技術(shù)D2C; 第5-12章分別講解了如何打造UI的個性化承接能力, UI方案智能投放算法的應(yīng)用和優(yōu)化、業(yè)務(wù)價值歸因分析、用戶體驗(yàn)供給鏈路、用戶體驗(yàn)消費(fèi)鏈路、端智能鏈路、數(shù)據(jù)分析、歸因分析等; 第13章對UI領(lǐng)域未來的發(fā)展趨勢進(jìn)行了展望。
(1)作者背景資深:作者是阿里巴巴“前端智能化”概念的提出者,也是阿里巴巴前端智能化方向的負(fù)責(zé)人,個人影響力在阿里巴巴內(nèi)部排名前3。
(2)作者經(jīng)驗(yàn)豐富:作者先后在騰訊和阿里從事前端工作16年,提出并實(shí)現(xiàn)了設(shè)計(jì)稿生成代碼,免費(fèi)向行業(yè)提供imgcook工具,幫助數(shù)萬前端工程師和設(shè)計(jì)師用該工具一鍵從設(shè)計(jì)稿生成 UI 代碼。
(3)阿里實(shí)踐總結(jié):本書主要內(nèi)容源于作者在阿里的實(shí)踐經(jīng)驗(yàn)總結(jié),系統(tǒng)且深入地闡述了UI智能化的工程技術(shù)、實(shí)現(xiàn)方法和編程思想。
(4)專家高度評價:本書得到了玉伯、張克軍、winter、大漠4位前端和UI領(lǐng)域的資深專家高度評價并推薦。
Preface 前 言
寫作動機(jī)
2017年,我在負(fù)責(zé)UC瀏覽器部分內(nèi)核工作時,為了解決前端測試的問題,引入了機(jī)器學(xué)習(xí)技術(shù)。借助計(jì)算機(jī)視覺和其他算法模型能力,我在UI的還原質(zhì)量、布局問題、排版問題和樣式問題等方面都取得了不錯的成績。在此基礎(chǔ)上,我在阿里前端委員會共創(chuàng)會議上正式提出“前端智能化”概念,期望通過引入機(jī)器學(xué)習(xí)能力對現(xiàn)有前端技術(shù)和工程進(jìn)行升級。在這次共創(chuàng)會議后,阿里前端智能化小組正式成立。
從2017年提出前端智能化開始,到2022年NoCode業(yè)務(wù)的交付,近5年時間如白駒過隙。我一直想把自己和團(tuán)隊(duì)的思考與實(shí)踐分享給讀者。本書以“智能UI”為切入點(diǎn),旨在詳細(xì)闡述前端智能化,幫助讀者為業(yè)務(wù)賦能、對工程提效。
其實(shí),如果智能UI沒有與內(nèi)部的技術(shù)工程體系耦合得那么緊密,我也可以像 imgcook一樣開放出來,然后以文檔方式教讀者如何使用。不幸的是,智能UI先是緊密耦合大促場景,后又與頻道的研發(fā)體系相耦合,而內(nèi)部的模塊標(biāo)準(zhǔn)、持續(xù)集成、組件和研發(fā)框架等都和行業(yè)標(biāo)準(zhǔn)有較大差異,如果把智能 UI 開放,相當(dāng)于逼迫讀者使用現(xiàn)有的技術(shù)棧,這對技術(shù)選型和工程改造都有巨大的成本壓力。因此,我選擇把智能 UI 的設(shè)計(jì)思想、實(shí)現(xiàn)路徑乃至背后的部分智能化編程思想都分享出來,使讀者在讀完本書后可以構(gòu)建自己的NoCode業(yè)務(wù)交付能力、個性化UI供給和消費(fèi)能力、UI 調(diào)控能力。
授人以魚,不如授人以漁。本書把問題分析、定義和解決的過程,以及這些過程背后的思考,都完整、清晰、全面地呈現(xiàn)出來,希望這些內(nèi)容能夠給讀者帶來啟發(fā),進(jìn)而提高讀者解決現(xiàn)實(shí)問題的能力。
綜上所述,本書的寫作動機(jī)是:
通過實(shí)踐幫助讀者學(xué)會構(gòu)建自己的智能 UI 技術(shù)工程體系。
通過思考過程的分享幫助讀者學(xué)會用前端智能化分析并解決業(yè)務(wù)和技術(shù)問題。
通過可微編程幫助讀者了解前端智能化編程思想。
讀者對象
本書適合以下讀者:
對低代碼UI開發(fā)技術(shù)實(shí)踐感興趣的程序員。
希望提升研發(fā)效率、對 UI 和交互進(jìn)行創(chuàng)新的前端程序員和前端愛好者。
對智能 UI 技術(shù)感興趣的技術(shù)管理者。
想借助智能 UI 提升業(yè)務(wù)價值的業(yè)務(wù)人員、產(chǎn)品經(jīng)理和設(shè)計(jì)師。
本書內(nèi)容和閱讀建議
本書探討的是前端和機(jī)器學(xué)習(xí)兩個領(lǐng)域的知識,以智能 UI 為場景,介紹前端智能化的技術(shù)工程實(shí)踐原理、方法和編程思想。書中內(nèi)容分為三篇:第一篇“關(guān)于智能 UI”包括第1~3章,主要介紹前端智能化的基本概念、智能化的思維框架,以及實(shí)現(xiàn) UI 個性化的方法;第二篇“智能UI實(shí)戰(zhàn)”包括第4~7章,主要介紹智能 UI 從設(shè)計(jì)到實(shí)現(xiàn)的全過程;第三篇“智能UI編程思想”包括第8~10章,主要介紹 UI 智能化、交付智能化和編程思想智能化。
本書有以下3種閱讀方式。
快速實(shí)戰(zhàn):對于對前端智能化有所了解的讀者,推薦從第二篇開始閱讀,直接進(jìn)入智能UI 的實(shí)戰(zhàn)部分,快速掌握業(yè)務(wù)和技術(shù)工程,然后閱讀第三篇,進(jìn)一步創(chuàng)造業(yè)務(wù)價值,提升研發(fā)效率,最后閱讀第一篇,了解前端智能化和 D2C 原理。
快速應(yīng)用:對于致力于構(gòu)建自己的前端智能化團(tuán)隊(duì)和技術(shù)產(chǎn)品的讀者,例如開發(fā)自己的 imgcook,推薦從第三篇開始閱讀,再讀第一篇和第二篇。
循序漸進(jìn):第一次接觸前端智能化和智能 UI的讀者可以循序漸進(jìn)地逐篇瀏覽和實(shí)踐。
致謝
本書引用了部分團(tuán)隊(duì)內(nèi)部的文檔資料,特此感謝妙凈、蘇川、笑翟、吖克、卡貍、欣余、數(shù)斯、缺月、昭如、卓風(fēng)、大漠、禹哲、澤它、連山等資料貢獻(xiàn)者。
書中內(nèi)容如有不當(dāng),請廣大讀者批評指正,聯(lián)系郵箱為zyk1980@sohu.com。
前言
第一篇 關(guān)于智能UI
第1章 前端智能化2
1.1 AI改變前端編程2
1.2 AI進(jìn)行頁面重構(gòu)的要求3
1.3 AI進(jìn)行頁面重構(gòu)的能力4
1.4 AI進(jìn)行頁面重構(gòu)的方法6
1.4.1 原理7
1.4.2 過程7
1.4.3 調(diào)試方法8
第2章 面向不確定性編程11
2.1 運(yùn)行時的不確定性帶來的全新
挑戰(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ù)測19
2.3.3 部署20
第3章 UI個性化23
3.1 UI個性化的研發(fā)成本問題24
3.2 UI個性化表達(dá)的能力問題27
3.3 UI個性化的業(yè)務(wù)價值問題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 個性化UI方案數(shù)量的
重要性35
4.1.3 UI的可變性35
4.1.4 UI設(shè)計(jì)約束37
4.2 供給鏈路概述39
4.2.1 UI個性化元素供給39
4.2.2 UI個性化方案組裝40
4.3 消費(fèi)鏈路概述41
第5章 智能UI供給鏈路44
5.1 實(shí)現(xiàn)UI的可變性44
5.1.1 視覺設(shè)計(jì)的基礎(chǔ)45
5.1.2 視覺設(shè)計(jì)的基本元素45
5.1.3 視覺設(shè)計(jì)的原則50
5.1.4 設(shè)計(jì)交付與前端
交付的關(guān)系52
5.1.5 Web應(yīng)用的交付過程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個性化
消費(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 令牌類型79
5.3.2 設(shè)計(jì)令牌的組織結(jié)構(gòu)80
5.3.3 從簡單的令牌結(jié)構(gòu)設(shè)計(jì)
開始80
5.3.4 設(shè)計(jì)令牌主要的分層命名83
5.3.5 如何設(shè)計(jì)一個令牌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輔助的篩選和過濾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測試實(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 評估和準(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í)踐266
7.2.1 技術(shù)體系267
7.2.2 運(yùn)行態(tài):數(shù)據(jù)能力268
7.2.3 無入侵?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 個人信息安全實(shí)戰(zhàn)272
7.3.1 零知識證明簡介273
7.3.2 安全多方計(jì)算和RSA
加密算法276
7.3.3 安全多方計(jì)算實(shí)戰(zhàn)277
7.3.4 MP-SPDZ簡介282
7.3.5 TensorFlow Federated:
沒有集中訓(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 操作對象變遷史299
8.1.3 接口和界面在操作中
的作用303
8.1.4 界面隱藏自己的魔法304
8.2 GUI給應(yīng)用程序帶來的
變化305
8.2.1 GUI易用性背后的復(fù)
雜度305
8.2.2 GUI開發(fā)中面向用戶
體驗(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ì)制造一體化過程
分析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)理工作臺
重塑工作流383
9.3.3 基于投放實(shí)驗(yàn)?zāi)芰B透
運(yùn)營工作流384
9.3.4 基于智能UI體系的一體
化交付成果384
9.4 反思和展望387
第10章 編程思想智能化:
可微編程390
10.1 什么是可微編程392
10.1.1 可微編程和自動微分的
關(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自動微分419
10.3 可微編程應(yīng)對未來421
10.3.1 可微編程實(shí)現(xiàn)彈性動畫423
10.3.2 展望未來436
本篇小