編輯導(dǎo)語(yǔ)：小程序這個(gè)項(xiàng)目在前幾年出來(lái)后，就一直不斷的發(fā)展，從剛開(kāi)始的小程序小游戲到如今的很多APP都開(kāi)展小程序項(xiàng)目，小程序在設(shè)計(jì)上也有很多需要注意的方式；本文是作者結(jié)合工作設(shè)計(jì)中遇到的問(wèn)題，總結(jié)一份比較全面的小程序設(shè)計(jì)指南，我們一起來(lái)看一下。

最近做的都是小程序的項(xiàng)目，小程序設(shè)計(jì)進(jìn)一步的研究的時(shí)候，發(fā)現(xiàn)現(xiàn)在關(guān)于小程序的文章很少，也不全面。

目前大部分的問(wèn)題通過(guò)微信開(kāi)放社區(qū)，所以來(lái)結(jié)合官方指南和文章資料，結(jié)合工作設(shè)計(jì)中遇到的問(wèn)題，總結(jié)一份比較全面的小程序設(shè)計(jì)指南，希望可以幫助到大家。

一、淺談小程序

1. 小程序的定義

小程序是一種即用即走，無(wú)需下載的手機(jī)應(yīng)用，和APP不同，用戶(hù)不用擔(dān)心會(huì)占用手機(jī)內(nèi)存的問(wèn)題，用戶(hù)可以直接通過(guò)掃一掃或附近搜索即可使用。

小程序刨除一切繁雜的程序，將用戶(hù)的操作變得更加靈活快捷，大大提高了用戶(hù)體驗(yàn)，使用量也大大增加。

2. 小程序的發(fā)展

2016年1月11日，2016微信公開(kāi)課PRO版在廣州舉行，“微信之父”張小龍首次公開(kāi)演講，宣布微信公眾號(hào)將推出“應(yīng)用號(hào)”，通過(guò)公眾號(hào)完成一些App的部分功能。

2016年11月3日晚間，微信團(tuán)隊(duì)宣布：微信小程序正式開(kāi)放公測(cè)。

2017年9月20日，支付寶小程序向用戶(hù)開(kāi)放公測(cè)。

2018年7月，百度AI開(kāi)發(fā)者大會(huì)上，百度宣布百度智能小程序正式上線。

2019年6月1日，QQ小程序在安卓的新版QQ上如期上線，5天后，正式登陸 iOS 版手機(jī)QQ；至此，QQ小程序完成全面上線。

3. 小程序的現(xiàn)狀

從最早的微信到現(xiàn)在，支付寶小程序、百度小程序、抖音小程序，幾大巨頭都布局了小程序。

主流小程序平臺(tái)網(wǎng)絡(luò)關(guān)注度差異較大，微信小程序的網(wǎng)絡(luò)關(guān)注度最高，其次是百度小程序和支付寶小程序。

對(duì)比用戶(hù)認(rèn)知來(lái)看，微信小程序以分享鏈接出現(xiàn)，百度小程序是搶紅包平臺(tái)，支付寶小程序是搶特價(jià)和抽獎(jiǎng)平臺(tái)等;小程序平臺(tái)網(wǎng)絡(luò)關(guān)注度差異折射用戶(hù)對(duì)小程序平臺(tái)生態(tài)的認(rèn)知。

1）微信小程序

微信作為國(guó)民社交軟件，日活用戶(hù)已達(dá)3億，這無(wú)疑是巨大的用戶(hù)流量聚集地，對(duì)商家的吸引程度可想而知，我們接下來(lái)也是按照微信小程序?yàn)槔齺?lái)逐步講解。

開(kāi)源文檔

微信官方文檔：https://developers.weixin.qq.com/miniprogram/design/

特點(diǎn)：依附微信強(qiáng)社交模式，引流能力強(qiáng)，流失率低，推廣迅速。

量級(jí)：月活10億。

2）百度智能小程序

百度作為中國(guó)最大的搜索引擎工具，有天然的數(shù)據(jù)支撐。百度每日的搜索量可達(dá)到幾十個(gè)億，又是一個(gè)巨大的流量地；此外，基于產(chǎn)品的搜索特性，百度小程序能精準(zhǔn)覆蓋目標(biāo)用戶(hù)；通過(guò)小程序?yàn)橛脩?hù)提供信息與服務(wù)，通過(guò)提升整體的服務(wù)效率實(shí)現(xiàn)用戶(hù)留存。

開(kāi)源文檔：

百度-智能小程序設(shè)計(jì)規(guī)范：https://smartprogram.baidu.com/docs/design/overview/introduction/

特點(diǎn)：基于百度搜索引擎的優(yōu)勢(shì)，增加產(chǎn)品詞的優(yōu)化曝光。

量級(jí)：月活5億。

3）抖音小程序

抖音小程序開(kāi)發(fā)基于字節(jié)跳動(dòng)客戶(hù)，面向字節(jié)跳動(dòng)所有產(chǎn)品線用戶(hù)（包括抖音、今日頭條等），不同小程序/小游戲滿(mǎn)足不同種類(lèi)用戶(hù)需求。

