目錄
無處不在的手風琴
Bootstrap:熟悉的基準測試
探索引導程序的替代方案
選擇設計系統:超越手風琴
公司特定的重點
可定制性的範圍
首頁 web前端 css教學 誰是設計系統?

誰是設計系統?

Apr 21, 2025 am 10:25 AM

誰是設計系統?

讓我們談談特定的設計系統。儘管基礎概念幾乎受益於任何網站,但現實卻更加細微。

設計系統目前正在引起巨大的嗡嗡聲。最近,新的設計系統的公開版本促使一系列消息敦促我檢查一下。我的最初反應? “看起來不錯。”但這就像瞥了一眼一輛新車的外觀 - 膚淺的評估。真正的理解需要廣泛的使用,並與其建立多個項目,以真正評估其優勢和劣勢。

這提出了至關重要的問題:該設計系統適合我的項目嗎?誰是有意的觀眾?

無處不在的手風琴

許多(儘管不是全部)設計系統包括手風琴。這不是偶然的;它突出了一個關鍵點。

Bootstrap:熟悉的基準測試

Bootstrap的廣泛採用和理解提供了有價值的比較。它的CSS和HTML組件很容易集成,提供了直接的開發體驗。

Bootstrap嚴格是“設計系統”還是“模式庫”是有爭議的。但是,這些術語的可互換使用強調了現有的混亂。

開發人員選擇Bootstrap的原因有幾個:

  • 加速發展。
  • 高質量的組件,對HTML/CSS專業知識較低的開發人員有益。
  • 強大的可訪問功能。
  • [在這裡插入您的原因]

這些好處雖然吸引人,但它已成為任何現代設計系統的標準期望,而不是引導程序所獨有的。

探索引導程序的替代方案

許多開發人員尋求替代引導程序。原因包括:

  • 項目要求(例如,React集成)。
  • 難以定制引導程序。
  • 美學偏好。
  • 簡單的無聊。

選擇或拒絕自舉的動機很多。

選擇設計系統:超越手風琴

選擇設計系統需要仔細考慮。許可是關鍵因素。 Salesforce的閃電設計系統(通常被稱為領導者)已獲得開源許可(BSD第3條,具有FONTIBUTION-SNODERIVITINT 4.0用於字體和圖標)。該許可證闡明了其預期用途:主要用於Salesforce及其相關開發團隊。雖然公開可用,但這並不是所有Web開發人員的通用解決方案。

為什麼公開? Salesforce的規模需要內部和外部團隊的可及性。公共可用性有助於協作並擴大其影響。

關於開源設計系統及其特定用例的討論仍在進行中。考慮到設計系統的上下文特定性質,“開源”是適當的術語,還是“可用來源”更準確?

IBM的碳設計系統是另一種開源選項,明確指出了其目標受眾:IBM設計師和開發人員從事IBM產品。儘管其他人可用,但其主要重點仍然是內部的。

公司特定的重點

公司創建的設計系統固有地首先滿足公司的需求。開源許可並不能否定這一主要重點。同樣的原則適用於政府開發的系統,例如美國網站設計系統,該系統優先考慮政府網站。

美國網頁設計系統(主要是公共領域)是一種寶貴的資源,但其設計優先考慮政府需求,而不是個人開發人員。它的開源性質有助於社區貢獻,影響對公共生活至關重要的網站。

可定制性的範圍

設計系統提供不同程度的可定制性:

  • 零可定制性:執行嚴格的一致性。
  • 預先選擇的變化:提供有限的自定義選項(例如,顏色變化)。
  • BYO主題:為廣泛的自定義提供靈活的框架。

與Bootstrap不同,Shopify的Polaris Design系統雖然開源,但優先考慮內部一致性而不是廣泛的定制。

Google的材料設計最初是用於內部使用的,現在正在積極促進外部使用。雖然最初實施Google美學,但它變得越來越可定制,可以集成品牌。像Lyft,Zappos和NPR這樣的公司展示了成功的定制。

圍繞材料設計的消息傳遞突出了開源設計系統的複雜性。對於Google和其他想使用它的人來說,這是同時的,這是Google的資源和品牌知名度所啟用的壯舉。

設計系統不是商品;僅基於美學的選擇是不足的。必須仔細考慮許可,預期的受眾和可定制性。

我對公共設計系統創建者的建議:明確定義了您的目標受眾並允許使用。目標受眾消息傳遞的解釋差異很大,強調了清晰的溝通需求。

以上是誰是設計系統?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

帶有粘性定位的堆疊卡和一點點的雜物 帶有粘性定位的堆疊卡和一點點的雜物 Apr 03, 2025 am 10:30 AM

前幾天,我發現了科里·金尼文(Corey Ginnivan)網站上的這一點,當您滾動時,彼此之間的卡片堆放集。

Google字體可變字體 Google字體可變字體 Apr 09, 2025 am 10:42 AM

我看到Google字體推出了新設計(Tweet)。與上一次大型重新設計相比,這感覺更加迭代。我幾乎無法分辨出區別

如何使用HTML,CSS和JavaScript創建動畫倒計時計時器 如何使用HTML,CSS和JavaScript創建動畫倒計時計時器 Apr 11, 2025 am 11:29 AM

您是否曾經在項目上需要一個倒計時計時器?對於這樣的東西,可以自然訪問插件,但實際上更多

為什麼Flex佈局中的紫色斜線區域會被誤認為是'溢出空間”? 為什麼Flex佈局中的紫色斜線區域會被誤認為是'溢出空間”? Apr 05, 2025 pm 05:51 PM

關於Flex佈局中紫色斜線區域的疑問在使用Flex佈局時,你可能會遇到一些令人困惑的現象,比如在開發者工具(d...

如何通過CSS選擇第一個類名為item的子元素? 如何通過CSS選擇第一個類名為item的子元素? Apr 05, 2025 pm 11:24 PM

在元素個數不固定的情況下如何通過CSS選擇第一個指定類名的子元素在處理HTML結構時,常常會遇到元素個數不�...

HTML數據屬性指南 HTML數據屬性指南 Apr 11, 2025 am 11:50 AM

您想了解的有關HTML,CSS和JavaScript中數據屬性的所有信息。

使Sass更快的概念證明 使Sass更快的概念證明 Apr 16, 2025 am 10:38 AM

在一個新項目開始時,Sass彙編發生在眼睛的眨眼中。感覺很棒,尤其是當它與browsersync配對時,它重新加載

在前端開發中,如何使用CSS和JavaScript實現類似Windows 10設置界面的探照燈效果? 在前端開發中,如何使用CSS和JavaScript實現類似Windows 10設置界面的探照燈效果? Apr 05, 2025 pm 10:21 PM

在前端開發中如何實現類似Windows...

See all articles