Utilizzabilità in pratica

Il tao della progettazione degli schermi

Dr. Charlie Kreitzberg e Ambrose Little

La vista cognitivo

Gli sviluppatori sono profondamente immersed nel modello di implementazione, ma quando si passa di progettazione dell'interfaccia utente, è necessario spostare il punto di vista per visualizzare il software di quella che dell'utente. Non ’s semplice poiché ’s difficile ignorare conosce e adottare visualizzazione ’s di un altro utente. Numerose le tecniche di progettazione illustrato negli articoli precedenti, quali la creazione di utenti tipo per rappresentare tipica spettatori e scenari attività di costruzione per comprendere il funzionamento agli utenti, sono utili per effettuare tale spostamento mentale. È necessaria una chiara comprensione di spettatori, le attività che necessarie per eseguire e come ritengono sulle attività. Inoltre, ’s importante riconoscere il livello di conoscenze tecniche previste per il gruppo di destinatari. Con questa conoscenza, è possibile sviluppare un modello di manifesto adatto.

Figura 1 Il simbolo Yin-Yang

Prima di creare il Framework

Si sono scritti in precedenza sulla distinzione tra la progettazione di alto livello e dettagliata. Schermata progettazione sempre deve iniziare con la struttura di un framework di alto livello. Una volta che tale framework è in posizione puoi utilizzarlo come base per gli schermi dettagliati. Due elementi chiavi della struttura sono i seguenti:

• Uno schema di spostamento consente di spostare facilmente da per schermata in conformità con il flusso attività. Abbiamo parlato spostamento nella nostra colonna marzo 2009 (msdn.microsoft.com/en-us/magazine/dd458810.aspx).
• Elementi permanenti, ad esempio intestazioni, utilizzati per ancorare l'utente e fornire indicazioni su dove è l'utente.

In altre parole, iniziare con un approccio dall'alto verso il basso attraverso il quale è possibile definire gli elementi che sono comuni a tutte le schermate e creare un modello chiaro di come l'utente ottiene. 

Con il framework posto, è possibile sviluppare le schermate più importanti, perfezionando il framework se necessario. Infine, sviluppare le finestre e schermate rimanenti.

Creare modelli di rete metallica

Il framework che è possibile implementare come le pagine master, deve indicare le aree principali per le schermate. Alcuni delle informazioni di queste aree possono essere lo stesso su ogni schermo (ad esempio, il nome del prodotto, logo e il menu principale). Alcune informazioni verranno modificato per ogni schermata, ma deve essere visualizzato nella stessa posizione su ogni schermo (ad esempio, il titolo della schermata e breadcrumb). Infine, alcune informazioni sarà diverso da schermo schermo (ad esempio, i controlli specifici per lo schermo). Tutti questi elementi, tuttavia, devono collaborano per creare una struttura coerenza e semplice.

Avviare suddivisione dello schermo in aree in base alla funzione. Ad esempio, osservare il reticolo in che serve a delineare le aree dello schermo di base della figura 2. Si noti come ogni area di questo tipo di reticolo è stato etichettato in modo che l'utente consente di comprendere lo scopo.

Figura 2 Definizione di aree della schermata

La progettazione complessiva è facile organizzare perceptually l'utente. Ciascuna delle schede principale includano una struttura diversa, ma, purché il layout base doesn’t turno, la struttura verrà visualizzato coerenza per l'utente. Per illustrare questo concetto, esaminare viene illustrato un altro modello che può essere utilizzato per una scheda diversa nell'applicazione della figura 3. Poiché gli elementi di base del frame vengono mantenuti costanti la facilità di utilizzo viene mantenuto anche se gli elementi chiave della progettazione sono diversi.

Figura 3 Modello compatibile

Naturalmente, i modelli di progettazione che si seleziona per ogni schermata devono essere coerenti. Ad esempio, se due schede dispone di una funzione di ricerca, deve presentare nello stesso modo in cui tale funzionalità.

Tutti i sistemi più semplici necessario gestire le finestre di dialogo e altri schermi secondari. In passato, a causa delle limitazioni di browser, numerosi sistemi basati sul Web evitare livelli e finestre figlio. Un'alternativa più comune è inviare all'utente a un'altra pagina e l'utente dispone di scoprire come ottenere nuovamente. Spesso, questo ha generato confusione.

