Eine ausführliche Diskussion zur Detailanalyse im Webdesign

Bei der Designarbeit höre ich oft, dass an der Überprüfung beteiligte Designer oder einige Führungskräfte sagen, dass der Designentwurf nicht detailliert genug sei. Designer fühlen sich manchmal gekränkt: „Ich habe es bereits bis auf die Pixelebene verfeinert, warum sagen Sie, dass die Details nicht ausreichen? Was sind Details?“ In diesem Artikel wird anhand eines konkreten Beispiels mein Verständnis von Designdetails beschrieben.
Lassen Sie uns zunächst über die Designdetails sprechen. Tatsächlich ist dies ein sehr weit gefasstes Konzept. Wenn eine Designarbeit erfolgreich ist, müssen die Details vorhanden sein, aber Details beziehen sich nicht nur auf kleine Dinge wie die Ausrichtung auf Pixelebene usw., sondern umfassen auch: Wenn dieses Formular hier nicht verwendet wird, wäre es besser, ein wenig Textur oder Struktur hinzuzufügen, ob es auf das Gesamtdesign abgestimmt ist, ob das Licht- und Schattenverhältnis mit dem gesamten Symbol oder der gesamten Benutzeroberfläche übereinstimmt usw.
Wenn Sie an den Details des Designs arbeiten, müssen Sie bescheiden und dürfen nicht ungeduldig sein. Auch wenn es sich um einen sehr kleinen Punkt handelt, müssen Sie mehr darüber nachdenken, wie Sie diesen Punkt besser mit dem Temperament der gesamten Designarbeit in Einklang bringen können. Wenn Sie sicher sind, können Sie mit der Umsetzung beginnen. Zeichnen Sie nicht einfach ein paar Striche, weil der Arbeitsaufwand gering und technisch nicht schwierig ist, und überarbeiten Sie es dann bei wiederholten Durchsichten. Dies wird wahrscheinlich mehr Zeit in Anspruch nehmen und nicht den gewünschten Effekt erzielen. Als Nächstes werde ich anhand eines bestimmten Designfalls im Detail erklären, was Designdetails sind und wie man im Designprozess gute Arbeit bei Designdetails leistet.
Es besteht die Anforderung, dass auf der Benutzeroberfläche ein Popup-Fenster vorhanden ist, wie in Abbildung 1 dargestellt:
Detaillierte Analyse im Design 123WORDPRESS.COM

Detaillierte Analyse im Design 123WORDPRESS.COM

Abbildung 1 Entwurf Um die neuen Funktionen des Produkts anzupassen, müssen wir diesem Popup-Fenster einen kleinen Greifer hinzufügen, damit wir das Popup-Fenster ziehen können. Der Designer muss einige Änderungen am Popup-Fenster vornehmen, damit es aussieht, als könne man es ziehen.
Die Anforderungen sind eigentlich sehr einfach und es gibt viele vorgefertigte Beispiele, auf die man zurückgreifen kann. Wenn Sie ein Designer mit etwas Erfahrung sind, müssen Sie grundsätzlich nicht nach Referenzen suchen und können in nur wenigen Minuten einen Griff zeichnen. Zur Veranschaulichung des gesamten Designanforderungsprozesses finden Sie hier einige Referenzdiagramme, wie in Abbildung 2 dargestellt.

Abbildung 2: Referenz zum Greifen der Hand. Im Vergleich zu bestehender, ausgereifterer Software fügt jeder dem greifbaren Teil konkave und konvexe Partikel hinzu, wodurch der Eindruck entsteht, als ob dort eine große Reibung herrscht, um anzuzeigen, dass dieser Bereich gegriffen und gezogen werden kann. Wir können also einfach dieser Regel folgen. Da der verschiebbare Teil, den wir bearbeiten müssen, die Kante und nicht die Ecke ist, können wir dies tun, indem wir horizontale Linien hinzufügen. OK, verfeinern wir es auf Pixelebene, um diese Anforderung zu erfüllen.

Abbildung 3: Design-Rendering Der Designentwurf entstand sehr schnell und wir können auch hineinzoomen, um die Details zu sehen.

Abbildung 4: Der Effekt der Designdarstellung ist bei einer Vergrößerung von 400 % deutlich zu erkennen. Dies ist eine mit Bleistift gezeichnete 3-Pixel-Linie, der dann eine Projektion hinzugefügt wird. Lassen Sie uns hineinzoomen und einen Blick darauf werfen.

Abbildung 5 Der Effekt des Zoomens auf 1600 % ist jetzt ziemlich detailliert, oder? Der drei Pixel hohen Grafik werden Glanzlichter, Schatten und Übergänge hinzugefügt. Ist das nicht eine gelungene Detailarbeit? Nun, auf dem vergrößerten Bild scheint es kein Problem zu geben. Wenn wir uns jedoch die gesamte Benutzeroberfläche noch einmal ansehen, haben wir plötzlich das Gefühl, dass es etwas „an Details mangelt“. Was ist los?
Wir haben es offensichtlich bereits auf Pixelebene verfeinert, warum fühlen wir uns also immer noch unwohl? Wenn Sie genau darüber nachdenken, ist es wahrscheinlich so: Die Elemente dieser Schnittstelle sind alle abgerundet, einschließlich der Projektion, und die Ecken weisen leichte Übergänge auf, aber unser Griffteil ist direkt mit Pixeln gezeichnet, sodass es einige Probleme mit dem Temperament selbst gibt. Aber können wir dafür sorgen, dass es sich bei einer Höhe von drei Pixeln abgerundet anfühlt? Das ist tatsächlich möglich.
Überlegen Sie gut, was besser wäre. Da diese Anforderung zum fortlaufenden Design gehört, ist es notwendig, zunächst die Designideen der vorhandenen Schnittstelle zu verstehen. Die Benutzeroberfläche ist im skeuomorphen Stil gehalten, wobei die Oberseite leicht erhöht ist, sodass sich an der oberen Kante eine ein Pixel große Hervorhebung befindet, gefolgt von Eigenschatten. Auch die abgerundeten Ecken sind sehr deutlich zu erkennen. Was wir also tun müssen, ist, einen realistischen, abgerundeten Griff zu schaffen. Um den Griffbereich etwas deutlicher hervorzuheben, können wir noch etwas Grundfarbe hinzufügen.
Okay, schauen wir uns zuerst den fertigen Entwurf an.

