“美女在家玩自拍”，一句簡單的話，但對設(shè)計(jì)師來說卻有深在的內(nèi)涵。這句話濃縮了設(shè)計(jì)最講究的三大策略點(diǎn)：誰、在哪里、干什么，也就是用戶、環(huán)境和任務(wù)。無論web、軟件還是移動(dòng)產(chǎn)品設(shè)計(jì)，都逃不開這三個(gè)策略點(diǎn)的考慮。

走近移動(dòng)設(shè)計(jì)，你會(huì)發(fā)現(xiàn)這三個(gè)設(shè)計(jì)策略點(diǎn)的不同之處，其中區(qū)別最大的便是環(huán)境。移動(dòng)的環(huán)境包括兩方面：應(yīng)用場景和硬件設(shè)備。到底環(huán)境有什么樣的區(qū)別，會(huì)影響到最終的設(shè)計(jì)呢？本篇章主要詳說其應(yīng)用場景的不同，通過與web產(chǎn)品的對比，發(fā)現(xiàn)在設(shè)計(jì)上的啟示點(diǎn)。

從下方兩張圖表的走勢對比，開始我們走近移動(dòng)設(shè)計(jì)之旅的應(yīng)用場景篇。一個(gè)好的Web產(chǎn)品，他的點(diǎn)擊數(shù)和點(diǎn)擊UV是隨著時(shí)間的發(fā)展，走勢是慢慢上揚(yáng)，如下圖所示。而移動(dòng)產(chǎn)品卻有一個(gè)很有意思的現(xiàn)象，每個(gè)月初點(diǎn)擊數(shù)和點(diǎn)擊UV走勢突然上揚(yáng)，峰值在月中左右，然后到月底就跌到底谷。如下方兩個(gè)圖的對比，猜猜這是為什么？

這個(gè)現(xiàn)象的答案是：流量包月。是不是遇到過這樣的場景，月底的時(shí)候，收到移動(dòng)發(fā)來的流量提醒信息，自己主動(dòng)關(guān)閉了2G，默默等待新的一個(gè)月的開始。。。

流量

Web場景：網(wǎng)絡(luò)穩(wěn)定，使用網(wǎng)線或則wifi，速度快。

移動(dòng)場景：網(wǎng)絡(luò)不穩(wěn)定，主要有wifi，3G，2G；隨著場景的變化，各個(gè)網(wǎng)絡(luò)之間頻繁切換；2G網(wǎng)絡(luò)用戶多，速度慢，很在意流量。

設(shè)計(jì)啟示：流量思考，流量心理，反饋時(shí)間，響應(yīng)機(jī)制…?（通過最基礎(chǔ)的內(nèi)容對比，設(shè)計(jì)師可以思考更多的啟示）

流量是中國手機(jī)用戶最關(guān)心問題之一，因?yàn)樗切枰ㄥX的，特別是2G用戶，對流量的看重程度極其高。移動(dòng)的2G套餐：5元 30M，10元 80M，20元 200M，30元300M，50元 500M，100元 2G。其中5元和10元，20元是大部分普通用戶的選擇，超過包月限額1M=10.24元。官方宣稱2G的網(wǎng)絡(luò)速度在30K/S。2G網(wǎng)絡(luò)仍為移動(dòng)互聯(lián)網(wǎng)的主流接入方式，但占比持續(xù)下降。Andriod和ios移動(dòng)產(chǎn)品傾向于選擇高速網(wǎng)絡(luò)接入，超過73%的用戶選擇3G或wifi。

設(shè)計(jì)啟示：流量思考——估算產(chǎn)品占用流量

流量在移動(dòng)應(yīng)用場景中如此重要，那么我們在進(jìn)行產(chǎn)品設(shè)計(jì)的時(shí)候，就需要進(jìn)行流量思考，估算我們的產(chǎn)品會(huì)占用用戶多少流量?？梢哉f電子商務(wù)產(chǎn)品80%的流量來自于圖片。針對圖片和用戶訪問路徑，我們就可以容易的估算出產(chǎn)品到底消耗了用戶多少流量。