支持小游戲和小程序產(chǎn)品形態(tài)，支持個(gè)人與企業(yè)開(kāi)發(fā)者，只要有優(yōu)質(zhì)內(nèi)容或優(yōu)質(zhì)服務(wù)；產(chǎn)品形態(tài)與接口形式適配行業(yè)標(biāo)準(zhǔn)，最大程度減少開(kāi)發(fā)者開(kāi)發(fā)成本。

開(kāi)源文檔：

字節(jié)小程序：https://microapp.bytedance.com/docs/zh-CN/mini-app/design/design-guidelines/Design-guidelines

特點(diǎn)：旨在利用優(yōu)質(zhì)內(nèi)容所關(guān)聯(lián)和產(chǎn)生的使用場(chǎng)景進(jìn)行小程序?qū)Я?，解決開(kāi)發(fā)者流量與轉(zhuǎn)化困擾。

量級(jí)：月活9億。

4）支付寶小程序

支付寶小程序依托支付寶的商業(yè)和生活服務(wù)基因，小程序細(xì)分行業(yè)分布也以生活服務(wù)、金融保險(xiǎn)和電商等小程序?yàn)橹?；同時(shí)支付寶成熟的信用體系也為商家提供了類(lèi)似于免押租賃等玩法，借助芝麻信用、螞蟻花唄等功能為流量變現(xiàn)創(chuàng)造更多的想象空間。

開(kāi)源文檔：

支付寶小程序設(shè)計(jì)規(guī)范：https://docs.alipay.com/mini/design

特點(diǎn)：在組件上采用了此前成熟的Ant Design 設(shè)計(jì)，在開(kāi)放API上則面向自身特色能力來(lái)封裝，在框架方面采用開(kāi)源的React/webpack等技術(shù)為基礎(chǔ)，結(jié)合了支付寶自身的多年技術(shù)沉淀來(lái)實(shí)現(xiàn)。

量級(jí)：月活7億。

4. 小程序的類(lèi)型

裂變型：

裂變型小程序是為我們其他小程序，在短期內(nèi)提供大量流量的；比如跳一跳娛樂(lè)游戲類(lèi)的小程序，還有電商裂變的成功典范可以屬拼多多。

針對(duì)于裂變型的小程序來(lái)說(shuō)，裂變點(diǎn)就是痛點(diǎn)，除了產(chǎn)品的主功能，小程序的裂變?cè)O(shè)計(jì)為什么要用戶(hù)裂變？比如拼多多，用戶(hù)為了零元購(gòu)商品才分享的，并且?guī)兔车娜艘蚕肓阍蒙唐贰?/p>

拼多多：

• 缺點(diǎn)：在裂變后幾乎是無(wú)法使用，產(chǎn)品的擴(kuò)展性差。
• 優(yōu)點(diǎn)：用戶(hù)流量來(lái)取快、用戶(hù)路徑可以達(dá)到最短。
• 設(shè)計(jì)點(diǎn)：考慮最優(yōu)的用戶(hù)裂變路徑。

留存型：

小程序一直是用完即走的使用體驗(yàn)，留存型小程序是我們用來(lái)沉淀客戶(hù)的；需要我們結(jié)合自身的產(chǎn)品，發(fā)掘能沉淀目標(biāo)客戶(hù)的場(chǎng)景，一般需要結(jié)合原有APP來(lái)開(kāi)發(fā)，開(kāi)發(fā)一款對(duì)用戶(hù)有價(jià)值、簡(jiǎn)單易上手的小程序。

可以從這幾個(gè)方面來(lái)考慮：

• 強(qiáng)運(yùn)營(yíng)：一個(gè)小程序能給用戶(hù)提供的能量畢竟是有限的，現(xiàn)在競(jìng)品太多，如果不能持續(xù)給用戶(hù)刺激，沉寂是早晚的事；所以電商產(chǎn)品會(huì)通過(guò)優(yōu)惠券、分享立減、拼團(tuán)來(lái)刺激用戶(hù)消費(fèi)。
• 搭建激勵(lì)體系：針對(duì)用戶(hù)的損失厭惡，建立用戶(hù)的激勵(lì)體系——如利用積分商城，引導(dǎo)用戶(hù)通過(guò)簽到、消費(fèi)、分享各種行為獎(jiǎng)勵(lì)用戶(hù)，增加用戶(hù)的離開(kāi)成本。
• 社區(qū)：基于微信的社交基礎(chǔ)上，把微信群建立到小程序里，可以長(zhǎng)期培養(yǎng)用戶(hù)的使用習(xí)慣，而且可以利用社交的互動(dòng)性，低成本的完成裂變轉(zhuǎn)化。

產(chǎn)品型：

產(chǎn)品型的小程序一般是有了APP的商家建立小程序，是為了彼此相互融合，相互促進(jìn)；因?yàn)樾〕绦蜷_(kāi)發(fā)成本更低，更多曝光的機(jī)會(huì)；產(chǎn)品型的小程序設(shè)計(jì)一般是照搬全部，或者精簡(jiǎn)設(shè)計(jì)，一般要結(jié)合商家業(yè)務(wù)來(lái)判斷。

