前言

最近正好在做小程序相關(guān)的項目，發(fā)現(xiàn)現(xiàn)在關(guān)于小程序相關(guān)的文章還比較少，能吸收的運用到實際工作中的技巧也「比較有限」，所以我想著自己來嘗試寫一篇「相對全面和實戰(zhàn)」的文章，來幫助到越來越多做小程序的設(shè)計師們。

小程序的發(fā)展史

• 2017 年 1 月 9 日，張小龍在 2017 微信公開課 Pro 上發(fā)布的微信小程序正式上線。
• 2017 年 1 月 9 日微信小程序平臺正式發(fā)布，在業(yè)界引起很大的轟動。
• 2018 年 2 月，微信官方發(fā)布公告稱：已對涉及假貨高仿、色情低俗和違規(guī)「現(xiàn)金貸」等超過 2000 個微信小程序，進行永久封禁處理。
• 2019 年 8 月 9 日，微信向開發(fā)者發(fā)布新能力公測與更新公告，微信 PC 版新版本中，支持打開聊天中分享的微信小程序。

為什么叫小程序？和蘋果應(yīng)用程序有什么區(qū)別

微信小程序，小程序的一種，英文名 Wechat Mini Program，是一種不需要下載安裝即可使用的應(yīng)用，它實現(xiàn)了應(yīng)用「觸手可及」的夢想，用戶掃一掃或搜一下即可打開應(yīng)用。

小程序能夠通過一套設(shè)計來適配 2 端的，比如 iOS 與 Android 的改版是分別適配了 2 端使用體驗來獨立設(shè)計完成的，而小程序則不同，只需要設(shè)計一套設(shè)計稿，然后適配，節(jié)省了適配的很多復(fù)雜工作，比如安卓端（據(jù)我所知目前市面上有大概 3000 種安卓手機，可想而知適配比 iOS 相對要復(fù)雜很多）。

小程序是一種不需要下載安裝即可隨時用的應(yīng)用，它實現(xiàn)了應(yīng)用「觸手可及」的夢想，用戶掃一掃或者搜一下即可打開應(yīng)用，也體現(xiàn)了「用完即走」的理念，用戶不關(guān)心是否安裝太多應(yīng)用，應(yīng)用無處不在，隨時可用，但無需安裝卸載。

小程序的特點及優(yōu)勢

根據(jù)小程序輕量且用完即走的平臺定位觸手可及、用完即走。

1. 小程序的優(yōu)勢

• 出色的用戶體驗：加載速度快于網(wǎng)頁，可達到近乎原生 App 的操作體驗和流暢度。
• 更低的開發(fā)門檻：一次開發(fā)，多端兼容，免除了對各種手機機型的適配。
• 社交分享屬性：坐擁微信 10.83 億用戶，基于微信強大的社交關(guān)系鏈，可以在微信內(nèi)被便捷的傳播和獲取。
• 更短的服務(wù)路徑：無需下載，通過線下掃碼、社交分享、平臺搜索和附近的小程序等能力，縮短了服務(wù)路徑。

小程序與訂閱號和公眾號在微信中的定位

• 訂閱號：主要偏于為用戶傳達資訊（類似報紙雜志），認證前后都是每天只可以群發(fā)一條消息；
• 服務(wù)號：主要偏于服務(wù)交互（類似銀行，114，提供服務(wù)查詢），認證前后都是每個月可群發(fā) 4 條消息；
• 小程序：是一種新的開放能力，開發(fā)者可以快速的開發(fā)一個小程序。

小程序可以在微信內(nèi)被便捷地獲取和傳播，同時擁有出色的使用體驗。應(yīng)該說承載了一部分 APP 的核心功能于小程序中，比如打車、比如訂餐、比如自行車騎行類等產(chǎn)品。

