risposta-alla-domanda-sullo-sviluppo-web-bd.com

Documenta lo spazio tra i componenti per i progettisti

In che modo le relazioni spaziali tra i componenti sono documentate dai grandi sistemi di progettazione? Sembrano solo spiegare l'aspetto e il comportamento dei componenti in modo isolato, non in relazione l'uno con l'altro.

Ad esempio, se ho un H1 seguito da un paragrafo, vorrei che la distanza tra loro fosse 40px. In un'altra pagina ho un H1 seguito da un'immagine, nel qual caso voglio che la distanza sia di 30px.

Per diverse combinazioni di elementi voglio definire distanze diverse. Voglio documentare queste combinazioni in modo che designer e sviluppatori non debbano capirlo ogni volta e che vi sia maggiore coerenza tra le pagine.

Per gli sviluppatori questo potrebbe essere documentato in CSS. I designer in genere non lo vedono. Come devono essere comunicate queste regole ai team di progettazione in modo che utilizzino la spaziatura appropriata tra i componenti nei loro progetti?

Qual è il metodo migliore per comunicare/documentare le regole spaziali tra componenti e progettisti?

7
Martyn

Questa è una grande domanda che evidenzia una lacuna in molti articoli e conversazioni sulla documentazione di progettazione e sulle librerie di modelli. In linea di massima, sono incentrati sul visual designer e focalizzati su atom e componenti molecolari in isolamento. Per essere utili in applicazioni pratiche, la documentazione di progettazione dovrebbe spiegare cosa fare quando e perché attraverso una larghezza di diversi esempi.

Questo esempio H1 è perfetto per illustrare questo punto. (Scrivo deliberatamente pseudo-stili e non selettori o attributi CSS validi perché la mia ipotesi è che questa domanda riguarda il modo di comunicare le convenzioni, NON il modo in cui è possibile raggiungere tecnicamente i diversi comportamenti condizionali.)

H1 Headers

Notes: Use sparingly. Adjust white space according to adjacent design elements. 

Font: Helvetica
Font Weight: Bold
Size: 28px
Line height: 32px
Bottom Margin: 
   IF (followed by paragraph text) THEN 
      15px and show a visual example
   ELSE IF (followed by an image) THEN
      30px and show a visual example 
   END
Letter spacing: 1px expanded
(Etc)

Questo è il mio $ 0,02. La documentazione di progettazione è già un messaggio in una bottiglia, ma senza esempi pratici ed espliciti costringe le persone a fare la migliore ipotesi su cosa fare.

** Modifica per aggiungere un esempio che ho trovato **

Questo articolo fa un ottimo lavoro disimballando l'uso dello spazio con l'intento all'interno dei sistemi di progettazione. L'autore decostruisce alcuni elementi di design basati su pattern (in questo caso schede con contenuto) per mostrare le diverse regole condizionali che vengono utilizzate:

Image annotated to describe element spacing and identify rules in use

Dall'articolo:

La maggior parte dei collaboratori non riesce a vedere lo spazio, una delle ragioni principali per cui è stata così arbitrariamente applicata.

enter image description here

In sintesi: la documentazione di progettazione intesa a supportare il riutilizzo disciplinato dei modelli deve essere scritta tenendo presente questo aspetto. I sistemi intuitivi illustrano cosa fare e quando si usano esempi pratici e ben annotati.

6
Luke Smith

Non dovresti definire il riempimento e il margine nell'elemento più piccolo del tuo sistema. Una proprietà più importante di un elemento sono gli attributi univoci per quel tipo di elemento, ad esempio per un'intestazione (h1. H2 ecc.) O qualsiasi elemento di testo, gli attributi importanti da comunicare sono la dimensione e il colore del testo.

Dovresti definire la spaziatura in situazioni più complesse, in cui più elemet interagiscono tra loro, chiamiamoli "componenti".

In qualsiasi app o sito Web avresti più componenti con comportamenti diversi, quei componenti potrebbero apparire molto simili con solo piccole differenze, dovresti documentare ogni specifica di questi componenti.

Nel tuo caso hai un componente di contenuto con testo (text_content_bloc) e componenti di contenuto con un'immagine (image_content_bloc), dovresti documentare questi blocchi singolarmente (se ci sono differenze visive come il riempimento di h1)

I sistemi di progettazione sono organismi viventi, non completerai mai un sistema e passerai a quello successivo, ha bisogno di manutenzione, iterazione e pulizia periodica.

Pochi buoni esempi di componenti:

https://material-ui.com/demos/cards/

https://semantic-ui.com/views/card.html

PS: nella mia esperienza i migliori sistemi sono i sistemi con meno eccezioni, se il tuo h1 ha 100 padding diversi, dovresti provare a semplificare il tuo sistema, renderlo più coerente