如果對(duì)于一些垂直品類(lèi)的產(chǎn)品，像馬蜂窩和攜程旅游將酒店預(yù)訂、景點(diǎn)門(mén)票預(yù)訂、周邊游、租車(chē)包車(chē)游等各項(xiàng)服務(wù)都做了一個(gè)功能拆分，生成的了各項(xiàng)小程序的入口，更好的將服務(wù)垂直，縮短產(chǎn)品和業(yè)務(wù)觸達(dá)用戶(hù)的渠道，自然轉(zhuǎn)化率更高。

對(duì)于想為了借助微信這一大流量平臺(tái)發(fā)展的APP可以照搬APP那一套。

工具型：

在小程序中工具型是最符合“用完即走”這個(gè)理念的，就像家里的工具一樣想要的時(shí)候拿出來(lái)；比如識(shí)圖、查公交線路、寄快遞、抽獎(jiǎng)等小程序，只要打開(kāi)對(duì)應(yīng)的小程序就可以了，不用的時(shí)候也不占用內(nèi)存；還有一種本地服務(wù)小程序，借助“附近的小程序”功能，為周邊提供便利服務(wù)，如上門(mén)維修、家電回購(gòu)、本地商圈等等小程序。

工具型的小程序關(guān)注點(diǎn)在于功能本身，解決人們的某一個(gè)需求，讓他們更便捷高效。

在設(shè)計(jì)的時(shí)候要注意視覺(jué)和結(jié)構(gòu)和信息布局的簡(jiǎn)潔，然后考慮易懂先考慮功能理解度和識(shí)別性，將功能產(chǎn)品化快速提高用戶(hù)的效率，然后引導(dǎo)用戶(hù)快捷完成任務(wù)。

5. 小程序與APP的區(qū)別

1）開(kāi)發(fā)技術(shù)區(qū)別

APP開(kāi)發(fā)根據(jù)開(kāi)發(fā)方式可分為原生APP和Web APP，APP主流開(kāi)發(fā)操作系統(tǒng)有安卓和IOS。

安卓版本原生APP的開(kāi)發(fā)語(yǔ)言為JAVA，IOS版原生APP的開(kāi)發(fā)語(yǔ)言為Objective-C。

安卓版本W(wǎng)eb APP的開(kāi)發(fā)語(yǔ)言為JAVA+HTML，IOS 版Web APP的開(kāi)發(fā)語(yǔ)言為Objective-C+HTML。

小程序是基于騰訊、今日頭條、百度等平臺(tái)的小程序開(kāi)發(fā)框架進(jìn)行開(kāi)發(fā)，開(kāi)發(fā)技術(shù)類(lèi)似HTML。

2）用戶(hù)群體

載體不同則用戶(hù)群體不同，小程序是基于微信平臺(tái)的應(yīng)用，用戶(hù)群僅限微信用戶(hù)，截至目前也就是微信10億+的用戶(hù)量；而APP則是上架在App Store及Android應(yīng)用市場(chǎng)，面向全球擁有智能手機(jī)的用戶(hù)，也就是33億+的用戶(hù)量。

3）下載及安裝

APP：一直存在手機(jī)中會(huì)占用空間，太多的APP可能會(huì)導(dǎo)致內(nèi)存不足，總是清理緩存。

小程序：因?yàn)椴恍枰惭b，占用內(nèi)存空間忽略不計(jì)。

4）開(kāi)發(fā)成本

APP：APP在實(shí)際開(kāi)發(fā)中，它需要開(kāi)發(fā)安卓系統(tǒng)和iOS系統(tǒng)兩種版本，所用到開(kāi)發(fā)語(yǔ)言不同，同時(shí)還需要根據(jù)手機(jī)的不同尺寸進(jìn)行適配，開(kāi)發(fā)成本較高；一款完善的雙平臺(tái)APP平均的開(kāi)發(fā)周期約3個(gè)月。

小程序：開(kāi)發(fā)成本低，一次開(kāi)發(fā)就可以適配所有手機(jī)；平均開(kāi)發(fā)周期約2周。

5）產(chǎn)品定位

APP：原生App的內(nèi)存就不受控制，那么內(nèi)容框架可以根據(jù)產(chǎn)品定位隨意增添，可發(fā)揮的空間非常大，一些電商、社區(qū)等等無(wú)論多么復(fù)雜的應(yīng)用都能一一實(shí)現(xiàn)。

小程序：因?yàn)閮?nèi)存受限的控制，導(dǎo)致內(nèi)容框架不同，在小程序上功能架構(gòu)設(shè)計(jì)的比較簡(jiǎn)單，符合輕量化、“用完即走”；功能比較受限，因?yàn)榻涌诠δ苡邢蕖?/p>

現(xiàn)在小程序現(xiàn)有接口：

