您現在的位置是:電腦技術吧?>? 基礎知識 ??>??有哪些表現手法,表現手法??>??正文詳情

有哪些表現手法,表現手法

楚念柏2019-11-30 16:42:11 人圍觀
簡介表現手法和描寫手法亞非:近半年來,我一直負責霹靂戰機和天天庫寶項目,主要集中在品牌建設和創意營銷方面。我嘗試過手繪的形式,這次我會和大家分享我的設計經驗。雷霆鋒T

雅菲:最近半年一直在負責雷霆戰機和天天酷跑的項目,以偏品牌建設和創意營銷為主,在風格上嘗試了手繪的表現形式,這次和大家分享下其中的設計經驗。

  雷霆戰機TVC HTML5 頁面  文藝、走心的手繪風格  項目背景  雷霆戰機周年慶,項目組為雷霆進行了拍攝了一部品牌短片,圍繞整個影片策劃了一個HTML5頁面對其進行傳播。

  視頻主要內容講述幾個小朋友從小心懷對星空的夢想,通過不斷研究學習長大后當上了航天工作者完成了自己一直的夢想,來闡述如今繁華社會里仍有千千萬萬不斷追隨自己的內心的人。

引發大家對天空的夢想的共鳴走情感路線。

  前期構思  本次嘗試了2套方向展現圍繞視頻內容的靜幀截圖直接展示,主打宇宙情懷的手繪風格文藝的展示。

  此前移動端上大多是以單頁大長圖 視頻按鈕進行宣傳的方式,作為首個嘗試試水兩種方向對最終視頻造成的轉化率影響。

  風格推導  風格一  視頻元素提取:  根據其視頻提取關鍵元素:收音機、天文望遠鏡、宇宙飛船、風鈴。

  整體氛圍圍繞四個關鍵詞 科幻、復古、文藝和走心。

  于是最終采用牛皮紙背景來展現復古 手繪主元素使科幻主題更添親和力增添情懷,不同于以往的寫實風。

  為了在手機上更生動的展示,每一個元素搭配小動畫來使手繪的物件更具有生命力(例收音機動畫:打開天線搜頻搜到聲音)。

一段描述性的文案搭配小動畫增加畫面故事的完整性,同時配合空靈的背景聲效,讓用戶在體驗HTML5 頁面的時候,在符合移動端用戶體驗同時讓用戶在視覺、聽覺上感受到情懷產生共鳴。

  數據表現:  周累計PV:103,,662 周累計UV:80,799  最后一屏觸達率:66% 啟動游戲轉化率:23%  豐富的CSS3場景動畫以及走心的文案加上風鈴的音樂,產生用戶的共鳴。

  成效要點:  1. 一共7屏,最后一屏觸達率達66%。

  2. 整個專題從加載到加載完成僅23%的流失  關于項目的思考:  1. TVC的推廣,使用視頻本身元素和再創作元素,對于傳播哪一個更合適?  一開始老板擔心跟視頻本身的結合度不夠,項目組對于手繪風格與游戲內風格差異大有所擔憂,于是首推的是靜幀視頻截圖版本,出于探究精神我們在微信公眾賬號對手繪版本進行傳播。

  (當時老板的擔心,項目組的傾向,設計團隊的堅持,最終加推后的數據反饋)

  從最終的數據可以看到,手繪版本在只有唯一宣傳入口(微信公眾賬號)和視頻靜幀有多方的宣傳渠道的對比下,兩者的數據達到相當,且手繪版本的點擊全文閱讀量遠高于以往文章點擊量,由此可見在創作元素來宣傳視頻并無影響,游戲用戶更多是樂于接受不同風格的嘗試。

  2. 手繪插畫類型的HTML5 頁面,在設計和重構階段應該注意的問題  A.給到重構的psd文件分層將每個元素合理打包能減少重構負擔提高工作效率,將主元素轉化為智能對象和背景分開,若主元素內有單獨需要動畫的部件,再另外區分開來。

  3. HTML5 頁面需要的插畫類型與傳統插畫的區別  A.由于手機屏幕的限制,一屏內出現一個主要元素最為舒適,更容易引導用戶在體驗中看到重點。

