您現在的位置是:電腦技術吧?>? 編程技術 ??>??群內發紅包怎么預熱,怎么發紅包??>??正文詳情

群內發紅包怎么預熱,怎么發紅包

宰父和悌2019-11-16 06:20:37 人圍觀
簡介發紅包說說如何設計一個擁有9700萬紫外線的HTML5頁面?這個實用的案例讓你充分感受到騰訊設計師的劣勢!作為一個在元旦和除夕夜用2億現金紅包為HTML5預熱的設計師,今紅包雨的紅包

一個UV高達9700萬的HTML 5頁面是怎么設計出來的?這篇實戰案例讓你全方位感受騰訊設計師的流弊!作為元旦和除夕2億現金紅包預熱HTML 5的設計師,今天里奧同學把設計過程中的思考和經驗都總結分享出來,來學習!  開始之際  首先祝大家新年快樂~新年新氣象,天天猴賽雷!今年除夕,QQ紅包2億現金大家估計都收獲不少吧(反正我是刷出了不少,哦呵呵呵呵!),而在大家歡樂刷一刷的背后,我們也是進行了不少的工作。

除了全民刷一刷的重要功能體驗,元旦和除夕我們都做了預熱推廣的H5,告知用戶這個活動的相關信息和內容并讓用戶對這個活動感興趣。

預熱推廣將會影響到用戶參與到刷一刷活動的人數和參與體驗,因此要打造一個體驗不錯的預熱H5,需要策劃、技術、設計的緊密配合,那么設計在其中做了什么工作呢,這個故事讓我娓娓道來  寶寶心里有點苦  那個元旦刷一刷紅包預熱H5,你來做下唄?哦好噠~ 當我接下這個運營活動的時候,根據以往做運營的經驗,預計這個需求不會太難弄。

很快的,運營策劃童鞋過來和我講解并溝通需求,溝通一開始挺愉快,然后他們和我說這次希望做個告知用戶刷紅包時間的預熱H5活動,并給出以下的一些需求和一些風險點:  這個H5需要教育用戶刷一刷的操作方式,需要告訴用戶明確的搶紅包時間、誰來發紅包,需要有明確的時間線。

  除了最后一頁,只能有下拉這一種交互動作(點擊啊,左劃右劃都不出現)。

  畫面需要精美(常規都是這么要求的吧)。

  整個時間線部分最好3屏之內顯示完,其中有一屏希望是完整時間線。

  希望有刺激用戶分享的內容。

  關于活動涉及到的具體明星、企業和總明星、企業數量都很難最終確定,可能會有多次調整。

  時間點不到臨近上線也都有變動和調整的可能。

    臥槽?一聽完,我當時整個人就懵逼了。

這個需求看來是個不小的挑戰啊.

  靈光一閃  懵逼沒卵用,實干解決才是硬道理。

焦頭爛額之際,我腦中靈光一閃!要滿足上面所提到的各種條件,那么,只要這樣就可以啦!所以出了下面這個東東:

  這樣簡單又好實現,操作明確,時間線完整,中間要修改的話也十分好調整,上面需求似乎都能夠滿足得到,哈哈哈哈哈哈哈這樣簡單而又完整的一個方案,當然是~

  首先,作為一個有追求的設計師腫么可以就這樣隨便呢?再者,這次的需求是一個推廣性質的運營活動,它需要達到吸引用戶參與并推廣出去的宣傳目的,所以我個人認為在設計的層面它應該具有以下幾點:  需要傳達的信息明確  它應該和所需推廣的功能相關  主題基調貫穿活動(或者熱點或者話題)  視覺風格和感受上具有氛圍感,有一定視覺沖擊力  整個活動有亮點,具有一些有趣的創意和細節  通過這幾點來看,那么上面這個所謂的方案其實是完全不符合的。

要滿足運營的需求,也要在設計上達到要求,所以還是腳踏實地認真思考吧~  正式開工  主題關鍵詞  首先還是要確定下整個活動的基調,這次運營是關于手Q在元旦進行預熱的功能刷一刷紅包的活動推廣,因此,這個H5的主題關鍵詞應該從元旦下手去發散,但元旦自民國后不再是我國傳統節日,參考點不多,所以通過大家討論,結合需求,得出關鍵詞:歡樂。

  后面我們通過主題關鍵詞進行了腦暴,我聯想到以前曾和朋友在一塊玩著大富翁游戲十分快樂的場景,而且大富翁游戲也可以和紅包還有錢產生關聯,所以我們把大富翁作為關鍵詞所具像化后的載體,并提取元素運用在設計中。