如上：豆瓣原生app包含了首頁(yè)-書(shū)影音-小組討論-市集-我的等多個(gè)內(nèi)容板塊，但是小程序只保留了豆瓣最核心的部分-電影評(píng)分的欄目，將其商城和社區(qū)的模塊全部砍掉了，只是將小程序作為一個(gè)資訊型的瀏覽窗口。

6）基礎(chǔ)框架

其實(shí)移動(dòng)端產(chǎn)品的設(shè)計(jì)規(guī)范和原則大致是相同的，但是因?yàn)槭苤朴谖⑿判〕绦虻目蚣?，小程序產(chǎn)品與App產(chǎn)品在部分版塊的表現(xiàn)形式上會(huì)存在一些差異：如頂部導(dǎo)航欄區(qū)域等。

其實(shí)移動(dòng)端產(chǎn)品的設(shè)計(jì)規(guī)范和原則大致是相同的，但是因?yàn)槭苤朴谖⑿判〕绦虻目蚣埽〕绦虍a(chǎn)品與App產(chǎn)品在部分版塊的表現(xiàn)形式上會(huì)存在一些差異，主要體現(xiàn)在以下幾個(gè)方面：

頂部導(dǎo)航欄區(qū)域：小程序的導(dǎo)航欄官方指定了兩種樣式，一深一淺，背景色可自定義，遵循“導(dǎo)航明確、來(lái)去自如”的原則。

頂部導(dǎo)航欄區(qū)域：底部標(biāo)簽欄是移動(dòng)端產(chǎn)品的主要導(dǎo)航方式，主要表示用戶(hù)當(dāng)前所在的位置，所以會(huì)有選中與未選中兩種切換方式。

• App：可支持最少2個(gè)，最多5個(gè)的tab切換，圖標(biāo)大小以及底部標(biāo)簽欄高度可自定義。
• 小程序：也可支持最少2個(gè)，最多5個(gè)的tab切換，使用原生控件時(shí)，要遵從 icon 尺寸81*81px。

拖動(dòng)排序：

• App：流暢、體驗(yàn)佳，例如發(fā)朋友圈時(shí)拖動(dòng)照片排序。
• 小程序：除非必要，否則不建議使用拖動(dòng)排序。圖片和列表拖動(dòng)在 Android機(jī)型上體驗(yàn)不夠，會(huì)有卡頓的情況。

消息推送：

• APP：會(huì)隔三差五給用戶(hù)推送廣告，太多未讀提示會(huì)逼死強(qiáng)迫癥。
• 小程序：不允許主動(dòng)給用戶(hù)發(fā)送廣告，僅能回復(fù)模版消息。

7）用戶(hù)體驗(yàn)

打開(kāi)方式：

• APP：直接打開(kāi)。
• 小程序：從微信首頁(yè)，下拉，點(diǎn)擊打開(kāi)。

頁(yè)面流暢度：

• APP：界面切換的流暢度以及加載數(shù)據(jù)的響應(yīng)速度都會(huì)比小程序更好一些。
• 小程序：當(dāng)在比較深的頁(yè)面上，或者不是原生的頁(yè)面加載時(shí)間會(huì)比較長(zhǎng)，會(huì)卡頓。

氛圍營(yíng)造：

• APP：動(dòng)畫(huà)不受限，活動(dòng)運(yùn)營(yíng)比較好營(yíng)造氛圍感，帶給用戶(hù)非常友好的沉浸感和歸屬感。
• 小程序：受內(nèi)存的影響，而且小程序都是輕量化的功能，動(dòng)畫(huà)的展示元素會(huì)非常的少，因而在界面會(huì)覺(jué)得很平淡，像是工具型產(chǎn)品。

引流轉(zhuǎn)化：

• APP：在原生APP里可以開(kāi)發(fā)客服，或者直接轉(zhuǎn)化；APP到小程序里可以直接跳轉(zhuǎn)。
• 小程序：小程序的虛擬支付會(huì)影響iOS用戶(hù)的轉(zhuǎn)化，并影響整個(gè)業(yè)務(wù)的轉(zhuǎn)化；客服也是需要關(guān)閉小程序單獨(dú)對(duì)話(huà)，與APP的響應(yīng)需要一個(gè)繁瑣的步驟。

8）運(yùn)營(yíng)推廣

APP：推廣新用戶(hù)需要下載APP，需要占用手機(jī)內(nèi)存，推廣率低。但是APP的開(kāi)發(fā)自由度高，推廣方式不受限制，渠道多，轉(zhuǎn)化率高

小程序：依靠微信平臺(tái)，可以通過(guò)掃描二維碼、搜索、發(fā)送好友和朋友圈，推廣率高；雖然推廣率高，但是因?yàn)楣俜降母鞣N限制，增加營(yíng)銷(xiāo)難度，轉(zhuǎn)化率低。

二、如何去設(shè)計(jì)小程序

微信小程序的官方設(shè)計(jì)規(guī)范，在微信的官方文檔里都有全面的講解微信小程序的設(shè)計(jì)指南，我就不多贅述了，按照官方的來(lái)對(duì)于設(shè)計(jì)一個(gè)基本的小程序是完全夠用的。

