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

一、Atomframer

我總結(jié)定義了共計(jì)82種常見的設(shè)計(jì)模式，基本滿足了大部分基礎(chǔ)移動(dòng)端頁(yè)面的使用場(chǎng)景。并且本工具的使用方法十分簡(jiǎn)單快捷，只需以下幾個(gè)步驟便可完成。

第一步，選擇合適的導(dǎo)航

通過(guò)點(diǎn)選，便可切換相應(yīng)的導(dǎo)航欄、篩選欄、工具欄以及標(biāo)簽欄。每個(gè)導(dǎo)航類別分別對(duì)應(yīng)一個(gè)特定區(qū)域的組件變化，點(diǎn)選切換保證了每個(gè)類別的導(dǎo)航之間能夠相互獨(dú)立。

第二步，拖拽需要的內(nèi)容組件

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

第三步，長(zhǎng)按調(diào)整組件之間的順序

通過(guò)長(zhǎng)按能夠調(diào)整被添加的組件之間的順序，提供給組件之間的組合更多的可能性。

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

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

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

第五步，導(dǎo)出圖片，完成！

完成組件的組合與信息重寫之后，只需要將其導(dǎo)出為圖片的形式，便可方便地傳播了，大功告成！怎么樣，三分鐘不到吧。

確保效率的同時(shí)，我們來(lái)看看 Atomframer 最終搭建的界面效果。

二、組件的合理定義

使用模塊化的思想來(lái)設(shè)計(jì)原型設(shè)計(jì)工具，即是用成熟的設(shè)計(jì)模式來(lái)支撐細(xì)化的行為節(jié)點(diǎn)，相當(dāng)于引入每個(gè)行為的成熟解決方案，最終將每個(gè)行為對(duì)應(yīng)的解決方案拼湊成一整個(gè)完整的界面方案。所以要求每個(gè)組件都盡可能為最優(yōu)解，并且具有靈活性和擴(kuò)展性。

我最終定義了共計(jì)7個(gè)類別，82種常見的組件，以確保有足夠全面的組件以供選擇。

三、組件的定義規(guī)則

組件的定義及擴(kuò)展主要遵循以下規(guī)則：

• 區(qū)分組件最終承載的用戶行為及用戶目標(biāo)。
• 考慮組件在同一目標(biāo)下不同的結(jié)構(gòu)。
• 根據(jù)組件所包含元素的不同進(jìn)行劃分。
• 改變組件中所包含元素的數(shù)量 / 位置 / 尺寸來(lái)進(jìn)行橫向的擴(kuò)展。
• 將簡(jiǎn)單組件進(jìn)行嵌套形成新的復(fù)雜組件，以支持更復(fù)雜的行為。

四、開始使用

瀏覽器：為了保證最佳的體驗(yàn)，請(qǐng)大家使用 Chrome 或者 Safari 對(duì) Atomframer 進(jìn)行訪問(wèn)，使用其他瀏覽器不能夠保證完全正常運(yùn)作。

平臺(tái)：現(xiàn)階段僅支持 Windows 以及 Mac 用戶對(duì) Atomframer 進(jìn)行訪問(wèn)，暫不支持其他平臺(tái)，且不支持移動(dòng)端訪問(wèn)。

準(zhǔn)備就緒后，通過(guò)以下地址進(jìn)行訪問(wèn)：

www.atomframer.com

五、More

開發(fā) Atomframer 的初衷是為了嘗試描述一款作為設(shè)計(jì)系統(tǒng)輸出窗口的工具，并且能為將來(lái)的高效設(shè)計(jì)過(guò)程提供想象的空間。作為設(shè)計(jì)工具，目前還不完善，我對(duì)如何解決設(shè)計(jì)與開發(fā)之間的障礙的探索也才剛剛開始，但設(shè)計(jì)師嘛，總歸是要有自己的一點(diǎn)執(zhí)念。

接下來(lái)將不定期對(duì) Atomframer 進(jìn)行維護(hù)優(yōu)化，也歡迎各位朋友給我提建議，我們相互學(xué)習(xí)，共同進(jìn)步。

歡迎關(guān)注作者的微信公眾號(hào)：「Designut」

「更多原型工具」

• 《事半功倍！幫你設(shè)計(jì)加速的7款頂尖原型工具》
• 《Framer 大更新！可能是目前最適合設(shè)計(jì)師學(xué)習(xí)代碼的一款原型工具》
• 《只需瀏覽器，就能幫你搞定原型設(shè)計(jì)》

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計(jì)愛好者也準(zhǔn)備了貼心的知識(shí)樹專欄。開啟免費(fèi)自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺效果。

設(shè)計(jì)導(dǎo)航：國(guó)內(nèi)人氣最高的設(shè)計(jì)網(wǎng)址導(dǎo)航，設(shè)計(jì)師必備： http://hao.uisdc.com