至于那個大富翁游戲嘛,大致長下面這個樣子:

  ▲ 截圖來源于大富翁7游戲  功能與活動的關聯性  確定活動基調和載體元素,下一步我們要考慮如何讓這次的H5預熱與刷一刷紅包這個功能產生關聯,除了要出現紅包元素,刷一刷的動作也是需要提前教育用戶的,所以策劃讓H5只有一種下拉的交互操作,通過反復的下拉(這就成了刷),讓用戶潛移默化。

在動作上,我們以一些生活上的常識習慣為依據,把下拉當成啟動下一步的方式,給用戶即時性反饋(如拉開簾幕、撥動云霧、開燈等等),讓用戶在這個H5中感受自然而不突兀。

最后,通過H5尾后的視頻直觀告知用戶怎么參與到刷一刷的活動中,把功能與活動聯系上。

  結合上面所說的,我們對分享、調整的問題、細節也進行了探討并制定出了方案,這些點我們后面會提到,先讓大家看看整個方案先吧!如下:

  呃,由于草圖太草不太好理解,所以還是直接看視覺稿說吧:

  靈活調整  這個H5里面最關鍵的就是時間線部分,通過上面2點,我們想到用地圖為載體,把活動具體的明星和企業信息以及時間點按照一個明確的順序傳達給用戶,這樣不僅直觀而且有趣。

但由于時間點和明星、企業信息在上線之前都會有策略調整、招商問題等因素的影響,這會大大增加設計返工的風險,而且運營的設計里往往牽一發動全身,改一個地方會涉及到好幾個地方(有的時候會波及整個頁面乃至整個流程),為此我利用這個地圖想了一種可以靈活調整的設計來應對這次運營中會出現的風險,我把它戲稱為積木拼裝,設計過程如下:

  老規矩,先出草圖(草圖和最終方案會有出入的哈)~~

  然后具體繪制,首先是這基礎地圖,布局好基本的模塊,便于后面添加或減少。

  接著就是元素的組件化。

這是這個方案的核心,通過把元素組建后,就能夠把它們如同積木一樣按照上面提到的模塊拼裝到地圖上。

  上面就是基本組件組裝后的效果了,中間留出了放置企業和明星的主要路線。

  放置明星和企業以后,為了突出主要路線并結合元旦跨年晚上的感覺,因此把主要路線以外的區域都壓暗下來,營造氛圍感并使得用戶更集中到路線(時間線)上,那些對應的時間點,也都做成組件,突出之余并方便替換。

通過積木拼裝的方法,這樣哪怕有調整,都能夠通過組件的添加和刪減或者位置的變換來完成,大大減少因為招商以及決策因素頻繁返工所帶來的工作量。

當然,前期繪制組件和地圖也是個不小的工作量但,畢竟自己提的,而且設計師總要有追求嘛

  分享  為了讓更多的用戶看到并了解這個h5,除了通過各個渠道去進行曝光之余,另一方面方法就是刺激用戶分享到如QQ空間、朋友圈等平臺,通過各種關系鏈達到曝光和營造口碑等目的。

能夠刺激用戶分享的h5內容我總結了下一般是:排行榜、測試結果、新聞熱點、收益、個人數據這幾類,但是它們都有個共同點,那就是都是和用戶自己相關的內容信息,因此我們結合紅包的相關數據,并對其進行包裝,讓用戶在心理上更具有參與感(微信平臺拉取不了信息,另作顯示)。

  細節  文案  文案是特別重要的,在很多的設計文章中都有提到,運營也是一樣。

這次的運營中,除了傳達上訴的明星與企業信息、時間點,最最重要的就是告知用戶12.31晚上7點,來QQ刷一刷搶紅包這一信息點,因此可以看到這個信息幾乎都是在每一頁顯眼的位置,通過反復強調來加固用戶的印象。

  loading與分享蒙板  雖然loading是很快就跳過的部分,但是在網絡較差或者信號在4G以下的時候,還是需要一些等待的時間,這次元旦的h5就通過一個跳動的小紅包這個細節來增加趣味性,減少倦怠感。

而微信由于系統的關系,點擊分享后會跳出分享蒙版提示,這個地方我們也做了個小動畫擺脫以往單調的文案指示。

  動畫  除了loading和分享蒙板之外,整個H5中,我們也用一些動效來代替了單調的過度。

