Nutzbarkeit in der Praxis

Das Tao des Bildschirmdesigns

Dr. Charlie Kreitzberg und Ambrose Little

Kognitive anzeigen

Abbildung 1 die Yin-Yang-Symbol

Als Entwickler Sie tief in die Implementierung Modell immersed sind, aber wenn Sie die Benutzeroberfläche entwerfen verschieben, müssen Sie die Perspektive anzeigen die Software in der Weise der Benutzer UMSCHALT.Nicht einfach, da es schwierig zu ignorieren, was Sie wissen, und übernehmen ’s ’s ’s einer anderen Person anzeigen.Viele der Entwurfsverfahren, die in vorherigen Spalten, wie z. B. Erstellen von Rollen zum Darstellen von typischen Publikum und erstellen Aufgabe-Szenarien zu verstehen, wie Benutzer arbeiten erörtert, sollen hilft Ihnen, Ihre UMSCHALT.Benötigen Sie genau wissen, Publikum, die Aufgaben erledigen müssen und wie Sie Ihre Aktivität denken.Diese ’s auch wichtig zu erkennen die Ebene der technische Kenntnisse, die Sie aus dem Publikum erwarten können.Mit diesen Kenntnissen können Sie ein manifest Modell entwickeln, die passt.

Erstellen Sie zuerst das Framework

Zuvor haben wir über den Unterschied zwischen Entwurf allgemeine und detaillierte geschrieben.Bildschirm Entwurf sollten immer mit dem Entwurf des allgemeinen Frameworks beginnen.Sobald das Framework vorhanden ist können Sie es als Grundlage für detaillierte Bildschirme verwenden.Zwei wichtige Elemente des Frameworks sind folgende:

• Eine Navigation Schema, das der Benutzer von Bildschirm zu Bildschirm problemlos in Übereinstimmung mit dem Ablauf Vorgang verschieben kann.Erörtert Navigation in unserer März 2009 Spalte (msdn.microsoft.com/magazine/dd458810.aspx).
• Permanente Elemente wie Überschriften, dienen, zur Verankern des Benutzers und Aufschluss über, in denen der Benutzer ist.

Mit anderen Worten, beginnen Sie mit ein Top-Down-Ansatz in dem Sie die Elemente definieren, die alle Bildschirme gemeinsam sind, und erstellen ein deaktivieren Modell wie der Benutzer um erhält.

Entwickeln Sie mit dem Framework an Stelle der wichtigsten Bildschirme das Framework ggf. verfeinern.Entwickeln Sie abschließend die verbleibenden Seiten und Dialogfelder.

Drahtmodell Vorlagen erstellen

Framework als Masterseiten, implementiert werden können, sollten die Hauptbereiche für die Bildschirme angeben.Einige der Informationen in diesen Bereichen wird auf jedem Bildschirm (z. B. den Namen des Produkts, Logos und im Hauptmenü) identisch sein.Einige Informationen von Bildschirm zu Bildschirm geändert, jedoch sollte auf jedem Bildschirm (z. B. die Bildschirm-Titel und Breadcrumbs) an derselben Stelle angezeigt werden.Schließlich werden einige Informationen von Bildschirm zu Bildschirm (z. B. die Steuerelemente für den Bildschirm) unterschiedlich sein.Alle diese Elemente sollten zum Erstellen eines Entwurfs konsistenten und nahtlosen jedoch zusammenarbeiten werden.

Starten Sie, indem Bereiche basierend auf der Funktion des Bildschirms aufteilen.Betrachten Sie z. B. Drahtmodell im Abbildung 2 der dient zum Zuordnen von grundlegenden Bildschirm Bereichen.Beachten Sie, wie jeder in dieser Drahtmodell Dropbereich wurde hat, damit der Benutzer seinen Zweck verstehen.

Abbildung 2 definieren den Bildschirm Bereiche

Der Gesamtentwurf ist einfach, für den Benutzer perceptually organisieren.Die wichtigsten Registerkarten kann ein etwas anderes Design, aber, solange das grundlegende Layout Schicht doesn’t, wird der Entwurf konsistent für den Benutzer angezeigt.Betrachten Sie zur Veranschaulichung Abbildung 3 der anderen Vorlage angezeigt wird, die für eine andere Registerkarte in der Anwendung verwendet werden konnte.Da die grundlegende Framing-Elemente konstant bleiben, bleibt die Benutzerfreundlichkeit, obwohl verschiedene wichtige Elemente des Designs.

Abbildung 3 A kompatible Vorlage

Natürlich sollte das Entwurfsmuster, die Sie für jeden Bildschirm auswählen konsistent sein.Wenn zwei Registerkarten auf eine Suchfunktion haben, sollte Sie das Feature auf die gleiche Weise darstellen.

Alle außer den einfachsten Systemen mit Dialogfeldern und anderen sekundären Bildschirmen befassen müssen.In der Vergangenheit vermieden aufgrund der Einschränkungen von Browsern, viel webbasierte Systeme untergeordneten Fenstern und Schichten.Eine allgemeine Alternative war, um dem Benutzer zu einer anderen Seite zu senden, und der Benutzer musste herausfinden, wie zurückzukehren.Häufig führte dies zu Verwirrung.

