前言

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

小程序的發展史

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

為什麼叫小程序？和蘋果應用程序有什麼區別

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

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

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

小程序的特點及優勢

根據小程序輕量且用完即走的平台定位觸手可及、用完即走。

1. 小程序的優勢

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

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

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

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

小程序在設計初期也承載了一些數據收集的目的，比如之前我們開發一些小程序是用 H5 網頁來寫，整個環節不受微信生態的控制，而一些數據上的收集，只能是知道一些相對比較「粗顆粒」的數據，比如用戶的流量的數據和一些支付相關的數據，而且 H5 網頁嵌入的話，會涉及到一些加載速度問題，體驗相對不夠流暢，而小程序的誕生則解決了數據全流程收集的問題和解決了之前的用戶體驗問題。

1. 小程序如何被用戶發現

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

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

現在各大公司對小程序的設計要求是什麼樣的？

有很多專門服務小程序的公司比如有贊、比如微盟、比如獲客寶等等，你可以看到未來小程序將會是大部分公司所必須要考慮的解決方案之一，那麼不同行業的小程序在設計的時候思考點是不同的，我們來分析下。

小程序的設計思考，需要結合小程序設計規範以及對不同行業公司小程序進行調研，進行分析。

1. 出行類-滴滴

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

2. 筆記類

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

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

3. 新聞類

36Kr 主程序和小程序對比更加明顯，在 36 氪小程序精簡版，則更加輕量化的體現了主要資訊信息，其他的入口則直接忽略體現出來，把最重要的核心點體現了出來，其他非主要的「干擾」小程序輕量化感受的因素都直接放棄體現。

4. 知識付費類

在主程序與小程序的設計中，更多的是偏向於核心商業化部分內容作為小程序突出主要信息，比如得到小程序，在底部導航欄中保留了 2 個主應用程序中核心的入口「商場」和「課程」。

5. 視頻類

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

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

1. 小程序官方設計規則

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

重點突出

流程明確

小程序可設計區域

後面我會講解一個小程序適配的方法，這也是設計師可以控制的區域。

小程序可設計區域

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

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

在適配 2 端時，標題欄位置的文字保持了各端規範，安卓端保持在左側，iOS 端在居中位置，且設計時，需注意 APP 中右上角功能與小程序右上角固定入口的衝突 （當然我發現也有一些安卓端小程序進行了定製設計）。

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

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

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

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

Airbnb APP 調用流程：

Airbnb 小程序調用流程：

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

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

設計小而美的優質小程序幾個關鍵詞：場景、需求、專註、清晰、統一等。

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

標題欄「被佔用」，常用的幾種搜索設計手法：

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

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

我進行調研，發現很多 app 在進行彈窗設計時，不遮擋頂部標題欄小程序默認操作區的同時，也不會遮擋底部標籤欄 Tab Bar。

關於適配的問題

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

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

應該怎麼做適配的呢？怎樣做適配才能更高效且能滿足內容不被裁切呢？

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

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

做設計必須要了解所對應的平台特性：小程序的基礎能力

小程序的基礎能力

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

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

設計小程序的，使用1倍圖設計即可

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

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

「添加到我的小程序」視覺引導

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

核心場景APP導流

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

愛奇藝在視頻播放頁出現「用 APP 打開」

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

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

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

「支付」限制

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

同理的還有愛奇藝，在小程序中，如果用戶觸發 VIP 的視頻后，則引導用戶打開愛奇藝 App，那麼在 App 中的流程同樣也是引導用戶進行會員充值，充值調起來的同樣是 App Store 的支付系統。

總結

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

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

更多知識點：

閱讀文章 >>

歡迎關注作者微信號：zhuangzhizhu

未经-摩登3注册-摩登3测速官网-允许不得转载：摩登3注册-摩登3测速官网 » 無極五平台_如何設計小程序？來看這份超全面的指南！