Allgemeine Web-UI-Stile

91

Ich muss einem meiner Kunden in den folgenden Tagen einen Prototyp einer Web-App präsentieren. Ich bin nicht so gut in CSS und am schlimmsten bin ich fast nie zufrieden mit den Ergebnissen, die ich erhalte.

Das Codieren der Geschäftslogik stellt für mich keine Herausforderung dar. Das UI-Design nimmt jedoch mehr als 80% meiner Zeit in Anspruch. Ich brauche nichts Atemberaubendes, nur eine saubere, schöne und präsentable Umgebung, ein Beispiel:

Alt-Text

Dies ist ein wiederkehrendes Problem, das ich hatte. Ich wünschte, die Entwicklung der Web-Benutzeroberfläche könnte einen weniger nackten Standardstil haben. Ein Ansatz ähnlich dem von Visual Studio oder iPhone SDK wäre für mich sehr nützlich.

Das obige Modell, das mit Balsamiq Mockups erstellt wurde, ist ein großartiges Beispiel. Alle gängigen "Komponenten" stehen zur Verfügung, und das Beste ist: Es gibt nur einen gut aussehenden Stil zur Auswahl.

Gibt es so etwas für das Web? Ein neutrales, aber nettes CSS- oder Javascript-UI-Framework?


Bisherige Optionen:

Ich bin daran interessiert zu wissen, ob es nur CSS-UI-Frameworks gibt.

Ich fand diese Seite mit einer sehr schönen Liste von Web-UI-Bibliotheken , aber die meisten (zumindest die guten) scheinen spezifisch für Java zu sein. Gibt es in reinem CSS oder JS gleich gute Alternativen?

PS: Ich interessiere mich nicht für AJAX, Effekte, Verhaltensweisen und so weiter ... mein Hauptanliegen (nur) ist der Stil.


Vielen Dank für alle Vorschläge an alle!

Nach einer sehr sorgfältigen Prüfung aller vorgeschlagenen UI-Bibliotheken bin ich zu dem Schluss gekommen, dass ExtJS und Qooxdoo diejenigen sind, die meinen Anforderungen am besten entsprechen. Die jQuery-Benutzeroberfläche scheint vielversprechend, bietet jedoch nur eine reduzierte Anzahl von Elementen.

In Bezug auf reine CSS-Bibliotheken habe ich BlueTrip / BluePrint und die von Tambler vorgeschlagenen Themen als die besten befunden. Abgesehen davon scheinen Flex und Napkee auch eine Erkundung wert zu sein.

Zeit, ExtJS jetzt zu lernen! =)

Alix Axel
quelle
6
Bemerkenswert ist, dass jQuery-UI einen netten Theme-Designer namens "Theme Roller" hat, der die Dinge beschleunigt: jqueryui.com/themeroller
Nick Craver

Antworten:

7

Ich kann nicht glauben, dass niemand erwähnt hat:

http://www.extjs.com/

Es ist ein kommerzielles js-Framework, aber ziemlich erschwinglich und macht das Zusammenstellen einer schönen Benutzeroberfläche zum Kinderspiel. Es gibt einen viel vollständigeren Satz von Elementen als jqueryui, und es wurde entwickelt, um eine ganze App zu erstellen. Ich habe nur ein bisschen damit gespielt, aber ich liebe es bis jetzt wirklich. Kostenlos für private Nutzung.

Wenn Sie wirklich ein Gefühl für eine vollständige Benutzeroberfläche bekommen möchten, die mit EXT entwickelt wurde, versuchen Sie diese URL:

http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/feed-viewer/feed-viewer.html

Erik
quelle
@Erik: Danke für den Vorschlag. Kennen Sie Bücher / Tutorials, die Sie empfehlen können? Ich habe ein kleines Problem damit, herauszufinden, wie ich ExtJS in eine typische PHP MVC-Anwendung integrieren soll.
Alix Axel
Der beste Ausgangspunkt sind die von EXT angebotenen Tutorials: extjs.com/learn/Tutorials Was die Integration in Ihr PHP-Framework angeht, kann ich nicht sagen - aber dies sind Ihre HTML-Seiten, also würden Sie sie so integrieren, wie Sie es möchten Ich würde jede andere Seite integrieren, nicht wahr?
Erik
11

Eine Kombination aus 960 g für das Layout und jQuery-UI für das Styling ist wahrscheinlich das, wonach Sie suchen .

Sie können auch das Blueprint- CSS-Framework anstelle von 960 g in Betracht ziehen.

