• <tbody id="9brb1"><pre id="9brb1"></pre></tbody>

    <em id="9brb1"></em>

  • <th id="9brb1"></th>

  • <tbody id="9brb1"><pre id="9brb1"></pre></tbody>
  • <button id="9brb1"><acronym id="9brb1"><input id="9brb1"></input></acronym></button>
      <tbody id="9brb1"><pre id="9brb1"></pre></tbody>
        更多課程 選擇中心


        UI培訓

        400-111-8989

        如何定義UI設計組件庫

        • 發布:UI培訓
        • 來源:UI教程
        • 時間:2020-03-31 16:08

        如何從0到1搭建UI組件庫?

        組件庫如何高效的對內外應用?

        如何定義組件庫

        Ui設計組件庫(UI kit),直譯過來就是用戶界面成套元件。我們日常工作中所構建的組件庫,一般是把所有界面設計中的控件以及控件組合匯總分類,形成一個對內對外都能起到提高效能與控制標準化的工具庫。

        1.辯證的看待原子設計理論

        為了方便組件庫在實際應用中的實用度以及迭代拓展,我們通常需要對組件模塊進行分析解構。

        大家應該都熟悉著名的原子設計理論在組件庫的中瘋狂應用(原子設計:將頁面顆粒度分為原子、分子、組織、模板、頁面的超細維度,進行組件和組件的層層嵌套)。

        所以是否我們就應該將原子理論不加辯證的應用到所有組件的構建中呢?我覺得這其中的顆粒度選擇還是需要根據組件的分類進行有區別的抉擇的。

        在商業設計中我們通常把組件庫分為“基礎型”和“業務型”兩大類,前者主要是以系統組件(導航/tab/鍵盤等)、頁面固定組件(圖標/按鈕等)等高頻使用的組件為主,后者則是直接關聯業務更加復雜多變的組件模塊。

        如果說前者我們應用原子概念進行設計,我覺得是沒有太大毛病,包括在后期library的輸出上原子理論確實也會顯得比較嚴謹。

        但“業務型”組件因為本身屬于復雜多變的模塊組件,使用過細的顆粒度不但容易影響整體動態化拼裝的效率,也可能因為顆粒度過細導致在變化過程中的體驗一致性變異。所以針對“業務型”組件,我們更需要對它進行交互解構。用結構化替代窮舉提效的同時保障整體的交互體驗一致性,確保這個模塊無論怎么變換,它還是不脫離整體的設計系統規則。

        2.組件庫vs設計規范

        在討論完組件庫的顆粒度之后,有一些童鞋還是糾結這個ui kit到底需不需要和設計規范做結合,具體需要展示哪些內容更貼合現在主流的做法。

        個人理解這兩者應該是相輔相成、相對獨立且呈包含關系的2個東西,如果ui設計規范類比一紙詳細的產品生產說明,組件庫則更類比一個線上工具零件庫+簡易工作使用說明書。再通俗一些來說,就是我們的組件庫依附于當前的設計規范,同時未來我們也將依據設計規范來產出新的符合規范的組件。

        但實際上因為廠子UED規模及理念差異,大家對組件庫和視覺規范的輸出也各不相同。

        基本在滴滴的時候因為CDX的組件和規范沉淀的時間久遠,改版的頻率又十分之低,不同設計團隊溝通基本憑著一套出行的ui kit的就無師自通高效輸出了。現在到了新的團隊,也是優先搭建可以馬上使用出活的組件庫,畢竟項目拼的是效率和時間。

        組件庫的部署與落地同步

        接下來我們來說說在實際工作中我們最為實用的部分,有關如何實現組件庫的完美應用,讓你的日常工作再也離不開它。

        1.symbol化的設計布局思路

        相信sketch的symbol化原子設計原理大家應該都很熟悉(不熟悉的話也可以度娘搜到很多相關如何使用symbol的攻略)

        對于對話框組件的解構我們可以分為圖片區/標題區/正文區/操作區四個部分,所以我們要做的是把這個彈窗做成一個“無限可能”的對話框,即對話框的每一個區域(從圖片到操作按鈕)都是可以替換的。

        這里我們需要單獨symbol化的嵌套部分就是圖片、操作按鈕及背景遮罩,這樣我們就可以得到一個基本可以直接適配使用的圖文對話框。

        除了業務組件視不同產品業務線而定之外,基礎組件和傳達組件都相對固定可以相對大面積的復用。其中傳達組件大家可能接觸的相對少一些,對UX和UE設計師來說是可以直接在做流程交互梳理時候妥妥拽拽完成設計的非常好用的工具組件。

        2.sketch cloud的同步協作

        制作完組件庫的sketch部署之后我們就需要把它真正的應用起來了。

        我們可以通過sketch/首選項/添加組件庫的方式將我們剛剛部署完的sketch(命名為:組件庫library_zmn_20191118)導入。之后就可以在sketch/置入/組件中找到對應的“組件庫library_zmn_20191118”組件庫直接進行拖拽元素使用。

        三.組件庫的監察機制與管理

        去年面試的時候從快看到淘寶,感覺最高頻出現的就是有關組件庫的問題,感覺大家都很關注有關組件庫的定義與入庫標準。尤其在大廠的UED,一般都有一套專屬的組件庫監察滾動機制適用于多地多團隊合作,對于之后的組件庫更新迭代,新組件封裝入庫有自己的標準。

        對于監察機制我們就不多說了,因為并不一定適配于大家的情況,我們這邊主要談談組件庫管理。

        因為組件庫從搭建完成之后我們會不停滾動更新,那是否需要將所有更新出現的新組件都納入組件庫里呢?顯然是不科學的,我們需要合理管理和控制組件庫的容量,及時調整和翻新組件庫里的組件,確保組件庫里的內容都是最新最好用的。

        咱們在0-1構建組件庫時,要清晰它的定義與作用,之后進行分類與list規劃,最后再sketch中完成部署與落地,最后形成一套完成的組件庫同步協作的管理機制與新組件入庫的標準制定。更遠一點來說還可以與開發形成協作,共同開發線上組件庫資源,實現從橫向的業務賦能。

        免責聲明:文章內容來源于網絡,版權歸原作者所有,如有侵權,請聯系我們刪除。

        預約申請免費試聽課

        填寫下面表單即可預約申請免費試聽!怕錢不夠?可就業掙錢后再付學費! 怕學不會?助教全程陪讀,隨時解惑!擔心就業?一地學習,可全國推薦就業!

        上一篇:審美差可以學UI設計嗎
        下一篇:為什么別人學UI設計可以拿高薪

        達內UI設計7月免費訓練營報名啦

        UI培訓教程之系統圖標如何設計

        月薪過萬的UI設計師都是怎么設計界面的

        達內設計學院九周年慶典回首來時路,共赴新征程

        • 掃碼領取資料

          回復關鍵字:視頻資料

          免費領取 達內課程視頻學習資料

        • 視頻學習QQ群

          添加QQ群:1143617948

          免費領取達內課程視頻學習資料

        Copyright ? 2021 Tedu.cn All Rights Reserved 京ICP備08000853號-56 京公網安備 11010802029508號 達內時代科技集團有限公司 版權所有

        選擇城市和中心
        貴州省

        廣西省

        海南省

        2019最新在线国产自拍,2019最新国产在线观看_久久爱久久高清视频 百度 好搜 搜狗
        <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <文本链> <文本链> <文本链> <文本链> <文本链> <文本链>