丁香激情婷婷午夜版,av先锋成人网站免费,国产精品久久久久久久蜜月块,国产高清自拍视频,激情五月婷婷综合,欧美激情手机在线,91蜜桃视频在线观看,爱操视频

▲點擊"三分設"關注，回復"社群"加入我們

歡迎來到專業(yè)設計師學習交流社區(qū)

三分設｜連接知識，幫助全球 1 億設計師成長

轉自：今日頭條UED

編輯：王翎旭

共 3551 字 14 圖預計閱讀 9 分鐘

PART-ONE

ArcoDesign 是什么？

ArcoDesign 由字節(jié)跳動 GIP UED & 架構前端團隊聯(lián)合打造的一款企業(yè)級設計系統(tǒng)。

團隊先后負責過多款億萬級用戶產(chǎn)品的體驗設計和新產(chǎn)品的孵化探索，包括今日頭條、西瓜視頻、火山引擎ToB 平臺業(yè)務等。

https://arco.design/→

在打磨了近 3 年之后，通過字節(jié)內部大量業(yè)務沉淀和驗證，我們在 10 月 27 日舉辦的首屆稀土開發(fā)者大會上，正式開源了 ArcoDesign 設計系統(tǒng)，旨在讓社區(qū)聽見更多的聲音，同時讓公司創(chuàng)造“最佳實踐”的設計系統(tǒng)，為更多中小型企業(yè)及個人設計師和開發(fā)者提效，創(chuàng)造更多高效美觀的 “最佳實踐”。

設計理念

ArcoDesign 以務實浪漫，連接高效與美為愿景，遵從一致（Agreement）、韻律（Rhythm）、清晰（Clear）、開放（Open）的設計原則，幫助連接開發(fā)與設計之間的鴻溝，從開發(fā)者和設計師視角，以更系統(tǒng)化的思路解決業(yè)務問題，通過細致完善的設計資產(chǎn)，簡單流暢的工具集和生態(tài)平臺，快速提升工作的效率和愉悅程度。

PART-TWO

ArcoDesign 有哪些不一樣？

基于 Arco 的設計規(guī)范和 3 年的業(yè)務實踐經(jīng)驗，我們產(chǎn)出了 67 個原子級基礎組件，全面覆蓋布局、數(shù)據(jù)展示、數(shù)據(jù)輸入、反饋等交互場景。

靈活定制 · 豐富的原子級組件

更豐富細小的組件顆粒度和靈活的定制能力幫助用戶輕松創(chuàng)造契合自身業(yè)務的百變主題風格。React、Vue、Mobile 多套開發(fā)框架提升開發(fā)工作靈活度。

智能連接 · 全面的生態(tài)平臺

Arco 提供了一套完整的生態(tài)平臺，旨在讓開發(fā)者和設計師能夠用一種語言進行溝通，無縫連接上下游工作流。此次開源的平臺包括：風格配置平臺（Design Lab）和色彩配置工具（Palette）支持在線構建并實時預覽個性化主題和色板，讓用戶所見即所得的聚焦于設計創(chuàng)作與應用。

物料市場（Material Market）和圖標平臺（Iconbox）提供了完善的工具和流程幫助業(yè)務團隊快速構建業(yè)務定制圖標、組件、模塊、頁面等可復用資產(chǎn)。中后臺最佳實踐（Arco Pro）整理了常見的典型頁面場景，幫助用戶更快速的從0到1構建項目。

風格配置平臺（Design Lab）

這是一個旨在提升設計和開發(fā)效率的平臺，通過可視化的流程協(xié)助用戶和團隊構建個性化設計風格，幫助用戶更好的創(chuàng)建和管理自己的風格主題甚至設計系統(tǒng)。我們從三個維度來定義了風格配置：

Level 1 全局樣式

基本能決定一個組件庫的風格，全局樣式配置包含色板、圓角、字體、自重、尺寸、陰影等能直觀影響視覺的因素，一般通過全局樣式即可配置出適用于不同業(yè)務場景的風格。