Shane O'Grady
quelle
Sie meinen das jQuery UI JS-Framework oder das jQuery UI CSS-Framework?
Alix Axel
1
Entschuldigung für die Verwirrung, ich meinte er jQuery UI CSS Framework für das Styling. Es gibt jedoch keinen Grund, warum Sie das JS-Widgets-Framework nicht auch einbeziehen könnten.
Shane O'Grady
Danke, ich werde das untersuchen. =)
Alix Axel
7

Was ist mit Dojo und Dijit ?

Dijit ist eine schnelle Möglichkeit, Widgets und Elemente zu erstellen. Es enthält außerdem 3 Standardthemen, die leicht zu ändern sind.

Eine gute Liste verschiedener Widgets hier

Peirix
quelle
Dijit scheint das zu sein, was ich brauche, aber ich kann nicht auf die Seite zugreifen - ich weiß nicht warum.
Alix Axel
Auf welche Seite können Sie nicht zugreifen?
Peirix
Dijit, aber es funktioniert jetzt. =) Ich werde es mir genauer ansehen, sobald ich mich einem Computer nähere (ich surfe gerade mit einem Telefon).
Alix Axel
6

Arbeiten Sie mit jemandem zusammen, der sich auf UI-Design spezialisiert hat.

Wenn Sie besser mit Geschäftslogik umgehen können, ist es besser, Ihre Zeit ausschließlich damit zu verbringen, Geschäftslogik zu codieren, damit Sie sie beherrschen können. Dazu müssen Sie lernen, wie Sie mit anderen Personen kommunizieren, die sich bei der Präsentation auszeichnen. ( XML und JSON sind übliche Mittel)

Geschäftslogik und Präsentation sind sehr unterschiedlich. Es ist ziemlich schwierig, ein System zu entwerfen, das nicht nur gut aussieht, sondern auch intuitiv und einfach zu bedienen ist. Ebenso schwierig und zeitaufwändig wie die Einrichtung des Innenlebens einer komplexen Anwendung.

Eine gute Schnittstelle ist nicht so einfach wie das Einfügen eines CSS-Frameworks.

Ich betrachte mich als einen "kreativeren" Programmierer, der sich durch hervorragende Präsentation auszeichnet. Ich hatte das Glück, den Weg mit jemandem zu kreuzen, der erstens ... sehr motiviert und zweitens sehr gut in "Geschäftslogik" war. Er hatte viel mehr Erfahrung in der Planung und Implementierung komplexer Systeme, während ich mich hauptsächlich auf das Interface-Design konzentrierte.

Wenn Sie produktiver mit Systemarchitektur, Planung, Entwicklung usw. arbeiten, sollten Sie sich in diese Richtung bewegen. Während Solo-Entwicklungsprojekte ziemlich erfüllend sein können, halte ich es für ineffizient. Es ist sehr selten, dass jemand über Fähigkeiten verfügt, um Anwendungen auf höchstem Niveau allein zu entwickeln.

Die Herausforderung besteht darin, jemanden zu finden, mit dem Sie gut zusammenarbeiten.

Derek Adair
quelle
4

Schauen Sie sich das Google Web Toolkit an . Es hat ein ziemlich sauberes Standard-Aussehen. Sie haben Beispiele . Das Showcase- Beispiel zeigt insbesondere alle verfügbaren Widgets und das CSS-Design, mit dem das Erscheinungsbild erzielt wurde.

Abtin Forouzandeh
quelle
1
GWT-Benutzeroberflächen sind in Java geschrieben. GWT nimmt dann dieses Java und wandelt es in reines HTML / Javascript um.
Abtin Forouzandeh
3

Es gibt einige Frameworks, die auf (G) UI-Design abzielen. Qooxdoo , JQuery UI und MochaUI sind nur einige davon (obwohl das letzte eher ein Proof-of-Concept als ein verwendbares Framework ist). Diese Frameworks bieten normalerweise eine Vielzahl von JS-basierten Elementen (Formularelemente wie Eingabefelder und Senden-Schaltflächen, aber auch andere Elemente wie Registerkarten). Es liegt jedoch weiterhin an Ihnen, diese Elemente zu positionieren und möglicherweise nach Ihren Wünschen zu gestalten.

Vielleicht kann das Kennenlernen eines CSS-Frameworks (wie 960GS ) die oben genannten JS UI-Frameworks ergänzen.

