pbootcms网站模板|日韩1区2区|织梦模板||网站源码|日韩1区2区|jquery建站特效-html5模板网

教你如何做好活動(dòng)專題頁

 教你如何做好活動(dòng)專題頁 三聯(lián)

  編者按:設(shè)計(jì)師是解決問題的人,解題過程就很關(guān)鍵。今天網(wǎng)易設(shè)計(jì)中心總結(jié)了世界杯期間一個(gè)競(jìng)猜活動(dòng)從發(fā)現(xiàn)需求到開發(fā)上線的過程,你可以看到專業(yè)設(shè)計(jì)師發(fā)現(xiàn)問題后,如何分析它,然后解決它,整個(gè)思路清晰有序,非常值得學(xué)習(xí)。

  前言:從需求→交互設(shè)計(jì)→視覺設(shè)計(jì)→開發(fā)上線,不到20天的時(shí)間,6月12日世界杯活動(dòng)上線了。首先為我們這個(gè)團(tuán)隊(duì)點(diǎn)個(gè)贊。活動(dòng)兩個(gè)月期間一直沒有時(shí)間整理,現(xiàn)在活動(dòng)結(jié)束,說說此次暴露的一些問題及反思。

  世界杯競(jìng)猜活動(dòng)平臺(tái): web+wap,活動(dòng)頁面如下圖。

學(xué)習(xí)專業(yè)的設(shè)計(jì)思路!2014年世界杯競(jìng)猜活動(dòng)設(shè)計(jì)總結(jié)

  本次世界杯活動(dòng)暴露的主要問題:

  新手不知道在wap端怎樣可以領(lǐng)獎(jiǎng)。

  一些用戶剛開始不知道如何換場(chǎng)。

  手機(jī)端適配:UI整體偏小,沒有適應(yīng)手機(jī)端的小屏操作。

  那么這些問題在后續(xù)的活動(dòng)交互設(shè)計(jì)中,可以怎樣避免呢?筆者認(rèn)為,設(shè)計(jì)完成后的自查自審是非常重要的一步。從成功或者失敗的經(jīng)驗(yàn)中,不斷沉淀出可復(fù)用的方法。

  從用戶行為打造活動(dòng)交互設(shè)計(jì)閉環(huán)

學(xué)習(xí)專業(yè)的設(shè)計(jì)思路!2014年世界杯競(jìng)猜活動(dòng)設(shè)計(jì)總結(jié)

  圖3. 交互設(shè)計(jì)5大因素

  江南大學(xué)辛向陽教授曾經(jīng)提出,交互設(shè)計(jì)的對(duì)象是人的活動(dòng),交互設(shè)計(jì)最核心的因素有人(people)、動(dòng)作(actions)、輔助工具(means)、環(huán)境(contexts)和目的(purpose)。

  因此用戶動(dòng)作流程在交互設(shè)計(jì)中非常重要,在活動(dòng)中用戶行為路徑較app使用行為來說更單一,如何步步緊扣,做好用戶操作行為引導(dǎo)和信息呈現(xiàn),如何在每個(gè)步驟盡量減少用戶流失,是活動(dòng)交互設(shè)計(jì)的關(guān)鍵所在。

  這次活動(dòng)設(shè)計(jì)中,我們期望以競(jìng)猜世界杯輸贏貫穿始終。在獎(jiǎng)品設(shè)置方面有兩條線,一條是為了刺激用戶回訪的積分有獎(jiǎng),猜中一場(chǎng)即可獲得相應(yīng)積分,積分達(dá)到一定數(shù)值即可兌換相應(yīng)獎(jiǎng)品,積分梯度共6個(gè),領(lǐng)取獎(jiǎng)品積分不扣除;另一條線則是整個(gè)競(jìng)猜活動(dòng)結(jié)束,根據(jù)積分排名來贏取大獎(jiǎng)。所以,這兩條獎(jiǎng)品領(lǐng)取路線互不干擾。

  有了上述活動(dòng)規(guī)則前提,我們期望的用戶操作行為路徑就出來了。

