CN108074273A - 一种提升用户体验的动画交互方式 - Google Patents

一种提升用户体验的动画交互方式 Download PDF

Info

Publication number
CN108074273A
CN108074273A CN201810097459.6A CN201810097459A CN108074273A CN 108074273 A CN108074273 A CN 108074273A CN 201810097459 A CN201810097459 A CN 201810097459A CN 108074273 A CN108074273 A CN 108074273A
Authority
CN
China
Prior art keywords
function interface
view
interface container
view1
view2
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN201810097459.6A
Other languages
English (en)
Inventor
喻建军
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Hangzhou Digital Peak Technology Co Ltd
Chengdu Rui Code Technology Co Ltd
Original Assignee
Hangzhou Digital Peak Technology Co Ltd
Chengdu Rui Code Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Hangzhou Digital Peak Technology Co Ltd, Chengdu Rui Code Technology Co Ltd filed Critical Hangzhou Digital Peak Technology Co Ltd
Priority to CN201810097459.6A priority Critical patent/CN108074273A/zh
Publication of CN108074273A publication Critical patent/CN108074273A/zh
Pending legal-status Critical Current

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T13/00—Animation
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/38—Creation or generation of source code for implementing user interfaces

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Software Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • User Interface Of Digital Computer (AREA)
  • Processing Or Creating Images (AREA)

Abstract

本发明涉及一种提升用户体验的动画交互方式，包括：(1)设置两个功能界面容器View1、View2；(2)默认展现功能界面容器View1和内容滚动视图；(3)判断用户在内容滚动视图中的滑动方向，若向上滑动，进步骤(4)，反之结束本次操作；(4)当向上滑动的偏移量大于阀值时，功能界面容器View2取代功能界面容器View2然后进入步骤(5)反之结束本次操作；(5)判断用户在内容滚动视图中的滑动方向，若向下滑动，进入步骤(6)，反之结束本次操作；(6)若向下滑动的偏移量小于阀值的负数时，功能界面容器View1取代功能界面容器View2然后进入步骤(3)；反之结束本次操作。

Description

