第5章-微信小程序設計及問答

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

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

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

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

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