今天給大家推薦一篇關(guān)于微信小程序設(shè)計經(jīng)驗的分享，小程序在線下生活場景中出現(xiàn)的次數(shù)越來越多，讓我們一起來聊聊它吧！ 正文 從年初到現(xiàn)在大概做了七八個微信小程序，也看了很多小程序，思考了很多，所以整理出了這篇文章，拿出來與大家交流一下。因為個人做的小程序

今天給大家推薦一篇關(guān)于微信小程序設(shè)計經(jīng)驗的分享，小程序在線下生活場景中出現(xiàn)的次數(shù)越來越多，讓我們一起來聊聊它吧！

從年初到現(xiàn)在大概做了七八個微信小程序，也看了很多小程序，思考了很多，所以整理出了這篇文章，拿出來與大家交流一下。因為個人做的小程序項目皆屬于微信小程序。所以以下文章涉及的“小程序”，如無特殊注釋，均指微信小程序。

文章分為三大類，一、二為小程序的基礎(chǔ)介紹，三為小程序設(shè)計規(guī)范，四、五是個人對小程序的一些拙見。

“小程序是一種不需要下載安裝即可使用的應(yīng)用，它實現(xiàn)了應(yīng)用“觸手可及”的夢想，用戶掃一掃或者搜一下即可打開應(yīng)用。這體現(xiàn)了“用完即走”的理念，用戶不用擔(dān)心是否安裝了太多應(yīng)用的問題。應(yīng)用將無處不在，隨時可用，但又無需安裝卸載。”——這是張小龍最初對小程序的介紹。

2017年1月9日，小程序正式上線 （這時的小程序只能由企業(yè)來開發(fā)），用戶可以體驗到各種各樣小程序提供的服務(wù)。

2017年3月，小程序開放了對個人開發(fā)者的支持。同時微信也為小程序定制了專門的“菊花碼”

2018年9月，上線“云開發(fā)”能力，進(jìn)一步降低小程序開發(fā)門檻。

2019年7月，開放“一物一碼”能力，使每一個商品都成為一個小程序入口。

2019年8月，全面支持pc版微信打開和分享微信小程序。同時期，已有微信小程序、QQ小程序、快應(yīng)用、百度小程序、支付寶小程序、頭條小程序、抖音小程序等等應(yīng)用開發(fā)平臺上線。

2020年6月，《2020小程序年中報告》顯示，截止至6月底，全網(wǎng)小程序數(shù)量相比2019年增長約56.7%，攀升至550萬；DAU（日活躍用戶數(shù)）為4.4億。

1、主要用戶群體不一樣

APP理論上面對的是全球30億的手機(jī)用戶，只要有手機(jī)就可以下載并使用app

小程序是基于微信生態(tài)圈，理論上是坐擁微信10億用戶。

2、開發(fā)成本不一樣

APP需要配對ios、android雙平臺，并適配各種主流手機(jī)，開發(fā)流程比較復(fù)雜，一款完善的雙平臺app平均開發(fā)周期大約需要3個月，同時維護(hù)起來也相對更加麻煩。同時，受制于各大應(yīng)用商店的規(guī)范中，兩端產(chǎn)品上架后用戶需重新更新安裝。

小程序是以H5為基礎(chǔ)，基于微信平臺提供豐富系統(tǒng)與平臺接口的應(yīng)用，開發(fā)環(huán)境簡單、代碼復(fù)用性強(qiáng)，只需要一次開發(fā)，并且不需要適配多平臺的手機(jī)操作系統(tǒng)，平均開發(fā)周期只需要2-3周。

3、體積大小不一樣

APP基本是幾十M的體積，下載和安裝需要耗費一定時間成本。早期手機(jī)內(nèi)存小，用戶可能對容量比較在意，現(xiàn)在手機(jī)容量越來越大，用戶可能對小程序節(jié)省的空間并不敏感，更多考慮的應(yīng)該是產(chǎn)品的使用場景了。