一种提升用户体验的动画交互方式
技术领域
本发明属于移动终端技术领域，具体涉及一种提升用户体验的动画交互方式。
背景技术
在移动终端的应用开发中，经常会遇到如何在有限的屏幕空间上合理布局页面元素的问题。
当用户打开某个应用，首先会看到的是首页，通常我们会在首页上呈现尽量多的内容，但移动终端的屏幕空间是有限的，当用户在首页上浏览的时候，如何始终让常用的界面模块不移出屏幕，同时也不影响其它界面模块的展示，这是一个问题。
目前大多数应用的做法是在首屏上通过列表展示界面功能模块，这虽然解决了可以呈现更多界面功能模块的问题，但当用户向下滑动查看其它功能模块时，上面的功能模块会移出屏幕，当用户想用到最上面的功能模块时，只能再滑动到顶部才能使用，这样非常不方便用户操作。
发明内容
发明目的：本发明针对上述现有技术存在的问题做出改进，即本发明公开了一种提升用户体验的动画交互方式。当用户想看内容模块的时候，我们会缩小分类功能模块的空间，让用户把更多注意力放在内容上，同时分类功能模块也不会移出屏幕，方便用户随时切换。当用户滑动到顶部的时候，我们猜测用户是想切换分类，这个时候我们会放大分类模块的空间，方便用户切换分类。在这个过程中我们引入了动画技术，使得界面的过度流畅自然，从而提升了用户体验。
技术方案：一种提升用户体验的动画交互方式，包括：
(1)设置两个功能界面容器，分别为View1和View2，在每个功能界面容器的下方添加一个内容滚动视图，功能界面容器View1包含多个按钮，当点击功能界面容器View1中的不同按钮，滚动视图会显示不同的内容；功能界面容器View2包含多个按钮，功能界面容器View2的多个按钮的功能与功能界面容器View1中的多个按钮的功能相对应，其中：
功能界面容器View1中的按钮的尺寸比功能界面容器View2中相对应的按钮的尺寸大；
(2)当开始进行动画交互时，默认展现功能界面容器View1和内容滚动视图，然后进入步骤(3)；
(3)判断用户在内容滚动视图中的滑动方向，当用户在内容滚动视图中向上滑动时，进入步骤(4)，若当用户在内容滚动视图中向下滑动时，结束本次操作；
(4)比较向上滑动的偏移量与阀值的大小，当内容滚动视图的向上滑动的偏移量大于阀值时，开始功能界面容器View1的隐藏动画，功能界面容器View1的隐藏动画完成以后，开始功能界面容器View2的显示动画，功能界面容器View2的动画完成以后，界面呈现为功能界面容器View2和内容滚动视图，然后进入步骤(5)；当内容滚动视图的偏移量小于或等于阀值时，结束本次操作；
(5)判断用户在内容滚动视图中的滑动方向，当用户在内容滚动视图中向下滑动时，进入步骤(6)，若当用户在内容滚动视图中向上滑动时，结束本次操作；
(6)比较向下滑动的偏移量与阀值的负数的大小，当内容滚动视图的向下滑动的偏移量小于步骤(4)中的阀值的负数时，开始功能界面容器View2的隐藏动画，功能界面容器View2的隐藏动画完成后，开始功能界面容器View1的显示动画，界面呈现为功能界面容器View1和内容滚动视图，进入步骤(3)；当内容滚动视图的偏移量不小于步骤(3)中的阀值的负数时，结束本次操作。
进一步地，步骤(4)中的阈值为40。
通过这个交互过程，给用户带来流畅的过度体验，同时让用户看到更多滚动视图的内容，当用户向下滚动的时候，用户是想看到更多滚动视图的内容，所以不需要较大的View1界面，这个时候切换为较小的View2界面，方便用户看到更多的内容。而当滚动视图向上滚动到顶部的时候，这个时候切换为较大的View1界面，让用户方便切换不同分类的内容。
有益效果：本发明公开的一种提升用户体验的动画交互方式解决了在有限的屏幕空间上如何布局页面元素的问题，带给用户流畅自然的用户体验。
附图说明
图1为功能界面容器View1与功能界面容器View2的转换示意图；
图2为本发明公开的一种提升用户体验的动画交互方式的流程图。
具体实施方式：
下面对本发明的具体实施方式详细说明。
如图1和2所示，一种提升用户体验的动画交互方式，包括：
(1)设置两个功能界面容器，分别为View1和View2，在每个功能界面容器的下方添加一个内容滚动视图，功能界面容器View1包含多个按钮，当点击功能界面容器View1中的不同按钮，滚动视图会显示不同的内容；功能界面容器View2包含多个按钮，功能界面容器View2的多个按钮的功能与功能界面容器View1中的多个按钮的功能相对应，其中：
功能界面容器View1中的按钮的尺寸比功能界面容器View2中相对应的按钮的尺寸大；
(2)当开始进行动画交互时，默认展现功能界面容器View1和内容滚动视图，然后进入步骤(3)；
(3)判断用户在内容滚动视图中的滑动方向，当用户在内容滚动视图中向上滑动时，进入步骤(4)，若当用户在内容滚动视图中向下滑动时，结束本次操作；
(4)比较向上滑动的偏移量与阀值的大小，当内容滚动视图的向上滑动的偏移量大于阀值时，开始功能界面容器View1的隐藏动画，功能界面容器View1的隐藏动画完成以后，开始功能界面容器View2的显示动画，功能界面容器View2的动画完成以后，界面呈现为功能界面容器View2和内容滚动视图，然后进入步骤(5)；当内容滚动视图的偏移量小于或等于阀值时，结束本次操作；
(5)判断用户在内容滚动视图中的滑动方向，当用户在内容滚动视图中向下滑动时，进入步骤(6)，若当用户在内容滚动视图中向上滑动时，结束本次操作；
(6)比较向下滑动的偏移量与阀值的负数的大小，当内容滚动视图的向下滑动的偏移量小于步骤(4)中的阀值的负数时，开始功能界面容器View2的隐藏动画，功能界面容器View2的隐藏动画完成后，开始功能界面容器View1的显示动画，界面呈现为功能界面容器View1和内容滚动视图，进入步骤(3)；当内容滚动视图的偏移量不小于步骤(3)中的阀值的负数时，结束本次操作。
进一步地，步骤(4)中的阈值为40。
进一步地，步骤(6)中的阀值的负数为-40。
上面对本发明的实施方式做了详细说明。但是本发明并不限于上述实施方式，在所属技术领域普通技术人员所具备的知识范围内，还可以在不脱离本发明宗旨的前提下做出各种变化。

