導(dǎo)語(yǔ)
2020年2月10日，我入職上海零米信息技術(shù)有限公司。入職后接到的第一個(gè)任務(wù)是從零到一搭建官網(wǎng)，要求兩周上線(xiàn)。
作為前七牛云的市場(chǎng)運(yùn)營(yíng)童鞋，官網(wǎng)博客什么的也做過(guò)不少。無(wú)非就是框架設(shè)計(jì)、制作原型、內(nèi)容填充、交互設(shè)計(jì)，最后開(kāi)發(fā)上線(xiàn)，于是乎，我向老板要設(shè)計(jì)資源和開(kāi)發(fā)資源，老板竟然說(shuō)，你一個(gè)人就可以搞定的。
納尼？！我一個(gè)不會(huì)設(shè)計(jì)、不會(huì)敲代碼、妥妥的市場(chǎng)妹子怎么可能搞定……確定不是逗我？
但，老板執(zhí)意如此：“用我們的 MPlatform 就可以了，兩周肯定能上線(xiàn)?！?/p>
MPlatform 是個(gè)啥？我們不是做運(yùn)維產(chǎn)品的么？這和運(yùn)維有啥關(guān)系？
前端童鞋甩了個(gè)鏈接給我，就這樣，開(kāi)啟了我工作三年來(lái)的“程序媛”工作。結(jié)果，一周之后真的搭好了，而且，超過(guò)了一個(gè)高級(jí)前端的水平……
什么是 MPlatform
在運(yùn)維領(lǐng)域的前端開(kāi)發(fā)實(shí)踐中，需要前端搭建開(kāi)發(fā)環(huán)境、編寫(xiě)組件、梳理業(yè)務(wù)邏輯、聯(lián)調(diào)后端接口、發(fā)布上線(xiàn)等一系列繁瑣的工作，中間一個(gè)環(huán)節(jié)的出錯(cuò)，就會(huì)引發(fā)項(xiàng)目的延期、功能的不穩(wěn)定等一系列問(wèn)題。
如何讓運(yùn)維童鞋專(zhuān)注于業(yè)務(wù)邏輯的同時(shí)，降低代碼冗余、開(kāi)發(fā)成本和潛在風(fēng)險(xiǎn)？
MPlatform 應(yīng)運(yùn)而生。MPlatform 是 OpsMind 打造的一個(gè)快速搭建 Web 站點(diǎn)的平臺(tái)。在開(kāi)發(fā)過(guò)程中，只需要進(jìn)行簡(jiǎn)單的組件拼接，組織整理 CMDB 中的數(shù)據(jù)，就能完成整站的搭建任務(wù)。
MPlatform 已經(jīng)被相關(guān)客戶(hù)實(shí)踐，并成為公司大量業(yè)務(wù)系統(tǒng)開(kāi)發(fā)的軸心一環(huán)，推動(dòng)了運(yùn)維監(jiān)控系統(tǒng)整體視覺(jué)和交互規(guī)范的逐漸完善，也使其在前端技術(shù)中得到落實(shí)。
為什么搭建官網(wǎng)選擇 MPlatform
和運(yùn)維業(yè)務(wù)系統(tǒng)開(kāi)發(fā)一樣，傳統(tǒng)官網(wǎng)開(kāi)發(fā)上線(xiàn)的重要一環(huán)便是前端開(kāi)發(fā)，MPlatform 可以實(shí)現(xiàn)任何 Web 站點(diǎn)的搭建，其中的差異只是前端開(kāi)發(fā)前的框架設(shè)計(jì)而已。相比于傳統(tǒng)開(kāi)發(fā)來(lái)說(shuō)可以降低周期，相比于其他 Web 站點(diǎn)搭建平臺(tái)來(lái)說(shuō)，使用 MPlatform 從前期的搭建到后期的維護(hù)都可以自由把控，做到所想即所得。
- 學(xué)習(xí)成本低，無(wú)須敲代碼，只需拖拽控件和錄入文字；
- 數(shù)據(jù)同步間隔可配置，實(shí)時(shí)準(zhǔn)確無(wú)遺漏；
- 規(guī)范了交互方式、頁(yè)面及組件樣式，非常適合交互樣式比較固定的業(yè)務(wù)系統(tǒng)。
準(zhǔn)備工作
- 申請(qǐng)?jiān)囉?OpsMind，獲得 MPlatform 使用權(quán)限
- 設(shè)計(jì)官網(wǎng)原型圖，便于后期自主搭建官網(wǎng)
- 準(zhǔn)備官網(wǎng)展示需要的素材，圖片、文字、文檔等
操作實(shí)踐
- 認(rèn)識(shí) 24 柵格
- 模塊搭建
- 內(nèi)容填充
- 設(shè)計(jì)交互優(yōu)化
- 預(yù)覽成品
學(xué)習(xí)操作頁(yè)面
1.認(rèn)識(shí) 24 柵格
我們將整個(gè)網(wǎng)頁(yè)設(shè)計(jì)區(qū)域按照 24 等分的原則進(jìn)行劃分，劃分之后的區(qū)塊我們稱(chēng)之為『盒子』。每排橫向排列的盒子數(shù)量最多四個(gè)（100%），最少一個(gè)（25%）。需要的內(nèi)容在相應(yīng)的盒子里添加控件即可。
2.模塊搭建
將官網(wǎng)想象成一個(gè)人，控件好比于人體的骨骼，通過(guò)添加各類(lèi)控件可以形成框架。最常見(jiàn)的控件有圖片、標(biāo)題、文本和按鈕，使用這些控件即可搭建好官網(wǎng)的框架。
我們以搭建一個(gè) banner 為例。在 24 柵格中添加標(biāo)題、文本和按鈕這三個(gè)控件即可形成 banner 的框架（如下圖）。
3.內(nèi)容填充
控件里的內(nèi)容可通過(guò)數(shù)據(jù)里的狀態(tài)自定義填充，填充完整后就相當(dāng)于有血有肉的人，是豐富實(shí)在的。我們繼續(xù)在標(biāo)題、文本、按鈕控件里的數(shù)據(jù)中修改文本，改為你想呈現(xiàn)的樣式即可，但由于樣式還未修改，屬于草稿，需要添加設(shè)計(jì)來(lái)美化。
4.設(shè)計(jì)交互優(yōu)化
數(shù)據(jù)可以樣式調(diào)整，如文字大小、內(nèi)外邊距、顏色、對(duì)齊方式等，調(diào)整之后也就穿上了衣裳，是可對(duì)外的完整的。
5.預(yù)覽成品
通過(guò)模塊搭建、內(nèi)容填充和設(shè)計(jì)交互優(yōu)化即可實(shí)現(xiàn)一個(gè)模塊的搭建，完整的站點(diǎn)是通過(guò)各個(gè)模塊拼接實(shí)現(xiàn)的。在這過(guò)程中，通過(guò) MPlatform 不用敲任何代碼，只需依照框架設(shè)計(jì)，實(shí)時(shí)調(diào)整，實(shí)時(shí)更新。
更多使用場(chǎng)景
零代碼開(kāi)發(fā)的成品便是opsmind.com。官網(wǎng)作為最常見(jiàn)的網(wǎng)站搭建站點(diǎn)，對(duì)設(shè)計(jì)、交互、豐富性的要求比業(yè)務(wù)操作系統(tǒng)要求更為繁雜，工單系統(tǒng)、發(fā)布管理系統(tǒng)、博客、成本管理等交互性更簡(jiǎn)單的業(yè)務(wù)系統(tǒng)搭建起來(lái)會(huì)更為簡(jiǎn)單易操作。