小程序在設(shè)計初期也承載了一些數(shù)據(jù)收集的目的，比如之前我們開發(fā)一些小程序是用 H5 網(wǎng)頁來寫，整個環(huán)節(jié)不受微信生態(tài)的控制，而一些數(shù)據(jù)上的收集，只能是知道一些相對比較「粗顆?！沟臄?shù)據(jù)，比如用戶的流量的數(shù)據(jù)和一些支付相關(guān)的數(shù)據(jù)，而且 H5 網(wǎng)頁嵌入的話，會涉及到一些加載速度問題，體驗相對不夠流暢，而小程序的誕生則解決了數(shù)據(jù)全流程收集的問題和解決了之前的用戶體驗問題。

1. 小程序如何被用戶發(fā)現(xiàn)

• 任務(wù)欄、發(fā)現(xiàn)-歷史列表
• 群聊、單聊、消息
• 搜索長按識別小程序碼，廣告等
• 開發(fā)鏈接（公眾號、其他小程序、APP）
• 掃碼獲取

小程序的對設(shè)計的影響和趨勢，不同行業(yè)小程序設(shè)計需要考慮的特點

現(xiàn)在各大公司對小程序的設(shè)計要求是什么樣的？

有很多專門服務(wù)小程序的公司比如有贊、比如微盟、比如獲客寶等等，你可以看到未來小程序?qū)谴蟛糠止舅仨氁紤]的解決方案之一，那么不同行業(yè)的小程序在設(shè)計的時候思考點是不同的，我們來分析下。

小程序的設(shè)計思考，需要結(jié)合小程序設(shè)計規(guī)范以及對不同行業(yè)公司小程序進行調(diào)研，進行分析。

1. 出行類-滴滴

滴滴的 APP 與小程序設(shè)計時，考慮到了平臺的特性，更簡單快捷的操作目的地進行叫車服務(wù)，在功能選擇上更加提供核心功能在小程序露出，一些非必須的入口則沒有體現(xiàn)出來，比如消息，掃一掃以及個人中心里的一些功能等，用戶在使用小程序叫車時更加專注。

2. 筆記類

印象筆記 APP 和印象筆記小程序的功能體現(xiàn)，也是有很大的不同，在印象筆記小程序中，只體現(xiàn)了最核心的幾個入口「由我創(chuàng)建」「來自分享」「微信文件」印象筆記的小程序更多的是通過微信這一流量入口，使得用戶能夠及時收集來自朋友的分享筆記以及快速創(chuàng)建筆記；

還有一個很「微信」的功能就是導(dǎo)入微信文件，此功能能夠一鍵導(dǎo)入微信聊天記錄中的一些文件到印象筆記 APP 中，及時保存防止用戶的文件過期無法使用。

3. 新聞類

36Kr 主程序和小程序?qū)Ρ雀用黠@，在 36 氪小程序精簡版，則更加輕量化的體現(xiàn)了主要資訊信息，其他的入口則直接忽略體現(xiàn)出來，把最重要的核心點體現(xiàn)了出來，其他非主要的「干擾」小程序輕量化感受的因素都直接放棄體現(xiàn)。

4. 知識付費類

在主程序與小程序的設(shè)計中，更多的是偏向于核心商業(yè)化部分內(nèi)容作為小程序突出主要信息，比如得到小程序，在底部導(dǎo)航欄中保留了 2 個主應(yīng)用程序中核心的入口「商場」和「課程」。

5. 視頻類

在嗶哩嗶哩小程序中，主要把其核心的兩個主導(dǎo)航分類進行了提取，分別是「熱門」和「追番」，分區(qū)頁面對應(yīng) APP 提取了部分功能到小程序中，我的頁面對應(yīng) APP 只提取了歷史記錄+意見反饋到小程序中；搜索結(jié)果頁對應(yīng) APP 排序方式和篩選部分進行了大量「簡化」；在微信小程序中，不能對內(nèi)容進行點贊和評價。

如何設(shè)計小程序？設(shè)計小程序，需要避免的問題點

1. 小程序官方設(shè)計規(guī)則

（我選取了部分內(nèi)容，更全面的請到官網(wǎng)查看）：https://developers.weixin.qq.com/miniprogram/design

重點突出

流程明確