Claims (2)

1.一种提升用户体验的动画交互方式，其特征在于，包括：
(1)设置两个功能界面容器，分别为View1和View2，在每个功能界面容器的下方添加一个内容滚动视图，功能界面容器View1包含多个按钮，当点击功能界面容器View1中的不同按钮，滚动视图会显示不同的内容；功能界面容器View2包含多个按钮，功能界面容器View2的多个按钮的功能与功能界面容器View1中的多个按钮的功能相对应，其中：
功能界面容器View1中的按钮的尺寸比功能界面容器View2中相对应的按钮的尺寸大；
(2)当开始进行动画交互时，默认展现功能界面容器View1和内容滚动视图，然后进入步骤(3)；
(3)判断用户在内容滚动视图中的滑动方向，当用户在内容滚动视图中向上滑动时，进入步骤(4)，若当用户在内容滚动视图中向下滑动时，结束本次操作；
(4)比较向上滑动的偏移量与阀值的大小，当内容滚动视图的向上滑动的偏移量大于阀值时，开始功能界面容器View1的隐藏动画，功能界面容器View1的隐藏动画完成以后，开始功能界面容器View2的显示动画，功能界面容器View2的动画完成以后，界面呈现为功能界面容器View2和内容滚动视图，然后进入步骤(5)；当内容滚动视图的偏移量小于或等于阀值时，结束本次操作；
(5)判断用户在内容滚动视图中的滑动方向，当用户在内容滚动视图中向下滑动时，进入步骤(6)，若当用户在内容滚动视图中向上滑动时，结束本次操作；
(6)比较向下滑动的偏移量与阀值的负数的大小，当内容滚动视图的向下滑动的偏移量小于步骤(4)中的阀值的负数时，开始功能界面容器View2的隐藏动画，功能界面容器View2的隐藏动画完成后，开始功能界面容器View1的显示动画，界面呈现为功能界面容器View1和内容滚动视图，进入步骤(3)；当内容滚动视图的偏移量不小于步骤(3)中的阀值的负数时，结束本次操作。
2.根据权利要求1所述的一种提升用户体验的动画交互方式，其特征在于，步骤(4)中的阈值为40。
CN201810097459.6A 2018-01-31 2018-01-31 一种提升用户体验的动画交互方式 Pending CN108074273A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201810097459.6A CN108074273A (zh) 2018-01-31 2018-01-31 一种提升用户体验的动画交互方式

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201810097459.6A CN108074273A (zh) 2018-01-31 2018-01-31 一种提升用户体验的动画交互方式

Publications (1)

Publication Number Publication Date
CN108074273A true CN108074273A (zh) 2018-05-25

Family

ID=62157034

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201810097459.6A Pending CN108074273A (zh) 2018-01-31 2018-01-31 一种提升用户体验的动画交互方式

Country Status (1)

Country Link
CN (1) CN108074273A (zh)

Citations (9)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20060232589A1 (en) * 2005-04-19 2006-10-19 Microsoft Corporation Uninterrupted execution of active animation sequences in orphaned rendering objects
CN103279295A (zh) * 2013-05-03 2013-09-04 广东欧珀移动通信有限公司 一种终端桌面图标切换方法及装置
CN104156156A (zh) * 2013-05-13 2014-11-19 腾讯科技（深圳）有限公司 应用交互界面信息展示方法及装置
CN104599307A (zh) * 2015-02-11 2015-05-06 成都品果科技有限公司 一种在移动终端上采用动画显示图片的方法
CN104821004A (zh) * 2015-04-28 2015-08-05 成都品果科技有限公司 一种以基于视差原理的组合动画实现用户行为引导的方法
CN104932889A (zh) * 2015-06-15 2015-09-23 北京奇虎科技有限公司 页面可视化生成方法和装置
CN105988656A (zh) * 2015-02-13 2016-10-05 深圳积友聚乐科技有限公司 界面信息的展示系统和方法
US20170278291A1 (en) * 2016-03-25 2017-09-28 Microsoft Technology Licensing, Llc Multi-Mode Animation System
CN107463367A (zh) * 2017-06-22 2017-12-12 北京小度信息科技有限公司 转场动画实现方法及装置

