Ein Blick auf toolbasierte Websites: die Definition von toolbasierten Websites und eine typische Fallanalyse (Bilder und Text)

Besuchen Sie die Tool-Typ-Website - Interpretation und typische Fälle Sanlian Tutorial

Wenn es um Tool-Websites geht, haben wir zunächst eine Frage: Welche Art von Website wird unter den unzähligen Online-Websites als Tool-Website angesehen? Welche Merkmale hat sie und wie unterscheidet sie sich von anderen Websites? Bei der Suche nach relevanten Informationen im Internet haben wir erfahren, dass es keine klare Erklärung für die spezifische Definition dieses Begriffs gibt.
Um nachfolgende Forschungen zu erleichtern, werden wir die Forschungsergebnisse früherer Studenten kombinieren und eine Definitionsversion von Tool-Websites als Referenz bereitstellen:
——Die sogenannte Tool-Website ist, wie der Name schon sagt, ein im Internet erstelltes Tool. Es bezieht sich auf ein auf Netzwerkanwendungen basierendes Tool, das bereitgestellt wird, um Menschen dabei zu helfen, die Zielanforderungen in einem bestimmten Bereich zu erfüllen. Es verfügt über einen bestimmten Betriebsprozess und hat den Hauptzweck, die Zielaufgabe zu erfüllen.
Seine Hauptmerkmale sind:
– Zielt auf die Erledigung einer oder mehrerer Aufgaben ab – Konzentriert sich auf die Steuerung des Betriebsablaufs – Betont die schnelle Erledigung von Aufgaben – Ist nicht das einzige Mittel zum Erreichen des Ziels, sondern hilft Benutzern nur dabei, das Ziel effizienter zu erreichen
Gleichzeitig verfügen viele Tool-Websites auch über ein eigenständiges Portal, das hauptsächlich dazu dient, Informationen anzuzeigen und speziell den Wert, die Dynamik usw. der Tools vorzustellen und Login- oder Download-Zugänge bereitzustellen. Aufgrund des hohen Integrationsgrads zwischen diesem Portal und der Tool-Seite klassifizieren wir es auch in die Kategorie der Tool-Typ-Websites und nennen es ein Tool-Typ-Website-Portal (oder eine Tool-Website-Homepage).
Um uns dabei zu helfen, ein intuitiveres Konzept von Tool-Typ-Websites zu entwickeln, können wir Websites basierend auf ihren Funktionen in Inhaltstyp-Websites und Tool-Typ-Websites unterteilen. Was die Gegensätze und Unterschiede zwischen toolbasierten Websites und inhaltsbasierten Websites angeht, haben einige Studierende bereits ausführliche Erklärungen abgegeben (wenn Sie mehr wissen möchten, können Sie die entsprechenden Artikel lesen), deshalb werde ich sie hier nicht wiederholen.
Typische Tool-Websites sind: Google-Serie (Suche, Übersetzung, Dokument, Reader ...), Tenpay, Alipay, Data Cube, Salesforce, Xero, TA, DNSpod usw.
Typische inhaltsbasierte Websites sind: Sina, Tencent, Tianya Forum usw.
Im Folgenden stelle ich einige typische Beispiele für Tool-Websites vor, die mir aus Erfahrung gut gefallen.
Google – Konsistenz ist Trumpf
Bei den Tool-Websites dürften die am häufigsten genutzten Produkte die uns bestens bekannten Google-Produkte sein, wie etwa Google Search, Translation, Documents usw. Bei den meisten davon handelt es sich um neue Tools, die nach und nach nach Google Search eingeführt wurden. Diese Tools bieten den Internetnutzern viel Komfort im Internetleben.
Bei so vielen Produktlinien könnten aufgrund der unterschiedlichen funktionalen Eigenschaften leicht unterschiedliche visuelle Stile entstehen. Wir sehen jedoch, dass der visuelle Stil von Google in seinem Mehrproduktsystem hinsichtlich Navigationsleiste, Farbsystem, grundlegender Layoutstruktur usw. sehr einheitlich ist. Beispielsweise sind alle Hintergrundebenen schwarz, weiß und grau, alle neuen Funktionen sind auffällige rote Schaltflächen und alle Funktionsmenüs befinden sich auf der linken Seite.
Diese Konsistenz reduziert die Wahrnehmungs- und Lernkosten des Benutzers für neue Produkte erheblich und macht ihn mit den neuen Produkten vertraut. Es spiegelt die starken Formulierungs- und Ausführungsfähigkeiten des Google Experience-Teams in Bezug auf Markenimage und Erfahrungsspezifikationen wider.

