移動設計中應用場景的轉換

　　本文由@一淘UX 團隊所撰。作者首先敘述了一個簡單的場景——“美女在家玩自拍”，一句簡單的話，但對設計師來說卻有深在的內涵。這句話濃縮了設計最講究的三大策略點：誰、在哪裡、干什麼，也就是用戶、環境和任務。

　　無論web、軟件還是移動產品的設計，我們都逃不開這三個策略點的考慮。而我們也可以從一些案例中尋找一些考量的思路。

　　走近移動設計，你會發現這三個設計策略點的不同之處，其中區別最大的便是環境。移動的環境包括兩方面：應用場景和硬件設備。到底環境有什麼樣的區別，會影響到最終的設計呢?本篇章主要詳說其應用場景的不同，通過與web產品的對比，發現在設計上的啟示點。

　　從下方兩張圖表的走勢對比，開始我們走近移動設計之旅的應用場景篇。一個好的Web產品，他的點擊數和點擊UV是隨著時間的發展，走勢是慢慢上揚，如下圖所示。

　　而移動產品卻有一個很有意思的現象，每個月初點擊數和點擊UV走勢突然上揚，峰值在月中左右，然後到月底就跌到底谷。如下方兩個圖的對比，猜猜這是為什麼?

　　這個現象的答案是：流量包月。是不是遇到過這樣的場景，月底的時候，收到移動發來的流量提醒信息，自己主動關閉了2G，默默等待新的一個月的開始。。。

　　流量

　　Web場景：網絡穩定，使用網線或則wifi，速度快。

　　移動場景：網絡不穩定，主要有wifi，3G，2G;隨著場景的變化，各個網絡之間頻繁切換;2G網絡用戶多，速度慢，很在意流量。

　　設計啟示：流量思考，流量心理，反饋時間，響應機制… (通過最基礎的內容對比，設計師可以思考更多的啟示)

　　流量是中國手機用戶最關心問題之一，因為它是需要花錢的，特別是2G用戶，對流量的看重程度極其高。移動的2G套餐：5元 30M，10元 80M，20元 200M，30元300M，50元 500M，100元 2G。其中5元和10元，20元是大部分普通用戶的選擇，超過包月限額1M=10.24元。

　　官方宣稱2G的網絡速度在30K/S。2G網絡仍為移動互聯網的主流接入方式，但占比持續下降。Andriod和ios移動產品傾向於選擇高速網絡接入，超過73%的用戶選擇3G或wifi。

　　設計啟示：流量思考——估算產品占用流量

　　流量在移動應用場景中如此重要，那麼我們在進行產品設計的時候，就需要進行流量思考，估算我們的產品會占用用戶多少流量。可以說電子商務產品80%的流量來自於圖片。針對圖片和用戶訪問路徑，我們就可以容易的估算出產品到底消耗了用戶多少流量。

　　以普通電子商務搜索結果頁為例(以下數據為假設，設計師請根據自己的產品估算流量)：

　　搜索結果頁90×90大小的圖片，平均6k左右，1頁20個寶貝，那就是120k，假設產品訪問深度為10左右，差不多一個關鍵字是1M多，平均每個uv關鍵字2-3個，平均下來一個搜索結果頁占用流量2.5M左右。

　　再算算從搜索結果頁進入詳情頁，每個寶貝詳情在500K，假設平均每個搜索uv打開3-4個詳情頁，差不多1.5M。關搜索和詳情每uv每次使用一般就占用了4M。按這樣的邏輯，研究用戶的使用路徑頁面，然後全部算起來，就可以了解到移動產品到低占用了用戶多少流量。

　　所以電子商務的移動產品，再算上用戶查看首頁，購物車，收藏夾……活動頁面，一次算下來估計也有6M。

