背景

許多人眼中的設(shè)計(jì)師都是跟圖形打交道秕重。UI和視覺設(shè)計(jì)師確實(shí)如此迎变，在分工明確的大公司中也是如此贯城。分工明確的大公司往往有專門的前端工程師玩敏，他們負(fù)責(zé)把視覺稿用代碼盡可能1:1地實(shí)現(xiàn)出來。然而闯第，并不是所有的公司都能有BAT那樣的產(chǎn)品設(shè)計(jì)及開發(fā)團(tuán)隊(duì)市栗。

不少中小型公司并沒有足夠的資源去配置如此詳盡的分工。不少工程師不僅要負(fù)責(zé)后端乡括，還要負(fù)責(zé)前端肃廓。雖然這些工程師也能夠用HTML和CSS把頁面做出來，但往往由于沒有足夠的時(shí)間去考慮頁面前端重構(gòu)的最優(yōu)結(jié)構(gòu)诲泌，及缺少對(duì)網(wǎng)頁無障礙訪問要求的了解盲赊，產(chǎn)出的前端頁面代碼往往并非最佳實(shí)踐。

在國內(nèi)敷扫，尚未有法律或條例對(duì)網(wǎng)頁的無障礙訪問有所要求哀蘑。但放在歐美的許多國家，由于法律規(guī)定網(wǎng)頁需支持無障礙訪問(Web accessibility - 維基百科 )葵第，如果殘疾人無法訪問網(wǎng)站绘迁，網(wǎng)站的擁有者將被視為違法。例如卒密，在英國缀台，網(wǎng)站若對(duì)某些人群設(shè)置障礙，則網(wǎng)站違反了2010年的平等法案（Equality Act 2010 - 維基百科）哮奇，網(wǎng)站的擁有者將會(huì)受到法律制裁膛腐。因?yàn)闆]有明確的法律約束躬窜，需要在產(chǎn)品設(shè)計(jì)與開發(fā)過程注入的這方面的精力與成本就相對(duì)歐美一些網(wǎng)站低了不少或听。當(dāng)然，BAT的一些設(shè)計(jì)團(tuán)隊(duì)也有網(wǎng)頁無障礙訪問的需求意識(shí)衰腌，在他們的團(tuán)隊(duì)博客中也有發(fā)文翻譯贸伐。而大公司的前端人員也因?yàn)槁毮艿拿鞔_勘天，能有時(shí)間和精力去探索與精進(jìn)。

問題

可是以上的這些和Angular.js及Vue.js有什么關(guān)系呢？

上面的這些背景情況給沒有足夠人力資源的小型設(shè)計(jì)開發(fā)團(tuán)隊(duì)帶來了一個(gè)挑戰(zhàn)脯丝。當(dāng)設(shè)計(jì)師輸出了用Axure做的交互原型商膊，又或是用Sketch設(shè)計(jì)好的稿子，在通過跟產(chǎn)品經(jīng)理溝通確認(rèn)了之后巾钉，到開發(fā)那步就遇上了大麻煩翘狱。由于工程師們大都主打Java秘案，雖知曉基本的HTML砰苍，但在前端標(biāo)簽選用上不是清一色的TABLE TD，就是不帶class的DIV套DIV阱高。在頁面的頭部HEADER加載了十來個(gè)CSS文件赚导，打開主要的樣式表，是洋洋灑灑六七千行直接用CSS寫的代碼赤惊。最后頁面的功能是實(shí)現(xiàn)了吼旧，但是和交互設(shè)計(jì)原型比起來，頁面看起來總覺得哪里不對(duì)勁未舟。因?yàn)楣こ處煕]有注意到一些設(shè)計(jì)的細(xì)節(jié)圈暗，諸如留白、邊距裕膀、陰影等等员串，更別提精確到像素了。工程師找設(shè)計(jì)師過目昼扛，設(shè)計(jì)師只能說沒達(dá)到設(shè)計(jì)需求寸齐，可也不知道該怎么改用Java生成的代碼。工程師可能因此要反反復(fù)復(fù)修改抄谐，再找設(shè)計(jì)師審渺鹦。這樣的設(shè)計(jì)開發(fā)合作效率非常低，怎么辦蛹含？

