這是Kevin的第 488 篇原創(chuàng)，持續(xù)日更，做產(chǎn)品經(jīng)理的創(chuàng)業(yè)斜杠青年。
常常有產(chǎn)品朋友在公眾號后臺給我留言，希望我多分享一些產(chǎn)品經(jīng)理的干貨資料，用于工作。最近我的小程序第三期課程剛剛結(jié)束，趁這個(gè)機(jī)會也分享在課程里我所制作、收集的小程序相關(guān)的原型部件。值得注意小程序的標(biāo)準(zhǔn)在微信官方雖然有給出，但面向用戶需求、產(chǎn)品場景設(shè)計(jì)，產(chǎn)品經(jīng)理關(guān)注的小程序組件常聚焦的地方是和官方是本質(zhì)區(qū)別的。
一個(gè)有效率的原型組件，應(yīng)該可以快速完成產(chǎn)品經(jīng)理想要做的功能原型設(shè)計(jì)
小程序是一個(gè)特殊的移動端，也能夠按照IOS和安卓2套規(guī)范進(jìn)行交互設(shè)計(jì)，但由于2套的開發(fā)成本、和用戶體驗(yàn)不一致產(chǎn)生的用戶認(rèn)知門檻，最常見的做法還是會成為一套。現(xiàn)在市面上的app產(chǎn)品設(shè)計(jì)，除了系統(tǒng)層面上的能力不能變化外，其他2個(gè)平臺都保持一樣。所以提前掌握好小程序的原型組件，自然能夠少走彎路減少不必要的產(chǎn)品設(shè)計(jì)，同時(shí)還能因?yàn)樽裱艘苿佣艘?guī)范。我羅列了產(chǎn)品經(jīng)理在小程序中高度頻繁使用、而且功能設(shè)計(jì)重要的部分輸出了一份原型部件，并且解釋，歡迎在末尾小程序原型交流群下載
小程序里按鈕重點(diǎn)是要區(qū)分3個(gè)狀態(tài)，分別是點(diǎn)擊前、點(diǎn)擊中、點(diǎn)擊后。同時(shí)還要準(zhǔn)備按鈕的使用場景，區(qū)分為普通頁面按鈕、彈窗按鈕。
在頁面里的按鈕主要提供用戶的主要操作，在彈窗的按鈕則按鈕順序是可以吸引用戶轉(zhuǎn)化雖然微信官方提供了小程序的導(dǎo)航欄標(biāo)準(zhǔn)，但為了滿足場景需求，產(chǎn)品經(jīng)理都會設(shè)計(jì)自定義導(dǎo)航欄，但右邊的操作區(qū)域仍然是固定的。比如下面的的導(dǎo)航欄餐區(qū)了標(biāo)題、搜索、返回導(dǎo)航欄都是屬于自定義的。
在小程序的導(dǎo)航欄里還有位置、音頻、直播，右邊的固定操作區(qū)域會根據(jù)系統(tǒng)能力不同調(diào)用展示對應(yīng)的icon，如果要設(shè)計(jì)的某個(gè)功能需求就需要提前把這部分加上。
比如涉及給贊講講小程序，用戶可以對問題音頻錄入，就需要在小程序的右部導(dǎo)航欄加上音頻狀態(tài)。
產(chǎn)品需要對用戶的操作提供正反饋、負(fù)反饋。如果你的小程序打算做原生產(chǎn)品設(shè)計(jì)，首選是和微信官方一樣的操作反饋。在反饋的原型部件可以幫助你快速構(gòu)建操作反饋，同時(shí)產(chǎn)品經(jīng)理只需要對對強(qiáng)引導(dǎo)和弱引導(dǎo)做文案的修改提示。
提示也可以純圖片、文字，也能混合。而在小程序里選擇用原生開發(fā)，那么反饋的交互設(shè)計(jì)自然點(diǎn)擊率、轉(zhuǎn)化率就穩(wěn)定。
要不要用小程序官方的反饋設(shè)計(jì)不用這套規(guī)范其實(shí)不一定的，產(chǎn)品經(jīng)理完全根據(jù)自己的app規(guī)范來完成小程序的彈窗。如果要做一個(gè)純粹原生的小程序，那下面的彈窗組建是可以幫助你提高產(chǎn)品設(shè)計(jì)效率的利器，你只需要拖拉拽再修改文案、圖片封面就完成了原型設(shè)計(jì)。
小程序的彈窗包含了僅確認(rèn)操作、還有雙選彈框操作、有說明條件的彈框操作。
如果你打算用混合方式開發(fā)小程序，那小程序彈窗可以依附于app規(guī)范來做。減少在app客戶端上的成本。5.其他可以減少產(chǎn)品工作錯(cuò)誤的組件除了上面必用的組建外，還有一些組建是可以減少需求調(diào)研工作，完成原型繪制工作，快速成功無誤的落地需求。比如在小程序上的進(jìn)度條，無論是頁面還是某個(gè)文件上傳、還是游戲的積分進(jìn)度，改個(gè)文案就可以通用。
信息流頁面的底部、以及有無數(shù)據(jù)的展示狀況，都可以用下面的組件完成。當(dāng)然了對于無數(shù)據(jù)展示有的產(chǎn)品經(jīng)理喜歡圖文并茂，減少用戶焦慮。那這種事情可以交給交互設(shè)計(jì)師來完成，產(chǎn)品的工作已經(jīng)結(jié)束啦。在微信小程序里使用的圖片預(yù)覽需要保持和微信統(tǒng)一，所以使用下面的原型就自然減少了開發(fā)的工作量，很多時(shí)候產(chǎn)品設(shè)計(jì)方案需要開發(fā)的底層能力支持。
以上就是這次小程序的原型部件，好的原型組件不僅能提高工作效率，在某種意義上也算投機(jī)取巧吧。為了大家更好的交流小程序產(chǎn)品設(shè)計(jì)、UED設(shè)計(jì)規(guī)范我還建了一個(gè)Kevin的小程序原型交流群，我也會在群里同步今天里我使用的部件庫。
我創(chuàng)建了一個(gè)《每天體驗(yàn)1款app》知識星球，有超過20個(gè)行業(yè)嘉賓在圈子里。加入后365天，每天體驗(yàn)一款A(yù)PP。提升產(chǎn)品設(shè)計(jì)能力，同時(shí)有1500份體驗(yàn)報(bào)告幫助你找到競品。
同時(shí)在星球里還有原型組件庫、我精選的產(chǎn)品經(jīng)理資料都可直接下載
平均1天1塊錢，掃碼購買即可加入
連續(xù)體驗(yàn)90款應(yīng)用，通過后原路退回