　　這相當與什麼?一個5元30M包月的用戶在純2G的網絡下只能訪問5次，10元80M的用戶可以訪問15次。所以估算好用戶的總流量使用情況，可以讓我們的產品考慮的更成熟些，無論從技術還是從頁面的表現形式方面。比如大小圖模式，懶加載，預覽模式，用戶觸動才加載。

　　設計啟示：流量思考——對產品的影響

　　我們在進行聚劃算H5產品設計的時候，針對搜索結果頁的寶貝展示，最終采用了右邊的方式。這裡不僅僅是看的寶貝數量的多少和圖的質量問題，最重要好包括流量的影響力。

　　還有一個特別為用戶考慮流量的產品是微博客戶端。你刷的不是微博，你刷的是流量。無論新浪還是騰訊微博客戶端，對圖片都做了分階段處理，小圖預覽，點擊查看大圖，再點擊查看原圖。點擊步驟多了，但相對於省流量，相信用戶更願意接受這樣的方式。

　　設計啟示：流量心理——圖太多，費流量

　　事實是圖太多是真的費流量，流量最大的消耗點就是圖片，視頻。可以感受一下，我們日常生活中，用戶可以在2G網絡底下看小說，但絕對會很小心謹慎開一些需要浏覽多圖的頁面。

　　所以，別讓產品的一個頁面堆積太多的圖片，特別是產品的首頁，會影響用戶流量的恐慌心理。讓用戶以後在2G網絡底下，不敢於打開這樣的頁面。

　　設計啟示：流量心理——加載太慢，費流量

　　別讓產品給用戶的感覺打開半天還什麼都沒有，只有轉動的菊花。這點會讓用戶以為需要加載很多內容，從而擔憂起流量。我們可以算出一個頁面總的K數大小，然後根據2G網絡30K/S來算，就可以大概了解用戶打開這樣一個頁面需要等待幾秒了。

　　這裡可以關心一下用戶等待時間的一個心理。

　　具體說明如下圖：

　　所以別讓你的產品讓用戶等太久，都走光了。這裡就可以考慮適合的響應機制。

　　比如優先加載框架，給用戶的感覺是立即有相應了，且已有部分內容出來了。

　　或則可以在當前頁做反饋，成功後跳轉到下一頁，如果失敗直接在當前頁反饋，避免跳轉。這點適合下一頁內容量較少的情況。

　　再比如收藏成功按鈕，點擊收藏按鈕，是先跟服務器交流，還是先給用戶積極的反饋收藏成功，再跟服務器交流，這些都讓用戶的感受不同。好的加載方式，也是能快速感受到速度的提升和轉場的順暢和連續性。

　　設計啟示：流量——產品的賣點

　　節省流量現在被很多產品拿來宣傳，特別是手機浏覽器和一些需要信息展示的應用。如UC浏覽器就號稱首創業界先進技術，使流量數據壓縮率高達90%，用戶上網速度更快，流量更省。你是不是因為這點心動了?

　　所以在同質化的產品中，流量就是一個可以突出的賣點。

　　電量

　　Web場景：穩定的電源

　　移動場景：憂心的剩余電量

　　設計啟示：省電功能，高效程序…

　　一日一充，是不是已經成為你的習慣。當看到剩余電量不足20%的時候，你是不是開始憂心忡忡，想盡辦法找電源。是不是特別擔心電量沒了，別人聯系不上你，讓你不得不放棄繼續游戲或浏覽應用。從觸屏機開始，電量已經成為用戶的一塊通病。

　　這時候，如果你的產品在這塊上有特別之處，將成為繼流量之後一個極大的賣點。如各個安全產品，都涉及到省電這個點，如下圖

　　同樣，在考慮電量的時候，快速的調節屏幕亮度，或則有省電模式的快捷方式，都能觸及到用戶關切的點。如果你有一款省電應用，敢稱讓用戶的手機電量多維持半天，估計這個應用瞬間就火了。

　　別讓用戶感受到你的產品使用起來有頓挫感，很卡，或則更厲害的是手機明顯