\n Sie denken vielleicht: Wie h\u00e4ngt das alles mit Mobile Design zusammen? Ich bin froh, dass du gefragt hast! Der Grund liegt in kleinen Bildschirmgr\u00f6\u00dfen, die nur die Bl\u00f6cke und Optionen enthalten sollten, die wirklich ben\u00f6tigt werden.\n<\/p>\n
\n Benutzerfreundlichkeit ist nicht das, was ein Kunde sieht, sondern etwas, das er f\u00fchlt, wenn er durch einen mobilen Laden st\u00f6bert. Lassen Sie ihn sich wie zu Hause f\u00fchlen.\n<\/p>\n
\n Prinzip 2: Prototyping
\n<\/h5>\n
\n Sobald Sie alle notwendigen Informationen \u00fcber das Unternehmen gesammelt haben, k\u00f6nnen Sie sich an die Gestaltung der mobilen Website machen. Es ist besser, mit einem Prototypen zu beginnen, was den Prozess erheblich vereinfacht. Ein Prototyp sollte alle Strukturelemente der Seite enthalten: Textbl\u00f6cke, Bilder, Links, Schaltfl\u00e4chen, \u00dcberschriften und Titel, Eingaben usw. Sie k\u00f6nnen Prototypen in verschiedenen Programmen wie Photoshop oder Axure oder sogar auf Papier erstellen.\n<\/p>\n
\n Erstens hilft Ihnen ein Prototyp, das Projekt besser zu verstehen. W\u00e4hrend Sie es erstellen, werden Sie alle Elemente und ihre Positionen sorgf\u00e4ltig \u00fcberdenken, sodass der n\u00e4chste Schritt \u2013 das Zeichnen Ihres Designs \u2013 viel einfacher wird.\n<\/p>\n \n Zweitens sparen Sie durch die Erstellung eines Prototyps viel Zeit bei zuk\u00fcnftigen Korrekturen: Es ist besser, sie in dieser Phase vorzunehmen als in den n\u00e4chsten.\n<\/p>\n \n Bevor Sie einen Prototyp erstellen, sollten Sie sich entscheiden, f\u00fcr welches Ger\u00e4t Sie ihn erstellen werden: ein Mobiltelefon oder ein Tablet. Bedenken Sie au\u00dferdem, dass jedes dieser Ger\u00e4te \u00fcber Hoch- und Querformat verf\u00fcgt. Notieren Sie sich alle Strukturelemente, die auf Ihrem Prototypen zu finden sein sollten, um nichts zu vergessen.\n<\/p>\n \n F\u00fcr die Hauptseite eines Online-Shops ben\u00f6tigen wir beispielsweise: Logo, Checkout, Suchleiste, Navigation, Produktbl\u00f6cke mit Bildern, Titeln, Kurzbeschreibungen und Preisen sowie einen allgemeinen Text \u00fcber den Shop. Sobald alle diese Elemente aufgez\u00e4hlt sind, k\u00f6nnen Sie mit der Erstellung von 4 Prototypen beginnen: f\u00fcr ein Mobiltelefon mit Hoch- und Querformat und f\u00fcr ein Tablet mit Hoch- und Querformat.\n<\/p>\n \n Sobald Ihre Prototypen fertig und genehmigt sind, k\u00f6nnen Sie mit dem Design der Benutzeroberfl\u00e4che beginnen.\n<\/p>\n \n Eine Benutzeroberfl\u00e4che ist das erste, was ein Besucher sieht, wenn er in einem Online-Shop landet. Interface gibt den Store-Ton vor, was sehr wichtig ist, also ist es Ihre Aufgabe als Designer, diesen Ton positiv zu gestalten und eine positive Einstellung aufzubauen.\n<\/p>\n \n Helfen Sie den Besuchern, schnell zu verstehen, wo sie sich befinden, was sie bekommen k\u00f6nnen, welche Funktionen und Features sie verwenden k\u00f6nnen. Dies kann durch die Verwendung bestimmter Farben, Einr\u00fcckungen, Symbole und Schriftarten erreicht werden. Wenn Sie den Checkout anzeigen m\u00fcssen \u2013 f\u00fcgen Sie ein Checkout-Symbol hinzu; wenn Sie einen Link einf\u00fcgen m\u00fcssen \u2013 markieren Sie ihn mit Farbe.\n<\/p>\n \n Es gibt zwei wesentliche grundlegende Besonderheiten von Mobilger\u00e4ten: ihre Gr\u00f6\u00dfe und die Art und Weise, wie ein Benutzer \u00fcber diese Ger\u00e4te mit einer Website interagiert: Er verwendet seine Finger, die viel gr\u00f6\u00dfer sind als ein Cursor auf einem Desktop. Diese Besonderheiten sollten Sie beim Entwerfen f\u00fcr Mobilger\u00e4te ber\u00fccksichtigen.\n<\/p>\n \n Anklickbare Bereichsgr\u00f6\u00dfe:<\/strong>\n <\/p>\n \n Aufgrund der oben genannten Eigenschaften mobiler Ger\u00e4te sollte eine optimale klickbare Bereichsgr\u00f6\u00dfe gr\u00f6\u00dfer als 44x44px sein. Wenn Sie Ihre Besucher nicht durch Fehlklicks frustrieren m\u00f6chten, versuchen Sie, alle anklickbaren Elemente (Links, Schaltfl\u00e4chen, Suchleiste usw.) 44 x 44 Pixel oder gr\u00f6\u00dfer zu machen, um eine mdpi-Aufl\u00f6sung f\u00fcr Android-Ger\u00e4te und Nicht-Retina-Displays f\u00fcr iOS-Ger\u00e4te zu erreichen. F\u00fcr andere Aufl\u00f6sungen sollten Sie es hochskalieren.\n <\/p>\n<\/li>\n \n Schriftgr\u00f6\u00dfe:<\/strong>\n <\/p>\n \n Sie sollten Ihren Besuchern schnelle Scan-M\u00f6glichkeiten bieten und gleichzeitig die Sicht nicht vergessen. Deshalb sollte Ihre Schriftgr\u00f6\u00dfe nicht kleiner als 11pt sein. Diese Gr\u00f6\u00dfe gew\u00e4hrleistet eine gute Lesbarkeit, sofern sie mit einem kontrastreichen Hintergrund verwendet wird. 11pt eignet sich jedoch eher f\u00fcr Platzhalter, Hinweise und weniger wesentliche Informationen. F\u00fcr Produktbeschreibungen und wichtige Textbausteine \u200b\u200bist 13pt besser geeignet.\n <\/p>\n<\/li>\n \n Gr\u00f6\u00dfe der Produktbilder:<\/strong>\n <\/p>\n \n Es ist nicht \u00fcbertrieben, wenn ich sage, dass Produktbilder (in den meisten F\u00e4llen) f\u00fcr den Verkauf der Produkte verantwortlich sind. Viele Leute \u00fcberspringen das Lesen von Details, sie brauchen nur Bilder, die ein Produkt aus allen m\u00f6glichen Blickwinkeln zeigen. Das bedeutet, dass Produktbilder auff\u00e4llig und gro\u00df genug sein sollten, damit Kunden ein Produkt im Detail untersuchen k\u00f6nnen. Daf\u00fcr k\u00f6nnen Sie sogar eine Zoom-Option hinzuf\u00fcgen.\n <\/p>\n \n Ein Produktbild sollte im Hochformat mindestens 45 % der Bildschirmbreite eines Mobiltelefons einnehmen; und mehr als 30 % im Querformat. Dies hilft einem Kunden, die Produktdetails im Allgemeinen zu sehen und seine Besonderheiten zu bemerken. Bei Tablets k\u00f6nnen Sie die beste Bildgr\u00f6\u00dfe selbst herausfinden.\n <\/p>\n \n Neben der Bildgr\u00f6\u00dfe sollten Sie auch auf die Bildqualit\u00e4t achten. Die Sache ist, dass die meisten modernen Mobilger\u00e4te ein Retina-Display verwenden, sodass Bilder mit einer Bildschirmaufl\u00f6sung von 360 x 640 Pixel auf Bildschirmen mit einer Aufl\u00f6sung von 720 x 1280 Pixel oder 1080 x 1920 Pixel nicht gut aussehen. Sie sollten immer daran denken, dass die Qualit\u00e4t der Bilder eines der wichtigsten Dinge f\u00fcr einen Online-Shop ist.\n <\/p>\n<\/li>\n \n Symbolgr\u00f6\u00dfe:<\/strong>\n <\/p>\n \n Symbole werden viel einfacher wahrgenommen als Text, deshalb werden Symbole normalerweise f\u00fcr Hinweise anstelle von Text verwendet. Einerseits sollen Icons auffallen; aber andererseits sollten sie nicht zu prominent sein, da sie eine untergeordnete Rolle spielen. Wenn Sie beispielsweise eine Suchleiste mit einer H\u00f6he von 44 Pixel hinzuf\u00fcgen, f\u00fcgen Sie eine Lupe mit einer Gr\u00f6\u00dfe von 24 x 24 Pixel hinzu. Dies w\u00fcrde ausreichen, damit der Benutzer den Zweck dieser Leiste versteht, und es wird gut aussehen.\n <\/p>\n<\/li>\n \n Formulargr\u00f6\u00dfe:<\/strong>\n <\/p>\n \n Unten habe ich \u00fcber die Gr\u00f6\u00dfe einzelner Elemente gesprochen, jetzt ist es an der Zeit, \u00fcber die Gr\u00f6\u00dfe eines wichtigen Blocks zu sprechen \u2013 die Form.\n <\/p>\n \n Die Gr\u00f6\u00dfe eines Mobiltelefondisplays ist begrenzt, und wenn ein Kunde ein Formular ausf\u00fcllen muss, erscheint eine Tastatur, die etwa die H\u00e4lfte der Bildschirmgr\u00f6\u00dfe \u00fcberlappt. Diese Besonderheit erfordert es, mobile Formulare so minimalistisch wie m\u00f6glich zu halten. Sie sollten nur die wirklich notwendigen Felder enthalten: zB Name, Adresse, E-Mail. \u00dcbrigens l\u00e4sst sich diese Regel auch auf Desktop-Seiten anwenden, wenn Sie Leads steigern m\u00f6chten: Je weniger Felder ein Formular hat, desto mehr Leute werden es abschicken.\n <\/p>\n \n Ein langer und langweiliger Weg von einer Eingabe zur n\u00e4chsten kann einen Kunden frustrieren und dazu bringen, das Gesch\u00e4ft zu verlassen.\n <\/p>\n<\/li>\n<\/ul>\n \n Der Markenstil sollte nicht nur im Logo, in Visitenkarten und Booklets, sondern auch in einer mobilen Website beachtet werden. Es ist haupts\u00e4chlich Farbe, die hilft, den Markenstil zu zeigen und Schl\u00fcsselelemente jeder Seite hervorzuheben.\n<\/p>\n \n Bevor Sie eine Benutzeroberfl\u00e4che entwerfen, sollten Sie sich \u00fcberlegen, welche Farben verwendet werden, und eine Palette erstellen. Wenn Sie wenige Farben verwenden, sieht die Benutzeroberfl\u00e4che langweilig aus; Wenn Sie zu viele Farben verwenden, sieht die Benutzeroberfl\u00e4che zu chaotisch und ablenkend aus. Es ist also besser, das Gleichgewicht zu halten und 6-10 Farben zu verwenden. Dies ist eine optimale Anzahl, aber nat\u00fcrlich kann es einige Ausnahmen geben.\n<\/p>\n \n Hier ist eine Schritt-f\u00fcr-Schritt-Anleitung zur Auswahl von Farben f\u00fcr eine E-Commerce-Website:\n<\/p>\n \n Die Farbkombinationen, die Sie erstellt haben, sollten harmonisch sein. Denken Sie an den Kontrast, da er hilft, die Aufmerksamkeit der Besucher auf die wichtigsten Elemente zu lenken, zum Beispiel auf die Schaltfl\u00e4che \u201eIn den Warenkorb“.\n<\/p>\n \n Wie bei den Farben k\u00f6nnen Sie eine \u201ePalette“ f\u00fcr Schriftarten erstellen, die Sie verwenden werden: Erstellen Sie eine Liste der Schriftartnamen, -gr\u00f6\u00dfen und -stile.\n<\/p>\n \n Schriftarten sollten gut lesbar sein und die Informationen potenziellen Kunden leicht vermitteln. Vermeiden Sie daher zu komplexe Schriftarten, die schwer zu lesen sind: Kunden verlieren keine Zeit damit, zu verstehen, was Sie anzubieten versuchen.\n<\/p>\n \n Ihre Font-\u201ePalette“ kann wie eine einfache txt-Datei aussehen, in der Sie die folgenden Informationen speichern:\n<\/p>\n \n \u00dcberschrift 1 \u2013 RobotoLight 36pt\n<\/p>\n \n Sie entscheiden, welche Schriftart Sie f\u00fcr dieses oder jenes Element verwenden. Jede Schriftart hat ihre eigene Bedeutung und ihren eigenen Charakter, die an die Website weitergegeben werden, daher sollten Sie bei der Auswahl der richtigen Schriftarten vorsichtig sein.\n<\/p>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-247387-638217cd14bf5.webp\")
<\/a><\/p>\n<\/a><\/p>\n\n Prinzip 3: Schnittstelle
\n<\/h5>\n<\/a><\/p>\n\n Prinzip 4: Gr\u00f6\u00dfen
\n<\/h5>\n<\/a><\/p>\n\n
\n Prinzip 5: Farbe
\n<\/h5>\n\n
<\/a><\/p>\n\n Prinzip 6: Schriftarten
\n<\/h5>\n