花蝴蝶高清视频hd免费_伊人天天操_久久精品资源 _墨迹天气预报下载2022最新版

服務(wù)熱線:400-0033-166
萬商云集 - 企業(yè)數(shù)字化選用平臺

企業(yè)首選的

數(shù)字選用平臺

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

2020-08-06 10:15:12 閱讀(1096 評論(0)

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

 

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

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



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

 

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


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

 

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

 

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

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

 

字體顏色規(guī)范:無彩色——主內(nèi)容Black黑色,次要內(nèi)容Grey灰色;時間戳與表單缺省值Light灰色;大段的說明內(nèi)容而且屬于主要內(nèi)容用Semi黑;

 

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


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

 

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

 

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


未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明出處