以普通電子商務(wù)搜索結(jié)果頁為例（以下數(shù)據(jù)為假設(shè)，設(shè)計(jì)師請根據(jù)自己的產(chǎn)品估算流量）：

搜索結(jié)果頁90×90大小的圖片，平均6k左右，1頁20個(gè)寶貝，那就是120k，假設(shè)產(chǎn)品訪問深度為10左右，差不多一個(gè)關(guān)鍵字是1M多，平均每個(gè)uv關(guān)鍵字2-3個(gè)，平均下來一個(gè)搜索結(jié)果頁占用流量2.5M左右。再算算從搜索結(jié)果頁進(jìn)入詳情頁，每個(gè)寶貝詳情在500K，假設(shè)平均每個(gè)搜索uv打開3-4個(gè)詳情頁，差不多1.5M。關(guān)搜索和詳情每uv每次使用一般就占用了4M。按這樣的邏輯，研究用戶的使用路徑頁面，然后全部算起來，就可以了解到移動(dòng)產(chǎn)品到低占用了用戶多少流量。所以電子商務(wù)的移動(dòng)產(chǎn)品，再算上用戶查看首頁，購物車，收藏夾。。。活動(dòng)頁面，一次算下來估計(jì)也有6M。這相當(dāng)與什么？一個(gè)5元30M包月的用戶在純2G的網(wǎng)絡(luò)下只能訪問5次，10元80M的用戶可以訪問15次。所以估算好用戶的總流量使用情況，可以讓我們的產(chǎn)品考慮的更成熟些，無論從技術(shù)還是從頁面的表現(xiàn)形式方面。比如大小圖模式，懶加載，預(yù)覽模式，用戶觸動(dòng)才加載。

設(shè)計(jì)啟示：流量思考——對產(chǎn)品的影響

我們在進(jìn)行聚劃算H5產(chǎn)品設(shè)計(jì)的時(shí)候，針對搜索結(jié)果頁的寶貝展示，最終采用了右邊的方式。這里不僅僅是看的寶貝數(shù)量的多少和圖的質(zhì)量問題，最重要好包括流量的影響力。

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

設(shè)計(jì)啟示：流量心理——圖太多，費(fèi)流量

事實(shí)是圖太多是真的費(fèi)流量，流量最大的消耗點(diǎn)就是圖片，視頻?？梢愿惺芤幌?，我們?nèi)粘Ｉ钪?，用戶可以?G網(wǎng)絡(luò)底下看小說，但絕對會(huì)很小心謹(jǐn)慎開一些需要瀏覽多圖的頁面。所以，別讓產(chǎn)品的一個(gè)頁面堆積太多的圖片，特別是產(chǎn)品的首頁，會(huì)影響用戶流量的恐慌心理。讓用戶以后在2G網(wǎng)絡(luò)底下，不敢于打開這樣的頁面。

設(shè)計(jì)啟示：流量心理——加載太慢，費(fèi)流量

別讓產(chǎn)品給用戶的感覺打開半天還什么都沒有，只有轉(zhuǎn)動(dòng)的菊花。這點(diǎn)會(huì)讓用戶以為需要加載很多內(nèi)容，從而擔(dān)憂起流量。我們可以算出一個(gè)頁面總的K數(shù)大小，然后根據(jù)2G網(wǎng)絡(luò)30K/S來算，就可以大概了解用戶打開這樣一個(gè)頁面需要等待幾秒了。這里可以關(guān)心一下用戶等待時(shí)間的一個(gè)心理。

具體說明如下圖：

所以別讓你的產(chǎn)品讓用戶等太久，都走光了。這里就可以考慮適合的響應(yīng)機(jī)制。比如優(yōu)先加載框架，給用戶的感覺是立即有相應(yīng)了，且已有部分內(nèi)容出來了。

