來(lái)源：Epub360公眾微信（微信號(hào)：epub360）

寫在前面的話，因?yàn)榛ヂ?lián)網(wǎng)行業(yè)的介入，很多行業(yè)的一貫法則都發(fā)生了變化，比如零售、金融、地產(chǎn)、汽車、通訊、旅游等等……平面設(shè)計(jì)師作為各行業(yè)中比較下游的一個(gè)崗位，不管是被客戶上司逼被還是平日的潛移默化，其實(shí)也多少受到互聯(lián)網(wǎng)的影響，感知風(fēng)向起步較早的一批甚至已經(jīng)蛻變到了移動(dòng)端的設(shè)計(jì)師，任職于大型互聯(lián)網(wǎng)企業(yè)UI UE，這里暫且不表。 

因?yàn)楣P者這只笨鳥也還在摸索的道路上，在這里談的算不上什么建議，只是一些血淚史（有血有淚有shi），設(shè)計(jì)行業(yè)變化很快，不過(guò)總結(jié)起來(lái)也不出三大塊：

1. 內(nèi)容 

2. 表現(xiàn)技巧 

3. 觀念觀念還是觀念

壹·先來(lái)說(shuō)說(shuō)隔靴搔癢的內(nèi)容

前平面設(shè)計(jì)師做的比較多的工作，比較常見(jiàn)是設(shè)計(jì)logo、vi系統(tǒng)里七七八八的東西、catalog、包裝以及印刷的七七八八的東西除此以外就是專門的網(wǎng)頁(yè)設(shè)計(jì)師。除了內(nèi)容不知所云的印刷品和層級(jí)多到爆的網(wǎng)頁(yè)，其他設(shè)計(jì)項(xiàng)目都比較抽象，比如最常見(jiàn)的logo設(shè)計(jì)。只言片語(yǔ)的線索，要求高端大氣上檔次～開(kāi)搞！這樣一向情愿的鴕鳥效應(yīng)在h5廣告上倒是不會(huì)有，因?yàn)橐话阃秇5廣告和傳統(tǒng)設(shè)計(jì)最大不同是kpi那座大山！折頁(yè)、名片印出來(lái)可以往桌角一擱完事，h5廣告這樣pm就要?dú)⑷肆撕妹矗?nbsp;

案例詳情：http://www.dh-gg.com/projects/13596.html

雖說(shuō)內(nèi)容并不是設(shè)計(jì)師可以控制，(大不了文案不好大圖湊)不過(guò)設(shè)計(jì)師還是可以給予內(nèi)容編輯一些建議，

比如開(kāi)篇、序言、轉(zhuǎn)折部分要給頁(yè)面足夠的空間，不要吝嗇空白頁(yè)（也叫調(diào)劑頁(yè)，點(diǎn)到為止不然有放水嫌疑），有時(shí)一個(gè)頁(yè)面擺一句文案就足夠提氣；描述產(chǎn)品部分請(qǐng)直奔重點(diǎn)——也就是產(chǎn)品本身，如果有翔實(shí)的數(shù)據(jù)支持，文案結(jié)構(gòu)對(duì)稱那么你可以偷笑了：遇到了一個(gè)好copy，這樣的內(nèi)容可以為作品加分。相反什么得過(guò)國(guó)際大獎(jiǎng)，名師設(shè)計(jì)，進(jìn)口材質(zhì)，綠色生產(chǎn)過(guò)程，阿貓阿狗用了都說(shuō)好……面面俱到的文案還是盡可能少一點(diǎn)。在不脫離內(nèi)容的基礎(chǔ)上，還是建議設(shè)計(jì)師們盡可能加入內(nèi)容的梳理工作中，比如試試把傳統(tǒng)的標(biāo)題整成可點(diǎn)擊的標(biāo)簽（tag），把slogan整得更口語(yǔ)化，大段的條目文字配合圖片做成幻燈輪播，或者逐條的動(dòng)畫進(jìn)入，看著也就沒(méi)那么煩了。畢竟大家都沒(méi)有那么多時(shí)間一本正經(jīng)看大段文字。

貳·表現(xiàn)技巧，斷舍離

