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

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

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

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

首先來(lái)說(shuō)一下小程序的背景吧： 

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

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

1、用戶群 

2、下載及安裝 

3、開(kāi)發(fā)成本 

4、引流推廣 

5、產(chǎn)品定位

6、基礎(chǔ)框架 

7、用戶體驗(yàn) 

1、用戶群 

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

2、下載及安裝 

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

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

3、開(kāi)發(fā)成本 

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

而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ā)成本較高。 

4、引流推廣 

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

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

5、產(chǎn)品定位 

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

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

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

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

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

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

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

6、基礎(chǔ)框架 

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

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

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

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

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

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

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

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

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

6.2 底部標(biāo)簽欄 

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

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

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

如上：美團(tuán)外賣(mài)app中，tab切換時(shí)每個(gè)圖標(biāo)都有縮放的動(dòng)態(tài)效果，視覺(jué)表現(xiàn)強(qiáng)烈；而在小程序中則表現(xiàn)較為單一，利用不同的顏色進(jìn)行區(qū)分。  

如上：愛(ài)奇藝app中，每個(gè)圖標(biāo)切換時(shí)，標(biāo)簽欄的邊界都會(huì)隨圖標(biāo)的縮放一起抖動(dòng)，非常生動(dòng)有趣；而在小程序中使用的是常規(guī)的線面切換。 

6.3 彈框 

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

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

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

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

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

6.5 消息推送 

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

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

7、用戶體驗(yàn) 

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

原生App是直接下載在用戶的手機(jī)桌面上，所以在打開(kāi)方式上，原生App會(huì)更快速一些； 

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

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

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

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

寫(xiě)在最后 

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

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

原文作者：鋒HENG