La creazione di finestre popup ed elegante in altro modo per gestire i dettagli con piattaforme come Microsoft .NET Framework, i linguaggi di programmazione associati e AJAX, è molto più realistico. Quando si crea una struttura, considerare come gestire le finestre di dialogo e dettagli. Ad esempio, i modelli di figure 2 e 3 dovrebbe funzionare anche con una finestra figlio popup a scelta obbligatoria, come illustrato in Figura 4.

Durante la creazione del framework, è necessario anche considerare supporto di utente e della Guida in linea. Guida in linea è spesso un progetto creato come un “ bullone su, ” ma funziona molto meglio quando è integrato nelle schermate. Si noti che nel popup nell' della figura 4 che è riservato a una posizione per il testo descrittivo che può fungere da una richiesta di acquisire familiarità con l'utente. Collegamento ulteriori consente di accedere a informazioni aggiuntive. (Naturalmente, è necessario progettare un modello per visualizzare come collegamento verrà elaborato.)

Figura 4 Popup

Per facilitare l'utente che compila il modulo, potrebbe anche voler creare una descrizione per consentire di ottenere ulteriori informazioni sui campi specifici. Un progetto di esempio per questa viene visualizzato in figura 5.

Figura 5 Descrizioni

Da pensare di progettazione di supporto utente sin dall'inizio, è possibile eseguire un passaggio di grandi dimensioni per assicurare la realtà verrà creato e sarà utile e coerente. Si noti che la descrizione comandi, come il prompt dei comandi è un collegamento l'utente per ulteriori informazioni. Sebbene questo non è una pratica comune (e si non può essere implementato in alcuni controlli di descrizione comandi), è una tecnica efficace poiché consente agli utenti di approfondire più profondo rimanendo all'interno del contesto di loro attività corrente. È possibile che si desidera creare un modello per un altro livello di popup per supportare questi collegamenti per evitare di spostamento supplementare.

Nella mia esperienza, alcuni modelli di base, con ad esempio due livelli di finestre di dialogo, possono ospitare l'interfaccia utente per i sistemi anche molto grandi. Ed specificando anticipatamente il framework, è possibile creare le pagine di supporto per la progettazione schermate specifiche temporaneo.

Creare una Guida di stile

Quando si crea il framework, documento, di una Guida di stile. Questo ricordi le scelte apportate e consentono inoltre a chiunque desideri sviluppare schermate rimanga coerente con la struttura. Una Guida di stile non deve essere elaborata. In genere acquisire i modelli di schermo, annotare i e incollare le schermate con annotazioni in Word, in Visio o in un sito Web. Nella figura 6 è un esempio di come si potrebbe inserire annotazioni il reticolo a comparsa.

Figura 6 Annotated reticolo di Guida di stile

È importante specificare i tipi di carattere, le dimensioni dei tipi di carattere e colori, in modo che possano essere coerente per schermata. Quando possibile, consente di utilizzare gli stili anziché valori hardcoded per i tipi di carattere e colori affinché può apportare modifiche di progettazione visiva e mantenere la coerenza all'interno dell'applicazione è (o di un artista grafico).

La Guida di stile anche possibile specificare la terminologia di essere utilizzata nell'interfaccia utente. È importante utilizzare termini in modo coerente e selezionare termini senso per i destinatari.

Agile

Come accennato negli articoli precedenti, l'interfaccia utente di refactoring può causare confusione. Per questo motivo, ’s in genere consigliabile avviarsi prima un framework completa e flessibile e quindi aggiungere informazioni in tutto il ciclo di sviluppo. È possibile trovare, ad esempio, che è necessario un ulteriore modello o che è necessario avviarsi con regole di struttura aggiuntivi. È certamente possibile correggere la Guida di stile nel corso di sviluppo dell'interfaccia utente, purché si è perfezionare la struttura originale. Se si trova la struttura originale debba essere rethought, tornare indietro ed esaminare tutte le schermate per coerenza e considerare l'impatto delle modifiche per gli utenti se il software è già stato distribuito.

Test di usabilità

Dopo aver creato il framework, verificare se è possibile l'usabilità in modo che è possibile assicurarsi che la struttura funziona come previsto. È più semplice modificare il modello e la Guida di stile prima di numerose schermate sono codificate.

