同步系統(tǒng)ui設(shè)計(jì)規(guī)范課件

同步內(nèi)網(wǎng)系統(tǒng)UI設(shè)計(jì)規(guī)范TB同步內(nèi)網(wǎng)系統(tǒng)UI設(shè)計(jì)規(guī)范TB1問題Issues同步內(nèi)網(wǎng)系統(tǒng)UI設(shè)計(jì)缺乏統(tǒng)一的UI風(fēng)格，最終實(shí)現(xiàn)的效果對原設(shè)計(jì)稿的還原度偏低，導(dǎo)致內(nèi)網(wǎng)系統(tǒng)界面設(shè)計(jì)風(fēng)格混亂，視覺效果差1.UI風(fēng)格交互體驗(yàn)沒有統(tǒng)一，存在著不同應(yīng)用交互不一致的問題2.交互體驗(yàn)現(xiàn)有的UI組件功能不完整，易用性欠缺，甚至有時(shí)使用的組件風(fēng)格與原系統(tǒng)不一致3.UI組件項(xiàng)目開發(fā)時(shí)相同組件復(fù)用性低，甚至將時(shí)間浪費(fèi)在改組件、控件樣式上4.影響開發(fā)效率問題Issues同步內(nèi)網(wǎng)系統(tǒng)UI設(shè)計(jì)缺乏統(tǒng)一的UI風(fēng)格，最終2解決方案HOW同步內(nèi)網(wǎng)系統(tǒng)UI設(shè)計(jì)制定設(shè)計(jì)規(guī)范整理設(shè)計(jì)規(guī)范，形成設(shè)計(jì)規(guī)則，確定界面UI風(fēng)格，統(tǒng)一交互方式使用統(tǒng)一的前端開發(fā)框架選擇一個(gè)滿足需求的前端開發(fā)框架從產(chǎn)品設(shè)計(jì)到開發(fā)，形成統(tǒng)一的UI風(fēng)格以及交互方式統(tǒng)一常用交互組件從開發(fā)框架所提供的UI組件中，選擇需要常用的組件作為產(chǎn)品交互元件來設(shè)計(jì)產(chǎn)品原型好處：1.快速形成統(tǒng)一的產(chǎn)品交互原型2.功能完整的UI組件庫，一致的UI風(fēng)格和交互體驗(yàn)3.提升溝通效率，減少無用的重復(fù)工作解決方案HOW同步內(nèi)網(wǎng)系統(tǒng)UI設(shè)計(jì)制定設(shè)計(jì)規(guī)范整理設(shè)計(jì)規(guī)范，3目的Purpose同步內(nèi)網(wǎng)系統(tǒng)UI設(shè)計(jì)專注產(chǎn)品本身產(chǎn)品統(tǒng)一交互形式，簡化交互方式，提升用戶體驗(yàn)交互統(tǒng)一界面風(fēng)格，提升界面美觀度，規(guī)范界面設(shè)計(jì)，降低重復(fù)性工作UI提升開發(fā)效率，組件化開發(fā)，提升界面還原度，提高組件復(fù)用性開發(fā)目的Purpose同步內(nèi)網(wǎng)系統(tǒng)UI設(shè)計(jì)專注產(chǎn)品本身產(chǎn)品統(tǒng)一交4同步內(nèi)網(wǎng)系統(tǒng)UI設(shè)計(jì)風(fēng)格指南同步內(nèi)網(wǎng)系統(tǒng)是一個(gè)復(fù)雜的企業(yè)級產(chǎn)品，功能復(fù)雜。這類產(chǎn)品中存在許多類似的頁面以及組件，可以通過抽象得到一些穩(wěn)定且高復(fù)用性的內(nèi)容。隨著商業(yè)化的趨勢，越來越多的企業(yè)級產(chǎn)品對更好的用戶體驗(yàn)有了進(jìn)一步的要求。帶著這樣的目的，本風(fēng)格指南基于MaterialDesign和AntDesign的設(shè)計(jì)語言，通過模塊化的解決方案，解決重復(fù)的生產(chǎn)成本，讓設(shè)計(jì)師和開發(fā)者能專注于“更好的用戶體驗(yàn)”，并逐步形成統(tǒng)一的同步內(nèi)網(wǎng)系統(tǒng)風(fēng)格。同步內(nèi)網(wǎng)系統(tǒng)UI設(shè)計(jì)風(fēng)格指南同步內(nèi)網(wǎng)系統(tǒng)是一個(gè)復(fù)雜的企業(yè)級產(chǎn)5原則Principles同步內(nèi)網(wǎng)系統(tǒng)UI設(shè)計(jì)同步內(nèi)網(wǎng)系統(tǒng)的產(chǎn)品期望給用戶傳達(dá)的是快速、高效的意向，因此在設(shè)計(jì)時(shí)，應(yīng)該突出直觀、高效、簡潔、數(shù)據(jù)驅(qū)動的特點(diǎn)。因此這里提出UI設(shè)計(jì)四大基本原則和交互四原則。彼此相關(guān)的項(xiàng)應(yīng)當(dāng)靠近，歸組一起。如果多個(gè)項(xiàng)之間存在很近的親密性，它們就會成為一個(gè)視覺單元，而不是多個(gè)孤立的元素。這有助于組織信息，減少混亂，為用戶提供清晰的結(jié)構(gòu)。親密性任何東西都不能在頁面上隨意安放。每個(gè)元素都應(yīng)當(dāng)與頁面上的另一個(gè)元素有某種視覺聯(lián)系。這樣能建立一種清晰、精巧而且清爽的外觀。對齊