Bei Plattformen wie Microsoft .NET Framework, dessen zugeordnete Programmiersprachen und AJAX Popups sowie andere eleganten Möglichkeiten zum Verwalten von Details erstellen viel realistischer ist.Wenn Sie ein Framework erstellen, wie Sie Dialogfelder und Details behandelt überlegen.Beispielsweise würde die Vorlagen in Abbildungen 2 und 3 auch mit einem modalen Popup untergeordneten Fenster, bearbeiten, wie in Abbildung 4 dargestellt.

Während der Erstellung des Frameworks sollten Sie auch zur Unterstützung von Benutzern und Hilfe vorstellen.Hilfe ist oft Nachhinein als eine “ Schrauben-on, eingeben erstellt, aber funktioniert viel besser, wenn es in den Bildschirmen integriert ist.Beachten Sie, dass im Popupfenster in Abbildung 4 gezeigten wir einen Ort für erläuternden Text reserviert, die als eine Aufforderung zum Ausrichten des Benutzers dienen kann.Link Weitere ermöglicht dem Benutzer Zugriff auf zusätzliche Informationen.(Selbstverständlich müssen Sie entwerfen eine Vorlage zum Anzeigen, wie diese Verknüpfung verarbeitet werden.)

Abbildung 4 des

Damit den Benutzer das Formular ausfüllen, sollten Sie außerdem eine QuickInfo, damit den Benutzer zusätzliche Informationen über bestimmte Felder zu erstellen.Ein Beispiel-Design für diese wird im Abbildung 5 angezeigt.

Abbildung 5 QuickInfo

Indem Sie denken Unterstützung Benutzer Entwurf ganz am Anfang nutzen Sie eine große Schritt in Richtung sicherstellen, dass es tatsächlich erstellt und wird nützlich und konsistent sein.Beachten Sie, dass die QuickInfo, wie die Eingabeaufforderung eine Verknüpfung zu dem Benutzer weitere ermöglichen.Während dies nicht üblich ist (und kann nicht in einigen Steuerelementen QuickInfo implementiert werden), ist es eine leistungsstarke Technik, da Benutzer tiefer ausreicht, während im Kontext des die aktuelle Aktivität bleiben können.Möglicherweise möchten Sie erstellen eine Vorlage für noch eine andere Ebene des Popup unterstützen diese Links zu zusätzlichen Navigation zu vermeiden.

In meiner Erfahrung können ein paar grundlegende Vorlagen mit vielleicht zwei Ebenen der Dialogfelder, die Benutzeroberfläche sogar sehr große Systeme aufzunehmen.Und durch Angabe des Frameworks voraus, erstellen Sie die Gerüstbau zum Entwerfen von bestimmter Bildschirmen.

Erstellen einer Stilvorgaben

Wenn Sie das Framework erstellen, Dokumentieren Sie es in einem Style Guide.Dies wird die Auswahlmöglichkeiten erinnert vorgenommen und andere Personen die Bildschirme, um mit dem Entwurf konsistent bleiben entwickeln müssen auch aktivieren.Eine Stilvorgaben muss nicht mit Effekten.In der Regel ich erfassen die Bildschirm-Vorlagen, mit Anmerkungen versehen werden und die Bildschirme mit Anmerkungen in Word, Visio oder eine Website einfügen.Abbildung 6 ist ein Beispiel des wie Popup Drahtmodell versehen werden kann.

Abbildung 6 Annotated Drahtmodell für Stilvorgaben

Es ist wichtig, Schriftarten, Schriftgrößen und Farben angeben, sodass Sie konsistente von Bildschirm zu Bildschirm werden können.Wann immer möglich, verwenden Sie hartcodierte Werte, sondern Formate für Schriftarten und Farben, so dass Sie (oder eine Grafik Interpreten) an den visuellen Entwurf Änderungen und Konsistenz weiterhin über die Anwendung zu gewährleisten.

Die Stilvorgaben des kann auch die Terminologie in der Benutzeroberfläche zu verwendende angeben.Es ist wichtig, Begriffe einheitlich verwenden und Begriffe auswählen, die Ihr Publikum sinnvoll.

Agile

Wie in früheren Artikeln erläutert, kann die Umgestaltung der Benutzeroberfläche zu Verwirrung führen.Aus diesem Grund ’s die in der Regel sollten Sie zuerst ein Framework für umfassende und flexible ergeben und dann während des gesamten Entwicklungszyklus präziser zu formulieren.Möglicherweise fest, z. B., dass Sie eine zusätzliche Vorlage benötigen oder dass Sie zusätzliche Entwurfsregeln ausdenken benötigen.Sie können sicherlich die Stilvorgaben des Benutzeroberfläche Entwicklung voranschreitet, ergänzen, solange Sie den ursprünglichen Entwurf verfeinern.Wenn Sie feststellen, dass der ursprüngliche Entwurf rethought werden muss, sollten Sie zurückkehren und alle Bildschirme auf Konsistenz überprüfen und berücksichtigen Sie die Auswirkungen der Änderungen auf Benutzer, wenn die Software bereits bereitgestellt ist.

