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

組件庫最大的價值在于提升整個團隊的產(chǎn)研效率，使設(shè)計質(zhì)量得以保障的同時提升產(chǎn)品整體的用戶體驗。

產(chǎn)品：這次需求很簡單，對比上期只有字段和操作項的差異，把上次的稿子直接復(fù)制一下應(yīng)該不用很多時間吧？

交互：上次你是不是做過高級篩選組合？我這期需求要用到，你把那部分稿子發(fā)給我用用吧。

研發(fā)：這個組件我在其他模塊里看到過已有樣式，這次為啥用不一樣的？不然又要重復(fù)開發(fā)呀，能不能給統(tǒng)一下。

視覺：同一個按鈕在不同的模塊顏色不一樣誒，這次要和哪個模塊一致?。?/p>

…

通過以上對話不難看出，在整個互聯(lián)網(wǎng)產(chǎn)品設(shè)計到研發(fā)的過程中，最常出現(xiàn)在需求溝通與研發(fā)過程中由于缺少統(tǒng)一的規(guī)范和標(biāo)準(zhǔn)化體系來指導(dǎo)實踐，導(dǎo)致實施環(huán)節(jié)各方溝通成本高，造成設(shè)計成果與實現(xiàn)有一定差距，影響用戶體驗。

通用組件和業(yè)務(wù)組件混用導(dǎo)致設(shè)計模式和代碼復(fù)用率低，尤其是當(dāng)業(yè)務(wù)發(fā)展到一定體量時，對于復(fù)雜產(chǎn)品的大量重復(fù)且類似的需求場景。如果沒有一種高效的工具和規(guī)范來協(xié)同工作，將大大影響團隊的生產(chǎn)及溝通效率。

一、問題

• 認(rèn)知：產(chǎn)品、研發(fā)、設(shè)計師對于同一需求都有自己理解的解決方案，缺少統(tǒng)一規(guī)范的約束，難以達成共識。
• 效率：設(shè)計效率低，交互原型的維護成本及上下游團隊的溝通成本高，易造成不專業(yè)的印象。
• 品質(zhì)：認(rèn)知和效率的局限性，最終導(dǎo)致實施落地的產(chǎn)品質(zhì)量和用戶體驗難以得到保障。

二、解決

大家應(yīng)該都知道樂高（LEGO）積木，它是一種可以互相嵌套組合的塑料積木，形狀共有1300多種，每種形狀都有12種不同的顏色，可以拼插出多種造型。其實組件庫的工作方式就很像樂高，通過小元件的互相嵌套來產(chǎn)生多種組件或模塊，多種組件模塊結(jié)合生成頁面結(jié)構(gòu)。

我們先來梳理一個概念，組件庫是什么？

組件庫是設(shè)計系統(tǒng)的一部分，是在我們常規(guī)界面設(shè)計過程中可以直接用來制作交互圖例和搭建頁面的組件集合，它可以作為單個組件獨立存在，也可以通過多個組件組合而成的結(jié)構(gòu)或模式來解決類似場景的設(shè)計問題。組件庫是在約束條件下去構(gòu)建解決方案的過程，所以組件的使用也需遵循一定的規(guī)范，按照一套標(biāo)準(zhǔn)化的體系復(fù)用于多個業(yè)務(wù)場景。

一個有效的組件庫，可以幫助設(shè)計師和研發(fā)提高工作效率，提升設(shè)計專業(yè)度的同時讓產(chǎn)品本身的體驗更加一致、可學(xué)，品牌感更強，它所具備的基本特征一定是通用的、靈活的、復(fù)用的。

• 通用性：意味著足夠基礎(chǔ)和常見且不帶業(yè)務(wù)屬性，參與設(shè)計環(huán)節(jié)的每個人都應(yīng)該知道這個組件的功能及目的，同時具備一定擴展性。
• 靈活性：是要求元件的組合需靈活，可以在不同場景下可以通過互相組合來快速搭建交互框架原型圖，并根據(jù)不同頁面結(jié)構(gòu)的演變來適應(yīng)新的業(yè)務(wù)需求。
• 復(fù)用性：指的是適用于多個業(yè)務(wù)或產(chǎn)品，在設(shè)計過程和研發(fā)過程中都可以高頻復(fù)用。

那么用組件庫這種標(biāo)準(zhǔn)化體系來完成設(shè)計方案時，到底能帶來怎樣的價值？

三、組件庫的價值

