In diesem Artikel wird die Schnittstelle von Code und Design untersucht und konzentriert sich darauf, wie Designer grundlegende Kenntnisse des Codierungskenntnisses nutzen k?nnen, um ihren Arbeitsablauf zu verbessern und die Kommunikation mit Entwicklern zu verbessern. Der Autor, ein UX -Designer mit einer gewissen Codierungserfahrung, argumentiert, dass selbst ein rudiment?res Verst?ndnis von Code dem Entwurfsprozess erheblich zugute kommt.

Der Autor wird zwar nicht dafür eingesetzt, dass Designer Entwickler werden, und betont den Wert des "Spielens mit Code" - experimentiert mit CSS und HTML, um Designs zu verfeinern und die Browserkompatibilit?t zu gew?hrleisten. Dieser Ansatz schl?gt vor, überbrücken die h?ufig signifikante Kluft zwischen Design und Entwicklung.

Der typische Konstruktionsprozess des Autors umfasst das Skizzieren, Drahtfestern (mithilfe von Tools wie Axure, Adobe XD, Invision Studio, Figma und Skizze) und das Erstellen visueller Assets. Sie haben jedoch festgestellt, dass die direkte Interaktion mit Code die Treue des Designs verbessert und bei der übergabe Missverst?ndnisse verringert.

Devtools: Der Spielplatz eines Designers

Der Autor hebt Browser Devtools als unsch?tzbare Ressource hervor. Mit DeVtools k?nnen Designer den Website-Code in Echtzeit manipulieren und Farbgenauigkeit, Schriftlehrbarkeit, Reaktionsf?higkeit über Ger?te und Interaktionselemente testen, ohne eine Entwicklungsumgebung zu ben?tigen. ?nderungen sind vorübergehend und machen es zu einem risikofreien Experimentierraum. Der Autor stellt die jüngsten Verbesserungen in Devtools fest, einschlie?lich Firefox's Shape Path Editor. Eine pers?nliche Anekdote zeigt, wie Devtools es dem Autor erm?glichte, die Auswirkungen von Design?nderungen auf eine komplexe Webanwendung schnell zu visualisieren.

Chromerweiterungen: Verbesserung der Devtools -Funktionen

Der Autor empfiehlt zwei Chromverl?ngerungen, um die Interaktion mit der Designcode weiter zu verbessern:

• User CSS: Diese Erweiterung spart Devtools CSS -?nderungen, sodass Designer ihre ?nderungen erneut prüfen und teilen k?nnen. Der Autor beschreibt seine Verwendung in Entwurfsbewertungen und erstellt Demonstrationen vorgeschlagener ?nderungen. Der integrierte Code-Editor und ein/ausschalter werden als besonders nützliche Funktionen hervorgehoben.

• Webüberschreibungen: Diese umfassendere Erweiterung erm?glicht das überschreiben von HTML, CSS und JavaScript, wodurch eine gr??ere Flexibilit?t für das Erstellen von Prototypen und das Testen verschiedener Designszenarien bietet. Der Autor demonstriert seine Verwendung beim Hinzufügen von HTML -Elementen, zum Bearbeiten von CSS und beim Injektion von JavaScript für dynamische Layout -Tests.

Diese Erweiterungen erm?glichen eine schnelle Prototypierung und Erforschung zahlreicher Entwurfsoptionen, die die F?higkeiten herk?mmlicher Designwerkzeuge überschreiten. Der Autor betont den Wert von Testentwürfen direkt im Browser, um die Genauigkeit zu gew?hrleisten und übersetzungsfragen w?hrend der Entwicklung zu vermeiden.

Wichtige Imbissbuden und Schlussfolgerung

Der Autor kommt zu dem Schluss, dass die Einbeziehung von Devtools und Browser -Erweiterungen in ihren Workflow ihre Entwürfe erheblich verbessert und eine bessere Zusammenarbeit mit Entwicklern gef?rdert hat. Die F?higkeit, schnelle Prototypen mithilfe des tats?chlichen Codes zu erstellen, verbessert die Kommunikation und erm?glicht ein tieferes Verst?ndnis des Entwicklungsprozesses. Der Autor ermutigt Designer, diese Tools zu erkunden und ihre eigenen Erfahrungen zu teilen.

Das obige ist der detaillierte Inhalt vonVerwenden von Devtools zur Verbesserung des UX -Designs zum Entwicklungsprozess. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!