小程序具有輕量、聚焦、快捷等特點(diǎn)，這有別于web端類(lèi)和移動(dòng)端app類(lèi)產(chǎn)品，而針對(duì)這些特點(diǎn)，是否有一種輕量高效的設(shè)計(jì)方法，可以把已有的設(shè)計(jì)能力更高效的投射到小程序設(shè)計(jì)中呢？本文分享了其團(tuán)隊(duì)對(duì)小程序設(shè)計(jì)進(jìn)行探索的過(guò)程，期待能在實(shí)踐中找到最佳答案。

千帆易銷(xiāo)小程序是一款推廣騰訊千帆商品的營(yíng)銷(xiāo)小程序。我們?cè)诟陌孢^(guò)程中發(fā)現(xiàn)，傳統(tǒng)的設(shè)計(jì)理論在小程序設(shè)計(jì)過(guò)程中過(guò)于笨重，很難滿(mǎn)足SaaS類(lèi)小程序靈活性高、快速迭代的需要。通過(guò)千帆易銷(xiāo)小程序設(shè)計(jì)項(xiàng)目，我們對(duì)小程序設(shè)計(jì)實(shí)施和增效方法進(jìn)行了探索和實(shí)踐，嘗試摸索出更加適合的設(shè)計(jì)方法。

一、小程序的特點(diǎn)

小程序是SaaS類(lèi)產(chǎn)品實(shí)現(xiàn)商業(yè)價(jià)值的載體，也是構(gòu)建產(chǎn)品生態(tài)的重要組成。隨著微信生態(tài)愈加豐富和壯大，小程序?qū)τ谏虡I(yè)目標(biāo)的達(dá)成也起到越來(lái)越大的作用。

小程序具有輕量、聚焦、快捷等特點(diǎn)，這有別于web端類(lèi)和移動(dòng)端app類(lèi)產(chǎn)品。

小程序的特點(diǎn)

目前主流的設(shè)計(jì)理論，如設(shè)計(jì)思維、雙鉆模型、環(huán)形模型等，設(shè)計(jì)流程比較長(zhǎng)，使用比較復(fù)雜、耗時(shí)久。針對(duì)小程序設(shè)計(jì)輕量、聚焦、快捷的特點(diǎn)，是否有一種輕量高效的設(shè)計(jì)方法，可以把已有的設(shè)計(jì)能力更高效的投射到小程序設(shè)計(jì)中呢？

我們通過(guò)千帆易銷(xiāo)小程序設(shè)計(jì)實(shí)踐，對(duì)此進(jìn)行了思索和實(shí)踐，以期提供一個(gè)更佳的答案。

二、構(gòu)建千帆易銷(xiāo)小程序設(shè)計(jì)方法

千帆易銷(xiāo)小程序的主要場(chǎng)景圍繞商品的營(yíng)銷(xiāo)推介展開(kāi)，可跟進(jìn)商品使用情況，并進(jìn)一步轉(zhuǎn)化和完成商務(wù)合作。

基于項(xiàng)目需要，我們先后完成了千帆商品價(jià)值感知提升、商品內(nèi)容優(yōu)化、物料使用提效等設(shè)計(jì)內(nèi)容。在這個(gè)過(guò)程中，對(duì)于小程序的設(shè)計(jì)流程進(jìn)行了進(jìn)一步的提煉，發(fā)現(xiàn)小程序的設(shè)計(jì)流程可以總結(jié)為如下步驟：

包括「首頁(yè)價(jià)值設(shè)計(jì)」「定位路徑設(shè)計(jì)」「信息組合設(shè)計(jì)」「場(chǎng)景化內(nèi)容設(shè)計(jì)」以及「效率提升設(shè)計(jì)」。

小程序設(shè)計(jì)的關(guān)鍵步驟

1. 首頁(yè)價(jià)值設(shè)計(jì)

首頁(yè)多維價(jià)值露出，打造第一印象的沖擊。

