什么是小程序?
小程序是一種不需要下載安裝即可使用的應(yīng)用,用戶掃一掃或搜一下即可打開應(yīng)用。
它是一種全新的連接用戶與服務(wù)的方式,可以在微信內(nèi)被便捷地獲取和傳播,同時具有出色的使用體驗。
為什么要做小程序?
更低的成本 更流暢的體驗 更多的曝光機(jī)會 更易留存用戶
小程序設(shè)計規(guī)范
尺寸:小程序的開發(fā)工具支持二倍圖開發(fā),不支持一倍圖開發(fā)。
小程序里的尺寸單位叫rpx,可以根據(jù)屏幕寬度進(jìn)行自行適應(yīng)。
規(guī)定屏幕寬為750rpx
如在750*1334的設(shè)計稿里,1rpx=1px(物理像素)=0.5pt(邏輯像素)
一倍圖:1rpx=1pt
設(shè)計微信小程序用iphone(750*1334)作為視覺稿的標(biāo)準(zhǔn)
切圖
設(shè)計稿用750*1334的尺寸,切圖只需給出當(dāng)前尺寸的即可(二倍圖)。
需要注意:小程序底部標(biāo)簽欄的圖標(biāo),切圖大小需要固定54*54rpx(若是開發(fā)有特別需要,在提供81*81rpx的),其他正常切圖。
適配
小程序支持一稿適配,只需要提供一套750*1334設(shè)計稿及切圖,別的尺寸(包括安卓)均不用再設(shè)計,程序員GG會搞定
字體
微信小程序的使用與運(yùn)行的系統(tǒng)字體保持一致。
ios系統(tǒng):中文字體:蘋方 英文字體:San Francisco
Android系統(tǒng):中文字體:思源黑體。英文字體:Roboto
字號
常用字號為20,18-16,14,13,11(pt)
20pt:頁面大標(biāo)題,一般用與結(jié)果、空狀態(tài)等信息單一頁面
18pt:頁面內(nèi)大按鈕字體
17pt:頁面內(nèi)首要層級信息,如列表標(biāo)題、消息氣泡等
16pt:頁面內(nèi)主要描述信息
14pt:頁面內(nèi)次要描述信息,如列表摘要
13pt:頁面輔助信息,需弱化的內(nèi)容,如鏈接、小按鈕
11pt:說明文本,如版權(quán)信息等不需要用戶關(guān)注的信息(純英文的最小11pt)
頂部導(dǎo)航欄
小程序的導(dǎo)航欄,開發(fā)者可根據(jù)自身功能設(shè)計需要在頁面內(nèi)添加自有導(dǎo)航,建議所有的次級頁面左上角提供返回上一級頁面操作。
小程序頁面的導(dǎo)航應(yīng)盡量簡單,通常只改導(dǎo)航欄背景色。
底部標(biāo)簽欄
底部標(biāo)簽欄,不要自定義樣式,標(biāo)簽欄背景色一般是白色#ffffff。
底部Tab的數(shù)量,最少兩個,最多5個。
啟動頁加載
小程序啟動頁將突出展示小程序品牌特征和加載狀態(tài)。
啟動頁除品牌標(biāo)志(logo)展示外,頁面上的其他所有元素如加載進(jìn)度指
頁面下拉刷新加載
在微信小程序內(nèi),微信提供標(biāo)準(zhǔn)的頁面下拉刷新加載能力和樣式,開發(fā)者無需自行開發(fā)。
彈窗
小程序中的彈窗是不覆蓋導(dǎo)航欄和標(biāo)簽欄的
小程序設(shè)計原則
一、友好禮貌
小程序在設(shè)計時應(yīng)該注意減少無關(guān)的設(shè)計元素對用戶目標(biāo)的干擾,禮貌地向用戶展示程序提供的服務(wù),友好地引導(dǎo)用戶進(jìn)行操作。
二、清晰明確
導(dǎo)航是確保用戶在頁面中瀏覽跳轉(zhuǎn)時不迷路的嘴關(guān)鍵因素。導(dǎo)航需要告訴用戶,當(dāng)前在哪,可以去哪,如何回去等問題。
三、便捷優(yōu)雅
手機(jī)鍵盤區(qū)域小,輸入困難也易誤操作,在設(shè)計小程序頁面時應(yīng)盡量減少用戶輸入,利用現(xiàn)有接口或其他一些易于操作的選擇控件來改善用戶輸入的體驗。
四、統(tǒng)一穩(wěn)定
小程序應(yīng)注意不同頁面間的統(tǒng)一性和延續(xù)性,在不同的頁面盡量使用一致的控件和交互方式
統(tǒng)一的頁面體驗和有延續(xù)性的界面元素都將幫助用最少的學(xué)習(xí)成本達(dá)成使用目標(biāo),減輕頁面跳動鎖造成的不適感
小程序與app截圖對比
小程序留下比較重要的內(nèi)容
資訊類,電影,音樂和小程序不搭
小程序與app 的區(qū)別
一、獲取方式
app沖應(yīng)用商城
小程序通過微信(掃描二維碼、搜索)直接獲得
二、內(nèi)存占用情況
小程序因為不需要安裝,占用內(nèi)存空間忽略不計
三、廣告推送
app會隔三差五給用戶推送廣告,太多未剃時會逼死強(qiáng)迫癥
四、用戶群體
app面向所有智能手機(jī)用戶
小程序面向所有微信用戶,約10億人
五、開發(fā)及功能實現(xiàn)
App需要適配市場上很多款的主流手機(jī),開發(fā)成本大;
小程序一次開發(fā)就可以自動適配所有手機(jī);
app可以實現(xiàn)完整功能;
小程序僅限微信提供的接口功能;
小程序開發(fā)周期:兩周不等
六、發(fā)布及推廣難度
上傳app路徑復(fù)雜,需要向app store等多個應(yīng)用商店提交審核,且應(yīng)用商店之間要求的資料不太一樣,比較繁瑣;
小程序只需要提交到微信公眾平臺審核;
app在沒有一定知名度前提下,推廣的成本很高,獲客成本高;
小程序依托騰訊巨大的流量,并且可以通過二維碼、微信搜索等方式直接獲得,推廣難度大大降低;
高屏類
小程序總結(jié)
小程序比普通的app更講究扁平化的設(shè)計
產(chǎn)品設(shè)計要輕視覺,表現(xiàn)的輕盈、干凈、高效;
功能層級上要輕交互、跳轉(zhuǎn)少、結(jié)構(gòu)層級簡單;
好高效率
微信插件