• 保證產(chǎn)品體驗的一致性：對于一個含有多業(yè)務(wù)系統(tǒng)的大型復(fù)雜產(chǎn)品，每個獨立的業(yè)務(wù)系統(tǒng)雖然在功能上有一定區(qū)別，但整體的用戶體驗需要滿足基本的一致性。比如：當(dāng)我使用同一個產(chǎn)品中的業(yè)務(wù)系統(tǒng)A和業(yè)務(wù)系統(tǒng)B時，我能通過類似的頁面結(jié)構(gòu)、組件及樣式的一致性、操作反饋乃至提示文案結(jié)構(gòu)的一致性，來感知到我使用的A、B業(yè)務(wù)系統(tǒng)隸屬于同一個產(chǎn)品。
• 提升設(shè)計師的效率：在需求量巨大且需求來自不同的業(yè)務(wù)線時，需要逐一繪制頁面及組件，造成大量重復(fù)勞動，并且在評審及需求溝通環(huán)節(jié)還可能存在不斷地細節(jié)調(diào)優(yōu)，所以對于設(shè)計師而言，組件的高頻復(fù)用能大大提升設(shè)計效率，使設(shè)計師更多的將精力聚焦于理解和解決用戶的實際問題。
• 提升產(chǎn)研團隊的效率：通用場景及普通需求直接按規(guī)范進行設(shè)計和研發(fā)，減少上下游對同一頁面及組件使用方式的不同理解而產(chǎn)生的多余溝通成本。
• 利于沉淀設(shè)計規(guī)范：組件本身的設(shè)計和使用方式就可以直接作為交互和視覺規(guī)范的一部分，按照統(tǒng)一的設(shè)計規(guī)范來確定需要使用的主題色、組件樣式、組合方式及頁面結(jié)構(gòu)，可以快速搭建出一個或多個產(chǎn)品的交互框架。

那么我們開始介紹如何構(gòu)建一個企業(yè)級UI組件庫。

四、構(gòu)建「FishDesign」企業(yè)級UI組件庫

下文我將用前段時間參與的「FishDesign企業(yè)級UI組件庫」項目為例，通過在網(wǎng)易七魚產(chǎn)品中的應(yīng)用，來介紹一個企業(yè)級UI組件庫的設(shè)計原則，內(nèi)容構(gòu)成包含哪些類型和元素，每種組件類型在分類和設(shè)計過程中是如何考量的。本文側(cè)重講述構(gòu)建一個組件庫所涵蓋的內(nèi)容，而不是某組件類別本身的設(shè)計方法。

顧名思義，“企業(yè)級”意味著FishDesign所服務(wù)的業(yè)務(wù)都是具備一定體量的，可能是服務(wù)一個包含了多個獨立子業(yè)務(wù)系統(tǒng)的大型復(fù)雜產(chǎn)品，比如網(wǎng)易七魚；也可能是同時服務(wù)多款產(chǎn)品，比如網(wǎng)易七魚和網(wǎng)易定位等。

組件庫是幫助設(shè)計者及前端工程師快速構(gòu)建業(yè)務(wù)系統(tǒng)的工具，除了最重要的組件內(nèi)容，還需要設(shè)計原則、配色方案及布局規(guī)范來指導(dǎo)具體業(yè)務(wù)產(chǎn)品的設(shè)計有效落地。

1. 設(shè)計原則

基于FishDesign目前主要是幫助搭建B端企業(yè)級產(chǎn)品，而B端業(yè)務(wù)的產(chǎn)品目的決定了它所才采取的設(shè)計模式，所以我們將用以下四點作為塑造組件庫的設(shè)計原則：

• 簡潔：如無必要，勿增實體，慎重篩選客戶當(dāng)前需要信息內(nèi)容。
• 直接：提供用戶操作后的直接反饋，保證用戶的操作結(jié)果符合預(yù)期。
• 優(yōu)雅：設(shè)計方案追求優(yōu)雅，給使用者有質(zhì)感的操作感受。
• 適應(yīng)性：設(shè)計方案需提供可擴展能力及適應(yīng)性，以適應(yīng)不同模式的企業(yè)使用。

2. 顏色

產(chǎn)品會根據(jù)自身的產(chǎn)品目標(biāo)和受眾群體去選定產(chǎn)品的配色方案。前文提到，一個有效的組件庫需滿足通用性、靈活性、復(fù)用性，像配色方案就應(yīng)該能被靈活自定義來應(yīng)對多樣化的訴求。以網(wǎng)易七魚為例（下文均以網(wǎng)易七魚為例），設(shè)置了1種主色，4種輔助色和6種中性色來搭建一致的外觀感受。