學(xué)習(xí)專業(yè)的設(shè)計(jì)思路!2014年世界杯競(jìng)猜活動(dòng)設(shè)計(jì)總結(jié)

  圖4. 理想的用戶競(jìng)猜流程

  根據(jù)行為路徑,我們來分析每一步的用戶認(rèn)知,從而推導(dǎo)出每一步的信息呈現(xiàn):需要呈現(xiàn)的信息有哪些?哪些是主要信息,哪些是次要輔助信息?

學(xué)習(xí)專業(yè)的設(shè)計(jì)思路!2014年世界杯競(jìng)猜活動(dòng)設(shè)計(jì)總結(jié)

  圖5. 通過任務(wù)分解找到重要信息

  根據(jù)行為路徑,我們能確定頁面基本元素:活動(dòng)標(biāo)題、活動(dòng)規(guī)則、競(jìng)猜區(qū)域、積分有獎(jiǎng)。另外為了刺激用戶參與、增強(qiáng)活動(dòng)的互動(dòng)性,我們?cè)陧撁嫔贤怀隽舜螵?jiǎng)的展示區(qū)域和競(jìng)猜排行榜。從數(shù)據(jù)來看,wap端參與人數(shù)明顯比web多;從信息結(jié)構(gòu)來看,web信息更扁平,wap受限于屏幕大小,信息層級(jí)更深,更易暴露設(shè)計(jì)上的問題,因此筆者在下文中主要分析wap上的用戶行為路徑。推廣部分此文暫不分析。

  行為1:進(jìn)入活動(dòng)主頁

學(xué)習(xí)專業(yè)的設(shè)計(jì)思路!2014年世界杯競(jìng)猜活動(dòng)設(shè)計(jì)總結(jié)

  圖6. 言簡(jiǎn)意賅的活動(dòng)主頁banner

  傳達(dá)了活動(dòng)主題,活動(dòng)規(guī)則通過什么去體現(xiàn)呢?大段的文字是沒有人會(huì)去讀的,筆者總結(jié)了一些活動(dòng)頁面,總體呈現(xiàn)要素有3個(gè):

  ①一目了然的參賽界面

  這一點(diǎn)不用細(xì)說,即可視化的呈現(xiàn)方式,通過圖形讓活動(dòng)玩法一目了然。本次世界杯活動(dòng)中,筆者認(rèn)為比較出色的是QQ和網(wǎng)易新聞的處理方式,模擬現(xiàn)實(shí)場(chǎng)景,讓用戶通過已知事物移情,減少了認(rèn)知和學(xué)習(xí)成本。

學(xué)習(xí)專業(yè)的設(shè)計(jì)思路!2014年世界杯競(jìng)猜活動(dòng)設(shè)計(jì)總結(jié)

  圖7.形象化的競(jìng)猜主界面

  ②參賽流程介紹

  參賽流程往往是作為規(guī)則的輔助說明,對(duì)于邏輯較多,且用戶操作后不能立即獲得結(jié)果反饋的活動(dòng)頁設(shè)計(jì)尤為重要。在此次的世界杯活動(dòng)設(shè)計(jì)中,筆者自認(rèn)為忽略了這個(gè)重要環(huán)節(jié),導(dǎo)致很多用戶并不知道“積分有獎(jiǎng)”機(jī)制。后期通過數(shù)據(jù)觀察,發(fā)現(xiàn)此問題后,我們通過私信push消息告知,很多用戶也根本找不到入口。下面看看其他家的做法:通過流程的介紹,簡(jiǎn)要告知活動(dòng)機(jī)制。

