線上服務(wù)咨詢
Article/文章
記錄成長點(diǎn)滴 分享您我感悟
推薦系列| 微信小程序設(shè)計(jì)指南
發(fā)表時(shí)間:2019-07-24 16:00:04
文章來源:沈陽軟件開發(fā)
標(biāo)簽:網(wǎng)站建設(shè) 小程序開發(fā) 小程序制作 微信小程序開發(fā) 公眾號開發(fā) 微信公眾號開發(fā) 網(wǎng)頁設(shè)計(jì) 網(wǎng)站優(yōu)化 網(wǎng)站排名 網(wǎng)站設(shè)計(jì) 微信小程序設(shè)計(jì) 小程序定制 微信小程序定制
瀏覽次數(shù):0
1.基于微信小程序的輕量級功能,設(shè)計(jì)小程序旨在在微信生態(tài)系統(tǒng)內(nèi)建立友好,高效和一致的用戶體驗(yàn),同時(shí)最大化適應(yīng)和支持不同需求并實(shí)現(xiàn)雙贏。 2,友好禮貌為了避免用戶在微信中使用小程序服務(wù),注意力受到周圍復(fù)雜環(huán)境的干擾,小程序應(yīng)設(shè)計(jì)為注意減少無關(guān)的設(shè)計(jì)元素對用戶目標(biāo)的干擾,禮貌地向用戶展示程序提供的服務(wù),友好引導(dǎo)用戶操作。 3.突出顯示每個(gè)頁面都應(yīng)有明確的重點(diǎn),以便用戶每次進(jìn)入新頁面時(shí)都能快速了解頁面內(nèi)容。在確定關(guān)鍵點(diǎn)的前提下,我們應(yīng)該盡量避免頁面上與用戶決策和操作無關(guān)的其他干擾因素。案例示意1
案例示意2
4,過程清晰為了讓用戶順利使用頁面,當(dāng)用戶執(zhí)行某個(gè)操作過程時(shí),應(yīng)該中斷用戶以避免用戶的目標(biāo)進(jìn)程以外的內(nèi)容。
5.清除和清除一旦用戶進(jìn)入我們的小程序頁面,我們有責(zé)任和義務(wù)清晰明確地告知用戶身在何處、又可以往何處去確保用戶可以輕松瀏覽頁面而不會迷路,從而為用戶提供安全和愉快的體驗(yàn)。 6,清晰導(dǎo)航,來去自由導(dǎo)航是確保用戶在網(wǎng)頁中瀏覽跳轉(zhuǎn)時(shí)不迷路的最關(guān)鍵因素。導(dǎo)航需要告訴用戶,目前在哪里,去哪里,如何回去等問題。 微信在小程序中不提供統(tǒng)一的導(dǎo)航欄樣式。開發(fā)人員可以根據(jù)需要設(shè)計(jì)小程序主頁和輔助頁面界面導(dǎo)航。建議左上角的所有輔助頁面都返回上一頁操作。此外,微信iOS用戶還可以通過接口邊緣向右滑動,返回上一個(gè)小程序或微信頁面。 Android用戶可以使用物理返回鍵實(shí)現(xiàn)相同的目標(biāo)。 7,小程序菜單小程序所有頁面,包括小程序嵌入式網(wǎng)頁和插件,微信將被放置在官方小程序菜單的右上角,樣式如圖所示。
開發(fā)人員無法自定義其內(nèi)容,但他們可以選擇兩種基本顏色以適應(yīng)頁面設(shè)計(jì)風(fēng)格。官方的小程序菜單將被放置在界面的固定位置。開發(fā)人員在設(shè)計(jì)界面時(shí)應(yīng)保留空間。如果你需要在這個(gè)區(qū)域附近放置交互元素,要特別注意交互事件是否會發(fā)生沖突,以及操作是否易于使用
8,小程序菜單陰影配色方案開發(fā)人員可以滿足可用性,從微信中提供深度的兩組色彩匹配小程序菜單選擇適當(dāng)?shù)慕鉀Q方案以適應(yīng)小程序頁面的設(shè)計(jì)風(fēng)格。
9.頁內(nèi)導(dǎo)航開發(fā)人員可以根據(jù)自己的功能設(shè)計(jì)將自己的導(dǎo)航添加到頁面中。并保持不同頁面間導(dǎo)航一致,指向清晰,有路可退。由于手機(jī)屏幕尺寸的限制,小程序頁面的導(dǎo)航應(yīng)盡可能簡單。建議開發(fā)人員自己的導(dǎo)航樣式與微信官方小程序菜單樣式保持不同,以便區(qū)分。
開發(fā)人員可以為小程序頁面添加標(biāo)簽頁導(dǎo)航。標(biāo)簽頁欄可以固定在頁面的頂部或底部,便于用戶在不同頁面之間切換。標(biāo)簽數(shù)量必須不小于2且不大于5.為確保點(diǎn)擊區(qū)域,建議的標(biāo)簽數(shù)量不超過4.頁面也不應(yīng)超過一組標(biāo)簽。 小程序主頁可以選擇微信提供的本機(jī)底部標(biāo)簽分頁樣式,該樣式僅用于小程序主頁??梢栽陂_發(fā)期間自定義圖標(biāo)樣式,標(biāo)簽副本和副本顏色。有關(guān)圖標(biāo)大小等特定設(shè)置項(xiàng),請參閱開發(fā)文檔和WeUI基本控件庫。
頂部標(biāo)簽頁欄顏色可以自定義。在自定義顏色選擇中,保持標(biāo)簽欄標(biāo)簽的可用性,可見性和可操作性非常重要。
10,可視規(guī)范字體微信字體用法與運(yùn)行系統(tǒng)字體一致,常用字體大小為20,18,17,16,14,13,11(pt),使用場景如下:
字體顏色
主要內(nèi)容黑色黑色,次要內(nèi)容灰色;時(shí)間戳和表單默認(rèn)值淺灰色;大段描述內(nèi)容和主要內(nèi)容是Semi Black。
藍(lán)色是鏈接顏色,綠色是完成的顏色,紅色是錯(cuò)誤顏色按下和禁用狀態(tài)分別將透明度降低到20%和10%
列表
按鈕

圖標(biāo)

















網(wǎng)站建設(shè),小程序開發(fā),小程序制作,微信小程序開發(fā),公眾號開發(fā),微信公眾號開發(fā),網(wǎng)頁設(shè)計(jì),網(wǎng)站優(yōu)化,網(wǎng)站排名,網(wǎng)站設(shè)計(jì),微信小程序設(shè)計(jì),小程序定制,微信小程序定制