Material Design Gestures 手势

这是一个翻译系列,原文是谷歌18年所出的材料设计指南(文末有链接),强大的材料设计将带我们一起深入了解UI设计中的所有规范。每周会更新数篇,一共百余篇,欢迎关注哦。

手势让用户可以通过触摸动作与屏幕上的元素进行交互。

目录

原则性能手势类型

原则

手势可帮助用户使用触摸快速直观地执行任务。

dosea4tgnkx.png插图

性能

提供更真实的反馈

Material的实时响应手势展现了用户对触摸交互的直接控制。

5wvr3gyl3yf.png插图(1)

用户的触摸动作应能直接控制元素的移动。

ap52ltc1b4l.png插图(2)

手势避免再触发另一个动作。元素应该能被用户的触摸手势直接控制。

5wvr3gyl3yf.png插图(1)

将元素设置为动画目标时,用户手势的速度应与在屏幕上移动的元素的速度相匹配。

ap52ltc1b4l.png插图(2)

不要在结果动画中歪曲手势的速度。 动画应该与用户触摸的速度相匹配。

指示手势

元素的外观和行为应该指示是否可以对它们执行手势。一些视觉提示表明可以使用手势,例如显示卡片的边缘提示可以将其拖入视图中。

表单边缘提示用户可以将其拖入视图中。

在没有其他可提供的指示时,图标提供了可以执行手势的清楚指示

动效元素在与用户进行交互之前建议增加一个手势。

一些上升的页面表明其可以独立移动,如卡片。

展示手势的作用

当用户执行手势时,元素应以演示手势目的的方式移动。

随着手势的进行,元素的过渡应持续显示。

照片的尺寸和遮罩的可见性说明了拖动手势将使照片关闭。

执行操作的手势应该使用图形来传达手势的作用。

在滑动时会弹出一个图标,表明手势的目的。径向填充表示已经通过了阈值,并且在手势完成时将提交操作。

手势类型

手势可帮助用户在视图之间导航,采取操作和控制内容。

手势的类型包括:

导航手势动作手势转换手势

导航手势

导航手势帮助用户轻松地浏览产品。导航手势补充了其他明确的输入方法,比如按钮和导航组件。

导航手势的类型有:

点击滚动和平移拖曳滑动双指捏放

点击

用户可以通过触摸元素导航至目的地。

用户可以直接点击元素或控件(如按钮)进行导航。

滚动和平移

用户可以垂直、水平或全方位滑动屏幕,以便在内容中连续移动。

用户可在列表内容中垂直滑动

平移允许用户在任何方向上移动并扩大页面

拖曳

用户可通过滑动界面进入或离开视图。

用户可以将底部工作表等拖动到视图中。

用户可以拖动页面使其超过距离阈值来关闭它们。

滑动

用户可以水平移动同级界面以在标签之间导航。

用户可以通过滑动选项卡的内容在选项卡之间移动。

ap52ltc1b4l.png插图(2)

避免一种手势导致两种不同结果。

双指捏放

用户可以缩放页面以在屏幕之间导航。

用户可以双指捏放页面来打开或者关闭它。页面的扩展表明可以使用双指手势。

动作手势

动作手势可以执行操作或提供完成操作的快捷方式。

动作手势的类型有:

点击长按滑动

点击或长按

点击和长按手势均允许用户与元素交互并访问额外的功能。

点击允许用户执行操作并与元素交互。

长按可以显示其他功能和模式,但不容易被用户察觉。

滑动

用户可以在通过阈值时滑动元素以完成操作。

用户可以通过滑动来快速提交列表项目。

转换手势

用户可以使用转换手势来改变元素的大小、位置和旋转角度。

转换手势的类型有:

双击双指捏放混合手势选取和移动

双击或双指捏放

双击或者双指捏放均允许用户放大或缩小内容。

捏合手势允许用户沿缩放级别逐渐缩放内容

双击可以让用户放大内容,或在缩放级别之间切换

混合手势

用户可以在各种手势之间流畅地切换。

5wvr3gyl3yf.png插图(1)

让用户能够在手势(如缩放,旋转和平移)之间无缝切换。

ap52ltc1b4l.png插图(2)

不要阻止用户在多个手势之间流畅地转换。

选取和移动

长按和拖曳允许用户重新排序内容。

可以通过长按来选取卡片并将它们拖曳到新位置来重新排序卡片。

原文地址:Material Design

译者:杜雅黎

人已赞赏
UI设计

设计驱动案例-如何优化金融产品购买体验?

2020-10-12 6:06:01

UI设计

设计沉思录丨如何利用场景化设计提升用户决策效率

2020-10-12 18:05:13

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索