或則可以在當(dāng)前頁做反饋，成功后跳轉(zhuǎn)到下一頁，如果失敗直接在當(dāng)前頁反饋，避免跳轉(zhuǎn)。這點(diǎn)適合下一頁內(nèi)容量較少的情況。再比如收藏成功按鈕，點(diǎn)擊收藏按鈕，是先跟服務(wù)器交流，還是先給用戶積極的反饋收藏成功，再跟服務(wù)器交流，這些都讓用戶的感受不同。好的加載方式，也是能快速感受到速度的提升和轉(zhuǎn)場的順暢和連續(xù)性。

設(shè)計(jì)啟示：流量——產(chǎn)品的賣點(diǎn)

節(jié)省流量現(xiàn)在被很多產(chǎn)品拿來宣傳，特別是手機(jī)瀏覽器和一些需要信息展示的應(yīng)用。如UC瀏覽器就號(hào)稱首創(chuàng)業(yè)界先進(jìn)技術(shù)，使流量數(shù)據(jù)壓縮率高達(dá)90%，用戶上網(wǎng)速度更快，流量更省。你是不是因?yàn)檫@點(diǎn)心動(dòng)了？所以在同質(zhì)化的產(chǎn)品中，流量就是一個(gè)可以突出的賣點(diǎn)。

電量

Web場景：穩(wěn)定的電源

移動(dòng)場景：憂心的剩余電量

設(shè)計(jì)啟示：省電功能，高效程序…

一日一充，是不是已經(jīng)成為你的習(xí)慣。當(dāng)看到剩余電量不足20%的時(shí)候，你是不是開始憂心忡忡，想盡辦法找電源。是不是特別擔(dān)心電量沒了，別人聯(lián)系不上你，讓你不得不放棄繼續(xù)游戲或?yàn)g覽應(yīng)用。從觸屏機(jī)開始，電量已經(jīng)成為用戶的一塊通病。這時(shí)候，如果你的產(chǎn)品在這塊上有特別之處，將成為繼流量之后一個(gè)極大的賣點(diǎn)。如各個(gè)安全產(chǎn)品，都涉及到省電這個(gè)點(diǎn)，如下圖

同樣，在考慮電量的時(shí)候，快速的調(diào)節(jié)屏幕亮度，或則有省電模式的快捷方式，都能觸及到用戶關(guān)切的點(diǎn)。如果你有一款省電應(yīng)用，敢稱讓用戶的手機(jī)電量多維持半天，估計(jì)這個(gè)應(yīng)用瞬間就火了。

別讓用戶感受到你的產(chǎn)品使用起來有頓挫感，很卡，或則更厲害的是手機(jī)明顯發(fā)熱。這些都會(huì)讓用戶感受到這是個(gè)費(fèi)電的應(yīng)用，所以高效的程序，穩(wěn)定的性能是十分重要的。

環(huán)境光

Web場景：明亮的燈光下，清晰高亮的顯示屏前

移動(dòng)場景：刺眼的太陽光底下，昏暗的夜幕下，睡前的一片漆黑

設(shè)計(jì)啟示：高對比度，快速調(diào)節(jié)亮度，聲音提示…

是不是每天睡前，當(dāng)你使用手機(jī)預(yù)覽各種信息的時(shí)候，都習(xí)慣性的會(huì)調(diào)節(jié)下亮度，減少亮屏幕給眼睛帶來的疲勞，或則是減少對枕邊人的干擾。是不是每天醒來后，在明亮的環(huán)境下，屏幕暗的讓你找不到開機(jī)滑塊，貼近面盤，才好不容易找到亮度調(diào)節(jié)的地方。是不是每每電量不足時(shí)，唯一想到的辦法就是降低屏幕亮度。。。即使像iphone這樣的，有光線感應(yīng)器的自動(dòng)調(diào)節(jié)亮度也沒能很好的解決以上的問題。隨時(shí)變化的環(huán)境光，如果有好的場景轉(zhuǎn)換手法，將給用戶帶來極大的好體驗(yàn)。但如果不注意，同樣會(huì)給我們的產(chǎn)品帶來負(fù)面影響。

