編者按：Html 5這么吃香，平面設(shè)計師該做點什么？今天Epub360的推薦講師Never從設(shè)計內(nèi)容、表現(xiàn)技巧和觀念三個方面，聊聊平面設(shè)計師該如何在這次浪潮中成功站穩(wěn)腳跟，文中附上大量實戰(zhàn)案例，不談空話干貨滿滿。想成為Html 5風(fēng)口上的一只豬？來學(xué)習(xí)下這篇！

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

因為筆者這只笨鳥也還在摸索的道路上，在這里談的算不上什么建議，只是一些血淚史（有血有淚），設(shè)計行業(yè)變化很快，不過總結(jié)起來也不出三大塊：

1. 內(nèi)容
2. 表現(xiàn)技巧
3. 觀念觀念還是觀念

一、先來說說隔靴搔癢的內(nèi)容

前平面設(shè)計師做的比較多的工作，比較常見是設(shè)計logo、VI系統(tǒng)里七七八八的東西、catalog、包裝以及印刷的七七八八的東西除此以外就是專門的網(wǎng)頁設(shè)計師。除了內(nèi)容不知所云的印刷品和層級多到爆的網(wǎng)頁，其他設(shè)計項目都比較抽象，比如最常見的logo設(shè)計。只言片語的線索，要求高端大氣上檔次～開搞！這樣一向情愿的鴕鳥效應(yīng)在H5廣告上倒是不會有，因為一般投H5廣告和傳統(tǒng)設(shè)計最大不同是kpi那座大山！折頁、名片印出來可以往桌角一擱完事，H5廣告這樣pm就要殺人了好么？

《大眾點評 我們之間就一個字》案例體驗：

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

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

二、表現(xiàn)技巧，斷舍離

首先設(shè)計師得有這樣的概念，H5廣告的和投放成本比網(wǎng)頁和印刷品都要大得多，時效性上一朝一夕就over了，總之它比較金貴。在有限的手機屏讓傳播效益最大化就是表現(xiàn)的活兒了。視覺傳達依然離不開平面的基礎(chǔ)：構(gòu)圖、色彩、空間。黃金分割自不必贅述，但是到移動端上“主題元素居中突出”更不會犯錯；經(jīng)典的幾何構(gòu)圖比如穩(wěn)定的正三角形、圓形、正方、二、三等分構(gòu)圖，傾斜、幾何形構(gòu)圖搭配輔助圖形會產(chǎn)生不穩(wěn)定感，但也會有年輕、銳氣的感官，而邊緣化構(gòu)圖會讓作品顯得更加老辣。

上述的構(gòu)圖法往往在傳統(tǒng)的平面設(shè)計上用到概率比較少，就算偶爾大膽嘗會被要求和其他元素融合一下或者用什么東東破一下，甚至最后改回一張大圖。傳統(tǒng)平面設(shè)計上更多是為品牌形象，產(chǎn)品格調(diào)服務(wù)，所以視覺元素、畫面層次較豐富，而在H5廣告的設(shè)計則盡量保持視覺主體的單純性。

《華為：“中國智慧 觸控未來”Mate S新品上市》案例體驗：

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

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

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

空間的表現(xiàn)比上述都要復(fù)雜一些，處理好構(gòu)圖和色彩依然還停留在平面設(shè)計范疇，沒有空間時間的流動就不能體現(xiàn)H5的真正魅力。在平面上模擬空間流動也是有幾種方法的：視差效果，前景和背景在屏幕滾動時位置的差異等。

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

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

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

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

《大眾點評：海外游你還帶著厚厚一疊攻略？》

案例體驗：

《滴滴順風(fēng)車：測測堵車傷殘指數(shù)》

案例體驗：

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

再來看些全程和用戶互動的栗子：

美年達滴滴畫臉

案例體驗：

Nike 科比逆天瞬殺極速測試

案例體驗：

京東金融：躺著也能掙錢

案例體驗：

杜蕾斯的第一座美術(shù)館

案例詳情：

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

三、知識體系和觀念的迭代

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

再來看下交互設(shè)計師的總體知識體系：

這里不難得出視覺設(shè)計只占據(jù)很小一部分，前道需求分析和流程設(shè)計往往都有其專門的崗位來負(fù)責(zé)，剩下的原型部分和可用性測試還是會和設(shè)計師的工作有交集，甚至由平面設(shè)計一起包攬。假如你接受了這個挑戰(zhàn)，就不光要著眼于畫布上那些元件和圖層。設(shè)計工作完成（只代表完成了一半），還需要切圖—優(yōu)化素材—在線平臺重新置入素材—動畫設(shè)置—觸發(fā)事件設(shè)置—頁面關(guān)系調(diào)整—輔助元素（LOGO交互提示音樂）的設(shè)置以及不下幾十次的在線測試優(yōu)化?？傮w工作量遠(yuǎn)大于單純的平面設(shè)計，操作熟練的設(shè)計師可以在1-2天完成設(shè)計和所有動銷交互，憑的不光是手速和軟件的熟練度，還有對總體流程了然于胸。例如：幻燈和普通原件在切圖上的區(qū)別，動畫制作中哪里用幻燈哪里該用序列幀，循環(huán)動畫的觸發(fā)是不是存在不合理？這些話題每天都在被討論著，而就在這些細(xì)微處，用戶之間的距離也漸漸拉開了。

常?？匆娨恍┠贻p設(shè)計師吐槽：項目經(jīng)理把一個文檔丟過來，慘無人道要求在兩天時間里做出一個H5云云。其實個人覺得除了工作量的陡增這未必是件壞事，至少說明經(jīng)理信任你，你可以展現(xiàn)自己的執(zhí)行和文字解讀能力，注意在制作過程必要節(jié)點和項目負(fù)責(zé)人進行匯報和及時溝通。溝通的重要性在H5制作中不容忽視，主張設(shè)計師們利用各種工具來表達自己的想法。這里可推薦的小工具有，Axure\mindmanage\ PPT \Keynote\以及我們手中的紙和筆。

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

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

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

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

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

【騰訊最新的Html 5經(jīng)典案例合集】

火爆朋友圈的吳亦凡入伍！
《親歷者說！火爆的“吳亦凡入伍”HTML5背后有哪些設(shè)計故事？》

最流行槍戰(zhàn)游戲！
《《全民突擊》HTML5設(shè)計全程回顧及經(jīng)驗總結(jié)》

騰訊技術(shù)干貨！
《如何做一個讓人聞風(fēng)喪膽的HTML5頁面》

作者微信號：Epub360
原文地址：http://mp.weixin.qq

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計師學(xué)習(xí)平臺，專注分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程。
【特色推薦】
設(shè)計師需要讀的100本書：史上最全的設(shè)計師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計微博：擁有粉絲量103萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導(dǎo)航：http://hao.uisdc.com