SaaS產品增效 | 小程式類產品設計方法探索

小程式具有輕量、聚焦、快捷等特點，這有別於web端類和移動端app類產品，而針對這些特點，是否有一種輕量高效的設計方法，可以把已有的設計能力更高效的投射到小程式設計中呢？本文分享了其團隊對小程式設計進行探索的過程，期待能在實踐中找到最佳答案。

千帆易銷小程式是一款推廣騰訊千帆商品的營銷小程式。我們在改版過程中發現，傳統的設計理論在小程式設計過程中過於笨重，很難滿足SaaS類小程式靈活性高、快速迭代的需要。通過千帆易銷小程式設計專案，我們對小程式設計實施和增效方法進行了探索和實踐，嘗試摸索出更加適合的設計方法。

一、小程式的特點

小程式是SaaS類產品實現商業價值的載體，也是構建產品生態的重要組成。隨著微信生態愈加豐富和壯大，小程式對於商業目標的達成也起到越來越大的作用。

小程式具有輕量、聚焦、快捷等特點，這有別於web端類和移動端app類產品。

小程式的特點

目前主流的設計理論，如設計思維、雙鑽模型、環形模型等，設計流程比較長，使用比較複雜、耗時久。針對小程式設計輕量、聚焦、快捷的特點，是否有一種輕量高效的設計方法，可以把已有的設計能力更高效的投射到小程式設計中呢？

我們通過千帆易銷小程式設計實踐，對此進行了思索和實踐，以期提供一個更佳的答案。

二、構建千帆易銷小程式設計方法

千帆易銷小程式的主要場景圍繞商品的營銷推介展開，可跟進商品使用情況，並進一步轉化和完成商務合作。

基於專案需要，我們先後完成了千帆商品價值感知提升、商品內容優化、物料使用提效等設計內容。在這個過程中，對於小程式的設計流程進行了進一步的提煉，發現小程式的設計流程可以總結為如下步驟：

包括「首頁價值設計」「定位路徑設計」「資訊組合設計」「場景化內容設計」以及「效率提升設計」。

小程式設計的關鍵步驟

1. 首頁價值設計

首頁多維價值露出，打造第一印象的衝擊。

（1）引發使用者興趣，實現促活

小程式的第一印象非常關鍵，因此對於首頁設計，關鍵要加強業務價值的露出，給予使用者儘可能直觀的資訊感知，加快建立其對於業務價值的興趣，加強使用者的正向期待。

首頁價值露出有三種模式：點狀價值、面狀價值、條狀價值。

價值露出模式

在千帆易銷小程式中，通過多種模式的價值的呈現，在首頁構建出F形價值流，增強商品等價值感知效果，提升使用者活躍度。

（2）提煉多維度價值屬性

首頁的注意力表達要點在於線索要鮮明突出。通過精緻、統一、明確的元素來進行引導，賦予使用者深入使用的線索。所以，可以通過細化多維度屬性進一步增強使用者價值判斷，提升體驗觀感，包括精簡的文字、精緻的圖示、指向性符號、探索性入口、聯想性元素等。

多維度屬性細化

下圖是在千帆易銷小程式設計中，對首頁卡片屬性進行的相關細化，充分闡釋多維度價值，進一步豐富價值內涵。

千帆易銷小程式的多維度屬性細化

（3）加深使用者印象感知

由於第一印象的建立過程比較短暫，可以採用靈活多樣的互動形式加深使用者印象感知，比如凸顯核心觸點、提供模組級沉浸感、平滑進退機制等方式。

在千帆易銷小程式中，在檢視商品的過程中提供全時段吸頂可見，加強資訊觸點對映，從而吸引使用者點選深化使用；對於商品的屬性類資訊內容，提供模組級沉浸查閱，提升首頁時效，最大可能覆蓋使用者查閱細分的需要；保證首頁高頻操作儘可能平滑，比如在滑動檢視資訊的過程中提供數量資訊，方便使用者感知下探情況。由此建立起平滑的進退機制，營造操作的暢快感。