Creazione di schermate di dettagli

Alla Guida del framework e lo stile posto, è possibile creare le schermate. Se si sviluppata una Guida di stile buona, possono essere distribuire il lavoro tra diversi sviluppatori e mantenere la coerenza desiderata.

Il lavoro di singole schermate di progettazione è una combinazione di immagini e progettazione. Per creare una struttura di schermo utilizzabile per l'utente, è necessario posizionare manualmente scarpe ’s l'utente e visualizzare il mondo la modalità utente. Che non ’s un'attività semplice e si costituisce uno dei motivi che utilizzabilità test possono essere così potenti come strumento.

Modello lo

Come punto di partenza, esaminare figura 7, che mostra un modello semplificato lo del modo in cui un utente elabora una schermata.

Nella figura 7 Cognitivo modello per schermo elaborazione

L'utente si inizia in genere la sessione con l'obiettivo principale presente. Ad esempio “ si desidera selezionare i vantaggi aziendali ” o “ si desidera risolvere problema ’s questo cliente. ” Quindi, l'utente confronts ogni schermata, crea obiettivi più piccoli, a livello di schermo, ad esempio “ si desidera accedere ” o “ si desidera individuare record il cliente ’s. ”

Con gli obiettivi simili presenti, l'utente visualizza la schermata e decide quali azione da eseguire. Utente esegue l'azione e si osserva i risultati. Basato su tali risultati, l'utente crea un nuovo obiettivo e ripete il processo nuovamente.

Questo processo facilmente possibile passare astray se l'utente non riconosce il controllo appropriato nella finestra. Questa situazione può verificarsi se la finestra di progettazione presuppone che l'utente “ memorizza ” dove passare e non crea una richiesta visibile perché. Un esempio potrebbe essere un prodotto in cui un utente deve premere F1 per ulteriori informazioni, ma una richiesta a tale operazione non è presente. Un altro esempio è quando un utente deve restituire una schermata specifica per individuare una funzione, ma non ricorda dove trovare la funzione. In entrambi i casi, il risultato è la ricerca in genere frantic e frustrazione.

Questo conduce a una regola di progettazione schermo chiave: non affidarsi alla memoria ’s l'utente;invece, provare a rendere visibile ogni opzione. Mentre nel tempo, l'utente verrà descritto il sistema, qualsiasi dipendenza memoria solo aggiunge per caricare lo e, di conseguenza, al lavoro. Tenere presente che cognitively, riconoscimento è sempre molto più semplice da richiamare. Dopo avere un numero elevato di opzioni, sarà necessario effettuare la selezione di un processo a più fasi. In questi casi, consentono di semplificare come come l'utente individuare l'elemento che deve come modo rapido e semplice possibile e sempre con carico lo minimo.

Poiché gli sviluppatori sono interessati con efficienza, potrebbe ritiene che sia sprechi e sloppy ripetere le informazioni che sono già presentate in un' posizione. Ma poiché il riconoscimento supera sempre di richiamo, è meglio presentazione cose più volte a presupponendo che l'utente verrà ricordare qualcosa se non ’s prima di essi. E poiché gli utenti raramente lo sviluppo di modelli mentali accurati del flusso di spostamento, almeno non fino a quando hanno avuto molta esposizione al prodotto, il processo di affidarsi a è importante ricordare che la funzione devono è in una scheda specifica aggiunge molto carico lo.

GetKeyboard (in inglese)

Il mese scorso abbiamo parlato architettura delle informazioni e come progettare la presentazione di informazioni di facile comprensione. Tenere presente le idee quando vengono disposte singole schermate. Assicurarsi che lo schermo è orderly e confusione libero. Si desidera che per raggruppare perceptually gli elementi che collaborano in unità di visualizzazione. Cercare in figura 8 per vedere come disorderly allineamento può rendere veramente difficile l'occhio raggruppare elementi correlati. Allineare gli elementi e inserendo i pulsanti in prossimità agli elementi che consentono di controllare, i gruppi percettive facilmente vengono creati.

Figura 8 Raggruppamento rende la schermata più comprensibile

Coerenza interna

A meno che non si abbia una ragione molto buona non per tentare di essere come coerente possibile per schermata. Ad esempio, di seguito sono riportate alcune indicazioni generali:

