微信小程序開發(fā)圖解案例教程-第5章-微信小程序設(shè)計及問答課件

微信小程序開發(fā)圖解案例教程

微信小程序開發(fā)圖解案例教程

1微信小程序設(shè)計■

微信小程序問答■

小結(jié)■第5章微信小程序設(shè)計及問答微信小程序設(shè)計■

微信小程序問答■

小結(jié)■第5章微信25.1.1突出重點，減少干擾項

每個頁面都應(yīng)有明確的重點，以便于用戶每進入一個新頁面的時候都能快速地理解頁面內(nèi)容。

在確定了重點的情況下，應(yīng)盡量避免頁面上出現(xiàn)其他與用戶的決策和操作無關(guān)的干擾因素。

反面示例如圖5.1所示。

正確示例如圖5.2所示。

5.1微信小程序設(shè)計5.1.1突出重點，減少干擾項

每個頁面都應(yīng)有明確3圖5.1干擾項過多圖5.2減少干擾項圖5.1干擾項過多圖5.2減少4

在一個界面上有多個按鈕的時候，按鈕設(shè)計要有主次之分，并且區(qū)分明顯，讓用戶看到后就知道他能做什么、該怎么做。

反面示例如圖5.3所示。

正確示例如圖5.4所示。5.1.2主次動作區(qū)分明顯

在一個界面上有多個按鈕的時候，按鈕設(shè)計要有主次之分5圖5.3按鈕沒有主次之分圖5.4按鈕有主次之分圖5.3按鈕沒有主次之分圖5.4按鈕6

當(dāng)用戶在進入某個頁面進行某一個操作流程時，應(yīng)避免出現(xiàn)用戶目標流程之外的內(nèi)容而打斷用戶。

例如：用戶想進入某個頁面購買商品，突然彈出抽獎的模態(tài)窗口界面，等用戶抽完獎之后，可能就會忘記去買商品這件事，這對我們引導(dǎo)用戶購買商品很不利，所有要盡量避免打斷用戶的主要流程操作，如圖5.5所示就是用抽獎打斷用戶操作的界面設(shè)計。5.1.3流程明確，避免打斷圖5.5抽獎打斷用戶操作

當(dāng)用戶在進入某個頁面進行某一個操作流程時，應(yīng)避免出7

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

局部加載反饋即只在觸發(fā)加載的頁面局部進行反饋，這樣8

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

模態(tài)的加載樣式會覆蓋整個頁面，由于無法明確告知具體9

彈出式提示（Toast）適用于輕量級的成功提示，它1.5秒后自動消失，并不打斷流程，對用戶影響較小，適用于不需要強調(diào)的操作提醒，例如成功提示。

特別注意該形式不適用于錯誤提示，因為錯誤提示需明確告知用戶，因而不適合使用一閃而過的彈出式提示，如圖5.8所示。5.1.6彈出式操作結(jié)果圖5.8彈出式操作結(jié)果

彈出式提示（Toast）適用于輕量級的成功提示，它10對于需要用戶明確知曉的操作結(jié)果狀態(tài)可通過模態(tài)對話框來提示，并可附帶下一步操作指引，如圖5.9所示。

5.1.7模態(tài)對話框操作結(jié)果圖5.9模態(tài)對話框操作結(jié)果對于需要用戶明確知曉的操作結(jié)果狀態(tài)可通過模態(tài)對話框來11

對于操作結(jié)果已經(jīng)是當(dāng)前流程的終結(jié)的情況，可使用操作結(jié)果頁來反饋。

這種方式最為強烈和明確地告知用戶操作已經(jīng)完成，并可根據(jù)實際情況給出下一步操作的指引，如圖5.10所示。5.1.8結(jié)果頁圖5.10結(jié)果頁

對于操作結(jié)果已經(jīng)是當(dāng)前流程的終結(jié)的情況，可使用操作12

用戶在填寫表單時，輸入格式或者內(nèi)容不符合表單填寫規(guī)則，需要給用戶及時反饋表單填寫問題，可以在表單頂部告知錯誤原因，并標識出錯誤字段提示用戶修改，如圖5.11所示。5.1.9表單填寫友好提示圖5.11表單友好提示

