HTML5時代，平面設計師該從哪些方面進行自我提升？

Html 5這么吃香，平面設計師該做點什么？今天Epub360筆者從設計內容、表現技巧和觀念三個方面，聊聊平面設計師該如何在這次浪潮中成功站穩腳跟，文中附上大量實戰案例，不談空話干貨滿滿。想成為Html 5風口上的一只豬？來學習下這篇！

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

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

內容 表現技巧 觀念觀念還是觀念

一、先來說說隔靴搔癢的內容

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

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

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

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

二、表現技巧，斷舍離

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

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

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

這里要提一下字體設計，它既是內容設計也是構圖設計，一款成功的title設計本身就可以hold住畫面。

而一個精雕細追的畫面脫離了標題未必可以hold住主題。

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

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

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

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

空間的表現依然需要統一和單一，雖然H5作品可以在多個頁面翻轉，但是場景不宜轉換過多。

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

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

案例體驗：

《滴滴順風車：測測堵車傷殘指數》

案例體驗：

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

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

美年達滴滴畫臉

案例體驗：

Nike 科比逆天瞬殺極速測試

案例體驗：

京東金融：躺著也能掙錢

案例體驗：

杜蕾斯的第一座美術館

案例詳情：

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

(編輯：小酷)