畫面排版過滿容易分散用戶注意力失去焦點。

  B.矢量扁平風格的插畫和可復用背景能大大減少文件包大小提升加載速度。

  C.簡單的圖形加上微妙的肌理感能瞬間提升畫面質感。

  雷霆戰機世界觀  神秘、玄幻、讓用戶了解雷霆世界觀  項目背景  劉慈欣為雷霆戰機撰寫世界觀,整個故事闡述了3個關鍵觀點:平行宇宙、時間旅行及黑洞。

  通過移動端為新老用戶傳遞及鞏固雷霆世界觀。

  創意過程  以往的雷霆風格比較偏寫實派,與游戲內風格類似,而這次世界觀中的每一個觀點都各不相同各自背后有著龐大的科學背景支撐,最終我們決定用3期來分別詳細闡述每一個觀點,增強雷霆科幻的專業性塑造品牌感。

視覺上分別用不同的展現風格來對其每一個觀點進行闡述。

  分為3期進行:平行宇宙時間旅行黑洞。

  我們不希望用純文字去解釋這些學術觀點會顯得枯燥乏味且未必能精準傳達,最終我們決定將HTML5 頁面做成一個有故事背景貫穿的輕游戲的方式,在過程中設計了幾個互動點讓用戶能潛移默化從中感受到我們所傳達的平行宇宙的概念,其中講幾個關鍵節點設計了互動設計,幾個圖像。

  我們把HTML5 頁面包裝成一個故事,用第一人稱視角帶領用戶去體驗整個過程,故事中主人翁我代表用戶,打開這個頁面就表示我已被選中,在太空中漂浮了100年,我需要通過選擇正確的宇宙穿越才能找到平行宇宙中的同盟者,將其帶回來完成拯救地球的任務  整個HTML5 頁面的交互體驗:

  風格推導  整個HTML5 頁面視覺與文案的比重為1:1,我們不希望視覺過于繁瑣而重心偏離,所以整體走灰白 重點標彩色的水彩扁平風格,讓畫面與文案重心相當互不干擾。

  互動設計  將故事幾個關鍵節點處設置了操作按鈕與用戶進行互動,用戶完成點擊才能繼續走下去,強調用戶我的主人翁意識加強身臨其境的感受,讓故事更加立體感。

  互動設計1: (醒來)

  互動設計2:(拯救)

  互動設計3:(搜集)

  互動設計4:(激活)

  互動設計5:(選擇平行宇宙)

  選擇平行宇宙  貼合劉慈欣的世界觀里指出的觀點,將平行宇宙設計成了9個宇宙,因為它具有一定的科學性質,所以把整個生物進化論與9個宇宙結合,為了表達出其觀點數字越小,離本宇宙差異越大,所以進行了差異化順序排列,讓用戶能在體驗中通過圖像來理解其奧義。

  1=意識時空  2=單細胞宇宙  3=海洋生物  4=猿人  5=小時候的我  6=人工智能  7=人是養料  8=全機器時期  9=二維空間

  穿越畫面:

  穿越到每個平行宇宙中搭配一段有誘導性的文案來混淆視聽,增加娛樂游戲感:

  故事最終會有兩種結果狀態,未找到盟友地球毀滅或者找到正確的盟友但帶回的是希望還是災難?敬請期待引出下一期(時間旅行)。

  整個HTML5 頁面配合了小動畫和小音效展現,然而故事最后是否尋找到正確答案并不是頁面的重點,我們所期許的,是通過這樣一種試聽體驗,更直觀的傳達平行宇宙這一概念,引發思考增強雷霆品牌感。

  小結:  不是畫出來就好了,HTML5 頁面是視聽的融合,巧妙的動畫可以為頁面加分,適當的音效讓故整個驗能更加生動和立體。

  關于項目的思考:  1. 較大型的互動HTML5項目 前期最重要的工作  A 對于交互的梳理  劉慈欣的文章甚至可以拍出一部戲來,其信息量對于移動端來說巨大,何不幫助用戶消化故事,將劇中的主要觀點提取出來,解構再重組成一個適合移動端的小故事。

  而故事性HTML5 頁面,與以往普通的頁面有所不同,故事性的流暢、段落節點都至關重要,前期的交互草圖就必不可少了,能避免后期的反復返工,進入執行階段就水到渠成。

  B 對于積極性的調動(讓所有參與者富有激情來做)  要完成這樣一篇同時要承載劇情、動畫、音效、內容文案的HTML5 頁面來說,不同于以往跟重構協作,這次動畫量過大需要與動畫的小伙伴深入的磨合,多當面溝通能迅速解決當下問題,為了讓體驗銜接更加細致,組長和項目組的多次溝通為小伙伴爭取到更多的制作時間,動畫同學加班加點的制作讓畫面更加精益求精。

  C 對于機會的把握(主動發起項目)  在這個有劉慈欣大背景宣傳的重要時期,從設計組出發考慮到若能與當下事件結合,緊跟熱度加力宣傳能比平常時期帶來更大的效益,且雷霆的用戶多為科幻迷,對此話題會比較感興趣,于是從設計組主動發起項目為雷霆戰機達到借勢營銷。

  項目中經驗總結  選擇貼合主題的插畫風格  雷霆的科幻和神秘感適合使用高冷b格的插畫風格,做高冷時應避免使用飽和度過高的顏色,盡可能使用少的顏色,使用同色系的顏色,暗色系更能烘托氛圍,故事性的插畫背景可能需要更加豐富,而過于豐富的圖形在手機上體驗會失去焦點,這個情況下把整體壓暗,主角提亮來凸顯,使用統一的顏色會使故事連帶性更強。

  文案的呈現:  文案盡量簡明扼要,當必須有大篇幅文案出現時一行一句,分段出現。

  科幻小叔的口吻來講故事,引人深思但是口吻是很樸實的敘述,與其他的HTML5 頁面拉開差距,讓用戶感受到游戲里面的靈魂和世界。

  酷跑歐萊雅HTML5 頁面  詼諧、搞笑、提取關鍵字 放大關鍵字  項目背景  酷跑項目與歐萊雅合作,而此次HTML5 頁面中需將酷跑新角色和歐萊雅的水洋系列進行宣傳。

  創意過程  酷跑與歐萊雅本身一個是游戲,一個是化妝品,兩者具有較大差異,怎么樣才能同時體現兩者?  關鍵詞聯想:  酷跑新角色水力井寶  歐萊雅水洋代言人井柏然  兩者唯一的共通點井柏然。