學(xué)習(xí)專業(yè)的設(shè)計(jì)思路!2014年世界杯競(jìng)猜活動(dòng)設(shè)計(jì)總結(jié)

  圖8. 活動(dòng)流程介紹

  ③頂部的活動(dòng)規(guī)則入口

  前面提到過,很少有人去讀長(zhǎng)篇大論的活動(dòng)規(guī)則介紹,但是也必不可少。一般在活動(dòng)頁面頂部banner中嵌入活動(dòng)規(guī)則入口,或者在頁面底部做簡(jiǎn)短的文字說明。

  行為2.競(jìng)猜各場(chǎng)輸贏

  競(jìng)猜是這次活動(dòng)的核心,用戶也需要最快捷地知道活動(dòng)的玩法 ——how。由于活動(dòng)規(guī)則設(shè)定,每次只能競(jìng)猜一天的賽程,每個(gè)比賽日又有N個(gè)場(chǎng)次。用戶競(jìng)猜的核心動(dòng)作就包括:“猜”和“換場(chǎng)”。

  ①猜

  上文提到過,活動(dòng)玩法可通過可視化的圖形界面引導(dǎo)用戶。同時(shí),還有一點(diǎn)不容忽略,即Dan Saffer在《微交互》一書中提到的一個(gè)重要環(huán)節(jié)——反饋。《微交互》中提到的老虎機(jī)的虛假反饋機(jī)制是激勵(lì)人們即使贏不到錢,也會(huì)繼續(xù)賭博下去的利器。當(dāng)然,在活動(dòng)設(shè)計(jì)中,并不存在如此強(qiáng)大的物質(zhì)驅(qū)動(dòng)力,但有效的反饋不僅能友好地傳達(dá)界面與用戶行為的互動(dòng),處理得當(dāng)也能出其不意地增加活動(dòng)的趣味性,逗用戶會(huì)心一笑,提升好感度。這里又拿QQ的反饋?zhàn)隼踝樱狐c(diǎn)擊某隊(duì)的大拇指后,相應(yīng)的隊(duì)員會(huì)舉起手臂,非常形象化。

學(xué)習(xí)專業(yè)的設(shè)計(jì)思路!2014年世界杯競(jìng)猜活動(dòng)設(shè)計(jì)總結(jié)

  圖9. QQ世界杯的趣味反饋

  ②換場(chǎng)

  如何讓用戶知道可以換場(chǎng)呢?首先,在界面上增加預(yù)知信息,讓用戶一目了然就能知道今天什么時(shí)間有哪幾場(chǎng)比賽。針對(duì)這點(diǎn),在設(shè)計(jì)上,我們引入時(shí)間軸的概念,給用戶一個(gè)全局的預(yù)覽。其次,需要有簡(jiǎn)潔方便的換場(chǎng)操作方式。在這點(diǎn)上,我們最先考慮的是手機(jī)屏上最常用的左右滑動(dòng)手勢(shì)來切換場(chǎng)次,但此方案需要適配不同的機(jī)型,耗時(shí)較長(zhǎng),鑒于上線時(shí)間比較緊,我們選擇了手動(dòng)切換場(chǎng)次的方案。

學(xué)習(xí)專業(yè)的設(shè)計(jì)思路!2014年世界杯競(jìng)猜活動(dòng)設(shè)計(jì)總結(jié)

  圖10. wap世界杯競(jìng)猜交互稿

  后期通過數(shù)據(jù)觀察,有一少部分用戶,沒有競(jìng)猜完當(dāng)日的所有場(chǎng)次。分析原因可能有:①懶得猜完所有場(chǎng)次;②不會(huì)換場(chǎng)。這里就引出一個(gè)問題:我們以為用戶看到的,用戶往往就是看不到。因此前期引導(dǎo)非常重要。舉個(gè)栗子,支付寶的世界杯競(jìng)猜,點(diǎn)擊賽程,然后返回主頁,競(jìng)猜區(qū)域會(huì)自動(dòng)左滑,告知用戶切換場(chǎng)次方式。