（1）引發(fā)用戶(hù)興趣，實(shí)現(xiàn)促活

小程序的第一印象非常關(guān)鍵，因此對(duì)于首頁(yè)設(shè)計(jì)，關(guān)鍵要加強(qiáng)業(yè)務(wù)價(jià)值的露出，給予用戶(hù)盡可能直觀的信息感知，加快建立其對(duì)于業(yè)務(wù)價(jià)值的興趣，加強(qiáng)用戶(hù)的正向期待。

首頁(yè)價(jià)值露出有三種模式：點(diǎn)狀價(jià)值、面狀價(jià)值、條狀價(jià)值。

價(jià)值露出模式

在千帆易銷(xiāo)小程序中，通過(guò)多種模式的價(jià)值的呈現(xiàn)，在首頁(yè)構(gòu)建出F形價(jià)值流，增強(qiáng)商品等價(jià)值感知效果，提升用戶(hù)活躍度。

（2）提煉多維度價(jià)值屬性

首頁(yè)的注意力表達(dá)要點(diǎn)在于線(xiàn)索要鮮明突出。通過(guò)精致、統(tǒng)一、明確的元素來(lái)進(jìn)行引導(dǎo)，賦予用戶(hù)深入使用的線(xiàn)索。所以，可以通過(guò)細(xì)化多維度屬性進(jìn)一步增強(qiáng)用戶(hù)價(jià)值判斷，提升體驗(yàn)觀感，包括精簡(jiǎn)的文本、精致的圖標(biāo)、指向性符號(hào)、探索性入口、聯(lián)想性元素等。

多維度屬性細(xì)化

下圖是在千帆易銷(xiāo)小程序設(shè)計(jì)中，對(duì)首頁(yè)卡片屬性進(jìn)行的相關(guān)細(xì)化，充分闡釋多維度價(jià)值，進(jìn)一步豐富價(jià)值內(nèi)涵。

千帆易銷(xiāo)小程序的多維度屬性細(xì)化

（3）加深用戶(hù)印象感知

由于第一印象的建立過(guò)程比較短暫，可以采用靈活多樣的交互形式加深用戶(hù)印象感知，比如凸顯核心觸點(diǎn)、提供模塊級(jí)沉浸感、平滑進(jìn)退機(jī)制等方式。

在千帆易銷(xiāo)小程序中，在查看商品的過(guò)程中提供全時(shí)段吸頂可見(jiàn)，加強(qiáng)信息觸點(diǎn)映射，從而吸引用戶(hù)點(diǎn)擊深化使用；對(duì)于商品的屬性類(lèi)信息內(nèi)容，提供模塊級(jí)沉浸查閱，提升首頁(yè)時(shí)效，最大可能覆蓋用戶(hù)查閱細(xì)分的需要；保證首頁(yè)高頻操作盡可能平滑，比如在滑動(dòng)查看信息的過(guò)程中提供數(shù)量信息，方便用戶(hù)感知下探情況。由此建立起平滑的進(jìn)退機(jī)制，營(yíng)造操作的暢快感。

千帆易銷(xiāo)小程序的首頁(yè)操作設(shè)計(jì)

當(dāng)用戶(hù)建立起良好的第一印象之后，將會(huì)進(jìn)入使用階段，并更有可能深層次的使用產(chǎn)品，從而帶來(lái)更多轉(zhuǎn)化的可能。

2. 定位路徑設(shè)計(jì)

構(gòu)建多元導(dǎo)航路徑，豐富用戶(hù)定位鏈路。

（1）豐富多元路徑感知

因?yàn)樾畔⒌亩鄻有约捌鋬r(jià)值呈現(xiàn)的差異，需要我們通過(guò)構(gòu)建快捷導(dǎo)航，來(lái)提升不同信息的定位效率。導(dǎo)航設(shè)計(jì)的關(guān)鍵點(diǎn)在于識(shí)別信息類(lèi)型的特點(diǎn)，提供適當(dāng)?shù)膶?dǎo)航方式，提升用戶(hù)參與度。

