无人视频在线观看完整版高清免费_男女污污动态图_国内自产拍自a免费毛片_高清不卡日本v在线二区

商城小程序

聽說你準備開發(fā)小程序,這套設(shè)計規(guī)范送給你

您現(xiàn)在的位置:首頁 ? 企業(yè)信息化 ? 商城小程序
2020-11-09 11:47:44

  大家好,我是獨立開發(fā)者Larry,相比APP而言,開發(fā)一款小程序的開發(fā)成本更低、周期更短,同時開發(fā)難度和維護成本也相對降低,因此越來越多的開發(fā)者開始入坑小程序。

  正好最近我也要開發(fā)小程序,所以今天我就從設(shè)計方面聊一聊微信小程序設(shè)計規(guī)范,埋上設(shè)計中可能會出現(xiàn)的坑,讓你能更好的完成你的小程序~

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

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

  官方小程序菜單放置在界面固定位置,在設(shè)計界面時要預(yù)留出該區(qū)域空間,若要在此區(qū)域附近放置可交互元素,要特別注意交互事件是否會沖突,操作是否容易被使用。

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

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

  有彩色——藍色為鏈接用色,綠色為完成字樣顏色,紅色為出錯用色,Press與Disable狀態(tài)分別降低透明度為20%與10%;

  頂部導(dǎo)航欄一般簡稱導(dǎo)航欄,標準高度:128rpx,一般只做底色修改,標題區(qū)與導(dǎo)航區(qū)要進行自定義開發(fā)也是可以的,不過要注意設(shè)計的自有導(dǎo)航樣式與微信官方小程序菜單樣式要保持一定差異,以便區(qū)分。

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

  1. 底部標簽欄

  小程序首頁可選擇微信提供的原生底部標簽分頁樣式,該樣式僅供小程序首頁使用。開發(fā)時可自定義圖標樣式、標簽文案以及文案顏色等。特別說明:這里圖標控件尺寸是54x54px,但是小程序開發(fā)需要的是81x81倍,需要注意一次給到位。

  2. 頂部標簽欄

  頂部標簽分頁欄顏色可自定義。在自定義顏色選擇中,務(wù)必注意保持分頁欄標簽的可用性、可視性和可操作性。

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

  小程序啟動頁是小程序在微信內(nèi)一定程度上展現(xiàn)品牌特征的頁面之一。本頁面將突出展示小程序品牌特征和加載狀態(tài)。啟動頁除品牌標志(Logo)展示外,頁面上的其他所有元素如加載進度指示,均由微信統(tǒng)一提供且不能更改,無需開發(fā)者開發(fā)。

  無論是APP還是小程序,加載都不可避免,同樣長時間的加載等待會引起用戶的不良情緒,因此,在不可避免的加載和等待時,給予及時的反饋以舒緩用戶等待的不良情緒都是必需的。小程序里除了自定義加載樣式,更是依賴微信提供了一系列加載樣式:

  1. 頁面下拉刷新加載

  在微信小程序內(nèi),微信提供標準的頁面下拉刷新加載能力和樣式,開發(fā)者無需自行開發(fā)。

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

  開發(fā)者可在小程序里自定義頁面內(nèi)容的加載樣式。建議不管是使用在局部還是全局加載,自定義加載樣式都應(yīng)該盡可能簡潔,并使用簡單動畫告知用戶加載過程。

  3. 模態(tài)加載

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

  4. 局部加載反饋

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

  5. 全局加載反饋

  全局加載將加載圖標放到導(dǎo)航標題左側(cè),使用標題欄提示加載小程序頁面內(nèi)容的過程。

  關(guān)于微信小程序的設(shè)計開發(fā),官方平臺給出了相關(guān)說明介紹及資源文檔,其中設(shè)計文件包含Sketch和PS基礎(chǔ)組件庫,不過是16年的,另外我還在微信官方文件的基礎(chǔ)上增添了一些新的樣式,里面也附帶了官方UI控件,供大家參考,公眾號(force_code)后臺回復(fù)「小程序設(shè)計規(guī)范」獲取下載鏈接。

  今天的內(nèi)容就是這些,希望對你有所幫助,公眾號后臺回復(fù)『加群』識別二維碼添加“碼力全開機器人”,回復(fù)『加群』即可加入產(chǎn)品內(nèi)測用戶群,你也可以添加我的微信lishichao706,帶你進入獨立開發(fā)者的聚集地。