首先設(shè)計(jì)師得有這樣的概念，H5廣告的和投放成本比網(wǎng)頁(yè)和印刷品都要大得多，時(shí)效性上一朝一夕就over了，總之它比較金貴。在有限的手機(jī)屏讓傳播效益最大化就是表現(xiàn)的活兒了。視覺(jué)傳達(dá)依然離不開(kāi)平面的基礎(chǔ)：構(gòu)圖、色彩、空間。黃金分割自不必贅述，但是到移動(dòng)端上“主題元素居中突出”更不會(huì)犯錯(cuò)；經(jīng)典的幾何構(gòu)圖比如穩(wěn)定的正三角形、圓形、正方、二、三等分構(gòu)圖，傾斜、幾何形構(gòu)圖搭配輔助圖形會(huì)產(chǎn)生不穩(wěn)定感，但也會(huì)有年輕、銳氣的感官，而邊緣化構(gòu)圖會(huì)讓作品顯得更加老辣。上述的構(gòu)圖法往往在傳統(tǒng)的平面設(shè)計(jì)上用到概率比較少，就算偶爾大膽嘗會(huì)被要求和其他元素融合一下或者用什么東東破一下，甚至最后改回一張大圖。傳統(tǒng)平面設(shè)計(jì)上更多是為品牌形象，產(chǎn)品格調(diào)服務(wù)，所以視覺(jué)元素、畫面層次較豐富，而在h5廣告的設(shè)計(jì)則盡量保持視覺(jué)主體的單純性。

案例詳情：http://www.dh-gg.com/projects/15561.html

這里要提一下字體設(shè)計(jì)，它既是內(nèi)容設(shè)計(jì)也是構(gòu)圖設(shè)計(jì)，一款成功的title設(shè)計(jì)本身就可以hold住畫面。

而一個(gè)精雕細(xì)追的畫面脫離了標(biāo)題未必可以hold住主題。 

色彩也有了比較大的顛覆，我們所看見(jiàn)的大量紅配綠、藍(lán)配黃的撞色搭配越來(lái)越多，以及熒光色也時(shí)不時(shí)來(lái)湊熱鬧啦，這種在以往設(shè)計(jì)領(lǐng)域被視為深井冰的配色搖身一變成了怪咖潮范的經(jīng)典。其次是大面積黑白灰的配合也很常見(jiàn)，優(yōu)雅的黑白照片再度被大量啟用，（黑白大圖壓大字成為一句半調(diào)侃半真理）換了以前把領(lǐng)導(dǎo)照片p成黑白的你試試……可以用那么多犀利的顏色還不用擔(dān)心輸出、色差問(wèn)題也是得益于移動(dòng)大屏設(shè)備的普及。HSB色板漸漸代替了傳統(tǒng)印刷領(lǐng)域的cmyk色板，以及大面積的純色代替漸變色，畢竟互聯(lián)網(wǎng)上的色彩需要單純、明確、有情緒。 

空間的表現(xiàn)比上述都要復(fù)雜一些，處理好構(gòu)圖和色彩依然還停留在平面設(shè)計(jì)范疇，沒(méi)有空間時(shí)間的流動(dòng)就不能體現(xiàn)h5的真正魅力。在平面上模擬空間流動(dòng)也是有幾種方法的：視差效果，前景和背景在屏幕滾動(dòng)時(shí)位置的差異，這里的實(shí)現(xiàn)方法用epub360的layer組件再合適不過(guò)了，筆者當(dāng)初就是被layer組件的視差demo吸引然后迷上了Epub360（害羞）。 

還有些做法是巧妙利用了素材，通過(guò)假3d畫面素材，搭配和基本的放大縮小移動(dòng)這些動(dòng)畫，依然可以營(yíng)造出簡(jiǎn)單輕量級(jí)的空間感。 

如果設(shè)計(jì)師會(huì)3d軟件那么想象力完全可以火力全開(kāi)，建模渲染一個(gè)場(chǎng)景作環(huán)境，搭配上epub360的序列幀利器和各種觸發(fā)，場(chǎng)景再現(xiàn)妥妥的。 

空間的表現(xiàn)依然需要統(tǒng)一和單一，雖然h5作品可以在多個(gè)頁(yè)面翻轉(zhuǎn)，但是場(chǎng)景不宜轉(zhuǎn)換過(guò)多。

上述內(nèi)容和表現(xiàn)技巧兩2點(diǎn)還僅僅停留在圍繞視覺(jué)感官的工作，探討下H5相比平面媒介的從整體感官上不同，舉幾個(gè)栗子：

案例詳情：http://www.dh-gg.com/projects/15626.html

案例詳情：http://www.dh-gg.com/projects/15059.html

其實(shí)熟悉為微信h5的小伙伴應(yīng)該已經(jīng)看出來(lái)了，以上是典型的測(cè)試題類H5，但是通過(guò)噱頭的畫面和戲劇性的文案，測(cè)試題主線顯得絲毫不違和，反而讓人對(duì)過(guò)程有所期待看到結(jié)果時(shí)會(huì)心一笑。

再來(lái)看些全程和用戶互動(dòng)的栗子：

案例詳情：http://www.dh-gg.com/projects/15382.html