解決問題

好在八九年前就因?yàn)橄胍H手制作網(wǎng)頁而系統(tǒng)自學(xué)了HTML和CSS毅厚，加之遍歷用戶體驗(yàn)相關(guān)書籍，知道一些基本的HTML和CSS實(shí)踐浦箱。 所以在第一家公司吸耿，我開始直接使用HTML+CSS+簡單的JavaScript來輸出設(shè)計(jì)產(chǎn)出物，來做原型展示及開發(fā)溝通憎茂。更擅長后端的工程師們于是不需要再自己拼湊前端樣式珍语，只需要用SVN獲得最新的HTML原型，就可以根據(jù)我提供的HTML原型稿進(jìn)行開發(fā)竖幔，class和CSS都已訂好板乙。他們只需要添加少量JavaScript來實(shí)現(xiàn)交互效果，也節(jié)省了更多反復(fù)溝通審閱的時(shí)間用于后端及新功能的開發(fā)。

對(duì)于設(shè)計(jì)師來說募逞，產(chǎn)品設(shè)計(jì)元素的一致性大大有助于用戶快速上手一款產(chǎn)品蛋铆。對(duì)于大型且復(fù)雜的企業(yè)級(jí)網(wǎng)站來說更是如此。設(shè)計(jì)師用設(shè)計(jì)稿來管理設(shè)計(jì)元素是管理的方法之一放接，直接通過代碼來管理設(shè)計(jì)元素也是一種方法刺啦。只是換了一種工具而已。但相比圖形纠脾，直接通過代碼管理產(chǎn)品設(shè)計(jì)元素將是更直接高效的方法玛瘸。因?yàn)閳D形軟件和瀏覽器的渲染方式不太一樣，看設(shè)計(jì)稿和看圖片的體驗(yàn)確有差別苟蹈。而設(shè)計(jì)師只需要稍加學(xué)習(xí)前端重構(gòu)的知識(shí)糊渊，就能在小團(tuán)隊(duì)中更高效地與開發(fā)者協(xié)作。如果設(shè)計(jì)與開發(fā)的效率提高了慧脱，這對(duì)一家公司來說渺绒，將大大節(jié)省時(shí)間成本，而設(shè)計(jì)師的價(jià)值也就在此體現(xiàn)菱鸥。

在小團(tuán)隊(duì)中宗兼，如果直接用HTML和CSS制作原型能夠提高設(shè)計(jì)與開發(fā)的溝通效率，那么在這一方法應(yīng)用之后氮采，還有效率提升的空間嗎殷绍？答案是：有！

更高效地解決問題

HTML原型的好處是能夠在最短的時(shí)間內(nèi)產(chǎn)出最接近于真實(shí)產(chǎn)品的效果扳抽。而真實(shí)產(chǎn)品中少不了數(shù)據(jù)篡帕。如果單是用HTML和CSS寫原型，遇到表格贸呢，列表這類需要些樣本數(shù)據(jù)的結(jié)構(gòu)怎么辦镰烧。這些部分可能會(huì)讓你的HTML文件看起來有一長串，而工程師不需要這一長串冗余的結(jié)構(gòu)楞陷，他們只需要知道在哪里需要插入數(shù)據(jù)怔鳖。

這時(shí)候就要用到諸如JavaScript框架了，小標(biāo)題提到的Angular.js和Vue.js都是JavaScript框架的一種固蛾。在這些框架的官方網(wǎng)站结执，你會(huì)看到大量文檔，教你實(shí)現(xiàn)各種目標(biāo)事件或是綁定數(shù)據(jù)艾凯，渲染頁面献幔。