(Als persönlicher Haftungsausschluss; ich habe sehr wenig Erfahrung mit einem der oben genannten Frameworks. Aber ich bin sicher, dass entweder Google oder SO Antworten liefern können, die ich nicht kann.)

Duroth
quelle
1
960.gs macht wirklich nicht viel Styling - dafür möchten Sie so etwas wie Bluetrip ( bluetrip.org ). 960.gs bietet wirklich nur ein gitterbasiertes Layout.
Dominic Rodger
Ich habe einen Blick in die von Ihnen vorgeschlagenen Frameworks geworfen. Qooxdoo scheint zu kompliziert zu sein (alles scheint über Javascript definiert zu sein - sogar Formulareingaben usw.). MochaUI hat eine wirklich schöne Oberfläche mit sehr coolen neutralen Farben, die ich nicht gesehen habe der Quellcode davon scheint aber auch eher begrenzt zu sein (viele elementare Stile fehlen). Die jQuery-Benutzeroberfläche scheint die beste Option zu sein. 960.gs ist nett, aber wie Dominic sagte, ist es nicht für das Styling.
Alix Axel
3

Dies hilft Ihnen bei Ihrem aktuellen Projekt nicht weiter, aber es lohnt sich, es für zukünftige Projekte in Betracht zu ziehen. Nachdem ich viele Jahre damit verbracht hatte, GUI-Anwendungen in HTML 4 zu erstellen und ständig gegen die Einschränkungen von CSS und HTML zu kämpfen, dachte ich, ich würde Adobe Flex ausprobieren. Was für eine Verbesserung!

Anstatt ein Seitensteuerelement oder ein Datenraster mit Registerkarten zu fälschen, kann Ihr Markup mit Flex oder Silverlight einfach ein Steuerelement oder ein Datenraster mit Registerkarten angeben. Und die Frameworks werden mit Standardstilen geliefert, die langweilig, aber überhaupt nicht schlecht sind. Ich sage nicht, dass diese HTML vollständig ersetzen, aber wenn Sie Widgets und GUI-Layout benötigen, sind sie meiner Meinung nach eine viel bessere Alternative.

Jacob
quelle
Flex ist wirklich ein großartiges Tool, aber heutzutage ist die Welt in Richtung HTML 5 und Flex hat viele Probleme mit Größe und Mehrsprachigkeit, wo Javascript gewinnt und was Sie über den Preis denken, aber ich denke immer noch, dass Flex ein großartiges Tool ist
tawfekov
Ich hoffe wirklich, dass aus dem Standardprozess eine reine HTML / Javascript / CSS-Lösung für Anwendungen hervorgeht.
Jacob
Flex mag ziemlich sperrig und nicht so suchmaschinenfreundlich sein ... aber das System ist meiner Meinung nach unschlagbar. Ich bin kein "leitender" Webentwickler, aber ich sehe wirklich den Vorteil, innerhalb des Flex-Frameworks zu arbeiten. Adobe hat ein wirklich gutes System. Nur in der Lage zu sein, für Desktop / Web / AND Mobile mit EINEM Framework / standardisierten Übermittlungsmitteln zu codieren, ist unbeschreiblich wertvoll.
Derek Adair
2

Drahtmodellmodelle wie dieses sind ein hervorragender Einstieg.

Nachdem ich die meisten der hier diskutierten UI-Framewroks verwendet habe, möchte ich Sie aus folgenden Gründen in Richtung jQueryUi lenken:

  1. Das jQueryUI CSS-Framework kümmert sich für Sie um das konsistente und cool aussehende CSS (es ist wirklich einfach - machen Sie einfach ein Markup und wenden Sie die Klassen an).

  2. jQueryUI verfügt über Tabcontrol und bietet zahlreiche schnelle und einfache Möglichkeiten zum Formen von Formularen.

Reich
quelle
Von all den vorgeschlagenen Optionen, die ich eher zu ExtJS neige, haben Sie es jemals verwendet? Wie vergleichen Sie es mit der jQuery-Benutzeroberfläche?
Alix Axel
ExtJS ist sehr ausgereift und vollständig. Beachten Sie, dass es sich um eine GPL mit doppelter Lizenz und eine kommerzielle handelt. Es ist wirklich eine Widget-Oberfläche, die auf sehr umfangreiche Benutzeroberflächen abzielt. Wenn Sie also etwas "korporativeres" und weniger "freundliches" wollen, ist dies überhaupt keine schlechte Wahl. Das einzige ist, dass es eine gewisse Lernkurve hat, es ist wirklich ein ganzer Rahmen für sich. Eher wie GUI-Programmierung als Web. Viel Glück
Rich
2

