您現在的位置是:電腦技術吧?>? 編程技術 ??>??如何能過目不忘,過目不忘??>??正文詳情

如何能過目不忘,過目不忘

言景中2019-11-19 10:41:48 人圍觀
簡介有沒有人可以過目不忘從點燃朋友圈的H5游戲《圍著緊張的貓》到公眾對H5專頁“我們之間只有一個字”的評論,顛覆了傳統廣告,從2014年下半年開始,各種H5游戲和專頁層出不窮,這是

從引爆朋友圈的H5小游戲圍住神經貓,到顛覆傳統廣告的大眾點評H5專題頁我們之間只有一個字,從2014下半年起,各種H5游戲和專題頁紛紛嶄露頭角。

  H5,這個由HTML5簡化而來的詞匯,借由微信這個移動社交平臺,正在走進更多人的視野。

本文聚焦于基于微信傳播的H5頁面的視覺設計,通過一些案例分析來談談設計思路與方法,希望與大家進行交流探討。

  功能與目標  首先從功能與設計目標來看, H5專題頁主要有以下4大類型:  1.活動運營型  為活動推廣運營而打造的H5頁面是最常見的類型,形式多變,包括游戲、邀請函、賀卡、測試題等形式。

與以往簡單的靜態廣告圖片傳播不同,如今的H5活動運營頁需要有更強的互動、更高質量、更具話題性的設計來促成用戶分享傳播。

從進入微信H5頁面到最后落地到品牌App內部,如何設計一套合適的引流路線也頗為重要。

  大眾點評為電影狂怒設計的推廣頁便深諳此道。

復古擬物風格的視覺設計讓人眼前一亮,富有質感的舊票根、忽閃的霓虹燈,配以幽默的動畫與音效,恨不得每個選項都點一遍。

圍繞選擇這個品牌關鍵詞,用引人入勝的測試題讓用戶把人生當作大片來選擇,選到最后一題引出大眾點評選座看電影,一鍵直達App購票頁面。

即使明知是軟文也忍不住帶著矮油不錯,這個頁面有點diao噢的心情點擊了分享。

  2.品牌宣傳型  不同于講究時效性的活動運營頁,品牌宣傳型H5頁面等同于一個品牌的微官網,更傾向于品牌形象塑造,向用戶傳達品牌的精神態度。

在設計上需要運用符合品牌氣質的視覺語言,讓用戶對品牌留下深刻印象。

  伴隨著浪漫的鋼琴旋律,首草先生的情書以一位男士的口吻娓娓道來在成長歷程中對妻子的愛與愧疚,最后引出首草滋陰圣品,愛妻首選的宣傳語。

設計上采用回憶般的黑白色調,簡單的照片加文字,配以花瓣掉落、水面漣漪等輕動畫,渲染出唯美優雅的氣氛。

首草這個全新的高端養生草藥品牌,用H5打出了一副走心的情感牌,讓用戶記住了半生只為你的愛妻品牌形象。

  3.產品介紹型  聚焦于產品功能介紹,運用H5的互動技術優勢盡情展示產品特性,吸引用戶買買買。

  這一類型的H5頁面多見于汽車品牌,LEXUS NX是其中的優秀代表案例。

精致和極富質感的建模、細膩的光效營造出酷炫的視覺風格。

用手指跟隨光的軌跡切割畫面揭開序幕,通過合理優雅的觸碰、摩擦、滑動等互動形式帶領用戶一同探索產品的7大特性,宏觀和微觀都照顧周全。

  4.總結報告型  自從支付寶的十年賬單引發熱議后,各大企業的年終總結現也熱衷于用H5技術實現,優秀的互動體驗令原本乏味的總結報告有趣生動了起來。

  京東的十大任性用10張橫屏頁面講述了京東在2014年的十大成就,視覺設計上采用簡潔的扁平風插畫,加入紙面質感形成復古卡片拼貼感。

不同頁面間通過手指滑動實現流暢的視差滾動效果,最后還有劉總這個小彩蛋。

