中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導(dǎo)讀：設(shè)計(jì)資產(chǎn)是產(chǎn)品設(shè)計(jì)師的智慧結(jié)晶，能夠幫助新人設(shè)計(jì)師更快更系統(tǒng)地掌握產(chǎn)品的相關(guān)設(shè)計(jì)。本文作者希望通過這套方法和資產(chǎn)能夠賦能給更多的用戶，提高設(shè)計(jì)生產(chǎn)效率的同時(shí)更好的保障產(chǎn)品體驗(yàn)的內(nèi)在一致性。

今天給大家分享的是這一年來(lái)Ant Design團(tuán)隊(duì)為設(shè)計(jì)資產(chǎn)升級(jí)所做的事情、總結(jié)的方法以及成果。希望通過這套方法和資產(chǎn)能夠賦能給更多的用戶，提高設(shè)計(jì)生產(chǎn)效率的同時(shí)更好的保障產(chǎn)品體驗(yàn)的內(nèi)在一致性。

隨著 Ant Design 用戶群體的激增，業(yè)務(wù)場(chǎng)景的多樣化和復(fù)雜化，我們會(huì)面臨更大的挑戰(zhàn)，歡迎大家發(fā)揮極客精神和我們一起探索討論，共同創(chuàng)造出更好用的設(shè)計(jì)資產(chǎn)。

一、為什么要通過模式化構(gòu)建設(shè)計(jì)資產(chǎn)

1. Ant Design 問題分析

從15年 Ant Design 誕生之初到現(xiàn)在，在資產(chǎn)升級(jí)和優(yōu)化的同時(shí)我們也在不斷接收設(shè)計(jì)師的問題反饋，去年，我們針對(duì) 40 多個(gè)企業(yè)級(jí)產(chǎn)品，近 1000 多張產(chǎn)品頁(yè)面進(jìn)行分析梳理，發(fā)現(xiàn)在資產(chǎn)的使用上有很多的問題。舉個(gè)例子，如下圖所示，同樣一個(gè)表單填寫的需求，在相同的業(yè)務(wù)場(chǎng)景中，不同的產(chǎn)品使用了不同的布局和交互方式。

諸如此類的問題還有很多，我們對(duì)這這些問題進(jìn)行抽象總結(jié)，歸類為三大問題：

1. 目前 Ant Design 缺乏標(biāo)準(zhǔn)的資產(chǎn)使用規(guī)則
2. 頁(yè)面模版的邏輯梳理和邊界定義不夠清晰
3. 組件擴(kuò)展性不夠好

2. 復(fù)雜業(yè)務(wù)場(chǎng)景增量

隨著時(shí)代和科技的發(fā)展，企業(yè)級(jí)產(chǎn)品中出現(xiàn)了更多復(fù)雜的業(yè)務(wù)場(chǎng)景，如區(qū)塊鏈、人工智能等。我們的資產(chǎn)如何更好的覆蓋這類的業(yè)務(wù)場(chǎng)景？我們?nèi)绾螛?gòu)建更開放的生態(tài)來(lái)保證資產(chǎn)的擴(kuò)展性和靈活性？如何提高設(shè)計(jì)到開發(fā)的生產(chǎn)提效？這些問題促使我們更進(jìn)一步的開始探索資產(chǎn)設(shè)計(jì)的方法和對(duì)當(dāng)前資產(chǎn)的升級(jí)。

二、如何通過模式化構(gòu)建設(shè)計(jì)資產(chǎn)

1. 理解概念及方法介紹

在了解完我們要對(duì)資產(chǎn)升級(jí)的原因之后，我想要和大家分享一下，我們是如何做的。首先我們來(lái)理解一個(gè)概念，什么是“模式化”。

如圖所示，從傳統(tǒng)意義上來(lái)說(shuō)，模式化指事物的標(biāo)準(zhǔn)樣式，一般具有封閉性、流程性和固化性的特征。它可以被快速?gòu)?fù)用和批量生產(chǎn)。