Xero – frisch und doch sehr praktisch <br />Das folgende Xero hat ein typisches frisches Design. Meine Liebe zu ihm kommt von seiner Einfachheit, aber nicht simpel, schön, aber nicht laut, was mit der funktionalen Ausrichtung der Website im Einklang steht.
Xero ist ein umfassendes Buchhaltungstool für kleine Unternehmen mit Ausgabefunktionen wie Kassenbüchern, Hauptbüchern, Rechnungen und Berichten. Als Website für Buchhaltungstools sind Sicherheit und Genauigkeit natürlich die wichtigsten Anforderungen der Benutzer. Daher hat Xero sehr darauf geachtet, Blau und Grün mittlerer Helligkeit zu verwenden, um dies auf den Portal- und Produktseiten zum Ausdruck zu bringen. Gleichzeitig sind die Bilder und die Struktur horizontal und vertikal und stabil, wodurch eine äußerst sichere und vertrauenswürdige Atmosphäre entsteht.
In Bezug auf die Informationsanzeige weist das Xero-Portal die typischen Merkmale von Web 2.0 auf, wie z. B. viel Leerraum und den Kontrast zwischen großen und kleinen Schriftarten. Auf der Produktseite werden die visuellen Elemente jedes Steuerelements so weit wie möglich reduziert. Beispielsweise haben Tabellen keine vertikalen Drahtgitter, Diagramme haben einheitliche Farben, Schaltflächen haben vereinfachte Texturen, alle anklickbaren Texte einschließlich allgemeiner Links, Überschriften und Registerkarten sind blau usw. Der Zweck dieser Vorgehensweise besteht darin, zu verhindern, dass große Mengen an Textdaten durch unnötige Details gestört werden, das Thema auf einen Blick klar zu machen und Benutzern zu helfen, Aufgaben in einer sauberen und komfortablen Umgebung schnell zu erledigen.
Das Produkt wurde einst von der Nielsen Norman Group in den 10 besten Anwendungs-UIs aufgeführt.

Fork – Kreative Illustrationen stärken das Markenimage. <br />Da es sich um eine toolbasierte Website handelt, kann der Wert, den das Tool den Benutzern bietet, sicherlich über Erfolg oder Misserfolg der Website entscheiden. Das Portal fungiert jedoch auch als Produktschaufenster, das Besucher anzieht, damit diese schnell den Zweck und den Wert des Produkts verstehen und es dann verwenden können. Der Erfolg des Portals hat daher auch einen wichtigen Einfluss auf die Website. Für visuelle Designer ist es eine wichtige Frage, wie sie bei Farben, Layout oder Illustrationen kreativ sein können, um das Portal möglichst auffällig zu gestalten und die Gunst der Besucher zu gewinnen. Der Ford unten ist ein typisches Beispiel für illustrative Kreativität. Seine bemerkenswerten situativen Designmerkmale fallen ins Auge.
Wenn die Leute die China Merchants Bank erwähnen, denken sie an Sonnenblumen; wenn sie Tencent erwähnen, denken sie an Pinguine; wenn sie Mailchimp erwähnen, denken sie an den Briefträgeraffen. Und wenn die Leute Fork erwähnen, sollten sie an diesen süßen alten Fischer denken, der mit einer Gabel in einem kleinen Boot sitzt. Vielleicht ist sein Logo unauffällig, aber mit dem Kontrast dieses Sprechers ist dieses Tool wirklich unvergesslich. Bei genauerem Hinsehen werden Sie feststellen, dass sich auf mehreren Innenseiten Illustrationsmotive zum Thema Meer finden. Wären Sie angesichts dessen, auch wenn Sie damit nicht vertraut sind, neugierig genug, auf „Herunterladen“ zu klicken, um es auszuprobieren?
Erwähnenswert ist, dass das Framework der Portalseite das beliebte Modell des responsiven Webdesigns verwendet und das Layout beim Vergrößern und Verkleinern im Browser oder beim Zugriff über ein Mobiltelefon fein abgestimmt wird, was die Integrität der visuellen Kommunikation widerspiegelt.
In Bezug auf das Erlebnisdesign von Tool-Website-Portalen hat Xiao Yivan umfangreiche Untersuchungen hierzu durchgeführt, siehe hier.

