miniui页面移动的时候透明_移动端界面手势和转场动效

&＃xff08;最近丧了一下&＃xff0c;重新开始更&＃xff0c;今天先写一个和前几篇无关的&＃xff0c;这个问题是做作品集的时候遇到的&＃xff09;

最近发现原来Keynote可以用开做交互低保真&＃xff0c;还可以用来制作动效&＃xff0c;这两天决定学习一下&＃xff0c;出一篇&＃xff0c;自学教程。

首先先写一下交互行为下的手势&＃xff5e;

-- 手势 --

用户通过在触摸屏上使用手势来与移动设备进行交互。手势不仅是人与内容之间亲密的联系&＃xff0c;而且手势加强了人对屏幕上对象更直接的操作感。

基本手势如下&＃xff1a;

· 点击(Tap)&＃xff1a;激活一个控件或者选择一个对象。

· 拖曳(Drag)&＃xff1a;让一个元素从一边移动到另一边&＃xff0c;或者在屏幕内拖动元素。

· 滑动(Flick )&＃xff1a;快速滚动或平移。

· 橫扫(Swipe)&＃xff1a;单指操作以返回上一页&＃xff0c;呼出分屏视图控制器中的隐藏视图&＃xff0c;滑出列表行中的删除按钮&＃xff0c;或在轻压中呼出操作列表。

· 双击( Double tap )&＃xff1a;放大并居中内容或图片&＃xff0c;或者缩小已放大过的内容或图片。

· 捏合(Pinch)&＃xff1a;向外张开时放大当前内容&＃xff0c;向内捏合时缩小当前内容。

· 长按(Touch andhold)&＃xff1a;在可编辑或者可选文本中操作&＃xff0c;显示放大视图用于光标定位。在某些与集合视图类似的视图中操作&＃xff0c;进入对象可编辑的状态。

· 摇晃(Shake )&＃xff1a;撤销或重做。

&＃xff08;目前我整理到的就这么多&＃xff0c;如果有缺的可以评论或是私信和我说一下&＃xff09;

手势使用原则

一般使用标准手势

用户已熟悉了标准手势&＃xff0c;并不喜欢在做相同事情时被迫去学习不同的方式。在游戏等沉浸式体验的应用中&＃xff0c;自定义的手势能够成为体验的有趣要素。但是在其他应用中&＃xff0c;最好使用标准手势&＃xff0c;这样用户就无须花费多余的力气去学习和记忆它们。

不要禁止系统性的手势

除了标准手势&＃xff0c;还有一些手势会触发系统性的操作&＃xff0c;譬如呼出控制中心或通知中心。在每个应用中&＃xff0c;用户都依赖使用这些手势。

避免使用标准手势来执行非标准的操作

除非你的应用是一个极具可玩性的游戏&＃xff0c;否则重新定义标准手势会变得混乱和复杂。

为基于界面的导航和操作提供补充性的快捷手势&＃xff0c;而不是取而代之

不可能提供简单明显的方式来导航或执行操作&＃xff0c;即使它可能意味着额外的点击。非常多的系统应用包含一个提供了清晰可点的“返回上一页"按钮的导航栏。但是用广地能通过在屏幕边缘右滑来返回。 在iPad上&＃xff0c;用户可以按Home键退出到主屏幕&＃xff0c;或者使用四四指捏合的手势。

使用多指手势来加强某些应用的体验

虽然设计多个手指同时操作的手势不适用于每一个应用&＃xff0c;但是他们能够丰富一些应用的体验&＃xff0c;譬如游戏和绘画应用。一款游戏就有可能包含多屏幕上的控件&＃xff0c;比如打游戏时同时操作的控制杆和发射键。

3D触摸

&＃xff08;额外知识点&＃xff0c;我了解到的也不是特别详细&＃xff09;

从iOS10的到来&＃xff0c;新增来3D Touch 功能&＃xff0c;它为触碰式交互增加来一个新维度。用户通过对触摸屏幕施加不同的力度来视线更多的功能&＃xff0c;譬如触发菜单、显示更多内容或者快进/快退播放动画。

( 3D Touch 这个知识点没有明确理解&＃xff0c;暂时先不写了&＃xff0c;之后补充。)

-- 转场动效 --

好的转场动效应该让用户感到反馈及时、条理清晰、连贯有趣。

合理出现反场动效可以有效引导用户注意力&＃xff0c;减少用户在页面跳转或元素重组时的认知困感&＃xff0c;消除等待加载时的焦虑&＃xff0c;从而提升整体用户体验的流畅度。

1.转场动效元素

· 进入元素&＃xff1a;转场前没有、转场后出现的元素。在转场中需要通过恰当的动效被用户感知到。

· 淡出元素&＃xff1a;转场前有、转场后消失的元素。应当快速消失以免分散用户注意力。