用戶在填寫表單時，輸入格式或者內(nèi)容不符合表單填寫規(guī)131．如何將元素固定在界面，不隨著界面滾動？

界面底部有4個導(dǎo)航菜單：篩選、出發(fā)時間、旅行時間、顯示價格。

把它們固定在界面底部，如圖5.12所示。

5.2微信小程序問答圖5.12固定在界面底部1．如何將元素固定在界面，不隨著界面滾動？

界面底部142．怎么樣獲取用戶在表單組件輸入的內(nèi)容？

能夠獲取用戶輸入的內(nèi)容，需要使用組件的屬性bindchange將用戶的輸入內(nèi)容同步到AppService。

3．為什么腳本內(nèi)不能使用window等對象？

頁面的腳本邏輯是在JsCore中運行的，JsCore是一個沒有窗口對象的環(huán)境，所以不能在腳本中使用window，也無法在腳本中操作組件。

2．怎么樣獲取用戶在表單組件輸入的內(nèi)容？

能夠獲取用154．wx.navigateTo無法同時打開超過5個頁面？

一個應(yīng)用只能同時打開5個頁面，當(dāng)已經(jīng)打開了5個頁面之后，wx.navigateTo不能正常打開新頁面。請避免多層級的交互方式，或者使用wx.redirectTo函數(shù)。

5．如何修改窗口的背景色？

使用page標簽選擇器，可以修改頂層節(jié)點的樣式。

6．如何跳轉(zhuǎn)的時候帶參數(shù)和跳轉(zhuǎn)到的界面接收參數(shù)？4．wx.navigateTo無法同時打開超過5個頁面？

16

本章主要介紹微信小程序在設(shè)計過程中遇到的問題以及如何提高用戶的體驗度，重點掌握以下內(nèi)容：

（1）在設(shè)計過程中要突出重點，減少干擾項，給用戶明確的主次操作，讓用戶操作流程更順暢；

（2）用戶在操作過程中要及時反饋，局部加載以及模態(tài)窗口加載都是對用戶的操作反饋；

5.3小結(jié)

本章主要介紹微信小程序在設(shè)計過程中遇到的問題以及17（3）在用戶操作后要給出其明確的操作結(jié)果，可以通過彈出式操作結(jié)果、模態(tài)對話框操作結(jié)果等告知用戶；

（4）用戶在填寫表單時，要進行友好的提示和正確的引導(dǎo)，減少用戶填寫表單的時間以及出錯的概率；

（5）理解微信小程序設(shè)計過程中遇到的一些問題以及解決方案。（3）在用戶操作后要給出其明確的操作結(jié)果，可以通過彈出式操作18微信小程序開發(fā)圖解案例教程

微信小程序開發(fā)圖解案例教程

19微信小程序設(shè)計■

微信小程序問答■

小結(jié)■第5章微信小程序設(shè)計及問答微信小程序設(shè)計■

微信小程序問答■

小結(jié)■第5章微信205.1.1突出重點，減少干擾項

每個頁面都應(yīng)有明確的重點，以便于用戶每進入一個新頁面的時候都能快速地理解頁面內(nèi)容。

在確定了重點的情況下，應(yīng)盡量避免頁面上出現(xiàn)其他與用戶的決策和操作無關(guān)的干擾因素。

反面示例如圖5.1所示。

正確示例如圖5.2所示。

5.1微信小程序設(shè)計5.1.1突出重點，減少干擾項

每個頁面都應(yīng)有明確21圖5.1干擾項過多圖5.2減少干擾項圖5.1干擾項過多圖5.2減少22

在一個界面上有多個按鈕的時候，按鈕設(shè)計要有主次之分，并且區(qū)分明顯，讓用戶看到后就知道他能做什么、該怎么做。

反面示例如圖5.3所示。

正確示例如圖5.4所示。5.1.2主次動作區(qū)分明顯

在一個界面上有多個按鈕的時候，按鈕設(shè)計要有主次之分23圖5.3按鈕沒有主次之分圖5.4按鈕有主次之分圖5.3按鈕沒有主次之分圖5.4按鈕24

當(dāng)用戶在進入某個頁面進行某一個操作流程時，應(yīng)避免出現(xiàn)用戶目標流程之外的內(nèi)容而打斷用戶。

