web-dev-qa-db-fra.com

Comment la fonctionnalité de filtrage doit-elle se manifester dans les tableaux de conception de matériaux Google

J'ai vérifié la documentation de conception du matériau mais il n'y a pas d'indicateur clair que je puisse voir pour me dire ce qui se passe si je clique sur filter list icon .

Voici l'icône in situ.

filter icon in situ, look to the top right of the image

Je veux savoir quel devrait être le comportement de l'interface. Obtenons-nous une liste déroulante des termes de filtre? L'utilisateur peut-il spécifier la valeur du filtre? Comment se manifeste-t-il une fois que l'utilisateur a sélectionné sa valeur de filtre? Toute aide est reçue avec gratitude. Merci

15
Ralph Marchant

Design matériel - Tableaux la page spécifie les interactions possibles:

Interactions prises en charge

Survol de ligne (bureau)

Sélection de ligne

Tri des colonnes

Survol de la colonne (bureau)

Titres longs en-tête

Édition de texte

Les menus

Celui qui correspond le mieux à l'action Filtre est Menus .


Une action de filtrage similaire que j'ai pu trouver se trouve dans la App Bar :

Cliquer dessus affiche un menu:

L'icône utilisée dans la barre d'application est déjà utilisée dans le tableau sous la forme d'une flèche déroulante:

Donc, pour une table , je suppose qu'un menu simple s'afficherait et la requête sélectionnée apparaîtrait à côté de l'icône .

1
Alvaro

J'ai la même question. Je vais ouvrir une boîte de dialogue qui affiche les puces que l'utilisateur peut sélectionner/désélectionner pour filtrer les résultats dans le tableau. Cela semble cohérent avec ce que la version actuelle de Material Design suggère selon cette image:

enter image description here

1
Meli

Cette icône appartient à la catégorie des symboles utilisés dans/pour les boutons. Il me semble intuitif que si je clique sur l'icône "liste de filtres" dans votre exemple, les filtres s'affichent , car, sans filtres, l'action ne peut pas être terminé.

L'aspect des filtres dépend du nombre d'options, de l'interface utilisateur de la page et je pense que Material Design offre des conseils, mais ce n'est pas si strict que nous devons avoir des spécifications claires pour chaque icône.

Dans ce cas, " Material Design Data Table ", le filtre est un champ de recherche. Je ne m'attendais pas à ce filtre, mais je ne peux pas dire que ce n'est pas un bon UX.

enter image description here

enter image description here

1
Madalina Taina

Je m'attendrais à cliquer sur le bouton de filtre pour afficher les options de filtre. Sur le bureau, je m'attendrais probablement à une liste déroulante avec des options de filtre:

Airtable filter dropdown ( https://airtable.com/ )

YouTube fait aussi quelque chose de similaire:

enter image description here

1
cdrini

Voici comment Slide for Reddit utilise le bouton.

enter image description hereenter image description here

Si vous avez besoin d'un filtre personnalisé, je vous recommanderais d'avoir une activité distincte pour les filtres que vous devez sélectionner et ils peuvent ensuite cliquer sur Terminé pour voir les changements reflètent l'activité réelle. Cela évitera la complexité de l'ajout du filtre personnalisé dans une liste déroulante.

1
Swapnil Borkar

Cette question est posée depuis quelques mois sans réponse positive. Comme il n'y a pas d'implémentation officielle (au moins publiée dans la réponse jusqu'à présent) , nous ne pouvons que deviner .

Je suppose que le filtre n'est peut-être pas lié aux éléments mais à quelles colonnes sont affichées . Le filtrage des éléments est probablement plus pertinent, mais alors pourquoi serait-il absent du guide?

Donc, de la même manière que dans ce JSFiddle les colonnes du tableau sont "filtrées". Cliquer sur l'icône peut amener un Liste pour vérifier quelles colonnes doivent être affichées.

enter image description here

1
Alvaro

J'ai vu ce modèle de filtre utilisé avec les menus: https://www.google.com/design/spec/components/menus.html#

Les types de filtres apparaîtront dans le menu. Une fois tapés, les éléments du tableau seront triés. Selon la complexité de la table, il peut être nécessaire de la recharger à l'aide d'un spinner d'activité indéterminé. S'il s'agit d'un simple tableau, il peut s'animer en vue. J'espère que cela t'aides. À votre santé.

0
Aaron James