起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識走近移動設計——應用場景篇
“美女在家玩自拍”，一句簡單的話，但對設計師來說卻有深在的內涵。這句話濃縮了設計最講究的三大策略點：誰、在哪里、干什么，也就是用戶、環境和任務。無論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%的時候，你是不是開始憂心忡忡，想盡辦法找電源。是不是特別擔心電量沒了，別人聯系不上你，讓你不得不放棄繼續游戲或瀏覽應用。從觸屏機開始，電量已經成為用戶的一塊通病。這時候，如果你的產品在這塊上有特別之處，將成為繼流量之后一個極大的賣點。如各個安全產品，都涉及到省電這個點，如下圖
同樣，在考慮電量的時候，快速的調節屏幕亮度，或則有省電模式的快捷方式，都能觸及到用戶關切的點。如果你有一款省電應用，敢稱讓用戶的手機電量多維持半天，估計這個應用瞬間就火了。
別讓用戶感受到你的產品使用起來有頓挫感，很卡，或則更厲害的是手機明顯發熱。這些都會讓用戶感受到這是個費電的應用，所以高效的程序，穩定的性能是十分重要的。
環境光
Web場景：明亮的燈光下，清晰高亮的顯示屏前
移動場景：刺眼的太陽光底下，昏暗的夜幕下，睡前的一片漆黑
設計啟示：高對比度，快速調節亮度，聲音提示…
是不是每天睡前，當你使用手機預覽各種信息的時候，都習慣性的會調節下亮度，減少亮屏幕給眼睛帶來的疲勞，或則是減少對枕邊人的干擾。是不是每天醒來后，在明亮的環境下，屏幕暗的讓你找不到開機滑塊，貼近面盤，才好不容易找到亮度調節的地方。是不是每每電量不足時，唯一想到的辦法就是降低屏幕亮度。。。即使像iphone這樣的，有光線感應器的自動調節亮度也沒能很好的解決以上的問題。隨時變化的環境光，如果有好的場景轉換手法，將給用戶帶來極大的好體驗。但如果不注意，同樣會給我們的產品帶來負面影響。
設計啟示：高對比度
大家覺的下圖這樣的設計方式有什么問題嗎？問題是這樣的設計容易讓用戶較難發現其他幾個入口，特別是在昏暗的環境下，和手機低亮度底下，可見度是非常差的。
設計師們是配置了最好的顯示器，在寬敞明亮的燈光下工作的，所以這樣的設計是好看的。但實際的應用場景是，用戶在各種各樣的環境底下使用，可能特別昏暗也可能特別刺眼，所以設計師可以考慮在設計完畢后，放在手機上調節各種亮度或則在太陽底下看看實際的效果。所以提高前后元素的對比度，可以適應各種場景。
設計啟示：快速調節亮度
現在很多瀏覽器和閱讀器,如ZAKER，QQ/UC瀏覽器等，都直接配置夜間模式，和屏幕亮度調節。讓我們在弱對比度中，感受到產品對我們的體貼的一面。這些也都是考慮到移動產品場景的復雜性和變化。
聲音提示，也是對環境的一種擬補。在昏暗的環境下，一個丁的聲音，讓你立刻直到短消息來。還有在操作的過程中，一些反饋不能及時看到，聲音就能將這部分的視覺死角給擬補過來。
場所/時段/注意力—碎片化時間
Web場景：場所較固定，每次使用時間段長，注意力集中
移動場景：隨時隨地，碎片化時間使用，注意力分散
設計啟示：注重核心點表達，顯示操作結果，高效信息傳達…
是否有這樣一種體驗：當早上出門忘記帶手機，就感覺這一天過的特不踏實，對大部分人來說都有這樣的感受。當移動設備能裝入口袋的那天起，就已經融入了我們的身體。所以任何時間，任何地點，承載著強大功能的手機，都可能被我們拿起，然后因為各種原因又快速收起。移動產品的特性，就決定了它碎片化時間的使用。我們看看碎片化時間主要產生在哪些產所：步行中，坐公交，擠地鐵，逛商場，工作中，睡前睡醒，旅游出差，無聊寂寞，聯系他人，拍照，玩游戲。。。
手機總能出現在我們產生的碎片時間里，這個過程是沒法做到聚精會神的，從頭到尾好好干完一件事的。周邊各種環境永遠在影響著你，思路常常被打斷，操作常常會停止，任務中斷后，還需要繼續，于是設計就要考慮聚焦核心點，考慮中斷后的連續性。所以在產品的信息布局上就需要將這樣的場景考慮進去，讓這樣的布局減輕用戶的記憶負擔。
我們在設計搜索結果頁的時候，原來的界面是這樣的。
層級過多，排序全部展示出來，分類篩選全部隱藏。排序和分類篩選的展現方式，一個過多展示，一個只有入口，沒有操作后的結果顯示。在碎片化的時間里，當用戶使用了分類篩選后，過段時間再回到這個頁面，估計基本就忘記剛剛的選擇了。我們不可能讓用戶再這里還承擔上記憶負擔，所以根據這一點，和產品的意愿，我們后面改版成如下方式，提升了用戶訪問深度。
手機的碎片化時間，也決定了內容的跳躍性和片段化的閱讀。這些都將讓我們的文案要考慮的更精簡，表意更明確，讓用戶在最短的時間內能了解到信息所要表示的意思。所以產品的反饋提示文案，特別是短暫出現的浮層提示，盡量在最快的時間內，提示用戶需要的信息點。
屏幕
Web場景：pc擁有更大的屏幕，所以設計更復雜，也更開放
移動場景：手機的小屏幕，設備隱私性更強，簡單，私密
設計啟示：聚焦核心點，內容優先…
關注用戶的主要任務流程，明白用戶最需要什么，不要讓太多的流程分支來干擾用戶任務。移動產品不應該是簡單的挪動pc上的設計，將什么功能和操作都暴露出來，所以我們需要適時出現需要的功能。這就需要更聚焦的設計，聚焦設計可以從刪除、組織、隱藏和轉移幾種方式入手。
智能手機屏幕空間主要尺寸：
智能手機用戶在使用過程中對屏幕尺寸的感覺：
大部分的使用用戶還是感受到屏幕有點小。設計的時候就需要考慮到最大化內容，充分利用屏幕?，F在就有很多應用，將導航欄與工具欄在默認的時候顯示，向下瀏覽的過程中收起，往回瀏覽的時候顯示出來。如google搜索：
天貓的搜索結果頁的導航欄和篩選在頁面滑動的過程中，隱藏起來，讓寶貝最大化顯示，用戶的空間感更大，也是考慮到過程中讓用戶沉浸在內容中，不打攪到用戶。
任務窗體
Web場景：多任務進行，可同時進行多項任務，邊聽歌邊任務
移動場景：單任務窗體
設計啟示：信息扁平化，減少切換，縮短路徑…
?
設計啟示：信息扁平化
想想我們平時在pc上，多愜意，可以邊淘寶邊聽歌，還順便看看電影。在移動設備上基本是不可能的，因為它的單任務窗體。所以平時在Web設計中，我們注重信息廣度和深度的平衡，但手機產品的單任務窗體，將決定信息架構的扁平化，扁平化的好處是用戶只需要較少的路徑，打開更少的窗體，就能找到自己想要的信息。手機頁面基本上都沒有網頁的面包屑，每個進入的窗體，都需要一級一級返回。
所以在考慮整個任務流程的時候，就應該用更少的路徑，滿足了用戶操作，達到產品的連續性和效率的提升。最新版的evernote，就利用了架構扁平化的原則，如下圖，在導航欄的上方放了多卡片的入口。這樣的設計讓用戶只需1-2步就到達全部筆記、分類筆記、標簽、地點等內容。用戶可以很直觀、方便地在各個內容間切換：單擊或拖拽卡片頂部，版塊內容就會放大展現，且能預覽到相應的模塊。這些設計都極大的提高了此應用的使用效率。
淘寶H5中淘+的設計，也是一種信息架構的扁平化，讓最重要的幾個入口，在所有的頁面上都顯示出來。讓用戶能快捷進入相應的頁面，而無需再專門跑回首頁再找相應的入口。
設計啟示：減少切換，縮短路徑
避免單任務窗體帶來的劣勢，可以從信息架構扁平化入手，也可以從減少切換，縮短路徑的方式來實現。我們在電子商務移動領域，創新性的在搜索結果頁中引入了詳情內容，這樣的方式讓用戶的交易成本降低了，產品體驗和交易效率得到了極大的提升。設計上線后，搜索結果頁進入詳情頁的點擊數少了近10%，但最終的引導成交額和成交轉化率保持平穩。這樣的設計思路是可以在移動產品中多多嘗試的，將帶來意想不到的效果。
擺放方式
Web場景：放在桌子上，穩定
移動場景：拿在手上，隨意擺動，找支撐點
設計啟示：最大化內容，切換場景…
豎屏是我們手機中的常態，一般產品都選擇使用豎屏，橫屏內容一般需要適配。所以，如果只是簡單的橫屏，還不如限制不要橫屏。一般在什么情況下使用橫屏？游戲，可以感受到最大化場景，也方便雙手操作?？磮D，視頻，閱讀這些都考慮到最大化元素。拍照，雙手的便捷性。
橫豎屏也是一個開關，能切換到相應的界面，只要有更好的用戶場景需求，往往能給產品帶來特色。比如下廚房菜譜的應用，在橫屏預覽時，切換為不同的預覽模式，而不是簡單的屏幕拉伸。當你在邊炒菜邊看菜譜的時候，就可以立即感受到這樣的方式，是最符合你當時的需求的。
橫屏后，立刻感受到更大的字體，更大空間的左右滑動區域，是不是特別切合你炒菜的場景。
?環境的應用場景篇暫且描述到這里，更多環境相關內容，請查看?走近移動設計——硬件設備篇?
來源：一淘UX
- 目前還沒評論，等你發揮！