對(duì)于首頁(yè)的關(guān)鍵內(nèi)容信息，應(yīng)提供快捷路徑或沉浸式的導(dǎo)航路徑：

• 首頁(yè)-浮窗-二級(jí)頁(yè)面：適用于關(guān)鍵內(nèi)容快速感知
• 首頁(yè)-頂部標(biāo)簽導(dǎo)航-二級(jí)頁(yè)面：適用于主內(nèi)容下細(xì)分的內(nèi)容導(dǎo)航

首頁(yè)關(guān)鍵信息導(dǎo)航設(shè)計(jì)

對(duì)于獨(dú)立性更強(qiáng)的信息，則可以通過(guò)切換底部tab標(biāo)簽或者二級(jí)頁(yè)面來(lái)進(jìn)行導(dǎo)航：

• 首頁(yè)-底部tab導(dǎo)航-二級(jí)頁(yè)面：適用于相互獨(dú)立的主內(nèi)容模塊
• 首頁(yè)-二級(jí)頁(yè)面-子頁(yè)面：適用于詳細(xì)內(nèi)容的漸進(jìn)查閱

二級(jí)頁(yè)面導(dǎo)航設(shè)計(jì)

（2）提供多種定位方式，滿(mǎn)足不同用戶(hù)選用

不同的用戶(hù)類(lèi)型可能有不同的體驗(yàn)訴求，如新用戶(hù)和存量用戶(hù)有不同的用戶(hù)目標(biāo)：

• 對(duì)于新用戶(hù)：信息推薦、信息分類(lèi)、場(chǎng)景化分類(lèi)等可以提供較好的定位體驗(yàn)，幫助用戶(hù)快速帶入產(chǎn)品場(chǎng)景，降低流失。
• 對(duì)于存量用戶(hù)：全局搜索、列表篩選、信息分類(lèi)等可以提供更穩(wěn)定的定位體驗(yàn)，有助于加強(qiáng)用戶(hù)粘性，提升轉(zhuǎn)化概率。

如下圖在千帆易銷(xiāo)小程序部分定位方式的效果，定位方式嵌套使用，比如在解決方案場(chǎng)景化的定位過(guò)程中，同時(shí)提供了推薦和篩選等來(lái)增強(qiáng)方案定位效果。

不同的定位方式

3. 信息組合設(shè)計(jì)

理順關(guān)鍵信息組合，加深業(yè)務(wù)感召力。

（1）從信息組合視角塑造整體感

每一類(lèi)信息都有其特點(diǎn)，要盡可能選取最適合的信息組合來(lái)最大化提升業(yè)務(wù)感知，搭建適用的信息組合。通常信息組合有以下四類(lèi)：

不同的信息類(lèi)型

在千帆易銷(xiāo)小程序改版前，提供了商品的簡(jiǎn)介、交付信息、咨詢(xún)聯(lián)系人、解決方案、客戶(hù)案例、售賣(mài)支持、物料等信息。

我們?cè)谛掳姹狙a(bǔ)充了商品的優(yōu)勢(shì)和價(jià)值、適用場(chǎng)景、銷(xiāo)售機(jī)會(huì)、銷(xiāo)售政策等售賣(mài)說(shuō)明類(lèi)信息，從整體上豐富和完善了商品信息組合，增強(qiáng)了對(duì)用戶(hù)的吸引力。

改版前后的信息差異

（2）提供差異化信息表達(dá)，加深印象

信息表達(dá)的要點(diǎn)是直觀、清晰、高效，對(duì)于信息類(lèi)型多樣化的頁(yè)面，可以通過(guò)差異化信息表達(dá)，加深用戶(hù)印象，加強(qiáng)信息傳達(dá)效果。下圖是在易銷(xiāo)設(shè)計(jì)中使用的信息表達(dá)圖譜，有助于我們?cè)忈屵@種印象做法。