一口氣看完后大概就了解2014年京東都干了哪些大事。

  二.形式為功能服務  在確定了專題頁的功能目標之后,接下來就是關鍵的設計階段了。

如何有的放矢地進行設計,需要考慮到具體的應用場景和傳播對象,從用戶角度出發去思考什么樣的頁面是用戶最想看的最會去分享的。

以下列舉幾種常見的H5專題頁表現形式:  1.簡單圖文  簡單圖文是早期最典型的H5專題頁形式。

圖的形式千變萬化,可以是照片、插畫、GIF等。

通過翻頁等簡單的交互操作,起到類似幻燈片的傳播效果。

考驗的是高質量的內容本身和講故事的能力。

  滴滴打車這個案例就是典型的簡單圖文型H5專題頁,用幾張照片故事串起了整套頁面。

視覺簡潔有力,采用整屏黑白照片,點綴以滴滴的品牌橙色。

每切換一張圖片,文字就漸隱浮現,沒有其他互動形式,讓觀眾聚焦于內容,通過陌生人之間的真情聯系來塑造品牌的正能量形象。

  也有不甘平淡的精彩案例。

在除夕夜全國人民瘋狂搶紅包的時刻,微信推出了從此看盡中國人的名與利這樣一個專題頁。

第一眼就被鎮住了,好親切的RMB~每個頁面都是一張人民幣風景局部放大圖,創作者加入巧妙的創意元素與微動態進行細膩刻畫,帶觀眾走進了人民幣的微觀世界。

每一張鈔票圖案配合發人深省的文案,在推廣微信紅包的同時呼吁人們重新審視人情與名利的奧義。

  2.禮物/賀卡/邀請函  每個人都喜歡收到禮物的感覺,抓住這一心理,品牌推出了各種H5形式的禮物、賀卡、邀請函,通過提升用戶好感度來潛移默化地達到品牌宣傳的目的。

既然是禮物,那創意和制作便是重要的加分項。

  AKQA創意營銷公司在圣誕之際獻上了一份厚禮夢幻水晶球。

通過移動手機,鏡頭從水晶球外不斷搖晃推近,漸漸走進水晶球的微觀世界里。

通過手機環顧四周,可以360度欣賞水晶球里的全景,搖一搖雪花便漫天飄灑。

寫下你的祝福并分享給朋友,相信一定會驚艷到對方。

這個H5頁面使用了重力感應、3D等技術,文字與BGM的使用也十分講究,給用戶帶來了完美的互動體驗,值得細細品味。

  Evernote在過年期間也別出心裁地推出語音賀卡,通過公眾號引導用戶對其發送一條語音消息,然后把這條祝福語音結合中國風動畫做成一張獨一無二的語音賀卡發送給朋友。

整體色調也是以Evernote品牌色為主,同時蘊含著一絲優雅的年味,十分討巧。

  3.問答/評分/測試  問答形式的H5頁面也屢見不鮮了,利用用戶的求知欲和探索欲,一路選選選,看最后到底是什么成績。

一條清晰的線索是必要的,最后到達的結果頁也需要合理不突兀,如果能輔以出彩的視覺和文案,弱化答題的枯燥感那就再好不過了。

  與本文開頭一樣也是大眾點評的項目,這次是為姜文的電影一步之遙做持續推廣,讓用戶為姜文的代表作評分。

視覺設計依舊出彩,開腦洞的創意和動畫設計令人叫絕(一定要掃一掃體驗下!)。

延續了懷舊大字報風格,字體、文案、裝飾元素等細節處理也十分用心。

問答形式的H5頁面能做到這個份上也是蠻拼的。

  4.游戲  從 圍住神經貓、看你有多色等單純小游戲再到杜蕾斯一夜N次郎(即山寨版別踩白塊兒)等品牌植入式小游戲,H5游戲因為操作簡單、競技性強,一度風靡朋友圈,但創意缺乏和同質化現象導致用戶對無腦小游戲逐漸產生了厭倦。