通過這些動效來讓整個H5更為靈動有驚喜,迎合歡樂的主題并用戶心理的感受上更為流暢和自然。

  呼~以上就是整個元旦紅包H5的設計部分啦,整個h5最終的體驗順暢,雖然中間踩到不少的坑,但后面解決問題做出來后還是蠻有成就感的~辛苦策劃還有技術童鞋呃,感覺似乎還有什么事情要發生的樣子?  對了對了,后面還有個除夕的紅包,你繼續做吧~呃,好的果然,沒那么快完。

  繼續奮斗  除夕紅包運營H5大致總體上和元旦差不多,流程操作上比較一致,能形成系列,保持紅包兩期活動的品牌性一致。

但是除夕要求比元旦要高,所以畫面的處理比之前要更細致,體驗要比之前的流暢。

與元旦不同,除夕是中國傳統節日,是和家人團圓迎新的日子,這種回到家團聚的新年氛圍感是我們想傳達的,討論之后,決定把這次主題關鍵詞定為:溫馨。

  由于篇幅有限,加上有剛做完元旦H5的經驗,解決了很多問題,所以接下來除了與元旦H5不同的設計點,其它就直接上圖圖圖啦~下面是除夕的整個方案:

  除夕地圖的設計過程:  之前元旦的地圖由于有放大縮小的動畫所以需要動用整個地圖,導致資源過大,而且元旦地圖的左右切換還是讓用戶對時間走向有些費解,吸取教訓后,這一次用長條狀形式,只取主要路線的部分,減少了資源大小,而且移動順序從下至上,這樣讓用戶更容易理解時間線走向。

  相關的組件:

  定制化組件:  和元旦h5不一樣的地方主要就是這次需要對明星、企業相關的組件進行定制,突出它們對應的屬性以及氣質,對其品牌進行一定的宣傳,提高辨識度。

  分享內容:  在元旦H5分里拉取紅包后臺數據的時候出現了不穩定,而且QQ和微信看到的內容不一致也的確體驗上并不是很好,因此這次除夕H5結合一些梗,把刷紅包手勢作為刺激用戶分享的內容,一方面強化用戶對刷一刷的認知,另一方面由于不需要拉數據,減少了發布后的風險并保證了各平臺的體驗一致。

  動畫:  這次的動畫上我們更加強調氛圍,因此從首頁進入后,加入了下雪的動效,讓場景呼應我們想傳達的溫馨感。

整個H5里面個人認為比較亮點的地方是地圖刷到盡頭的時候,下起紅包雨,你可以看到一棵掛了紅包的許愿樹,它原本的暗色被點亮起來,代表著啟新,也代表著愿望都能成真的祝愿。

  兩期的活動的設計大致如此啦,當然,除了上面說的2個主體H5,還有它們后續所附帶的一系列推廣素材,整個運營才算是完整的,但這里就不作細說了。

這段時間,看著兩期整個H5實現出來并上線后,個人認為還是蠻有成就感的~  后續感想  這兩期的H5我個人認為在體驗上來看是比較流暢的,并且在上線后也有不錯的成績,這得力于策劃、設計、技術3方緊密合作,所以才有這樣的結果,很是感謝!同時在這段時間的運營工作中我也學習和感悟到不少東西,有些相關經驗和感觸,和童鞋們分享一下:  1. 活動策劃的前期要做好  雖然這兩期的刷一刷紅包預熱H5伴隨著不少的問題,但是,從整個項目的周期上來看,我覺得是比較順利的,這一點我覺得是得力于前期運營童鞋把策劃與安排工作做得很好。

時間上的靈活安排和及時調整讓設計和開發的工作時間于項目上比較有保證,另外H5策劃前期給出了一個具體方向并堅持走下去,這一點避免了之前設計常因方向變化而導致大反工的情況。

  2. 出圖必先出草圖/手稿  現在很多時候設計在初稿階段就直接電腦出圖先了,但是運營h5的設計上,這樣做會有很大的可能推倒重來,影響效率,因為溝通完后策劃方并一定能很快得想象到具體畫面效果,初稿階段快速畫手稿,并給出相關的風格參考,對方就能夠有個大概的了解,提高設計的效率。

  3. 要和開發童鞋當好基友!  在這樣的H5項目中,策劃把控著整體流程和整體配合,但是論合作和配合緊密性,設計和開發之間的關系是很重要的,和開發童鞋當好基友,互相溝通理解,設計了解技術上的處理和難點從而盡量規避復雜難實現的點;開發知道設計的要求和問題,從而找出合適的解決方法,這樣打配合,這樣才能更有效率做出好的東西。

  4. 對人和生活要有更多的洞察  在我看來,一個好的運營,它的設計往往需要從人性、生活等角度去出發和考慮。