差異化信息表達(dá)

4. 場(chǎng)景化內(nèi)容設(shè)計(jì)

貼近真實(shí)用戶(hù)場(chǎng)景，提供針對(duì)性?xún)?nèi)容。

（1）情境化提供所需內(nèi)容

對(duì)于內(nèi)容數(shù)量較多的場(chǎng)景，諸如列表頁(yè)、產(chǎn)品頁(yè)、詳情頁(yè)等內(nèi)容頁(yè)面，如何提供內(nèi)容則非常重要。

在千帆易銷(xiāo)小程序中，我們對(duì)于解決方案和案例提供了行業(yè)情境的區(qū)分，此外還提供了按照角色提供，以及按照使用流程提供等情境化方式。從而加強(qiáng)文檔物料的快速感知，方便用戶(hù)按相應(yīng)情境使用，提升導(dǎo)航效率。

情境化信息設(shè)計(jì)

（2）大顆粒場(chǎng)景容器聚合內(nèi)容

對(duì)于場(chǎng)景，存在不同的顆粒，大顆粒的場(chǎng)景容器，信息層級(jí)更多，信息表達(dá)也更加豐富，所以更需要精心設(shè)計(jì)。比如解決方案以及專(zhuān)題，均融合了多種場(chǎng)景的容器形式，它們最大的特點(diǎn)是“匯聚”。

在這類(lèi)大顆粒場(chǎng)景容器中，需要傳達(dá)其價(jià)值點(diǎn)、內(nèi)容包和聯(lián)絡(luò)線(xiàn)。

• 價(jià)值點(diǎn)：提煉具有感召力的文案；
• 內(nèi)容包：提供強(qiáng)相關(guān)的內(nèi)容組合；
• 聯(lián)絡(luò)線(xiàn)：實(shí)現(xiàn)大顆粒的商務(wù)接觸和商機(jī)轉(zhuǎn)化。

大顆粒場(chǎng)景容器

如下圖是易銷(xiāo)解決方案場(chǎng)景和專(zhuān)題場(chǎng)景的價(jià)值點(diǎn)/內(nèi)容包/聯(lián)絡(luò)線(xiàn)的設(shè)計(jì)，沉浸式的內(nèi)容交互保證用戶(hù)快捷觸達(dá)核心價(jià)值，同時(shí)聯(lián)絡(luò)線(xiàn)的指引暗含其中，加強(qiáng)了用戶(hù)轉(zhuǎn)化。

千帆易銷(xiāo)小程序大顆粒場(chǎng)景容器

5. 效率提升設(shè)計(jì)

連貫用戶(hù)操作觸點(diǎn)，提升使用效率。

在設(shè)計(jì)中，需要綜合場(chǎng)景流程觸點(diǎn)進(jìn)行有效銜接，從而貫通流程體驗(yàn)，提升用戶(hù)總體使用效率。這個(gè)環(huán)節(jié)可以在前四步的過(guò)程中同步開(kāi)展，并在設(shè)計(jì)進(jìn)入后期時(shí)再次集中開(kāi)展，確保全流程、全場(chǎng)景、全周期覆蓋。

（1）連通流程銜接點(diǎn)，打造無(wú)縫體驗(yàn)

采用銜接流程節(jié)點(diǎn)、縮短流程路徑、邊界節(jié)點(diǎn)兜底等舉措來(lái)提升效率，提供沉浸式無(wú)縫體驗(yàn)。

銜接流程節(jié)點(diǎn)：

• 對(duì)于使用過(guò)程，提供返回首屏/返回首頁(yè)/吸頂?shù)?，有效銜接用?hù)返回流程。
• 對(duì)于下鉆類(lèi)操作，在返回初始頁(yè)面時(shí)提供錨點(diǎn)定位，方便用戶(hù)接續(xù)操作

縮短操作路徑：