在 Ant Design 中，我們也提供了一個(gè)標(biāo)準(zhǔn)的樣式，這包括標(biāo)準(zhǔn)的設(shè)計(jì)組件和模版，供設(shè)計(jì)師快速搭建頁(yè)面使用。但是，對(duì)于一個(gè)開源的資產(chǎn)來(lái)說(shuō)，光有標(biāo)準(zhǔn)的組件和模版是遠(yuǎn)遠(yuǎn)不夠的，我們無(wú)法全量的去預(yù)測(cè)組件被使用的業(yè)務(wù)場(chǎng)景，封閉的模式化開發(fā)會(huì)帶來(lái)很大的限制。因此，我們希望 Ant Design 的“模式化”如圖中所示，它是開放的，透氣的，有彈性空間的“模式化”。

我們除了提供標(biāo)準(zhǔn)的組件和模板資產(chǎn)之外，還提供一套設(shè)計(jì)資產(chǎn)的方法和設(shè)計(jì)指南，當(dāng)你的業(yè)務(wù)場(chǎng)景中發(fā)現(xiàn)標(biāo)準(zhǔn)組件無(wú)法滿足你的需求時(shí)，你可以通過這套設(shè)計(jì)方法，在一定的規(guī)則約束下對(duì)資產(chǎn)進(jìn)行擴(kuò)展，生長(zhǎng)出滿足自己需求的資產(chǎn)。如果你的業(yè)務(wù)領(lǐng)域很前瞻，很創(chuàng)新，我們也希望大家共同來(lái)創(chuàng)造全新的設(shè)計(jì)資產(chǎn)和方法。這就是 Ant Design 中“模式化”的概念，最終它會(huì)來(lái)帶三個(gè)價(jià)值：

1. 提升產(chǎn)品體驗(yàn)的一致性，不論是對(duì)單個(gè)產(chǎn)品的一致性還是跨產(chǎn)品的體驗(yàn)一致性，都會(huì)有質(zhì)的提升；
2. 保證資產(chǎn)在一定的約束規(guī)則下更好的實(shí)現(xiàn)擴(kuò)展性，從而達(dá)到資產(chǎn)自生長(zhǎng)的目的；
3. 資產(chǎn)交互規(guī)則的標(biāo)準(zhǔn)化可以助力設(shè)計(jì)到開發(fā)的精準(zhǔn)同步，助力研發(fā)提效。

在了解完“模式化”的概念之后，我們來(lái)了解一下“模式化”資產(chǎn)設(shè)計(jì)是如何運(yùn)作的。我們將“模式化”設(shè)計(jì)分為四個(gè)步驟，通過這四個(gè)步驟，就可以構(gòu)建出通用性強(qiáng)且邏輯清晰的頁(yè)面模版和業(yè)務(wù)組件。

它們分別是：

• 定義邊界
• 遞進(jìn)拆分
• 元素窮舉
• 約束性規(guī)則

當(dāng)然，這個(gè)四個(gè)步驟不是一個(gè)線性的順序，你可以根據(jù)具體的資產(chǎn)對(duì)象去考慮使用某一種方法。接下來(lái)，我會(huì)通過四個(gè)具體的設(shè)計(jì)案例來(lái)跟大家分享每個(gè)方法具體如何使用。

2. 案例分享

第一步：定義邊界

在開展一個(gè)資產(chǎn)設(shè)計(jì)項(xiàng)目之初，梳理頁(yè)面模板類型之時(shí)，我們就應(yīng)該清楚的定義邊界，定義邊界通常我們就認(rèn)真思考幾個(gè)問題：

1. 每個(gè)模板具體解決什么樣的問題？
2. 模板底層的頁(yè)面結(jié)構(gòu)和底層邏輯是什么？
3. 設(shè)計(jì)出來(lái)的模板間是否存在模凌兩可，似乎都可以解決同一個(gè)問題的情況？

其實(shí)并不是模板越多越好，而是邊界定義的越清晰越好。每個(gè)模版都相對(duì)獨(dú)立，能夠解決對(duì)應(yīng)的問題，覆蓋典型的業(yè)務(wù)場(chǎng)景，才是好的模板。

今年，我們重新升級(jí)了 Ant Design 的模板，更清晰的定義了每個(gè)模版的邊界和所要解決的問題。增加了兩個(gè)模板類型：數(shù)據(jù)可視化和IDE編輯器。新增了15個(gè)模板頁(yè)面，在原來(lái)的基礎(chǔ)上優(yōu)化了13模板的頁(yè)面結(jié)構(gòu)和內(nèi)容。這些模版我們會(huì)在內(nèi)部先進(jìn)行驗(yàn)證使用一段時(shí)間，更好的評(píng)估其覆蓋度和可用性，后期才會(huì)逐步開放出來(lái)供大家參考使用。

