無極五註冊網站_用一篇全面乾貨,幫你完整掌握組件化設計流程

當我們進入一個成熟的設計團隊,團隊文檔中都會有組件庫和對應的設計規範。

組件庫是當設計師遇到同一類組件設計場景時,提供可復用、避免創造新的樣式的庫。這樣既減少設計和開發的時間成本,同時增強產品的統一性,避免多樣式給用戶帶來認知障礙。

設計規範是指導團隊組員組件使用的規則和項目設計的指導原則。

組件化思維是設計師必備的技能之一。如何搭建組件庫和設計規範更是設計師應該掌握的。

為什麼我們都應該學會組件化設計思維?

最近在閱讀《佐藤可士和的超整理術》,書里講述的是作者通過對空間、信息和思考的整理,來解決複雜問題,讓工作變得高效。生活和工作離不開「整理」,好的設計也要從「整理」開始,…

閱讀文章 >>

無組件化的問題

設計團隊在做項目的過程中,如果沒有組件化時,那麼會遇到維護成本高、效率低、統一性差、開發成本高、復用性差和難以協同等 6 大問題。

維護成本高:需要所有設計師一起維護更新,有時候存在同步不及時的情況,導致設計師之間對最新組件的更新不同步,從而產生更大的維護成本。

效率低:設計師重複設計相同類型的組件,設計一系列組件狀態,這一過程中會消耗設計師大量的時間。設計師工作效率低。

統一性差:存在相同組件被重複造新樣式的情況,導致統一性差,造成用戶的認知成本。

開發成本高:開發需要寫重複的樣式,沒法全局調用,耗費時間,開發成本高,安裝包的體積大,甚至是會影響產品的性能。

復用性差:組件之間無法復用,需要不停地製作新樣式。

難以協同:同事之間協同困難,每個設計師都有自己設計習慣。

組件化的好處

當團隊在做項目時,組件化的好處有:統一性、高效性和延續性。

統一性:

  • 整個產品不同模塊的業務按照統一規範使用,提升整個產品的視覺交互統一性,減少開發樣式,提升開發效率。
  • 避免設計師創造新的組件控件樣式。
  • 統一交互設計規則,減少用戶操作的迷惑感,提升產品的體驗。

高效性:

  • 一套設計規範衍生兩套組件庫,分別為 sketch ui 組件庫和 auxre 元件庫。sketch ui 組件面向對象為視覺設計師,auxre 元件庫面向對象為交互設計師和產品經理。設計師和產品經理通過拖動組件搭建界面,節約時間,提升工作效率。
  • 減少製作組件控件的時間,不需要對組件重新下定義,提升設計效率,可將更多時間放在流程體驗和設計推動上。

延續性:

  • 通過設計規範,在以後更新中可以連續迭代,避免斷層。
  • 團隊即使有成員離開或者加入,通過設計規範和組件庫可以快速地接手和進行正常工作。

組件化支撐的設計理論

組件化所支撐設計理念是原子設計。

原子設計是一種方法論,由原子、分子、組織、模板和頁面共同協作以創造出更有效的用戶界面系統的一種設計方法。

原子:設計系統的最小單位。原子包括調色板,分割線,字體,單個元素(即標題,段落,按鈕等)這些元素有個特點就是最小元素不可再切割,如下圖。

分子:通過多個原子組合而成,作為一個單元組成 UI 元素的一個組件,如下圖。

組織:通過多個分子組合而成,我們可以構建更複雜但可重複的組織。組織是組成模板的主要組成部分,如下圖。

模板:通過多個組織組合而成。是頁面的基礎架構。將以上元素進行排版,將原子,分子,組織進行排版成最終的模板,如下圖。

頁面:將實際內容(圖片、文章等)套件在特定模板,每個頁面由將實際內容(圖片、文章等)模板修改而成,如下圖。

如何搭建組件化

組件化什麼時候開始做?

一種情況是產品立項前就開始組件化,在產品 0 到 1 之前,擁有一套組件和設計規範。設計師可以從以前項目的組件庫和設計規範直接套用並修改,這樣項目前期設計做起來更加方便且省時省力少挖坑。

另一種情況是產品經歷過 0 到 1 后,產品趨於成熟,這個時候開始做組件化。組件化搭建最多會有六個步驟,分別為:整理目錄、制定規範模板、填充目錄內容、生成組件庫、sketch 插件庫和開發服務平台。

整理目錄:將線上的產品的組件進行梳理並做分組,形成一個組件目錄。
制定規範模板:以一個典型的組件為例,制定組件內容規範模板。裡面包含組件的定義、組件的幾種類型、組件的標註、組件的交互規範和組件的極限情況等。

填充目錄內容:按照制定的規範模板,將每個組件的內容進行填充完成,形成一套完整的設計規範。

生成組件庫:將設計規範裏面的組件樣式單獨抽離出來,生成完整的組件庫。

sketch 插件庫:如果有前端支持,可以將 sketch 組件庫開發成對應的插件,這樣設計師可以更方便地使用和實時更新。

開放服務平台:有前端開發資源支持的話,可以將組件進行代碼封裝。移動端或 PC 端都可以做組件開發平台。

如何使用組件化

當團隊搭建完成組件化之後,接下來就是成員間的使用,這一過程由業務需求產生組件模板、組件模版形成頁面、頁面形成頁面流程和頁面流程形成用戶體驗。

  • 業務需求產生組件模板:基於業務需求,產生符合業務屬性的組件,當有新需求時,根據業務場景選擇合適的組件組合成對應的模板。
  • 組件模版形成頁面:組件模板根據實際產品需求,形成對應的產品頁面。
  • 頁面形成頁面流程:設計師根據組件模板所搭建的頁面,形成一個個頁面操作流程。
  • 頁面流程形成用戶體驗:根據最終完成的頁面流程,則形成最終的用戶體驗。

後記

以上就是關於組件化思維設計流程的基本內容,如果你想了解更多內容可以在留言區留言。

組件化設計思維培養:

如何培養組件化設計思維?來看阿里設計師的經驗總結!

斕青:阿里巴巴在中台戰略的背景下,設計提效又再次推動着設計思維的變革。設計師們不僅僅需要出色地完成業務需求的設計,同時還需要思考設計的價值,也就是經常提到的最佳方案性價…

閱讀文章 >>

歡迎關注作者的微信公眾號:「Echo的設計筆記」

未经-摩登3注册-摩登3测速官网-允许不得转载:摩登3注册-摩登3测速官网 » 無極五註冊網站_用一篇全面乾貨,幫你完整掌握組件化設計流程

赞 (0)