學(xué)習(xí)專業(yè)的設(shè)計(jì)思路!2014年世界杯競(jìng)猜活動(dòng)設(shè)計(jì)總結(jié)

  圖11. 支付寶的世界杯競(jìng)猜頁

  行為3.領(lǐng)取積分大獎(jiǎng)

  領(lǐng)取積分大獎(jiǎng)作為活動(dòng)中的一條輔助活動(dòng)線,重在傳達(dá)給用戶領(lǐng)獎(jiǎng)規(guī)則,以及如何領(lǐng)獎(jiǎng)的問題——how? 在這次設(shè)計(jì)中卻沒能有效傳達(dá)。究其原因:

  ①用戶初次進(jìn)到活動(dòng)頁,并沒有明確地引導(dǎo),二次回訪的用戶已對(duì)活動(dòng)方式形成固定認(rèn)知。

  ②在UI處理上,”積分有獎(jiǎng)“也不像可點(diǎn)的button,入口比較隱蔽。

  對(duì)于多條活動(dòng)路線的界面設(shè)計(jì),有以下兩種處理方式:

  ①主界面分流。對(duì)于多任務(wù)的活動(dòng),在主界面提供分流入口,能讓所有參與方式一目了然。

學(xué)習(xí)專業(yè)的設(shè)計(jì)思路!2014年世界杯競(jìng)猜活動(dòng)設(shè)計(jì)總結(jié)

  圖12. 多分支活動(dòng)的主界面分流法

  ②突出主活動(dòng)路線的同時(shí),在界面上明確強(qiáng)化另外一條活動(dòng)主線入口。下圖為中國(guó)好聲音的線上活動(dòng),同節(jié)目規(guī)則一樣,活動(dòng)設(shè)計(jì)存在兩條線:一是導(dǎo)師轉(zhuǎn)身,二是選手選導(dǎo)師。活動(dòng)主界面呈現(xiàn)的是選手選導(dǎo)師,在頁面頂部顯著位置提示活動(dòng)另一分支入口——“挑戰(zhàn)另一種玩法”。

clip_image017

  圖13. 在一條主活動(dòng)線上強(qiáng)化另一分支入口

  行為4&5.退出和回訪

  由于競(jìng)猜結(jié)果不能實(shí)時(shí)獲得,從觸發(fā)競(jìng)猜操作,到最終獲得競(jìng)猜結(jié)果,中間會(huì)有較長(zhǎng)的時(shí)間間隔,用戶早已經(jīng)離開我們的競(jìng)猜頁面并投入到其他日常活動(dòng)中,因此,回訪機(jī)制的設(shè)計(jì)也特別重要。

  “回訪”是個(gè)特別容易忽視的問題,需要站在時(shí)間維度去考慮全局的設(shè)計(jì)。而且,世界杯時(shí)間歷時(shí)太長(zhǎng),前期的熱情過去,怎么留住用戶,是前期考慮的一個(gè)難點(diǎn)。在規(guī)則設(shè)定上,我們會(huì)通過云閱讀客戶端進(jìn)行每日的賽程push通知。在交互細(xì)節(jié)上,后期維護(hù)任務(wù)中我們?cè)诿刻斓膱?chǎng)次競(jìng)猜完成后,補(bǔ)充了個(gè)比較輕量級(jí)的賽程更新提醒,讓整個(gè)競(jìng)猜行為串聯(lián)起來,此優(yōu)化在6月25日上線。從下圖數(shù)據(jù)上來看,在后期UV整體持平的情況下,web和wap兩個(gè)平臺(tái)的總用戶留存率得到改善。雖然總體趨勢(shì)在降低,但由于賽事時(shí)間持續(xù)長(zhǎng),也屬自然現(xiàn)象。關(guān)于這點(diǎn),在交互和活動(dòng)設(shè)計(jì)層面可以做出怎樣的彌補(bǔ)和改善,筆者暫時(shí)想不到更好的方案,歡迎大家來探討。

學(xué)習(xí)專業(yè)的設(shè)計(jì)思路!2014年世界杯競(jìng)猜活動(dòng)設(shè)計(jì)總結(jié)

  圖14. 世界杯活動(dòng)期間數(shù)據(jù)變化

  再回到信息層面,用戶回訪的主要任務(wù)是什么?是競(jìng)猜和領(lǐng)獎(jiǎng),當(dāng)然還有次要任務(wù):查看我的競(jìng)猜結(jié)果。關(guān)于領(lǐng)獎(jiǎng),界面上是否該給出直觀的引導(dǎo),而不用靜靜等待用戶自己去尋找呢?以下是我反思之后的方案。

