web-dev-qa-db-fra.com

Existe-t-il un moyen standard d'indiquer une recherche suggestive (saisie semi-automatique) sous forme filaire?

Je conçois une interface et je suis en train de créer un filaire pour me guider avant de la développer. Je sais qu'un formulaire particulier fera des suggestions, mais si je devais, disons, obtenir un autre développeur à bord, je devrais m'assurer qu'il le sache.

Donc la question:

Je sais que je n'ai pas besoin de faire autre chose que de taper quelque part dans le cadre, "cela devrait suggérer [quelque chose] ", mais avec des paradigmes de conception d'interface modernes à l'esprit, je ne peux m'empêcher de me demander s'il existe un moyen standard d'indiquer quelque chose comme ça dans un filaire pour les développeurs front-end.

Y a-t-il?

design-patternssearchwireframeinterfaceautocomplete
3
Mr_Spock

En supposant que vous utilisez un format filaire où vous pouvez masquer les éléments de la liste déroulante pour voir ce qu'il y a derrière, il est assez courant d'afficher le formulaire de saisie semi-automatique avec quelques lettres tapées et quelques lignes apparaissant en dessous.

Voici quelques exemples de bibliothèques de modèles:

enter image description here
de la bibliothèque de modèles de conception Yahoo


enter image description here
de CollectionSpace.org


enter image description here
des modèles de Welie.com dans la conception d'interaction

Si vous n'avez pas plusieurs calques dans votre filaire, il suffit de rédiger "Cette saisie semi-automatique" dans une zone de texte.

3
Graham Herrli

J'annote généralement le filaire avec une note:

                         ------------------------
                        |                        |
 Search:               /    Search field uses    |
 [ enter search term ] \      autocomplete       |
                        |                        |
                         ------------------------

Mais cela soulève une plus grande question: comment annoter des éléments interactifs dans des wireframes statiques? Un champ de saisie semi-automatique est assez explicite, mais les choses peuvent rapidement devenir complexes lorsque nous commençons à ajouter le défilement, les animations, le tri, le glisser-déposer, les survols, les états actifs, etc.

Une solution consiste à avoir ou à référencer une bibliothèque de modèles, où ladite bibliothèque aurait des visuels, des exemples de travail et peut-être même un exemple de code de couche de présentation pour que vos développeurs puissent baser leur travail.

Ensuite, dans les wireframes, vous pouvez référencer la bibliothèque de modèles selon vos besoins.

1
DA01