Wufoo – Erleben Sie Innovation durch das Streben nach Einfachheit
Websites vom Typ „Tool“ haben normalerweise einen eher formellen Zweck. Wenn man sich solche Websites ansieht, verwendet man meist kalte Farben. Als ich Wufoo zum ersten Mal sah, fand ich es etwas ganz Besonderes. Es verwendet warme Farben auf einer großen Fläche und der Bogen der abgerundeten Ecken ist auch relativ groß, was entspannt und lässig wirkt. Bevor wir die Gründe verstehen, wollen wir zunächst den Zweck und den Wert dieses Produkts verstehen.
Wufoo wird hauptsächlich zum Erstellen von Online-Formularen, Einladungen und einfachen Bestellzahlungen sowie zum Versenden von Einladungen und Verwalten von Zeitplänen verwendet. Die Erwartung der Produktseite an Wufoo lautet: „Die Hauptfunktion von Wufoo besteht darin, jedem bei der Erstellung von HTML-Formularen zu helfen, aber letztendlich streben wir danach, die einfachste Möglichkeit zum Sammeln von Informationen im Internet zu sein.“
Verwenden Sie daher warme Farben, um Affinität auszudrücken, die Hemmschwelle für den Benutzer zu senken und den Leuten das Gefühl zu geben, dass dies ein Produkt ist, das jeder verwenden kann – Sie können es für die Arbeit oder für persönliche Angelegenheiten verwenden. Dieses einfache und benutzerfreundliche Wertkonzept spiegelt sich nicht nur in der Farbe wider, sondern auch im interaktiven Framework-Design des gesamten Website-Aufgabenflusses, wie z. B. den Einstellungen für die nach links und rechts hochklappbaren Optionen, der neuartigen Möglichkeit zum Hinzufügen von Formularfeldern und dem durchdachten Eingabeassistenten. Es ist in der Tat eine Website mit einem neuartigen Erlebnis.
Die Website wurde außerdem von der Nielsen Norman Group in den 10 besten Anwendungs-Benutzeroberflächen aufgeführt.

Tenpay – überall für eine entspannte Atmosphäre sorgen <br />Als ich das neue Tenpay zum ersten Mal sah, war ich von dem Bild auf der Homepage angetan. Die männlichen und weiblichen Protagonisten kuschelten sanft aneinander, spielten mit ihren jeweiligen Mobiltelefonen und sahen glücklich und lässig aus. Diese fröhliche und lebensnahe Szene ist eine perfekte Interpretation des Slogans. Gleichzeitig vermittelt der Stil der gesamten Website den Menschen ein Gefühl von Einfachheit und Leichtigkeit. Tatsächlich ist die überarbeitete Informationsstruktur komfortabler, die wichtigsten Punkte sind deutlicher hervorgehoben und der Prozess läuft reibungsloser ab.