2
Deniz Erdal

È possibile utilizzare il combinatore fratello adiacente

/* Paragraphs that come immediately after any image */
img + p {
  font-style: bold;
}

Nel tuo caso potresti aggiungere un margine al paragrafo o all'immagine.

h1 + p {
    margin-top: 40px;
}

h1 + img {
    margin-top: 30px;
}
1
Nash

Per i progettisti sarebbe utile vedere un'applicazione visiva ed esempi del modello di progettazione. Potresti spiegare come viene derivata la spaziatura (percentuale di x elemento ecc.) E anche la logica e il contesto di utilizzo.

1
Ling

Il CSS ha una gerarchia, se applicato correttamente, la lingua ha avuto ciò che stai chiedendo incorporato da molto tempo ormai.

Una combinazione di:

Selettori CSS: https://www.w3schools.com/CSSref/css_selectors.asp

E

Comprensione della gerarchia CSS: https://en.wikibooks.org/wiki/Cascading_Style_Sheets/Applying_CSS_to_HTML_and_XHTML

Ti permetterà di "mettere in cascata" i tuoi stili in un progetto, è facile come aggiungere un campo ID ai tuoi moduli e bloccare i selettori in sezioni specifiche o avere selettori di livello superiore che interessano l'intero sito.

Per approfondire, sono disponibili modelli, contenitori/pagine master e direttive/controlli utente che vengono utilizzati per rafforzare la coerenza (sempre dal punto di vista tecnico).

0
RandomUs1r

Penso che questo ritorni all'intento del linguaggio/dei sistemi di progettazione che sono stati creati e quali sono i limiti con la documentazione.

Il principale ostacolo nel cercare di documentare dettagli come quello relativo alla spaziatura che hai evidenziato nella tua domanda è quello di riuscire a trovare una regola coerente che si applichi a tutti i diversi scenari potenziali. Forse quando metti insieme tutte le regole di spaziatura per i singoli componenti non si ottiene in tutti i casi, ma se crei troppe regole allora è probabilmente più facile fornire linee guida generali e lasciare alle mani del progettista applicarle un modo pratico se non coerente.

Sarai sorpreso di quanto siano interattivi alcuni dei sistemi di progettazione. Ad esempio, Carbon Design System è integrato con CodePen in modo da poter effettivamente provare a giocare con lo stile e personalizzarlo in base alle proprie esigenze.

Altri sistemi di progettazione specificano linee guida generali per il layout dell'applicazione come Clarity Design System in modo da poter vedere come potrebbero essere disposti i componenti principali di una pagina.

Penso che i motivi principali per cui questi tipi di dettagli non sono specificati sono:

  • Possono limitare la progettazione del layout nella misura in cui i problemi di allineamento e posizionamento diventano problematici (poiché i sistemi di griglia non sono normalmente specifici dei pixel per rispondere alle dimensioni della pagina su dispositivi diversi).
  • Possono essere difficili da mantenere a seconda del numero di componenti disponibili e delle combinazioni utilizzate o potenzialmente utilizzate, di cui la maggior parte dei sistemi di progettazione ha un numero ragionevolmente elevato.
  • Può essere difficile far funzionare le cose nell'intero sistema di progettazione quando i componenti non vengono più utilizzati, sostituiti o combinati con componenti legacy

Ma fortunatamente è qui che i progettisti possono entrare e aiutare a risolvere questi problemi lavorando con gli sviluppatori che iniziano con i modelli di pagina e le linee guida generali per i componenti, in modo che non ci siano troppe modifiche da apportare allo sviluppatore.

In termini di sforzo contro beneficio, penso che i sistemi di progettazione esistenti abbiano il giusto approccio ed equilibrio quando si tratta del livello di dettaglio specificato nella loro documentazione.

0
Michael Lai

Lasciamo CSS da parte e parliamo del design visivo. Presumo che un sito Web abbia un numero ragionevole di tipi di pagina: atterraggio, descrizione del prodotto, dashboard, ecc.

un. Includi le informazioni sulla distanza nel modello di pagina. Vorrei creare un paio di pagine modello, che mostrano la distanza specifica tra H1 e l'immagine/testo. Ad esempio, la pagina di destinazione può avere 4x tra H1 e immagine e 2x per il testo.

b. Includi le informazioni sulla distanza nel modello dell'elemento. Specifica il margine superiore dell'immagine per ogni dimensione dell'immagine. Immagino che dovrebbero esserci delle dimensioni dell'immagine specifiche per il layout, ad es. eroe-immagine, prodotto-principale, prodotto-secondario ecc. In questo caso, creerei un gruppo composto da un'immagine e un rettangolo trasparente su di esso, quindi sarà facile costruire il modello dal predefinito blocchi.

0
Anton T