設(shè)計(jì)啟示：高對比度

大家覺的下圖這樣的設(shè)計(jì)方式有什么問題嗎？問題是這樣的設(shè)計(jì)容易讓用戶較難發(fā)現(xiàn)其他幾個(gè)入口，特別是在昏暗的環(huán)境下，和手機(jī)低亮度底下，可見度是非常差的。

設(shè)計(jì)師們是配置了最好的顯示器，在寬敞明亮的燈光下工作的，所以這樣的設(shè)計(jì)是好看的。但實(shí)際的應(yīng)用場景是，用戶在各種各樣的環(huán)境底下使用，可能特別昏暗也可能特別刺眼，所以設(shè)計(jì)師可以考慮在設(shè)計(jì)完畢后，放在手機(jī)上調(diào)節(jié)各種亮度或則在太陽底下看看實(shí)際的效果。所以提高前后元素的對比度，可以適應(yīng)各種場景。

設(shè)計(jì)啟示：快速調(diào)節(jié)亮度

現(xiàn)在很多瀏覽器和閱讀器,如ZAKER，QQ/UC瀏覽器等，都直接配置夜間模式，和屏幕亮度調(diào)節(jié)。讓我們在弱對比度中，感受到產(chǎn)品對我們的體貼的一面。這些也都是考慮到移動(dòng)產(chǎn)品場景的復(fù)雜性和變化。

聲音提示，也是對環(huán)境的一種擬補(bǔ)。在昏暗的環(huán)境下，一個(gè)丁的聲音，讓你立刻直到短消息來。還有在操作的過程中，一些反饋不能及時(shí)看到，聲音就能將這部分的視覺死角給擬補(bǔ)過來。

場所/時(shí)段/注意力—碎片化時(shí)間

Web場景：場所較固定，每次使用時(shí)間段長，注意力集中

移動(dòng)場景：隨時(shí)隨地，碎片化時(shí)間使用，注意力分散

設(shè)計(jì)啟示：注重核心點(diǎn)表達(dá)，顯示操作結(jié)果，高效信息傳達(dá)…

是否有這樣一種體驗(yàn)：當(dāng)早上出門忘記帶手機(jī)，就感覺這一天過的特不踏實(shí)，對大部分人來說都有這樣的感受。當(dāng)移動(dòng)設(shè)備能裝入口袋的那天起，就已經(jīng)融入了我們的身體。所以任何時(shí)間，任何地點(diǎn)，承載著強(qiáng)大功能的手機(jī)，都可能被我們拿起，然后因?yàn)楦鞣N原因又快速收起。移動(dòng)產(chǎn)品的特性，就決定了它碎片化時(shí)間的使用。我們看看碎片化時(shí)間主要產(chǎn)生在哪些產(chǎn)所：步行中，坐公交，擠地鐵，逛商場，工作中，睡前睡醒，旅游出差，無聊寂寞，聯(lián)系他人，拍照，玩游戲。。。

手機(jī)總能出現(xiàn)在我們產(chǎn)生的碎片時(shí)間里，這個(gè)過程是沒法做到聚精會(huì)神的，從頭到尾好好干完一件事的。周邊各種環(huán)境永遠(yuǎn)在影響著你，思路常常被打斷，操作常常會(huì)停止，任務(wù)中斷后，還需要繼續(xù)，于是設(shè)計(jì)就要考慮聚焦核心點(diǎn)，考慮中斷后的連續(xù)性。所以在產(chǎn)品的信息布局上就需要將這樣的場景考慮進(jìn)去，讓這樣的布局減輕用戶的記憶負(fù)擔(dān)。

