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

語言: CN / TW / HK

小程序具有輕量、聚焦、快捷等特點,這有別於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 協議。

該文觀點僅代表作者本人,人人都是產品經理平台僅提供信息存儲空間服務。