Benutzerfreundlichkeit testen

Nachdem Sie Ihr Framework erstellt haben, Testen Sie Ihre Nutzbarkeit möglichst, so dass Sie bestimmte vornehmen können, dass der Entwurf wie gewünscht funktioniert.Es ist einfacher, um die Vorlage zu ändern und Stilvorgaben vor viel Bildschirme codiert.

Detail Bildschirme erstellen

Mit das Handbuch Framework und Stil Stelle können Sie die Bildschirme erstellen.Wenn Sie eine gute Stilvorgaben entwickelt, können die gewünschten Konsistenz verteilen die Arbeit zwischen mehreren Entwicklern und dennoch verwaltet werden.

Die Arbeit der einzelnen Bildschirme zu entwerfen ist eine Kombination aus ClipArt und Engineering.Um einen Bildschirm Entwurf erstellen, der für den Benutzer funktioniert, müssen Sie sich in ’s Benutzer Schuhe und finden Sie in die Welt der Art der Benutzer verfügt.’S nicht einfache Aufgabe und ist einer der Gründe, dass die Benutzerfreundlichkeitstests so leistungsfähig wie ein Tool sein kann.

Kognitive Modell

Betrachten Sie als Ausgangspunkt Abbildung 7, die zeigt ein vereinfachtes kognitive Modell wie ein Benutzer einen Bildschirm verarbeitet.

Abbildung 7 kognitive Model for Processing Bildschirm

Der Benutzer beginnt i. d. r. die Sitzung mit ein wesentliches Ziel beachten.Z. B. “ ich möchte mein Unternehmen Vorteile auswählen eingeben oder “ soll diesen Debitor ’s Problem zu lösen. eingeben Anschließend, wie der Benutzer auf jedem Bildschirm confronts, erstellt er kleinere, Bildschirm-Ebene Ziele wie “ soll anmelden eingeben oder “ soll ’s Kunden-Datensatz zu suchen. eingeben

Ziele wie diese Bedenken der Benutzer Ansichten des Bildschirms und entscheidet, welche Aktion werden.Er führt die Aktion und die Ergebnisse beachtet.Basierend auf diese Ergebnisse, die der Benutzer erstellt ein neues Ziel und wiederholt den Vorgang erneut.

Dabei kann problemlos wechseln, astray, wenn der Benutzer das entsprechende Steuerelement auf dem Bildschirm nicht erkennt.Diese Situation kann auftreten, wenn der Designer annimmt, dass der Benutzer “ speichert eingeben, wo und eine sichtbare Bestätigung dafür nicht erstellen.Ein Beispiel wäre ein Produkt, in dem ein Benutzer F1 für Hilfe drücken muss, aber eine Eingabeaufforderung an nicht vorhanden ist.Ein weiteres Beispiel ist wenn ein Benutzer zu einem bestimmten Bildschirm zu eine Funktion zurückgeben muss, aber erinnert sich nicht, wo die Funktion zu finden.In beiden Fällen ist das Ergebnis i. d. r. frantic suchen und Ärger.

Dies führt zu einer Regel Schlüssel Bildschirm-Entwurf: nie basieren Sie auf den Benutzer ’s Arbeitsspeicher;Versuchen Sie stattdessen alle Optionen sichtbar gemacht.Lauf der Zeit fügt der Benutzer das System, lernen Abhängigkeit Speicher nur kognitive laden und, daher zu Aufwand.Beachten Sie, dass cognitively, Erkennung immer ist viel einfacher als Rückruf.Wenn Sie eine große Anzahl von Optionen haben, müssen Sie die Auswahl ein Prozesses mit mehreren Schritten zu treffen.In diesen Fällen erleichtern Sie wie der Benutzer das Element suchen, das er möglichst und immer mit minimalen kognitive Auslastung als schnell und einfach muss möglichst.

Da Entwickler mit Effizienz besorgt sind, können Sie fühlen, es ist sinnlos und nur die Informationen, die bereits an anderer Stelle angezeigt wird, wiederholen.Aber da Spracherkennung immer Rückruf trumps, besser Dinge, die als mehrmals, vorausgesetzt, dass der Benutzer etwas erinnern wird, wenn es nicht vor von Ihnen ’s Präsentation.Und da Benutzer nur selten genau Ihre Modelle von der Navigation Fluss entwickeln – jedenfalls nicht bis viel Gefährdung für das Produkt mussten – der Prozess abhängig, wie bereits erwähnt, dass die Funktion benötigten unter einer bestimmten Registerkarte viel kognitive Laden hinzugefügt.

Layout

Letzten Monat erläutert wir zu Informationsarchitektur und zum Entwurf der Präsentation von Informationen zur einfachen Verständnis.Berücksichtigen Sie diese Ideen, wenn Sie einzelne Seiten anordnen.Stellen Sie sicher, dass der Bildschirm liegen und übersichtliche frei ist.Sie möchten Benutzer perceptually Gruppieren von Elementen, die in visual Einheiten zusammenarbeiten.Suchen Sie Abbildung acht wie disorderly Ausrichtung angezeigt, wird für das Auge zum Gruppieren verwandter Elemente wirklich schwer.Die Elemente ausgerichtet, und platzieren die Schaltflächen in der Nähe der Elemente, die Sie steuern, sind perceptual Gruppen problemlos gebildet.

