起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識設計師看過來！全面的小程序指南
編輯導語：小程序這個項目在前幾年出來后，就一直不斷的發展，從剛開始的小程序小游戲到如今的很多APP都開展小程序項目，小程序在設計上也有很多需要注意的方式；本文是作者結合工作設計中遇到的問題，總結一份比較全面的小程序設計指南，我們一起來看一下。
最近做的都是小程序的項目，小程序設計進一步的研究的時候，發現現在關于小程序的文章很少，也不全面。
目前大部分的問題通過微信開放社區，所以來結合官方指南和文章資料，結合工作設計中遇到的問題，總結一份比較全面的小程序設計指南，希望可以幫助到大家。
一、淺談小程序
1. 小程序的定義
小程序是一種即用即走，無需下載的手機應用，和APP不同，用戶不用擔心會占用手機內存的問題，用戶可以直接通過掃一掃或附近搜索即可使用。
小程序刨除一切繁雜的程序，將用戶的操作變得更加靈活快捷，大大提高了用戶體驗，使用量也大大增加。
2. 小程序的發展
2016年1月11日，2016微信公開課PRO版在廣州舉行，“微信之父”張小龍首次公開演講，宣布微信公眾號將推出“應用號”，通過公眾號完成一些App的部分功能。
2016年11月3日晚間，微信團隊宣布：微信小程序正式開放公測。
2017年9月20日，支付寶小程序向用戶開放公測。
2018年7月，百度AI開發者大會上，百度宣布百度智能小程序正式上線。
2019年6月1日，QQ小程序在安卓的新版QQ上如期上線，5天后，正式登陸 iOS 版手機QQ；至此，QQ小程序完成全面上線。
3. 小程序的現狀
從最早的微信到現在，支付寶小程序、百度小程序、抖音小程序，幾大巨頭都布局了小程序。
主流小程序平臺網絡關注度差異較大，微信小程序的網絡關注度最高，其次是百度小程序和支付寶小程序。
對比用戶認知來看，微信小程序以分享鏈接出現，百度小程序是搶紅包平臺，支付寶小程序是搶特價和抽獎平臺等;小程序平臺網絡關注度差異折射用戶對小程序平臺生態的認知。
1）微信小程序
微信作為國民社交軟件，日活用戶已達3億，這無疑是巨大的用戶流量聚集地，對商家的吸引程度可想而知，我們接下來也是按照微信小程序為例來逐步講解。
開源文檔
微信官方文檔：https://developers.weixin.qq.com/miniprogram/design/
特點：依附微信強社交模式，引流能力強，流失率低，推廣迅速。
量級：月活10億。
2）百度智能小程序
百度作為中國最大的搜索引擎工具，有天然的數據支撐。百度每日的搜索量可達到幾十個億，又是一個巨大的流量地；此外，基于產品的搜索特性，百度小程序能精準覆蓋目標用戶；通過小程序為用戶提供信息與服務，通過提升整體的服務效率實現用戶留存。
開源文檔：
百度-智能小程序設計規范：https://smartprogram.baidu.com/docs/design/overview/introduction/
特點：基于百度搜索引擎的優勢，增加產品詞的優化曝光。
量級：月活5億。
3）抖音小程序
抖音小程序開發基于字節跳動客戶，面向字節跳動所有產品線用戶（包括抖音、今日頭條等），不同小程序/小游戲滿足不同種類用戶需求。
支持小游戲和小程序產品形態，支持個人與企業開發者，只要有優質內容或優質服務；產品形態與接口形式適配行業標準，最大程度減少開發者開發成本。
開源文檔：
字節小程序：https://microapp.bytedance.com/docs/zh-CN/mini-app/design/design-guidelines/Design-guidelines
特點：旨在利用優質內容所關聯和產生的使用場景進行小程序導流，解決開發者流量與轉化困擾。
量級：月活9億。
4）支付寶小程序
支付寶小程序依托支付寶的商業和生活服務基因，小程序細分行業分布也以生活服務、金融保險和電商等小程序為主；同時支付寶成熟的信用體系也為商家提供了類似于免押租賃等玩法，借助芝麻信用、螞蟻花唄等功能為流量變現創造更多的想象空間。
開源文檔：
支付寶小程序設計規范：https://docs.alipay.com/mini/design
特點：在組件上采用了此前成熟的Ant Design 設計，在開放API上則面向自身特色能力來封裝，在框架方面采用開源的React/webpack等技術為基礎，結合了支付寶自身的多年技術沉淀來實現。
量級：月活7億。
4. 小程序的類型
裂變型：
裂變型小程序是為我們其他小程序，在短期內提供大量流量的；比如跳一跳娛樂游戲類的小程序，還有電商裂變的成功典范可以屬拼多多。
針對于裂變型的小程序來說，裂變點就是痛點，除了產品的主功能，小程序的裂變設計為什么要用戶裂變？比如拼多多，用戶為了零元購商品才分享的，并且幫忙砍的人也想零元得商品。
拼多多：
- 缺點：在裂變后幾乎是無法使用，產品的擴展性差。
- 優點：用戶流量來取快、用戶路徑可以達到最短。
- 設計點：考慮最優的用戶裂變路徑。
留存型：
小程序一直是用完即走的使用體驗，留存型小程序是我們用來沉淀客戶的；需要我們結合自身的產品，發掘能沉淀目標客戶的場景，一般需要結合原有APP來開發，開發一款對用戶有價值、簡單易上手的小程序。
可以從這幾個方面來考慮：
- 強運營：一個小程序能給用戶提供的能量畢竟是有限的，現在競品太多，如果不能持續給用戶刺激，沉寂是早晚的事；所以電商產品會通過優惠券、分享立減、拼團來刺激用戶消費。
- 搭建激勵體系：針對用戶的損失厭惡，建立用戶的激勵體系——如利用積分商城，引導用戶通過簽到、消費、分享各種行為獎勵用戶，增加用戶的離開成本。
- 社區：基于微信的社交基礎上，把微信群建立到小程序里，可以長期培養用戶的使用習慣，而且可以利用社交的互動性，低成本的完成裂變轉化。
產品型：
產品型的小程序一般是有了APP的商家建立小程序，是為了彼此相互融合，相互促進；因為小程序開發成本更低，更多曝光的機會；產品型的小程序設計一般是照搬全部，或者精簡設計，一般要結合商家業務來判斷。
如果對于一些垂直品類的產品，像馬蜂窩和攜程旅游將酒店預訂、景點門票預訂、周邊游、租車包車游等各項服務都做了一個功能拆分，生成的了各項小程序的入口，更好的將服務垂直，縮短產品和業務觸達用戶的渠道，自然轉化率更高。
對于想為了借助微信這一大流量平臺發展的APP可以照搬APP那一套。
工具型：
在小程序中工具型是最符合“用完即走”這個理念的，就像家里的工具一樣想要的時候拿出來；比如識圖、查公交線路、寄快遞、抽獎等小程序，只要打開對應的小程序就可以了，不用的時候也不占用內存；還有一種本地服務小程序，借助“附近的小程序”功能，為周邊提供便利服務，如上門維修、家電回購、本地商圈等等小程序。
工具型的小程序關注點在于功能本身，解決人們的某一個需求，讓他們更便捷高效。
在設計的時候要注意視覺和結構和信息布局的簡潔，然后考慮易懂先考慮功能理解度和識別性，將功能產品化快速提高用戶的效率，然后引導用戶快捷完成任務。
5. 小程序與APP的區別
1）開發技術區別
APP開發根據開發方式可分為原生APP和Web APP，APP主流開發操作系統有安卓和IOS。
安卓版本原生APP的開發語言為JAVA，IOS版原生APP的開發語言為Objective-C。
安卓版本Web APP的開發語言為JAVA+HTML，IOS 版Web APP的開發語言為Objective-C+HTML。
小程序是基于騰訊、今日頭條、百度等平臺的小程序開發框架進行開發，開發技術類似HTML。
2）用戶群體
載體不同則用戶群體不同，小程序是基于微信平臺的應用，用戶群僅限微信用戶，截至目前也就是微信10億+的用戶量；而APP則是上架在App Store及Android應用市場，面向全球擁有智能手機的用戶，也就是33億+的用戶量。
3）下載及安裝
APP：一直存在手機中會占用空間，太多的APP可能會導致內存不足，總是清理緩存。
小程序：因為不需要安裝，占用內存空間忽略不計。
4）開發成本
APP：APP在實際開發中，它需要開發安卓系統和iOS系統兩種版本，所用到開發語言不同，同時還需要根據手機的不同尺寸進行適配，開發成本較高；一款完善的雙平臺APP平均的開發周期約3個月。
小程序：開發成本低，一次開發就可以適配所有手機；平均開發周期約2周。
5）產品定位
APP：原生App的內存就不受控制，那么內容框架可以根據產品定位隨意增添，可發揮的空間非常大，一些電商、社區等等無論多么復雜的應用都能一一實現。
小程序：因為內存受限的控制，導致內容框架不同，在小程序上功能架構設計的比較簡單，符合輕量化、“用完即走”；功能比較受限，因為接口功能有限。
現在小程序現有接口：
如上：豆瓣原生app包含了首頁-書影音-小組討論-市集-我的等多個內容板塊，但是小程序只保留了豆瓣最核心的部分-電影評分的欄目，將其商城和社區的模塊全部砍掉了，只是將小程序作為一個資訊型的瀏覽窗口。
6）基礎框架
其實移動端產品的設計規范和原則大致是相同的，但是因為受制于微信小程序的框架，小程序產品與App產品在部分版塊的表現形式上會存在一些差異：如頂部導航欄區域等。
其實移動端產品的設計規范和原則大致是相同的，但是因為受制于微信小程序的框架，小程序產品與App產品在部分版塊的表現形式上會存在一些差異，主要體現在以下幾個方面：
頂部導航欄區域：小程序的導航欄官方指定了兩種樣式，一深一淺，背景色可自定義，遵循“導航明確、來去自如”的原則。
頂部導航欄區域：底部標簽欄是移動端產品的主要導航方式，主要表示用戶當前所在的位置，所以會有選中與未選中兩種切換方式。
- App：可支持最少2個，最多5個的tab切換，圖標大小以及底部標簽欄高度可自定義。
- 小程序：也可支持最少2個，最多5個的tab切換，使用原生控件時，要遵從 icon 尺寸81*81px。
拖動排序：
- App：流暢、體驗佳，例如發朋友圈時拖動照片排序。
- 小程序：除非必要，否則不建議使用拖動排序。圖片和列表拖動在 Android機型上體驗不夠，會有卡頓的情況。
消息推送：
- APP：會隔三差五給用戶推送廣告，太多未讀提示會逼死強迫癥。
- 小程序：不允許主動給用戶發送廣告，僅能回復模版消息。
7）用戶體驗
打開方式：
- APP：直接打開。
- 小程序：從微信首頁，下拉，點擊打開。
頁面流暢度：
- APP：界面切換的流暢度以及加載數據的響應速度都會比小程序更好一些。
- 小程序：當在比較深的頁面上，或者不是原生的頁面加載時間會比較長，會卡頓。
氛圍營造：
- APP：動畫不受限，活動運營比較好營造氛圍感，帶給用戶非常友好的沉浸感和歸屬感。
- 小程序：受內存的影響，而且小程序都是輕量化的功能，動畫的展示元素會非常的少，因而在界面會覺得很平淡，像是工具型產品。
引流轉化：
- APP：在原生APP里可以開發客服，或者直接轉化；APP到小程序里可以直接跳轉。
- 小程序：小程序的虛擬支付會影響iOS用戶的轉化，并影響整個業務的轉化；客服也是需要關閉小程序單獨對話，與APP的響應需要一個繁瑣的步驟。
8）運營推廣
APP：推廣新用戶需要下載APP，需要占用手機內存，推廣率低。但是APP的開發自由度高，推廣方式不受限制，渠道多，轉化率高
小程序：依靠微信平臺，可以通過掃描二維碼、搜索、發送好友和朋友圈，推廣率高；雖然推廣率高，但是因為官方的各種限制，增加營銷難度，轉化率低。
二、如何去設計小程序
微信小程序的官方設計規范，在微信的官方文檔里都有全面的講解微信小程序的設計指南，我就不多贅述了，按照官方的來對于設計一個基本的小程序是完全夠用的。
1. 遵守微信小程序設計指南
友好禮貌、清晰明確、便捷優雅、統一穩定：
2. 突破嘗試設計邊界
在最基礎的設計，我想跟大家聊一下，在微信的設計規范內如何進行進階設計，這也是我實際工作中探索的結果，希望能給大家更多的啟發。
1）Navigation Bar
官方指南：開發者可根據自身功能設計需要在頁面內添加自有導航。并保持不同頁面間導航一致，指向清晰，有路可退。
受限于手機屏幕尺寸的限制，小程序頁面的導航應盡量簡單；建議開發者設計的自有導航樣式與微信官方小程序菜單樣式保持一定差異，以便區分。
在根據官方的指導下我們如何進行設計呢？
普通換色：
導航欄設計邊緣探索：
需要注意的是：自定義導航欄之后要加微信默認的下拉刷新會出現一個問題：下拉刷新組件會出現在導航欄上面！所以如果你需要做自定義導航欄，就需要自定義下拉刷新；下面提供luyimei微信小程序下拉刷新組件。
2）Tabbar
官方指南：開發者可為小程序頁面添加標簽分頁（Tab）導航。標簽分頁欄可固定在頁面頂部或者底部，便于用戶在不同的分頁間做切換。
標簽數量不得少于2個，最多不得超過5個，為確保點擊區域，建議標簽數量不超過4項；一個頁面也不應出現一組以上的標簽分頁欄。
底部標簽欄：
按照產品需求也可以直接去掉底部導航欄。
其他導航欄設計的例子：
頂部標簽欄：
頂部標簽分頁欄顏色可自定義。在自定義顏色選擇中，務必注意保持分頁欄標簽的可用性、可視性和可操作性。
3）加載動畫
啟動頁加載樣式
微信官方小程序里啟動頁加載樣式是由微信官方提供，只需要提供logo就可以。
頁面下拉刷新加載：
頁面下拉刷新加載雖然微信官方文檔說，開發者無需自行開發，但是想要更改loading也是可以的；現在小程序開發的比較完善，盡量用小程序標準走，自定義開發有可能會破壞小程序的用戶體驗。
頁面內加載反饋、模態加載和其余的加載樣式都可以根據需求設計，新手可以參考著官方指南來。
加載反饋注意事項：
若載入時間較長，應提供取消操作，并使用進度條顯示載入的進度。
載入過程中，應保持動畫效果 ; 無動畫效果的加載很容易讓人產生該界面已經卡死的錯覺。
不要在同一個頁面同時使用超過1個加載動畫。
4）減少輸入
在頁面設計的時候盡量考慮到手機鍵盤輸入困難或者容易引起誤操作，小程序的設計可以利用一些接口來優化用戶體驗。
模糊搜索：
遇到必須輸入的場景可以盡量讓用戶選擇，讓比如搜索時的歷史記錄和模糊搜索，而減少或避免不必要的鍵盤輸入，可以大大減少用戶的輸入成本。
表單輸入：
復雜表單的輸入會給用戶帶來心理負擔，在遇到大量輸入的場景下，可以把輸入換成選擇，盡可能的減少操作；例如掃描銀行卡可以只需點擊按鈕，采用攝像頭識別接口來識別信息。
除此之外微信團隊還對外開放例如地理位置接口等多種微信小程序接口 ，充分利用這些接口將大大提高用戶輸入的效率和準確性，進而優化體驗。
3. 多端適配
關于小程序的適配設計師不用過多的關心，但是可以了解一下。
小程序里的尺寸單位叫 rpx，可以根據屏幕寬度進行自適應。在750*1334的設計稿里，1px = 1rpx；在小程序里寬度都是750rpx,高度就通過那個寬高比獲得，只要涉及具體數值的高度的都通過這個比例計算就行。
4. 數據反饋
小程序的普通數據可以通過“小程序數據助手”查看，有特殊觀察的數據可以單獨埋點。
當前功能模塊包括數據概況、訪問基礎分析（用戶趨勢、來源分析、留存分析、時長分析、頁面詳情）、實時統計和用戶畫像（年齡性別、省份城市、終端機型），數據與小程序后臺常規分析一致。
5. 推薦優質小程序
1）【疫小搜】
疫情期間產品設計師的價值，可以查看周邊疫情情況，和確診人員到自己的距離。
2）【網易嚴選】
網易嚴選的品牌理念是“好的生活，沒那么貴”。清晰的品牌設計，設計語言透著追求品質生活的態度。
3）【多抓魚】
多抓魚二手書是一款人性化的二手書交易市場小程序。
4）【京東良研】
京東良研小程序是專業調研及數據分析的高效率工具，整體的簡潔、輕量化的設計很符合調研場景的商務感。
5）【豆瓣】
豆瓣評分提供最新的電影介紹及評論。豆瓣是典型的有情懷，小而美的產品了。
三、你們不知道的小程序
1. 彈窗不能覆蓋導航欄
因為在小程序里導航欄的層級是最高的，即使隱藏導航欄Title Bar也是依然存在的。
半屏彈窗
除了官方指南里的模態對話框，也可以嘗試半屏彈窗，一是承載更多信息，二是更好的繼續流程不被打斷。
活動彈窗：
在運營活動中，活動彈窗起著活動引導，突出重點的作用。這類彈窗往往要設計的“熱鬧”一些，可以更好的引導用戶留存裂變。
2. 虛擬支付
微信小程序官方曾發布過整改通知，小程序對于iOS系統上提供的虛擬物品不能展現不能出現支付、購買、獲取VIP、開通會員、價格、iOS限制、蘋果系統限制等購買相關字眼；也不能出現引導字眼，比如掃描二維碼獲取；即使實際上它們都不可使用，也不得引導至為外部網頁或App來實現支付功能。
也就是說在蘋果設備（IOS）系統中，小程序中不能進行虛擬物品的支付，比如積分、購買課程、打賞等等，對于在線教育而言，由于課為售賣的主體，與課程售賣相關的購買、營銷推廣（秒殺、砍價等）等都產生了一系列因虛擬支付衍生的問題。
目前沒有特別完美的解決方案，要不犧牲用戶體驗曲線救國，要不冒著小程序被封的風險頂風作案。
1）按照規定
直接關閉小程序iOS支付，這種是最合規但是也是最無奈的方式，“親寶故事”就是采用這種方式，用ios打開界面入口都跟安卓不一樣；然而實際上他只是把入口給隱藏了，通過安卓手機分享依然可以打開被隱藏的收費信息，當然這個方案對于沒有APP的產品損失還是很大的。
2）曲線救國
先買后看：
線上課程的話，可以讓用戶提前在公眾號或者社群里跟iOS用戶解釋為什么不能購課，或者是還有哪些途徑可以獲課；其他途徑提前支付，在后端生成驗證碼，直接輸入解鎖課程。
虛擬物品轉成實物：
而在ios上，把原本虛擬物品轉化成實物品，比如賣光盤，而本質上的價值是音頻本身；如果按節賣可能實物成本及配送費過高，那么在ios上可以按系列專輯打包賣，使用ios設備的用戶只能賣專輯，買完后可以解鎖該專輯下的所有音頻。
當然，這種方式不知道在運營商是否存在問題。
引導其他方式支付：
從官方給出的規則細則解讀來看，這種引導也算是不合規的，將支付引導去公眾號、到APP上進行，聯系客服完成支付或購買流程；這個是非常不建議的，一旦被發現會有舉報被封的危險。
3. 頁面層級和邏輯跳轉
小程序的頁面之前的邏輯跳轉，最多可以支持10個層級。在小程序的開發過程中會反復確認頁面之間的跳轉邏輯有有沒有遺漏；但是會忽略掉用戶循環操作，可能會造成打開頁面層級過多而導致無法繼續操作。
即使用戶打開10個頁面以內5個以上頁面，也會需要連續按多次“返回”按鈕才可以退出小程序，導致用戶的體驗也相當地不好。
除正常頁面跳轉的邏輯沒有問題之外，在小程序的交互中還需要考慮兩件事，一個是整個用戶點擊的最長路徑是不是過長，二是考慮頁面流失率的情況下，對路徑中終端的頁面導航欄設計到首頁的跳轉，即可解決這個問題。
4. 小程序的分享路徑
小程序最大的優勢就是可以分享社交好友，比如看到產品拼單才可以購買的話，用戶會積極的邀請自己的好友一起購買，達到快速的裂變，給企業帶來巨大的流量；而且按照這個樣分享路徑推廣的成本是極低的。分享的方式可以是分享朋友圈、二維碼分享、微信分享好友。
5. 一些必須用原生的頁面
1）掃一掃
目前掃一掃頁面時不支持二次設計的，必須調用微信小程序的官方接口。
2）消息通知
現在信息爆炸的時代，很多信息和彈窗會給用戶造成打擾，忽略了消息的本質是為了服務，因此微信對訂閱消息加了很多限制和優化，最主要的便是把選擇權留給用戶。
在訂閱消息授權需要用戶主動點button 觸發，如果沒有勾選「總是保持以上選擇，不再詢問」，選擇允許，也只可以收到一條訂閱消息，則每次都會發起彈窗詢問；如果用戶勾選「總是保持以上選擇，不再詢問」，只是不喚起彈窗，但也不是可以無限次打擾用戶發送消息。
長期訂閱消息目前只對特定行業開放，如政府民生、金融、醫療等，一般我們也接觸不到，所以不做贅述。
3）登錄注冊流程
在微信小程序里想獲取用戶的信息，不可以登錄小程序后自動彈出登錄彈窗；需要用戶主動觸發登錄按鈕進行登錄流程，并且必須為用戶提供「暫不登錄」的選項。
四、未來的發展方向
從小程序鏈接了10多億用戶，在生活中不停的挖線下場景，解決工作、娛樂、購物多種生活需求。
小程序已經融入了我們線下生活，隨著用戶習慣的養成，使用頻次和平均時長逐漸增加；小程序的快速獲客速度，和極低的開發成本，成為各個公司的新寵，希望開發新的小程序入口可以快速且單一高效的讓用戶有一個更純粹的產品功能體驗，同時也可以對現有的APP起到引流的目的。
1. 用戶的留存
針對小程序的留存一直是開發者非常在乎的問題，因為不像APP開發者的話語權很大；因為小程序的平臺性質，對小程序開發進行了很多的限制，讓推廣和營銷還有轉化都增加的了難度。
沒辦法讓一個產品孤注一擲的做小程序，目前只能是和APP搭配著來開發，作為一個產品功能單一路徑的功能產品。
2. 小程序的設計思維
在設計小程序時不能依靠傳統APP的思維去設計，按照輕量、社交、價值、引流、用戶數據和打造小程序生態環境。
在設計思路上把握設計輕量化和用完即走的原則。同時深挖小程序的用戶場景，梳理APP中的核心主流功能，弱化次要功能。
依照原有APP去設計更符合小程序使用體驗，利用好微信的社交特點，融入微信生態為后期的服務升級、轉化或者對接其他矩陣小程序留好余地。
3. 市場背景的機會
因為疫情爆發，生鮮電商在寒冬中迎來了機會，給大家養成了消費習慣。
社區電商更是一個2-3億的一個巨大市場，本就是以用戶為中心，基于體驗和分享去中心化的體驗模式，在疫情的情況下培養用戶成本大幅度減少，借助小程序加快向下沉市場滲透的速度。
五、結語
現在資本也很看好小程序，以后的小程序還會發展的越來越快，設計師越早掌握小程序的設計語言方法越好。
把這半年來接觸到的問題跟大家在這里分享，還有很多角落問題還有待深入了解；隨著微信小程序官方文檔和通知的不斷更新，深入挖掘更深入的場景和進行更多全面的探索后，后期還會繼續會跟大家分享。
參考鏈接
https://baijiahao.baidu.com/s?id=1657874055167445885&wfr=spider&for=pc
https://www.chyxx.com/industry/202005/867534.html
http://www.aharts.cn/pd/1509590.html
作者：郝小七，微信公眾號：七醬設計筆記
本文由 @郝小七 原創發布于人人都是產品經理，未經作者許可，禁止轉載
題圖來自Unsplash，基于 CC0 協議
講的好棒~
以為賣課，原來干貨，M了