而此處的難點在于并沒有井柏然的肖像使用權,因此最終用手繪的風格巧妙避開這一點。

整個HTML5 頁面決定用漫畫井寶作為主要人物來貫穿。

  而我們不希望將酷跑新角色直接平乏的展示,希望它的出現能更加有趣和好玩才能更容易被記住。

  最終得到關鍵詞浪。

  如今線上HTML5 頁面有這樣兩大路線:好玩逗趣風格和溫情路線,而前者剛好和浪契合。

詼諧幽默的方式迎合當下惡搞趨勢引發分享,將井寶作為主線人,一步一步揭開變浪的秘籍。

  如何才能變浪子?這一話題相信能引起很多好奇的注目。

它應該是輕松的,愉快的,手繪風格能做出很好的表達。

  營銷點結合  如何才能體現歐萊雅的補水又不容易產生太過于廣告的反感情緒? 補水即是在護膚、洗臉的過程中,把題目之一洗臉的故事做為載體,分為正常人洗臉vs浪子洗臉,將歐萊雅補水系列軟性的融入到體驗的過程之中減少突兀廣告感。

  如何趣味的呈現新角色?

  整個HTML5 頁面的體驗流程每一題點擊 變浪按鈕即可到達下一頁,將新角色介紹結合到最后一題。