• 主色：選擇藍色系來傳達智能服務(wù)、信任可靠、技術(shù)創(chuàng)新的品牌形象。
• 輔助色：除了品牌主色調(diào)藍色，在輔助色中也存在一樣的藍色，那是因為藍色是相對泛用性較廣的色系，用于產(chǎn)品中的主操作按鈕、文字按鈕或icon等；紅色喚起注意并昭示危險，所以一般用于謹(jǐn)慎操作及錯誤提示；黃色則常用于警示信息，提示用戶操作可能帶來的風(fēng)險及后果；綠色能傳遞安全和健康的情緒感受，用于正向反饋提示或成功操作的引導(dǎo)。
• 中性色：一般采取黑灰色調(diào)來展示產(chǎn)品的文本信息、背景和邊框色，用來表現(xiàn)層次結(jié)構(gòu)。

3. 布局規(guī)范

為處理多業(yè)務(wù)中網(wǎng)頁設(shè)計區(qū)域內(nèi)的信息收納問題，我們用規(guī)則的網(wǎng)格陣列來指導(dǎo)和規(guī)范版面布局以及信息分布，即柵格系統(tǒng)和頁面布局。FishDesign在12柵格系統(tǒng)的基礎(chǔ)上，將整個設(shè)計區(qū)域按照24等分的原則進行劃分，來增加頁面的相似度，提升用戶體驗。

我們通過基本的配色及布局規(guī)范解決了產(chǎn)品風(fēng)格及信息區(qū)塊框架的設(shè)計，那組件庫中重要的組件部分，是如何作用于產(chǎn)品搭建的？

Brad Frost提出的「原子化設(shè)計理論」可以幫助我們更好的理解，原子化設(shè)計的靈感來自于現(xiàn)實世界當(dāng)中的分子結(jié)構(gòu)，UI中顆粒度最小的元素，即“原子”，組成了顆粒度較大的元件，即“分子”，而諸多分子又組成了更加復(fù)雜的組件與模塊，即“有機體”。

組件庫構(gòu)建之初無法一應(yīng)俱全，是需要后續(xù)不斷的維護與迭代的。如何在最初海量組件中圈定適合的組件范圍呢？最合適的切入點就是從身邊的業(yè)務(wù)場景出發(fā)，從最基本、最簡單、最小的元素入手。

4. 組件分類

我們根據(jù)當(dāng)下已有的業(yè)務(wù)場景和對往后一段時期的業(yè)務(wù)發(fā)展方向進行規(guī)劃，將組件庫的組件類型分為通用組件和業(yè)務(wù)組件。一般業(yè)務(wù)組件庫是不對外的（畢竟使用場景特殊也有限，放出來參考意義不大），所以在FishDesign官網(wǎng)只能看到通用組件部分。

• 通用組件：指適用范圍廣、復(fù)用頻次高，可復(fù)用于多個業(yè)務(wù)且不包含業(yè)務(wù)邏輯。比如導(dǎo)航欄、按鈕、toast、彈窗等。
• 業(yè)務(wù)組件：這類組件對比通用組件而言最大的特點就是包含了較多業(yè)務(wù)屬性，跟產(chǎn)品功能有較強的關(guān)聯(lián)性，所以影響到適用范圍可能僅限于于1~2個業(yè)務(wù)系統(tǒng)或特殊場景，且復(fù)用頻次不高。比如網(wǎng)易七魚的在線和呼叫系統(tǒng)中的咨詢分類組件。

一個大型復(fù)雜的業(yè)務(wù)產(chǎn)品通常有不止一位設(shè)計師或前端工程師參與設(shè)計，需要在多種處理方式中選擇合適的設(shè)計模式來解決不同的場景問題，這要求根據(jù)組件屬性的差異，需對通用組件做細分，那么如何確定通用組件中的子分類呢？

