Material Design Selection 选择

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

选择是指用户如何表明他们打算采取行动的特定项目。

目录

性能

项目选择

性能

用法

项目选择允许用户将操作应用到选中的项目上。

交互

可触控设备

在可触控设备上,使用以下方式选择项目:

长按触摸或双指触摸允许的情况下通过触摸选择快捷方式,例如点击头像

桌面设备

在桌面设备上,带有复选框的项目不应默认(或永久)显示其复选框,除非项目选择是用户界面中的主要活动。与此相反,以下情况只显示复选框(或类似指示符):

悬停时,作为该项目的单个复选框;选择第一个项目后,显示该组中其余项目的复选框

项目选择

选择项目(移动端)

进入选择模式

要选择项目并进入选择模式,请长按该项目或使用快捷方式,例如点击项目的图标。 要选择添加其他项目,请点击每个项目。

退出选择模式

要退出选择模式,请点击每个选定的项目,直到它们全部取消选中,或点击工具栏上的操作。

扩大选择范围

要同时选择多个项目,请长按并使用跨项目拖动手势。但是,如果您的应用已经使用此手势来拾取和移动项目(如卡片),请不要使用此手势进行选择。

在触控设备上,一直按住可选择项目。

选择项目后,点击该项目以切换其选择状态。

用户可以长按并拖动多个项目以快速选择它们。

选择项目(桌面端)

要进行选择,请将鼠标悬停在某个项目上以显示一个复选框。 然后可以单击该复选框。

在桌面上,单击复选框即可选择一个项目

表示所选项目

要指示一个项目已被选中,请显示一个与该项目或该项目的头像重叠的复选标记和遮罩。

3nawr1i4dht.png插图

如果有空格,用复选标记替换图标或头像。对于较小的项目,请使用紧凑的复选标记以避免内容之间模糊不清。

jrqubfqkpm4.png插图(1)

选中项目应与未选项目区别开。使用颜色较深的遮罩或添加额外的标志(如复选标记)能够更好地区分已选出的目。

原文地址:Material Design

译者:杜雅黎

人已赞赏
UI设计

Material Design States 状态

2020-10-12 4:05:04

UI设计

从「科学方法」到「设计实践」 – 云产品设计师会梦见服务器么?

2020-10-12 4:05:06

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