Patent Citations (9)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20060232589A1 (en) * 2005-04-19 2006-10-19 Microsoft Corporation Uninterrupted execution of active animation sequences in orphaned rendering objects
CN103279295A (zh) * 2013-05-03 2013-09-04 广东欧珀移动通信有限公司 一种终端桌面图标切换方法及装置
CN104156156A (zh) * 2013-05-13 2014-11-19 腾讯科技（深圳）有限公司 应用交互界面信息展示方法及装置
CN104599307A (zh) * 2015-02-11 2015-05-06 成都品果科技有限公司 一种在移动终端上采用动画显示图片的方法
CN105988656A (zh) * 2015-02-13 2016-10-05 深圳积友聚乐科技有限公司 界面信息的展示系统和方法
CN104821004A (zh) * 2015-04-28 2015-08-05 成都品果科技有限公司 一种以基于视差原理的组合动画实现用户行为引导的方法
CN104932889A (zh) * 2015-06-15 2015-09-23 北京奇虎科技有限公司 页面可视化生成方法和装置
US20170278291A1 (en) * 2016-03-25 2017-09-28 Microsoft Technology Licensing, Llc Multi-Mode Animation System
CN107463367A (zh) * 2017-06-22 2017-12-12 北京小度信息科技有限公司 转场动画实现方法及装置

Non-Patent Citations (3)

* Cited by examiner, † Cited by third party
Title
NANNA VERHOEFF,ET AL.: "The navigational gesture: Traces and tracings at the mobile touchscreen interface", 《NECSUS EUROPEAN JOURNAL OF MEDIA STUDIES》 *
曹淮 等: "界面设计中的交互动画应用研究", 《包装工程》 *
林一 等: "一种增强现实分场景推送情景感知服务的方法", 《软件学报》 *

Similar Documents

Publication Publication Date Title
CN104268221B (zh) 基于Ios系统WebView的翻页方法和翻页系统
KR101150545B1 (ko) 이동통신단말기 및 그것의 화면 전환 방법
CN107728901A (zh) 界面显示方法、装置及终端
CN107704177A (zh) 界面显示方法、装置及终端
CN102270081B (zh) 一种调整列表元素大小的方法及装置
CN104156156B (zh) 应用交互界面信息展示方法及装置
CN104615343A (zh) 一种终端截图的方法及装置
DE202009018404U1 (de) Erweiterter berührungsempfindlicher Steuerbereich für ein elektronisches Gerät
DE202009018283U1 (de) Karten-Metapher für Aktivitäten in einem Rechengerät
DE202012007707U1 (de) Vorrichtung zum Vorsehen einer Benutzerschnittstelle auf einer Vorrichtung, die Inhalt-Operatoren anzeigt
EP1825472B1 (en) Method and apparatus for video editing on small screen with minimal input device
DE19964158A1 (de) Funktelefon
DE202011109296U1 (de) Vorrichtung zur Bereitstellung eines visuellen Übergangs zwischen Bildschirmen
DE112010003602T5 (de) System und Verfahren zum Anzeigen, Navigieren und Auswählen von elektronischgespeichertem Inhalt auf einem Multifunktionshandgerät
DE212006000081U1 (de) Benutzerschnittstelle zum Entsperren einer Vorrichtung durch Ausführen von Gesten auf einem Entsperrungsbild
CN103118197B (zh) 一种触屏移动终端及其短信显示方法
CN107300986A (zh) 输入法切换方法及装置
CN106406728A (zh) 移动终端桌面手势的操作方法
CN102331917A (zh) 信息显示装置及记录其控制程序的记录介质
WO2023155811A1 (zh) 页面布局调整方法、装置
CN103780789B (zh) 设定值输入装置、图像形成装置以及设定值输入方法
TW201525843A (zh) 螢幕畫面的縮放及操作方法、裝置與電腦程式產品
CN101615089A (zh) 应用户的操作显示图像不同效果的图像显示设备及方法
EP2290517A1 (en) Information processing device, information processing method, and information processing control program
CN106210259A (zh) 一种分屏显示方法及终端

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
RJ01 Rejection of invention patent application after publication

Application publication date: 20180525

RJ01 Rejection of invention patent application after publication