小程序開(kāi)發(fā)設(shè)計(jì)丨尺寸 頁(yè)面 字體 顏色及導(dǎo)航的樣式

小程序?qū)τ脩趔w驗(yàn)要求較高的輕量應(yīng)用，因此對(duì)小程序開(kāi)發(fā)設(shè)計(jì)中的設(shè)計(jì)要求比較高，需要在設(shè)計(jì)細(xì)節(jié)中充分給到用戶反饋，否則極容易造成用戶流失，給商家或企業(yè)造成損失。微信小程序目前不提供統(tǒng)一的尺寸、頁(yè)面、字體、顏色及導(dǎo)航等設(shè)計(jì)樣式，需要自行開(kāi)發(fā)設(shè)計(jì)，下文對(duì)小程序開(kāi)發(fā)設(shè)計(jì)的這幾個(gè)方面進(jìn)行了簡(jiǎn)單的整理，供參考。

 圖片來(lái)源于網(wǎng)絡(luò)

設(shè)計(jì)尺寸:微信小程序的設(shè)計(jì)只需要以iPhone6屏幕尺寸750x1334px為視覺(jué)稿進(jìn)行設(shè)計(jì)即可，因?yàn)槲⑿判〕绦蛞詒px為css尺寸單位，rpx可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)，規(guī)定屏幕寬度為750rpx，因此在iPhone6設(shè)計(jì)稿上1px=1rpx，在尺寸換算上就會(huì)很簡(jiǎn)單。

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

字體規(guī)范：小程序的字體依然遵循微信原生視覺(jué)規(guī)范：微信內(nèi)字體的使用與所運(yùn)行的系統(tǒng)字體保持一致，常用字號(hào)為20, 18, 17, 16,14 13, 11(pt)，使用場(chǎng)景具體如上圖。

字體顏色規(guī)范：無(wú)彩色——主內(nèi)容Black黑色，次要內(nèi)容Grey灰色；時(shí)間戳與表單缺省值Light灰色；大段的說(shuō)明內(nèi)容而且屬于主要內(nèi)容用Semi黑；

標(biāo)簽分頁(yè)導(dǎo)航：標(biāo)簽分頁(yè)導(dǎo)航欄一般簡(jiǎn)稱(chēng)標(biāo)簽欄，標(biāo)準(zhǔn)高度：98rpx，可固定在頁(yè)面的頂部或底部，便于用戶在不同分頁(yè)間做切換。標(biāo)簽數(shù)量在2-5個(gè)，為確保點(diǎn)擊區(qū)域，建議標(biāo)簽數(shù)量不超過(guò)4項(xiàng)，一個(gè)頁(yè)面也不應(yīng)出現(xiàn)一組以上的標(biāo)簽欄。

彈窗：無(wú)論是APP還是Web網(wǎng)頁(yè)，彈窗總是出現(xiàn)在頁(yè)面的最上層，但是在小程序里導(dǎo)航欄跟標(biāo)簽欄的層級(jí)是最高的，以至于優(yōu)先級(jí)較高的彈窗在這里也要有所收斂，因此在設(shè)計(jì)和開(kāi)發(fā)時(shí)，都需要注意避免踩坑。

小程序開(kāi)發(fā)設(shè)計(jì)需要在原生APP的基礎(chǔ)服務(wù)之上進(jìn)行考慮，也正因?yàn)樵鶤PP已經(jīng)有趨向全民化的趨勢(shì)，新建小程序的應(yīng)用和推廣才相對(duì)容易。小程序的便捷優(yōu)勢(shì)自然不用多說(shuō)，但是設(shè)計(jì)上的交互體驗(yàn)是需要根據(jù)行業(yè)類(lèi)型和具體功能進(jìn)行調(diào)節(jié)的。萬(wàn)商云集專(zhuān)注互聯(lián)網(wǎng)行業(yè)16年+，如果您有小程序開(kāi)發(fā)的需求，可以點(diǎn)擊萬(wàn)商云集在線咨詢，將有專(zhuān)業(yè)人員為您服務(wù)。

本文關(guān)鍵詞：

小程序開(kāi)發(fā)