簡易檢索 / 詳目顯示

研究生: 劉瞰
Kan Liu
論文名稱: 網路購物平臺提示性動效設計之研究
A Study on the Prompting Dynamic Effect for the Online Shopping Platform
指導教授: 陳建雄
Jian-Xiong Chen
口試委員: 吳志富
Zhi-Fu Wu
柯志祥
Zhi-Xiang Ke
學位類別: 碩士
Master
系所名稱: 設計學院 - 設計系
Department of Design
論文出版年: 2021
畢業學年度: 109
語文別: 中文
論文頁數: 107
中文關鍵詞: 動效設計網路購物平臺提示性自然人機交互
外文關鍵詞: Dynamic design, Online shopping platform, Suggestive, Natural human computer interaction
相關次數: 點閱:320下載:1
分享至:
查詢本校圖書館目錄 查詢臺灣博碩士論文知識加值系統 勘誤回報
  • 拜數碼產品技術的日新月異所賜,越來越多的動態設計形式可以在介面當中流暢運行,同時,在信息量爆炸的今天,人們每天都要使用各式各樣的APP,流覽五花八門的介面,這其中又以炙手可熱之網路購物APP及其相關衍生物為重中之重。動效的加入好似一劑良藥,為介面中繁雜的資訊增添了一絲明晰之意。把握住恰到好處的動效,用戶對於介面的沉浸感與對待產品之忠誠度便會呼之欲出。
    本研究包含兩個階段:(1) 前導性實驗設計;以「宜家家居」APP為基礎製作出分別帶有動態與靜態提示點的樣本,用於測試介面中動效之有無對於用戶的影響,再以同樣之基礎製作帶有不同動態提示點的樣本,用於測試介面中動效之動態差異對用戶之影響,並為後續的驗證實驗提供可參考之自變項設定依據。(2) 驗證實驗:以前導性實驗及文獻作為依據,驗證實驗採用3(動態:縮放、位移、陰影疊加) * (頻率:快、慢)雙因數混合實驗設計,兩兩組合配對共計6個樣本,實驗內容包含一個試驗任務五個測評項,分別為:操作時間計測、點擊各部位觸發器之次數(提示點、卡片)、用戶感受問卷,逐個分析不同的實驗樣本,最後提煉出實驗的結果與建議。
    研究結果可以歸納如下:(1) 「陰影疊加」與「縮放」兩種動態在提示性與意象的營造兩方面的差異不大,但二者在以上兩方面與「位移」性動效的差異較大,所以,由此推斷在用戶的認知中,具有「閃爍意象」的,透過大小來呈現的動效,更符合用戶的認知。(2) 陰影疊加性動效在滿意度方面優於其他二者,推測在介面中合理運用陰影會加強介面之空間感,使之資訊層次更顯分明,視覺體驗更趨友好。(3) 兩個自變項之間產生之交互作用令研究者推測,動效中視覺強度的大小直接影響到動效對頻率的敏感程度,也就是說視覺信號越強烈,當高頻率介入時,其視覺吸引力便會顯著的增長。(4) 實驗中「頻率」的變項主效應體現的比較少,更多是透過與「動態」之交互作用體現於實驗結果之中。可透過「頻率」推斷出不同動態之動效對於「頻率」之敏感度。(5) 實驗結果表明動效營造之意象與視覺強度是動效的滿意度是否得到保障之關鍵。


    Due to the rapid development of digital product technology, more and more dynamic design forms can run smoothly in the interface. At the same time, with the rapidly rising of network traffic, users have to use a variety of apps every day to browse through various user interfaces, among which the hot online shopping app and its related derivatives are the most important. Dynamic effect is like a good medicine, which adds a trace of clarity to the complicated information in the interface. Grasp the right dynamic effect, the user's immersion in the interface and loyalty to the product will be ready.
    This study consists of two stages: (1) Pilot experiment design: Based on the IKEA app, make samples of static and dynamic prompt points. In the use of test if dynamic effect’s existence can impact on users. Then according to the same basis to create samples with different dynamic prompt points. It is intended to test the impact of difference between dynamic effects with different actions to the users, and provide a reference for the subsequent validation experiments. (2) Validation experiments: Based on previous experiments and literature, the verification experiment adopted a two factor between-subjects experimental design of 3 (dynamics: scaling, displacement, shadow superposition) x (frequency: fast, slow). Pairing two different combinations, a total of 6 prototypes were obtained. The content of the experiment includes one experiment task and five evaluation items. They are operation time measurement, times of clicking trigger of each part (prompt point, card), the questionnaire for user satisfaction. we can analyze different experiment prototypes and get the final experiment results and suggestions.
    The experiment results are summarized as follows: (1) “Shadow Overlay” and “Zoom” these two dynamics seem to have no significant difference on “suggestive” and “imagery”. But there exists significant difference between “displacement” and two of them. Therefore, it can be inferred that in the user's cognition, the dynamic effect presented by size with "flashing image" is more consistent with the user's cognition. (2) “Shadow Overlay” this dynamic is better than the other two in satisfaction, which leads researcher to the conclusion that the rational use of shadow in the interface will enhance the spatial sense of the interface. Make the information level more obvious and the visual experience more friendly. (3) The interaction between two independent variables make the researcher speculated that the visual intensity directly affects the sensitivity of dynamic effect to frequency. That is to say, the stronger the visual signal is, when high frequency intervenes, its visual attraction will increase exponentially. (4) In the experiment, “frequency” this variable, shows no significant main effect, but through the interaction with “dynamic”, the influence reflected in the experimental results. Through “frequency” this variable, it could be infer that, the sensitivity about different dynamics in dynamic effects.

    目錄 中文摘要 Ⅰ 英文摘要 Ⅲ 致謝 Ⅳ 圖目錄 Ⅷ 表目錄 Ⅸ 第一章 緒論 1 1.1研究背景與動機 1 1.2研究目的 1 1.3研究架構與流程 2 1.4研究範圍與限制 3 第二章 文獻探討 6 2.1視覺動效 6 2.1.1視覺動效在移動端介面中的應用 6 2.1.2移動端視覺動效之分類 6 2.1.3移動端視覺動效之可用性研究 7 2.1.4移動端視覺動效之視覺形態 9 2.1.5移動端視覺動效之設計風格 10 2.2交互介面之可用性 11 2.2.1介面中之使用場景 11 2.2.2自然人機交互 12 2.2.3用戶經驗的喚醒規則 13 2.2.4信息的前饋與回饋 14 2.3移動端電子商務類應用 15 2.3.1移動端應用 15 2.3.2網路購物小程式 16 2.3.3基於用戶經驗的微交互 16 2.2.4基於電子商務小程式的動效設計流程 18 第三章 研究方法與進行步驟 20 3.1受測者 20 3.2實驗設計 20 3.3實驗步驟 20 3.4實驗流程 22 第四章 研究結果 24 4.1 前導性實驗分析 24 4.1.1 受測樣本介紹 24 4.2 前導性實驗設計 24 4.2.1 前導性實驗設備 25 4.2.2 實驗問卷內容設計 26 4.2.3 前導性實驗流程 27 4.3 前導性實驗受測者基本資料分析 28 4.4 前導性實驗結果分析 28 4.4.1 前導性實驗分析 29 4.4.2 任務操作感受性評量分析 31 4.5 前導性實驗結論與建議 36 第五章 驗證實驗與結果分析 38 5.1 驗證實驗與結果分析 38 5.2 驗證實驗說明 38 5.2.1 驗證實驗研究變項 38 5.2.2 驗證實驗模擬原型製作 40 5.2.3 驗證實驗樣本 43 5.2.4 網路購物應用使用經驗 43 5.3 驗證實驗物件 46 5.3.1 基本資料調查結果分析 46 5.3.2 網路購物應用使用經驗 47 5.4 驗證實驗結果 49 5.4.1 任務績效分析 49 5.4.1.1 測評一操作績效分析 49 5.4.1.2 測評二操作績效分析 51 5.4.1.3 測評三操作績效分析 53 5.4.1.4 測評四操作績效分析 59 5.4.1.5 測評五操作績效分析 61 5.4.2 用戶感受問卷分析 64 第六章 結論與建議 80 6.1 前導性實驗結果 80 6.2 驗證實驗研究結果 81 6.3 驗證結論與設計建議 84 6.4 後續研究與建議 85 圖目錄 圖1-1 研究框架與流程 3 圖2-1 介面動效之分類及關係示意圖 7 圖2-2 介面動效之形態要素 10 圖2-3 動效風格之分類 11 圖2-4 耶克斯多德森定律 14 圖2-5 網路購物小程式 16 圖2-6 情感反應場 18 圖2-7 基於意象的動效設計方法 19 圖3-1 本研究之實驗流程圖 23 圖4-1 應用程式樣本ICON解圖 24 圖4-2五款受測樣本 25 圖5-1三種動態的樣本呈現效果 40 圖5-2樣本圖解 41 圖5-3三類動態 42 圖5-4受測者性別分佈 46 圖5-5受測者年齡分佈 46 圖5-6受測者學歷分佈 47 圖5-7受測者職業分佈 47 圖5-8受測者手機系統分佈 47 圖5-9受測者對電子移動應用的熟悉程度 48 圖5-10閃爍意象與彈跳意象 53 圖5-11大小變化性動態帶來的規律 57 圖5-12彈跳性動態帶來的規律 58 圖5-13任務四次數統計之交互作用圖 61 圖5-14動態提示對流覽產品的視覺干擾程度統計之交互作用圖 79 圖6-1 Issara Willenskomer的動效十二法則運用於受測介面之情況 86 表目錄 表2-1 介面動效可用性四種方式 7 表2-2 Issara Willenskomer提出的動效設計十二法則 8 表2-3自然映射三階 12 表2-4 用戶行動七階段 14 表2-5 微交互工作流程 17 表4-1 Android HUAWEI P30規格內容 25 表4-2基於動態與靜態的樣本與基於不同維度動態樣本操作說明 26 表4-3基於動態與靜態提示點的樣本操作說明 28 表4-4測評項1-4針對動態與靜態提示點的滿意度問卷敘述統計與檢定結果1 32 表4-5測評項1-4針對動態與靜態提示點的滿意度問卷敘述統計與檢定結果2 33 表5-1驗證實驗之原型設計畫面組合 43 表5-2實驗任務內容與目的 44 表5-3測評一敘述統計結果 49 表5-4測評一雙因數ANOVA變異數分析 50 表5-5測評二敘述統計結果 51 表5-6測評二雙因數ANOVA變異數分析表 52 表5-7測評二Scheffe事後檢定結果 53 表5-8測評三敘述統計結果 53 表5-9測評三雙因數ANOVA變異數分析表 54 表5-10測評三Scheffe事後檢定結果 55 表5-11測評四敘述統計結果 59 表5-12測評四雙因數ANOVA變異數分析表 60 表5-13測評五敘述統計結果 61 表5-14測評五雙因數ANOVA變異數分析表 63 表5-15測評五Scheffe事後檢定結果 64 表5-16操作過程總體滿意度敘述統計結果 65 表5-17操作過程總體滿意度雙因數ANOVA變異數分析 66 表5-18操作過程總體滿意度Scheffe事後檢定結果 66 表5-19提示點引導性滿意度敘述統計分析結果 67 表5-20提示點引導性滿意度雙因數ANOVA變異數分析表 68 表5-21提示點引導性滿意度Scheffe事後檢定結果 69 表5-22動效提示與場景有機結合程度敘述統計結果 69 表5-23動效提示與場景有機結合程度雙因數ANOVA變異數分析 70 表5-24動效提示與場景有機結合程度Scheffe事後檢定結果 71 表5-25動效對於用戶駐留介面時長敘述統計結果 72 表5-26動效對於用戶駐留頁面時長雙因數ANOVA變異數分析表 73 表5-27動效對於用戶駐留頁面時長Scheffe事後檢定結果 73 表5-28動效提示的視覺豐富性程度敘述統計結果 74 表5-29動效提示的視覺豐富性程度雙因數ANOVA變異數分析表 75 表5-30動效提示的視覺豐富性程度Scheffe事後檢定結果 76 表5-31動態提示對流覽產品的視覺干擾程度敘述統計結果 76 表5-32動態提示對流覽產品的視覺干擾程度雙因數ANOVA變異數分析 77 表5-33動態提示對流覽產品的視覺干擾程度Scheffe事後檢定結果 78 表6-1驗證實驗各測評項統計結果有無顯著差異總覽 81 表6-2 用戶感受度有無顯著差異總覽 83

    參考文獻
    中文文獻
    1. 王軍、肖暢、楊怡. (2020). APP動態效果設計中的用戶專注沉浸度模型研究,包裝工程,41,114 -121
    2. 李亭 (2015). 基於用戶體驗的智慧手機APP介面設計研究,太原理工大學學位論文,太原
    3. 李松峰(譯). (2010).微交互,細節成就卓越設計(原作者:Dan Saffer).北京、人民郵電出版社
    4. 任宏、鄒媛媛、王丹丹、張甯寧. (2018).基於ERP的扁平化與擬物化圖示認知效率與研究,包裝工程,18,186-190
    5. 阿裡巴巴1688用戶體驗部(2015).U一點料:阿裡巴巴1688UED體驗設計踐行之路(頁124-130),北京;機械工業出版社
    6. 吳明、劉振宇. (2020). 基於場景變化的社交工具互動設計,包裝工程,41,134-139.
    7. 周睿. (2015). 啟動時態介面中動態效果的互動設計研究,包裝工程,36,83-86.
    8. 洪心穎、陳建雄. (2019). 健身指導平臺之用戶介面研究。銘傳大學2019國際學術研討會-「智慧設計X跨域整合」設計論文集,銘傳大學,2019年3月15日,1-8。
    9. 唐浩超.(2012).介面設計中動態圖形的設計研究,西南交通大學學位論文,成都
    10. 陳建雄(譯). (2010). 互動設計:跨越人—電腦互動(原作者:Preese,Rogers,Yvonne,Sharp)。臺北市:全華圖書(原著2006出版)
    11. 陳學文. (2005).藝術設計專業色彩教學的新模式,美術觀察,9,100
    12. 徐千堯、徐迎慶. (2020). 智慧手機動態效果設計研究,電腦輔助設計與圖形學學報,32,1096-1100
    13. 徐科偉.李世國. (2010). 交互設計中的簡單體驗及其設計表現,包裝工程,22,47-50
    14. 張博、胡瑩. (2020). 基於沉浸體驗的標籤式導航轉場方式研究,包裝工程,41,205-209.
    15. 喻國明、梁爽. (2017). 小程式與輕應用:基於場景的社會嵌入與群體互動,武漢大學學報,70,120-125
    16. 楊煥、陳星海.(2015).移動應用的分類及發展,載于丁誠,小設計,大思維;移動應用介面的設計方法與實踐(頁5-9),北京:機械工業出版社
    17. 鄧俊峰、梁婷. (2017).新媒體視域下視覺語言傳播的互動性實現,新興傳媒,12,55
    18. 滕守堯、朱疆源(譯).藝術與視知覺(原作者:Rudolf Arnheim). 成都市,四川人民出版社
    19. 譚浩、劉進、譚征宇. (2016). 基於意向的互動介面動態效果設計方法研究,包裝工程,37,53-56.
    英文文獻
    1. Aleksy, M & Bronmark, J & Mahate, S. (2016). Microinteractions in Mobile and Wearable Computing, Paper presented at the meeting of 2016 IEEE 30th IEEE 30th International Conference on Advanced Information Networking and Applications, Crans-Montana, Switzerland
    2. Frank, T & Ollie, J. (1981). The Illusion of Life: Disney Animation. New York City: Abbeville Publishing Group
    3. Golod, I & Heidrich, F & Möllering, C & Ziefle, M. (2013). Design principles of hand gesture interfaces for micro interactions, Paper presented at the meeting of 6th International Conference on Designing Pleasurable Products and Interfaces, Newcastle, UK
    4. Haynes, C & Intille, S & Maniar, D & Manjourides, J & Ponnada, A. (2017). Microinteraction Ecological Momentary Assessment Response Rates: Effect of Microinteractions or the Smartwatch, In L, Paul & K, Antonio, Wearable Ubiquitous Technol,The 2016 ACM International Joint Conference on Pervasive and Ubiquitous Computing, Heidelberg Germany.
    5. Norman, D. A. (1990). The design of everyday thinhs. New York, NY: Basic Books.
    6. Saffer, D. (2013). Microinteractions Design with Details, Boston, MA: O’Reeilly Media
    7. Teigen, K.H. (1994). Yerkes-Dodson: A Law for all Seasons, Theory & Psychology, 4(4), 525-547
    網路文獻
    8. Issara Willenskomer (2017). Creating Usability with Motion:The UX in Motion Manifesto. retrieved from: https://medium.com/ux-in-motion/creating-usability-with-motion-the-ux-in-motion-manifesto-a87a4584ddc
    9. Mod研究院(2020), 2020年中國移動互聯網趨勢洞察報告. 取自https://www.mob.com/mobdata/report

    QR CODE