如何酷跑也能浪?從一個跑步的井寶變成沖浪的井寶,結合移動端用戶體驗搖一搖操作完成從手繪風格到游戲內卡通寫實風格的切換盡可能減少風格突變的突兀感,同時讓用戶在頁面內第一時間了解到游戲內的新角色真實呈現效果。

  小結:  當本身的點比較正常,發散思維把普通的點放大、走劍走偏鋒會得到另一種創意思路。

  上面所闡述的項目均屬于手繪風格,手繪能較好的表達出美好情懷,是如今傳達情感的慣用手法之一,而沒有一種風格是萬能藥,需要挖掘更多的表現形式和多元風格才能滿足觀眾們的胃口。

注:更多精彩教程請關注電腦高手網電腦高手網教程 頻道

版權聲明:本文由 楚念柏 整理編輯。

原標題:表現手法有哪六種,對比是表現手法嗎

轉載注明出處:http://www.dn9ww09s.icu/basics/14955.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 刷屏,怎樣刷屏

    刷屏,怎樣刷屏 相關圖片朋友圈刷屏一、三情(親情、愛情、友情)壽草先生的情書掃描二維碼查看詳情!在這部H5中,壽操并沒有選擇呈現太多的互動技巧,而是用大段的文案和黑白影像悄悄地告訴你一個男人...

  • 排行榜,TOP

    排行榜,TOP 相關圖片國內汽車品牌排行榜目前市場上有大量的HTML 5頁面模板制作工具,但對于很多非專業的設計師來說,制作html5頁面是非常方便的。但我不得不承認,大部分作品在模板工具平臺上依然停留...

  • 廣告H5,沒有廣告的h5

    廣告H5,沒有廣告的h5 相關圖片h5創意廣告你是否突然對市場上的H5麻木了,情況一樣,內容缺乏新意?你想做,但做不好。你不知道如何判斷工作的質量?我們在這個只有一年多的行業里遇到了什么困難?我們怎么對...

  • 決戰江湖各門派玩法,神武3門派玩法

    決戰江湖各門派玩法,神武3門派玩法 相關圖片神武3門派技能詳解作為近一年來最受歡迎的炸雞品種,H5經過一年的摸爬滾打(SE)體驗,不僅沒有氣喘吁吁,而且有許多新動作,在空中打出了新的高度。頂君一路追蹤,帶出兩個最酷...

  • 短暫的分開是為了更長久的,短暫的快樂長久的悲傷

    短暫的分開是為了更長久的,短暫的快樂長久的悲傷 相關圖片美好的時間總是短暫的中秋節快到了。你是高興回家過節,還是被迫在公司加班?作為廣告商,中秋節不僅是我們眼中的月餅,更是數不清的短暫卻不慌張!我聽說看了這組案子后,你...

  • 廣告H5,沒有廣告的h5

    廣告H5,沒有廣告的h5 相關圖片h5創意廣告以前,我做過很多關于H5的分享,但是它的定義和深度都很廣。從這個系列開始,我想從H5的定義開始,總結一下我所知道的關于H5的所有內容和設計方法!這是一件有意義的...

  • 標簽style,標簽內的style

    標簽style,標簽內的style 相關圖片style屬性值HTML樣式標記樣式標記—在文檔中聲明樣式時,標記樣式標記成對使用,以結束包含內容的屬性media--media type,type--type,通常使用typstyle...

  • 存儲原理,存儲雙活詳解原理

    存儲原理,存儲雙活詳解原理 相關圖片3par存儲雙活解決方案說到web開發中的本地存儲,首先要考慮的是cookies。當然,第一批餅干都是已知的。主要的問題是它們太小了,大約4KB。而且,IE6每個域名只支持20個coo存儲框架...

  • 寧愿做一個讓人聞風喪膽,寧做讓人聞風喪膽的壞人

    寧愿做一個讓人聞風喪膽,寧做讓人聞風喪膽的壞人 相關圖片讓人聞風喪膽的今天,騰訊的學生何柳柳分享了一份精彩的H5總結筆記。他梳理了設計的動態效果、具體的實現方法以及他踩到的一些漏洞。他是一個高能干產品。他強烈建議學習!前言...

  • H5 案例,H5經典案例

    H5 案例,H5經典案例 相關圖片h5活動案例秘密花園有多受歡迎?據說它已經被翻譯成22種語言,在世界范圍內銷售了200多萬冊。它可以繞著地球轉。它在中國的受歡迎程度如何?看看這個品牌的潛在營銷~案例1:與h...