Abbildung 6: Das endgültige Design sieht jetzt zuverlässiger aus. Anschließend werden wir uns die „detaillierte“ Implementierung ansehen.

Abbildung 7 400% Vergrößerungseffektdiagramm

Abbildung 8 Schematische Darstellung der Implementierung jedes Elements. Tatsächlich haben wir im ersten Entwurf auf die meisten Dinge geachtet, sie aber noch weiter verfeinert, indem wir Pfade zum Umreißen abgerundeter Winkel verwendet und in Photoshop-Ebenenstilen Abschrägungsprägung und Innenglanz verwendet haben, um die Textur der Vorsprünge selbst zu simulieren, anstatt sie mit Pixeln starr zu umreißen. Die Highlight-Ebene wurde verfeinert, in der Mitte hell und auf beiden Seiten dunkler. Die Projektion verwendet außerdem zwei Projektionsebenen und externes Leuchten, um einen realistischeren Projektionseffekt zu simulieren. Was die neu hinzugefügte Hintergrundfarbe betrifft, so muss sie, da sie an die Schnittstelle angehängt ist, der Textur der Schnittstelle selbst entsprechen. Auf der obersten Ebene gibt es eine Pixelhervorhebung, und dann gibt es einen Schatten in dem Bereich und so weiter.
Zu diesem Zeitpunkt ist die Detailoptimierung der Benutzeroberfläche fast abgeschlossen. Zusammenfassend lässt sich sagen, dass sich die sogenannten Details auf einer Ebene darauf beziehen, ob die Details auf Pixelebene in dieser Designarbeit mit Sorgfalt ausgeführt wurden. Auf einer anderen Ebene schauen wir nach der Verfeinerung auf Pixelebene zurück, um zu sehen, ob die verfeinerten Teile mit dem Temperament der gesamten Arbeit übereinstimmen. Von diesen beiden Ebenen ist die zweite eigentlich wichtiger, wird jedoch häufig übersehen. Wenn ein Designer an einem Werk arbeitet, muss er oder sie immer auf die Beziehung zwischen Details und dem Ganzen achten. Details dienen dem Ganzen, daher ist es notwendig, die Details auf der Grundlage eines Verständnisses des Ganzen zu vertiefen.
Das Obige ist mein persönliches Verständnis der Designdetails. Wenn Sie Kommentare oder Vorschläge haben, können Sie diese gerne diskutieren.

<<: So verwenden Sie gespeicherte Prozeduren in MySQL, um schnell 1 Million Datensätze zu generieren

>>: Verwenden Sie Typescript-Konfigurationsschritte in Vue

Eine ausführliche Diskussion zur Detailanalyse im Webdesign

Zusammenfassung der Vue3-Slot-Nutzung

Wie lädt Vue Dateien mit unterschiedlichem Ursprung basierend auf der URL herunter?

Spezifische Verwendungsanweisungen für MySQL-Joins

Detaillierte Schritte zur Installation von Docker 1.8 auf CentOS 7

So erstellen Sie einen SVN-Server unter Linux

Detaillierte Erklärung zur Verwendung von Rastereigenschaften in CSS

Grafisches Tutorial zum Herunterladen und Installieren von MySQL 5.7 und höher

MySQL verwendet mysqldump + binlog, um die Prinzipanalyse der gelöschten Datenbank vollständig wiederherzustellen

Eine kurze Erläuterung zu Leerzeichen und Leerzeilen im HTML-Code

Detaillierte Erläuterung der Routing-Parameterübergabe und der komponentenübergreifenden Parameterübergabe in Vue

Artikel empfehlen

Detaillierte Erklärung zum virtuellen Javascript-DOM

So implementieren Sie einen Kennwortstärke-Detektor in React

Implementierung der Docker-Konfigurationsänderung des Alibaba Cloud-Image-Repository

Welche versteckten Attribute im Formular können mit dem Formular übermittelt werden?

Drei Möglichkeiten zur Kommunikation zwischen React-Komponenten (einfach und benutzerfreundlich)

Grundlegende Kenntnisse zur Verwendung von Miniprogrammen (sehr umfangreich, empfehlenswert!)

HTML Mehrere spezielle Trennlinieneffekte

CSS3-Radarscan-Kartenbeispielcode

Zusammenfassung der Verwendung von Element-Formularelementen

Detailliertes Tutorial zur schnellen Installation von Zookeeper in Docker

Implementierungsmethode für den Apache AB-Stresstest zur gleichzeitigen Belastung

Detailliertes Tutorial zur Installation von Docker auf CentOS 8

So verwenden Sie JSX in Vue

CSS zum Erzielen eines schnellen und coolen Schüttelanimationseffekts

MySQL-Datentabellenpartitionierungsstrategie und Vor- und Nachteileanalyse