• Utilizzare la stessa terminologia in tutto il sistema
• Organizzare le informazioni utilizzando sempre lo stesso formato di intestazioni e presentazione delle informazioni
• Utilizzare le stesse tecniche per le query di ricerca e risultati

di dati

È un ordine per il modo in cui un utente per l'analisi dello schermo, si è in genere consigliabile seguendo il flusso per il linguaggio nativo ’s l'utente. In inglese e molte altre lingue, viene suggerito sinistra a destra e dall'alto verso il basso. Esaminare figura 9 più semplice è leggere le lettere in ordine alfabetico sequenza quando sono conformi al flusso di linguaggio.

Figura 9 Flusso

Se lingua ’s spettatori è l'ebraico, arabo, persiano, cinese o giapponese, che può essere il flusso da destra a sinistra, le schermate devono essere regolate di conseguenza. Flusso non costituisce un problema su ogni schermo. Flusso non è sempre correlato al testo. In questo modo, ad esempio, se si desidera rappresentare un processo con più passaggi, disposizione che il flusso è importante, anche se gli oggetti della finestra grafici. Esaminiamo l'esempio “ lavatrice una maglietta ” in i18nguy.com/MiddleEastUI.html.

E quindi il Magic risultato

Molti progettisti (incluso me stesso) trovare che dispongano di una risposta emotional schermo buona progettazione. È noto quando una struttura di destra perché operazioni sembrano rientrano in posizione. L'approccio ha senso come si osserva da diverse prospettive. Tra noi abbiamo sarebbe caratterizzare che sensazione emotional come “ e quindi viene eseguita la chiave, ” e abbiamo disperare di essere in grado di spiegare ai client perché questo particolare progetto è quello a destra.

Gli sviluppatori si sono verificato probabilmente momenti simili “ AH ” quando è stato risolto un problema di progettazione tecnica particolarmente knotty. Quando è possibile ottenere lo stesso punto nella struttura dello schermo, sarà possibile certi sul rightness le decisioni di progettazione e raramente verrà test di usabilità dimostrare è errato.

Studiare il Tao della progettazione dello schermo e comprendere che è necessario creare due visualizzazioni complementari del prodotto: un tecnico e un utente centrato. Quando si può passa da una visualizzazione a altra comodamente, si verrà aver compreso tali una competenza più difficile ma utile.

La visualizzazione di software

Amborse Little

Schermata progettazione è, Ritengo che, tra gli elementi che è concreta e pratico che la maggior parte di noi solo scaricarlo.  Con la conseguenza di rendere noi compiacente inconveniente: è non considerare sufficiente su di esso o solo presuppongono che si conosce, abbiamo ’re esperti perché è progettare schermate. Come sono illustrato gli altri articoli di questa colonna, vi sono effettivamente sia una scienza distinta e un'immagine per rendere le interfacce di software. Lo sviluppatore medio possibile ottenere solo fino a, a seconda il suo talento innate ed empathy nella creazione di interfacce che favorire una buona esperienza.  Sul lato capovolgimento, mi auguro che questa colonna viene visualizzato anche che anche se Progettazione dell'interfaccia utente non è il principale esperienza, è possibile ottenere è migliore e anche ottenere migliore per stabilire quando è necessario coinvolgere i professionisti nel campo.

Ho detto tutto questo per mezzo di notare che tecnologie di interfaccia utente Microsoft sembrano lungo hanno riconosciuto la necessità di Framework di progettazione.  Dare dico che l'esistenza di tali piattaforme è stato dai più l'esigenza di noi agli sviluppatori di mantenere l'integrità e alcuni modicum di produttività continua in caso di modifica dei requisiti di fare da qualsiasi riconoscimento consapevoli dell'importanza della coerenza per gli utenti si lovingly riferimento come gli utenti.  Pertanto, è serendipitous che abbiamo è disponibile.

E cosa è che abbiamo?  Bene, che ovviamente dipende sulla quale tecnologia si lavora, ma tentare di rimanere attivo sulle tecnologie .NET UI principale, dato che si tratta, dopo tutto, MSDN Magazine.

Vari È Get nella loro tutto

