|
我們總說軟件開發(fā)流程，是從需求分析開始，到界面設(shè)計(jì)，再到代碼實(shí)現(xiàn)但實(shí)際情況卻是，很多面向B端的開發(fā)團(tuán)隊(duì)，不僅沒有UI設(shè)計(jì)師，更多時(shí)候連產(chǎn)品經(jīng)理，都是你的直屬上級(jí)。指望領(lǐng)導(dǎo)給你畫原型？做夢(mèng)吧！??基于此，那些你以為只有外包設(shè)計(jì)師才能遇見的“左移一點(diǎn)”、“搜索框大一點(diǎn)”、“顏色醒目一點(diǎn)”的問題，在前端工程師面前，同樣屢見不鮮。 
而區(qū)別于C端產(chǎn)品，可以通過數(shù)據(jù)事實(shí)作為設(shè)計(jì)指導(dǎo)，B端產(chǎn)品的視覺傳達(dá)，其實(shí)更難通過某種固定的方法論來得到預(yù)期的結(jié)果。（還時(shí)常是領(lǐng)導(dǎo)的“一言堂”） 最后結(jié)果就是，你樂此不疲寫的Carousel、Tree、Calendar、Avatar組件，也無外乎是在重復(fù)造輪子！慢慢下來，你的前端工作將會(huì)變成那推石上山的西西弗斯一樣，不斷重復(fù)、永無止境，還總是因?yàn)橐稽c(diǎn)點(diǎn)小事就全線崩盤！ 
打破思維僵局其實(shí)在沒有UI設(shè)計(jì)師的情況下，前端工程師更應(yīng)該考慮去補(bǔ)足界面設(shè)計(jì)的這個(gè)步驟。先把界面布局確定好，往下才是React/Angular/Vue……的事情。
因?yàn)榧幢鉏DE可以實(shí)現(xiàn)快速預(yù)覽，也無法改變我們因?yàn)閹讉€(gè)像素而在瀏覽器和開發(fā)工具之間反復(fù)橫跳的現(xiàn)狀。再加上前端沒有設(shè)計(jì)稿就直接開發(fā)，時(shí)常會(huì)碰見大方向推翻、小細(xì)節(jié)改動(dòng)的情況。 
所以，沒有設(shè)計(jì)，沒有產(chǎn)品的時(shí)候，自己畫一個(gè)界面吧！盡管這樣看似增加了一個(gè)工作步驟，但其實(shí)是在降低工作中的試錯(cuò)成本。 嘗試自己布局一個(gè)原型界面其中的道理很簡(jiǎn)單，就像我們都能理解可視化編程和編程是兩回事一樣，那么搭建一個(gè)界面布局和實(shí)現(xiàn)一個(gè)產(chǎn)品頁(yè)面，同樣也是兩回事。與在IDE中編輯不同，利用原型工具去繪制一個(gè)產(chǎn)品界面后再編碼，相當(dāng)于將界面設(shè)計(jì)和業(yè)務(wù)邏輯從交互、數(shù)據(jù)中剝離了出來，這其實(shí)更有利于我們對(duì)于頁(yè)面布局和功能規(guī)劃的思考。另外大家其實(shí)也不用擔(dān)心這樣會(huì)很麻煩，因?yàn)榻?jīng)由我實(shí)踐下來，畫個(gè)原型并不會(huì)耽誤大家太多的時(shí)間。像我使用的這個(gè)摹客RP原型工具，它自帶了豐富的預(yù)設(shè)組件及海量圖標(biāo)，再搭配上高自由度的編輯方式和完善的矢量編輯功能，無論搭建線框原型還是高保真設(shè)計(jì)稿，都能快速幫我們完成產(chǎn)出。
而有了界面框架再談開發(fā)實(shí)現(xiàn)，那簡(jiǎn)直就是照著答案抄試卷，跟玩兒似的~ 豐富的組件庫(kù)資源除基礎(chǔ)功能以外，摹客RP的資源庫(kù)還擁有Ant Design、Element、Material Design、Wireframes web等多個(gè)組件庫(kù)的資源，并且都支持一鍵復(fù)用，效率非常驚人。 除組件外，它還提供了各種類型的設(shè)計(jì)模板，我們也可以對(duì)需要的項(xiàng)目進(jìn)行查看、體驗(yàn)編輯并保存復(fù)用。像我自己，在例子項(xiàng)目中發(fā)現(xiàn)一些非常實(shí)用的組件時(shí)，也會(huì)順手存為資源，下次直接拖進(jìn)自己的項(xiàng)目中，可以說是相當(dāng)便捷了。 組件庫(kù)&模板例子搭配起來用，一個(gè)小時(shí)擼一套原型真不是什么問題。 
|
