第5章-微信小程序設(shè)計(jì)及問(wèn)答

1、微信小程序開發(fā)圖解案例教程（附精講視頻）（第2版）劉剛著微信小程序設(shè)計(jì) 微信小程序問(wèn)答 小結(jié) 第5章 微信小程序設(shè)計(jì)及問(wèn)答5.1.1突出重點(diǎn)，減少干擾項(xiàng) 每個(gè)頁(yè)面都應(yīng)有明確的重點(diǎn)，以便于用戶每進(jìn)入一個(gè)新頁(yè)面的時(shí)候都能快速地理解頁(yè)面內(nèi)容。 在確定了重點(diǎn)的情況下，應(yīng)盡量避免頁(yè)面上出現(xiàn)其他與用戶的決策和操作無(wú)關(guān)的干擾因素。 反面示例如圖5.1所示。 正確示例如圖5.2所示。5.1微信小程序設(shè)計(jì)圖5.1干擾項(xiàng)過(guò)多圖5.2減少干擾項(xiàng) 在一個(gè)界面上有多個(gè)按鈕的時(shí)候，按鈕設(shè)計(jì)要有主次之分，并且區(qū)分明顯，讓用戶看到后就知道他能做什么、該怎么做。 反面示例如圖5.3所示。 正確示例如圖5.4所示。5.1.2主次

2、動(dòng)作區(qū)分明顯圖5.3按鈕沒有主次之分圖5.4按鈕有主次之分 當(dāng)用戶在進(jìn)入某個(gè)頁(yè)面進(jìn)行某一個(gè)操作流程時(shí)，應(yīng)避免出現(xiàn)用戶目標(biāo)流程之外的內(nèi)容而打斷用戶。 例如：用戶想進(jìn)入某個(gè)頁(yè)面購(gòu)買商品，突然彈出抽獎(jiǎng)的模態(tài)窗口界面，等用戶抽完獎(jiǎng)之后，可能就會(huì)忘記去買商品這件事，這對(duì)我們引導(dǎo)用戶購(gòu)買商品很不利，所有要盡量避免打斷用戶的主要流程操作，如圖5.5所示就是用抽獎(jiǎng)打斷用戶操作的界面設(shè)計(jì)。5.1.3流程明確，避免打斷圖5.5抽獎(jiǎng)打斷用戶操作 局部加載反饋即只在觸發(fā)加載的頁(yè)面局部進(jìn)行反饋，這樣的反饋機(jī)制更加有針對(duì)性，頁(yè)面跳動(dòng)小，是微信推薦的反饋方式，如圖5.6所示。5.1.4局部加載反饋圖5.6局部加載反饋 模態(tài)

3、的加載樣式會(huì)覆蓋整個(gè)頁(yè)面，由于無(wú)法明確告知具體加載的位置或內(nèi)容將可能引起用戶的焦慮感，因此應(yīng)謹(jǐn)慎使用該樣式，在某些全局性操作下不要使用模態(tài)的加載，如圖5.7所示。5.1.5模態(tài)窗口加載反饋圖5.7模態(tài)窗口加載反饋 彈出式提示（Toast）適用于輕量級(jí)的成功提示，它1.5秒后自動(dòng)消失，并不打斷流程，對(duì)用戶影響較小，適用于不需要強(qiáng)調(diào)的操作提醒，例如成功提示。 特別注意該形式不適用于錯(cuò)誤提示，因?yàn)殄e(cuò)誤提示需明確告知用戶，因而不適合使用一閃而過(guò)的彈出式提示，如圖5.8所示。5.1.6彈出式操作結(jié)果圖5.8彈出式操作結(jié)果 對(duì)于需要用戶明確知曉的操作結(jié)果狀態(tài)可通過(guò)模態(tài)對(duì)話框來(lái)提示，并可附帶下一步操作指引，

4、如圖5.9所示。5.1.7模態(tài)對(duì)話框操作結(jié)果圖5.9模態(tài)對(duì)話框操作結(jié)果 對(duì)于操作結(jié)果已經(jīng)是當(dāng)前流程的終結(jié)的情況，可使用操作結(jié)果頁(yè)來(lái)反饋。 這種方式最為強(qiáng)烈和明確地告知用戶操作已經(jīng)完成，并可根據(jù)實(shí)際情況給出下一步操作的指引，如圖5.10所示。5.1.8結(jié)果頁(yè)圖5.10結(jié)果頁(yè) 用戶在填寫表單時(shí)，輸入格式或者內(nèi)容不符合表單填寫規(guī)則，需要給用戶及時(shí)反饋表單填寫問(wèn)題，可以在表單頂部告知錯(cuò)誤原因，并標(biāo)識(shí)出錯(cuò)誤字段提示用戶修改，如圖5.11所示。5.1.9表單填寫友好提示圖5.11表單友好提示1如何將元素固定在界面，不隨著界面滾動(dòng)？ 界面底部有4個(gè)導(dǎo)航菜單：篩選、出發(fā)時(shí)間、旅行時(shí)間、顯示價(jià)格。 把它們固定在

5、界面底部，如圖5.12所示。5.2微信小程序問(wèn)答圖5.12固定在界面底部2怎么樣獲取用戶在表單組件輸入的內(nèi)容？ 能夠獲取用戶輸入的內(nèi)容，需要使用組件的屬性bindchange將用戶的輸入內(nèi)容同步到AppService。3為什么腳本內(nèi)不能使用window等對(duì)象？ 頁(yè)面的腳本邏輯是在JsCore中運(yùn)行的，JsCore是一個(gè)沒有窗口對(duì)象的環(huán)境，所以不能在腳本中使用window，也無(wú)法在腳本中操作組件。4wx.navigateTo無(wú)法同時(shí)打開超過(guò)5個(gè)頁(yè)面？ 一個(gè)應(yīng)用只能同時(shí)打開5個(gè)頁(yè)面，當(dāng)已經(jīng)打開了5個(gè)頁(yè)面之后，wx. navigateTo不能正常打開新頁(yè)面。請(qǐng)避免多層級(jí)的交互方式，或者使用wx.redirectTo函數(shù)。5如何修改窗口的背景色？ 使用page標(biāo)簽選擇器，可以修改頂層節(jié)點(diǎn)的樣式。6如何跳轉(zhuǎn)的時(shí)候帶參數(shù)和跳轉(zhuǎn)到的界面接收參數(shù)？ 本章主要介紹微信小程序在設(shè)計(jì)過(guò)程中遇到的問(wèn)題以及如何提高用戶的體驗(yàn)度，重點(diǎn)掌握以下內(nèi)容：（1）在設(shè)計(jì)過(guò)程中要突出重點(diǎn)，減少干擾項(xiàng)，給用戶明確的主次操作，讓用戶操作流程更順暢；（2）用戶在操作過(guò)程中要及時(shí)反饋，局部加載以及模態(tài)窗口加載都是對(duì)用戶的操作反饋；5.3小結(jié)（3）在用戶操作后要給出其明確的操作結(jié)果，可以通過(guò)彈出式操作結(jié)果