Prima di disattivare, informare l'utente ad esempio tutte le tecnologie .NET che uno è condivisa, concrete il concetto di riutilizzo dell'interfaccia utente essenziale, il controllo (e relativa derivato, il controllo utente cosiddetti).  Come ’m necessario conoscere la maggior parte di noi, consentire raggruppamento di parti dell'interfaccia utente per visual non solo ma anche funzionalità di riutilizzo.  Non ’m historian una tecnologia, ma l'impressione è che i controlli in genere progettati per soluzioni che si intersecano problema domini (spesso si manifesta in proprio progetto esterno o un assembly o anche forniti da terze parti) e per queste soluzioni, i controlli vengono generalmente implementati nei modelli molto ampiamente applicabili. I controlli utente, sono invece, in genere riconducibili a domini di problema specifico, spesso all'interno della stessa soluzione di progetto.

Sia controlli e controlli utente sono utili per il codice e il riutilizzo dell'interfaccia utente, che è noto, ma è solo fino a ricevono in termini di una struttura di progettazione.  A tal fine, è necessario qualcosa di simile a ciò che è spesso denominata “ master ” o “ modello ” framework per gestire layout lordo e gli elementi condivisi in modo gerarchico, nonché un modo per gestire lo stile coerenza (significato i tipi di carattere, colori, spaziatura e altre funzioni di visual che servono progettazione sia estetica e informazioni).  Per queste, le soluzioni variano tra tecnologia.

Windows Forms,

Molti lune fa, fearless Floridian Giovanni, Stan Schultes, penned un articolo in Magazine di Visual Studio chiamato “ informazioni ereditarietà visiva ” (msdn.microsoft.com/en-us/library/aa288147(VS.71).aspx).  L'approccio descritta in questo articolo possono essere utili in gran parte le esigenze di layout lordo e condivisa, in altre parole, consente di apportare un form di base e una finestra di dialogo base e di creare da quelli per soddisfare la maggior parte delle esigenze.     

A sinistra per i proprio periferiche, ’m temere che ’s relative a tutte è ottenere uscita di Windows Form consentono di implementare una struttura di progettazione.  Detto questo, esistono soluzioni di terze parti, ad esempio ’s Infragistics stile Framework di applicazione e strumento (infragistics.com/learn/applicationstyling.aspx), che offrono maggiore coerenza e flessibilità e consentono di salto in cui lascia il Windows Form in consentono di implementare e gestire un framework coerente di progettazione.

Potreste pensare su composito dell'interfaccia utente Application Block (noto anche come CAB;(vedere msdn.microsoft.com/en-us/library/aa480450.aspx), e sebbene CAB sia destinato più modularizing e la separazione dell'interfaccia utente piuttosto che per l'implementazione di un framework coerente di progettazione, è possibile definire la shell di interfaccia utente (utilizzando uno o più le aree di lavoro) per rendere una sorta di layout master per fornire tale livello di implementazione di framework di progettazione.  Comunque lasciato dover verificare che i moduli particolari modulo harmonious complesso, tuttavia e dato la modularità CAB fornisce, ciò significa ulteriori responsabilità agli sviluppatori di modulo di indicazioni del framework di progettazione. E se si per implementare un'applicazione utilizzando CAB, è necessario controllare in smart client software factory (SCSF). (Vedere msdn.microsoft.com/en-us/library/bb266334.aspx per indicazioni buona nelle due insieme).

ASP.NET

ASP.NET, da una tecnologia Web, è possibile sfruttare le tecnologie Web standard che utilizzano strutture di progettazione. Principalmente, ciò significa CSS e negli anni più recenti, i più diffusi condiviso Framework CSS (bing.com/search?q=css+frameworks). Se ’re attenzione e uno schema CSS georgiano, è possibile sorta di ottenere stoccaggio con quasi pieno controllo del layout di pagina, ma più probabilmente avere alcune interplay tra struttura HTML e CSS. CSS è particolarmente utile per i dettagli di progettazione più granulari, ad esempio spaziatura (margini, spaziatura interna, interlinea e così via), i tipi di carattere, colori, e, naturalmente, visual funzioni che implicano operazioni, quali i bordi e vari gymnastics basata su immagini. 