• 通過(guò)浮窗提供關(guān)聯(lián)內(nèi)容快速觸達(dá)，協(xié)助用戶(hù)快速完成關(guān)聯(lián)信息定位。
• 通過(guò)橫向滑動(dòng)查看同類(lèi)型內(nèi)容，便于比對(duì)和加深首尾效應(yīng)。

邊界節(jié)點(diǎn)兜底：

• 對(duì)于初始頁(yè)面/無(wú)資源頁(yè)面提供空狀態(tài)引導(dǎo)
• 對(duì)于搜索/篩選無(wú)結(jié)果場(chǎng)景提供快反饋途徑等。

沉浸式無(wú)縫體驗(yàn)

（2）拉通信息容器交互，提升信息獲取效果

對(duì)于信息，既要考慮其特性，也要兼顧共性。小程序中大量使用卡片、列表、對(duì)話(huà)框等容器，而這些信息容器可以通過(guò)標(biāo)簽化、統(tǒng)一樣式、突出重點(diǎn)、快捷聯(lián)動(dòng)等交互方式，提升信息交互效率。

以千帆易銷(xiāo)卡片設(shè)計(jì)為例：對(duì)商品、解決方案、文檔等多種核心信息卡片樣式，通過(guò)拉通標(biāo)簽、文本、圖標(biāo)、按鈕等多種組成元素，加強(qiáng)卡片信息掃描的統(tǒng)一性和交互的一致性。

千帆易銷(xiāo)小程序信息容器設(shè)計(jì)

（3）提供快捷分享，提升多端聯(lián)動(dòng)效率

小程序一個(gè)重要的優(yōu)勢(shì)在于微信生態(tài)，有必要充分利用微信生態(tài)，借力發(fā)力，實(shí)現(xiàn)更好的產(chǎn)品觸達(dá)效果。小程序分享，關(guān)鍵在于要快捷，同時(shí)要協(xié)同多端聯(lián)動(dòng)。

首先，提供統(tǒng)一的分享入口并引導(dǎo)用戶(hù)完成前置的相關(guān)操作，可以通過(guò)提供初次引導(dǎo)以及明顯的懸浮按鈕等方式來(lái)加強(qiáng)用戶(hù)對(duì)分享的感知和了解。

其次，給用戶(hù)明確的分享牽引，提升用戶(hù)分享意愿。

最后，要考慮多端分享使用聯(lián)動(dòng)，小程序的分享不僅僅在于移動(dòng)端，還有大量的pc端使用環(huán)節(jié)，需要有效的聯(lián)動(dòng)。

小程序分享的三個(gè)關(guān)鍵

千帆易銷(xiāo)小程序的分享流程是這樣的：

1. 在分享前置階段：提供統(tǒng)一的常駐入口并引導(dǎo)用戶(hù)完成預(yù)前的操作；
2. 分享中給予引導(dǎo)和輔助：提供用戶(hù)明確的分享牽引，提升用戶(hù)分享意愿；
3. 分享后可在PC端快捷下載使用：打通PC端物料的使用流程，完成物料下載使用。

通過(guò)貫通分享前、中、后環(huán)節(jié)，提升用戶(hù)分享使用效率。

千帆易銷(xiāo)小程序分享流程設(shè)計(jì)

三、總結(jié)

小程序設(shè)計(jì)要貼合其輕量、聚焦、快捷的特點(diǎn)，千帆小程序設(shè)計(jì)方法核心在于通過(guò)一個(gè)系統(tǒng)性的設(shè)計(jì)框架來(lái)貫通小程序設(shè)計(jì)流程，減少設(shè)計(jì)阻塞，提升小程序設(shè)計(jì)交付的質(zhì)量和效率。

小程序設(shè)計(jì)是一個(gè)不斷創(chuàng)新和發(fā)展的設(shè)計(jì)領(lǐng)域，我們也會(huì)不斷的拓展和完善小程序設(shè)計(jì)方法的內(nèi)涵，打造更先進(jìn)更具創(chuàng)造力的方法論。