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

編輯導語：設計系統對于B端產品組件設計來說十分重要，本篇文章作者分享了有關B端產品組件設計細節方面的內容以及分析了大廠做設計系統的原因，具體分析了其作用等，感興趣的一起來看一下吧。

本文源于讀者和粉絲的提問，以及我前段時間在做 Ant Design 設計與運營工作中的經驗沉淀和總結，希望對你有幫助。

一、Q1 為什么大廠都要做設計系統

最近隨著TDesign、ArcoDesign 等設計系統陸續發布，經常會有同學問我這樣的問題：

• 為什么這些設計系統感覺差異不大？大廠連這也要卷一卷？
• 設計系統雖然要注重普適性，但是不是也要有自己的品牌表達呢？
• 這些設計系統要怎么比較、分析和學習呢？

各大廠都有自己的設計系統，你可能會覺得大廠們太卷了，簡直就是神仙打架。但大廠的設計系統絕對不是為了“卷”而做。之所以要做，原因至少有這幾點：

1. 業務多

大廠的業務和產品多且繁雜，業務中可復用的能力和經驗在長時間的積累下也會越來越多。

沉淀下來的設計系統會對自己業務起到強有力支撐和提效作用。有沉淀且不缺少應用場景，也可以保證設計系統有較高的使用頻率，促進其良性發展。

2. 資源足

相對于小公司來說，大廠有更多的成本和資源可以用于做資產類的沉淀、研究和輸出。大廠也理應在相應的領域多做探索和經驗積累，回饋用戶和市場的信任。

3. 權威高

大廠的設計水平相對來說具備較強的穩定性，輸出的質量更有保證，可以發聲、傳播的渠道和方式也更多，也有實力在行業內樹立起可靠、標準的規則話語權。

從以上幾點不難看出設計系統之于大廠來說，對于內部可以賦能業務、降本提效；對于外部可以提升自己的話語權，這其實是一個雙贏的過程。

二、Q2 設計系統間的共性與個性

拋開代碼層面不談，僅從設計師的使用場景出發，用過 Ant Design 和 Arco Design 的設計師大概會覺得二者并沒有什么差異 —— “這些設計系統好像都差不多哎。”

早些年 Ant Design 在設計系統領域已打過比較牢靠的框架基礎，其他大廠進行借鑒是很正常的事情，沒有必要重復造輪子。

因此這些設計系統最基礎的結構和框架層面是大差不差的，看上去就好像都長一個樣子。

但其實基于我們上一節說到的原因，究其細節，各家也都有各家的特點和看家本領，在應用和功能層面并不完全一致。

那作為設計師該如何對大廠們的設計系統做分析和學習呢？這里給大家提供幾個比較方法和學習思路，你可以嘗試從以下方面入手：

1. 功能場景

對于設計系統的功能和應用場景做分析，包括但不限于以下內容：

1）側重的用戶和場景

• 是以設計師為主、開發為主還是兩者兼備；
• 是初級組件（基礎組件）還是高級組件（業務組件）二者區別可閱讀這里；
• 用于哪些特定的業務場景和領域等等。

2）側重 C 端還是 B 端

支付寶設計體系曾經就有一套針對 C 端的移動端設計體系（不過也在和 AntD mini 版本進行整合）。

3）側重國內還是國外（國際化）

國內大廠的設計系統很少考慮國際化應用場景，只有個別會提及一些國際化的設計方法和思路。這一點，國外的設計系統考慮得相對全面。

4） 獨特的功能應用或外掛服務

各個設計系統在這一點上可謂百花齊放，比如 AntD 還可以與 AntV 的可視化圖表聯動；Arco Design 產出一套配色編輯器和圖標平臺等功能。

2. 體驗感受

這里既要看應用設計系統做出的產品帶給用戶的體驗和感受，也要看設計師和開發在使用設計系統的過程中的體驗感受。包括但不限于以下內容：

• 設計整體基調：包括設計系統的價值觀和設計原則等，奠定整個設計系統的基調；
• 視覺語言特征：包括全局樣式、排版效果、動效特征等，會使用戶產生最直觀的視覺感受；
• 交互體驗特征：包括交互反饋和針對用戶操作的細節處理，決定用戶的使用過程是否流暢舒適；
• 系統品牌建設：這點不僅僅是指設計系統中的組件的風格與品牌特性，也包括閱讀和了解整個設計系統（網站、品牌運營與推廣等內容）的體驗。

3. 搭建方式

這指的是設計系統在搭建過程中的思路和工作方法，包括但不限于以下內容：

