微信小程序ui設(shè)計(jì)規(guī)范匯總:
微信小程序是一種全新的應(yīng)用形態(tài),微信小程序平臺不需要下載安裝即可使用應(yīng)用的平臺,微信小程序?qū)崿F(xiàn)了應(yīng)用“觸手可及”的夢想,用戶掃一掃或者搜一下即可打開應(yīng)用。
也體現(xiàn)了“用完即走”的理念,用戶不用關(guān)心是否安裝太多應(yīng)用的問題。應(yīng)用將無處不在,隨時(shí)可用,但又無需安裝卸載。
概要
基于微信小程序輕快的特點(diǎn),我們擬定了小程序界面設(shè)計(jì)指南和建議。 設(shè)計(jì)指南建立在充分尊重用戶知情權(quán)與操作權(quán)的基礎(chǔ)之上。旨在微信生態(tài)體系內(nèi),建立友好、高效、一致的用戶體驗(yàn),同時(shí)最大程度適應(yīng)和支持不同需求,實(shí)現(xiàn)用戶與小程序服務(wù)方的共贏。
友好禮貌
為了避免用戶在微信中使用小程序服務(wù)時(shí),注意力被周圍復(fù)雜環(huán)境干擾,小程序在設(shè)計(jì)時(shí)應(yīng)該注意減少無關(guān)的設(shè)計(jì)元素對用戶目標(biāo)的干擾,禮貌地向用戶展示程序提供的服務(wù),友好地引導(dǎo)用戶進(jìn)行操作。
重點(diǎn)突出
每個(gè)頁面都應(yīng)有明確的重點(diǎn),以便于用戶每進(jìn)入一個(gè)新頁面的時(shí)候都能快速地理解頁面內(nèi)容,在確定了重點(diǎn)的前提下,應(yīng)盡量避免頁面上出現(xiàn)其他干擾項(xiàng)影響用戶的決策和操作。
反例示意
此頁面的主題是查詢,卻添加了諸多與查詢不相關(guān)的業(yè)務(wù)入口,與用戶的預(yù)期不符,易造成用戶的迷失。

糾正示意
去掉任何與用戶目標(biāo)不相關(guān)的內(nèi)容,明確頁面主題,在技術(shù)和頁面控件允許的前提下提供有助于用戶目標(biāo)的幫助內(nèi)容,比如最近搜索詞,常用搜索詞等。

反例示意
操作沒有主次,讓用戶無從選擇

糾正示意
首先要避免并列過多操作讓用戶選擇,在不得不并列多個(gè)操作時(shí),需區(qū)分操作主次,減輕用戶的選擇難度。

流程明確
為了讓用戶順暢地使用頁面,在用戶進(jìn)行某一個(gè)操作流程時(shí),應(yīng)避免出現(xiàn)用戶目標(biāo)流程之外的內(nèi)容而打斷用戶。
反例示意
用戶本打算進(jìn)行搜索,在進(jìn)入頁面時(shí)卻被突如其來的抽獎(jiǎng)彈窗所打斷;對于抽獎(jiǎng)沒有興趣的用戶是非常不友好的干擾; 而即便有部分用戶確實(shí)被“誘人”的抽獎(jiǎng)活動所吸引,離開主流程去抽獎(jiǎng)之后可能就遺忘了原本的目標(biāo),進(jìn)而失去了對產(chǎn)品真正價(jià)值的利用和認(rèn)識。

清晰明確
一旦用戶進(jìn)入我們的小程序頁面,我們就有責(zé)任和義務(wù)清晰明確地告知用戶身在何處、又可以往何處去,確保用戶在頁面中游刃有余地穿梭而不迷路,這樣才能為用戶提供安全的愉悅的使用體驗(yàn)。
導(dǎo)航明確,來去自如
導(dǎo)航是確保用戶在網(wǎng)頁中瀏覽跳轉(zhuǎn)時(shí)不迷路的最關(guān)鍵因素。導(dǎo)航需要告訴用戶,我在哪,我可以去哪,如何回去等問題。首先在微信系統(tǒng)內(nèi)的所有小程序的全部頁面,均會自帶微信提供的導(dǎo)航欄,統(tǒng)一解決我在哪,如何回去的問題。在微信層級導(dǎo)航保持體驗(yàn)一致,有助于用戶在微信內(nèi)形成統(tǒng)一的體驗(yàn)和交互認(rèn)知,無需在各小程序和微信切換中新增學(xué)習(xí)成本或改變使用習(xí)慣。
微信導(dǎo)航欄
微信導(dǎo)航欄,直接繼承于客戶端,除導(dǎo)航欄顏色之外,開發(fā)者無需亦不可對其中的內(nèi)容進(jìn)行自定義。但開發(fā)者需要規(guī)定小程序各個(gè)頁面的跳轉(zhuǎn)關(guān)系,讓導(dǎo)航系統(tǒng)能夠以合理的方式工作。
微信導(dǎo)航欄分為導(dǎo)航區(qū)域、標(biāo)題區(qū)域以及操作區(qū)域。其中導(dǎo)航區(qū)控制程序頁面進(jìn)程。目前導(dǎo)航欄分深淺兩種基本配色。
導(dǎo)航區(qū)(iOS)
導(dǎo)航區(qū)通常只有一個(gè)操作,即返回上一級界面。
導(dǎo)航區(qū)(Android)
同iOS一樣,導(dǎo)航區(qū)也只有一個(gè)返回上一級頁面的操作,而點(diǎn)擊安卓手機(jī)自帶的硬件返回鍵也起到相同作用。
新聞熱點(diǎn)
疑難解答