Entwerfen einer GUI

Question

Wie würden Sie als Entwickler mit wenig oder keiner künstlerischen Neigung eine GUI für eine Anwendung entwerfen? Insbesondere denke ich über Desktop-Apps nach, aber alles, was mit Web-Apps zu tun hat, ist ebenfalls willkommen. Ich finde es extrem schwierig, etwas zu gestalten, was sowohl ich als auch potentielle Benutzer als angenehm empfinden. Ich kann Farbschemata im Internet nachschlagen, aber woher weiß ich, wo ich Buttons/Textfelder/etc.

Update: Um zu verdeutlichen, ich meine nicht, welche Steuerelemente und solche zu verwenden. Gibt es da irgendwelche Richtlinien/Hinweise zu wann ich Buttons, Combos, Textboxen usw. brauche? Wie lange sollten sie sein und wo würde ich sie auf das Formular setzen?

Answer 1

Das erste, was Sie tun müssen, ist, aus Ihrem Entwickler-Point-of-View herauszukommen. Wir neigen dazu, in Form von Formularen, Steuerelementen, Schaltflächen, Listen, Rastern usw. zu denken. Dies führt uns zu Lösungen, die für den Benutzer nicht immer optimal sind.

Benutzer möchten nicht unsere Software verwenden. (außer wenn du Spiele programmierst) Sie wollen nur Dinge erledigen. Bei der Gestaltung von UI- und Benutzerinteraktionen ist es daher sinnvoll, von dort aus zu starten. Schreiben Sie auf, was ein Benutzer mit Ihrer Software machen möchte. Denken Sie darüber nach, wie ein Benutzer diese Dinge tun würde und was Ihre Anwendung tun könnte, um die Dinge einfacher zu machen.

Versuchen Sie, mit verschiedenen Tools zu arbeiten, die Sie zum Programmieren verwenden. Dadurch werden Sie wieder in UI-Widgets denken. Beginnen Sie mit einem Bleistift und einem Blatt Papier, um Dinge zu skizzieren, versuchen Sie auch, über das Verhalten, das Layout usw. nachzudenken. Wenn Sie ein klares Bild davon haben, was Sie aufbauen möchten, können Sie darüber nachdenken, wie es Ihnen geht werde es bauen. Das ist, wenn die Widgets, Schaltflächen und Seiten kommen.

Answer 2

Haben Sie http://msdn.microsoft.com/en-us/library/aa511258.aspx gelesen?

Oder Wikipedia-Artikel lesen: http://en.wikipedia.org/wiki/Human_interface_guidelines es enthält Links zu einigen HIG

Answer 3

Wenn Sie für den Desktop sind entwerfen, können Sie Leitlinien für die Betriebssystem-Schnittstelle finden, die helfen können.

Answer 4

Joel Spolsky hat einen ziemlich guten hohen Design-Tipps:

http://www.joelonsoftware.com/uibook/chapters/fog0000000057.html

Above, dass die größte Sache, nur etwas aus versucht, Mockups zu machen. Vielleicht erste auf dem Papier, aber irgendwann versuchen Sie einfach, eine GUI zusammenzustellen, ohne den Code dahinter anzuhängen. Sehen Sie, was Sie denken, probieren Sie einige Veränderungen aus, fragen Sie andere nach ihren Meinungen und experimentieren Sie einfach. Beste Design-Technik ist es, Feedback von Menschen zu bekommen, möglichst von der Zielgruppe.

Answer 5

Es ist nicht klar, ob Sie darüber sprechen, wie Sie ein gutes Dialogfenster erstellen oder ein kohärentes Erscheinungsbild für eine große Anwendung erstellen.

Eine ziemlich gute Referenz für die Gestaltung einer effektiven und klaren Benutzeroberfläche ist User Interface Design for Programmers von ... warten Sie auf ... Joel Spolsky.

Answer 6