第二步：遞進(jìn)拆分

遞進(jìn)拆分是指，當(dāng)我們定義完邊界，開始對(duì)單個(gè)頁(yè)面模板進(jìn)行設(shè)計(jì)的時(shí)候，我們要對(duì)這個(gè)頁(yè)面進(jìn)行用戶群以及信息內(nèi)容進(jìn)行拆分。

用數(shù)據(jù)可視化模板的頁(yè)面舉例，我們將使用這類模板的用戶分為兩類，第一種是決策者，這類用戶通常更加關(guān)注總覽數(shù)據(jù)、核心數(shù)據(jù)，他們會(huì)對(duì)數(shù)據(jù)做宏觀的趨勢(shì)分析。因此，在頁(yè)面中他們更加傾向于數(shù)據(jù)概覽層面的信息內(nèi)容，在設(shè)計(jì)該類型的模板時(shí)，需要考慮圖表的展示形式是否適合宏觀數(shù)據(jù)的表現(xiàn)，在整個(gè)頁(yè)面布局時(shí)，需要評(píng)估數(shù)據(jù)信息的顆粒度和數(shù)據(jù)范圍。

而另一類的用戶是執(zhí)行者，這類用戶更加關(guān)注數(shù)據(jù)的詳情、數(shù)據(jù)的細(xì)節(jié)，他們會(huì)針對(duì)細(xì)節(jié)的數(shù)據(jù)進(jìn)行下鉆的分析或做出一些角色，對(duì)數(shù)據(jù)進(jìn)行加工處理。因此，在頁(yè)面中，他們更加傾向于分析型和詳情型的信息內(nèi)容，在設(shè)計(jì)該類型的模板時(shí)，也同樣需要考慮圖表展示形式以及頁(yè)面流的整體數(shù)據(jù)結(jié)構(gòu)展示分層。

于此同時(shí)，這兩類用戶不是相互獨(dú)立的，在具體的工作職能中，也會(huì)存在交叉的部分，因此，我們可以通過數(shù)據(jù)分析的模板來(lái)解決這個(gè)問題，通過宏觀數(shù)據(jù)和微觀數(shù)據(jù)在頁(yè)面中的分層展示，來(lái)滿足不同用戶的訴求。

通過以上的分析，我們獲得了這樣一張圖，從這張圖中可以看到?jīng)Q策者更加期待頁(yè)面呈現(xiàn)描述型的信息，幫助其快速獲得結(jié)論。而執(zhí)行者更加傾向于探索型的信息，為他的決策提供更多的依據(jù)。

最終，我們可以設(shè)計(jì)出三張數(shù)據(jù)可視化的模板，設(shè)計(jì)師可以根據(jù)自己的業(yè)務(wù)需求，選擇其中的模板快速搭建數(shù)據(jù)可視化的相關(guān)頁(yè)面。

第三步：元素窮舉

在列表頁(yè)的模板場(chǎng)景中，根據(jù)業(yè)務(wù)的不同，可能出現(xiàn)的數(shù)據(jù)元素或組件元素也是多種多樣的，面對(duì)這樣一個(gè)復(fù)雜的場(chǎng)景，如何去保證組件的通用性和覆蓋率，成了我們最大的挑戰(zhàn)。在這個(gè)過程中，我們推翻重做了三次，嘗試了很多方法，但值得慶幸的是每一次都離我們的目標(biāo)越來(lái)越近。最終我們總結(jié)出了“模式化”設(shè)計(jì)的第三步，元素窮舉。

如上圖所示，首先根據(jù)“模式化”設(shè)計(jì)第二步中所提到的，拿到一個(gè)模板頁(yè)面，我們要去做遞進(jìn)拆分，因此，根據(jù)用戶的操作習(xí)慣和瀏覽路徑，我們將一個(gè)列表頁(yè)拆分為了四個(gè)模塊，從上至下分別是：數(shù)據(jù)過濾、數(shù)據(jù)統(tǒng)計(jì)、數(shù)據(jù)展示&操作、分頁(yè)。