Wenn Sie auf moderne Browser ohne IE abzielen, sollten Sie sich Sproutcore ansehen . Für Modelle verwende ich Spottdrossel .

Pthulin
quelle
Danke, Spottdrossel hat mir wirklich den Tag gemacht! Was Sproutcore betrifft, scheint es nett zu sein, aber einige der Demos sehen in Firefox 3.5.7 irgendwie fehlerhaft aus.
Alix Axel
2

Ein relativ neues PHP-Framework, das speziell für die Entwicklung von UI-fokussierter Software entwickelt wurde. Elemente, die Sie hier haben, einschließlich Registerkarten, Filter und Raster, sind enthalten und benötigen ungefähr 20 Codezeilen, um sie zu implementieren.

http://agiletoolkit.org/

romaninsh
quelle
1

Haben Sie Axure ausprobiert ? Es ist ein Tool zum schnellen Erstellen von Drahtmodellen, Prototypen und Spezifikationen für Anwendungen und Websites.

Es funktioniert ähnlich wie Balsamiq, aber Sie können Ihre Wireframes / Prototypen als HTML, CSS und Javascript exportieren.

Sie können dies dann auf einen Server hochladen oder als Arbeitsbeispiel auf Ihrem Computer ausführen.

Sie können Formulare, Links, Registerkarten, Rollover und Javascript-Effekte erstellen.

Jonny Haynes
quelle
Danke, Axure scheint nett zu sein, aber es ist nicht das, wonach ich suche.
Alix Axel
1

Wenn Sie bereits Balsamico-Modelle für Ihre Prototypen verwenden, sollten Sie Napkee in Betracht ziehen . Um die Website zu zitieren: "Mit Napkee können Sie Balsamiq-Modelle auf Knopfdruck in HTML / CSS / JS und Adobe Flex 3 exportieren."

Paul
quelle
1

Ich bin vor einiger Zeit darauf gestoßen und konnte nichts finden, also habe ich es zum Anlass genommen, CSS zu lernen. Aber seitdem scheinen große Fortschritte in Richtung dieses Themas gemacht worden zu sein.

  • Zusammenfassend gibt es eine Wikipedia-Seite .
  • Es gibt yaml-css , das yaml nimmt und es in css verwandelt
  • Es gibt eine Grundlinie , die jedoch einige CSS-Kenntnisse voraussetzt.
  • Ich würde auch vorschlagen, sich Adobe Dreamweaver anzusehen . Sie haben viele Tools zur CSS- und Stilgenerierung, die sehr lesbaren und w3c-kompatiblen Code erzeugen.

Ich hoffe das hilft.

icco
quelle
1

Eine Kombination von 960gs für Layout- und jQuery-UI- oder Jquery-Tools ist großartig. Ich verwende sie fast in jedem Projekt, aber ich möchte sie zu http://easyframework.com/ hinzufügen, obwohl sie nicht geschäftsfreundlich ist seine Lizenz, aber ich mag es

tawfekov
quelle
Schauen Sie sich unbedingt cufon cufon.shoqolate.com/generate an, wenn Sie an Typografie interessiert sind
tawfekov
1

Ich habe kürzlich eine schöne Website namens iplotz.com entdeckt, auf der Sie online ein Modell Ihrer Anwendung / Website / Ihres Projekts erstellen können, ohne etwas zu installieren. Es verfügt außerdem über die meisten gängigen Steuerelemente sowie über viel mehr Funktionen zum Verwalten des gesamten Projekts und zum Online-Teilen mit anderen.

Ich muss zugeben, ich habe es noch nicht selbst ausprobiert, aber ich habe es mir ein bisschen angesehen und es scheint ziemlich cool zu sein. Ich werde es wahrscheinlich früh genug benutzen.

gillyb
quelle
Es ist eine sehr schöne Alternative zu Balsamiq, mein Browser ist ein sehr langsamer Geldautomat, aber auf den ersten Blick scheint er das Geld wert zu sein, danke.
Alix Axel
0

Sass scheint das Potenzial zu haben, einige CSS-Kopfschmerzen zu lindern.

Terrance
quelle
0

Ich möchte Bootstrap hinzufügen , das intuitive und leistungsstarke Front-End-Framework für eine schnellere und einfachere Webentwicklung.

Emilio Gort
quelle
0

Ich mag RocketCSS . Schönes, sauberes Design, probieren Sie es aus.

Rahul Khosla
quelle