1. 遵守微信小程序設(shè)計(jì)指南

友好禮貌、清晰明確、便捷優(yōu)雅、統(tǒng)一穩(wěn)定：

2. 突破嘗試設(shè)計(jì)邊界

在最基礎(chǔ)的設(shè)計(jì)，我想跟大家聊一下，在微信的設(shè)計(jì)規(guī)范內(nèi)如何進(jìn)行進(jìn)階設(shè)計(jì)，這也是我實(shí)際工作中探索的結(jié)果，希望能給大家更多的啟發(fā)。

1）Navigation Bar

官方指南：開(kāi)發(fā)者可根據(jù)自身功能設(shè)計(jì)需要在頁(yè)面內(nèi)添加自有導(dǎo)航。并保持不同頁(yè)面間導(dǎo)航一致，指向清晰，有路可退。

受限于手機(jī)屏幕尺寸的限制，小程序頁(yè)面的導(dǎo)航應(yīng)盡量簡(jiǎn)單；建議開(kāi)發(fā)者設(shè)計(jì)的自有導(dǎo)航樣式與微信官方小程序菜單樣式保持一定差異，以便區(qū)分。

在根據(jù)官方的指導(dǎo)下我們?nèi)绾芜M(jìn)行設(shè)計(jì)呢？

普通換色：

導(dǎo)航欄設(shè)計(jì)邊緣探索：

需要注意的是：自定義導(dǎo)航欄之后要加微信默認(rèn)的下拉刷新會(huì)出現(xiàn)一個(gè)問(wèn)題：下拉刷新組件會(huì)出現(xiàn)在導(dǎo)航欄上面！所以如果你需要做自定義導(dǎo)航欄，就需要自定義下拉刷新；下面提供luyimei微信小程序下拉刷新組件。

2）Tabbar

官方指南：開(kāi)發(fā)者可為小程序頁(yè)面添加標(biāo)簽分頁(yè)（Tab）導(dǎo)航。標(biāo)簽分頁(yè)欄可固定在頁(yè)面頂部或者底部，便于用戶(hù)在不同的分頁(yè)間做切換。

標(biāo)簽數(shù)量不得少于2個(gè)，最多不得超過(guò)5個(gè)，為確保點(diǎn)擊區(qū)域，建議標(biāo)簽數(shù)量不超過(guò)4項(xiàng)；一個(gè)頁(yè)面也不應(yīng)出現(xiàn)一組以上的標(biāo)簽分頁(yè)欄。

底部標(biāo)簽欄：

按照產(chǎn)品需求也可以直接去掉底部導(dǎo)航欄。

其他導(dǎo)航欄設(shè)計(jì)的例子：

頂部標(biāo)簽欄：

頂部標(biāo)簽分頁(yè)欄顏色可自定義。在自定義顏色選擇中，務(wù)必注意保持分頁(yè)欄標(biāo)簽的可用性、可視性和可操作性。

3）加載動(dòng)畫(huà)

啟動(dòng)頁(yè)加載樣式

微信官方小程序里啟動(dòng)頁(yè)加載樣式是由微信官方提供，只需要提供logo就可以。

頁(yè)面下拉刷新加載：

頁(yè)面下拉刷新加載雖然微信官方文檔說(shuō)，開(kāi)發(fā)者無(wú)需自行開(kāi)發(fā)，但是想要更改loading也是可以的；現(xiàn)在小程序開(kāi)發(fā)的比較完善，盡量用小程序標(biāo)準(zhǔn)走，自定義開(kāi)發(fā)有可能會(huì)破壞小程序的用戶(hù)體驗(yàn)。

頁(yè)面內(nèi)加載反饋、模態(tài)加載和其余的加載樣式都可以根據(jù)需求設(shè)計(jì)，新手可以參考著官方指南來(lái)。

加載反饋?zhàn)⒁馐马?xiàng)：

若載入時(shí)間較長(zhǎng)，應(yīng)提供取消操作，并使用進(jìn)度條顯示載入的進(jìn)度。

載入過(guò)程中，應(yīng)保持動(dòng)畫(huà)效果 ; 無(wú)動(dòng)畫(huà)效果的加載很容易讓人產(chǎn)生該界面已經(jīng)卡死的錯(cuò)覺(jué)。

不要在同一個(gè)頁(yè)面同時(shí)使用超過(guò)1個(gè)加載動(dòng)畫(huà)。

4）減少輸入

在頁(yè)面設(shè)計(jì)的時(shí)候盡量考慮到手機(jī)鍵盤(pán)輸入困難或者容易引起誤操作，小程序的設(shè)計(jì)可以利用一些接口來(lái)優(yōu)化用戶(hù)體驗(yàn)。

模糊搜索：

遇到必須輸入的場(chǎng)景可以盡量讓用戶(hù)選擇，讓比如搜索時(shí)的歷史記錄和模糊搜索，而減少或避免不必要的鍵盤(pán)輸入，可以大大減少用戶(hù)的輸入成本。