Come un complemento (o, a seconda che si richiede una contraddizione) di fuori della casella stile, ASP.NET supporta temi e controllo skinning per ottenere che aggiuntivo bit di gestibilità di organizzazione e la potenziale uscita dell'applicazione.  Infragistics offre inoltre stile applicazione per ASP.NET, che consente di gestire lo stile per l'applicazione più semplice, soprattutto se si utilizzando controlli Infragistics.  CSS e HTML sono molto potenti, ma può diventare ingestibile e sia i prodotti Infragistics temi ASP.NET incorporati e skinning, così come altri Framework, tentare di consentono di gestire tale complessità e mantenere l'integrità.

Ai fini del layout lordo condivise e degli elementi, ASP.NET dispone di pagine master (msdn.microsoft.com/en-us/library/wtxbf3hh.aspx), che consentono di definire layout padre/master comuni e gli elementi mediante i segnaposto di contenuto per le aree del layout che possono variare basate su viste particolare.  Le pagine master possono essere nidificate e può avere più schemi (ad esempio, uno per società, uno per applicazione e anche uno per MyAppDialog, tale tipo di cosa).  Realmente ’s un framework di piuttosto buona e ingegnose per il supporto e semplificando l'implementazione e la manutenzione di una struttura di progettazione, ed Sì, per MVC lovers, è possibile utilizzare le pagine master sono anche. (Vedere come punto di partenza di msdn.microsoft.com/en-us/library/dd381412.aspx).

Un altra nota su ASP.NET.  È possibile inoltre sfruttare ASP.NET AJAX (e altre tecnologie AJAX) per mantenere essenzialmente un layout esterno, comune e solo di aggiornare e sostituire aree di contenuto.  ASP.NET AJAX è un altro strumento che può essere utilizzato in combinazione con le pagine master per ottenere i vantaggi di AJAX sfruttando i vantaggi di CSS e pagine master per un framework coerente di progettazione.

SharePoint e altri sistemi di gestione contenuto

Infine, come riguarda principalmente ASP.NET, SharePoint e altri sistemi di gestione dei contenuti sono in genere vanno oltre le nozioni fondamentali di what you get nel framework di ASP.NET per fornire modelli di pagina, i tipi di contenuto e funzionalità simili che possono aiutarvi ulteriormente stabilire e gestire un framework coerente di progettazione, anche attivazione nondevelopers per, in un certo senso, estendere il sistema mantenendo intatto lo stesso framework progettazione.

WPF

WPF (Windows Presentation Foundation) è fondamentalmente due livelli di stile, stili e modelli . (Vedere msdn.microsoft.com/en-us/library/ms745683.aspx. ) Gli stili rappresentano essenzialmente un modo per raggruppare un insieme condiviso di valori di proprietà.  I modelli sono disponibili due tipi di base in WPF, modelli di dati e modelli di controllo.  I modelli di controllo rappresentano un modo per personalizzare completamente l'aspetto dei controlli, essenziale struttura e comportamento.  I modelli del controllo vengono spesso utilizzati insieme (ad esempio, è possibile impostare una proprietà di modello in uno stile per un controllo) per personalizzare l'esperienza a un livello non è fattibile nelle precedenti tecnologie di interfaccia utente di .NET. I modelli di dati rappresentano un modo molto utile per condividere una definizione di interfaccia utente comune per una forma di dati, da cui si intende che un modello di dati prende solo circa ricerca binding corrispondente e non, ad esempio, in cui l'origine dati è di un determinato tipo.

Come per il layout lordo e gli elementi condivisi, perché WPF è una tecnologia di per sé lato client, ’s sufficiente più o meno di creazione di una visualizzazione (una finestra), non creare il layout e sostituendo il contenuto del segnaposto in fase di esecuzione (spesso con istanze di UserControl).  WPF supporta inoltre un'implementazione del criterio di spostamento di Journal (vedere quince.infragistics.com/#/Main/ViewPattern$pattern=Journal+Navigation) e consente di utilizzare frame con esso per simulare l'esperienza Web di passaggio a pagine diverse.  Può trattarsi di un metodo efficace per implementare l'approccio di segnaposto. (Trovare ulteriori informazioni in msdn.microsoft.com/en-us/library/ms750478.aspx).