Abbildung 8 gruppieren macht dem Bild mehr verständlich

Interner Konsistenz

Wenn Sie einen wirklich guten Grund nicht zu haben, versuchen Sie so konsistent wie möglich von Bildschirm zu Bildschirm sein.Beispielsweise sind hier einige allgemeinen Richtlinien:

• Verwenden Sie die gleiche Terminologie im gesamten system
• Organisieren von Informationen konsistent mithilfe derselben Form von Überschriften und Präsentation von Informationen
• Verwenden Sie die gleichen Techniken für Suchabfragen und Ergebnisse

Fluss

Wenn eine Bestellung an der gewünschten eines Benutzer zum Scannen des Bildschirms Weise vorhanden ist, können Sie in der Regel am besten nach den Datenfluss für systemeigenen Sprache des Benutzers ’s.In Englisch und vielen anderen Sprachen schlägt diese links nach rechts und von oben nach unten.Abbildung 9, wie viel einfacher es ist, die die Buchstaben in alphabetischer Reihenfolge lesen betrachten Wenn diese Sprache Fluss entsprechen.

Abbildung 9 Flow

Wenn Ihr Publikum ’s Sprache Hebräisch, Arabisch, Persisch, Chinesisch oder Japanisch ist, der Datenfluss möglicherweise von rechts nach links, damit Ihre Bildschirme entsprechend angepasst werden sollte.Fluss spielt auf jedem Bildschirm.Datenfluss ist nicht immer mit Text verknüpft.Anordnen, z. B. Wenn Sie einen Prozess mit mehreren Schritten darstellen möchten, von der Fluss beträgt wichtig, selbst wenn die Objekte auf dem Bildschirm grafische werden.Betrachten Sie das Beispiel “ Waschen ein T-Shirt eingeben i18nguy.com/MiddleEastUI.html.

Und dann die Magic geschieht

Viele Designer (einschließlich selbst) gefunden werden, dass Sie eine emotionalen Reaktion auf gute Bildschirm Entwurf haben.Sie wissen, wenn ein Design rechts ist, weil Dinge in Place fallen scheint.Der Ansatz ist sinnvoll, wie Sie es aus verschiedenen Perspektiven betrachten.Zwischen uns würden wir die emotionalen Gefühl als charakterisieren “ und die magische dann geschieht, eingeben und wir zunächst, an die Clients erklären, warum dieser bestimmten Entwurf richtig ist.

Als Entwickler haben Sie wahrscheinlich ähnliche “ Aha eingeben Minuten festgestellt Wenn Sie ein besonders knotty technischen Entwurfsproblem gelöst.Wenn Sie den gleichen Punkt im Bildschirm Entwurf zugreifen können, Sie werden über die Rightness Ihre Entwurfsentscheidungen darauf vertrauen und selten wird Benutzerfreundlichkeitstests Beweisen Sie falsche.

Untersuchen Sie der Tao Bildschirm entwerfen und verstehen Sie, müssen Sie zwei komplementäre Ansichten des Produkts – eine technische und zentriert einen Benutzer erstellen.Wenn Sie von einer Ansicht zur anderen bequem wechseln können, haben Sie eine Fähigkeit schwierige, aber sinnvoll beherrschen.

Die Software anzeigen

Amborse Little

Bildschirm Entwurf ist, Meiner Meinung nach eines der Dinge, die so konkrete und praktische, dass die meisten von uns einfach darauf erhalten.  Hat die leider Folge uns complacent zu machen: Wir denken, dass genügend Informationen oder nicht einfach davon aus, dass wir es wissen – wir Experten ’re, da wir Bildschirme entwerfen. Wie andere Ausgaben dieser Rubrik gezeigt haben, besteht tatsächlich sowohl eine unterschiedliche Wissenschaft und eine Kunst, dass Software-Schnittstellen.Der durchschnittliche Entwickler erhalten nur bisher je nach seinem innate Talent und Empathy, Schnittstellen, die gute Erfahrungen zu fördern.  Auf der Seite kippen hoffentlich dieser Spalte wird auch angezeigt, selbst wenn UI-Entwurf nicht Ihren primären Fachwissen ist, Sie bessere erhalten und auch besser entscheiden erhalten, wann müssen Sie Einbindung von IT-Fachleute im Feld.

Ich sage all dies mithilfe von anzumerken, dass unserer Benutzeroberfläche Technologien scheinen lange die Notwendigkeit Entwurf Frameworks erkannt haben.  Ich Dare Obasanjo sagen, dass das Vorhandensein solcher Plattformen mehr durch Notwendigkeit für uns hat Entwickler behalten unsere Nerven und einige Modicum laufende Produktivität der Oberseite des Anforderungen ändern gesteuert wurde, als durch eine bewusste Erkennung von die Bedeutung der Konsistenz für die wir lovingly auf als Benutzer verweisen. Daher ist die serendipitous, wir haben, was wir haben.

