Design-Sharing der Download-Seite des Pengyou.com-Mobilclients (Bild und Text)
Schauen wir uns zunächst einige einfache Daten an:  ① 97 % der chinesischen Städte verfügen über Mobiltelefone, davon 35 % über Smartphones; ② 50 % der Befragten gaben an, dass sie lieber auf den Fernseher als auf das Smartphone verzichten würden. ③ Chinesische Smartphone-Nutzer in städtischen Gebieten verwenden ihr Smartphone jederzeit und überall. Die Orte, an denen Smartphones am häufigsten verwendet werden, sind Zuhause (66 %), auf Reisen (59 %), im öffentlichen Nahverkehr (52 %), in Restaurants (38 %) und in Einkaufszentren (30 %). (Datenquelle: China Urban Smartphone Data Survey Report; http://www.dianru.com/news-56) Es ist absehbar, dass im zukünftigen Internetbereich der Aufbau mobiler Plattformen zunehmend zum Entwicklungskern von Internetunternehmen werden wird. Mit der zunehmenden Anzahl mobiler Geräte im In- und Ausland ist auch die Nachfrage der Benutzer nach mobilen Diensten gestiegen. Egal wann und wo, Benutzer erhalten gerne Internetinformationen über Mobiltelefone. Derzeit nutzen 75 % der städtischen Smartphone-Nutzer in China ihre Smartphones jede Woche für soziale Netzwerke, was dem Anteil der sozialen Netzwerke über traditionelle Netzwerke (84 %) nahekommt. Da das mobile Internet immer ausgereifter wird, wird das Abrufen von Internetinformationen über tragbare Mobilgeräte in naher Zukunft voraussichtlich zum gängigen Netzwerkzugangspunkt werden.  Natürlich gibt es im Web bereits ein relativ ausgereiftes Produkt namens Pengyou.com. Unter dieser Prämisse müssen wir bei diesem Design Benutzer dazu anregen, die App herunterzuladen, indem wir das Webdesign verbessern. 1 Vorgespräch Nach Erhalt des Anfrageformulars gehen wir zunächst von unseren eigenen Produkten aus und analysieren diese in Kombination mit hervorragenden APP-Downloadseiten im In- und Ausland.  1.1 Dünn und leicht Dünn und leicht bedeutet im wörtlichen Sinne „weniger“; Indem wir den Text, die Bilder und andere Elemente vereinfachen und verfeinern, um sicherzustellen, dass der Betrachter die Seite und den Kunden ausreichend versteht, und indem wir auf Details achten, können wir den Effekt von „weniger ist mehr“ erzielen, ohne die Wahrnehmung des Benutzers zu verlieren und sie vollständig zum Ausdruck zu bringen. Dies ist unsere Definition von „leichtgewichtig“ bei diesem Seitendesign. 1.2 Seitenraumgefühl Tatsächlich ähnelt das Durchsuchen von Informationen auf einer Seite dem Durchsuchen einer echten Bibliothek. Niemand möchte beim Durchsuchen von Informationen auf einen kleinen Bereich beschränkt sein. Wir versuchen unser Bestes, den Benutzern ein atmungsaktives und angenehmes Seitengefühl zu bieten, um sicherzustellen, dass die Benutzer bereit sind, länger auf dieser Seite zu bleiben, weil sie zumindest nicht zu überfüllt ist. In diesem Bereich konzentrieren wir uns hauptsächlich auf die Verarbeitung von Seitendesignelementen. Es besteht keine Notwendigkeit, zu viel Material anzuhäufen, sondern den Kerninhalt zu erfassen, der die funktionalen Eigenschaften des Kunden am besten zum Ausdruck bringen kann. 1.3 Browsing-Komfort Benutzer durchsuchen Textinformationen auf einer Seite genauso wie mit einem Computer, und zu viele Textinformationen sind wie nutzlos abgelegte Dateien in einem Computersystem, was die Browsing-Geschwindigkeit und das Verständnis beeinträchtigt; In Bezug auf das Durchsuchen der Kopierinformationen lautet unsere Definition von Komfort: schnelles Durchsuchen der Kopierinformationen und einfaches Erfassen der Hauptidee der Kopie. Daher haben wir die Kopie wiederholt besprochen, sie immer wieder vereinfacht und versucht, die Funktionen des mobilen Clients von Friend Network möglichst in ein oder zwei Sätzen zu beschreiben und gleichzeitig sicherzustellen, dass die Informationen vollständig ausgedrückt werden. 2 Designprozess Wir glauben, dass es beim Design darum geht, einen kritischen Punkt zu finden, der von den meisten Menschen erkannt wird und optisch ansprechend ist. Der Designprozess ist ein iterativer Prozess vom Nichts zum Etwas und vom Etwas zur Exzellenz. 2.1 Der Designprozess dieser Seite ist mühsam  Dies ist ein Prozess der Erkundung und des Fortschritts. Obwohl es einige Wendungen gibt, haben wir durch wiederholte Diskussionen, das ständige Umwerfen und Überdenken des bestehenden Designs schließlich festgestellt, dass die von uns vorgesehene Richtung die richtige war. Jeder wollte einfach nur ein besseres Seitendesign erstellen. Was das Produkt und das Design selbst betrifft, ist unser größter Wunsch, dass die Seite für die Benutzer nicht zu hässlich aussieht. Natürlich glauben auch wir, dass wir es besser machen können. 2.2 Wir blieben bei der Gestaltung beharrlich und erarbeiteten insgesamt 4 Gestaltungspläne. Während wir das Design kontinuierlich optimieren, optimieren und verfeinern wir auch die Elemente im Design kontinuierlich. Das grundlegendste Endergebnis ist jedoch, die Leichtigkeit und Schlankheit der Seite, das Raumgefühl der Seite und das angenehme Browsen sicherzustellen. Dies ist der Schlüsselpunkt, der in der frühen Diskussion ermittelt wurde. Während des gesamten Prozesses des Seitendesigns werden die zentralen Designpunkte jeder Version beibehalten und in der nächsten Version optimiert. Unabhängig davon, ob sie vereinfacht oder erweitert wird, werden die anfänglichen drei Schlüsselpunkte als grundlegendste Forderung beim Seitendesign festgelegt.  Nachdem der generelle Seitenstil und die grafischen Elemente bereits festgelegt sind, geht es im nächsten Schritt an die Details; vom Farbverlauf der Schaltflächen bis hin zu den Satzzeichen im Text wird alles immer wieder überdacht. Das bedeutet nicht, dass wir uns blind auf Details konzentrieren, aber wir wollen bei den Details keine Fehler machen. Daher ist es beim Anpassen des Textes der Hauptteil unserer endgültigen Designarbeit, ihn so prägnant und verständlich wie möglich für Benutzer zu gestalten. 3. Überprüfung der Entwurfspunkte  Diese alltäglichen Szenen sind eigentlich unsere Szenariopositionierung für die Benutzer des mobilen Friends Network-Clients. Und die Verwendung der Funktionen des Clients durch die Benutzer in den entsprechenden Szenen ist ebenfalls im Bild enthalten. Wenn Sie beispielsweise mit Ihrer besten Freundin einkaufen, können Sie Ihre Selfies sofort über das WeChat Moments-Netzwerk mit Ihren Freunden teilen. Wenn Sie zusammen verreisen, hoffen wir, dass Sie Ihr Glück gerne über das WeChat Moments-Netzwerk teilen. Wir hoffen, dass wir Benutzer durch die Simulation von Nutzungsszenarien emotional ansprechen können. 3.2 Kontextuelle Objekte zur Unterstützung der Begrüßung, wie etwa Kameras, Papierflieger, Kaffeetassen und Getränke aus Pappbechern; Das Bild stellt das Nutzungsszenario des Clients dar, und die Hilfselemente im Bild enthalten zwei Bedeutungen: die Implikation der Szene und die Funktion des Clients. Es ist unsere ursprüngliche Absicht, diese situativen Elemente hinzuzufügen, um das Thema der Szene hervorzuheben und die Funktion des Clients zu unterstützen. Es ist wie: „Wenn Sie von Angesicht zu Angesicht chatten, brauchen Sie vielleicht zwei Drinks, um Ihren Durst zu löschen, weil das Chatten auf Pengyou.com so direkt ist, dass es so viel zu besprechen gibt.“ Dies ist ein Signal, das wir den Benutzern vermitteln möchten. Wir möchten, dass die Benutzer wissen, dass der mobile Client von Pengyou.com tatsächlich sehr interessant ist. 3.3 Halten Sie den Text einfach und konzentrieren Sie sich auf das Thema, heben Sie den Inhalt hervor, den Sie am meisten ausdrücken möchten, und reduzieren Sie unnötige visuelle Störungen. Sie brauchen nicht zu viel Text. Zu viel Text erschwert das Lesen und die Hauptidee geht verloren. Aus diesem Grund legen wir großen Wert auf den Navigationskomfort und optimieren und verfeinern den Text laufend. Wir möchten, dass die Benutzer in möglichst kurzer Zeit erfahren, was wir sagen möchten. 4 Der Erstentwurf und der Endentwurf des Schlussplädoyers unterscheiden sich und werden im Laufe des Prozesses ständig angepasst und optimiert – vom Seitenstil und den visuellen Elementen bis hin zu Satzzeichen und Hintergrundtransparenz. Obwohl am Ende ein relativ zufriedenstellendes Designergebnis erzielt wurde, gibt es immer noch einige Probleme, die nicht ignoriert werden können, wie z. B. das allgemeine Gefühl mehrerer Schatten im Bild, die Handhabung von Hilfsobjekten, die Integration von Hintergrund und Thema und andere Designprobleme, die nicht vollständig gelöst wurden. Im Anschluss daran haben wir nach und nach Anpassungen und Optimierungen vorgenommen. Auch wenn es sich nur um Kleinigkeiten handelt, sind alle mit viel Herzblut dabei. Quelle: Tencent ISUX |
<<: Gemeinsame Nutzung verschiedener Methoden zum Deaktivieren des Seitencaches
>>: SQL implementiert LeetCode (180. Fortlaufende Zahlen)
Artikel empfehlen
Detailliertes Tutorial zur Springcloud-Alibaba-Nacos-Linux-Konfiguration
Laden Sie zuerst das komprimierte Nacos-Paket von...
my.cnf (my.ini) wichtige Parameteroptimierungs-Konfigurationsanweisungen
MyISAM-Speicher-Engine Die MyISAM-Speicher-Engine...
Informationen zur Installation von Homebrew auf dem Mac
Vor kurzem hat Xiao Ming einen neuen Mac gekauft ...
Detaillierte Schritte zur vollständigen Deinstallation von MySQL 5.7
Dieser Artikel fasst hauptsächlich verschiedene P...
CSS3 verwendet die Übergangseigenschaft, um Übergangseffekte zu erzielen
Detaillierte Beschreibung der Eigenschaften Der Z...
Leerzeichenverarbeitung in HTML/CSS und wie Leerzeichen auf der Seite beibehalten werden
Leerzeichenregeln in HTML In HTML werden mehrere ...
Beispiele für zwei Möglichkeiten zur Implementierung einer horizontalen Bildlaufleiste
Vorwort: Während der Projektentwicklung stießen w...
JS Canvas-Oberfläche und Animationseffekte
Inhaltsverzeichnis Überblick Canvas API: Grafiken...
Dieser Artikel zeigt Ihnen das Prinzip der MySQL Master-Slave-Synchronisation
Inhaltsverzeichnis Kurze Analyse des MySQL Master...
Erfahren Sie, wie Sie den Fehler beim Speichern chinesischer Schriftzeichen in der MySQL-Datenbank beheben können
Inhaltsverzeichnis 1. Aufgetretene Probleme 2. An...
Einfacher Webseitencode, der im NetEase-Blog verwendet wird
So verwenden Sie den Code im NetEase-Blog: Melden...
MySQL nimmt die durch Kommas getrennten Werte aus einem Feld heraus, um ein neues Feld zu bilden
1Beispiel: Um die in Abbildung 1 gezeigten Felder...
Tutorial zur Installation von VMWare15.5 unter Linux
Um VMWare unter Linux zu installieren, müssen Sie...
So konfigurieren Sie einfach mehrere Server in Nginx
1: Ich werde nicht näher auf die Installation von...
Einführung in die Bereitstellung des Selenium-Crawler-Programms unter Linux
Inhaltsverzeichnis Vorwort 1. Was ist Selen? 2. N...