我們在設(shè)計(jì)搜索結(jié)果頁的時(shí)候，原來的界面是這樣的。

層級(jí)過多，排序全部展示出來，分類篩選全部隱藏。排序和分類篩選的展現(xiàn)方式，一個(gè)過多展示，一個(gè)只有入口，沒有操作后的結(jié)果顯示。在碎片化的時(shí)間里，當(dāng)用戶使用了分類篩選后，過段時(shí)間再回到這個(gè)頁面，估計(jì)基本就忘記剛剛的選擇了。我們不可能讓用戶再這里還承擔(dān)上記憶負(fù)擔(dān)，所以根據(jù)這一點(diǎn)，和產(chǎn)品的意愿，我們后面改版成如下方式，提升了用戶訪問深度。

手機(jī)的碎片化時(shí)間，也決定了內(nèi)容的跳躍性和片段化的閱讀。這些都將讓我們的文案要考慮的更精簡，表意更明確，讓用戶在最短的時(shí)間內(nèi)能了解到信息所要表示的意思。所以產(chǎn)品的反饋提示文案，特別是短暫出現(xiàn)的浮層提示，盡量在最快的時(shí)間內(nèi)，提示用戶需要的信息點(diǎn)。

屏幕

Web場景：pc擁有更大的屏幕，所以設(shè)計(jì)更復(fù)雜，也更開放

移動(dòng)場景：手機(jī)的小屏幕，設(shè)備隱私性更強(qiáng)，簡單，私密

設(shè)計(jì)啟示：聚焦核心點(diǎn)，內(nèi)容優(yōu)先…

關(guān)注用戶的主要任務(wù)流程，明白用戶最需要什么，不要讓太多的流程分支來干擾用戶任務(wù)。移動(dòng)產(chǎn)品不應(yīng)該是簡單的挪動(dòng)pc上的設(shè)計(jì)，將什么功能和操作都暴露出來，所以我們需要適時(shí)出現(xiàn)需要的功能。這就需要更聚焦的設(shè)計(jì)，聚焦設(shè)計(jì)可以從刪除、組織、隱藏和轉(zhuǎn)移幾種方式入手。

智能手機(jī)屏幕空間主要尺寸：

智能手機(jī)用戶在使用過程中對屏幕尺寸的感覺：

大部分的使用用戶還是感受到屏幕有點(diǎn)小。設(shè)計(jì)的時(shí)候就需要考慮到最大化內(nèi)容，充分利用屏幕?，F(xiàn)在就有很多應(yīng)用，將導(dǎo)航欄與工具欄在默認(rèn)的時(shí)候顯示，向下瀏覽的過程中收起，往回瀏覽的時(shí)候顯示出來。如google搜索：

天貓的搜索結(jié)果頁的導(dǎo)航欄和篩選在頁面滑動(dòng)的過程中，隱藏起來，讓寶貝最大化顯示，用戶的空間感更大，也是考慮到過程中讓用戶沉浸在內(nèi)容中，不打攪到用戶。

任務(wù)窗體

Web場景：多任務(wù)進(jìn)行，可同時(shí)進(jìn)行多項(xiàng)任務(wù)，邊聽歌邊任務(wù)

移動(dòng)場景：單任務(wù)窗體

設(shè)計(jì)啟示：信息扁平化，減少切換，縮短路徑…

?

設(shè)計(jì)啟示：信息扁平化

想想我們平時(shí)在pc上，多愜意，可以邊淘寶邊聽歌，還順便看看電影。在移動(dòng)設(shè)備上基本是不可能的，因?yàn)樗膯稳蝿?wù)窗體。所以平時(shí)在Web設(shè)計(jì)中，我們注重信息廣度和深度的平衡，但手機(jī)產(chǎn)品的單任務(wù)窗體，將決定信息架構(gòu)的扁平化，扁平化的好處是用戶只需要較少的路徑，打開更少的窗體，就能找到自己想要的信息。手機(jī)頁面基本上都沒有網(wǎng)頁的面包屑，每個(gè)進(jìn)入的窗體，都需要一級(jí)一級(jí)返回。