千帆易銷小程式的首頁操作設計

當用戶建立起良好的第一印象之後，將會進入使用階段，並更有可能深層次的使用產品，從而帶來更多轉化的可能。

2. 定位路徑設計

構建多元導航路徑，豐富使用者定位鏈路。

（1）豐富多元路徑感知

因為資訊的多樣性及其價值呈現的差異，需要我們通過構建快捷導航，來提升不同資訊的定位效率。導航設計的關鍵點在於識別資訊型別的特點，提供適當的導航方式，提升使用者參與度。

對於首頁的關鍵內容資訊，應提供快捷路徑或沉浸式的導航路徑：

• 首頁-浮窗-二級頁面：適用於關鍵內容快速感知
• 首頁-頂部標籤導航-二級頁面：適用於主內容下細分的內容導航

首頁關鍵資訊導航設計

對於獨立性更強的資訊，則可以通過切換底部tab標籤或者二級頁面來進行導航：

• 首頁-底部tab導航-二級頁面：適用於相互獨立的主內容模組
• 首頁-二級頁面-子頁面：適用於詳細內容的漸進查閱

二級頁面導航設計

（2）提供多種定位方式，滿足不同使用者選用

不同的使用者型別可能有不同的體驗訴求，如新使用者和存量使用者有不同的使用者目標：

• 對於新使用者：資訊推薦、資訊分類、場景化分類等可以提供較好的定位體驗，幫助使用者快速帶入產品場景，降低流失。
• 對於存量使用者：全域性搜尋、列表篩選、資訊分類等可以提供更穩定的定位體驗，有助於加強使用者粘性，提升轉化概率。

如下圖在千帆易銷小程式部分定位方式的效果，定位方式巢狀使用，比如在解決方案場景化的定位過程中，同時提供了推薦和篩選等來增強方案定位效果。

不同的定位方式

3. 資訊組合設計

理順關鍵資訊組合，加深業務感召力。

（1）從資訊組合視角塑造整體感

每一類資訊都有其特點，要儘可能選取最適合的資訊組合來最大化提升業務感知，搭建適用的資訊組合。通常資訊組合有以下四類：

不同的資訊型別

在千帆易銷小程式改版前，提供了商品的簡介、交付資訊、諮詢聯絡人、解決方案、客戶案例、售賣支援、物料等資訊。

我們在新版本補充了商品的優勢和價值、適用場景、銷售機會、銷售政策等售賣說明類資訊，從整體上豐富和完善了商品資訊組合，增強了對使用者的吸引力。

改版前後的資訊差異

（2）提供差異化資訊表達，加深印象

資訊表達的要點是直觀、清晰、高效，對於資訊型別多樣化的頁面，可以通過差異化資訊表達，加深使用者印象，加強資訊傳達效果。下圖是在易銷設計中使用的資訊表達圖譜，有助於我們詮釋這種印象做法。

差異化資訊表達

4. 場景化內容設計

貼近真實使用者場景，提供針對性內容。

（1）情境化提供所需內容

對於內容數量較多的場景，諸如列表頁、產品頁、詳情頁等內容頁面，如何提供內容則非常重要。

在千帆易銷小程式中，我們對於解決方案和案例提供了行業情境的區分，此外還提供了按照角色提供，以及按照使用流程提供等情境化方式。從而加強文件物料的快速感知，方便使用者按相應情境使用，提升導航效率。

情境化資訊設計

（2）大顆粒場景容器聚合內容

對於場景，存在不同的顆粒，大顆粒的場景容器，資訊層級更多，資訊表達也更加豐富，所以更需要精心設計。比如解決方案以及專題，均融合了多種場景的容器形式，它們最大的特點是“匯聚”。

在這類大顆粒場景容器中，需要傳達其價值點、內容包和聯絡線。

• 價值點：提煉具有感召力的文案；
• 內容包：提供強相關的內容組合；
• 聯絡線：實現大顆粒的商務接觸和商機轉化。

大顆粒場景容器