小程序不用安裝和卸載，體積比較小，控制在2m內(nèi)，還沒有平時我們用手機(jī)咔嚓一聲拍的相片大。也正是因為內(nèi)存的限制，所以很多小程序在功能的設(shè)計上都會比較簡單、輕量，符合它“用完即走”的定位。

4、引流推廣

APP需要用戶主動下載，對網(wǎng)絡(luò)環(huán)境依耐性強(qiáng)。同時獲客成本高，讓用戶去主動下載一個沒有知名度的app的成本比較高昂。但app可以分享到各個平臺，追蹤能力和留存能力好。

小程序可以通過二維碼、微信搜索等方式打開。只能在微信體系內(nèi)運作，能分享到群，但目前還不能分享到朋友圈，背靠微信十億流量，讓其更容易獲客，更容易引起爆發(fā)性傳播，比如之前火到連我媽都知道的跳一跳游戲。但小程序最大的問題就是容易被用戶遺忘，留存困難。而且受制于微信管控，部分敏感內(nèi)容還容易遭受到微信的封殺。

5、用戶體驗

APP采用的是原生開發(fā)，運行速度快。能加載各種動畫效果，在頁面流暢度、視覺效果以及內(nèi)部功能自主性等方便能做的更好。用戶粘性強(qiáng)，用戶一旦下載，相對于小程序，留存性會更高。

小程序最大的特點是觸手可及，不用安裝。加載速度接近原生（但當(dāng)它層級很深或者動效比較多的時候也會出現(xiàn)卡頓，所以我們會看到很多小程序?qū)蛹墪龅谋容^淺，也會擯棄很多不必要的動效）。同時它入口較深，用戶至少也需要3步才能到達(dá)自己想去的小程序，平臺的限制也會比較多。

6、功能實現(xiàn)

APP基本上可以實現(xiàn)你所有想要的功能，靈活性很強(qiáng)，但小程序局限于微信平臺所能提供的功能。

小程序設(shè)計規(guī)范

其實小程序的設(shè)計規(guī)范大致上跟app的差不多，只是小程序存在于微信框架，所以有些地方需要遵循微信的設(shè)計規(guī)范。建議大家可以先去看看小程序設(shè)計規(guī)范的官方文件。個人覺得官方文件的參考價值還是蠻大的。以下就微信官方設(shè)計指南提到的相關(guān)內(nèi)容以及個人工作中遇到的問題并結(jié)合自己日常收集的相關(guān)案例來聊一下個人見解。

https://developers.weixin.qq.com/miniprogram/design/

1、小程序設(shè)計稿尺寸

小程序開發(fā)尺寸是rpx，可以實現(xiàn)一稿適配所有屏幕尺寸。規(guī)定屏幕寬為750rpx。如在 iPhone6 上，屏幕寬度為375px，共有750個物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

設(shè)計師可以不用管這些，直接按iphone6（750*1334）的尺寸來設(shè)計即可。

創(chuàng)新互聯(lián)建站微信小程序設(shè)計經(jīng)驗分享

尺寸單位

rpx (responsive pixel):可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)。規(guī)定屏幕寬為750rpx。如在iPhone6上,屏幕寬度為375px,共有750個物理像素，則750rpx = 375px = 750物理像索，1rpx = 0.5px = 1物理像素。
設(shè)備              rpx換算px (屏幕寬度/750)   px換算rpx (750/屏幕寬度)
iPhone5         1rpx = 0.42px                   1px = 2.34rpx
iPhone6         1rpx = 0.5px                     1px = 2rpx
iPhone6 Plus  1rpx = 0.552px                 1px = 1.81rpx

建議:開發(fā)微信小程序時設(shè)計師可以用iPhone6作為視覺稿的標(biāo)準(zhǔn)。

注意:在較小的屏幕上不可避免的會有-些毛刺，請在開發(fā)時盡量避免這種情況。

2、小程序組件設(shè)計規(guī)范

1）小程序?qū)Ш綑?/strong>

