最近一直在關注設計系統(tǒng)，恰逢筆者正準備畢業(yè)，畢業(yè)設計就索性開發(fā)了一個模塊化組件搭建界面原型的 Web 工具 —— Atomframer 。通過對設計模式的選取，三分鐘即可搭建一個用于快速溝通的界面原型。

一、Atomframer

我總結定義了共計 82 種常見的設計模式，基本滿足了大部分基礎移動端頁面的使用場景。并且本工具的使用方法十分簡單快捷，只需以下幾個步驟便可完成。

第一步，選擇合適的導航

通過點選，便可切換相應的導航欄、篩選欄、工具欄以及標簽欄。每個導航類別分別對應一個特定區(qū)域的組件變化，點選切換保證了每個類別的導航之間能夠相互獨立。

第二步，拖拽需要的內容組件

通過拖拽，添加常規(guī)元素、頁內導航、內容容器以及列表表單等用于承載頁面內容的組件。這些組件共用同一塊區(qū)域，自由組合，并且允許添加多個相同組件，且這些相同組件相互獨立，互不干擾。

第三步，長按調整組件之間的順序

通過長按能夠調整被添加的組件之間的順序，提供給組件之間的組合更多的可能性。

第四步，選中組件后修改其信息

當一個組件被選中后，能夠在右邊的表單區(qū)域修改其內部的文字信息，使得相對通用的組件具備傳遞具體業(yè)務信息的能力。

表意圖標本身便具有一定的含義，即與文本一樣傳遞了信息，故對圖標的選擇也同樣重要。