品牌要在游戲上做到成功傳播,需要在玩法和設計上多下點功夫。

  Same在圣誕節推出了一款名為圣誕老人拯救計劃的H5小游戲,操作非常簡單,只需用手指交替上滑,把角色的脖子向上拉到無限長,游戲會記錄你拉的最高距離,跟朋友比一比誰比較長。

界面清新可愛,與Same的招牌畫風一致,游戲角色也是Same的品牌角色,通過幽默惡搞的游戲向用戶傳達Same獨到有趣的產品文化。

  三.為設計加分的4個要點  一個H5頁面設計品質的出眾與否,會直接影響其傳播效果,甚至影響到用戶對品牌形象的認知。

在這里總結出以下的設計要點:  1.細節與統一  要成就高品質的用戶體驗,必須考慮到細節與整體的統一性。

復古擬物的視覺風格,那字體就不能過于現代;幽默調侃的調調,那文案措辭就不能過于嚴肅;打情感內容牌的,動效就不能過于花哨。

  大眾點評姜文電影推廣系列的九步之遙H5專題頁便牢牢抓住了這一點。

從二維碼入口到性感的loading頁,再到最后分享提示的設計,包括文案措辭和背景音效,無不與整體的戲虐風保持一致,給到用戶一個完整統一的互動體驗。

  尤其關注分享提示這個細節設計,比起一個簡單的箭頭和一句冷冰冰的點這里分享,用心的細節設計帶來的高品質和好感度是顯而易見的。

再貼幾個精彩案例:

  2.緊跟熱點,利用話題效應  想要你的H5專題頁一夜爆紅,第一時間抓住熱點并火速上線,借機進行品牌宣傳也不失為一條捷徑。

  天天P圖抓住武則天熱播的契機推出了風靡海內外的媚娘妝,同時全民COS武媚娘的H5互動頁也第一時間上線,操作簡單易上手,一鍵上傳照片就能立刻完成媚娘妝,與萬千媚娘們進行PK,娛樂了大眾又推廣了產品。

  網易娛樂在武媚娘剪胸風波的風口浪尖上推出了名為神還原武媚娘被剪胸真相的H5專題頁,放下節操用極富想象力的粗曠草圖風向廣大觀眾還原了真相。

一時間被瘋狂轉發,網易娛樂也算是順勢自我宣傳了一把。

  3.講個好故事,引發情感共鳴  不論H5的形式如何多變,有價值的內容始終是第一位的。

在有限的篇幅里,學會講故事,引發用戶的情感共鳴,將對內容的傳播形成極大的推動。

  LEVIS新年優惠活動專題頁以第一人稱的口吻,用小時候簡樸卻熱鬧的新年與長大后富足卻乏味的新年做對比,用手繪風渲染出親切的懷舊氛圍。

最后引出這個新年,把壓力和束縛打包扔掉,用新鮮的眼光感受生活,一起活出趣的品牌推廣slogan,代入感極強的故事無疑是驅動分享的源動力。

  4.合理運用技術,打造流暢的互動體驗  隨著技術的發展,如今的HTML5擁有眾多出彩的特性,讓我們能輕松實現繪圖、擦除、搖一搖、重力感應、擦除、3D視圖等互動效果。