例如：用戶想進入某個頁面購買商品，突然彈出抽獎的模態(tài)窗口界面，等用戶抽完獎之后，可能就會忘記去買商品這件事，這對我們引導(dǎo)用戶購買商品很不利，所有要盡量避免打斷用戶的主要流程操作，如圖5.5所示就是用抽獎打斷用戶操作的界面設(shè)計。5.1.3流程明確，避免打斷圖5.5抽獎打斷用戶操作

當(dāng)用戶在進入某個頁面進行某一個操作流程時，應(yīng)避免出25

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

局部加載反饋即只在觸發(fā)加載的頁面局部進行反饋，這樣26

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

模態(tài)的加載樣式會覆蓋整個頁面，由于無法明確告知具體27

彈出式提示（Toast）適用于輕量級的成功提示，它1.5秒后自動消失，并不打斷流程，對用戶影響較小，適用于不需要強調(diào)的操作提醒，例如成功提示。

特別注意該形式不適用于錯誤提示，因為錯誤提示需明確告知用戶，因而不適合使用一閃而過的彈出式提示，如圖5.8所示。5.1.6彈出式操作結(jié)果圖5.8彈出式操作結(jié)果

彈出式提示（Toast）適用于輕量級的成功提示，它28對于需要用戶明確知曉的操作結(jié)果狀態(tài)可通過模態(tài)對話框來提示，并可附帶下一步操作指引，如圖5.9所示。

5.1.7模態(tài)對話框操作結(jié)果圖5.9模態(tài)對話框操作結(jié)果對于需要用戶明確知曉的操作結(jié)果狀態(tài)可通過模態(tài)對話框來29

對于操作結(jié)果已經(jīng)是當(dāng)前流程的終結(jié)的情況，可使用操作結(jié)果頁來反饋。

這種方式最為強烈和明確地告知用戶操作已經(jīng)完成，并可根據(jù)實際情況給出下一步操作的指引，如圖5.10所示。5.1.8結(jié)果頁圖5.10結(jié)果頁

對于操作結(jié)果已經(jīng)是當(dāng)前流程的終結(jié)的情況，可使用操作30

用戶在填寫表單時，輸入格式或者內(nèi)容不符合表單填寫規(guī)則，需要給用戶及時反饋表單填寫問題，可以在表單頂部告知錯誤原因，并標識出錯誤字段提示用戶修改，如圖5.11所示。5.1.9表單填寫友好提示圖5.11表單友好提示

用戶在填寫表單時，輸入格式或者內(nèi)容不符合表單填寫規(guī)311．如何將元素固定在界面，不隨著界面滾動？

界面底部有4個導(dǎo)航菜單：篩選、出發(fā)時間、旅行時間、顯示價格。

把它們固定在界面底部，如圖5.12所示。

5.2微信小程序問答圖5.12固定在界面底部1．如何將元素固定在界面，不隨著界面滾動？

界面底部322．怎么樣獲取用戶在表單組件輸入的內(nèi)容？

能夠獲取用戶輸入的內(nèi)容，需要使用組件的屬性bindchange將用戶的輸入內(nèi)容同步到AppService。

3．為什么腳本內(nèi)不能使用window等對象？

頁面的腳本邏輯是在JsCore中運行的，JsCore是一個沒有窗口對象的環(huán)境，所以不能在腳本中使用window，也無法在腳本中操作組件。

2．怎么樣獲取用戶在表單組件輸入的內(nèi)容？

能夠獲取用334．wx.navigateTo無法同時打開超過5個頁面？

一個應(yīng)用只能同時打開5個頁面，當(dāng)已經(jīng)打開了5個頁面之后，wx.navigateTo不能正常打開新頁面。請避免多層級的交互方式，或者使用wx.redirectTo函數(shù)。

5．如何修改窗口的背景色？

使用page標簽選擇器，可以修改頂層節(jié)點的樣式。

6．如何跳轉(zhuǎn)的時候帶參數(shù)和跳轉(zhuǎn)到的界面接收參數(shù)？4．wx.navigateTo無法同時打開超過5個頁面？

34

本章主要介紹微信小程序在設(shè)計過程中遇到的問題以及如何提高用戶的體驗度，重點掌握以下內(nèi)容：

（1）在設(shè)計過程中要突出重點，減少干擾項，給用