過去的四年，我一直用Angular.js來參與高保真原型的設(shè)計(jì)趾诗。對(duì)于設(shè)計(jì)師來說蜡感，你不需要用這類框架來實(shí)現(xiàn)一個(gè)完全能用的應(yīng)用蹬蚁，你需要的，是用更短的時(shí)間郑兴，在原型中放入樣本數(shù)據(jù)犀斋，并呈現(xiàn)交互效果。

大約4年前情连，Angular.js推出叽粹，經(jīng)過了一番學(xué)習(xí)和折騰之后，終于實(shí)現(xiàn)了在原型中綁定數(shù)據(jù)的效果却舀。由于網(wǎng)站頁面結(jié)構(gòu)的一致性虫几，這些原型的部分元素慢慢地就變成了模板。你可以在新的原型中直接復(fù)制粘貼他們禁筏，然后更改一些數(shù)據(jù)持钉，就可以快速輸出目標(biāo)需求解決方案衡招。

結(jié)合了Angular.js數(shù)據(jù)綁定和基本交互事件的高保真原型到了工程師那里依然只是個(gè)參考篱昔，你可以不必在意工程師是否應(yīng)用了這套框架，只需在意工程師是否依照原型始腾，應(yīng)用了預(yù)期的設(shè)計(jì)效果州刽。

就這樣，伴隨著Angular.js浪箭，我在四年的時(shí)間里用這套方法完成了一百多個(gè)需求的設(shè)計(jì)原型穗椅。產(chǎn)品經(jīng)理和工程師也都能快速適應(yīng)設(shè)計(jì)師的產(chǎn)出物。溝通基本沒有什么障礙奶栖。

當(dāng)然匹表，用Angular.js做原型設(shè)計(jì)也有美中不足的地方。因?yàn)锳ngular.js的控制器必須在服務(wù)器環(huán)境下才能正常運(yùn)作宣鄙。如果工程師沒有給這個(gè)原型文件夾開個(gè)服務(wù)器袍镀，有些數(shù)據(jù)和交互事件就不能正常顯示。再有Angular對(duì)在UI控件和Route的設(shè)置上有些麻煩冻晤，對(duì)于可重用的UI元素苇羡，不能在短時(shí)間內(nèi)快速調(diào)用。

于是在2016年鼻弧，我開始學(xué)習(xí)和采用Vue.js设江。Vue.js不僅補(bǔ)足了上述的美中不足之處，不需要給頁面開服務(wù)器攘轩，所有的交互叉存、數(shù)據(jù)渲染都能正常運(yùn)行。Vue.js的UI component方法也更易學(xué)易使用度帮，有助于設(shè)計(jì)師進(jìn)行UI模塊化管理歼捏。運(yùn)行時(shí)Vue.js也比Angular.js 1.x 給人人感覺性能更好，速度更快。Vue.js的作者Evan You是設(shè)計(jì)師背景的國人甫菠，Vue.js的文檔和整體體驗(yàn)設(shè)計(jì)很不錯(cuò)挠铲。Vue.js如今的新版本發(fā)布頻率也很高，得到了國際友人的一致肯定寂诱。

總而言之

無論你是在分工明確的大公司拂苹，還是在需獨(dú)擋多面的小團(tuán)隊(duì)，學(xué)習(xí)前端開發(fā)痰洒，并應(yīng)用到設(shè)計(jì)叫服務(wù)中去對(duì)設(shè)計(jì)環(huán)節(jié)的效率提升都是有益無害的瓢棒。即時(shí)你無需親自出HTML版的設(shè)計(jì)原型，熟悉一點(diǎn)編程邏輯也能幫助開發(fā)你的左腦丘喻，讓你更加聰明脯宿。

設(shè)計(jì)師，時(shí)候開始學(xué)習(xí)寫代碼了泉粉。