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