Euristica per la progettazione GUI assolutamente posizionata - sono multipli di 5 una buona idea?

1

Dichiarazione di non responsabilità: non sono specializzato nella progettazione della GUI [desktop], ma devo farlo occasionalmente. Ho visto i dialoghi dei colleghi di lavoro peggio di quello che ho creato una volta, e il mio problema principale con loro è che possono essere inutilmente grandi e le cose non si allineano.

Per essere più specifici, lo faccio principalmente in. Netforms, ma occasionalmente anche con MFC (C ++). La mia semplice euristica finora è: cerco di rendere le dimensioni e le posizioni divisibili per 10 ... o 5 se devo. Qualcosa come un'etichetta sarebbe un'eccezione, perché conosce le sue dimensioni. Trovo che le cose per lo più sembrano OK dopo aver fatto (ovviamente ci sono altre considerazioni come raggruppare le cose in modo intelligente, ecc.), E sono soddisfatto perché so che ogni controllo ha una posizione non casuale, e il mio OCD ora può andare riaddormentarsi.

Da qualche parte al lavoro ho trovato una guida di MSFT sullo spaziatura ideale tra le cose. Siamo spiacenti, non ho una fonte disponibile per questo. Ha molte regole, come ad esempio 2 pixel tra un pulsante e un bordo, 3 pixel tra due pulsanti in orizzontale, 4 pixel in verticale, a meno che ... sia piuttosto complicato e non pratico da ricordare. Inoltre, semplicemente non mi fido del fatto che MSFT conoscesse molto della progettazione della GUI, non prima di aver assunto una persona ex-apple per aiutarli a progettare i nastri per Office 2007, ecc.

Quali regole / euristiche segui? Riferimenti a brevi articoli e altri link sono i benvenuti.

    
posta Job 12.12.2010 - 21:44
fonte

3 risposte

2

Se vuoi andare in "modalità di spaziatura fissa", i multipli di 10 sono ok. Passare a multipli di 5 è necessario solo quando si esaurisce lo schermo. In una società per cui lavoro, usiamo un framework in cui multipli di 10 sono l'impostazione predefinita nell'editor GUI (homegrown). Solo in rare occasioni qualcuno deve cambiarlo. Le forme risultanti non sono esattamente aspiranti per il concorso di bellezza, ma nessuno si è nemmeno lamentato.

    
risposta data 12.12.2010 - 22:16
fonte
6

Dimenticatevi di "numeri tondi carini", dovrete sperimentare la spaziatura per ottenere qualcosa che sembri bello, un multiplo fisso si mette di mezzo.

Dovrei dire che i programmi MSFT tendono ad apparire piuttosto lucidi quando si tratta di dettagli del genere, quindi, nonostante la tua incredulità, suppongo che la guida che hai trovato sia probabilmente abbastanza competente. Se l'interfaccia di livello superiore è intelligente o se gli elementi grafici sembrano buoni sono domande diverse.

    
risposta data 12.12.2010 - 22:00
fonte
1

Una delle cose che faccio è cercare di evitare di essere messo in una posizione in cui riesca a decidere dove andare a finire qualcosa. La mia interazione iniziale con il design della GUI era con Tcl / TK, che utilizza uno schema molto intelligente per costruire il layout in modo dinamico basato sul contenuto (questo è in realtà un modello approssimativamente riprodotto nel modello di box CSS). Una riga di testo ha una dimensione predeterminata, un pulsante può indovinare la sua dimensione in base al testo che contiene, una casella può indovinare la sua dimensione dal numero e dalla dimensione dei pulsanti che contiene e così via fino alla finestra di livello superiore.

Ci vuole un po 'di aggiustamenti usando questa tecnica per assicurarci che cose che dovrebbero allinearsi, fallo, ma una volta fatto, il layout diventa improvvisamente molto fluido. Ciò è particolarmente utile quando si internazionalizza l'interfaccia utente, poiché le frasi che sono più lunghe in un'altra lingua non sovraccaricano i loro contenitori.

Dato che la maggior parte delle cose si trovano sul web, questo principio si applica ancora in modo grossolano, ma i CSS più o meno si aspettano che tu faccia molte scelte sottili su come le cose sono distanziate. Solitamente partirò costruendo un'interfaccia grezza senza CSS. Inizierò quindi a integrare i prototipi di design (da Photoshop / Illustrator / mspaint) e aggiungere il CSS necessario per ottenere la spaziatura dove deve essere. "Dove deve essere" significa principalmente ciò che è facile da leggere. Niente supera la leggibilità qui.

    
risposta data 12.12.2010 - 22:02
fonte

Leggi altre domande sui tag