表單輸入：

復(fù)雜表單的輸入會(huì)給用戶(hù)帶來(lái)心理負(fù)擔(dān)，在遇到大量輸入的場(chǎng)景下，可以把輸入換成選擇，盡可能的減少操作；例如掃描銀行卡可以只需點(diǎn)擊按鈕，采用攝像頭識(shí)別接口來(lái)識(shí)別信息。

除此之外微信團(tuán)隊(duì)還對(duì)外開(kāi)放例如地理位置接口等多種微信小程序接口 ，充分利用這些接口將大大提高用戶(hù)輸入的效率和準(zhǔn)確性，進(jìn)而優(yōu)化體驗(yàn)。

3. 多端適配

關(guān)于小程序的適配設(shè)計(jì)師不用過(guò)多的關(guān)心，但是可以了解一下。

小程序里的尺寸單位叫 rpx，可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)。在750*1334的設(shè)計(jì)稿里，1px = 1rpx；在小程序里寬度都是750rpx,高度就通過(guò)那個(gè)寬高比獲得，只要涉及具體數(shù)值的高度的都通過(guò)這個(gè)比例計(jì)算就行。

4. 數(shù)據(jù)反饋

小程序的普通數(shù)據(jù)可以通過(guò)“小程序數(shù)據(jù)助手”查看，有特殊觀察的數(shù)據(jù)可以單獨(dú)埋點(diǎn)。

當(dāng)前功能模塊包括數(shù)據(jù)概況、訪問(wèn)基礎(chǔ)分析（用戶(hù)趨勢(shì)、來(lái)源分析、留存分析、時(shí)長(zhǎng)分析、頁(yè)面詳情）、實(shí)時(shí)統(tǒng)計(jì)和用戶(hù)畫(huà)像（年齡性別、省份城市、終端機(jī)型），數(shù)據(jù)與小程序后臺(tái)常規(guī)分析一致。

5. 推薦優(yōu)質(zhì)小程序

1）【疫小搜】

疫情期間產(chǎn)品設(shè)計(jì)師的價(jià)值，可以查看周邊疫情情況，和確診人員到自己的距離。

2）【網(wǎng)易嚴(yán)選】

網(wǎng)易嚴(yán)選的品牌理念是“好的生活，沒(méi)那么貴”。清晰的品牌設(shè)計(jì)，設(shè)計(jì)語(yǔ)言透著追求品質(zhì)生活的態(tài)度。

3）【多抓魚(yú)】

多抓魚(yú)二手書(shū)是一款人性化的二手書(shū)交易市場(chǎng)小程序。

4）【京東良研】

京東良研小程序是專(zhuān)業(yè)調(diào)研及數(shù)據(jù)分析的高效率工具，整體的簡(jiǎn)潔、輕量化的設(shè)計(jì)很符合調(diào)研場(chǎng)景的商務(wù)感。

5）【豆瓣】

豆瓣評(píng)分提供最新的電影介紹及評(píng)論。豆瓣是典型的有情懷，小而美的產(chǎn)品了。

三、你們不知道的小程序

1. 彈窗不能覆蓋導(dǎo)航欄

因?yàn)樵谛〕绦蚶飳?dǎo)航欄的層級(jí)是最高的，即使隱藏導(dǎo)航欄Title Bar也是依然存在的。

半屏彈窗

除了官方指南里的模態(tài)對(duì)話(huà)框，也可以嘗試半屏彈窗，一是承載更多信息，二是更好的繼續(xù)流程不被打斷。

活動(dòng)彈窗：

在運(yùn)營(yíng)活動(dòng)中，活動(dòng)彈窗起著活動(dòng)引導(dǎo)，突出重點(diǎn)的作用。這類(lèi)彈窗往往要設(shè)計(jì)的“熱鬧”一些，可以更好的引導(dǎo)用戶(hù)留存裂變。

2. 虛擬支付

微信小程序官方曾發(fā)布過(guò)整改通知，小程序?qū)τ趇OS系統(tǒng)上提供的虛擬物品不能展現(xiàn)不能出現(xiàn)支付、購(gòu)買(mǎi)、獲取VIP、開(kāi)通會(huì)員、價(jià)格、iOS限制、蘋(píng)果系統(tǒng)限制等購(gòu)買(mǎi)相關(guān)字眼；也不能出現(xiàn)引導(dǎo)字眼，比如掃描二維碼獲??；即使實(shí)際上它們都不可使用，也不得引導(dǎo)至為外部網(wǎng)頁(yè)或App來(lái)實(shí)現(xiàn)支付功能。

也就是說(shuō)在蘋(píng)果設(shè)備（IOS）系統(tǒng)中，小程序中不能進(jìn)行虛擬物品的支付，比如積分、購(gòu)買(mǎi)課程、打賞等等，對(duì)于在線教育而言，由于課為售賣(mài)的主體，與課程售賣(mài)相關(guān)的購(gòu)買(mǎi)、營(yíng)銷(xiāo)推廣（秒殺、砍價(jià)等）等都產(chǎn)生了一系列因虛擬支付衍生的問(wèn)題。