WPF (e Silverlight) dispongono inoltre di un framework di simile a CAB denominato Guida applicazione composita (CAG, precedentemente noto come prism; vedere msdn.microsoft.com/en-us/library/cc707819.aspx) che è possibile sfruttare in modo analogo, come descritto in precedenza per Windows Form.  CAG supporta il concetto di aree, che è possibile utilizzare come contenitori o segnaposto all'interno di un layout più grande, e che possono essere nidificati oltre. E si lavorando in Blend (inevitabile, in questo momento), è possibile un po' di buona di indicazioni sull'organizzazione di contenuti per rendere Blend e prism lavorano bene insieme johnpapa.net/silverlight/using-blend-with-prism-apps-in-silverlight-3/.

Utilizzando una combinazione di stili, modelli, principale visualizza con segnaposti e i controlli utente (o controlli frame con le pagine), è possibile implementare un framework molto gestibile di progettazione in WPF.

Silverlight

Poiché Silverlight ad tutti gli effetti e scopo è un sottoinsieme di WPF ed è un obiettivo dichiarato di Microsoft per tentare di compatibilità del codice sorgente (XAML) di 100 % tra Silverlight e WPF, la maggior parte delle ho detto su WPF applicato a Silverlight, con alcune eccezioni, ovviamente.

Prima disattivato, non esiste il formale concetto di una pagina di Silverlight di base, in sostanza, tutto ciò che è un controllo o un controllo utente. Nella versione 3, Microsoft ha aggiunto una struttura di spostamento, che aggiunge una classe di frame per l'hosting “ pagine ” e una classe di pagina che deriva da UserControl e una proprietà Title che aggiornerà automaticamente la barra del titolo del browser. Questi sono un'implementazione di spostamento di registrazioni che è possibile simulare l'approccio Web (simile a WPF, ma redazione di questo l'implementazione non è compatibile di origine, vedere msdn.microsoft.com/en-us/library/cc838245(VS.95).aspx). Anziché lo spostamento nelle pagine, è possibile spostarsi ai controlli utente che sono rappresenta le pagine. Ma il concetto di base di definizione condivise layout lordo e gli elementi con segnaposto rimane. E, come con WPF, è possibile gestire manualmente la sostituzione di elementi visual in aree particolare (segnaposto) dell'interfaccia utente con nuovi elementi, in genere i controlli utente.

Come per lo stile e modello, è praticamente stesso brano, con l'avvertenza che Silverlight fornisce un oggetto VisualStateManager che consente di controllo (o controllo utente) agli sviluppatori di definire gli stati di semantici e i gruppi di stato.  Nel contesto della nostra discussione qui, ciò significa principalmente che VSM influenza la modalità è personalizzare i modelli del controllo.  Oggetto VisualStateManager per WPF è nel Toolkit di al momento;vedere windowsclient.net/wpf/wpf35/wpf-35sp1-toolkit-visual-state-manager-overview.aspx.

Inoltre, poiché Silverlight non è una scelta globale, è possibile utilizzarlo in combinazione con ASP.NET e utilizzare che significa ASP.NET per una struttura di progettazione unificati. È sufficiente gestire l'integrazione di stile tra le tecnologie Web (HTML + CSS) standard con lo stile in Silverlight.  Pertanto tenere questo presenti se si passa tale route.

È possibile trovare ulteriori informazioni sulle differenze tra WPF e Silverlight in aspx msdn.microsoft.com/en-us/library/cc903925 (VS.95).

SketchFlow

È stata rilasciata SketchFlow solo redazione di questo.  Mentre SketchFlow supporta WPF e Silverlight (anche se un progetto SketchFlow destinato a una singola tecnologia), è alcune delle proprie idee sulla gestione di framework di progettazione.  E poiché molti sviluppatori verranno utilizzano al prototipo per queste tecnologie. NET, ho pensato che vale la pena menzionare.  Sebbene SketchFlow si trova sopra queste due tecnologie, esso offre alcuni terminologia diverso, ovvero schermate e schermate di componenti.

Una schermata è fondamentalmente sembra ad esempio, una schermata in cui gli utenti. (È possibile creare connessioni di esplorazione visiva tra le schermate nella mappa SketchFlow).  Significato di questo in genere è che una schermata dispone di interfaccia utente sufficientemente distinti per giustificare la propria vita e il layout.  Componente schermate costituiscono il sistema sostanzialmente più semplice per condividere il bit di una schermata con altre schermate, molto simili ai controlli utente. (Infatti, una schermata del componente verrà creare controlli utente nel codice).

