微信小程序?qū)τ谖覀兇蠹襾碚f應(yīng)該毫不陌生、非常熟悉：逛商場的時候會看到掃一掃啟動線上商城的小程序、下館子的時候會碰到掃一掃啟動點菜下單的小程序、郵寄快遞的時候會看到掃一掃在線填單的小程序···這些小程序打通了線上線下的鏈環(huán)，重構(gòu)了人們的生活習慣，在如今的生活中隨處可見。 

但是在設(shè)計討論圈內(nèi)會經(jīng)常遇到一些設(shè)計新人這樣提問、或者在求職面試中也經(jīng)常會被面試官問到這樣的問題： 

小程序與app有哪些區(qū)別呢？ 

可能大多數(shù)人雖然心里清楚但無從說起，或者只能說出個大概，那么本文就筆者過往的工作經(jīng)驗進行概括總結(jié)，統(tǒng)一歸納一下小程序與APP到底有哪些區(qū)別。 

首先來說一下小程序的背景吧： 

它是一款基于微信的輕應(yīng)用，面向10億+的微信用戶群體，具有四個特點：無需安裝、無須卸載、觸手可及、用完即走。從2017年年初上線，到現(xiàn)在已過去兩年多，經(jīng)歷過初期的暴熱，到中期的低迷、再到現(xiàn)在繼續(xù)火熱的階段。所以現(xiàn)在很多商戶以及企業(yè)都在迅速開發(fā)屬于自己的小程序，市面上一些熱門的主流app也研發(fā)了對應(yīng)的微信小程序窗口（如京東、嚴選、拼多多、餓了么、小紅書等）。因為它輕量、簡單、開發(fā)成本比app低，可以說現(xiàn)在的小程序非常受企業(yè)及用戶的歡迎，真的是無處不在、觸手可及。 

接下來本文將從以下幾個方面闡述小程序與App的區(qū)別： 

1、用戶群 

2、下載及安裝 

3、開發(fā)成本 

4、引流推廣 

5、產(chǎn)品定位

6、基礎(chǔ)框架 

7、用戶體驗 

1、用戶群 

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

2、下載及安裝 

小程序是建立在微信基礎(chǔ)上的，可以通過在微信內(nèi)主動搜索或者掃描小程序的二維碼就可以立即加載立即使用，響應(yīng)速度非?？欤瑹o需單獨下載和安裝，占用手機內(nèi)存空間可以忽略不計（只是部分微信緩存數(shù)據(jù)）； 

App則需要通過手機內(nèi)的應(yīng)用商店（App Store）進行下載、安裝之后才能使用，通常下載包比較大，會占用手機的內(nèi)存空間，經(jīng)常會出現(xiàn)手機的內(nèi)存不足而導(dǎo)致無法下載，所以也經(jīng)常聽到身邊的朋友抱怨沒用多久的手機，會經(jīng)常提示內(nèi)存不足，甚至導(dǎo)致系統(tǒng)反應(yīng)慢、操作卡頓等現(xiàn)象。 

3、開發(fā)成本 

微信小程序是基于騰訊的小程序開發(fā)框架進行開發(fā)，開發(fā)技術(shù)類似HTML。一次開發(fā)就可以自動適配所有手機，?設(shè)計也只需要設(shè)計750*1334一份稿子就行、輸出2X圖給開發(fā)，所以總體來講開發(fā)成本相對較低； 

而APP在實際開發(fā)中，它需要開發(fā)安卓系統(tǒng)和iOS系統(tǒng)兩種版本，所用到開發(fā)語言不同，同時還需要根據(jù)手機的不同尺寸進行適配，開發(fā)成本較高。 

4、引流推廣 

小程序因為背靠微信，基于龐大的微信用戶量，并且活躍指數(shù)比較高，引流效果特別好。但是微信對小程序進行了諸多限制，特別是流量獲取方面，很多營銷策略在小程序被騰訊禁止，嚴重的還會下架封號，所以營銷策略受制于騰訊的政策要求；另外，微信小程序可以與微信公眾號進行互通跳轉(zhuǎn)，降低了推廣難度，提高了小程序的活躍性。 

APP需要用戶主動在應(yīng)用市場下載，受制于流量及話費成本，推廣難度較大。但是APP內(nèi)部的功能架構(gòu)、推廣拉新的內(nèi)容由運營者全權(quán)把控，推廣方式不受限制，因此推廣渠道較多，可以采用線上+線下多種推廣方式，自由性更高。 

5、產(chǎn)品定位 

小程序是在微信的框架里面，大小受微信的控制，比如之前不能超過2m，雖然現(xiàn)在調(diào)整了開發(fā)可以用分包加載的方式擴至8m；但是對于原生app來講，相差是很大的，原生的app可以達到幾十兆上百兆、不受限制；

