網頁視差滾動效果之編輯系統開發

Development of a Parallax Scrolling Effect Editing System in Web Page

王崧年(Song-Nian Wang)

指導教授 ： 徐豐明

國立臺中科技大學/設計學院/多媒體設計系碩士班/碩士(2014年)

https://doi.org/10.6826/NUTC.2014.00020

摘要

視差滾動(Parallax Scrolling)是近年來網頁設計流行的特效之一，透過滑鼠滾輪滾動捲軸，多層網頁內容以不同速度移動所產生出的立體效果，視差滾動能夠提升網頁視覺體驗，比起單純的文字與圖片，更吸引使用者，也可以透過動畫表現，提升了解網頁傳達訊息的效率。許多市面上設計視差滾動網頁都是全新製作，開發視差滾動效果網頁的方法有許多種，可以自行編寫程式碼，不過多數仍然使用開放原始碼製作視差滾動網站，設計視差滾動網頁使用開放原始碼後設計師仍然需要編寫程式。

本研究開發網頁視差滾動程式編輯系統，設計師只要透過簡單的介面點選與輸入數值的動作，即可輸出有視差滾動效果的網頁檔，降低設計師撰寫視差網頁程式的負擔，除了方便開發新的視差滾動網頁，還能夠套用舊有的網頁加入視差滾動效果。由於視差滾動有許多開放原始碼，本研究選擇配合skrollr開放原始碼作為本研究系統的開發。

研究結果顯示使用介面化的編輯系統比起文字編輯器，能夠加快編輯的時間，並且降低編輯錯誤率，經由SUS系統易用性分析，使用者認為本研究開發之系統的易用性是好的。

關鍵字

視差滾動 ； 網頁設計 ； 網頁視覺效果 ； 易用性

並列摘要

Since Parallax scrolling is a recent one of popular effects in web design via mouse wheel scroll while web content of multi-layer is move with different speed to make three-dimensional effect. Parallax scrolling can enhance experience of web vision that is more attractive user than only text and picture, and can also show through animation to enhance efficiency of understanding web information. Many web pages with parallax scrolling are from scratch production in the market, and there are several methods for development parallax scrolling web page, although developer can code program by himself, but most parallax scrolling web pages are made by open source. Developer still code program after design web page with parallax scrolling use open source.
This study developed editing tool for web page with parallax scrolling, through the tool of simply enter interface, and developer only needs to enter parameter value of scroll position and attribute of visual presentation that can output web file with parallax scrolling and reduce the web developer burden. In addition to conveniently developing new web, it can apply to old web for addition parallax scrolling effect. Because there are many open sources of parallax scrolling, this study chooses skrollr open source as our tool development.
The results showed that interface of the system lead to more time-saving to edit than a text editor and reduce error rate of edit. According to the analysis, system usability scale (SUS) is good about usability of this study develop system.

並列關鍵字

Parallax Scrolling ； Web Design ； Web Vision Effect ； Usability

參考文獻

林于聖. (2008). 自動化之網頁轉換小工具系統. 臺灣大學資訊工程學研究所碩士論文.

吳立雅. (2004). 以人機介面觀點探討醫令資訊系統的用藥疏失因素及介面設計原則. 元智大學資訊傳播學系碩士論文.

Prinzhorn, Alexander. (2013). skrollr-parallax scrolling for the masses. from http://prinzhorn.github.io/skrollr/

Matti Anttonen, Arto Salminen, Tommi Mikkonen, & Taivalsaari., Antero. (2011, March 21-25). Transforming the Web into a Real Application Platform: New Technologies, Emerging Trends and Missing Pieces. Paper presented at the Symposium On Applied Computing, Taiwan.

英文文獻