如何命名

上面提到的組件歸類、顆粒化都需要命名作為基礎，細分后的模塊如何查找、區分，設計稿如何調用組件，這些都離不開合理的命名引導。因此命名可以說是構建組件庫非常重要的一個環節，合理的命名會讓整個組件庫布局條理清晰、結構縝密，實際使用時能夠幫助我們快速定位。

如果按層級的方式做區分的話，命名通常分為二大類。

組件分類名：通常指組件的準確名稱，如導航、工具欄、彈窗、按鈕等。(為方便大家參考，此處附上一張對照表)

組件的細分模塊命名：這類模塊目前沒有標準所參考，但是我們可通過一些最容易理解的特征來區分，比如位置、數目、形狀、顏色、情感(積極操作、消極操作)等作為命名依據，如果一個模塊同時保有這些特征，可以在構建初期就定好層級的優先級。

此處以導航欄為例，畫圈部分的命名為「導航/白色/_資源/左組合/1圖標」，「/」是 Sketch 層級用的符號，「_」純粹是為了讓資源能夠在列表內置頂使用的一個小技巧，如果是此模塊下的元素只需對「左組合」后面的信息做調整就行。

雖然從工程化角度來看，這種方式會顯得不夠嚴謹，但從使用、理解角度出發，這個方法相對高效，還易上手快速形成認知。

實際使用流程

組件庫經過一系列的操作搭建完成后，那么后續，我們如何通過它來運作，我們通過上圖可以有個直觀的了解：

區分組件類別，并在此類別區進行操作;

進行組件布局，模塊搭建;

布局同時不要忘記設置Resizing;

對命名再進行一次梳理;

保存;

設計稿更新調用;

模塊拼合，選取需要用的樣式;

調整文案、圖片、圖標等;

完成。

而參與項目合作的其他同學只需要執行第6~8條就可以了。

結語

通過組件化的建立，我們讓設計內部的產出有了統一標準，也與開發者之間搭起了一段新的橋梁。從設計稿到組件庫，之后組件庫到設計規范，再從設計規范到展示程序，最終展示程序影響到設計還原，我們通過優化深入將這四個之前關系并不明朗的概念重新改造結合，形成新的閉環。

通過新形成的閉環，與技術部合作建立出了符合開發者維度的組件化管理模式(起點讀書組件展示程序)。對于設計團隊來說，迭代效率得到顯著提升，設計團隊能夠主導產出的優化結果增多。對于開發團隊來說，減少工作量的同時還原一致性也得到了保障。當然組件庫的意義遠不止于此，我們還會繼續優化、迭代，只求做到更好。

歡迎關注「閱文體驗設計YUX」公眾號：