Heh. Lesen Sie dazu: http://www.codinghorror.com/blog/archives/000734.html

Answer 7

Dies kann hilfreich sein: best-practices-principles-for-gui-design

Answer 8

Man denke nur an die Benutzer aus der Perspektive der Anwendung sind. Gibt es eine Art? Mehr? Dann denken Sie für jede Art von Benutzer über die großen übergreifenden Dinge nach, die sie erreichen wollen. Präsentieren Sie ihnen diese allgemeinen Entscheidungen, und gehen Sie dann von dort in passendere Schnittstellen für jede Aufgabe.

Schließlich, wenn Sie eine große Anzahl von Schritten haben, ist ein Assistent nett, weil Sie jeden Schritt einzeln nacheinander validieren können. Dies ist offensichtlich in einer nativen App, aber sehr praktisch im Internet.

Answer 9

Oben auf alles andere, was auf dieser Seite gesagt wurde, würde ich hinzufügen, dass je weniger Sie eine GUI bemerken, desto besser ist es.

Ich meine, wenn die Benutzerschnittstelle nicht vom Benutzer wahrgenommen wird, ist es, weil der Benutzer seine Arbeit erledigt bekommt. Die Benutzer bemerken die GUI, wenn (a) sie schön ist (denke Apple) oder (b) sie ist beschissen (denke, was für eine GUI du benutzt hast, die dich frustriert hat).

Answer 10

Ich habe nie GUI-Design als eine grundlegende künstlerische Aktivität gesehen. Es ist zwar richtig, dass eine gut gestaltete Benutzeroberfläche mit künstlerischen Elementen erweitert werden kann, aber das Design der zugrunde liegenden Benutzeroberfläche ist wirklich ein technischer Aufwand. Sicherlich ist ein GUI-Spezialist in größeren Projekten eine natürliche Spezialisierung, genau wie Build-Spezialist usw. Aber ich denke, dass es der seltene Software-Ingenieur ist, der keine effektive GUI erstellen kann - wenn ihm die Zeit und die Ressourcen dafür gegeben werden.

Die meisten von uns haben das meiste von dem gelernt, was wir über Bausysteme wissen, indem wir das Gute im bestehenden System erkennen und dann aufrollen und innovieren und dabei bleiben, bis es funktioniert. Die GUI ist keine Ausnahme.

Answer 11

Die Anwendungen, die ich entwickelt habe, werden tausende Male pro Stunde angeklickt, also läuft alles auf Effizienz. Ich mag es als eine Art von Währung, mit der Sie viele nützliche Axiome generieren können:

Wenn es ein Klick speichert, +1.

Wenn es ein Klick kostet, -1.

Wenn der Benutzer Zeit verschwenden herauszufinden, wie es funktioniert, -1. (Die meisten benutzerdefinierten UI-Elemente)

Wenn es grundsätzlich intuitiv ist, +1. (Coverflow)

Wenn es erstmaligen Benutzern einen Klick speichert, +1. (Wizards)

Wenn es langfristige Benutzer einen Klick kostet, -1. (Wizards)

(also warum Sie sicherstellen, müssen Sie Ihren Tastatur-Shortcuts und Registerkarte Befehle sinnvoll.)

Etc.

Etc.

Alles subjektiv gewichtet wird und ausgezählt und Sie Kompromiss wo du musst. Letztendlich könnte es eine naive Philosophie sein, aber sie hat mir ziemlich gut gedient. Extrapolieren Sie, wie Sie es für richtig halten.

Answer 12

Es gibt ein paar UI-Muster auf the UI patterns site präsentiert, die Sie

Allgemeinen nützlich sein können, wenn Sie Formular entwerfen für Fenster, um die verschiedenen Microsoft guidelines folgen.

Ein Prinzip, das ich bedenke, ist die Verwendung existierender Verhaltensmuster (Doppelklick zum Ausführen/Aktivieren eines Gegenstandes usw.), da die Leute diese bereits kennen.