Level 2 組件級樣式

一般用到組件級樣式配置的，都是對視覺有較大定制需求的，傳統(tǒng)組件庫對于組件樣式定制，一般是靠樣式覆蓋來做，這樣做對于團隊成本最小，但是對于用戶來講成本很大，而且用戶一旦樣式覆蓋了，在版本升級上可能遭遇各種奇怪的問題導致不敢升級。為了徹底解決這個問題，我們設計了上千個組件樣式變量，并且以可視化的形式呈現(xiàn)在了風格配置平臺，用戶可以在線調配組件的任意細節(jié)，而不用寫煩人的樣式覆蓋，使后續(xù)的維護變得更加舒心。

Level 3 設計系統(tǒng)

對于一些團隊來講，他們不僅希望有自己團隊的風格，也希望有自己團隊的品牌。基于這個，我們已經(jīng)上線了組件頁面的封面、每個組件頁頭的定制。并且新增了一個設計語言的模塊，讓用戶維護自己的設計語言，甚至可以生成自己的站點（預覽模式）。

物料市場（Material Market）

為了滿足更多業(yè)務需求并提供復用能力，我們上線了物料市場，物料市場是我們用來解決自定義痛點的另一把利刃。我們也從三個維度定義了物料：

業(yè)務組件/組件庫：業(yè)務組件用于解決的場景包括封裝團隊業(yè)務邏輯的組件，開發(fā)使用頻率較低或偏門的組件，開發(fā)功能增強版組件，匯總團隊內業(yè)務組件的組件庫等。

區(qū)塊：產(chǎn)物是代碼片段，通過腳本命令下載到項目中或者通過 AUX 可視化工具添加到項目中，區(qū)塊的特點是落地生根，改動了就無法更新區(qū)塊的版本，相當于是復制了一份代碼放到了項目中。區(qū)塊用于解決的場景包括組件組合和復雜表單等。

頁面：頁面跟區(qū)塊沒有本質上的區(qū)別，只是添加了路由，它們主要是定義上的區(qū)別。不過如果結合 ArcoDesign Pro 就不一樣了，頁面物料會自動處理路由、國際化、狀態(tài)管理等，使其完美適配 pro。頁面類型的物料主要解決的場景包括特定場景類的頁面以及包含復雜業(yè)務邏輯的中后臺頁面等。

中后臺最佳實踐（Arco Pro）

ArcoDesign Pro 是一個開箱即用的中后臺前端解決方案，arco 擁有豐富的生態(tài)，pro 給出了豐富的示例和最佳實踐，旨在為用戶在使用上提供參考和思路，降低用戶搭建項目的成本。

ArcoDesign Pro 包含了豐富的場景頁面，并且跟物料平臺完成了深度打通，支持把頁面上傳到物料平臺，通過 arco 腳手架命令一鍵將頁面下載到項目中。

色彩配置工具（Palette）

色彩是組件庫的視覺的基石在色彩算法落地之后，我們上線了色彩平臺，展示了 ArcoDesign 官方所有的顏色，也可以在線調整，讓設計和開發(fā)都能方便的利用色彩算法的能力。未來我們也會支持一鍵同步色板到風格配置平臺。

無障礙色彩對比度也是很重要的一個顏色指標，我們提供了直觀的頁面，供設計和開發(fā)在線進行色彩對比度測試。

PART-THREE

ArcoDesign 有哪些技術優(yōu)勢？

基于 Arco Design 設計規(guī)范，Arco 同時提供了 React 和 Vue 兩套 UI 組件庫。Vue 組件庫基于 Vue 3.0 開發(fā)，提供了面向未來開發(fā)的能力，且與 React 組件庫底層能力互通，均可完美利用 Arco 生態(tài)體系的各項能力。

科學的暗黑模式

Arco 支持一鍵開啟暗黑模式，無縫切換，流暢體驗。

