Semi Design 是針對抖音的中后臺產(chǎn)品線進行研發(fā)的設計系統(tǒng)，其目的也是為了解決 抖音 一系列的中后臺產(chǎn)品的效率問題。
而 Arco Design 是基于 字節(jié)跳動 所有的中后臺產(chǎn)品，其前身是 Byte Design 升級而來，能夠看到二者的定位是截然不同，一個是基于抖音產(chǎn)品，一個是基于 字節(jié) 這家公司，因此在后續(xù)很多內(nèi)容的不同，根本也是因為定位所造成的。先說說這兩個系統(tǒng)的具體功能。
主題風格配置平臺：
當看到這個工具時，其實是非常激動，作為設計師，對于一個設計系統(tǒng)樣式上的細微調(diào)整早就已經(jīng)深惡痛絕，如果可以，自己絕不想通過前端之手進行“實現(xiàn)”，但以往的 Element 方式似乎又有些許麻煩，且能力不足。當我使用兩款系統(tǒng)過后，都給到了我不少的驚喜。
首先是Semi，顏色自動提供 WCAG 檢查，讓你能夠快速看到自己設定的顏色究竟是否合理；設計系統(tǒng)的引用關系，可以了解到設計系統(tǒng)顏色之間有哪些不同；圓角的可視化編輯，可以快速知道修改過后的最后實現(xiàn)樣子。每一個功能都是設身處地的為設計師考慮，在日常的工作當中經(jīng)常會遇到的問題，但是也會有些許的遺憾。
比如：可定制的組件內(nèi)容實在太少，目前能夠提供給用戶定制的只會有：顏色 、 字體、圓角、陰影，想要從 Semi Design，到 Any Design 還是會有一定的距離；Figma 插件還未上線，確實不能夠與設計軟件進行快速打通。不過官方已經(jīng)回復說插件正在審核，期待它的后續(xù)體驗。
當我用了 Arco 的主題風格配置過后，我覺得可以好好來說說。簡直太牛了！可以編輯的維度從基礎的顏色、字體、陰影、 到 組件的按鈕、導航、分類、表格 一共有接近40款組件，并且都是可以進行可視化編輯與調(diào)整的。如果你用了 Arco 過后，或許不用苦苦的站在前端后面，讓他幫忙調(diào)整頁面，作為設計師自己就能夠搞定，并且每一個組件可以調(diào)整的粒度是非常之細，包含 各種寬度、圖標大小、顏色、投影，等等…
真的有些顛覆！假如你需要去定義一個官方的設計系統(tǒng)，完全可以通過 Arco 進行搞定。
文檔內(nèi)容：
仔細閱讀文檔，你會發(fā)現(xiàn)文檔這次文檔對于設計者而言，更加的友好。首先你可以通過 組件設計，去了解到每一個組件的具體構造，這是很多基礎薄弱的設計師能力欠缺的一個點
其次對于 組件狀態(tài)、何時使用、交互行為 都解釋得非常清楚。之后有人問我關于組件相關的問題，我只需要給他扔一個鏈接過去就可以。
并且兩個系統(tǒng)都支持查看組件的更新記錄，作為一個剛面市的設計系統(tǒng)，調(diào)整修改是在所難免，因此提供這樣的入口確實能夠使用體驗上更為高效。
關于文檔的細節(jié)以及具體的書寫質量，這個只能在后面深度使用過后給到大家反饋，在說說 Semi 與Arco 在文檔上的不同，你會發(fā)現(xiàn) Semi 在整個文檔內(nèi)只會有對 組件的使用細則，而 Arco 則提供了：設計價值觀、設計原則、樣式指南、組件用法，Semi 缺少了設計系統(tǒng)靈魂的這一部分，也就意味著在項目資源的投入上兩者還是會有較大不同。
隨便聊聊：
什么暗黑模式、國際化 就不做不過介紹，感興趣的同學可以自己去官網(wǎng)體驗體驗。最后說說兩者的差異和自己的感受。
其實早在20年的時候，我就已經(jīng)看到 Semi Design 的原形，但當時看到整個官方文件有點簡陋，不過今天看這個設計系統(tǒng)，成熟度還是蠻高的，無論的整個組件的質量，又或者是 Figma 當中對于Variants 的支持，暗黑模式的探索（老實說，我覺得暗黑模式的場景不會特別多），也能夠看到抖音設計團隊在這個系統(tǒng)的付出。
當然，在整個設計系統(tǒng)查看下來，發(fā)現(xiàn) Semi 仿佛是一個半成品，因為缺少了設計系統(tǒng)最為重要的設計價值觀與原則、整個頁面模版，因此對于這個內(nèi)容本身還是抱有一些小小的遺憾。不過從定位上來說，我覺得也是非常合理。
因為作為服務于抖音產(chǎn)品線的設計系統(tǒng)，其實無意去和一些國內(nèi)外的著名設計系統(tǒng)進行對標：比如 支付寶的 Ant Design、Google 的 Material Design、SAP的 Fiori 更多是從自身實際問題出發(fā)，去解決在產(chǎn)品研發(fā)過程當中的一系列問題。而比肩國際設計系統(tǒng)的任務，交給了老大哥 Arco Design 上，同樣能夠在 Arco 上看到字節(jié)的野心，嘗試去搭建各種生態(tài)：圖標、物料、風格配置。很顯然對于我們用戶而言是一件好事，因為有競爭才會更快發(fā)展，我們之后在設計系統(tǒng)的選擇上又可以多一個選項。也希望之后能夠發(fā)展的越來越好。
兩個系統(tǒng)名字的由來：Semi 取自英文的詞組，寓意 “一半”，表示在一個企業(yè)應用是有業(yè)務邏輯與前端界面構成，希望Semi能夠成為前端頁面不可獲取的一半。
你知道 Arco 設計系統(tǒng)名字的由來嗎？
原文鏈接：CE青年（公眾號）
作者：CE青年
轉載請注明：學UI網(wǎng)》聊聊上周很火的設計系統(tǒng)“兩兄弟”
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設計( m.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務