Nio 的個人網站

[ javascript ] 網頁操作步驟逐步教學

引導用戶了解網站使用方式的插件。

傳統網站或系統在開放用戶使用時通常都需要一些使用說明，最早使用紙本，接著電子書出現，不過現在追求無障礙使用畫面都儘量簡化避免太複雜，不過有時候就是需要先讓用戶了解該如何下手使用，就需要一些導覽，這邊蒐集一些網路上套件做記錄。

1. intro.js
   網址：http://usablica.github.io/intro.js/
   
   提示方式：把要提示的區域框選燈箱顯示，用氣泡框做說明。
   可以使用按鍵「左、右、enter、esc」操作。
   
   需要插入 .js 和 .css 以及在原本的 html 中需要說明的地方加上 data-step 和 data-intro 標籤。
   下載點在： GitHub
   
   操作畫面截圖。
   
   
   
   
   
   
   
2. aSimpleTour
   網址：http://alvaroveliz.github.io/aSimpleTour/
   
   提示方式：在畫面指定地方顯示顯示氣泡框，要使用畫面右邊操作區塊執行上一步、下一步、結束。
   
   純 javascript ，不需添加 css ，當然可以自行設定 css 。內容也可以使用 json 直接設定，不用改原始 html。
   
   對於不需要選取特定區域倒可以，只是操作焦點和步驟焦點要一直切換，個人感覺不太舒服。
   
   需要搭配使用 jQuery ScrollTo Plugin
   下載點： GitHub
   
   操作畫面截圖：
   
   
   
3. pageguide.js
   網址：http://tracelytics.github.io/pageguide/
   
   提示方式：很不一樣的想法，一次在畫面上顯示所有步驟的數字，點選步驟序號在下方顯示說明。
   要使用 .js 和 .css
   下載點： GitHunb
   
   操作畫面：
   
   
   
   
   
4. Joyride
   網址：http://zurb.com/playground/jquery-joyride-feature-tour-plugin
   
   提示方式：使用氣泡框顯示訊息，在氣泡框控制上一步、下一步，搭配 scrollto 移動畫面。
   
   至少使用一個 .js 和 .css，還有另外 2個可選擇的 .js 控制 cookie 。在 html 中要提示的物件加入 data-joyride  標籤。
   下載點：GitHub
   
   操作畫面：
   
   
   
   
5. Website Tour
   網址：http://tympanus.net/codrops/2010/12/21/website-tour/
   範例：http://tympanus.net/Development/WebsiteTour/
   下載：http://tympanus.net/Development/WebsiteTour/WebsiteTour.zip
   
   
6. Bootstro.js
   網址：http://clu3.github.io/bootstro.js/
   
   
7. jQuery TourBus
   網址：http://ryanfunduk.com/jquery-tourbus/
   
   
8. Trip.js
   網址：http://eragonj.github.io/Trip.js/
   
   
   
   

後面幾個看過還沒實測，陸續增加中。