Und was genau ist, die wir haben?  Gut, die offensichtlich abhängt auf welche Technologie Sie mit arbeiten, aber Versuch, auf die wichtigsten Technologien .NET Benutzeroberfläche bleiben diese, nachdem alle ist MSDN Magazine. 

Beim Abrufen in diese Dinge alle

Zuerst deaktivieren, lassen Sie mich sagen, dass alle .NET Technologien eine freigegeben haben, konkrete Konzept der grundlegende Benutzeroberfläche Wiederverwendung – das Steuerelement (und seine Ableitungen, das so genannte Benutzersteuerelement).  Diese, lassen wie ich ’m Sie sicher, dass die meisten von uns wissen, Sie Bündel Bestandteile der Benutzeroberfläche nicht nur Visual, sondern auch funktionale wiederverwenden.  Ich ’m keine Historian Technologie, aber meine Eindruck ist, dass Steuerelemente in der Regel sollen für Lösungen, die cross-Problemdomänen (häufig in eigenen externen Projekt oder die Assembly manifestiert oder sogar von Drittanbietern bereitgestellte) und diese Lösungen Steuerelemente in der Regel sehr allgemein anwendbare Muster implementiert werden.Benutzersteuerelemente, sind auf der anderen Seite in der Regel auf bestimmten Problemdomänen oft in der gleichen Projektmappe ausgerichtet.

Sie erhalten Sie bisher nur hinsichtlich der ein Framework Design, jedoch Steuerelemente und Benutzersteuerelemente eignen sich für Code und Benutzeroberfläche Wiederverwendung, die gut bekannt ist.  Für, benötigen Sie etwas mit dem zu häufig genannte “ Master eingeben oder “ Vorlage eingeben Framework Brutto Layout und hierarchisch gemeinsam genutzte Elemente sowie eine Möglichkeit zum Verwalten konsistente Gestaltung (Bedeutung Schriftarten, Farben, Abstände und andere visuelle Treatments, die Entwurf Ästhetik und Informationen dienen) behandeln.  Variieren die Lösungen für diese über Technologie.

Windows Forms

Vor vielen Monden penned mein fearless Floridian Freund, war Schultes einen Artikel in Visual Studio-Magazin aufgerufen “ verstehen visueller Vererbung eingeben (msdn.microsoft.com/library/aa288147.aspx.)  Die in diesem Artikel beschriebenen Vorgehensweise können weitgehend mit den Bruttobedarf, gemeinsam genutzte Layout-Anforderungen – mit anderen Worten, Sie stellen ein Basis Form und ein Basis Dialogfeld und Erstellen von denen meisten Ihren Anforderungen entsprechen können.     

Links mit eigenen Geräten, ich ’m fürchten, über alle ’s Sie Windows Forms optimal in Ihnen dabei helfen, ein Framework Entwurf zu implementieren.  Andererseits stehen Fremdanbieter-Lösungen, wie ’s Infragistics Application Styling Framework und Tool ( infragistics.com/learn/applicationstyling.aspx), bieten mehr Konsistenz und Flexibilität und füllen die Lücke, wo Windows Forms endet in Ihnen die Implementierung und Verwaltung einer konsistenten Entwurf Framework helfen, können.

Denken Sie vielleicht über Composite UI Application Block (auch bekannt als CAB;:Siehe msdn.microsoft.com/library/aa480450.aspx), und Obwohl CAB mehr für modularizing und Benutzeroberfläche entkoppeln, als für die Implementierung ein konsistentes Design Framework vorgesehen ist, konnte Sie definieren die Shell UI (mithilfe einer oder mehrere der Arbeitsbereiche) damit eine Sortierung der master Layout, Design-Framework-Implementierung bietet.  Sie weiterhin links müssen sicherstellen, dass bestimmte Module Formular Ganzem harmonious jedoch angegeben Modularität, das CAB bereitstellt, dies bedeutet mehr Verantwortung auf Modul Entwickler ihre Framework-Entwurfsrichtlinien zu folgen.Und wenn Sie zum Implementieren einer Anwendung mit CAB, sollten Sie in Smart Client Software Factory (SCSF) suchen.(Siehe msdn.microsoft.com/library/bb266334.aspx für einige gute Anleitung für die beiden zusammen.)

ASP.NET