案例詳情：http://www.dh-gg.com/projects/13714.html

案例詳情：http://www.dh-gg.com/projects/15634.html

案例詳情：http://www.dh-gg.com/projects/14604.html

 以上，通過(guò)劍走偏鋒的切入點(diǎn)來(lái)貼合主題，案例展現(xiàn)出前所未有的用戶體驗(yàn)，美、玩味、懸念、儀式感等等。作品自然經(jīng)過(guò)大量的人力物力，并不是一兩位平面設(shè)計(jì)師就能實(shí)現(xiàn)的了，那么我們從中可受到怎樣的啟發(fā)？既然各行各業(yè)觸網(wǎng)的大趨勢(shì)不可逆轉(zhuǎn)，接下來(lái)聊聊平面設(shè)計(jì)師轉(zhuǎn)型。 

叁·知識(shí)體系和觀念的迭代

傳統(tǒng)的平面設(shè)計(jì)師的應(yīng)用知識(shí)：修圖、排版（輸出印前流程和網(wǎng)頁(yè)排版規(guī)范）字體設(shè)計(jì)圖形插畫設(shè)計(jì)、色彩心理學(xué)、web端還涉及到html css代碼等，相信全面掌握這些的設(shè)計(jì)師已經(jīng)是資深設(shè)計(jì)師并且在工作中可以獨(dú)當(dāng)一面。這樣的設(shè)計(jì)師初入交互領(lǐng)域，還是需要學(xué)習(xí)不少知識(shí)，比如常見(jiàn)的畫布尺寸和最小單位以及最后交付的完稿文件都有了變化，除此以外大家會(huì)感受到： h5的設(shè)計(jì)更像個(gè)活物，不僅僅頁(yè)面的每個(gè)角落帶有響應(yīng)，甚至作品的線性空間內(nèi)都可以相互影響。所以要求設(shè)計(jì)師的打破一維思維狀態(tài)，由單純的視覺(jué)維度轉(zhuǎn)向用戶交互界面繼而將時(shí)空等客觀環(huán)境因素都考慮進(jìn)去，歸納來(lái)說(shuō)：線型思維轉(zhuǎn)向發(fā)散性思維。 

再來(lái)看下交互設(shè)計(jì)師的總體知識(shí)體系：

這里不難得出視覺(jué)設(shè)計(jì)只占據(jù)很小一部分，前道需求分析和流程設(shè)計(jì)往往都有其專門的崗位來(lái)負(fù)責(zé)，剩下的原型部分和可用性測(cè)試還是會(huì)和設(shè)計(jì)師的工作有交集，甚至由平面設(shè)計(jì)一起包攬。假如你接受了這個(gè)挑戰(zhàn)，就不光要著眼于畫布上那些元件和圖層。按照用epub360制作一款簡(jiǎn)單展示類h5來(lái)說(shuō)，設(shè)計(jì)工作完成（只代表完成了一半），還需要切圖—優(yōu)化素材—在線平臺(tái)重新置入素材—?jiǎng)赢嬙O(shè)置—觸發(fā)事件設(shè)置—頁(yè)面關(guān)系調(diào)整—輔助元素（LOGO交互提示音樂(lè)）的設(shè)置以及不下幾十次的在線測(cè)試優(yōu)化?？傮w工作量遠(yuǎn)大于單純的平面設(shè)計(jì)，操作熟練的設(shè)計(jì)師可以在1-2天完成設(shè)計(jì)和所有動(dòng)銷交互，憑的不光是手速和軟件的熟練度，還有對(duì)總體流程了然于胸。例如：幻燈和普通原件在切圖上的區(qū)別，動(dòng)畫制作中哪里用幻燈哪里該用序列幀，循環(huán)動(dòng)畫的觸發(fā)是不是存在不合理？這些話題每天都在被討論著，而就在這些細(xì)微處，用戶之間的距離也漸漸拉開(kāi)了。在epub360上逛的略久常常看見(jiàn)一些年輕設(shè)計(jì)師吐槽：項(xiàng)目經(jīng)理把一個(gè)文檔丟過(guò)來(lái)，慘無(wú)人道要求在兩天時(shí)間里做出一個(gè)H5云云。其實(shí)個(gè)人覺(jué)得除了工作量的陡增這未必是件壞事，至少說(shuō)明經(jīng)理信任你，你可以展現(xiàn)自己的執(zhí)行和文字解讀能力，注意在制作過(guò)程必要節(jié)點(diǎn)和項(xiàng)目負(fù)責(zé)人進(jìn)行匯報(bào)和及時(shí)溝通。溝通的重要性在h5制作中不容忽視，主張?jiān)O(shè)計(jì)師們利用各種工具來(lái)表達(dá)自己的想法。這里可推薦的小工具有，Axure\mindmanage\ PPT \Keynote\以及我們手中的紙和筆。