通過對人性的理解,把握用戶的心理,這是為了達到運營的目的而使用的手段;而通過對生活的理解,把我們對生活的通感、體驗提取相關元素轉化并運用在策劃和設計上,掩飾或軟化手段所帶來的不適,讓用戶在體驗的過程中產生共鳴并感受自然。

我認為好的運營體驗是通過不斷得對人性和生活洞察并轉化而來的。

  5. 在不確定的情況下盡量在設計中預留靈活調整的空間  運營類需求在很多時候具有一定的不確定因素,這樣導致的改動、返工一直是做運營設計心里無奈的痛。

在不確定或者有可能需要調整的部分盡可能在設計上留有靈活調整的空間,使得哪怕真的需要返工,也能相對得避免全面改動的情況。

當然,能不調整最好~  6. 還是文案  文案的重要性很多地方都有提到,這里也不多說了,運營更是需要文案的力量。

一個好文案真的是可以解決很多問題并帶來效益的。

  在本文的最后,順帶的提一下這2期運營的數據(UV),感覺還不錯:

  好啦,再一次祝大家新年快樂~新一年紅包拿到手軟。

版權聲明:本文由 宰父和悌 整理編輯。

原標題:發紅包前預熱的話語,百度春晚紅包預熱紅包

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

文章評論

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

    用戶名:

    驗證碼:

作者推薦

  • 安卓哪個手游平臺好,哪個手游助手好用

    安卓哪個手游平臺好,哪個手游助手好用 相關圖片破解手游app哪個好用很多人都是手機游戲愛好者。如果你想了解更多關于新手游戲、手機游戲信息和手機游戲福利的信息,有必要下載一個好的手機游戲助手。在互聯網上這么多手機游...

  • html顏色,html顏色標簽

    html顏色,html顏色標簽 相關圖片html背景顏色代碼如下:Canvas id=C1 width=1220 height=880 style=Background:none repeat scroll 0%0%html背景顏色代碼...

  • 加速器加速連接超時,qaq加速器加速超時

    加速器加速連接超時,qaq加速器加速超時 相關圖片網絡加速器一些玩家在選擇網絡游戲的加速器時使用熊貓加速器。有的遇到熊貓加速器加速超時,或者加速失敗。他們該怎么辦?一。請確保沒有共享加速器帳戶,并且熊貓最多同時支...

  • 虛擬現實需要哪些技術,什么是虛擬現實

    虛擬現實需要哪些技術,什么是虛擬現實 相關圖片支持虛擬現實谷歌又來造福人類了!很遺憾今天花了很多時間閱讀這個翻譯,因為它不僅提供了一種簡單廉價的體驗虛擬現實的方式,而且還提供了一個“自己動手的虛擬眼鏡”文檔。...

  • 迅捷pdf編輯器,迅捷pdf轉換器

    迅捷pdf編輯器,迅捷pdf轉換器 相關圖片任務快速切換器有時我們需要合并兩個PDF文件,但許多人不知道如何做。這里我們將使用功能強大的快速PDF轉換軟件。它不僅支持PDF格式和各種常用辦公軟件格式的交換,而且對用戶也...

  • excel怎么四舍五入取整,Excel四舍五入

    excel怎么四舍五入取整,Excel四舍五入 相關圖片excel不想四舍五入我們經常使用Excel來計算數據,有些數據有小數。然而,我們不需要這樣精確的數字,只要把它們圍起來就行了。有些用戶不知道如何取整excel。你得走這條路excel萬位取...

  • border radius屬性,border-radius

    border radius屬性,border-radius 相關圖片textdecoration屬性邊界半徑是一種縮寫方法。如果前/后和/或后存在值,則設置/設置其水平半徑,并設置/設置其垂直半徑后的值。如果沒有/,則水平和垂直半徑相等CSS代碼將內容復制到剪...

  • photoshop合成圖像,photoshop調整圖像大小

    photoshop合成圖像,photoshop調整圖像大小 相關圖片ps圖像處理在PS操作中,對稱圖像是常用的PS技術之一。通過在鏡像中排列相同的元素,有時人們可以獲得相當驚人的視覺效果。本文將與您分享PS如何制作對稱圖像步驟1,Ctrl ps如何翻轉...

  • 怎樣掌握配色技巧,配色技巧

    怎樣掌握配色技巧,配色技巧 相關圖片設計配色基礎一篇你絕對不想錯過的文章!以前的色彩知識大多是基礎科普知識,閱讀后容易忘記,而且在配色時還得翻書。但今天的文章主要是基于實戰。你可以在學習之后馬上開始...

  • word怎么將文字豎排,word部分文字豎排

    word怎么將文字豎排,word部分文字豎排 相關圖片word文字豎排封面當用戶通過word編輯和排版文本時,文本是水平顯示的,但有時我們也需要使文本垂直顯示。我們現在該怎么辦?實現文本垂直排列1非常簡單。如果你只想要幾個垂直排...