目前沒(méi)有特別完美的解決方案，要不犧牲用戶(hù)體驗(yàn)曲線救國(guó)，要不冒著小程序被封的風(fēng)險(xiǎn)頂風(fēng)作案。

1）按照規(guī)定

直接關(guān)閉小程序iOS支付，這種是最合規(guī)但是也是最無(wú)奈的方式，“親寶故事”就是采用這種方式，用ios打開(kāi)界面入口都跟安卓不一樣；然而實(shí)際上他只是把入口給隱藏了，通過(guò)安卓手機(jī)分享依然可以打開(kāi)被隱藏的收費(fèi)信息，當(dāng)然這個(gè)方案對(duì)于沒(méi)有APP的產(chǎn)品損失還是很大的。

2）曲線救國(guó)

先買(mǎi)后看：

線上課程的話(huà)，可以讓用戶(hù)提前在公眾號(hào)或者社群里跟iOS用戶(hù)解釋為什么不能購(gòu)課，或者是還有哪些途徑可以獲課；其他途徑提前支付，在后端生成驗(yàn)證碼，直接輸入解鎖課程。

虛擬物品轉(zhuǎn)成實(shí)物：

而在ios上，把原本虛擬物品轉(zhuǎn)化成實(shí)物品，比如賣(mài)光盤(pán)，而本質(zhì)上的價(jià)值是音頻本身；如果按節(jié)賣(mài)可能實(shí)物成本及配送費(fèi)過(guò)高，那么在ios上可以按系列專(zhuān)輯打包賣(mài)，使用ios設(shè)備的用戶(hù)只能賣(mài)專(zhuān)輯，買(mǎi)完后可以解鎖該專(zhuān)輯下的所有音頻。

當(dāng)然，這種方式不知道在運(yùn)營(yíng)商是否存在問(wèn)題。

引導(dǎo)其他方式支付：

從官方給出的規(guī)則細(xì)則解讀來(lái)看，這種引導(dǎo)也算是不合規(guī)的，將支付引導(dǎo)去公眾號(hào)、到APP上進(jìn)行，聯(lián)系客服完成支付或購(gòu)買(mǎi)流程；這個(gè)是非常不建議的，一旦被發(fā)現(xiàn)會(huì)有舉報(bào)被封的危險(xiǎn)。

3. 頁(yè)面層級(jí)和邏輯跳轉(zhuǎn)

小程序的頁(yè)面之前的邏輯跳轉(zhuǎn)，最多可以支持10個(gè)層級(jí)。在小程序的開(kāi)發(fā)過(guò)程中會(huì)反復(fù)確認(rèn)頁(yè)面之間的跳轉(zhuǎn)邏輯有有沒(méi)有遺漏；但是會(huì)忽略掉用戶(hù)循環(huán)操作，可能會(huì)造成打開(kāi)頁(yè)面層級(jí)過(guò)多而導(dǎo)致無(wú)法繼續(xù)操作。

即使用戶(hù)打開(kāi)10個(gè)頁(yè)面以?xún)?nèi)5個(gè)以上頁(yè)面，也會(huì)需要連續(xù)按多次“返回”按鈕才可以退出小程序，導(dǎo)致用戶(hù)的體驗(yàn)也相當(dāng)?shù)夭缓谩?/p>

除正常頁(yè)面跳轉(zhuǎn)的邏輯沒(méi)有問(wèn)題之外，在小程序的交互中還需要考慮兩件事，一個(gè)是整個(gè)用戶(hù)點(diǎn)擊的最長(zhǎng)路徑是不是過(guò)長(zhǎng)，二是考慮頁(yè)面流失率的情況下，對(duì)路徑中終端的頁(yè)面導(dǎo)航欄設(shè)計(jì)到首頁(yè)的跳轉(zhuǎn)，即可解決這個(gè)問(wèn)題。

4. 小程序的分享路徑

小程序最大的優(yōu)勢(shì)就是可以分享社交好友，比如看到產(chǎn)品拼單才可以購(gòu)買(mǎi)的話(huà)，用戶(hù)會(huì)積極的邀請(qǐng)自己的好友一起購(gòu)買(mǎi)，達(dá)到快速的裂變，給企業(yè)帶來(lái)巨大的流量；而且按照這個(gè)樣分享路徑推廣的成本是極低的。分享的方式可以是分享朋友圈、二維碼分享、微信分享好友。

5. 一些必須用原生的頁(yè)面

1）掃一掃

目前掃一掃頁(yè)面時(shí)不支持二次設(shè)計(jì)的，必須調(diào)用微信小程序的官方接口。

2）消息通知

現(xiàn)在信息爆炸的時(shí)代，很多信息和彈窗會(huì)給用戶(hù)造成打擾，忽略了消息的本質(zhì)是為了服務(wù)，因此微信對(duì)訂閱消息加了很多限制和優(yōu)化，最主要的便是把選擇權(quán)留給用戶(hù)。