原則Principles同步內(nèi)網(wǎng)系統(tǒng)UI設(shè)計(jì)同步內(nèi)網(wǎng)系統(tǒng)的產(chǎn)6同步內(nèi)網(wǎng)系統(tǒng)UI設(shè)計(jì)對比的基本思想是，要避免頁面上的元素太過相似。對比是增加視覺效果最有效的方法之一，同時(shí)也能在不同元素之間建立一種有組織的層次結(jié)構(gòu)，讓用戶能快速識別關(guān)鍵信息。對比相同的元素在整個(gè)界面中不斷重復(fù)，不僅可以有效的降低用戶的學(xué)習(xí)成本，也能增加條理性，加強(qiáng)統(tǒng)一性。重復(fù)同步內(nèi)網(wǎng)系統(tǒng)UI設(shè)計(jì)對比的基本思想是，要避免頁面上的元素太過7同步內(nèi)網(wǎng)系統(tǒng)UI設(shè)計(jì)簡化不意味著最少化，而是減少冗余步驟和干擾項(xiàng)，簡化操作方式，優(yōu)化操作過程。簡化交互在界面中，適當(dāng)?shù)募尤胍恍┻^渡效果，能讓界面保持生動，同時(shí)也能增加用戶和界面的溝通。巧用過渡同步內(nèi)網(wǎng)系統(tǒng)UI設(shè)計(jì)簡化不意味著最少化，而是減少冗余步驟和干8同步內(nèi)網(wǎng)系統(tǒng)UI設(shè)計(jì)用戶進(jìn)行了操作或者內(nèi)部數(shù)據(jù)發(fā)生了變化，系統(tǒng)就應(yīng)該立即有一個(gè)對應(yīng)的反饋，同時(shí)輸入量級越大、重要性越高，那么反饋的量級越大、重要性越高。即時(shí)反應(yīng)每一個(gè)優(yōu)秀的設(shè)計(jì)中都應(yīng)用了這些設(shè)計(jì)原則，它們之間是相互關(guān)聯(lián)的，只應(yīng)用一個(gè)原則的情況很少。一點(diǎn)說明能在這個(gè)界面解決的問題，就不要去其他頁面解決，因?yàn)槿魏雾撁嫠⑿潞吞D(zhuǎn)，就像在看戲時(shí)，演員說一句臺詞就安排一次謝幕一樣。足不出戶同步內(nèi)網(wǎng)系統(tǒng)UI設(shè)計(jì)用戶進(jìn)行了操作或者內(nèi)部數(shù)據(jù)發(fā)生了變化，系9同步內(nèi)網(wǎng)系統(tǒng)UI設(shè)計(jì)親密性縱向間距示例組合排布示例復(fù)選框內(nèi)示例同步內(nèi)網(wǎng)系統(tǒng)UI設(shè)計(jì)親密性縱向間距示例組合排布示例復(fù)選框內(nèi)示10同步內(nèi)網(wǎng)系統(tǒng)UI設(shè)計(jì)對齊文案類對齊表單類對齊數(shù)字類對齊同步內(nèi)網(wǎng)系統(tǒng)UI設(shè)計(jì)對齊文案類對齊表單類對齊數(shù)字類對齊11同步內(nèi)網(wǎng)系統(tǒng)UI設(shè)計(jì)對比靜態(tài)對比用不同的顏色來表明不同的狀態(tài)動態(tài)對比鼠標(biāo)懸停時(shí)，該項(xiàng)和其他項(xiàng)呈現(xiàn)出明顯不同的視覺效果同步內(nèi)網(wǎng)系統(tǒng)UI設(shè)計(jì)對比靜態(tài)對比動態(tài)對比12同步內(nèi)網(wǎng)系統(tǒng)UI設(shè)計(jì)重復(fù)線框重復(fù)示例設(shè)計(jì)要素重復(fù)同步內(nèi)網(wǎng)系統(tǒng)UI設(shè)計(jì)重復(fù)線框重復(fù)示例設(shè)計(jì)要素重復(fù)13同步內(nèi)網(wǎng)系統(tǒng)UI設(shè)計(jì)簡化交互實(shí)時(shí)可見工具示例開關(guān)顯示工具示例同步內(nèi)網(wǎng)系統(tǒng)UI設(shè)計(jì)簡化交互實(shí)時(shí)可見工具示例開關(guān)顯示工具示例14同步內(nèi)網(wǎng)系統(tǒng)UI設(shè)計(jì)巧用過渡對象更改示例對象刪除示例對象增加示例同步內(nèi)網(wǎng)系統(tǒng)UI設(shè)計(jì)巧用過渡對象更改示例對象刪除示例對象增加15同步內(nèi)網(wǎng)系統(tǒng)UI設(shè)計(jì)即時(shí)反應(yīng)實(shí)時(shí)搜索實(shí)時(shí)預(yù)覽按鈕加載列表加載同步內(nèi)網(wǎng)系統(tǒng)UI設(shè)計(jì)即時(shí)反應(yīng)實(shí)時(shí)搜索實(shí)時(shí)預(yù)覽按鈕加載列表加載16同步內(nèi)網(wǎng)系統(tǒng)UI設(shè)計(jì)足不出戶非重要的刪除提示重要的刪除確認(rèn)提示列表內(nèi)文本修改同步內(nèi)網(wǎng)系統(tǒng)UI設(shè)計(jì)足不出戶非重要的刪除提示重要的刪除確認(rèn)提17樣式Style同步內(nèi)網(wǎng)系統(tǒng)UI設(shè)計(jì)動態(tài)體系化適配主流分辨率可切換式導(dǎo)航欄統(tǒng)一空間布局布局中性色強(qiáng)調(diào)色主色顏色字體大小行高字重字體顏色統(tǒng)一字體字體圖標(biāo)字體系統(tǒng)圖標(biāo)圖標(biāo)樣式Style同步內(nèi)網(wǎng)系統(tǒng)UI設(shè)計(jì)動態(tài)體系化適配主流分辨率可18模式Patterns同步內(nèi)網(wǎng)系統(tǒng)UI設(shè)計(jì)信息框架完整的設(shè)計(jì)模式將會包含功能示例、模板、組件三大實(shí)體部分功能范例：由多個(gè)模板構(gòu)成模板：頁面級示例，啟發(fā)用戶如何通過組件搭建出系統(tǒng)中的頁面組件：包括基礎(chǔ)組件和業(yè)務(wù)組件模式Patterns同步內(nèi)網(wǎng)系統(tǒng)UI設(shè)計(jì)信息框架19文案Copywriting同步內(nèi)網(wǎng)系統(tǒng)UI設(shè)計(jì)使用簡單、直接、易于理解的詞匯，讓內(nèi)容和指示更加容易被用戶接受和理解。04使用熟悉的語言使用阿拉伯?dāng)?shù)字代替文字，有一個(gè)例外是混合使用數(shù)字的時(shí)候，例如“兩個(gè)3s”01使用“1，2，3”讓用戶第一眼看到最重要的內(nèi)容，不用到段落中尋找。05重要的信息放在顯著的位置避免使用“絕不”和其他絕對性的詞語02不要說“絕不”直接使用【你】、【我】來和用戶說話，避免使用【您】06拉近彼此的距離省略無用詞匯，不重復(fù)用戶已知事實(shí)03精簡語言文案Copywriting同步內(nèi)網(wǎng)系統(tǒng)UI設(shè)計(jì)使用簡單、直接20反饋Feedback同步內(nèi)網(wǎng)系統(tǒng)UI設(shè)計(jì)警告提示通知提示氣泡卡片文字提示反饋Feedback同步內(nèi)網(wǎng)系統(tǒng)UI設(shè)計(jì)警告提示通知提示氣泡21反饋Feedback同步內(nèi)網(wǎng)系統(tǒng)UI設(shè)計(jì)加載狀態(tài)反饋錄入反饋氣泡確認(rèn)反饋Feedback同步內(nèi)網(wǎng)系統(tǒng)UI設(shè)計(jì)加載狀態(tài)反饋錄入反饋22反饋Feedback同步內(nèi)網(wǎng)系統(tǒng)UI設(shè)計(jì)頂部全局提示反饋對話框反饋反饋Feedback同步內(nèi)網(wǎng)系統(tǒng)UI設(shè)計(jì)頂部全局提示反饋對話23AntDesign一個(gè)服務(wù)于企業(yè)級產(chǎn)品的設(shè)計(jì)體系。基于【確定】和【自然】的設(shè)計(jì)價(jià)值觀，通過模塊化的解決方案，讓設(shè)計(jì)者專注于更好的用戶體驗(yàn)。查看AntDesign一個(gè)服務(wù)于企業(yè)級產(chǎn)品的設(shè)計(jì)體系?；凇敬_24謝謝End謝謝End25同步內(nèi)網(wǎng)系統(tǒng)UI設(shè)計(jì)規(guī)范TB同步內(nèi)網(wǎng)系統(tǒng)UI設(shè)計(jì)規(guī)范TB26問題Issues同步內(nèi)網(wǎng)系統(tǒng)UI設(shè)計(jì)缺乏統(tǒng)一的UI風(fēng)格，最終實(shí)現(xiàn)的效果對原設(shè)計(jì)稿的還原度偏低，導(dǎo)致內(nèi)網(wǎng)系統(tǒng)界面設(shè)計(jì)風(fēng)格混亂，視覺效果差1.UI風(fēng)格交互體驗(yàn)沒有統(tǒng)一，存在著不同應(yīng)用交互不一致的問題2.交互體驗(yàn)現(xiàn)有的UI組件功能不完整，易用性欠缺，甚至有時(shí)使用的組件風(fēng)格與原系統(tǒng)不一致3.UI組件項(xiàng)目開發(fā)時(shí)相同組件復(fù)用性低，甚至將時(shí)間浪費(fèi)在改組件、控件樣式上4.影響開發(fā)效率問題Issues同步內(nèi)網(wǎng)系統(tǒng)UI設(shè)計(jì)缺乏統(tǒng)一的UI風(fēng)格，最終27解決方案HOW同步內(nèi)網(wǎng)系統(tǒng)UI設(shè)計(jì)制定設(shè)計(jì)規(guī)范整理設(shè)計(jì)規(guī)范，形成設(shè)計(jì)規(guī)則，確定界面UI風(fēng)格，統(tǒng)一交互方式使用統(tǒng)一的前端開發(fā)框架選擇一個(gè)滿足需求的前端開發(fā)框架從產(chǎn)品設(shè)計(jì)到開發(fā)，形成統(tǒng)一的UI風(fēng)格以及交互方式統(tǒng)一常用交互組件從開發(fā)框架所提供的UI組件中，選擇需要常用的組件作為產(chǎn)品交互元件來設(shè)計(jì)產(chǎn)品原型好處：1.快速形成統(tǒng)一的產(chǎn)品交互原型2.功能完整的UI組件庫，一致的UI風(fēng)格和交互體驗(yàn)3.提升溝通效率，減少無用的重復(fù)工作解決方案HOW同步內(nèi)網(wǎng)系統(tǒng)UI設(shè)計(jì)制定設(shè)計(jì)規(guī)范整理設(shè)計(jì)規(guī)范，28目的Purpose同步內(nèi)網(wǎng)系統(tǒng)UI設(shè)計(jì)專注產(chǎn)品本身產(chǎn)品統(tǒng)一交互形式，簡化交互方式，提升用戶體驗(yàn)交互統(tǒng)一界面風(fēng)格，提升界面美觀度，規(guī)范界面設(shè)計(jì)，降低重復(fù)性工作UI提升開發(fā)效率，組件化開發(fā)，提升界面還原度，提高組件復(fù)用性開發(fā)目的Purpose同步內(nèi)網(wǎng)系統(tǒng)UI設(shè)計(jì)專注產(chǎn)品本身產(chǎn)品統(tǒng)一交29同步內(nèi)網(wǎng)系統(tǒng)UI設(shè)計(jì)風(fēng)格指南同步內(nèi)網(wǎng)系統(tǒng)是一個(gè)復(fù)雜的企業(yè)級產(chǎn)品，功能復(fù)雜。這類產(chǎn)品中存在許多類似的頁面以及組件，可以通過抽象得到一些穩(wěn)定且高復(fù)用性的內(nèi)容。隨著商業(yè)化的趨勢，越來越多的企業(yè)級產(chǎn)品對更好的用戶體驗(yàn)有了進(jìn)一步的要求。帶著這樣的目的，本風(fēng)格指南基于MaterialDesign和AntDesign的設(shè)計(jì)語言，通過模塊化的解決方案，解決重復(fù)的生產(chǎn)成本，讓設(shè)計(jì)師和開發(fā)者能專注于“更好的用戶體驗(yàn)”，并逐步形成統(tǒng)一的同步內(nèi)網(wǎng)系統(tǒng)風(fēng)格。同步內(nèi)網(wǎng)系統(tǒng)UI設(shè)計(jì)風(fēng)格指南同步內(nèi)網(wǎng)系統(tǒng)是一個(gè)復(fù)雜的企業(yè)級產(chǎn)30原則Principles同步內(nèi)網(wǎng)系統(tǒng)UI設(shè)計(jì)同步內(nèi)網(wǎng)系統(tǒng)的產(chǎn)品期望給用戶傳達(dá)的是快速、高效的意向，因此在設(shè)計(jì)時(shí)，應(yīng)該突出直觀、高效、簡潔、數(shù)據(jù)驅(qū)動的特點(diǎn)。因此這里提出UI設(shè)計(jì)四大基本原則和交互四原則。彼此相關(guān)的項(xiàng)應(yīng)當(dāng)靠近，歸組一起。如果多個(gè)項(xiàng)之間存在很近的親密性，它們就會成為一個(gè)視覺單元，而不是多個(gè)孤立的元素。這有助于組織信息，減少混亂，為用戶提供清晰的結(jié)構(gòu)。親密性任何東西都不能在頁面上隨意安放。每個(gè)元素都應(yīng)當(dāng)與頁面上的另一個(gè)元素有某種視覺聯(lián)系。這樣能建立一種清晰、精巧而且清爽的外觀。對齊

