[ javascript ] 網頁操作步驟逐步教學
引導用戶了解網站使用方式的插件。
傳統網站或系統在開放用戶使用時通常都需要一些使用說明,最早使用紙本,接著電子書出現,不過現在追求無障礙使用畫面都儘量簡化避免太複雜,不過有時候就是需要先讓用戶了解該如何下手使用,就需要一些導覽,這邊蒐集一些網路上套件做記錄。
傳統網站或系統在開放用戶使用時通常都需要一些使用說明,最早使用紙本,接著電子書出現,不過現在追求無障礙使用畫面都儘量簡化避免太複雜,不過有時候就是需要先讓用戶了解該如何下手使用,就需要一些導覽,這邊蒐集一些網路上套件做記錄。
- intro.js
網址:http://usablica.github.io/intro.js/
提示方式:把要提示的區域框選燈箱顯示,用氣泡框做說明。
可以使用按鍵「左、右、enter、esc」操作。
需要插入 .js 和 .css 以及在原本的 html 中需要說明的地方加上 data-step 和 data-intro 標籤。
下載點在: GitHub
操作畫面截圖。 - aSimpleTour
網址:http://alvaroveliz.github.io/aSimpleTour/
提示方式:在畫面指定地方顯示顯示氣泡框,要使用畫面右邊操作區塊執行上一步、下一步、結束。
純 javascript ,不需添加 css ,當然可以自行設定 css 。內容也可以使用 json 直接設定,不用改原始 html。
對於不需要選取特定區域倒可以,只是操作焦點和步驟焦點要一直切換,個人感覺不太舒服。
需要搭配使用 jQuery ScrollTo Plugin
下載點: GitHub
操作畫面截圖: - pageguide.js
網址:http://tracelytics.github.io/pageguide/
提示方式:很不一樣的想法,一次在畫面上顯示所有步驟的數字,點選步驟序號在下方顯示說明。
要使用 .js 和 .css
下載點: GitHunb
操作畫面: - Joyride
網址:http://zurb.com/playground/jquery-joyride-feature-tour-plugin
提示方式:使用氣泡框顯示訊息,在氣泡框控制上一步、下一步,搭配 scrollto 移動畫面。
至少使用一個 .js 和 .css,還有另外 2個可選擇的 .js 控制 cookie 。在 html 中要提示的物件加入data-joyride
標籤。
下載點:GitHub
操作畫面: - Website Tour
網址:http://tympanus.net/codrops/2010/12/21/website-tour/
範例:http://tympanus.net/Development/WebsiteTour/
下載:http://tympanus.net/Development/WebsiteTour/WebsiteTour.zip - Bootstro.js
網址:http://clu3.github.io/bootstro.js/ - jQuery TourBus
網址:http://ryanfunduk.com/jquery-tourbus/ - Trip.js
網址:http://eragonj.github.io/Trip.js/
後面幾個看過還沒實測,陸續增加中。