• 觸達方式：指的是設計師和開發使用設計系統的方式。大部分設計系統依賴官網，提供 Figma 或 Sketch 兩種 Toolkits。也有一些獨特和有時效性的方式，比如 AntD 提供的 Sketch 插件 Kitchen；
• 協作機制：利用人脈資源，看看在這些設計系統中有沒有你的熟人可以約著聊聊，更好地了解背后的工作和搭建方式；
• 更新頻率：小迭代和大迭代的更新速率和通知方式等。

因為設計系統內容繁雜，所以建議大家在分析之前，先思考做對比的目的和目標。

不同的目的，對于以上三個方面比較的側重點也會不同。比如，如果你是在對已有組件庫進行品牌升級，就應該對于設計整體基調和整體系統的品牌建設做更深入的調研和比較。

三、Q3 頁面級別的組件，到底有什么用

這是我收到的一個讀者朋友的提問：

“我看到一些公司在搭建頁面組件庫，將一些產品通用的布局整合起來直接用。我們這樣做真的可以提高效率嗎？這樣做是否正確呢？”

相信很多朋友也都有類似的疑問。我曾經在文章：「基礎組件」和「高級組件」的區別 一文中聊過沉淀業務組件的必要性。

頁面級組件與前兩者又有所不同，它的功能更為整體，但應用的場景更為基礎。

我們首先需要明白，真正有效的組件，都是設計師和開發共建的結果，其本質功能就是降本提效和達到一致性。

頁面級組件的作用和意義有以下幾點：

1. 框架穩定

頁面級組件可以使產品在響應式布局和整體框架上保持統一。簡單來說，就是對于任何新增的頁面，都不會出現模塊所占的面積比例不一致、行間距不一致或表單寬度不一致等問題。

2. 交互簡明

一致的頁面框架，在用戶體驗的層面上不會做過多變化，交互更加簡單明了，符合用戶預期。也更有利于用戶將注意力集中在任務操作上。

3. 視覺統一

產品的視覺風格在框架一致的基礎上，也更容易做到統一，在同產品中可以保持視覺風格的穩定；在不同產品線中也可以保持相對一致，更有利于傳遞公司 / 品牌心智。

4. 降本提效

不論設計師還是開發，在沉淀此類組件之后，都可以快速從 0-1 搭建出符合及格線質量的產品頁面。開發對于設計稿的還原度會更高，節省的時間可以用于調整細節和優化功能。

但并不是所有的頁面都值得被沉淀成頁面組件。頁面級組件是否真的能發揮出以上優勢，取決于你的業務特征，主要看以下幾個方面：

1）業務需求量大且為初期

業務對于設計和開發的需求量很大，且需求的類型相似，比如都是 B 端金融場景類或都是 G 端政務服務類。

尤其是項目處于0-1 的初期階段，對用戶體驗沒有太多復雜需求，以實現基本功能為主要目標。

2）功能和布局的特征明顯

業務中的功能模塊的特征和頁面布局的框架足夠明顯，且該類型的頁面出現的頻率很高，如表單頁面、卡片選擇頁面。

3）業務的體驗風格要求統一

業務比較重視品牌一致性和用戶心智的養成。在交互體驗和視覺風格上，多個產品線的產品希望保持一致，不需要做過多個性化的交互或視覺上的處理。

4）合理的工具及應用規范

對于頁面級組件來說，選擇好用的設計工具，并制定有效的組件使用規范尤為重要。頁面級組件在使用中一定會涉及到修改和補充，設計工具和規范可以幫助設計師在需要修改時快速做出局部修改和替換。

關于設計規范如何編寫，可以閱讀文章：如何編寫設計規范？；關于設計規范如何有效的落地與執行，可以閱讀文章：如何讓設計規范被有效執行？

符合以上情況的業務，就可以嘗試沉淀頁面布局和框架。但如果業務不具備以上特點而盲目沉淀，很有可能會為設計師帶來額外的工作量和無效的積累，也有可能會變成限制設計師能力和創造力的枷鎖。

可以說，沉淀頁面框架這個行為，本身沒有正確與否的評價標準，關鍵是看它是否適合你的業務訴求、能否匹配你的工作方法。

畢竟，組件的本質功能就是降本提效和達到一致性，不是為了設計組件而做組件。

作者：元堯；微信公眾號：長弓小子。

本文由@ 元堯 原創發布于人人都是產品經理。未經許可，禁止轉載。

題圖來自 Unsplash，基于CC0協議。