熱評文章

  • 被拋棄了,被拋棄的我

    被拋棄了,被拋棄的我 相關圖片被拋棄的痛苦不斷尋找新的替代技術,H5即將被拋棄?昨天,社交達人分享了一段“當H5警報響起時,我該怎么辦?”這似乎是H5危機的警報。W公司創始人李3水先生表示,W不會正式做感...

  • div和section,section和div區別

    div和section,section和div區別 相關圖片用section導入表格當我第一次接觸HTML5時,我對它的標簽不太適應,甚至一度有點反感。尤其是對于div、section和article的標簽,它們應該在哪里使用還不清楚。divHdiv居中...

  • storage,Localstorage

    storage,Localstorage 相關圖片讀取localstorage本文主要介紹在HTML5中使用本地存儲的教程。本地存儲用于瀏覽器和系統之間交互的本地傳出。您可以參考幾天前的本地存儲,發現在舊項目中操作cookie很奇怪。咨詢local...

  • h5有什么用,h5怎么用

    h5有什么用,h5怎么用 相關圖片h5是用來做什么的最近發現好多人喜歡將 HTML5 說成 h5,甚至是代指移動端的 Web Page 或者 WebApp。雖然說起來朗朗上口,但是小編真的不建議這樣來使用。  小h5用什么框架好...

  • 水晶櫻桃,水晶櫻桃簡介

    水晶櫻桃,水晶櫻桃簡介 相關圖片水晶櫻桃和黃蜜櫻桃很多朋友都討論過如何用煙花制作水晶櫻桃。本文教程將以圖片的形式解釋水晶櫻桃的制作,這將更清楚地傳達給每個學習者。以下是煙花制作水晶櫻桃的具體操作...

  • 最近新出平臺項目,新出投資項目大全

    最近新出平臺項目,新出投資項目大全 相關圖片項目拼出新速度12年前,無論布局多么復雜,擺在我們神奇的餐桌前都不是問題。十年前,Agie的網站重建為我們開啟了新的篇章。八年前,我們研究了雅虎網站,對它在IE5下的完美表現...

  • 文字環繞,文字環繞方式在哪

    文字環繞,文字環繞方式在哪 相關圖片如何設置文字環繞圖片有時我們可能需要做一些循環文字包裝。事實上,這種文本實際上是一種文本包裝路徑效果,但僅僅使用attach to path函數是無法實現的。仔細看一下:路徑周圍文四...

  • 組合路徑,路徑組合的步驟

    組合路徑,路徑組合的步驟 相關圖片怎么合并路徑焰火的一個特點是直接繪制矢量路徑。除了使用矢量工具(筆、矩形等幾何圖形)直接繪制矢量路徑外,還可以適當地使用組合路徑函數,使路徑的操作更加高效、省力。...

  • 生活中還有哪些是指南針,生活中什么可以做指南針

    生活中還有哪些是指南針,生活中什么可以做指南針 相關圖片指南針在生活中的應用有哪些本文介紹了在焰火中如何畫指南針。主要包括五個部分。首先用橢圓工具設置畫布大小,然后填充顏色,最后繪制圖案。下面是如何在焰火中繪制指南針:...

  • 創建紋理是什么意思,怎么做紋理

    創建紋理是什么意思,怎么做紋理 相關圖片從文件創建立方體紋理我們將在焰火中創建一個新文件,鍵入它,并選擇一個更大的字體大小以使其更有效。因為文本是白色的,所以我們將背景顏色設置為黃色以進行區分。文本也可...

關注微信

变脸官网查询