正因為內(nèi)存的控制，所以產(chǎn)品定位就會有所區(qū)別，必而導(dǎo)致內(nèi)容框架會有所不同，小程序只能在功能架構(gòu)上設(shè)置較為簡單，比較輕量的，適合一些工具屬性的應(yīng)用，符合“快速打開、用完即走”的理念。 

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

另外，因為小程序的發(fā)展時間相對較晚，所以大多數(shù)都是先有成熟的App之后，為了搶占微信的生態(tài)流量，再研發(fā)對應(yīng)的小程序，那么因為內(nèi)存限制以及上架平臺屬性的不同，所以兩者的內(nèi)容框架及結(jié)構(gòu)就會不同，通常將App中現(xiàn)有的成熟的內(nèi)容版塊進行刪減重組再遷入到小程序體系中，做出適合微信生態(tài)圈的小程序產(chǎn)品。 

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

如上：微信讀書app中包含了發(fā)現(xiàn)-書架-故事-我的四個板塊，圍繞“讀書”進行展開，其實已經(jīng)夠輕量夠簡單了，但是在小程序中做的更為清爽簡潔，沒有Tab Bar，所有內(nèi)容集中在首屏展現(xiàn)，包含了書架-推薦-榜單-分類-精選，砍掉了原app中故事和朋友分享推薦的板塊，讓用戶更純粹地集中在讀書的內(nèi)容當中。 

如上：美團原生app是一個體系非常龐大的應(yīng)用，在最新的版本里面包含了“支付” 、“吃”、“住”、“行”等多個方面，為了豐富平臺內(nèi)容屬性，增強用戶粘度，還增加了社區(qū)的發(fā)現(xiàn)版塊；小程序則刪減了“支付”和“發(fā)現(xiàn)”的內(nèi)容，保留了最基本的“吃”、“住”、“行”的框架。 

6、基礎(chǔ)框架 

其實移動端產(chǎn)品的設(shè)計規(guī)范和原則大致是相同的，但是因為受制于微信小程序的框架，小程序產(chǎn)品與App產(chǎn)品在部分版塊的表現(xiàn)形式上會存在一些差異，主要體現(xiàn)在以下幾個方面： 

6.1 頂部導(dǎo)航欄區(qū)域 

 小程序的導(dǎo)航欄官方指定了兩種樣式，一深一淺，背景色可自定義，遵循“導(dǎo)航明確、來去自如”的原則。導(dǎo)航欄的樣式是固定不可更改的，所以我們經(jīng)?？吹揭恍┬〕绦虻腷anner都是處于導(dǎo)航欄的下方，一些原本可安置在導(dǎo)航欄的定位、搜索、消息等模塊的內(nèi)容也自動下移： 

通常在app的界面中，整個界面都是可以自定義，所以頂部的導(dǎo)航區(qū)域不受限制，設(shè)計上非常自由、可發(fā)揮的程度非常高，經(jīng)常會看到導(dǎo)航欄+banner+icon入口結(jié)合在一起。 

如上：京東app的導(dǎo)航欄和banner區(qū)域是融合在一起的，這樣可以讓界面效果更整體，氛圍感和沉浸感更好；

京東小程序的導(dǎo)航欄則保持了小程序框架的“膠囊”icon，將搜索下移，去除了掃一掃及消息入口，導(dǎo)航欄的留白處理會割裂頂部的整體關(guān)系。 

如上：餓了么app中導(dǎo)航欄處是有定位及掃一掃入口的，但是在小程序中，定位和搜索統(tǒng)一下移，為了保持界面的整體感，在導(dǎo)航欄底部增加了餓了么的品牌色。 

但隨著小程序的逐步更新，導(dǎo)航欄除了“膠囊”icon的位置不可變，其余也是可以自定義的，只是相對來說比較麻煩。 

如上：嚴選的小程序中在導(dǎo)航欄就增加了品牌LOGO和搜索框，并且自定義了背景色與banner融合在一起，整體感相比以前明顯增強；深圳地鐵乘車碼的小程序在導(dǎo)航欄處增加了地址的選擇入口，可以切換不同的城市；知乎小程序的首頁新增了搜索框，在二級界面新增了返回上一頁和回到主頁的入口，雖然給用戶提供了便捷性，減少界面的跳脫率，但是在形狀上與右邊的官方菜單樣式過于類似，完全對稱的布局樣式在形式上過于呆板。 

6.2 底部標簽欄 

底部標簽欄是移動端產(chǎn)品的主要導(dǎo)航方式，主要表示用戶當前所在的位置，所以會有選中與未選中兩種切換方式。

在原生的App產(chǎn)品中，標簽欄經(jīng)常會看到不同的表達形式，有些是沖破邊界采用自由的異形元素，有些在Tab切換時會有動效切換的效果，非常生動有趣，容易吸引用戶的注意力； 