Ist Ihnen aufgefallen, dass sich die Informationslayoutstruktur von Tenpay deutlich von den vorherigen Fällen unterscheidet?
Die Tool-Seite im vorherigen Fall hat hauptsächlich Baum, Tabelle und verschiedene Steuerelemente als Schnittstellenelemente und ihre Layoutstruktur ähnelt eher der einer Anwendung. Tenpay und seine Elementstrukturen sind jedoch hauptsächlich offen, mit weniger Einschränkungen bei den Steuerungsrahmen, flexibleren Formen der Tabellendarstellung und mehr leitenden Textinformationen, was sie zu typischen Tool-Websites macht, die dem Layout einer Webseite nahe kommen. Andere ähnliche Dienste sind Alipay, Tencent Security Center, Recharge Center usw.
Wenn es sich also bei allen um toolbasierte Websites handelt, warum gibt es dann so große Unterschiede bei der Anwendung des Elementlayouts?
Kurz gesagt liegt es daran, dass Ersteres aus der Design-Denkweise der Kundenerfahrung entwickelt wurde, während Letzteres auf der Grundlage der Design-Denkweise früher Webseiten entwickelt wurde. Ein einfaches Beispiel: Bei den Informationsaufforderungen der ersteren wird im Allgemeinen eine Zahlungsebene eingeblendet, während bei den letzteren die Informationsaufforderungen eher auf der aktuellen Seite angezeigt werden. Natürlich beeinflussen sich die beiden mittlerweile gegenseitig und der Unterschied wird allmählich geringer.
Neue Technologien und neue Entwicklungen. Da die Bildschirmauflösungen immer größer werden (laut CNZZ-Statistiken ist der Marktanteil von 1024 x 768 im Januar 2012 auf 28,8 % gesunken, und der Abstand zum zweitplatzierten 1440 x 900 mit 21 % ist immer kleiner geworden und zeigt einen diversifizierten Trend) und die Netzwerkgeschwindigkeiten immer schneller werden, ist vorhersehbar, dass diese neuen Webseitentechnologien auch von Tool-Websites stärker genutzt werden, wie etwa das gerade erwähnte responsive Webdesign, wie Wasserfallfluss, Rich-Media-Anwendungen, große Bildhintergrundfüllungen usw., und dies wird zwangsläufig neue Ideen für unser visuelles Design eröffnen und mehr kreativen Verbesserungsspielraum bieten.
Das Obige ist nur eine vorläufige Analyse von Tool-Websites. Tatsächlich kann man sagen, dass Tool-Websites in Bezug auf das Erlebnisdesign ein in sich geschlossenes System sind, und es gibt Raum für eingehendere Forschung und Lernen. Wir begrüßen weitere interessierte Studenten, die kommen und ausführlich diskutieren möchten. (Text: Tencent CDC)

<<: Tomcat8 verwendet Cronolog zum Aufteilen von Catalina.Out-Protokollen

>>: CSS-Einstellung Div-Hintergrundbild-Implementierungscode

So verwenden Sie VUE, um die Ali Iconfont-Bibliothek online aufzurufen

Ein Blick auf toolbasierte Websites: die Definition von toolbasierten Websites und eine typische Fallanalyse (Bilder und Text)

So verwenden Sie VUE, um die Ali Iconfont-Bibliothek online aufzurufen

Detaillierte Erklärung zum Einfügen gängiger Nginx-Befehle in Shell-Skripte

Verwenden Sie Tomcat, um das SpringBoot-War-Paket in einer CentOS-Umgebung bereitzustellen

Mysql-Optimierungstechniken zum Abfragen von Daten basierend auf der Zeit

Beispielcode zum Konfigurieren von Überwachungselementen und aggregierten Grafiken in Zabbix

Feste Tabellenbreite table-layout: fest

So verbergen Sie die Versionsnummer in Nginx

Beschreibung der Schreibmethode des Foreach-Arrays in Vue und des Traversal-Arrays in js

Vollständige Schritte für dynamische Bindungssymbole in Vue

Der Inhalt der Tabelle in HTML wird horizontal und vertikal in der Mitte angezeigt

Artikel empfehlen

Lösen Sie die Probleme, die bei der Installation von MySQL 8.0 auf einem Win10-System auftreten

Ubuntu öffnet Port 22

Element-Beispielcode zum Implementieren dynamischer Tabellen

Eine einfache Methode zum Ändern der Größe hochgeladener Nginx-Dateien

So ändern Sie das Kennwort von mysql5.7.20 unter Linux CentOS 7.4

Tutorial zur grundlegenden Verwendung des MySQL Slow Query Log

Lösung für das Versagen von Docker beim Freigeben von Ports

JavaScript implementiert die Generierung eines 4-stelligen zufälligen Bestätigungscodes

SSM VUE Axios Detaillierte Erklärung

Zusammenfassung gängiger SQL-Anweisungen in MySQL

Zwei Möglichkeiten zum Beenden von Bash im Docker-Container unter Linux

MySQL 5.6 Installationsschritte mit Bildern und Text

Detaillierte Erklärung zur Verwendung des MySQL-Parameters sql_safe_updates in der Produktionsumgebung

So installieren und konfigurieren Sie MySQL 5.7.19 unter CentOS 6.5

WeChat-Miniprogramme implementieren Sternebewertung