Durante la parte di un punto di creazione di prototipi, è pensare non oltre contenuti particolarmente anticipata prototipi, come il framework di progettazione, non vi è un punto in cui si desideri effettuare questa operazione.  Se si ottiene molto oltre alla creazione di prototipi una pagina o due e si prevede di eseguire un'iterazione e perfezionare ulteriormente, è necessario iniziare a pensare come condividere i bit più comuni per rendere più gestibile il prototipo.  Ciò detto, anche se non vi è un brano per eseguire Avanti dal prototipo SketchFlow all'implementazione finale, che non ’s il punto principale di SketchFlow. 

Di pensare un framework di progettazione di implementazione dettagliata può attendere probabilmente che si desidera avviare la creazione, in cui è possibile utilizzare alcune o molte delle schermate di componente e anche alcuni degli stili, gli stati (nella gestione dello stato di visualizzazione) e storyboard correlati se si o le finestre di progettazione passa a doversi spostare tra definirli in dettaglio.

Utilizzo dei controlli comuni

Oltre ai modelli e strumenti che consentono di implementano un framework coerente di progettazione all'interno e tra le applicazioni, è necessario anche considerare coerenza del framework di progettazione in termini di corrispondenze tra le soluzioni e altri framework di progettazione. Si tratta in cui i modelli di interfaccia utente consente di scegliere e implementare i metodi migliori, più comuni di risoluzione dei problemi.

Anche in questo caso, sembra che gli sviluppatori unconsciously (o non) eseguita questa operazione tutto insieme tentando di simulare soluzioni comuni che gli utenti finali hanno familiarità con (ad esempio, Excel e Outlook) e, ovviamente, utilizzando i controlli disponibili nella casella.  Molti di noi don’t pensare, ma può essere detto qualcosa per la coerenza fornita dall'insieme controllo limitato. Don’t è necessario preoccuparsi troppo come implementare, ad esempio, una selezione a rilasciare (visualizzato quince.infragistics.com/#/Main/ViewPattern$pattern=Drop+Down+Chooser) poiché è stato che nella casella. Allo stesso modo, per più complesse ma familiari interfacce non connesse in librerie di framework di base, è possibile sfruttare il lavoro di terze parti per fornire le implementazioni buona per elementi quali il OutlookBar, la barra multifunzione e così via.

Questi controlli comuni può essere considerato come una specie di framework di struttura universale condivisa in cui la maggior parte delle applicazioni (business) vengono create, ed è opportuno avvalersi del framework progettazione condivisa per sfruttare questa conoscenza.  Alcuni hanno detto che intuitivo è spesso semplicemente solo ciò che è familiare (vedere, ad esempio, portal.acm.org/citation.cfm?id=584629), utilizzando i controlli dell'interfaccia utente familiari è possibile passare un modo lungo verso aiutare le interfacce sembrare intuitivo.

Allo stesso tempo, tenere presente che è comunque necessario scegliere i controlli in base alle esigenze dell'applicazione e non applicabili unthinkingly un controllo familiarità appena è nota o perché, ad esempio, viene utilizzato in Microsoft Office.  Può passare senza informare, ma in urgenti per fare le cose, Ritengo che abbiamo ’ve tutti i controlli misused simile al seguente.

Una cosa che consentono di eseguire tali chiamate di giudizio più rapidamente è una buona libreria di modello di interfaccia utente e UX come Quince (quince.infragistics.com). Leggere il problema, soluzione, contesto e descrizione dei motivi, in genere ’re piuttosto breve e fare molto che consentono di identificare se un modello specifico (che è spesso implementato come un controllo) è adatto al contesto. Sono disponibili molte alternative e utilizzare il tag per esplorare altre possibili alternative.

Conclusioni

Ora che si dispone di questa presentazione rapida di attivazione di funzionalità di .NET in diverse tecnologie di interfaccia utente. NET, non sarà possibile applicare e sfruttare il (o ’s la finestra di progettazione) sforzi per definire un framework coerente e renderlo un elemento che è gestibile per perfezionarlo durante lo sviluppo e continuare a eseguire un'iterazione e perfezionarlo come mantenere dell'applicazione di produzione.