ASP.NET, einer Web-Technologie können die standardmäßigen Webtechnologien nutzen, die den Entwurf Frameworks unterstützen.  Hauptsächlich, dies bedeutet CSS und, in neueren Jahren das beliebte freigegeben CSS-Frameworks ( (bing.com/search?q=css+frameworks ).  Wenn Sie vorsichtig, ’re und einen Master CSS Zen Sie Art des können sofort mit fast vollständige Kontrolle über Layout abrufen, jedoch wahrscheinlicher haben einige Interplay zwischen HTML-Struktur und CSS.  CSS ist besonders für eine feiner abgestufte Entwurf Details wie Abstand (Ränder, Padding, Zeilenabstand und usw.), Schriftarten, Farben, und natürlich visual Treatments, die Dinge betreffen, wie Rahmen und verschiedenen Image-basierte Gymnastics. 

Als Ergänzung (oder ein Widerspruch, je nachdem, Sie bitten), Out-of-the-Box Gestaltung ASP.NET unterstützt, Designs und steuern, die Ihnen, zusätzliche helfen skinning Bit der Organisation und potenzielle Wartbarkeit aus Ihrer Anwendung.  Infragistics bietet auch Anwendung Styling für ASP.NET, wodurch Gestaltung für Ihre Anwendung vereinfacht, insbesondere wenn Sie Infragistics ASP.NET-Steuerelementen verwenden verwalten.  CSS- und HTML sind sehr leistungsfähig, jedoch können Sie nicht verwaltbar sind, und sowohl die Infragistics Produkte integrierten ASP.NET-Designs und skinning sowie anderen Frameworks versuchen Sie, besser verwalten, Komplexität und Ihre Nerven beibehalten.

Für die Zwecke freigegebenen Brutto Layout und Elemente hat ASP.NET Masterseiten ( msdn.microsoft.com/library/wtxbf3hh.aspx), die können Sie allgemeine übergeordnete-Master Layout und die Elemente mithilfe der Platzhalter für Inhalte für die Bereiche des Layouts kann variieren basierend auf bestimmten Ansichten definieren.  Masterseiten können geschachtelt werden, und Sie können mehrere Master (z. B. eine für Unternehmen, eine Anwendung, und sogar eine für MyAppDialog – die Art der Sache).  Es wirklich ein ziemlich gut und raffinierter Framework für die Unterstützung und vereinfacht die Implementierung und Wartung von einem Framework Design ’s können, und Ja, für MVC Lovers Sie Masterseiten es sowie.(Siehe msdn.microsoft.com/library/dd381412.aspx als Ausgangspunkt.)

Ein anderer Hinweis auf ASP.NET.  Sie können auch nutzen ASP.NET AJAX (und anderen AJAX-Technologien) im Wesentlichen ein Layout äußere, allgemeine verwalten und nur aktualisieren und Inhaltsbereiche ersetzen.  ASP.NET AJAX ist ein weiteres Tool, das in Verbindung mit Masterseiten verwendet werden kann, um Ihnen die Vorteile von AJAX beim nutzen die Vorteile von CSS und Masterseiten ein einheitliches Design-Framework.

SharePoint und anderen Content Management-Systemen

Schließlich als hauptsächlich auf ASP.NET bezieht, SharePoint und anderen Content Management-Systemen in der Regel hinausgehen die Grundlagen der im ASP.NET-Framework Sie erhalten, Seitenvorlagen, Inhaltstypen, bereitzustellen und ähnliche Funktionalität, die weitere Ihnen helfen können einrichten und Verwalten von ein konsistentes Design-Framework, Nondevelopers, in gewisser Weise das System während des gleichen Entwurf Frameworks intakt erweitern auch aktivieren.

WPF

WPF (Windows Presentation Foundation) ist im Grunde zwei Ebenen Gestaltung, Stile und-Vorlagen . (Siehe msdn.microsoft.com/library/ms745683.aspx.) Formatvorlagen sind im Wesentlichen eine Möglichkeit, um eine gemeinsame Gruppe von Eigenschaftenwerten zu gruppieren.  Vorlagen sind in zwei grundlegende Typen in WPF, Datenvorlagen und Steuerelementvorlagen.  Steuerelementvorlagen sind eine Möglichkeit, um das Aussehen und Verhalten von Steuerelementen, einschließlich Ihre grundlegende Struktur und Verhalten vollständig anpassen.  Steuerelementvorlagen werden häufig zusammen verwendet (z. B. Sie können eine Template-Eigenschaft in einem Stil für ein Steuerelement festgelegt) zum Anpassen der Erfahrungen, um einen Grad nicht wirklich durchführbar in früheren .NET UI-Technologien.Datenvorlagen sind eine sehr raffinierte Möglichkeit, eine gemeinsame Benutzeroberfläche Definition für ein Shape Daten freigeben, von dem ich bedeuten, dass ein Vorlage Daten interessiert sind, nur übereinstimmende Bindungen zu suchen und nicht, z. B., die die Datenquelle eines bestimmten Typs ist.

Da WPF ein Technologie grundsätzlich clientseitige ist als für Brutto Layout und gemeinsam genutzte Elemente ’s eine mehr oder weniger einfache Frage der Erstellen einer Ansicht (Fenster), gestalten es aus und ersetzt den Inhalt der Platzhalter zur Laufzeit (oft mit Instanzen von UserControl).  WPF unterstützt auch eine Implementierung des Musters Journal Navigationsbereich (siehe quince.infragistics.com/#/Main/ViewPattern$pattern=Journal+Navigation) und können Sie Bilder mit, verwenden um die Benutzerfreundlichkeit im Web navigieren zu anderen Seiten zu imitieren.  Dies kann eine effektive Möglichkeit zum Platzhalter-Ansatz implementieren sein.(Finden Sie weitere Informationen msdn.microsoft.com/library/ms750478.aspx).

WPF (und Silverlight) können auch ein CAB-ähnliche Framework aufgerufen, zusammengesetzten Anwendung Guidance (CAG, früher bekannt als Prism;Siehe msdn.microsoft.com/library/cc707819.aspx), die Sie, auf ähnliche Weise wie nutzen können zuvor beschriebenen für Windows Forms.  CAG unterstützt das Konzept der Bereiche, die als Container oder Platzhalter innerhalb einer größeren Layout verwendet werden kann, und die sowie geschachtelt sein können.Und wenn Sie in Blend (zu diesem Zeitpunkt unvermeidlich), können Sie ein gutes Bit Anleitungen organisieren Dinge Blend und Prism, die gut zusammenarbeiten johnpapa.net/silverlight/using-blend-with-prism-apps-in-silverlight-3/ suchen.

Verwenden Sie eine Kombination von Stilen, Vorlagen, Main Ansichten mit Platzhalter und Benutzersteuerelemente (oder Rahmen-Steuerelemente mit Seiten), in WPF können Sie ein Framework sehr verwaltbare Entwurf implementieren.

Silverlight

Da Silverlight ist für alle praktisch und purposes eine Teilmenge von WPF, und es ist ein angegebener Ziel von Microsoft für die 100 Prozent Quelle (XAML) Kompatibilität zwischen Silverlight und WPF versuchen, gilt die meisten gesagt zu WPF zu Silverlight, mit einigen Ausnahmen des Kurses.

unächst deaktiviert, es gibt kein formalen Konzept einer Seite in zentralen Silverlight – alles ist im Grunde ein Steuerelement oder ein Benutzersteuerelement.  In Version 3 fügte Microsoft eine Navigation-Framework Fügt eine Klasse Rahmen für das hosting “ Seiten eingeben und eine Seite-Klasse, die von UserControl abgeleitet ist und ein Title-Eigenschaft, die die Titelleiste der Browser automatisch aktualisiert wird.  Diese sind eine Implementierung von Journal Navigation, damit Sie den Web-Ansatz nachahmen können (ähnlich wie in WPF, aber als des Verfassens dieses Artikels die Implementierung ist nicht kompatiblen Quelle – finden Sie untermsdn.microsoft.com/library/cc838245.aspx). Anstatt zu Seiten navigieren, navigieren Sie zu Benutzersteuerelementen, die Seiten imitiert werden.  Aber die Kernkomponente von definieren gemeinsam Brutto Layout und Elemente mit Platzhaltern bleibt.Und wie mit WPF, Sie manuell die Ersetzung der visuellen Elemente in bestimmten Bereichen (Platzhalter) von der Benutzeroberfläche mit neue verwalten können – normalerweise Benutzersteuerelemente.

Als ist Stile und Vorlagen es ziemlich viel derselben Dokumentkomponente, mit der Einschränkung, dass Silverlight eine VisualStateManager, die das Steuerelement (oder Benutzersteuerelement) Entwicklern bereitstellt, semantische Statusoptionen und Statusgruppen definieren ermöglicht.  In den Kontext unsere Diskussion hier bedeutet dies hauptsächlich, dass VSM die Möglichkeit beeinflusst, Anpassen von Steuerelementvorlagen.  VisualStateManager für WPF ist momentan; im Toolkitfinden Sie unter windowsclient.net/wpf/wpf35/wpf-35sp1-toolkit-visual-state-manager-overview.aspx.

Darüber hinaus da Silverlight keine all-or-nothing Wahl ist, können Sie es in Verbindung mit ASP.NET und ASP.NET bedeutet, dass für eine allumfassende Entwurf Framework verwenden.Sie müssen lediglich die Integration von Gestaltung zwischen den standard (CSS + HTML) Webtechnologien mit der Verwendung von Stilen in Silverlight zu verwalten.  So dass beachten Wenn Sie diese Route.

Finden Sie weitere Informationen über die Unterschiede zwischen WPF- und Silverlight msdn.microsoft.com/library/cc903925 (VS.95).aspx.

SketchFlow

SketchFlow wurde als des Verfassens dieses Artikels nur veröffentlicht.  Während SketchFlow unterstützt, WPF und Silverlight (Obwohl ein SketchFlow-Projekt eine einzelne Technologie abzielt), hat einige eigene Ideen zur Verwaltung von Entwurf Framework.  Und da viele Entwickler es auf Prototyp für diese Technologien .NET verwenden, ich dachte er erwähnenswert.  SketchFlow an oberster Position diese beiden Technologien befindet, hat aber einige unterschiedliche Terminologie, nämlich Bildschirme und Komponenten Bildschirme.

Ein Bildschirm ist im Grunde wie klingt – ein Bildschirm angezeigt, die Personen zu navigieren.(Sie können visual Navigation Verbindungen zwischen Seiten in der SketchFlow-Zuordnung erstellen.)  Was diesem in der Regel bedeutet hat ein Bildschirm genug unterschiedliche Benutzeroberfläche, einen eigenen Lebenszyklus und Layout zu rechtfertigen.  Komponente Bildschirme sind im Wesentlichen eine einfache Möglichkeit für andere Bildschirme, Benutzersteuerelemente sehr ähnlich Bits von einem Bildschirm freigeben.(Tatsächlich ein Komponente-Bildschirm Benutzersteuerelemente im Code erstellt).

Während Teil der Punkt Prototypen, insbesondere frühen Prototypen ist, nicht über Dinge berücksichtigen wie Design-Frameworks, es ist ein Punkt an der Sie dies tun möchten.  Wenn Sie viel über Prototypen einer Seite oder zwei abrufen und weitere durchlaufen und verfeinern erwarten, müssen Sie über die allgemeine Bits zu Ihrem Prototyp überschaubarer Freigeben von nachzudenken starten.  Andererseits, obwohl eine Geschichte vorwärts aus SketchFlow Prototyp endgültige Implementierung ausführen, die nicht primäre Punkt der SketchFlow ’s vorhanden ist. 

Ihre Denken ein detaillierte Implementierung Entwurf Framework kann wahrscheinlich warten, bis Sie erstellen, starten, an welche Stelle Sie nutzen können einige oder viele der Komponente Bildschirme und sogar einige Formatvorlagen, Zustände (in den visuellen Zustand-Manager) und Verwandte Storyboards Wenn Sie oder der Designer die Mühe, definieren Sie in jedem einzelnen Detail aufrufen möchten.

Verwenden von allgemeine Steuerelementen

Zusätzlich zu Frameworks und Tools, mit denen Sie ein einheitliches Design Framework innerhalb und zwischen Ihren Anwendungen implementieren, Sie sollten außerdem überlegen Entwurf Framework Konsistenz hinsichtlich der anderen Frameworks Design wie Ihre Lösungen zuordnen.Dies ist, in denen Benutzeroberfläche Muster Hilfe können Sie auswählen und implementieren die am besten, am häufigsten Möglichkeiten Verwandte Probleme zu lösen.

Erneut, es scheint, die Entwickler unconsciously (oder nicht) haben diese alle zusammen durchgeführt, indem Sie gemeinsame Lösungen zu imitieren, die Endbenutzer (wie Excel und Outlook) bekannt sind und natürlich mithilfe der Steuerelemente, die im Feld.  Viele von uns don’t Sie überlegen, jedoch etwas kann für die Konsistenz von begrenzten Steuerelementsatz bereitgestellten bezeichnet werden.Wir müssen don’t zu viel zum, sagen, Implementieren einer Auswahl löschen unten Gedanken (Siehe (quince.infragistics.com/#/Main/ViewPattern$pattern=Drop+Down+Chooser), da wir, die im Feld.Auf ähnliche Weise Weitere komplexe jedoch bekannte Schnittstellen, die nicht in sind grundlegende Framework-Bibliotheken, können wir die Arbeit, die dritte gute Implementierungen für Elemente wie die OutlookBar die Multifunktionsleiste bereitstellen und so weiter nutzen.

Sie können diese allgemeinen Steuerelemente als eine Art gemeinsam verwendeten, universelle Entwurf Framework vorstellen, in den meisten (Geschäftsanwendungen) basieren, und sollten Sie das freigegebene Entwurf Framework nutzen diese Vertrautheit nutzen.  Einige haben bezeichnet, was intuitiv ist oft ist einfach nur was vertraut (Siehe, z. B. portal.acm.org/citation.cfm?id=584629), so vertraut BENUTZEROBERFLÄCHEN-Steuerelemente eine lange Möglichkeit in Richtung erhöhter Sicherheit intuitiv scheint Schnittstellen wechseln können.

Zur gleichen Zeit Bedenken Sie, die Sie noch, benötigen um Steuerelemente basierend auf den Anforderungen der Anwendung auswählen und nicht für unthinkingly ein vertraut Steuerelement gerade weil vertraut ist oder weil z. B. in Microsoft Office verwendet wird.  Es kann ohne sagen gehen, aber in der eiliges Dinge getan zu Meiner Meinung nach wir alle verwendete Steuerelemente wie folgt ’ve.

Eine Sache, die Ihnen helfen können, stellen solche Urteil-Aufrufe schnell ist eine gute Benutzeroberfläche und BENUTZERFUNKTIONALITÄT Muster Bibliothek wie Quince (quince.infragistics.com).Lesen die Problem, Lösung, Kontext und Begründung für die Muster – Sie ’re in der Regel ziemlich kurz und kann viel können Sie erkennen, ob ein bestimmtes Muster (die oft als Steuerelement implementiert wird) für den Kontext geeignet ist.Viele alternativen werden angeboten, und Sie können die Kennzeichnung verwenden, um andere möglichen alternativen untersuchen.

Zusammenfassung

Nun, dass Sie diese rasant Tour Aktivieren der .NET Funktionen in den verschiedenen .NET UI-Technologien hatten, Sie sollten möglicherweise anwenden und nutzen Sie Ihre (oder des Designers ’s) Anstrengungen, um ein einheitliches Framework definieren und machen es etwas, das verwaltbare genug, damit Sie während der Entwicklung verfeinern und zu durchlaufen und Vorstellungen, wie Sie die Anwendung in der Produktionsumgebung aufrechterhalten wird.