Material Design Gestures 手势

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

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

目录

原则性能手势类型

原则

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

Material Design Gestures 手势插图

性能

提供更真实的反馈

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

Material Design Gestures 手势插图1

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

Material Design Gestures 手势插图2

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

Material Design Gestures 手势插图1

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

Material Design Gestures 手势插图2

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

指示手势

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

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

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

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

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

展示手势的作用

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

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

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

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

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

手势类型

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

手势的类型包括:

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

导航手势

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

导航手势的类型有:

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

点击

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

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

滚动和平移

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

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

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

拖曳

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

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

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

滑动

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

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

Material Design Gestures 手势插图2

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

双指捏放

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

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

动作手势

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

动作手势的类型有:

点击长按滑动

点击或长按

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

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

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

滑动

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

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

转换手势

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

转换手势的类型有:

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

双击或双指捏放

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

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

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

混合手势

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

Material Design Gestures 手势插图1

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

Material Design Gestures 手势插图2

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

选取和移动

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

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

原文地址:Material Design

译者:杜雅黎

人已赞赏
UI设计

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

2020-10-12 6:06:01

UI设计

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

2020-10-12 18:05:13

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