小程序可設(shè)計區(qū)域

后面我會講解一個小程序適配的方法，這也是設(shè)計師可以控制的區(qū)域。

小程序可設(shè)計區(qū)域

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

2. 設(shè)計小程序時需要避免的坑，以及設(shè)計方法

在適配 2 端時，標題欄位置的文字保持了各端規(guī)范，安卓端保持在左側(cè)，iOS 端在居中位置，且設(shè)計時，需注意 APP 中右上角功能與小程序右上角固定入口的沖突 （當(dāng)然我發(fā)現(xiàn)也有一些安卓端小程序進行了定制設(shè)計）。

右上角的 icon 是全局性入口，不論你是在哪一級頁面，它一直存在。

在做小程序時，遇到一個問題就在于微信要求產(chǎn)品必須直接進入產(chǎn)品，不得在打開小程序時就彈出獲取用戶信息的浮層，你可以發(fā)現(xiàn)大部分的產(chǎn)品在這里都是非前置獲取，而是后置獲取 (相關(guān)建議請查看以下鏈接)。

https://developers.weixin.qq.com/community/operate/doc

且微信的登錄方式和 app 的登錄方式及入口的「重量級」不同，因為小程序是基于微信的，所以在登錄時，則是調(diào)起微信的登錄浮層。

Airbnb APP 調(diào)用流程：

Airbnb 小程序調(diào)用流程：

避免交互過深，為了保持小程序輕量化，扁平化的特點。

發(fā)現(xiàn)大部分的產(chǎn)品，在設(shè)計中都保持了相對扁平和較淺的層次，比如哈啰出現(xiàn)，我們可以發(fā)現(xiàn)，APP 中有很多的服務(wù)入口而在小程序中精簡了最核心的順風(fēng)車業(yè)務(wù)，在底部 tab 中只體現(xiàn)了 2 個入口，而 app 中有 4 個入口。

設(shè)計小而美的優(yōu)質(zhì)小程序幾個關(guān)鍵詞：場景、需求、專注、清晰、統(tǒng)一等。

作業(yè)幫產(chǎn)品，我們發(fā)現(xiàn)在 APP 中，有很多的入口及功能，但在設(shè)計作業(yè)幫小程序時，只是把最核心的「拍照搜題」露出，而且，在小程序的設(shè)計中，我們盡量去除不必要的修飾，比如在 app 中相機背景是一個轉(zhuǎn)圈的動效，而在小程序中則替換成了一張靜態(tài)圖片。

標題欄「被占用」，常用的幾種搜索設(shè)計手法：

在拼多多的搜索欄設(shè)計中，發(fā)現(xiàn)保持了在標題欄搜索入口的位置，而進入搜索后，則需要保留標題位置錯開微信右上角固定 icon，則選擇了下移排列。

彈窗盡量不遮擋頂部標題欄和底部tab欄

我進行調(diào)研，發(fā)現(xiàn)很多 app 在進行彈窗設(shè)計時，不遮擋頂部標題欄小程序默認操作區(qū)的同時，也不會遮擋底部標簽欄 Tab Bar。

關(guān)于適配的問題

• 方案 1 就是留出空間用色彩來填充部分
• 方案 2 就是多設(shè)計幾種方案，適配幾款主流機型
  https://developers.weixin.qq.com/community/develop/doc

這是微信開放社區(qū)中用戶反映的問題：

應(yīng)該怎么做適配的呢？怎樣做適配才能更高效且能滿足內(nèi)容不被裁切呢？

有一個很好的方法就是利用組件化對圖片進行內(nèi)容有效范圍的規(guī)定，不論是哪位設(shè)計師設(shè)計，都需要在規(guī)定區(qū)域內(nèi)進行設(shè)計，之外的區(qū)域可以放「非重要內(nèi)容」比如背景顏色或者延展圖片(可以裁切掉的部分)等。

以上這么多機型的適配，其實設(shè)計師只需要在 2 個尺寸里進行設(shè)計稿的變化，即可基本滿足主流機型的適配。