小程序的所有頁面，包括小程序內(nèi)嵌網(wǎng)頁和插件，微信都會在其右上角放置官方小程序菜單。開發(fā)者不可對其內(nèi)容自定義，但可選擇深淺兩種基本配色以適應(yīng)頁面設(shè)計風(fēng)格。——來自小程序設(shè)計指南

不過，除了右上角的小程序菜單是固定的、全局性的外，小程序?qū)Ш綑诘钠渌鼉?nèi)容大家都可以根據(jù)自己的需求進(jìn)行自定義。

2）小程序標(biāo)簽分頁欄

這個與app設(shè)計幾乎一樣，對于標(biāo)簽分頁欄，小程序同樣支持手指點擊切換或者滑動切換，比如騰訊視頻小程序頂部tab欄支持手指滑動切換

3）小程序彈窗不遮擋標(biāo)題欄

這是我第一次做小程序遇到的問題，它并不是像app那樣彈窗保持在界面的頂層。小程序會保持標(biāo)題欄的層級是最高的，或許是為了避免遮擋導(dǎo)航欄右側(cè)關(guān)閉小程序的那個模塊吧。

4）小程序的返回鍵

小程序每個頁面都需要有返回鍵，但分享的鏈接除外，返回鍵可以用首頁鍵代替。

5）小程序底部導(dǎo)航欄

建議數(shù)量在2-4個，也可以根據(jù)產(chǎn)品需求去掉底部標(biāo)簽欄。同時受制于體積大小，小程序底部導(dǎo)航欄的切換樣式相比于app會更加的簡單。

3、小程序用戶體驗要點

1）減少等待，及時反饋

頁面的過長時間的等待會引起用戶的不良情緒，使用微信小程序項目提供的技術(shù)已能很大程度縮短等待時間。即便如此，當(dāng)不可避免的出現(xiàn)了加載和等待的時候，需要予以及時的反饋以舒緩用戶等待的不良情緒。——來自小程序設(shè)計指南

“避免不了等待？那就優(yōu)化它吧”。電梯誰都坐過，在電梯人很多的情況下，大部分人更喜歡有廣告視頻播放的電梯，因為它會分散我的注意力，緩解我們坐電梯的焦慮。同樣，數(shù)據(jù)顯示，頁面在0.1秒內(nèi)反饋用戶是可以接受的，這是產(chǎn)品體驗很流暢的狀態(tài)，如果超過1秒的等待，用戶就會注意到延遲，而如果超過8秒，那大部分用戶可能就直接選擇關(guān)閉這個頁面了。盡管我們可能無法減少絕對的等待時間，但可以采用一些界面設(shè)計技巧來減輕等待給用戶帶來的不良情緒。

2）減少輸入

由于手機(jī)鍵盤區(qū)域小且密集，輸入困難的同時還易引起輸入錯誤，因此在設(shè)計小程序頁面時因盡量減少用戶輸入，利用現(xiàn)有接口或其他一些易于操作的選擇控件來改善用戶輸入的體驗。——來自小程序設(shè)計指南 

這的確是其中一個原因。我認(rèn)為還有另外兩個重要的原因，一是因為懶，懶是大部分人的天性，當(dāng)人因為懶而減少能量消耗時，大腦會釋放快樂的多巴胺，所以我們需要幫助用戶盡量的減少額外的工作。第二是因為在小程序里面輸入大量信息并不容易，現(xiàn)在雖然有懸浮窗口幫忙，但受制于手機(jī)尺寸大小的限制，閱讀/選擇往往比直接輸入更容易讓用戶接受，所以在用戶進(jìn)行大量信息輸入的時候我們一定要考慮輸入成本和輸入效率對用戶體驗的影響。

作為剁手深度患者，退貨幾乎是常有的事情，樓下韻達(dá)8元起送，所以上門取件和驛站寄回都不是我的選，而它們對地址的“自動識別”功能是我覺得用起來非常棒的一個設(shè)計。