在完成遞進(jìn)拆分之后，針對(duì)每個(gè)區(qū)塊我們做了元素的窮舉，最細(xì)顆粒的去拆解每個(gè)可能可以替換的元素或者可能可以被約束的規(guī)則以及交互控件。通過對(duì)這些控件的設(shè)計(jì)，就可以保證日后列表組件的拼裝能力更強(qiáng)。例如，在數(shù)據(jù)過濾區(qū)塊，我們窮舉了用戶可能會(huì)出現(xiàn)的過濾行為，包括：輕量篩選、組合查詢、二級(jí)切換、復(fù)合篩選、高級(jí)查詢、搜索等。針對(duì)這些行為我們就可以設(shè)計(jì)出對(duì)應(yīng)的組件來(lái)滿足其需求。

如上面兩張圖所示，當(dāng)我們的元素窮舉出來(lái)并設(shè)計(jì)成組件后，設(shè)計(jì)師就可以根據(jù)自己的需求隨意的進(jìn)行組合拼裝快速完成列表頁(yè)的搭建。

在完成模塊的元素窮舉之后，我們嘗試去把實(shí)際的業(yè)務(wù)帶進(jìn)來(lái)試用結(jié)果發(fā)現(xiàn)其實(shí)還不夠，覆蓋度還不夠高，而且他不能夠很好的自生長(zhǎng)，于是我們開始嘗試對(duì)單個(gè)條目去做元素的拆解。

將一個(gè)條目拆分為四個(gè)區(qū)域，如圖所示，分別是：全局功能區(qū)、主題區(qū)、關(guān)鍵信息區(qū)、操作區(qū)。在全局功能區(qū)，主要放置一些對(duì)條目的全局操作，如排序、批量操作、勾選等；在主題區(qū)，需要想用戶展示整個(gè)條目的概覽信息，讓用戶感知整個(gè)條目是什么；在關(guān)鍵信息區(qū)，放置了這個(gè)條目中的一些核心信息，重點(diǎn)強(qiáng)調(diào)整個(gè)條目里有什么，用戶可以通過這些關(guān)鍵信息感知到整個(gè)條目的關(guān)鍵數(shù)據(jù)，用戶或許可以不用下鉆頁(yè)面就可以進(jìn)入到操作區(qū)進(jìn)行相關(guān)的操作，對(duì)數(shù)據(jù)進(jìn)行處理和決策。針對(duì)每個(gè)區(qū)域可能出現(xiàn)的元素我們也進(jìn)行了窮舉和設(shè)計(jì)，保證后期拼裝替換的靈活性。

最終，我們可以基于那些元素，拼裝出適合各種業(yè)務(wù)場(chǎng)景的列表樣式。

第四步：約束性規(guī)則

想要保持產(chǎn)品內(nèi)在的一致性，在設(shè)計(jì)體系中制定高質(zhì)量的約束性規(guī)則尤為關(guān)鍵，這些規(guī)則一般不會(huì)因?yàn)闃I(yè)務(wù)不同而產(chǎn)生較大的差異和變化，以表單填寫為例，表單輸入在企業(yè)級(jí)產(chǎn)品中非常常見，而就是這樣一個(gè)基礎(chǔ)的頁(yè)面，在目前 基于 Ant Design 搭建的產(chǎn)品中依然有很多問題。正如我開篇所說(shuō)“表單頁(yè)中表單的長(zhǎng)短、行動(dòng)按鈕的擺放位置、整體頁(yè)面的布局，”都存在很多不一致的問題。接下來(lái)我想和大家分享一下這次我們?cè)诒韱卧O(shè)計(jì)上做的一些優(yōu)化和思考。

我們將一個(gè)表單拆分為三個(gè)部分，分別是標(biāo)題區(qū)、輸入?yún)^(qū)和提示區(qū)。今天我們會(huì)重點(diǎn)和大家分享輸入?yún)^(qū)我規(guī)則優(yōu)化。在分享之前我們可以看看目前的幾個(gè)問題。

第一個(gè)問題是大部分的設(shè)計(jì)師，在設(shè)計(jì)一個(gè)表單填寫頁(yè)面的時(shí)候，為了美觀，結(jié)合不同的場(chǎng)景會(huì)想出以上三種方案來(lái)應(yīng)對(duì)表單寬度問題，但是這真的解決來(lái)表單填寫頁(yè)面的規(guī)范問題嗎？其實(shí)不然，對(duì)其關(guān)系和布局是表面的視覺呈現(xiàn)問題，這些頁(yè)面依然是沒有規(guī)律沒有邏輯的呈現(xiàn)。

