移動(dòng)場(chǎng)景中的產(chǎn)品設(shè)計(jì)(2)
以普通電子商務(wù)搜索結(jié)果頁(yè)為例(以下數(shù)據(jù)為假設(shè),設(shè)計(jì)師請(qǐng)根據(jù)自己的產(chǎn)品估算流量):
搜索結(jié)果頁(yè)90x90大小的圖片,平均6k左右,1頁(yè)20個(gè)寶貝,那就是120k,假設(shè)產(chǎn)品訪問(wèn)深度為10左右,差不多一個(gè)關(guān)鍵字是1M多,平均每個(gè)uv關(guān)鍵字2-3個(gè),平均下來(lái)一個(gè)搜索結(jié)果頁(yè)占用流量2.5M左右。再算算從搜索結(jié)果頁(yè)進(jìn)入詳情頁(yè),每個(gè)寶貝詳情在500K,假設(shè)平均每個(gè)搜索uv打開(kāi)3-4個(gè)詳情頁(yè),差不多1.5M。關(guān)搜索和詳情每uv每次使用一般就占用了4M。按這樣的邏輯,研究用戶的使用路徑頁(yè)面,然后全部算起來(lái),就可以了解到移動(dòng)產(chǎn)品到低占用了用戶多少流量。所以電子商務(wù)的移動(dòng)產(chǎn)品,再算上用戶查看首頁(yè),購(gòu)物車,收藏夾。。?;顒?dòng)頁(yè)面,一次算下來(lái)估計(jì)也有6M。這相當(dāng)與什么?一個(gè)5元30M包月的用戶在純2G的網(wǎng)絡(luò)下只能訪問(wèn)5次,10元80M的用戶可以訪問(wèn)15次。所以估算好用戶的總流量使用情況,可以讓我們的產(chǎn)品考慮的更成熟些,無(wú)論從技術(shù)還是從頁(yè)面的表現(xiàn)形式方面。比如大小圖模式,懶加載,預(yù)覽模式,用戶觸動(dòng)才加載。
設(shè)計(jì)啟示:流量思考——對(duì)產(chǎn)品的影響
我們?cè)谶M(jìn)行聚劃算H5產(chǎn)品設(shè)計(jì)的時(shí)候,針對(duì)搜索結(jié)果頁(yè)的寶貝展示,最終采用了右邊的方式。這里不僅僅是看的寶貝數(shù)量的多少和圖的質(zhì)量問(wèn)題,最重要好包括流量的影響力。
還有一個(gè)特別為用戶考慮流量的產(chǎn)品是微博客戶端。你刷的不是微博,你刷的是流量。無(wú)論新浪還是騰訊微博客戶端,對(duì)圖片都做了分階段處理,小圖預(yù)覽,點(diǎn)擊查看大圖,再點(diǎn)擊查看原圖。點(diǎn)擊步驟多了,但相對(duì)于省流量,相信用戶更愿意接受這樣的方式。
設(shè)計(jì)啟示:流量心理——圖太多,費(fèi)流量
事實(shí)是圖太多是真的費(fèi)流量,流量最大的消耗點(diǎn)就是圖片,視頻??梢愿惺芤幌拢覀?nèi)粘I钪?,用戶可以?G網(wǎng)絡(luò)底下看小說(shuō),但絕對(duì)會(huì)很小心謹(jǐn)慎開(kāi)一些需要瀏覽多圖的頁(yè)面。所以,別讓產(chǎn)品的一個(gè)頁(yè)面堆積太多的圖片,特別是產(chǎn)品的首頁(yè),會(huì)影響用戶流量的恐慌心理。讓用戶以后在2G網(wǎng)絡(luò)底下,不敢于打開(kāi)這樣的頁(yè)面。
設(shè)計(jì)啟示:流量心理——加載太慢,費(fèi)流量
別讓產(chǎn)品給用戶的感覺(jué)打開(kāi)半天還什么都沒(méi)有,只有轉(zhuǎn)動(dòng)的菊花。這點(diǎn)會(huì)讓用戶以為需要加載很多內(nèi)容,從而擔(dān)憂起流量。我們可以算出一個(gè)頁(yè)面總的K數(shù)大小,然后根據(jù)2G網(wǎng)絡(luò)30K/S來(lái)算,就可以大概了解用戶打開(kāi)這樣一個(gè)頁(yè)面需要等待幾秒了。這里可以關(guān)心一下用戶等待時(shí)間的一個(gè)心理。
本文地址:http://irelandcustomcontracting.com/tutorial/wd1309.html
您可能還喜歡
- jquery Jcrop圖像裁切插件中文api文檔
- @media適配不同尺寸的手機(jī)
- 返回上一頁(yè)代碼的幾種寫(xiě)法
- Dreamweaver CC 2014新功能介紹
- 深入了解viewport和px
- 優(yōu)秀CSS代碼書(shū)寫(xiě)的10個(gè)規(guī)范
- 畫(huà)出你的風(fēng)格:HTML5創(chuàng)意畫(huà)板的設(shè)計(jì)教程
- Div中height:100%無(wú)效的解決辦法
- 網(wǎng)頁(yè)前端-網(wǎng)頁(yè)切圖命名規(guī)范
- 為網(wǎng)頁(yè)設(shè)計(jì)師而生的14個(gè)文本編輯器
- 專訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類
- 體驗(yàn)設(shè)計(jì)中的排序問(wèn)題
- 網(wǎng)頁(yè)設(shè)計(jì)精粹 網(wǎng)頁(yè)中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁(yè)UI - 原子設(shè)計(jì)理論(上)
- 如何通過(guò)設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺(jué)設(shè)計(jì)系列文章(二):全屏