(有興趣的話可以點擊這個網站http://fff.cmiscm.com/幾乎有所有H5動態效果的展示)。

相較于塞入各種不同種類的動效導致頁面混亂臃腫,我們更提倡的是合理運用技術,用心專注于為用戶提供流暢的互動體驗。

  典型的案例是淘寶在雙12推出的預售推廣H5專題頁。

在瀏覽過程中我只使用了一種向上滑動的手勢,而頁面呈現出來的效果卻猶如一個流暢的動態GIF。

設計師巧妙利用圖形設計與組合,在滑動過程中營造出一種豐富的視差滾動效果,單個圖形元素的遮罩、旋轉與整體頁面的動勢配合極為默契。

  結語  隨著手機硬件的升級、HTML5技術的發展以及微信平臺的開放,HTML5的跨平臺、低成本、快迭代等優勢被進一步凸顯,這對身處于移動互聯網大潮的企業主、品牌、設計師和開發者來說,都將是一個最好的時代。

未來必將涌現更多優秀的H5頁面,讓我們拭目以待。

版權聲明:本文由 言景中 整理編輯。

原標題:為什么有人過目不忘,怎樣達到過目不忘

轉載注明出處:http://www.dn9ww09s.icu/program/13601.html

文章評論

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

    用戶名:

    驗證碼:

作者推薦

  • 創建貼吧的條件,貼吧創建需要什么條件

    創建貼吧的條件,貼吧創建需要什么條件 相關圖片自己創建貼吧有什么用百度貼吧發展如火如荼,取代了眾多論壇,成為最大的志同道合者聚集地之一。很多人還想創建一個貼吧,與志同道合的朋友分享和交流。如何創建帖子?創建帖...

  • html中,html中p

    html中,html中p 相關圖片html模板下載在HTML中,有兩個文件a.htm和b.htm。在同一目錄下,a.htm的內容如下:!--include file=b.htm--b.htm今天的內容如下:雨3html中居中...

  • 網絡打不開網頁是怎么回事,有網絡打不開網頁咋回事啊

    網絡打不開網頁是怎么回事,有網絡打不開網頁咋回事啊 相關圖片網絡打不開怎么回事經常訪問貼吧的用戶有時會遇到百度貼吧無法打開的情況,但在打開其他網頁進行測試時,網絡是正常的。這是什么原因?怎么解決?一。DNS錯誤,修改或修復DNS,...

  • 鼠標怎么放大,沒有鼠標怎么放大頁面

    鼠標怎么放大,沒有鼠標怎么放大頁面 相關圖片鼠標經過圖片放大打開DW,首先修改頁面屬性,將頁面更改為灰色,適合圖片顯示,打開布局屬性,我們添加一個apdiv來保存圖片,將apdiv的寬度和高度分別設置為800和299,并鼠標dpi是什...

  • 摩拜電單車押金,摩拜電動車使用方法

    摩拜電單車押金,摩拜電動車使用方法 相關圖片摩拜助力車幾元一小時近日,摩比繼共享單車之后,又推出了共享電動車服務。你知道摩拜電動車的押金是多少嗎?摩拜電動車的費用是多少?接下來,超人軟件將為大家帶來摩拜電動...

  • 金立s10好不好用啊,金立s10為什么那么便宜

    金立s10好不好用啊,金立s10為什么那么便宜 相關圖片榮耀10青春版問題多金立S10是金立推出的最新智能手機,其最大的宣傳點是全球首款四攝像頭手機。錦里S10怎么樣?哪個更好,錦里S10還是oppo R11?讓我們用超人軟件來了解它金立s10拍照...

  • 鉛筆,怎么畫鉛筆

    鉛筆,怎么畫鉛筆 相關圖片既簡單又漂亮的素描畫焰火制作超級漂亮的鉛筆效果:本教程最初是一個在線PS教程。我試著用FW來達到這個效果。操作步驟如下:事實上,FW在某些方面并不比PS差。之后,我會轉載或發...

  • 搶糧票,搶糧票什么意思

    搶糧票,搶糧票什么意思 相關圖片淘寶上的糧票怎么用近日,淘寶網正式在全國范圍內開展食品搶票活動。只要你拿到食品券,你可以在點外賣時扣除。那么,如何玩弄淘寶在全國范圍內的食品搶票呢現在,超人軟件將...

  • 菜單圖標放大,響應式放大菜單

    菜單圖標放大,響應式放大菜單 相關圖片屏幕菜單如何放大這個例子的想法是使用mask函數來制作highlight按鈕。添加代碼以控制菜單的切換效果第1部分使突出顯示按鈕(1)創建新的600300像素空白文檔,幀速率為本菜單加大字體...

  • feedback可以刪除嗎,feedback刪除不了

    feedback可以刪除嗎,feedback刪除不了 相關圖片ios如何刪除feedback一些iPhone用戶在手機上發現了一個名為feedback的軟件。很多人認為它是有毒的,所以他們問如何刪除它。那么,反饋是流氓軟件嗎?如果不是,反饋是什么樣的軟怎么移...

熱評文章

  • 和彩云擴容,和彩云怎么擴容

    和彩云擴容,和彩云怎么擴容 相關圖片的彩云隨著免費網絡硬盤的不斷消亡,除了百度云硬盤,我們還有其他選擇嗎?于是在眾多網友的集體努力下,又挖出了彩云。小編以前從來沒聽說過這個網盤,其實也不小。它是一個...

  • 網易云音樂取消黑膠自動續費,網易云音樂如何開通自動續費

    網易云音樂取消黑膠自動續費,網易云音樂如何開通自動續費 相關圖片網易云音樂人工客服電話網易云音樂以其符合用戶喜好的超級音樂推薦服務深受很多人的喜愛。相信有很多人想知道如何取消網易云音樂的自動續費?如何注銷網易云音樂賬號?現在,...

  • html img src,html5中的imgsrc

    html img src,html5中的imgsrc 相關圖片html src路徑已發現許多網絡資源存在此問題。這里有幾種方法。在實驗中,代碼如下:IMG id=imginit ALT=seaside style SRC=javascriptcss3取imgsrc...

  • 高德車機離線地圖怎樣刪除,怎樣卸載高德地圖數據

    高德車機離線地圖怎樣刪除,怎樣卸載高德地圖數據 相關圖片新版高德地圖離線地圖高德地圖之所以成為流行的地圖導航軟件,是因為它的離線地圖功能可以幫助用戶在沒有任何信號的情況下順利使用。如何刪除離線地圖?如何使用離線地圖?下...

  • 什么是網站風格,網站的設計風格

    什么是網站風格,網站的設計風格 相關圖片有哪些網站在網頁設計或應用程序界面設計中,為了更好地規范設計文檔,設計人員通常會花時間組織各種界面元素,如字體大小、段落間距、按鈕顏色、大小等,而制作風格向導則會...

  • steam創意工坊錯誤代碼103,steam加好友錯誤代碼103

    steam創意工坊錯誤代碼103,steam加好友錯誤代碼103 相關圖片steam市場顯示錯誤代碼Steam是一個非常受歡迎的游戲平臺。最近,很多玩家和朋友反映,他們遇到的最常見的問題是101和103代碼錯誤。如何解決蒸汽錯誤代碼103的問題?如何解決ste絕地求...

  • 讀取圖像數據,如何快速讀取圖像數據

    讀取圖像數據,如何快速讀取圖像數據 相關圖片如何讀取圖片數據用VC進行數據庫編程時,經常需要對數據庫中的圖像數據進行處理,從數據庫中讀取和顯示圖像。圖像數據與文本字段不同。它作為OLE字段存儲在數據庫中,通過自動交...

  • 錘子pro2什么時候出的,堅果pro發售價

    錘子pro2什么時候出的,堅果pro發售價 相關圖片堅果pro2內存不夠用怎么辦Nut pro2是hammer technology推出的最新智能手機。對于許多錘子粉,堅果pro2什么時候上市?什么是nut pro2的無障礙模式?現在,超人堅果pro什么時候上市...

  • 微信為什么沒有搖一搖功能,微信搖一搖功能

    微信為什么沒有搖一搖功能,微信搖一搖功能 相關圖片怎么關閉微信搖一搖功能HTML5的一個重要特性是設備定向,它將方向傳感器和運動傳感器封裝在底層,并提供DOM事件支持。此功能包括兩種類型的事件:1。設備定向:封裝有沒有搖一搖...

  • 貼吧小尾巴怎么設置不了,貼吧小尾巴怎么添加

    貼吧小尾巴怎么設置不了,貼吧小尾巴怎么添加 相關圖片貼吧會員的小尾巴怎么設置經常逛棒棒的小伙伴,發現一些用戶跟帖中的棒棒小尾巴,干脆從人群中脫穎而出,有木有。那么你知道怎么設置小尾桿嗎?很多人不知道如何設置小尾巴的...

關注微信

变脸官网查询