做設(shè)計必須要了解所對應(yīng)的平臺特性：小程序的基礎(chǔ)能力

小程序的基礎(chǔ)能力

• API ：如微信登錄、支付、生物認證等開放界面能力以及位置、數(shù)據(jù)、錄音、視頻等基礎(chǔ)能力。
• 組件：多樣的小程序組件如表單、導(dǎo)航、地圖、媒體、畫布以及廣告等組件能力。
• 插件：完善的小程序插件 ，可以是前端組件、也可以是具有獨立服務(wù)能力的功能模塊、還可以是由第三方提供的完整服務(wù)，如騰訊視頻插件等。

小程序官方設(shè)計指南：https://developers.weixin.qq.com/miniprogram/design

設(shè)計小程序的，使用1倍圖設(shè)計即可

這樣的適配好處在于，既能夠滿足手機多尺寸的需要又能夠很好地擴展尺寸，這也是大部分大廠的普遍做法。

切圖標注部分推薦的高效共享的平臺：藍湖、Figma、Pxcook

「添加到我的小程序」視覺引導(dǎo)

設(shè)計小程序還需要考慮一點就是，設(shè)計引導(dǎo)氣泡的部分，氣泡盡量用「輕量化」的設(shè)計語言來設(shè)計即可，比如下面看到的氣泡效果采用了 2 種比較常用的設(shè)計手法，通欄設(shè)計和氣泡設(shè)計。

核心場景APP導(dǎo)流

比如印象筆記可以通過微信小程序「保存到印象筆記」，從「導(dǎo)入微信文件」選擇導(dǎo)入文件后則及時保存到了印象筆記 APP 中（前提是綁定了印象筆記 APP）；

愛奇藝在視頻播放頁出現(xiàn)「用 APP 打開」

得到小程序中，通過引導(dǎo)打開 APP 的方式來引導(dǎo)用戶：

Keep 中，當(dāng)你要看更多課程安排時，會有引導(dǎo)入口提示「下載 Keep APP 體驗完整版」

小驚喜：很有意思的小交互，就是當(dāng)你長按右上角的圓形關(guān)閉 icon 時，會出現(xiàn)一個浮層，這個浮層的定義是能夠讓用戶能夠快速地切換現(xiàn)在打開的小程序。

「支付」限制

在微信中設(shè)計小程序要考慮到微信的一些「支付」相關(guān)限制，比如只有實體產(chǎn)品可以進行購買交易，而「虛擬商品」知識付費以及打賞類是不可以進行交易，原因是蘋果商店的「分成限制」，比如得到小程序中課程部分不會體現(xiàn)購買入口，只是提供一個文字引導(dǎo)「請下載得到 App，免費試聽更多好課」，而在 App 中則有直接購買的入口，當(dāng)點擊購買后調(diào)起來的是 App Store 的支付系統(tǒng)。

同理的還有愛奇藝，在小程序中，如果用戶觸發(fā) VIP 的視頻后，則引導(dǎo)用戶打開愛奇藝 App，那么在 App 中的流程同樣也是引導(dǎo)用戶進行會員充值，充值調(diào)起來的同樣是 App Store 的支付系統(tǒng)。

總結(jié)

越接觸小程序，越會發(fā)現(xiàn)，小程序就是各個產(chǎn)品核心產(chǎn)品功能的展示的舞臺，說的更通俗易懂一點就是，各個公司都把自己的「拳頭」業(yè)務(wù)放在了小程序，希望通過小程序的入口能夠快速且單一高效地讓用戶更純粹的體驗產(chǎn)品的功能和服務(wù)，同時也起到 APP 引流的目的。

從設(shè)計的角度來說要了解小程序的特點，比如小程序輕量且觸手可及用完即走的平臺定位；在與 APP 保持品牌、設(shè)計語言一致性的前提下，做到符合小程序自身的體驗感受，這樣才能夠更好地做出符合用戶心理預(yù)期的好產(chǎn)品。

更多知識點：

歡迎關(guān)注作者微信號：zhuangzhizhu