基于本質的企業級設計系統-李駿.pdf

《基于本質的企業級設計系統-李駿.pdf》由會員分享，可在線閱讀，更多相關《基于本質的企業級設計系統-李駿.pdf（110頁珍藏版）》請在三個皮匠報告上搜索。

1、基于本質的企業級設計系統多點-體驗技術部負責/李駿李駿2015 年職多點，現任多點體驗技術部負責，負責多點前端體系建設，主導設計基于本質的企業級設計系統Cabin X、微前端程化案（Kayak）、客戶端程化案（Aladdin&Galleon）、動態跨端技術（HN）等底層核框架，從 0 到 1 完成多點前端體系搭建，致以先進技術提升零售領域產品體驗。曾就職阿、騰訊，有過 2 次創業經驗，微信程序：開發及案例詳解作者。多點體驗技術部負責Cabin X基于本質的企業級設計系統1 2 3背景特點實現1背景對企業級設計理解整劃使效有跡可循現有解決案問題成本、周期、難維護、質量不可控2特點不是單純的前端框

2、架產品、設計、前端體化作式效跨端致性效DIV+CSSCabinX代碼易懂、量少500+31.5前端設計19致性國內SaaS海外SaaS國內SaaS海外SaaS規則內聚、質量有保障跨端套代碼實現體驗式跨端3實現跨端技術本質本質任何復雜系統內部都由數不多的極簡規則撐系統運作眼鏡蛇眼鏡發明之前眼鏡蛇叫什么？飯匙倩脹頸蛇扁頭蝙蝠蛇扇頭“它是什么？”單選 Radio 時間圖鏈接本表單圖表標簽選擇 Tag Select時間圖鏈接本表單圖表選擇器 Select時間鏈接本表單圖表圖請選擇單選 Radio 時間圖鏈接本表單圖表標簽選擇 Tag Select時間圖鏈接本表單圖表選擇器 Select時間鏈接本表單圖

3、表圖請選擇可枚舉復(單)元素帶觸發器的切換容器容器組件技術DML Javascript 封閉DMLDmall Markup Language極簡 易讀我需要個新戶注冊 的標題是“新戶注冊”，標題放左上，字體18號，加粗加，醒點。有兩個按鈕，個確定、個取消，按鈕放右下，確定按鈕藍醒，取消按鈕灰放提交按鈕左邊。中間有個表單，表單有戶名、密碼兩個輸框，性別單選框，整體排列，居中對。我需要個新戶注冊 的標題是“新戶注冊”，標題放左上，字體18號，加粗加，醒點。有兩個按鈕，個確定、個取消，按鈕放右下，確定按鈕藍醒，取消按鈕灰放提交按鈕左邊。中間有個表單，表單有戶名、密碼兩個輸框，性別單選框，整體排列，居

4、中對。我需要個新戶注冊 的標題是“新戶注冊”，標題放左上，字體18號，加粗加，醒點。有兩個按鈕，個確定、個取消，按鈕放右下，確定按鈕藍醒，取消按鈕灰放提交按鈕左邊。中間有個表單，表單有戶名、密碼兩個輸框，性別單選框，整體排列，居中對。我需要個新戶注冊 的標題是“新戶注冊”，標題放左上，字體18號，加粗加，醒點。有兩個按鈕，個確定、個取消，按鈕放右下，確定按鈕藍醒，取消按鈕灰放提交按鈕左邊。中間有個表單，表單有戶名、密碼兩個輸框，性別單選框，整體排列，居中對。我需要個新戶注冊 的標題是“新戶注冊”，標題放左上，字體18號，加粗加，醒點。有兩個按鈕，個確定、個取消，按鈕放右下，確定按鈕藍醒，取消按

5、鈕灰放提交按鈕左邊。中間有個表單，表單有戶名、密碼兩個輸框，性別單選框，整體排列，居中對。有個，它的標題是“新戶注冊”有個表單，表單有戶名、密碼兩個輸框，性別單選框 有確定、取消兩個按鈕，確定是主按鈕有個，它的標題是“新戶注冊”有個表單，表單有戶名、密碼兩個輸框，性別單選框 有確定、取消兩個按鈕，確定是主按鈕 有個，它的標題是“新戶注冊”有個表單，表單有戶名、密碼兩個輸框，性別單選框 有確定、取消兩個按鈕，確定是主按鈕 有個，它的標題是“新戶注冊”有個表單，表單有戶名、密碼兩個輸框，性別單選框 有確定、取消兩個按鈕，確定是主按鈕 有個，它的標題是“新戶注冊”有個表單，表單有戶名、密碼兩個輸框，

6、性別單選框 有確定、取消兩個按鈕，確定是主按鈕 有個，它的標題是“新戶注冊”有個表單，表單有戶名、密碼兩個輸框，性別單選框 有確定、取消兩個按鈕，確定是主按鈕 有個，它的標題是“新戶注冊”有個表單，表單有戶名、密碼兩個輸框，性別單選框 有確定、取消兩個按鈕，確定是主按鈕 有個，它的標題是“新戶注冊”有個表單，表單有戶名、密碼兩個輸框，性別單選框 有確定、取消兩個按鈕，確定是主按鈕 有個，它的標題是“新戶注冊”有個表單，表單有戶名、密碼兩個輸框，性別單選框 有確定、取消兩個按鈕，確定是主按鈕 有個，它的標題是“新戶注冊”有個表單，表單有戶名、密碼兩個輸框，性別單選框 有確定、取消兩個按鈕，確定是

7、主按鈕 有個，它的標題是“新戶注冊”有個表單，表單有戶名、密碼兩個輸框，性別單選框 有確定、取消兩個按鈕，確定是主按鈕 有個，它的標題是“新戶注冊”有個表單，表單有戶名、密碼兩個輸框，性別單選框 有確定、取消兩個按鈕，確定是主按鈕 Javascript安全 易上UI線程邏輯線程webviewUI線程邏輯線程webviewJSCore or webworkerWebview or NativeJSCore or webworker邏輯線程JSUI線程DMLmediatorsendMessageMessageProxy MessageProxy sendMessagereceiveMessager

8、eceiveMessage ,hide function();myFormRef.getData();myFormRef.validate();myFormRef.confirm();let myFormRef=this.getComponent(myForm);XPage(show function()封閉不能篡改樣式、交互不能實現找前端、UI SysComponent SysComponent 對內封閉 對外開放對后端封閉 對前端開放產品設計前端后端測試產品設計前端后端測試 研發流程更短 產品質量更可控 培養架構性才跨端體驗式適配具象映射具象具象本質剝離視覺、交互重組視覺、交互具象抽規則再

9、設計找本質TitleSubtitleTagsButtonButtonButtonTitleSubtitleTagsButtonButtonButtonActions or InfoActions or InfoActions or InfoActions or InfoTitleSubtitleTagsButtonButtonButtonTitleSubtitleTagsButtonButtonButtonActions or InfoActions or InfoActions or InfoActions or InfoTitleSubtitleTagsButtonButtonButtonActions or InfoTitleSubtitleTagsButtonButtonButtonActions or InfoTitleSubtitleTagsButtonMoreButtonTitleSubtitleTagsButtonMoreButton產品設計技術實現視覺交互本質TRUTH