理解和協(xié)調(diào)整體的能力 

上述幾個(gè)著名案例，展現(xiàn)點(diǎn)不同表現(xiàn)風(fēng)格各異，拆解單個(gè)作品的元素細(xì)節(jié)非常協(xié)調(diào)，小到icon、筆觸的擺放都經(jīng)過(guò)了考慮也就是再設(shè)計(jì)，最終達(dá)到視覺(jué)上自成一套體系。這里的規(guī)范統(tǒng)一又區(qū)別于vi和畫冊(cè)的絕對(duì)統(tǒng)一，形象講：不需要再為了app里一個(gè)轉(zhuǎn)角死扣像素或者制作一本catalog反復(fù)比對(duì)行距和潘通色值，因?yàn)槲覀兊幕ヂ?lián)網(wǎng)傳播更快餐，大多數(shù)用戶不會(huì)注意這些只有執(zhí)行者才看得出的區(qū)別。然后這并不代表設(shè)計(jì)師可以偷工減料，雖然在單一頁(yè)面上的花費(fèi)時(shí)間減少，不過(guò)h5作品的整體關(guān)聯(lián)性會(huì)讓我們?yōu)橐粋€(gè)頁(yè)面上的疏忽而付出全局的代價(jià)，就好像使用0代碼基礎(chǔ)的第三方平臺(tái)來(lái)制作h5那樣，如果對(duì)一些基本知識(shí)的認(rèn)識(shí)不足，到后期會(huì)出現(xiàn)各種狀況，這些都是設(shè)計(jì)師在轉(zhuǎn)型中要面對(duì)的。 

好比說(shuō)h5商業(yè)作品是一個(gè)立方體，視覺(jué)部分是立方體中的其中一面，那么營(yíng)銷企劃、用戶體驗(yàn)、特效制作、文案雕琢、媒體投放等構(gòu)成了這個(gè)立方體的另外五面，各項(xiàng)活做得越扎實(shí)作品越飽滿，也越接近廣告目標(biāo)。各環(huán)節(jié)的溝通不順暢各自為政，那么可以聯(lián)想到六面體會(huì)是只有表面文章的花架子，當(dāng)然花架子總好過(guò)只有一兩面的紙片兒。再回顧下交互設(shè)計(jì)師的知識(shí)體系，如好學(xué)的小伙伴們不滿足于平面設(shè)計(jì)這個(gè)小面，習(xí)慣用交互設(shè)計(jì)師的視角去考慮每一個(gè)頁(yè)面，那么對(duì)整體作品乃至我們的職業(yè)道路都可以加分。 

那么問(wèn)題來(lái)了，如何用交互設(shè)計(jì)理論體系來(lái)衡量h5作品的好壞呢，這里提幾個(gè)常見(jiàn)標(biāo)準(zhǔn)供大家參考：項(xiàng)目核心要傳達(dá)的是晦澀還是鮮明；視覺(jué)中心是否夠直接明了，圖形元素是否會(huì)有歧義或帶來(lái)不適感；交互的設(shè)置是否能讓用戶用得順手，如不順手是否進(jìn)行了必要的解釋；動(dòng)畫特效是否會(huì)卡頓滯后，各種平臺(tái)的兼容測(cè)試……多站在用戶角度來(lái)審視作品，很多問(wèn)題在前期就可以被規(guī)避。設(shè)計(jì)師們也可以通過(guò)各種渠道加強(qiáng)理論學(xué)習(xí)，比如至少通讀下iOS 人機(jī)界面指南吧~ios的體系確實(shí)有其獨(dú)到的考慮和魔鬼細(xì)節(jié)，這里不是神化蘋果，不管怎么說(shuō)蘋果公司小到門店一個(gè)展柜大到產(chǎn)品發(fā)布會(huì)模式都被抄襲了不下一百遍啊一百遍。

不得不面對(duì)的現(xiàn)狀，事實(shí)上在需求分析擬定階段就可能牽扯到交互，也就是交互的前置化，比較遺憾的是，一般公司PM/AM在此階段很少讓設(shè)計(jì)人員參與進(jìn)來(lái)，導(dǎo)致溝通執(zhí)行之間出現(xiàn)斷層。不過(guò)在機(jī)遇與挑戰(zhàn)并存的互聯(lián)網(wǎng)時(shí)代，設(shè)計(jì)師的地位逐漸回到本位，只要愿意做，機(jī)會(huì)就在你身邊。

 注：作者NEVER為Epub360推薦設(shè)計(jì)師，公開(kāi)課講師。