第二個(gè)現(xiàn)問題，很多設(shè)計(jì)師為來(lái)讓頁(yè)面看上去整齊劃一，強(qiáng)行將表單寬度全部統(tǒng)一對(duì)齊，這樣的方式不僅沒有解決表單填寫頁(yè)面規(guī)整的問題，反而給用戶帶來(lái)了新的問題，那就是的寬度無(wú)法為用戶提供輸入量的暗示。

我們提倡在Web端的場(chǎng)景下，表單輸入框的寬度應(yīng)該匹配和暗示其填寫的內(nèi)容。通過這樣的暗示，能夠?yàn)橛脩籼峁┹^好的輸入體驗(yàn)，如上圖右側(cè)的案例所示，金額的輸入框暗示金額輸入的最大數(shù)額，給用戶提供一種安全感。

基于前期問題的分析和梳理，最終我們給表單的寬度制定了一套規(guī)則尺寸，共5種型號(hào)：XS、S、M、L、XL。我們將104px定位表單的最小寬度，將其以倍數(shù)+16px間距為規(guī)則，進(jìn)行生長(zhǎng)，衍生出了如上圖所示的整套表單規(guī)則。不同尺寸的表單可以自由搭配，構(gòu)建出一張錯(cuò)落有致的表單填寫頁(yè)，但其內(nèi)部始終保持秩序性。

最終，我們通過這樣的約束性規(guī)則，根據(jù)業(yè)務(wù)場(chǎng)景可以搭建出成千上萬(wàn)個(gè)不同的表單頁(yè)，形成表面錯(cuò)落有致，內(nèi)部秩序一致的形態(tài)。設(shè)計(jì)師也不用通過主觀和感性的方式去設(shè)定每個(gè)表單的寬度，開發(fā)人員也不需要再去測(cè)量設(shè)計(jì)稿上每個(gè)表單的寬度，實(shí)現(xiàn)來(lái)設(shè)計(jì)到開發(fā)的精準(zhǔn)同步，提升整體研發(fā)效率的同時(shí)也保證來(lái)產(chǎn)品內(nèi)在的一致性。

三、總結(jié)

最后，我們來(lái)畫下重點(diǎn)，整篇文章我們給大家分享來(lái)一個(gè)方法和四個(gè)步驟。我們希望通過“模式化”的設(shè)計(jì)方法，提升產(chǎn)品體驗(yàn)的一致性，保證資產(chǎn)的擴(kuò)展性和自生長(zhǎng)，助力研發(fā)提效。

四個(gè)和步驟講到的是“模式化”設(shè)計(jì)方法的具體內(nèi)容，分別是：定義邊界、遞進(jìn)拆分、元素窮舉和約束性規(guī)則。你可以通過設(shè)計(jì)的四個(gè)步驟構(gòu)建自己團(tuán)隊(duì)的設(shè)計(jì)資產(chǎn)。如果不知道如何時(shí)候，可以參考一下文章中的四個(gè)小案例，或許對(duì)你會(huì)有所啟發(fā)。

Ant Design 發(fā)展到今天的 4.0 。我們還在不斷探索設(shè)計(jì)體系的邊界，并嘗試突破邊界，在設(shè)計(jì)資產(chǎn)部分，我們希望做通用性更強(qiáng)，覆蓋度更廣的組件，能夠滿足更多的業(yè)務(wù)場(chǎng)景，也希望通過一套方法來(lái)保證資產(chǎn)的內(nèi)在秩序和一致性。

同時(shí)，做為一套開源的設(shè)計(jì)資產(chǎn)，面對(duì)眾多的業(yè)務(wù)場(chǎng)景，和復(fù)雜的業(yè)務(wù)環(huán)境。我們也希望 Ant Design 的外在是幻化萬(wàn)千的，我們期待有更多的設(shè)計(jì)師和我們一起來(lái)構(gòu)建 Ant Design 設(shè)計(jì)資產(chǎn)，讓其在更多的場(chǎng)景中落地生根，自然生長(zhǎng)，更好的服務(wù)產(chǎn)品。

作者：吾笙，螞蟻集團(tuán)設(shè)計(jì)師

本文由 @Ant Design 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自Unsplash，基于 CC0 協(xié)議