微信小程序設(shè)計(jì)經(jīng)驗(yàn)分享

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

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

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

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

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

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

2017年3月，小程序開(kāi)放了對(duì)個(gè)人開(kāi)發(fā)者的支持。同時(shí)微信也為小程序定制了專門(mén)的“菊花碼”

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

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

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

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

1、主要用戶群體不一樣

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

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

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

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

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

3、體積大小不一樣

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

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

4、引流推廣

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

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

5、用戶體驗(yàn)

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

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

6、功能實(shí)現(xiàn)

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

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

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

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

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

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

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

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

尺寸單位

rpx (responsive pixel):可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)。規(guī)定屏幕寬為750rpx。如在iPhone6上,屏幕寬度為375px,共有750個(gè)物理像素，則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

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

注意:在較小的屏幕上不可避免的會(huì)有-些毛刺，請(qǐng)?jiān)陂_(kāi)發(fā)時(shí)盡量避免這種情況。

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

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

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

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

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

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

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

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

4）小程序的返回鍵

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

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

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

3、小程序用戶體驗(yàn)要點(diǎn)

1）減少等待，及時(shí)反饋

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

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

2）減少輸入

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

這的確是其中一個(gè)原因。我認(rèn)為還有另外兩個(gè)重要的原因，一是因?yàn)閼?，懶是大部分人的天性，?dāng)人因?yàn)閼卸鴾p少能量消耗時(shí)，大腦會(huì)釋放快樂(lè)的多巴胺，所以我們需要幫助用戶盡量的減少額外的工作。第二是因?yàn)樵谛〕绦蚶锩孑斎氪罅啃畔⒉⒉蝗菀?，現(xiàn)在雖然有懸浮窗口幫忙，但受制于手機(jī)尺寸大小的限制，閱讀/選擇往往比直接輸入更容易讓用戶接受，所以在用戶進(jìn)行大量信息輸入的時(shí)候我們一定要考慮輸入成本和輸入效率對(duì)用戶體驗(yàn)的影響。

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

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

在搜索頁(yè)面，提供“搜索歷史”“熱門(mén)搜索”來(lái)幫助用戶快速搜索，從而減少和避免不必要的鍵盤(pán)輸入。

3）重點(diǎn)突出、流程明確

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

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

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

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

4）簡(jiǎn)潔輕量

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

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

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

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

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

小程序適合做什么

以下為個(gè)人淺見(jiàn)，歡迎探討。

1、初創(chuàng)公司

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

2、游戲/工具類

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

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

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

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

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

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

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

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