<em id="09ttv"></em>
    <sup id="09ttv"><pre id="09ttv"></pre></sup>
    <dd id="09ttv"></dd>

        • 聊聊上周很火的設計系統“兩兄弟”

          2021-11-16    seo達人


          圖片

          圖片

          Semi Design 是針對抖音的中后臺產品線進行研發的設計系統,其目的也是為了解決 抖音 一系列的中后臺產品的效率問題。

          而 Arco Design 是基于 字節跳動 所有的中后臺產品,其前身是 Byte Design 升級而來,能夠看到二者的定位是截然不同,一個是基于抖音產品,一個是基于 字節 這家公司,因此在后續很多內容的不同,根本也是因為定位所造成的。先說說這兩個系統的具體功能。

          圖片

           

          主題風格配置平臺:

          當看到這個工具時,其實是非常激動,作為設計師,對于一個設計系統樣式上的細微調整早就已經深惡痛絕,如果可以,自己絕不想通過前端之手進行“實現”,但以往的 Element 方式似乎又有些許麻煩,且能力不足。當我使用兩款系統過后,都給到了我不少的驚喜。

          首先是Semi,顏色自動提供 WCAG 檢查,讓你能夠快速看到自己設定的顏色究竟是否合理;設計系統的引用關系,可以了解到設計系統顏色之間有哪些不同;圓角的可視化編輯,可以快速知道修改過后的最后實現樣子。每一個功能都是設身處地的為設計師考慮,在日常的工作當中經常會遇到的問題,但是也會有些許的遺憾。

          圖片

          比如:可定制的組件內容實在太少,目前能夠提供給用戶定制的只會有:顏色 、 字體、圓角、陰影,想要從 Semi Design,到 Any Design 還是會有一定的距離;Figma 插件還未上線,確實不能夠與設計軟件進行快速打通。不過官方已經回復說插件正在審核,期待它的后續體驗。

          當我用了 Arco 的主題風格配置過后,我覺得可以好好來說說。簡直太牛了!可以編輯的維度從基礎的顏色、字體、陰影、 到 組件的按鈕、導航、分類、表格  一共有接近40款組件,并且都是可以進行可視化編輯與調整的。如果你用了 Arco 過后,或許不用苦苦的站在前端后面,讓他幫忙調整頁面,作為設計師自己就能夠搞定,并且每一個組件可以調整的粒度是非常之細,包含 各種寬度、圖標大小、顏色、投影,等等…

          圖片

          真的有些顛覆!假如你需要去定義一個官方的設計系統,完全可以通過 Arco 進行搞定。

           

          文檔內容:

          仔細閱讀文檔,你會發現文檔這次文檔對于設計者而言,更加的友好。首先你可以通過 組件設計,去了解到每一個組件的具體構造,這是很多基礎薄弱的設計師能力欠缺的一個點

          其次對于 組件狀態、何時使用、交互行為 都解釋得非常清楚。之后有人問我關于組件相關的問題,我只需要給他扔一個鏈接過去就可以。

          圖片

          并且兩個系統都支持查看組件的更新記錄,作為一個剛面市的設計系統,調整修改是在所難免,因此提供這樣的入口確實能夠使用體驗上更為高效。

          圖片

          關于文檔的細節以及具體的書寫質量,這個只能在后面深度使用過后給到大家反饋,在說說 Semi 與Arco 在文檔上的不同,你會發現 Semi 在整個文檔內只會有對 組件的使用細則,而 Arco 則提供了:設計價值觀、設計原則、樣式指南、組件用法,Semi 缺少了設計系統靈魂的這一部分,也就意味著在項目資源的投入上兩者還是會有較大不同。

           

          隨便聊聊:

          什么暗黑模式、國際化 就不做不過介紹,感興趣的同學可以自己去官網體驗體驗。最后說說兩者的差異和自己的感受。

          其實早在20年的時候,我就已經看到 Semi Design 的原形,但當時看到整個官方文件有點簡陋,不過今天看這個設計系統,成熟度還是蠻高的,無論的整個組件的質量,又或者是 Figma 當中對于Variants 的支持,暗黑模式的探索(老實說,我覺得暗黑模式的場景不會特別多),也能夠看到抖音設計團隊在這個系統的付出。

          當然,在整個設計系統查看下來,發現 Semi 仿佛是一個半成品,因為缺少了設計系統最為重要的設計價值觀與原則、整個頁面模版,因此對于這個內容本身還是抱有一些小小的遺憾。不過從定位上來說,我覺得也是非常合理。

          因為作為服務于抖音產品線的設計系統,其實無意去和一些國內外的著名設計系統進行對標:比如 支付寶的 Ant Design、Google 的 Material Design、SAP的 Fiori 更多是從自身實際問題出發,去解決在產品研發過程當中的一系列問題。而比肩國際設計系統的任務,交給了老大哥 Arco Design 上,同樣能夠在 Arco 上看到字節的野心,嘗試去搭建各種生態:圖標、物料、風格配置。很顯然對于我們用戶而言是一件好事,因為有競爭才會更快發展,我們之后在設計系統的選擇上又可以多一個選項。也希望之后能夠發展的越來越好。

          兩個系統名字的由來:Semi 取自英文的詞組,寓意 “一半”,表示在一個企業應用是有業務邏輯與前端界面構成,希望Semi能夠成為前端頁面不可獲取的一半。

          你知道 Arco 設計系統名字的由來嗎?

           

          原文鏈接:CE青年(公眾號)

          作者:CE青年

          轉載請注明:學UI網》聊聊上周很火的設計系統“兩兄弟”

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.sdgs6788.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務




          日歷

          鏈接

          個人資料

          藍藍設計的小編 http://www.sdgs6788.com

          存檔

          精品久久久一二三区| 国产国产成人久久精品| 午夜精品久久久久久毛片| 久久久一本精品99久久精品66 | 久久精品夜色噜噜亚洲A∨| 亚洲国产天堂久久久久久| 无码人妻精品一区二区三区久久| 99久久无码一区人妻| 久久精品日日躁夜夜躁欧美| 亚洲国产成人久久综合碰碰动漫3d| 欧美成人免费观看久久| 久久99热国产这有精品| 久久久久高潮综合影院| 国产午夜精品久久久久九九| 久久久久久综合网天天| 精品国产综合区久久久久久| 久久99精品国产自在现线小黄鸭 | 青青青青久久精品国产h久久精品五福影院1421| 久久毛片一区二区| 久久国产乱子伦精品免费午夜| 久久午夜羞羞影院免费观看| 久久精品中文字幕大胸| 国产亚洲精午夜久久久久久| 国产欧美一区二区久久| 久久不见久久见免费视频7| 国产成人综合久久精品红| 国内精品欧美久久精品| 一级做a爰片久久毛片16| 2021精品国产综合久久| 久久天天躁狠狠躁夜夜躁2O2O| 久久无码中文字幕东京热| 亚洲午夜久久久| 日本五月天婷久久网站| yy6080久久| 99精品国产综合久久久久五月天| 一级A毛片免费观看久久精品| 亚洲精品无码久久毛片| 久久精品中文无码资源站| 午夜天堂av天堂久久久| 久久婷婷五月综合97色一本一本| 人妻久久久一区二区三区|