国产欧美日韩高清专区手机版_国产AⅤ精品一区二区三区久久_中国少妇内射XXXHD免费_在线观看视频久最新av_亚洲av免费在线观看_我把护士日出水了视频_精品国产凹凸成AV人网站_女人被老外躁得好爽免费视频_国产精品制服丝袜无码

15年
網(wǎng)站建設(shè)經(jīng)驗
佳速互聯(lián)
佳速觀點

當前位置:首頁 >> 常見問題 >> HTML5時代,平面設(shè)計師該從哪些方面進行自我提升?

HTML5時代,平面設(shè)計師該從哪些方面進行自我提升?

編輯:深圳網(wǎng)站建設(shè)   來源:佳速互聯(lián)   瀏覽量:正在讀取   時間:2015-10-28

一、先來說說隔靴搔癢的內(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就要殺人了好么?

HTML5教程 HTML5設(shè)計原理 HTML5設(shè)計

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

HTML5教程 HTML5設(shè)計原理 HTML5設(shè)計

雖說內(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)的標題整成可點擊的標簽(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è)計則盡量保持視覺主體的單純性。

HTML5教程 HTML5設(shè)計原理 HTML5設(shè)計

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

HTML5教程 HTML5設(shè)計原理 HTML5設(shè)計

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

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

色彩也有了比較大的顛覆,我們所看見的大量紅配綠、藍配黃的撞色搭配越來越多,以及熒光色也時不時來湊熱鬧啦,這種在以往設(shè)計領(lǐng)域被視為深井冰的配色搖身一變成了怪咖潮范的經(jīng)典。其次是大面積黑白灰的配合也很常見,優(yōu)雅的黑白照片再度被大量啟用,(黑白大圖壓大字成為一句半調(diào)侃半真理)換了以前把領(lǐng)導(dǎo)照片p成黑白的你試試……可以用那么多犀利的顏色還不用擔心輸出、色差問題也是得益于移動大屏設(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相比平面媒介的從整體感官上不同,舉幾個栗子:

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

HTML5教程 HTML5設(shè)計原理 HTML5設(shè)計

案例體驗:

HTML5教程 HTML5設(shè)計原理 HTML5設(shè)計

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

HTML5教程 HTML5設(shè)計原理 HTML5設(shè)計

案例體驗:

HTML5教程 HTML5設(shè)計原理 HTML5設(shè)計

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

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

美年達滴滴畫臉

HTML5教程 HTML5設(shè)計原理 HTML5設(shè)計

案例體驗:

HTML5教程 HTML5設(shè)計原理 HTML5設(shè)計

Nike 科比逆天瞬殺極速測試

HTML5教程 HTML5設(shè)計原理 HTML5設(shè)計

案例體驗:

HTML5教程 HTML5設(shè)計原理 HTML5設(shè)計

京東金融:躺著也能掙錢

HTML5教程 HTML5設(shè)計原理 HTML5設(shè)計

案例體驗:

HTML5教程 HTML5設(shè)計原理 HTML5設(shè)計

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

HTML5教程 HTML5設(shè)計原理 HTML5設(shè)計

案例詳情:

HTML5教程 HTML5設(shè)計原理 HTML5設(shè)計

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



友情鏈接: 阿里云小店 找商網(wǎng) 阿里云金牌合作伙伴 深圳阿里云服務(wù)器 長沙網(wǎng)站建設(shè) 深圳百度愛采購?fù)茝V 深圳萬網(wǎng)空間 深圳做網(wǎng)站 響應(yīng)式網(wǎng)站建設(shè) 寶安做網(wǎng)站 深圳設(shè)計網(wǎng)站 阿里云ICP備案 寶安網(wǎng)站建設(shè) 南山網(wǎng)站建設(shè) 深圳營銷型網(wǎng)站建設(shè) 深圳品牌網(wǎng)站建設(shè) 深圳微信網(wǎng)站建設(shè) 西鄉(xiāng)網(wǎng)站建設(shè) 外貿(mào)網(wǎng)站建設(shè)
深圳網(wǎng)站建設(shè)
13723486509