· 共同元素&＃xff1a;转场前后都出现的元素&＃xff0c;但是大小、透明度、展示区域不一定相同。可以细微至单个图标&＃xff0c;也可以是占据全屏的图片或视频。在转场中可以作为媒介引导用户视觉焦点&＃xff0c;实现更自然的过渡效果。

2.动效原则

· 快速响应&＃xff1a;用户触发转场后&＃xff0c;应该快速给予反馈。转场动效不能太慢&＃xff0c;让用户等太久;但也不能过快&＃xff0c;让用户猝不及防。建议时长300~400ms&＃xff0c;超过400ms用户会明显感觉到延迟。

· 有层次的时序&＃xff1a;在建立转场的时候&＃xff0c;对于元素移动的顺序和时机都要详加考虑。要确保这个动画能使信息的展示具有层次感。也就是说&＃xff0c;它能引导用户的关注力&＃xff0c;将最重要的内容传递给用户。

· 视觉连贯性&＃xff1a;在两个视觉效果不同的页面之间的转场应该平滑、轻快&＃xff0c;更重要的是使用户感觉思路清晰而非困感。一个好的转场可以四两拨千斤&＃xff0c;让用户清楚地了解他们应该关注哪里。

· 操作状态及时反馈&＃xff1a;接收到输入事件&＃xff0c;如点击屏幕或者语音唤醒输入&＃xff0c;设备能清晰而及时地让用户感知触模按钮和语音输入时的变化。

· 动效系统层面相对统一。

· 有意义的动效&＃xff1a;如果没有必要不建议添加动效&＃xff0c;衡量一个动效是否有意义&＃xff0c;可以用以下几个标准来衡量&＃xff1a;

&＃xff08;1&＃xff09;添加动效后是否影响到性能&＃xff0c;不出现大幅度波动或者卡顿现象。

&＃xff08;2&＃xff09;添加动效后是否会提高产品的可用性&＃xff0c;必须带有明确的目的性&＃xff0c;提升用户的舒适度&＃xff0c;不做多余或炫技的动效。

&＃xff08;3&＃xff09;提升产品界面的沉浸式引导、灵动性和用户代入感&＃xff0c;沉浸式引导效果可增强用户对产品的认知和情绪的带入。

3.转场类型

· 侧边覆盖滑入/滑出

描述&＃xff1a;进场页面从屏幕右侧向左侧滑入&＃xff0c;退场时从左往右滑出。

适用场景&＃xff1a;最常见的转场类型&＃xff0c;适用于上下层级关系的页面跳转&＃xff0c;在页面中多表现为“进入一返回”操作&＃xff0c;如列表。

· 底部滑入/滑出

描述&＃xff1a;进场页面从屏幕底部向上滑入&＃xff0c;退场时从上往下滑出。

适用场景&＃xff1a;适用于浮层类页面&＃xff0c;在页面中多表现为 “打开-关闭”或“新建、取消”操作&＃xff0c;如创建页、发表页、搜索页、选择器。

· 神奇移动

描述&＃xff1a;通过改变相同元素的属性&＃xff0c;如位置、大小、透明度、 颜色、阴影等&＃xff0c;神奇移动自动补全中间的过渡状态&＃xff0c;形成平滑的过渡效果。

适用场景&＃xff1a;

&＃xff08;1&＃xff09;图片、视频等作为共同元素&＃xff0c;由缩略图放大为大图或全屏显示&＃xff0c;反之亦然。多出现在图片或视频类应用中&＃xff0c;如点击列表中的缩略图&＃xff0c;会切换到大图模式等。

&＃xff08;2&＃xff09;采用页面内共同元素&＃xff0c;进入详情页或聚合页。只有位置变化&＃xff0c;不涉及大小变化。

· 横向推移

描述&＃xff1a;在出现横划手势操作时&＃xff0c;页面左右切换。

适用场景&＃xff1a;同级信息切换转场页 面之间是并列关系&＃xff0c;在页面中表现为“上一个-下一个”操作&＃xff0c;如大图浮层多图浏览、二级tab切换。

· 纵向推移

描述&＃xff1a;在出现上下滚动手势操作时&＃xff0c;页面上下切换。

操运用场景&＃xff1a;

&＃xff08;1&＃xff09;信息流中的同级信息切换&＃xff0c;在页面中表现为“上一个-下一个“操作&＃xff0c;如视频浮层。

&＃xff08;2&＃xff09;作为原页面信息的补充&＃xff0c;展示详情或怕关信息。

今天看到不少收藏&＃xff0c;很开心&＃xff01;

谢谢那些偷偷收藏我文章的同学&＃xff0c;被认可真的是一件很幸福的事情。

只要有时间我就会努力更新&＃xff0c;加油啊&＃xff5e;

晚安&＃xff0c;世界。