超詳細的微信小程序設計經驗分享
發布時間：2021-05-06閱讀次數：8409
1、小程序演化史
“小程序是一種不需要下載安裝即可使用的應用，它實現了應用“觸手可及”的夢想，用戶掃一掃或者搜一下即可打開應用。這體現了“用完即走”的理念，用戶不用擔心是否安裝了太多應用的問題。應用將無處不在，隨時可用，但又無需安裝卸載。”——這是張小龍最初對小程序的介紹。
2017年1月9日，小程序正式上線（這時的小程序只能由企業來開發），用戶可以體驗到各種各樣小程序提供的服務。
2017年3月，小程序開放了對個人開發者的支持。同時微信也為小程序定制了專門的“菊花碼”
2018年9月，上線“云開發”能力，進一步降低小程序開發門檻。
2019年7月，開放“一物一碼”能力，使每一個商品都成為一個小程序入口。
2019年8月，全面支持pc版微信打開和分享微信小程序。同時期，已有微信小程序、QQ小程序、快應用、百度小程序、支付寶小程序、頭條小程序、抖音小程序等等應用開發平臺上線。
2020年6月，《2020小程序年中報告》顯示，截止至6月底，全網小程序數量相比2019年增長約56.7%，攀升至550萬；DAU（日活躍用戶數）為4.4億。
2、小程序與APP有什么區別
01、主要用戶群體不一樣
APP理論上面對的是全球30億的手機用戶，只要有手機就可以下載并使用app，小程序是基于微信生態圈，理論上是坐擁微信10億用戶。
02、開發成本不一樣
APP需要配對ios、android雙平臺，并適配各種主流手機，開發流程比較復雜，一款完善的雙平臺app平均開發周期大約需要3個月，同時維護起來也相對更加麻煩。同時，受制于各大應用商店的規范中，兩端產品上架后用戶需重新更新安裝。
小程序是以H5為基礎，基于微信平臺提供豐富系統與平臺接口的應用，開發環境簡單、代碼復用性強，只需要一次開發，并且不需要適配多平臺的手機操作系統，平均開發周期只需要2-3周。
03、體積大小不一樣
APP基本是幾十M的體積，下載和安裝需要耗費一定時間成本。早期手機內存小，用戶可能對容量比較在意，現在手機容量越來越大，用戶可能對小程序節省的空間并不敏感，更多考慮的應該是產品的使用場景了。
小程序不用安裝和卸載，體積比較小，控制在2m內，還沒有平時我們用手機咔嚓一聲拍的相片大。也正是因為內存的限制，所以很多小程序在功能的設計上都會比較簡單、輕量，符合它“用完即走”的定位。
04、引流推廣
APP需要用戶主動下載，對網絡環境依耐性強。同時獲客成本高，讓用戶去主動下載一個沒有知名度的app的成本比較高昂。但app可以分享到各個平臺，追蹤能力和留存能力好。
小程序可以通過二維碼、微信搜索等方式打開。只能在微信體系內運作，能分享到群，但目前還不能分享到朋友圈，背靠微信十億流量，讓其更容易獲客，更容易引起爆發性傳播，比如之前火到連我媽都知道的跳一跳游戲。但小程序最大的問題就是容易被用戶遺忘，留存困難。而且受制于微信管控，部分敏感內容還容易遭受到微信的封殺。
05、用戶體驗
APP采用的是原生開發，運行速度快。能加載各種動畫效果，在頁面流暢度、視覺效果以及內部功能自主性等方便能做的更好。用戶粘性強，用戶一旦下載，相對于小程序，留存性會更高。
小程序最大的特點是觸手可及，不用安裝。加載速度接近原生（但當它層級很深或者動效比較多的時候也會出現卡頓，所以我們會看到很多小程序層級會做的比較淺，也會擯棄很多不必要的動效）。同時它入口較深，用戶至少也需要3步才能到達自己想去的小程序，平臺的限制也會比較多。
06、功能實現
APP基本上可以實現你所有想要的功能，靈活性很強，但小程序局限于微信平臺所能提供的功能。
3、小程序設計規范詳解
其實小程序的設計規范大致上跟app的差不多，只是小程序存在于微信框架，所以有些地方需要遵循微信的設計規范。建議大家可以先去看看小程序設計規范的官方文件。個人覺得官方文件的參考價值還是蠻大的。以下就微信官方設計指南提到的相關內容以及個人工作中遇到的問題并結合自己日常收集的相關案例來聊一下個人見解。
https://developers.weixin.qq.com/miniprogram/design/
01、小程序設計稿尺寸
小程序開發尺寸是rpx，可以實現一稿適配所有屏幕尺寸。規定屏幕寬為750rpx。如在iPhone6上，屏幕寬度為375px，共有750個物理像素，則750rpx=375px=750物理像素，1rpx=0.5px=1物理像素。
設計師可以不用管這些，直接按iphone6（750*1334）的尺寸來設計即可。
02、小程序組件設計規范
1）小程序導航欄
小程序的所有頁面，包括小程序內嵌網頁和插件，微信都會在其右上角放置官方小程序菜單。開發者不可對其內容自定義，但可選擇深淺兩種基本配色以適應頁面設計風格。——來自小程序設計指南
不過，除了右上角的小程序菜單是固定的、全局性的外，小程序導航欄的其它內容大家都可以根據自己的需求進行自定義。比如以下：
2）小程序標簽分頁欄
這個與app設計幾乎一樣，對于標簽分頁欄，小程序同樣支持手指點擊切換或者滑動切換，比如騰訊視頻小程序頂部tab欄支持手指滑動切換：
3）小程序彈窗不遮擋標題欄
這是我第一次做小程序遇到的問題，它并不是像app那樣彈窗保持在界面的頂層。小程序會保持標題欄的層級是最高的，或許是為了避免遮擋導航欄右側關閉小程序的那個模塊吧。
4）小程序的返回鍵
小程序每個頁面都需要有返回鍵，但分享的鏈接除外，返回鍵可以用首頁鍵代替。
5）小程序底部導航欄
建議數量在2-4個，也可以根據產品需求去掉底部標簽欄。同時受制于體積大小，小程序底部導航欄的切換樣式相比于app會更加的簡單。
03、小程序用戶體驗要點
1）減少等待，及時反饋
頁面的過長時間的等待會引起用戶的不良情緒，使用微信小程序項目提供的技術已能很大程度縮短等待時間。即便如此，當不可避免的出現了加載和等待的時候，需要予以及時的反饋以舒緩用戶等待的不良情緒。——來自小程序設計指南
“避免不了等待？那就優化它吧”。電梯誰都坐過，在電梯人很多的情況下，大部分人更喜歡有廣告視頻播放的電梯，因為它會分散我的注意力，緩解我們坐電梯的焦慮。同樣，數據顯示，頁面在0.1秒內反饋用戶是可以接受的，這是產品體驗很流暢的狀態，如果超過1秒的等待，用戶就會注意到延遲，而如果超過8秒，那大部分用戶可能就直接選擇關閉這個頁面了。盡管我們可能無法減少絕對的等待時間，但可以采用一些界面設計技巧來減輕等待給用戶帶來的不良情緒。
2）減少輸入
由于手機鍵盤區域小且密集，輸入困難的同時還易引起輸入錯誤，因此在設計小程序頁面時因盡量減少用戶輸入，利用現有接口或其他一些易于操作的選擇控件來改善用戶輸入的體驗。——來自小程序設計指南
這的確是其中一個原因。我認為還有另外兩個重要的原因，一是因為懶，懶是大部分人的天性，當人因為懶而減少能量消耗時，大腦會釋放快樂的多巴胺，所以我們需要幫助用戶盡量的減少額外的工作。第二是因為在小程序里面輸入大量信息并不容易，現在雖然有懸浮窗口幫忙，但受制于手機尺寸大小的限制，閱讀/選擇往往比直接輸入更容易讓用戶接受，所以在用戶進行大量信息輸入的時候我們一定要考慮輸入成本和輸入效率對用戶體驗的影響。
作為剁手深度患者，退貨幾乎是常有的事情，樓下韻達8元起送，所以上門取件和驛站寄回都不是我的首選，而它們對地址的“自動識別”功能是我覺得用起來非常棒的一個設計。
在不得不讓用戶進行手動輸入時，應盡量讓用戶做選擇而不是鍵盤輸入，因為回憶易于記憶。這個時候表單的自動填寫或自動匹配功能，就能夠幫助用戶降低輸入負荷，提高填寫效率。比如下面的貝殼找房小程序，在“我要出租”的表單錄入欄目，將用戶在平臺中已輸入的相同信息自動帶入了表單，同時預設了每個樓盤的樓棟單元與房號，這樣用戶只需要選擇就可以了。我之前遇到過一些表單，還會在我輸入身份證之后，自動分析獲取我的出生日期和性別，這種體驗也是很棒。
在搜索頁面，提供“搜索歷史”“熱門搜索”來幫助用戶快速搜索，從而減少和避免不必要的鍵盤輸入。
3）重點突出、流程明確
每個頁面都應有明確的重點，以便于用戶每進入一個新頁面的時候都能快速地理解頁面內容”——來自小程序設計指南
現在是移動端信息大爆發時代，用戶每天都要接收很多來自四面八方的信息，沒有人愿意去仔細閱讀你頁面上的每一個文字，如果他們不能很快的找到他們想要的信息，對不起，他們可能很快的就投入到你競爭對手的懷抱里去了。所以我們在設計頁面的時候可以遵循以下幾點：
1、做符合用戶習慣的設計。現在很多大廠產品已經把用戶習慣培養的很成熟了，我們沒有必要再去大改它們。
2、通過突出頁面重點信息，達到頁面“一目了然”的問題，建立清晰的視覺層次。
小年糕小程序最主要的兩個功能是“制作影集”和“觀看視頻”，所以小年糕小程序的首頁把“帶紅色+icon的制作影集”放入tab欄，內容區做卡片流的視頻展示效果，同時右下角放置了“紅色發視頻的icon”，當用戶進入小程序之后，視覺自然就放在了這幾個視覺重點上。而小年糕受眾群體多為中老年人，所以大家可以看到它所有界面的字體都經過了放大處理，按鈕很大很清晰，同時功能簡單，操作很容易上手，這對中老年人群來說是非常友好的。
4）簡潔輕量
不同于傳統APP，“觸手可及、用完就走”是小程序的最大特點。所以很多小程序的業務都很簡單，它只專注于服務單一場景。很多公司也會把自身的業務分成多個小程序，針對不同的場景和人群提供特定的服務，這個就是小程序矩陣。小程序矩陣可以讓小程序加載速度更快，同時做垂直的小程序也能暴露更多的關鍵詞，讓其命中搜索的機會更大，并且可以分攤被微信封禁的危險。
4、小程序會去掉APP嗎？
第一、張小龍說過，小程序未來會替代80%的app。比如摩拜單車，對于新用戶來說，想要騎單車就必須下載app，但在信號不佳或者流量不夠的情況下就很難完成。而小程序的出現就挽回了很多需要臨時用車的新用戶。數據顯示，小程序推出后其app的下載量出現了大量下跌，大家更傾向于用小程序打開這種使用場景較少或特定場景下使用的軟件，我認為小程序對這種“輕型”app造成了威脅。
基于小程序“輕便”的特點，小程序能展現的都只是app的部分核心功能，而小程序其“無需下載即用即走”的特點，它能替代的也都是一些功能簡單、較不常用的app，比如點餐、電影購票、天氣等等，而對于功能強大或者自己經常使用的app比如京東、淘寶以及一些大型的游戲app等，小程序是沒法代替的。因為他們app的功能更強大，畫面更精美。
可以這樣說，小程序和APP不是簡單的替代和復制的關系，他們各有特色，適用于不同需求的客戶。
第二、小程序是在微信生態平臺下運作的，所有的規則和功能都受制于微信，比如2020年2月28日，微信因為外鏈封死飛書的事件，大家都還記得。所以商業公司肯定不希望自己所有的商業和創新都受制于別人。同時小程序的留存和喚醒都比較困難，只有把用戶留在自己的APP里面，才能沉淀用戶數據，做出更多創造性的內容。但“流量在哪里，商機就在哪里“，背靠微信這個巨大的流量池，很多商家建立小程序有一部分原因都是為了宣傳和引流到自己的app。
5、小程序適合什么？
以下為個人淺見，歡迎探討。
01、初創公司
大家都知道，一款APP從開發到上市到推廣并吸引用戶下載，再到用戶留存，需要投入巨大的財力和人力成本。而小程序的開發周期遠比原生應用開發周期短的多，開發成本也相對低很多，所以對于小型創業公司來說，如果沒有足夠的資金支持，想一開始就通過APP做產品和商業化變現的門檻會越來越高。因為周期短成本低同時背靠微信這個流量池，所以小程序是很多小型創業公司前期切入市場最快、最經濟的方式之一，也給小型創業公司帶來了很多機會，比如做短視頻內容的小年糕，都是借助微信小程序的流量生態成長起來的。
02、游戲/工具類
小程序的核心還是“用完即走”，很多用戶沒有必要為了偶爾的打個車、查個東西而去下載個app。而短暫時間內的斗個地主、玩個游戲也不用去下載個app然后注冊登錄，但小程序留存困難是事實，想要獲取流量和用戶，需要足夠的日活或者持續輸出爆款，這應該并不容易。
03、第三方服務商
張小龍最初對小程序的定義中曾經提到過，“激活線下流量才是小程序的真正核心”。
近些年來，線上渠道因其便捷、跨區域的特點，讓我們的生活更加的便利，而在線下，小程序通過其“無需下載、用完即走”的特性，也正在慢慢改變了我們的生活方式。比如餐廳點餐慢慢的從人工點餐到掃桌面二維碼點餐，快餐消費比如肯德基、部分奶茶可以接受提前點單到店自取，免去了排隊時間。
而目前中國大量的餐飲、零售業品牌都想借助互聯網實現產業升級，所以你會發現像有贊、阿拉丁這些第三方服務平臺業務都還不錯，一個小商鋪只需要花費兩三千用幾天時間就能做出自己的線上平臺，小程序正是這種最簡單最低成本的連接線上線下的橋梁。
總結
小程序的出現，給了很多中小型商家走進互聯網的機會，讓線下產生了更多的可能。它對于生活智能的不斷探索極大的豐富了我們的生活，未來小程序可能是連接更多的線下場景和服務。對于用戶來說，不用再擔心安裝太多的不常用的應用，真正體現了“用完就走”的理念。而對于線下商戶來說，可以借助小程序將線下的流量轉化到線上。
而對于我們設計師來說，要想做好一個產品，必須先要去了解它、理清它的邏輯。小程序也是如此，了解它的特點、場景、定位，知道它與APP的諸多區別，才能做出更好的屬于自己品牌調性的設計。