學(xué)習(xí)專業(yè)的設(shè)計(jì)思路!2014年世界杯競(jìng)猜活動(dòng)設(shè)計(jì)總結(jié)

  圖14. wap世界杯活動(dòng)改進(jìn)方案

  小結(jié)

  針對(duì)以上拋出和反思的一些問題,總結(jié)活動(dòng)交互設(shè)計(jì)中應(yīng)注意的問題有:

  1.針對(duì)用戶參與路徑,設(shè)計(jì)活動(dòng)行為閉環(huán)。

  2.對(duì)每一步行為的細(xì)分研究,推倒出信息層級(jí)。

  3.活動(dòng)中對(duì)數(shù)據(jù)的觀察,針對(duì)一些重大問題及時(shí)更新迭代。對(duì)一些周期較短的活動(dòng),數(shù)據(jù)分析的作用除了驗(yàn)證活動(dòng)效果外,對(duì)交互設(shè)計(jì)師而言,更是下一次的設(shè)計(jì)依據(jù)。發(fā)現(xiàn)問題,分析問題,在哪跌倒,下次就開辟一條新路,繞著走。

  4. 如果時(shí)間充裕,可在前期進(jìn)行快速的可用性測(cè)試,規(guī)避上線后的一些風(fēng)險(xiǎn)。

【網(wǎng)站聲明】本站除付費(fèi)源碼經(jīng)過測(cè)試外,其他素材未做測(cè)試,不保證完整性,網(wǎng)站上部分源碼僅限學(xué)習(xí)交流,請(qǐng)勿用于商業(yè)用途。如損害你的權(quán)益請(qǐng)聯(lián)系客服QQ:2655101040 給予處理,謝謝支持。

相關(guān)文檔推薦