在不得不讓用戶進(jìn)行手動輸入時，應(yīng)盡量讓用戶做選擇而不是鍵盤輸入，因為回憶易于記憶。這個時候表單的自動填寫或自動匹配功能，就能夠幫助用戶降低輸入負(fù)荷，提高填寫效率。比如下面的貝殼找房小程序，在“我要出租”的表單錄入欄目，將用戶在平臺中已輸入的相同信息自動帶入了表單，同時預(yù)設(shè)了每個樓盤的樓棟單元與房號，這樣用戶只需要選擇就可以了。我之前遇到過一些表單，還會在我輸入身份證之后，自動分析獲取我的出生日期和性別，這種體驗也是很棒。

在搜索頁面，提供“搜索歷史”“熱門搜索”來幫助用戶快速搜索，從而減少和避免不必要的鍵盤輸入。

3）重點突出、流程明確

每個頁面都應(yīng)有明確的重點，以便于用戶每進(jìn)入一個新頁面的時候都能快速地理解頁面內(nèi)容 ”——來自小程序設(shè)計指南 

現(xiàn)在是移動端信息大爆發(fā)時代，用戶每天都要接收很多來自四面八方的信息，沒有人愿意去仔細(xì)閱讀你頁面上的每一個文字，如果他們不能很快的找到他們想要的信息，對不起，他們可能很快的就投入到你競爭對手的懷抱里去了。所以我們在設(shè)計頁面的時候可以遵循以下幾點： 

1、做符合用戶習(xí)慣的設(shè)計。現(xiàn)在很多大廠產(chǎn)品已經(jīng)把用戶習(xí)慣培養(yǎng)的很成熟了，我們沒有必要再去大改它們。2、通過突出頁面重點信息，達(dá)到頁面“一目了然”的問題，建立清晰的視覺層次。

小年糕小程序最主要的兩個功能是“制作影集”和“觀看視頻”，所以小年糕小程序的首頁把“帶紅色+icon的制作影集”放入tab欄，內(nèi)容區(qū)做卡片流的視頻展示效果，同時右下角放置了“紅色發(fā)視頻的icon”，當(dāng)用戶進(jìn)入小程序之后，視覺自然就放在了這幾個視覺重點上。而小年糕受眾群體多為中老年人，所以大家可以看到它所有界面的字體都經(jīng)過了放大處理，按鈕很大很清晰，同時功能簡單，操作很容易上手，這對中老年人群來說是非常友好的。

4）簡潔輕量

不同于傳統(tǒng)APP，“觸手可及、用完就走”是小程序的最大特點。所以很多小程序的業(yè)務(wù)都很簡單，它只專注于服務(wù)單一場景。很多公司也會把自身的業(yè)務(wù)分成多個小程序，針對不同的場景和人群提供特定的服務(wù)，這個就是小程序矩陣。小程序矩陣可以讓小程序加載速度更快，同時做垂直的小程序也能暴露更多的關(guān)鍵詞，讓其命中搜索的機(jī)會更大，并且可以分?jǐn)偙晃⑿欧饨奈ｋU。

第一、張小龍說過，小程序未來會替代80%的app。比如摩拜單車，對于新用戶來說，想要騎單車就必須下載app，但在信號不佳或者流量不夠的情況下就很難完成。而小程序的出現(xiàn)就挽回了很多需要臨時用車的新用戶。數(shù)據(jù)顯示，小程序推出后其app的下載量出現(xiàn)了大量下跌，大家更傾向于用小程序打開這種使用場景較少或特定場景下使用的軟件，我認(rèn)為小程序?qū)@種“輕型”app造成了威脅。

基于小程序“輕便”的特點，小程序能展現(xiàn)的都只是app的部分核心功能，而小程序其“無需下載即用即走”的特點，它能替代的也都是一些功能簡單、較不常用的app，比如點餐、電影購票、天氣等等，而對于功能強(qiáng)大或者自己經(jīng)常使用的app比如京東、淘寶以及一些大型的游戲app等，小程序是沒法代替的。因為他們app的功能更強(qiáng)大，畫面更精美。

可以這樣說，小程序和APP不是簡單的替代和復(fù)制的關(guān)系，他們各有特色，適用于不同需求的客戶。

