目錄
無處不在的手風琴
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)

熱門話題

Java教學
1658
14
CakePHP 教程
1415
52
Laravel 教程
1309
25
PHP教程
1257
29
C# 教程
1231
24
Google字體可變字體 Google字體可變字體 Apr 09, 2025 am 10:42 AM

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

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

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

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

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

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

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

我們如何創建一個在SVG中生成格子呢模式的靜態站點 我們如何創建一個在SVG中生成格子呢模式的靜態站點 Apr 09, 2025 am 11:29 AM

格子呢是一塊圖案布,通常與蘇格蘭有關,尤其是他們時尚的蘇格蘭語。在Tar​​tanify.com上,我們收集了5,000多個格子呢

如何在WordPress主題中構建VUE組件 如何在WordPress主題中構建VUE組件 Apr 11, 2025 am 11:03 AM

內聯式模板指令使我們能夠將豐富的VUE組件構建為對現有WordPress標記的逐步增強。

php是A-OK用於模板 php是A-OK用於模板 Apr 11, 2025 am 11:04 AM

PHP模板通常會因促進Subpar代碼而變得不良說唱,但這並不是這樣的情況。讓我們看一下PHP項目如何執行基本的

編程SASS創建可訪問的顏色組合 編程SASS創建可訪問的顏色組合 Apr 09, 2025 am 11:30 AM

我們一直在尋求使網絡更容易訪問。顏色對比只是數學,因此Sass可以幫助涵蓋設計師可能錯過的邊緣案例。

See all articles