1. 競品學(xué)習(xí)與研究，窮舉該部分產(chǎn)品類型中的組件類型。
2. 遍歷自己所負(fù)責(zé)產(chǎn)品內(nèi)已有的業(yè)務(wù)場景，提取并整理業(yè)務(wù)場景中所用到的組件。
3. 將整理好的兩部分組件進行篩選去重，保留高頻通用的部分。比如：同樣是下拉篩選組件，由于缺少統(tǒng)一規(guī)范和組件，可能導(dǎo)致的后果就是在同一產(chǎn)品不同業(yè)務(wù)系統(tǒng)的相同場景下，使用的組件從樣式到交互方式都不一致。我們要做的就是對這部分在類似業(yè)務(wù)場景中，使用了多種表達形式的組件做合并去重，然后通過設(shè)計組內(nèi)審來圈定最后通用組件的范圍。
4. 基于組件的屬性和使用場景，對圈定的組件范圍進行歸類。

由上述步驟，我們將通用組件繼續(xù)細分為五個子類別：基礎(chǔ)組件、導(dǎo)航、數(shù)據(jù)錄入、數(shù)據(jù)展示、操作反饋。

• 基礎(chǔ)組件：即按鈕、圖標(biāo)等，相較于其他組件的使用場景更通用，或其他組件在實現(xiàn)時依賴了這些組件來實現(xiàn)的組件類別。
• 導(dǎo)航：即導(dǎo)航菜單、標(biāo)簽、面包屑等，可以幫助用戶產(chǎn)品系統(tǒng)內(nèi)快速找到所在頁面層級或位置的組件類別。
• 數(shù)據(jù)錄入：即輸入框、選擇器、表單等，支持用戶將數(shù)據(jù)信息錄入到系統(tǒng)的組件類別。
• 數(shù)據(jù)展示：即圖表、表格、氣泡卡片等，將錄入到系統(tǒng)的數(shù)據(jù)信息多樣化展示出來的組件類別。
• 操作反饋：即對話框、警告提示(Alert)、全局提示(Toast)等，在用戶操作前后，使系統(tǒng)狀態(tài)得以合理反饋的組件類別。

五、用組件庫設(shè)計「網(wǎng)易七魚」示例

以網(wǎng)易七魚為例看下有組件庫參與搭建的設(shè)計示例，以下頁面中所用組件均出自FishDesign組件庫。

「導(dǎo)航組件」使用示例：

「表格組件」使用示例：

「彈窗組件」使用示例：

「步驟組件」使用示例：

寫在最后

組件庫最大的價值在于提升整個團隊的產(chǎn)研效率，使設(shè)計質(zhì)量得以保障的同時提升產(chǎn)品整體的用戶體驗。

我們對構(gòu)建企業(yè)級UI組件庫的步驟及要素做個簡單回顧：

• 首先，明確組件庫所需解決的問題及存在的價值，這決定組件庫的體量和服務(wù)范圍是什么，以及構(gòu)建的時機是否合適。
• 其次，通過競品分析并結(jié)合身邊最熟悉或深耕的業(yè)務(wù)入手，通過產(chǎn)品目的來選擇設(shè)計模式，從最小元素開始逐步整理，包括產(chǎn)品配色方案和柵格系統(tǒng)等布局規(guī)范。
• 再者，需要對組件庫的重要組成部分“組件”，進行圈定及合理分類。這里需要注意的是，組件范圍的圈定，尤其在組件庫搭建的初級階段并不是越多越好，而是需要有效的覆蓋那些經(jīng)過規(guī)劃的業(yè)務(wù)場景即可。
• 最后，組件庫并不是構(gòu)建完就結(jié)束了，是需要在后續(xù)項目中逐步維護與更新的長期積累過程。

任何組件庫的構(gòu)建都離不開一個優(yōu)秀的團隊在整個設(shè)計過程中的高效協(xié)同，十分感謝參與的設(shè)計師與前端工程師們。上文僅是個人參與過程中的一些經(jīng)驗總結(jié)，還不夠全面，同時篇幅有限，關(guān)于組件的具體設(shè)計考量無法一次詳盡，歡迎一起討論組件庫及標(biāo)準(zhǔn)化設(shè)計體系相關(guān)的更多內(nèi)容。

作者：劉瑩瑩，網(wǎng)易uedc交互設(shè)計師，主要負(fù)責(zé)企業(yè)級B端SaaS產(chǎn)品的交互設(shè)計，對組件庫等標(biāo)準(zhǔn)化設(shè)計體系及產(chǎn)品信息架構(gòu)設(shè)計均有實戰(zhàn)經(jīng)驗，注重商業(yè)價值與用戶價值的平衡。

微信公眾號：網(wǎng)易UEDC

本文來源于人人都是產(chǎn)品經(jīng)理合作媒體@網(wǎng)易UEDC，作者@馮韻

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