暗黑模式會讓使用者更加專注自己的操作任務，同時避免在黑暗環(huán)境中長時間注視高亮光源導致的視覺刺激。

Arco 在底層設計上，結合了 Less 和 CSS 變量各自的優(yōu)勢。Less 變量負責編譯時的色彩計算，基于主色計算亮 / 暗兩套梯度色板，CSS 變量負責頁面渲染時的最終引用，從而實現(xiàn)了無縫切換亮 / 暗色風格。用戶既能享受 CSS 變量帶來的絲滑切換體驗，又能享受 Less 變量帶來配置單個主色即可生成整套色板的便捷，兼顧優(yōu)雅與易用。

開箱即用的體驗

為了幫助用戶更快速地從 0 到 1 搭建項目，Arco 提供了最佳實踐 Arco Pro，整理了常見的頁面場景，幫助用戶快速初始化項目和使用頁面模板。

在中后臺項目中，頁面設計模式較為單一，Arco 提取了典型的業(yè)務場景，并將其抽離為頁面模板，使用戶通過簡單的復制和修改就能快速搭建頁面。

沉浸式文檔體驗

在 Arco 組件文檔上，用戶可以一鍵安裝風格配置平臺上的所有主題，快捷地將個人主題應用到 Arco 組件文檔上，進行沉浸式的文檔體驗。

二次開發(fā)和復用能力

得益于 Arco 組件靈活的 API 設計以及物料平臺提供的定制化組件解決方案，用戶可以基于 Arco 快速開發(fā)滿足自身特定需求的定制組件。定制化的組件將更好地復用業(yè)務代碼，促進團隊協(xié)作，提升開發(fā)效率，更可與社區(qū)共享豐富的物料資源。

完善的輔助開發(fā)工具鏈

Arco 希望通過完善的生態(tài)體系，提升設計、開發(fā)全流程工作體驗。

Webpack 插件：幫助開發(fā)者在 Webpack 構建中方便地使用主題、實現(xiàn)按需加載、替換組件內置圖標。
Arco CLI 腳手架工具：封裝了物料操作命令，幫助用戶快速創(chuàng)建物料項目并將其發(fā)布至 Arco 物料平臺。
VSCode 插件：幫助用戶在編輯器查閱文檔、可視化操作物料等。
Figma 插件：聚合了常見的設計工具，幫助設計師更方便地使用 Arco 的各項能力。

設計和開發(fā)更好的協(xié)作

設計體系的主要用戶群體還包括設計師。Arco 一直在探索如何基于 Arco 的周邊生態(tài)提升設計師的工作效率。基于公司內主流的設計交付工具 Figma 的設計工具集 Toolbox 提供了一鍵輕松找到目標組件的設計資源以及開發(fā)資源、配色工具、圖標資源上傳及托管、以及提高設計師產(chǎn)出效率，輸出符合設計系統(tǒng)規(guī)范的設計稿的效率的 Code to Design 等工具插件。

PART-FOUR

ArcoDesign 有哪些后續(xù)規(guī)劃？

除了以上此次開源的生態(tài)產(chǎn)品外，在未來，我們會陸續(xù)開放更多生態(tài)平臺，包括圖表可視化平臺 Chartspace、Figma設計工具集Toolbox、品牌資源庫 BrandStore、字體庫Fontmall 等，通過設計工程化（DesignOps）的思路，將開箱即用的資源和生態(tài)平臺更智能地連接起來，自動化、工具化實現(xiàn)打通設計師與前端工程師的工作流，提升設計開發(fā)效率。

我們服務哪些用戶？

Arco 致力于探索更優(yōu)質的設計體系，以解決復雜的業(yè)務以及冗余的溝通帶來的體驗問題，徹底解放開發(fā)及設計師的雙手。在字節(jié)內部，我們服務了4000+ 項目實現(xiàn)高效高質的產(chǎn)品搭建流程。是從實踐中孵化而來，也廣泛服務于內部業(yè)務的產(chǎn)品。