熱評文章

  • 西瓜視頻水印去不掉,西瓜視頻不帶水印下載

    西瓜視頻水印去不掉,西瓜視頻不帶水印下載 相關圖片西瓜視頻免費去水印西瓜視頻是今天頭條下的一個短視頻平臺。上面的一些短片非常有趣。你最喜歡的朋友會下載并存儲在本地。不過,從西瓜視頻下載的短視頻都有水印,影響觀看體...

  • 簡單的二級菜單代碼,html菜單代碼

    簡單的二級菜單代碼,html菜單代碼 相關圖片html菜單模塊代碼本文以CSS實現雙語菜單效果代碼為例。與您分享以供參考。詳情如下:這是一個CSS雙語菜單,你必須喜歡。它支持鼠標效果。先看效果,肯定會讓你滿意的。使用背景圖...

  • undefined分,好玩吧undefined更新

    undefined分,好玩吧undefined更新 相關圖片undefined網站網易科技訊9月5日,據VentureBeat報道,根據應用商店的使用情況,蘋果今天發布了最新數據,數據顯示,IOS 12正式發布還不到一個月,IOS 11也在合undefined啥意思...

  • 迅捷pdf編輯器,迅捷pdf轉換器

    迅捷pdf編輯器,迅捷pdf轉換器 相關圖片pdf轉換器哪個好用網絡上的一些稀有材料以PDF格式存儲。有些資料需要記錄在Excel中。把它們一個一個地輸入到表中,既繁瑣又低效。此時,我們可以使用快速PDF轉換器將PDF格式的pdf轉換...

  • 屬性的使用無效,如何使用被隱藏的屬性

    屬性的使用無效,如何使用被隱藏的屬性 相關圖片三代五屬性頁面上顯示的每個元素(包括內聯元素)都可以視為一個框模型。查看chrome devtools中的屏幕截圖:可以看到box模型由四個部分組成。從內到外:內容填充全能屬性如何使用...

  • adobe acrobat xi pro安裝,pdf最新序列號

    adobe acrobat xi pro安裝,pdf最新序列號 相關圖片adobe安裝序號Adobe Acrobat Xi Pro是Adobe公司Acrobat系列的最新產品,用于編輯PDF,Adobe Acrobat Xi Pro支持將PDF文件轉acrobatpro安裝...

  • 沒有廣告的h5,不帶廣告h5

    沒有廣告的h5,不帶廣告h5 相關圖片h5創意廣告2月中華H5廣告行業精品精選h5廣告怎么投放...

  • 抖音怎么更換音樂,抖音如何換自己的音樂

    抖音怎么更換音樂,抖音如何換自己的音樂 相關圖片抖音的音樂怎么找很多人喜歡用自助餐來拍攝小視頻。為了防止小視頻過于單調或使視頻更加有趣,他們會為小視頻設置背景音樂。有時,如果你選擇了錯誤的背景音樂或找到了一個更...

  • subtotal中9是什么意思,subtotal用法

    subtotal中9是什么意思,subtotal用法 相關圖片篩選后面怎么顯示數字很多人只把Excel作為一個簡單的輸入函數,他們不知道如何使用這個函數。實際上,使用一些函數可以大大提高效率。本文將與您分享如何使用subtotal函數一些用戶...

  • magisk模塊編寫,python模塊有哪些

    magisk模塊編寫,python模塊有哪些 相關圖片python模塊大全印刷媒體(如雜志或報紙)在網站上的最大優勢是頁面和段落布局的靈活性。例如,打印媒體能夠優雅地填充多個列,甚至如下面的屏幕截圖所示的那樣復雜,但是由于w...

關注微信

变脸官网查询