所以在考慮整個(gè)任務(wù)流程的時(shí)候，就應(yīng)該用更少的路徑，滿足了用戶操作，達(dá)到產(chǎn)品的連續(xù)性和效率的提升。最新版的evernote，就利用了架構(gòu)扁平化的原則，如下圖，在導(dǎo)航欄的上方放了多卡片的入口。這樣的設(shè)計(jì)讓用戶只需1-2步就到達(dá)全部筆記、分類筆記、標(biāo)簽、地點(diǎn)等內(nèi)容。用戶可以很直觀、方便地在各個(gè)內(nèi)容間切換：單擊或拖拽卡片頂部，版塊內(nèi)容就會(huì)放大展現(xiàn)，且能預(yù)覽到相應(yīng)的模塊。這些設(shè)計(jì)都極大的提高了此應(yīng)用的使用效率。

淘寶H5中淘+的設(shè)計(jì)，也是一種信息架構(gòu)的扁平化，讓最重要的幾個(gè)入口，在所有的頁面上都顯示出來。讓用戶能快捷進(jìn)入相應(yīng)的頁面，而無需再專門跑回首頁再找相應(yīng)的入口。

設(shè)計(jì)啟示：減少切換，縮短路徑

避免單任務(wù)窗體帶來的劣勢，可以從信息架構(gòu)扁平化入手，也可以從減少切換，縮短路徑的方式來實(shí)現(xiàn)。我們在電子商務(wù)移動(dòng)領(lǐng)域，創(chuàng)新性的在搜索結(jié)果頁中引入了詳情內(nèi)容，這樣的方式讓用戶的交易成本降低了，產(chǎn)品體驗(yàn)和交易效率得到了極大的提升。設(shè)計(jì)上線后，搜索結(jié)果頁進(jìn)入詳情頁的點(diǎn)擊數(shù)少了近10%，但最終的引導(dǎo)成交額和成交轉(zhuǎn)化率保持平穩(wěn)。這樣的設(shè)計(jì)思路是可以在移動(dòng)產(chǎn)品中多多嘗試的，將帶來意想不到的效果。

擺放方式

Web場景：放在桌子上，穩(wěn)定

移動(dòng)場景：拿在手上，隨意擺動(dòng)，找支撐點(diǎn)

設(shè)計(jì)啟示：最大化內(nèi)容，切換場景…

豎屏是我們手機(jī)中的常態(tài)，一般產(chǎn)品都選擇使用豎屏，橫屏內(nèi)容一般需要適配。所以，如果只是簡單的橫屏，還不如限制不要橫屏。一般在什么情況下使用橫屏？游戲，可以感受到最大化場景，也方便雙手操作?？磮D，視頻，閱讀這些都考慮到最大化元素。拍照，雙手的便捷性。

橫豎屏也是一個(gè)開關(guān)，能切換到相應(yīng)的界面，只要有更好的用戶場景需求，往往能給產(chǎn)品帶來特色。比如下廚房菜譜的應(yīng)用，在橫屏預(yù)覽時(shí)，切換為不同的預(yù)覽模式，而不是簡單的屏幕拉伸。當(dāng)你在邊炒菜邊看菜譜的時(shí)候，就可以立即感受到這樣的方式，是最符合你當(dāng)時(shí)的需求的。

橫屏后，立刻感受到更大的字體，更大空間的左右滑動(dòng)區(qū)域，是不是特別切合你炒菜的場景。

?環(huán)境的應(yīng)用場景篇暫且描述到這里，更多環(huán)境相關(guān)內(nèi)容，請查看?走近移動(dòng)設(shè)計(jì)——硬件設(shè)備篇?

來源：一淘UX