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