如下圖是易銷解決方案場景和專題場景的價值點/內容包/聯絡線的設計，沉浸式的內容互動保證使用者快捷觸達核心價值，同時聯絡線的指引暗含其中，加強了使用者轉化。

千帆易銷小程式大顆粒場景容器

5. 效率提升設計

連貫使用者操作觸點，提升使用效率。

在設計中，需要綜合場景流程觸點進行有效銜接，從而貫通流程體驗，提升使用者總體使用效率。這個環節可以在前四步的過程中同步開展，並在設計進入後期時再次集中開展，確保全流程、全場景、全週期覆蓋。

（1）連通流程銜接點，打造無縫體驗

採用銜接流程節點、縮短流程路徑、邊界節點兜底等舉措來提升效率，提供沉浸式無縫體驗。

銜接流程節點：

• 對於使用過程，提供返回首屏/返回首頁/吸頂等，有效銜接使用者返回流程。
• 對於下鑽類操作，在返回初始頁面時提供錨點定位，方便使用者接續操作

縮短操作路徑：

• 通過浮窗提供關聯內容快速觸達，協助使用者快速完成關聯資訊定位。
• 通過橫向滑動檢視同類型內容，便於比對和加深首尾效應。

邊界節點兜底：

• 對於初始頁面/無資源頁面提供空狀態引導
• 對於搜尋/篩選無結果場景提供快反饋途徑等。

沉浸式無縫體驗

（2）拉通訊息容器互動，提升資訊獲取效果

對於資訊，既要考慮其特性，也要兼顧共性。小程式中大量使用卡片、列表、對話方塊等容器，而這些資訊容器可以通過標籤化、統一樣式、突出重點、快捷聯動等互動方式，提升資訊互動效率。

以千帆易銷卡片設計為例：對商品、解決方案、文件等多種核心資訊卡片樣式，通過拉通標籤、文字、圖示、按鈕等多種組成元素，加強卡片資訊掃描的統一性和互動的一致性。

千帆易銷小程式資訊容器設計

（3）提供快捷分享，提升多端聯動效率

小程式一個重要的優勢在於微信生態，有必要充分利用微信生態，借力發力，實現更好的產品觸達效果。小程式分享，關鍵在於要快捷，同時要協同多端聯動。

首先，提供統一的分享入口並引導使用者完成前置的相關操作，可以通過提供初次引導以及明顯的懸浮按鈕等方式來加強使用者對分享的感知和了解。

其次，給使用者明確的分享牽引，提升使用者分享意願。

最後，要考慮多端分享使用聯動，小程式的分享不僅僅在於移動端，還有大量的pc端使用環節，需要有效的聯動。

小程式分享的三個關鍵

千帆易銷小程式的分享流程是這樣的：

1. 在分享前置階段：提供統一的常駐入口並引導使用者完成預前的操作；
2. 分享中給予引導和輔助：提供使用者明確的分享牽引，提升使用者分享意願；
3. 分享後可在PC端快捷下載使用：打通PC端物料的使用流程，完成物料下載使用。

通過貫通分享前、中、後環節，提升使用者分享使用效率。

千帆易銷小程式分享流程設計

三、總結

小程式設計要貼合其輕量、聚焦、快捷的特點，千帆小程式設計方法核心在於通過一個系統性的設計框架來貫通小程式設計流程，減少設計阻塞，提升小程式設計交付的質量和效率。

小程式設計是一個不斷創新和發展的設計領域，我們也會不斷的拓展和完善小程式設計方法的內涵，打造更先進更具創造力的方法論。

作者：yunqiang；公眾號：騰訊雲設計中心（TencentCloudDesign）

來源：https://mp.weixin.qq.com/s/Jd4L6CfRsYFdDDGuk4BjVg

本文由 @騰訊雲設計中心 授權釋出於人人都是產品經理，未經作者許可，禁止轉載。

題圖來自 Unsplash，基於 CC0 協議。

該文觀點僅代表作者本人，人人都是產品經理平臺僅提供資訊儲存空間服務。