原則Principles同步內(nèi)網(wǎng)系統(tǒng)UI設(shè)計(jì)同步內(nèi)網(wǎng)系統(tǒng)的產(chǎn)31同步內(nèi)網(wǎng)系統(tǒng)UI設(shè)計(jì)對比的基本思想是，要避免頁面上的元素太過相似。對比是增加視覺效果最有效的方法之一，同時(shí)也能在不同元素之間建立一種有組織的層次結(jié)構(gòu)，讓用戶能快速識別關(guān)鍵信息。對比相同的元素在整個(gè)界面中不斷重復(fù)，不僅可以有效的降低用戶的學(xué)習(xí)成本，也能增加條理性，加強(qiáng)統(tǒng)一性。重復(fù)同步內(nèi)網(wǎng)系統(tǒng)UI設(shè)計(jì)對比的基本思想是，要避免頁面上的元素太過32同步內(nèi)網(wǎng)系統(tǒng)UI設(shè)計(jì)簡化不意味著最少化，而是減少冗余步驟和干擾項(xiàng)，簡化操作方式，優(yōu)化操作過程。簡化交互在界面中，適當(dāng)?shù)募尤胍恍┻^渡效果，能讓界面保持生動，同時(shí)也能增加用戶和界面的溝通。巧用過渡同步內(nèi)網(wǎng)系統(tǒng)UI設(shè)計(jì)簡化不意味著最少化，而是減少冗余步驟和干33同步內(nèi)網(wǎng)系統(tǒng)UI設(shè)計(jì)用戶進(jìn)行了操作或者內(nèi)部數(shù)據(jù)發(fā)生了變化，系統(tǒng)就應(yīng)該立即有一個(gè)對應(yīng)的反饋，同時(shí)輸入量級越大、重要性越高，那么反饋的量級越大、重要性越高。即時(shí)反應(yīng)每一個(gè)優(yōu)秀的設(shè)計(jì)中都應(yīng)用了這些設(shè)計(jì)原則，它們之間是相互關(guān)聯(lián)的，只應(yīng)用一個(gè)原則的情況很少。一點(diǎn)說明能在這個(gè)界面解決的問題，就不要去其他頁面解決，因?yàn)槿魏雾撁嫠⑿潞吞D(zhuǎn)，就像在看戲時(shí)，演員說一句臺詞就安排一次謝幕一樣。足不出戶同步內(nèi)網(wǎng)系統(tǒng)UI設(shè)計(jì)用戶進(jìn)行了操作或者內(nèi)部數(shù)據(jù)發(fā)生了變化，系34同步內(nèi)網(wǎng)系統(tǒng)UI設(shè)計(jì)親密性縱向間距示例組合排布示例復(fù)選框內(nèi)示例同步內(nèi)網(wǎng)系統(tǒng)UI設(shè)計(jì)親密性縱向間距示例組合排布示例復(fù)選框內(nèi)示35同步內(nèi)網(wǎng)系統(tǒng)UI設(shè)計(jì)對齊文案類對齊表單類對齊數(shù)字類對齊同步內(nèi)網(wǎng)系統(tǒng)UI設(shè)計(jì)對齊文案類對齊表單類對齊數(shù)字類對齊36同步內(nèi)網(wǎng)系統(tǒng)UI設(shè)計(jì)對比靜態(tài)對比用不同的顏色來表明不同的狀態(tài)動態(tài)對比鼠標(biāo)懸停時(shí)，該項(xiàng)和其他項(xiàng)呈現(xiàn)出明顯不同的視覺效果同步內(nèi)網(wǎng)系統(tǒng)UI設(shè)計(jì)對比靜態(tài)對比動態(tài)對比37同步內(nèi)網(wǎng)系統(tǒng)UI設(shè)計(jì)重復(fù)線框重復(fù)示例設(shè)計(jì)要素重復(fù)同步內(nèi)網(wǎng)系統(tǒng)UI設(shè)計(jì)重復(fù)線框重復(fù)示例設(shè)計(jì)要素重復(fù)38同步內(nèi)網(wǎng)系統(tǒng)UI設(shè)計(jì)簡化交互實(shí)時(shí)可見工具示例開關(guān)顯示工具示例同步內(nèi)網(wǎng)系統(tǒng)UI設(shè)計(jì)簡化交互實(shí)時(shí)可見工具示例開關(guān)顯示工具示例39同步內(nèi)網(wǎng)系統(tǒng)UI設(shè)計(jì)巧用過渡對象更改示例對象刪除示例對象增加示例同步內(nèi)網(wǎng)系統(tǒng)UI設(shè)計(jì)巧用過渡對象更改示例對象刪除示例對象增加40同步內(nèi)網(wǎng)系統(tǒng)UI設(shè)計(jì)即時(shí)反應(yīng)實(shí)時(shí)搜索實(shí)時(shí)預(yù)覽按鈕加載列表加載同步內(nèi)網(wǎng)系統(tǒng)UI設(shè)計(jì)即時(shí)反應(yīng)實(shí)時(shí)搜索實(shí)時(shí)預(yù)覽按鈕加載列表加載41同步內(nèi)網(wǎng)系統(tǒng)UI設(shè)計(jì)足不出戶非重要的刪除提示重要的刪除確認(rèn)提示列表內(nèi)文本修改同步內(nèi)網(wǎng)系統(tǒng)UI設(shè)計(jì)足不出戶非重要的刪除提示重要的刪除確認(rèn)提42樣式Style同步內(nèi)網(wǎng)系統(tǒng)UI設(shè)計(jì)動態(tài)體系化適配主流分辨率可切換式導(dǎo)航欄統(tǒng)一空間布局布局中性色強(qiáng)調(diào)色主色顏色字體大小行高字重字體顏色統(tǒng)一字體字體圖標(biāo)字體系統(tǒng)圖標(biāo)圖標(biāo)樣式Style同步內(nèi)網(wǎng)系統(tǒng)UI設(shè)計(jì)動態(tài)體系化適配主流分辨率可43模式Patterns同步內(nèi)網(wǎng)系統(tǒng)UI設(shè)計(jì)信息框架完整的設(shè)計(jì)模式將會包含功能示例、模板、組件三大實(shí)體部分功能范例：由多個(gè)模板構(gòu)成模板：頁面級示例，啟發(fā)用戶如何通過組件搭建出系統(tǒng)中的頁面組件：包括基礎(chǔ)組件和業(yè)務(wù)組件模式Patterns同步內(nèi)網(wǎng)系