web-dev-qa-db-fra.com

Langage visuel pour les largeurs fixes et fluides

Existe-t-il un langage visuel commun (symboles) pour mettre en évidence les parties d'une page Web qui devraient être fixes ou flexibles lorsque vous réalisez des wireframes?

Par exemple - une page Web se compose de deux colonnes. Une colonne de gauche pour le menu et une colonne pour le contenu. Je veux montrer que la colonne de menu doit toujours avoir une largeur de 200 pixels quelle que soit la largeur de l'écran et que la largeur de la colonne de contenu doit être définie en pourcentage et s'adapter à l'écran.

4
Tony Bolero

À ma connaissance, il n'y a pas de convention pour communiquer cela. Quand j'ai développé des maquettes où je veux montrer des largeurs statiques, j'ai utilisé la même approche qui est également utilisée lorsque montrant les largeurs dans les plans .

mockup

télécharger la source bmml - Wireframes créés avec Balsamiq Mockups

L'expérience m'a montré que cela est bien compris et le spectateur a toujours tiré la conclusion que le panneau de gauche est toujours large de X pixels et que celui de droite se redimensionne.

6
AndroidHustle

J'utiliserais la syntaxe d'espacement (ou "spring" ) des éditeurs GUI:

spring in QT editor

(crédit d'image: developpez )

Je dirais qu'il y a trois alternatives: je voterais pour la ligne pointillée, car il est plus facile de dessiner dans OmniGraffle (mon outil de choix), mais vous pouvez également dessiner un vrai ressort:

flexible space alternatives

2
Aadaam

ou (alternativement à l'excellente réponse donnée) s'ils n'ont pas besoin de connaître les pixels exacts pour les parties fixes mais juste de savoir quelles parties sont fixes et lesquelles ne le sont pas. vous pourriez concevoir des flèches larges/épaisses dans les régions fluides, qui indiqueraient la fluidité de ces régions uniquement.

0
Chris