詳解｜抖音和微信小程序產(chǎn)品設(shè)計區(qū)別

這是Kevin的第 916 篇原創(chuàng)，

持續(xù)日更，做產(chǎn)品經(jīng)理的創(chuàng)業(yè)斜杠青年。

隨著頭條系產(chǎn)品日活躍和用戶數(shù)節(jié)節(jié)攀高，不少小程序的開發(fā)者也開始關(guān)注加入頭條程序和微信小程序開發(fā)者，同時微信小程序官方也更新了小程序設(shè)計規(guī)范，我們做小程序的產(chǎn)品經(jīng)理前，必須要知道官方的小程序設(shè)計規(guī)范。

如果你還不知道小程序的標準，那今天這篇文章把兩者在功能對比、流量入口、設(shè)計規(guī)范3個維度上的區(qū)別羅列和整理出來。建議收藏，再慢慢閱讀。

1.頭條和微信小程序功能對比

整理得到的頭條小程序、微信小程序在功能對別如下圖，在功能上微信小程序是完勝于頭條小程序的。兩者共有的能力只有搜券、轉(zhuǎn)發(fā)、獲取地理位置、打開地圖、支付能力、地址服務、獲取用戶信息、內(nèi)容風控和廣告

▲  兩者小程序的功能對比 

2.小程序的流量入口

許多人做小程序是因為小程序可以快速獲得用戶注冊、用戶拉新門檻低。所以小程序的流量入口成了重要的關(guān)注點。

對比上，微信小程序多了附近小程序、聊天卡片、和安卓桌面的能力，頭條則多了微頭條小程序卡片、分頻道頂部、小視頻詳情頁的展示入口。所以如果是視頻、文章內(nèi)容定位較多的產(chǎn)品，做頭條小程序的入口會更多。

▲  小程序流量入口對比 

用戶進行頭條小程序和微信小程序一樣，需要打開授權(quán)。用戶授權(quán)的能力也可以被舉報，弱若違規(guī)則永久限制小程序使用能力。

▲  頭條小程序和微信小程序開發(fā)區(qū)別 

3.小程序的開發(fā)遷移成本

關(guān)于微信和頭條小程序在開發(fā)技術(shù)上的對比難度就是開發(fā)支持WXS的代碼片段，這導致微信小程序的遷移過程十分復雜。同時頭條小程序暫時不支持分包，導致小程序的加載時間緩慢

▲  頭條小程序開發(fā)者平臺 

微信的格式：wxml,wxs,wsss. 頭條小程序?qū)氖?ttml,js,ttss。其實說白了只是換個格式名。語法和邏輯是基本相同的。需要注意的是語法上的wx，改成了tt。慶幸的是，大部分的接口名，同時頭條小程序也推出了遷移工具。

4.頭條小程序官方小程序設(shè)計規(guī)范

下面是頭條小程序官方給出了頭條小程序的設(shè)計規(guī)范定位描述

明確模式，統(tǒng)一穩(wěn)定

統(tǒng)一的小程序體驗，能讓用戶在小程序的體驗中更加沉浸

重點突出，流程簡單

突出頁面的主要操作，主次清晰，不干擾用戶的決策

統(tǒng)一框架，靈活配置

準確勾勒用戶的體驗流程，避免阻塞用戶的體驗路徑

提供統(tǒng)一的體驗框架，在接入同一個小程序的框架里面

5.微信小程序官方設(shè)計規(guī)范（最新版本）

下面是微信小程序官方給出了微信小程序的設(shè)計規(guī)范定位描述

友好禮貌

為了避免用戶在微信中使用小程序服務時，注意力被周圍復雜環(huán)境干擾，小程序在設(shè)計時應該注意減少無關(guān)的設(shè)計元素對用戶目標的干擾，禮貌地向用戶展示程序提供的服務，友好地引導用戶進行操作。

重點突出

