微信輕應用是時下的一個香餑餑储矩。一方面是因為隨著H5語言的定稿及其開發(fā)經驗的沉淀，開發(fā)者以較低的成本即可打造出具有一定可用性的Web App褂乍。另一方面持隧，微信作為一個超級社交App，天然具有巨大的流量入口價值與傳播分享價值逃片。因此舆蝴，在微信平臺宣布全面開放接口后，無數(shù)互聯(lián)網創(chuàng)業(yè)團隊题诵、企業(yè)，甚至是個人层皱，紛涌而入性锭，殺成一片紅海。
但是叫胖，實際使用時草冈，微信輕應用的體驗并不是那么的“爽”。誠然瓮增，這與H5語言的技術局限性有著很大的關系怎棱。但拋開這一點，走腎而不走心的設計也是造就“不爽”體驗的重要原因绷跑。本人在體驗過一些的微信輕應用后拳恋，嘗試總結出了一些對微信輕應用交互設計的思考。
在亮出個人總結之前砸捏，我想先談談進行微信輕應用設計時的難點與機會谬运。
微信輕應用設計的難點源于H5技術的局限性以及微信平臺本身的局限性。
1. H5的局限性：
- 使用場景上垦藏，嚴重依賴于穩(wěn)定的網絡環(huán)境梆暖。由于幾乎每個元素及每次操作都需要發(fā)送網絡請求，因此掂骏，在弱網絡的環(huán)境下轰驳，使用的痛苦指數(shù)是趨向于無窮的；
- 技術上弟灼，一方面级解，通過Canvas標簽與CSS來進行圖像、動效的渲染田绑，效果馬馬虎虎蠕趁，容易造成卡頓的即視感；另一方面辛馆，緩存技術仍不完善俺陋，如點擊列表進入詳情頁再返回時豁延，通常需要重新加載一次列表；
- 權限獲取上腊状，無法獲取照相機诱咏、系統(tǒng)級別通知等設備或接口的權限，功能上大打折扣缴挖。
2. 微信的局限性：
- 使用場景上袋狞，與聊天場景存在著激烈的矛盾沖突，導致任務隨時可能被打斷映屋。打斷之后苟鸯，再次進入的成本高如汪（需要從滔滔信息流中重新定位應用位置，并從頭開始任務）棚点；
- 平臺設計規(guī)范上早处，應用首頁（即公眾號對話窗口）的樣式只能使用聊天氣泡+底部菜單欄；以微信瀏覽器打開應用時瘫析，必須使用微信預設的頂部導航欄砌梆。這些或占據了一定量的屏幕空間，或一定程度上限制了設計發(fā)揮贬循；
- 權限獲取上咸包，除極少數(shù)微信家的親兒子外，其他應用均無法獲取頂部導航欄右側按鈕的自定義權杖虾，這就更加限制了設計師的發(fā)揮烂瘫。
但很多時候，限制即是機會奇适。“聊天氣泡+底部操作欄”的設計規(guī)范忱反，反而為應用的信息框架與導航設計提供了更多的思路。一方面滤愕，IM工具的輸入/反饋機制温算，為用戶與應用的交互方式和信息的呈現(xiàn)方式帶來了新的可能；另一方面间影，底部菜單欄可以是對Native App中Tab Bar選項的隱喻注竿，恰當使用可以降低用戶學習成本。
廢話了一大籮筐魂贬，下面馬上向個人總結頁面跳轉巩割。
根據進入場景，定義頁面架構
用戶的認知模式是長這樣子的：會傾向于把公眾號的對話窗口視為微信輕應用的首頁付燥。底部菜單欄中宣谈，每一個標簽即是一個功能模塊的入口（相當于Native App中的Tab Bar）。點擊標簽后進入的第一個頁面即是該功能模塊的頂層頁面键科，從該頁面返回則必然是回到對話窗口闻丑。
這帶來的啟示之一是漩怎，在設計頁面架構時，可以考慮將對話窗口中的底部菜單欄視為Native App中Tab欄的隱喻嗦嗡，將功能模塊平攤到這些操作欄中勋锤，并削弱模塊之間的關聯(lián)性。如微信輕應用“Yolo優(yōu)洛會”中侥祭，每個底部操作欄標簽均對應一個功能模塊叁执，且功能模塊之間彼此獨立，點擊進入后可獲得獨立矮冬、完整的沉浸式體驗谈宛，讓用戶專注于任務本身，并降低了學習成本胎署。
啟示之二是吆录，對話窗口與功能模塊的頂層頁面之間必須建立唯一的上下層級關系。一個反例就是硝拧，“行動流”微信輕應用中，點擊對話窗口底部操作欄中的“圈子”惊来，進入新頁面后膜楷，再點擊左上的“圈子”按鈕莉兰，試圖返回，卻發(fā)現(xiàn)跳轉至了一個全新的頁面抱究。該頁面頂部是Icon和Slogan，下面是“我”带斑、“圈子”鼓寺、“夢想”這三個功能的快捷入口，正是設計師眼中的“首頁”勋磕。然而妈候，該頁面的到達路徑并不符合預期，容易把用戶灌醉挂滓。
使用唯一的苦银、微信預設的“返回”導航樣式
微信已經強制為所有應用套上了頂部導航欄枷鎖，其中就已經包含了“返回”按鈕赶站。然而幔虏，仍然還有不少應用堅持添加上自己親手設計的“返回”按鈕。
雙重“返回”樣式增加了認知障礙贝椿、擠占了屏幕空間想括。就算是出于“左上返回按鈕位于拇指熱區(qū)外我們來讓它更容易被點到吧”的出發(fā)點來考慮，其存在意義也仍然十分牽強烙博。相反瑟蜈，將其移除后烟逊，騰出來的空間可以激發(fā)更豐富的設計思路(比如，用來放置全局導航)踪栋。
靈活使用多種導航樣式
即使是在高配置焙格、強網絡的條件下，頁面跳轉在微信輕應用中仍然是非常痛苦的體驗夷都。而靈活高效的導航是減少頁面跳轉的一大殺器眷唉。
微信輕應用上，常見的導航樣式如下：
1. 對話窗導航
2. 一級導航
3.全局導航
4.場景式導航
在微信輕應用的語境下囤官，局限于一種導航樣式是很難達到“靈活高效”的目標的冬阳。搭配使用多種導航樣式效果才能好。
舍棄重動效党饮，做足微交互
H5的技術限制肝陪，使得一些在Native App上司空見慣的動效套用在微信輕應用上時顯得笨拙無比。當然開發(fā)水平是影響動效是否流暢的一個決定性因素刑顺。但過重的動效需要占用大量的用戶資源氯窍，同時也加大了開發(fā)的成本與難度，違背了“快速開發(fā)”的初衷蹲堂。因此狼讨，在進行微信輕應用的設計時，要盡可能地避免“使用動效解決問題”的思路柒竞。
但這并不意味著要舍棄一切動效政供。事實上，比起Native App朽基，微信輕應用對“微交互動效”更加依賴布隔。主要表現(xiàn)在以下幾個方面：
1. Loading態(tài)
微信輕應用需要源源不斷地發(fā)送網絡請求，也就留給了用戶大量用于等待的焦慮時間稼虎。而Loading態(tài)的微交互的使命正是化解這股焦慮衅檀。
2. 缺省態(tài)
Lodaing態(tài)的對應加載方式是全局加載，這種方式比較適用于數(shù)據請求量不大的頁面加載場景霎俩。而數(shù)據量較大的頁面則普遍使用異步加載的加載方式术吝。異步加載即各項元素按照一定的優(yōu)先級順序來進行加載，因此在加載過程中會出現(xiàn)各種空元素茸苇。這時候就需要缺省態(tài)的微交互上場了排苍。
3. 操作反饋
由于H5的效能問題，在“用戶進行操作”與“系統(tǒng)執(zhí)行操作”之間往往會存在一小段延遲学密。在這段延遲期間淘衙，若沒有任何反饋，用戶很容易會誤以為自己操作失敗而做出什么不好的事來腻暮。操作反饋的微交互可以間接加快應用的響應速度彤守，阻止用戶犯錯誤毯侦。
4. 輸入
正在輸入的文本框必須要在視線焦點范圍內。這點聽起來似乎是天經地義具垫。但很不幸的是侈离，這個世界上存在著太多的無情無義的微信輕應用了。
僅讓重要的信息可視筝蚕，并減少其加載量
“如何讓用戶覺得運行速度很快”是進行微信輕應用設計面臨的一個核心問題卦碾，而頁面加載的速度正是衡量“運行得快不快”的一個重要尺度。
用戶是如何感知起宽、判斷頁面加載的速度的洲胖？這主要取決于第一個可視元素出現(xiàn)所用時間和“感覺這個頁面已經完整了”時所用時間。將這些用戶視角的體驗需求轉化為指導設計的方法論則是坯沪，減少頁面中可感知到的信息的數(shù)據加載量绿映。這些可感知到的信息必然是重要的、高展示價值的腐晾。至于其他次級信息叉弦，可選擇性地將其隱藏，并降低其加載優(yōu)先級藻糖。這樣淹冰，即使次級信息仍在加載中，但由于其已被隱藏颖御，用戶感知不到榄棵，因此仍會認為當前頁面的加載速度是nice的凝颇。
隱藏信息的方式總結有以下幾種：
1. 將一段長信息不完整展示
2. 將信息分組拧略，通過控件隔斷不同組的視圖空間
3. 設置一次性加載的數(shù)據量的閾值芦岂，加載更多時需要額外操作
提高列表篩選效率
由于技術限制禽最，現(xiàn)階段大部分微信輕應用從詳情頁面返回至列表頁面時，并不能定位到最后停留的列表位置上袱饭。
突破該技術瓶頸固然是最有效的解決方法川无。但據觀察，目前只有微信錢包中自帶的“京東”輕應用解決了該問題虑乖。因此可以基本斷定該解決思路暫時無法實現(xiàn)懦趋。
面對如此艱苦的設計背景環(huán)境，另一個解決思路是提高列表篩選效率疹味，降低用戶從詳情頁返回列表頁的概率仅叫。比如帜篇，往列表中注入更多的輔助用戶決擇的信息字段；又或者是將詳情頁中的關鍵入口前置诫咱，縮短用戶到達路徑笙隙。
在微信錢包中自帶的“大眾點評”輕應用中，店鋪列表頁處囊過了該店鋪的團購入口坎缭，一來團購信息可以輔助用戶進行店鋪篩選竟痰，二來縮短了購買團購的路徑，極大地提高了列表的篩選效率幻锁。
考慮逆向路徑凯亮，避免無效的“返回”
設計師或許掌握了成噸的讓跳轉頁面無感化的技巧，但一切真相都逃不過“返回”按鈕的審判之眼哄尔。按照微信的邏輯假消，每一次點擊“返回”的結果，必然是回到上一次加載的頁面岭接。這使得一些在正向操作時感覺高效簡潔的設計方案在逆向操作時讓人疼到無比富拗。
比如微信錢包中自帶的“美麗說”輕應用中，使用Segmented Control控件承載化妝品分類鸣戴。切換類別時啃沪，體驗近乎無感。然而窄锅，當點擊“返回”按鈕時创千，并不是回到微信錢包首頁，而是回到上一個化妝品類別的列表視圖入偷，嚴重不符合用戶預期（明明就是同一個頁面追驴，怎么點了返回沒反應的）。
正因為如此，在技術上無法解決該問題的前提下锋爪，并不十分建議使用那些容易引發(fā)“不需要進行跳轉”的錯覺的導航樣式丙曙，比如Tab式導航。不僅在正向路徑中違背了“肯定不需要跳轉啊”的用戶預期其骄，也在逆向路徑中也顯得臃腫低效亏镰。
最后之YY：提供返回最后停留頁面的入口？
用戶正在使用微信輕應用拯爽，手機突然震動了一下索抓。這時候用戶是會選擇將當前任務進行到底，還是會離開應用查看微信信息呢？這取決于用戶使用應用的目標強度以及獲取新信息的迫切程度纸兔。但無論如何惰瓜，用戶一旦離開了應用，如果想要再次回到最后停留的頁面汉矿，就必需從頭開始崎坊。
無論是對用戶還是開發(fā)商而言，這種交互邏輯都不是什么好東西洲拇。那么奈揍，能否在淺層級的頁面中提供返回最后停留頁面的入口呢？比如赋续，在輕應用的頁面中提供“稍后閱讀”按鈕男翰，點擊之后，公眾號可以將該頁面的鏈接以信息流的形式推送給用戶纽乱。這樣蛾绎，用戶只需要重新進入公眾號對話窗口，直接點擊信息中的鏈接即可以重返最后停留的頁面了鸦列。
當然租冠，這只是個人YY，是否具有可實現(xiàn)性仍需要技術同學的審批薯嗤。
由于個人知識體系實在淺薄顽爹，關于微信輕應用設計的思考暫時就只有這么多了。在此真心希望H5的開發(fā)技術快高長大骆姐，讓微信輕應用與原生應用之間的體驗差距越來越小镜粤。