這篇文章給大家詳細(xì)介紹了HTML頁面跳轉(zhuǎn)及參數(shù)傳遞問題,需要的朋友參考下吧
這篇文章主要介紹了純css實(shí)現(xiàn)照片墻3D效果的示例代碼,可以實(shí)現(xiàn)鼠標(biāo)經(jīng)過圖片實(shí)現(xiàn)改變,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
本篇文章主要介紹了純 Css 繪制扇形的方法示例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
本篇文章主要介紹了一份純CSS loading效果代碼示例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
這篇文章主要介紹了css 實(shí)現(xiàn)文字過長(zhǎng)自動(dòng)隱藏功能,需要的朋友可以參考下
本篇文章主要介紹了詳解CSS3 rem(設(shè)置字體大小) 教程,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
主站蜘蛛池模板: 流变仪-热分析联用仪-热膨胀仪厂家-耐驰科学仪器商贸 | 【甲方装饰】合肥工装公司-合肥装修设计公司,专业从事安徽办公室、店面、售楼部、餐饮店、厂房装修设计服务 | 连续油炸机,全自动油炸机,花生米油炸机-烟台茂源食品机械制造有限公司 | 北京森语科技有限公司-模型制作专家-展览展示-沙盘模型设计制作-多媒体模型软硬件开发-三维地理信息交互沙盘 | 理化生实验室设备,吊装实验室设备,顶装实验室设备,实验室成套设备厂家,校园功能室设备,智慧书法教室方案 - 东莞市惠森教学设备有限公司 | 江苏全风,高压风机,全风环保风机,全风环形高压风机,防爆高压风机厂家-江苏全风环保科技有限公司(官网) | 电机保护器-电动机综合保护器-上海硕吉电器有限公司 | 渣油泵,KCB齿轮泵,不锈钢齿轮泵,重油泵,煤焦油泵,泊头市泰邦泵阀制造有限公司 | 渣土车电机,太阳能跟踪器电机,蜗轮蜗杆减速电机厂家-淄博传强电机 | PC构件-PC预制构件-构件设计-建筑预制构件-PC构件厂-锦萧新材料科技(浙江)股份有限公司 | 理化生实验室设备,吊装实验室设备,顶装实验室设备,实验室成套设备厂家,校园功能室设备,智慧书法教室方案 - 东莞市惠森教学设备有限公司 | 不锈钢复合板|钛复合板|金属复合板|南钢集团安徽金元素复合材料有限公司-官网 | 深圳高新投三江工业消防解决方案提供厂家_服务商_园区智慧消防_储能消防解决方案服务商_高新投三江 | 英语词典_成语词典_日语词典_法语词典_在线词典网 | 耐磨焊丝,堆焊焊丝,耐磨药芯焊丝,碳化钨焊丝-北京耐默公司 | 透平油真空滤油机-变压器油板框滤油机-滤油车-华之源过滤设备 | 全温度恒温培养摇床-大容量-立式-远红外二氧化碳培养箱|南荣百科 | 禹城彩钢厂_钢结构板房_彩钢复合板-禹城泰瑞彩钢复合板加工厂 | 胶水,胶粘剂,AB胶,环氧胶,UV胶水,高温胶,快干胶,密封胶,结构胶,电子胶,厌氧胶,高温胶水,电子胶水-东莞聚力-聚厉胶粘 | 家德利门业,家居安全门,别墅大门 - 安徽家德利门业有限公司 | 锤式粉碎机,医药粉碎机,锥式粉碎机-无锡市迪麦森机械制造有限公司 | 留学生辅导网-在线课程论文辅导-留学生挂科申诉机构 | 氧化铝球_高铝球_氧化铝研磨球-淄博誉洁陶瓷新材料有限公司 | 校服厂家,英伦校服定做工厂,园服生产定制厂商-东莞市艾咪天使校服 | pbt头梳丝_牙刷丝_尼龙毛刷丝_PP塑料纤维合成毛丝定制厂_广州明旺 | 小型铜米机-干式铜米机-杂线全自动铜米机-河南鑫世昌机械制造有限公司 | 安平县鑫川金属丝网制品有限公司,防风抑尘网,单峰防风抑尘,不锈钢防风抑尘网,铝板防风抑尘网,镀铝锌防风抑尘网 | 室内室外厚型|超薄型|非膨胀型钢结构防火涂料_隧道专用防火涂料厂家|电话|价格|批发|施工 | 华禹护栏|锌钢护栏_阳台护栏_护栏厂家-华禹专注阳台护栏、楼梯栏杆、百叶窗、空调架、基坑护栏、道路护栏等锌钢护栏产品的生产销售。 | 中空玻璃生产线,玻璃加工设备,全自动封胶线,铝条折弯机,双组份打胶机,丁基胶/卧式/立式全自动涂布机,玻璃设备-山东昌盛数控设备有限公司 | 冷轧机|两肋冷轧机|扁钢冷轧机|倒立式拉丝机|钢筋拔丝机|收线机-巩义市华瑞重工机械制造有限公司 | 超细粉碎机|超微气流磨|气流分级机|粉体改性设备|超微粉碎设备-山东埃尔派粉碎机厂家 | 强效碱性清洗剂-实验室中性清洗剂-食品级高纯氮气发生器-上海润榕科学器材有限公司 | 上海噪音治理公司-专业隔音降噪公司-中广通环保 | 四川职高信息网-初高中、大专、职业技术学校招生信息网 | 杭州厂房降温,车间降温设备,车间通风降温,厂房降温方案,杭州嘉友实业爽风品牌 | 馋嘴餐饮网_餐饮加盟店火爆好项目_餐饮连锁品牌加盟指南创业平台 | 青岛成人高考_山东成考报名网 | 不干胶标签-不干胶贴纸-不干胶标签定制-不干胶标签印刷厂-弗雷曼纸业(苏州)有限公司 | 注塑_注塑加工_注塑模具_塑胶模具_注塑加工厂家_深圳环科 | 破碎机锤头_耐磨锤头_合金锤头-鼎成机械一站式耐磨铸件定制服务 微型驱动系统解决方案-深圳市兆威机电股份有限公司 |