每個頁面都應有明確的重點，以便于用戶每進入一個新頁面的時候都能快速地理解頁面內(nèi)容。在確定了重點的前提下，應盡量避免頁面上出現(xiàn)其它與用戶的決策和操作無關(guān)的干擾因素。

6.微信小程序產(chǎn)品設(shè)計必用模塊規(guī)范

1.頁面內(nèi)加載反饋

詳情頁打開需要加載在小程序里自定義頁面內(nèi)容的加載樣式。建議不管是使用在局部還是全局加載，自定義加載樣式都應該盡可能簡潔，并使用簡單動畫告知用戶加載過程。

2.模態(tài)加載

模態(tài)的加載樣式將覆蓋整個頁面的，由于無法明確告知具體加載的位置或內(nèi)容將可能引起用戶的焦慮感，因此應謹慎使用。除了在某些全局性操作下不要使用模態(tài)的加載。

3.局部加載反饋

局部加載反饋即只在觸發(fā)加載的頁面局部進行反饋，這樣的反饋機制更加有針對性，頁面跳動小，是微信推薦的反饋方式。例如：

4.按鈕狀態(tài)分類

官方給出了最新的小程序按鈕設(shè)計規(guī)范，包含了4個狀態(tài)。分別是正常狀態(tài)、hover態(tài)、點擊態(tài)、禁用態(tài)。

5.頁面局部操作結(jié)果反饋

對于頁面局部的操作，可在操作區(qū)域予以直接反饋，例如點擊多選控件前后如下圖。

6.微信小程序toast

官方最新規(guī)范給出了成功、加載、失敗的三個狀態(tài)。

7.頭條小程序產(chǎn)品設(shè)計必用模塊規(guī)范

1.導航欄

頭條小程序的導航欄一級、二級、和小游戲?qū)Ш蕉荚O(shè)計規(guī)范如下

2.toast（微信官方?jīng)]有給出）

頭條小程序給出了加載、成功、發(fā)布失敗的狀態(tài)，同時針對文案較多的情況下給了超過16個文案分行的設(shè)計標準。

3.挑選器

給出了篩選條件填寫的設(shè)計規(guī)范，這一點也是微信官方?jīng)]有給出的。

4.tab設(shè)計規(guī)范

在頭條小程序tab設(shè)計規(guī)范里允許開發(fā)者6個tab，我們都說不超過5個。但頭條小程序卻建議從2個到6個數(shù)量。并給出了單個標簽和標簽與文案2種展示方式。

5.Button

按鈕給了操作、和操作反饋的2個規(guī)范。主要按鈕和次要按鈕

6.彈窗

頭條小程序給了有標題和無標題兩種彈窗，在彈窗的文案處理上允許用戶滾動滑動查看文案，還有三列選項。這是在微信小程序設(shè)計規(guī)范沒有的。

7.標簽欄規(guī)范

頭條小程序允許用戶支持4個標簽欄，最少2個。

8.列表

在列表上有選擇器、切換開關(guān)、單行、多行列表、入口、選項5個設(shè)計規(guī)范

9.圖片上傳

在微信小程序里并沒有圖片上傳的設(shè)計規(guī)范，頭條小程序支持9張圖片，相排列方式是一行4個，小程序則是一行3個。

以上就是今天的分享。同時如果你很懶，不想再去找源文件，我也把兩份部件庫源文件提供給大家。

在本公眾號底部回復：“小程序設(shè)計規(guī)范”，就可以獲得。

今日Bonus：加我好友 pmtalk001，領(lǐng)取直播原型部件庫，同時還有運營模版，帶你了解快速提升產(chǎn)品運營進階

??點擊閱讀原文，加入打卡訓練營，每天體驗1款APP

每天體驗1款app知識星球

加入后365天，每天體驗一款APP。提升產(chǎn)品設(shè)計能力，同時有1500份體驗報告幫助你找到競品。

平均1天1塊錢，掃碼購買即可加入

連續(xù)體驗90款應用，通過后原路退回