在訂閱消息授權(quán)需要用戶(hù)主動(dòng)點(diǎn)button 觸發(fā)，如果沒(méi)有勾選「總是保持以上選擇，不再詢(xún)問(wèn)」，選擇允許，也只可以收到一條訂閱消息，則每次都會(huì)發(fā)起彈窗詢(xún)問(wèn)；如果用戶(hù)勾選「總是保持以上選擇，不再詢(xún)問(wèn)」，只是不喚起彈窗，但也不是可以無(wú)限次打擾用戶(hù)發(fā)送消息。

長(zhǎng)期訂閱消息目前只對(duì)特定行業(yè)開(kāi)放，如政府民生、金融、醫(yī)療等，一般我們也接觸不到，所以不做贅述。

3）登錄注冊(cè)流程

在微信小程序里想獲取用戶(hù)的信息，不可以登錄小程序后自動(dòng)彈出登錄彈窗；需要用戶(hù)主動(dòng)觸發(fā)登錄按鈕進(jìn)行登錄流程，并且必須為用戶(hù)提供「暫不登錄」的選項(xiàng)。

四、未來(lái)的發(fā)展方向

從小程序鏈接了10多億用戶(hù)，在生活中不停的挖線下場(chǎng)景，解決工作、娛樂(lè)、購(gòu)物多種生活需求。

小程序已經(jīng)融入了我們線下生活，隨著用戶(hù)習(xí)慣的養(yǎng)成，使用頻次和平均時(shí)長(zhǎng)逐漸增加；小程序的快速獲客速度，和極低的開(kāi)發(fā)成本，成為各個(gè)公司的新寵，希望開(kāi)發(fā)新的小程序入口可以快速且單一高效的讓用戶(hù)有一個(gè)更純粹的產(chǎn)品功能體驗(yàn)，同時(shí)也可以對(duì)現(xiàn)有的APP起到引流的目的。

1. 用戶(hù)的留存

針對(duì)小程序的留存一直是開(kāi)發(fā)者非常在乎的問(wèn)題，因?yàn)椴幌馎PP開(kāi)發(fā)者的話(huà)語(yǔ)權(quán)很大；因?yàn)樾〕绦虻钠脚_(tái)性質(zhì)，對(duì)小程序開(kāi)發(fā)進(jìn)行了很多的限制，讓推廣和營(yíng)銷(xiāo)還有轉(zhuǎn)化都增加的了難度。

沒(méi)辦法讓一個(gè)產(chǎn)品孤注一擲的做小程序，目前只能是和APP搭配著來(lái)開(kāi)發(fā)，作為一個(gè)產(chǎn)品功能單一路徑的功能產(chǎn)品。

2. 小程序的設(shè)計(jì)思維

在設(shè)計(jì)小程序時(shí)不能依靠傳統(tǒng)APP的思維去設(shè)計(jì)，按照輕量、社交、價(jià)值、引流、用戶(hù)數(shù)據(jù)和打造小程序生態(tài)環(huán)境。

在設(shè)計(jì)思路上把握設(shè)計(jì)輕量化和用完即走的原則。同時(shí)深挖小程序的用戶(hù)場(chǎng)景，梳理APP中的核心主流功能，弱化次要功能。

依照原有APP去設(shè)計(jì)更符合小程序使用體驗(yàn)，利用好微信的社交特點(diǎn)，融入微信生態(tài)為后期的服務(wù)升級(jí)、轉(zhuǎn)化或者對(duì)接其他矩陣小程序留好余地。

3. 市場(chǎng)背景的機(jī)會(huì)

因?yàn)橐咔楸l(fā)，生鮮電商在寒冬中迎來(lái)了機(jī)會(huì)，給大家養(yǎng)成了消費(fèi)習(xí)慣。

社區(qū)電商更是一個(gè)2-3億的一個(gè)巨大市場(chǎng)，本就是以用戶(hù)為中心，基于體驗(yàn)和分享去中心化的體驗(yàn)?zāi)Ｊ?，在疫情的情況下培養(yǎng)用戶(hù)成本大幅度減少，借助小程序加快向下沉市場(chǎng)滲透的速度。

五、結(jié)語(yǔ)

現(xiàn)在資本也很看好小程序，以后的小程序還會(huì)發(fā)展的越來(lái)越快，設(shè)計(jì)師越早掌握小程序的設(shè)計(jì)語(yǔ)言方法越好。

把這半年來(lái)接觸到的問(wèn)題跟大家在這里分享，還有很多角落問(wèn)題還有待深入了解；隨著微信小程序官方文檔和通知的不斷更新，深入挖掘更深入的場(chǎng)景和進(jìn)行更多全面的探索后，后期還會(huì)繼續(xù)會(huì)跟大家分享。

參考鏈接

https://baijiahao.baidu.com/s?id=1657874055167445885&wfr=spider&for=pc

https://www.chyxx.com/industry/202005/867534.html

http://m.22none.com/pd/1509590.html

 

作者：郝小七，微信公眾號(hào)：七醬設(shè)計(jì)筆記

本文由 @郝小七 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于 CC0 協(xié)議