頁面的元件化案例
第一次接觸到元件化的案例，是在去年的IXDC上滴滴其中的一個分享keynote
他們的出發點如下
滴滴要解決的問題：
效率低下、感知混亂、成本浪費、責權不明、品質不齊...
元件化的核心價值：
通過工具模板體系化，設計效率提升，稽核修改率降低，
輸出品質拉齊，解決內宣延續性的問題，
從基礎工作上解放更多腦力設計師。
（以上是他們的結論，案例因版權問題不便展示）
現在閣主在專案中也遇到了一些需要解決的事情，所遇到的問題與滴滴的不盡相同，但同樣，元件化也能幫助解決了不少難題。
如下，閣主遇到的問題是，一個結果頁面，如下圖。
來分析一下，該頁面有 很多不同種類的資訊，每種資訊的狀態又有很多種 。如果單獨把頁面去進行鋪開則會有 很多種排列組合 。
如果直接將所有排列組合的頁面呈現出來，需要畫會有二三十多個。真這樣做的話，一方面容易漏狀態，另一方面在表述上不夠簡潔，使得其它看文件的人也會覺得頭暈目眩，顯得文件不夠專業。
針對以上的分析，於是，採用元件化的思維， 將每一塊有不同狀態的資訊單獨分成塊，羅列出來，再針對每塊的內容進行詳細說明。
頁面的劃分塊如下
部分內容的分塊呈現如下
最後將頁面和所有的元件化內容一起羅列出來，並標示好對應關係進行展示，如下圖。
從總體效果來看是不是整潔清晰了很多。
來總結一下：
1. 什麼樣的頁面需要元件化？
資訊的排列組合方式有很多種，並且資訊模組彼此獨立，元件化的方式呈現能將資訊分類做的更清晰。
2. 怎樣組織元件化的頁面？
將頁面獨立的、有不同狀態資訊塊分離成不同的模組，並以模組為單位分別進行標註呈現。
以上只是元件化的其中一個案例，僅供參考，元件化靈活性很高，大傢伙可以在此基礎上進行更多場景應用的嘗試。
往期精彩文章
《 好的互動文件其特點 》
作者簡介：Sophia的玲瓏閣，一枚愛折騰，愛健身的妹紙。
職場設計技能，更多教程搶先就看，請關注作者的微信公眾號：Sophia的玲瓏閣。