第二、小程序是在微信生態(tài)平臺下運作的，所有的規(guī)則和功能都受制于微信，比如2020年2月28日，微信因為外鏈封死飛書的事件，大家都還記得。所以商業(yè)公司肯定不希望自己所有的商業(yè)和創(chuàng)新都受制于別人。同時小程序的留存和喚醒都比較困難，只有把用戶留在自己的APP里面，才能沉淀用戶數(shù)據(jù)，做出更多創(chuàng)造性的內(nèi)容。但“流量在哪里，商機(jī)就在哪里“，背靠微信這個巨大的流量池，很多商家建立小程序有一部分原因都是為了宣傳和引流到自己的app。

小程序適合做什么

以下為個人淺見，歡迎探討。

1、初創(chuàng)公司

大家都知道，一款A(yù)PP從開發(fā)到上市到推廣并吸引用戶下載，再到用戶留存，需要投入巨大的財力和人力成本。而小程序的開發(fā)周期遠(yuǎn)比原生應(yīng)用開發(fā)周期短的多，開發(fā)成本也相對低很多，所以對于小型創(chuàng)業(yè)公司來說，如果沒有足夠的資金支持，想一開始就通過APP做產(chǎn)品和商業(yè)化變現(xiàn)的門檻會越來越高。因為周期短成本低同時背靠微信這個流量池，所以小程序是很多小型創(chuàng)業(yè)公司前期切入市場最快、最經(jīng)濟(jì)的方式之一，也給小型創(chuàng)業(yè)公司帶來了很多機(jī)會，比如做短視頻內(nèi)容的小年糕，都是借助微信小程序的流量生態(tài)成長起來的。

2、游戲/工具類

小程序的核心還是“用完即走”，很多用戶沒有必要為了偶爾的打個車、查個東西而去下載個app。而短暫時間內(nèi)的斗個地主、玩?zhèn)€游戲也不用去下載個app然后注冊登錄，但小程序留存困難是事實，想要獲取流量和用戶，需要足夠的日活或者持續(xù)輸出爆款，這應(yīng)該并不容易。

3、第三方服務(wù)商

張小龍最初對小程序的定義中曾經(jīng)提到過，“激活線下流量才是小程序的真正核心”。

近些年來，線上渠道因其便捷、跨區(qū)域的特點，讓我們的生活更加的便利，而在線下，小程序通過其 "無需下載、用完即走” 的特性，也正在慢慢改變了我們的生活方式。比如餐廳點餐慢慢的從人工點餐到掃桌面二維碼點餐，快餐消費比如肯德基、部分奶茶可以接受提前點單到店自取，免去了排隊時間。

而目前中國大量的餐飲、零售業(yè)品牌都想借助互聯(lián)網(wǎng)實現(xiàn)產(chǎn)業(yè)升級，所以你會發(fā)現(xiàn)像有贊、阿拉丁這些第三方服務(wù)平臺業(yè)務(wù)都還不錯，一個小商鋪只需要花費兩三千用幾天時間就能做出自己的線上平臺，小程序正是這種最簡單最低成本的連接線上線下的橋梁。

創(chuàng)新互聯(lián)總結(jié)

小程序的出現(xiàn)，給了很多中小型商家走進(jìn)互聯(lián)網(wǎng)的機(jī)會，讓線下產(chǎn)生了更多的可能。它對于生活智能的不斷探索極大的豐富了我們的生活，未來小程序可能是連接更多的線下場景和服務(wù)。對于用戶來說，不用再擔(dān)心安裝太多的不常用的應(yīng)用，真正體現(xiàn)了“用完就走”的理念。而對于線下商戶來說，可以借助小程序?qū)⒕€下的流量轉(zhuǎn)化到線上。

而對于我們設(shè)計師來說，要想做好一個產(chǎn)品，必須先要去了解它、理清它的邏輯。小程序也是如此，了解它的特點、場景、定位，知道它與APP的諸多區(qū)別，才能做出更好的屬于自己品牌調(diào)性的設(shè)計。