而在小程序的產(chǎn)品中，Tab切換形式通常比較單一，使用的是常規(guī)切換方式，不會有動態(tài)效果，主要受制于微信框架的限制。 

如上：美團外賣app中，tab切換時每個圖標都有縮放的動態(tài)效果，視覺表現(xiàn)強烈；而在小程序中則表現(xiàn)較為單一，利用不同的顏色進行區(qū)分。  

如上：愛奇藝app中，每個圖標切換時，標簽欄的邊界都會隨圖標的縮放一起抖動，非常生動有趣；而在小程序中使用的是常規(guī)的線面切換。 

6.3 彈框 

在常規(guī)的app中，我們知道一個頁面中彈框的優(yōu)先級是最高的，會強制用戶閱讀彈框內(nèi)容，只有手動關(guān)閉彈框才能執(zhí)行其他動作；但是在小程序中，導(dǎo)航欄與標簽欄的層級最高，彈框不能置為最頂層，所以用戶依舊可以點擊標簽欄切換不同的界面。 

如上：每日優(yōu)鮮的APP中，彈框?qū)蛹壸罡撸瑑?nèi)容非常醒目；但是在小程序中，背景遮罩不能覆蓋導(dǎo)航欄和標簽欄，彈框的展示效果較弱。 

6.4 引導(dǎo)頁/閃屏頁 

當我們下載一個新app的時候，經(jīng)常會看到2-4張的引導(dǎo)頁，主要介紹產(chǎn)品的一些核心功能和具體的玩法，讓用戶有對產(chǎn)品屬性有一定感知；在日常啟動app的時候，也經(jīng)常會看到一些閃屏頁，主要展示平臺合作商的一些廣告（增加盈利）、節(jié)假日的問候（增強產(chǎn)品溫度）等。 

小程序內(nèi)受制于微信的框架，所以是沒有引導(dǎo)頁和閃屏頁的，這在產(chǎn)品推廣和情感溫度的表達上就會差一些。 

6.5 消息推送 

普通app會隔三差五的給用戶推送消息，甚至是廣告，好處是可以提示用戶打開應(yīng)用，增加啟動應(yīng)用的頻率，提升產(chǎn)品活躍度，壞處是過多的消息推送會對用戶產(chǎn)生干擾，逼死強迫癥用戶； 

小程序是不允許主動給用戶推送廣告的，僅能回復(fù)模版消息，站在不打擾用戶的角度來說產(chǎn)品體驗比較好。 

7、用戶體驗 

 1，雖然現(xiàn)在小程序的入口提到微信首頁，通過下拉就能輕松獲取，但至少需要點擊3步才能打開對應(yīng)的小程序；

原生App是直接下載在用戶的手機桌面上，所以在打開方式上，原生App會更快速一些； 

 2，流暢度上，雖然小程序流暢度還不錯，但是當切換界面的層級較深、加載動態(tài)數(shù)據(jù)時還是會存在部分卡頓現(xiàn)象；app在界面切換的流暢度以及加載數(shù)據(jù)的響應(yīng)速度都會比小程序更好一些； 

 3，在原生app中經(jīng)常會看到一些非常有趣的動畫展示，氛圍感特別濃烈，帶給用戶非常友好的沉浸感和歸屬感；但是在小程序中，受到內(nèi)存的控制，動畫展示的元素會非常少，因而在界面的切換體驗中會覺得非常單一、平淡，很難給用戶留下深刻印象。 

 4，雖然微信公眾號與小程序可以快速互通響應(yīng)，但是在小程序與App的關(guān)聯(lián)體驗就會相對較差；目前如果從一個小程序打開對應(yīng)的App，需要先打開客服對話框—回復(fù)提示數(shù)字—客服發(fā)送鏈接—點開鏈接才能響應(yīng)App，整個步驟相對比較繁瑣，體驗較差。

（當然，作為騰訊來講，肯定也不希望用戶從自己的平臺跳到別的平臺，為別的平臺去創(chuàng)造流量，除非是自己騰訊體系的產(chǎn)品） 

寫在最后 

小程序和App的區(qū)別有很多，兩者的關(guān)系是既可以相互補充，又可以完全獨立。對于APP來說，打通了微信的流量，更加容易引流獲客，通過小程序，降低了用戶體驗部分核心功能的門檻；對小程序來說，拓展了功能，實現(xiàn)了互通共贏。 

小程序從發(fā)布至今，已有兩年半的時間了，曾經(jīng)也經(jīng)歷過低迷期，但是隨著微信的迭代更新，小程序自身的逐步優(yōu)化，目前已越來越受歡迎，越來越多的企業(yè)都加入到小程序的陣列當中。我們在設(shè)計以上應(yīng)該考慮小程序與App的諸多區(qū)別，分析他們的優(yōu)劣勢，選擇合適的方向去研發(fā)屬于自己品牌調(diào)性的應(yīng)用。

原文作者：鋒HENG