it-swarm.com.de

Ist es angemessen, das Design im Metro-Stil für eine plattformübergreifende mobile App zu verwenden?

Ich finde es wirklich schwierig, Benutzeroberflächen für Android und ios zu entwerfen, nachdem ich mich in das Windows-Metro-Design verliebt habe).

Ich fragte mich, ob die Bereitstellung einer App im Metro-Stil auf allen Plattformen so schlecht wäre, da ich persönlich nicht denke, dass die Erfahrung viel besser ist als bei einer Windows Phone-App.

Wäre es eine schlechte Idee, eine einzige Benutzeroberfläche im Metro-Stil auf allen Plattformen zu haben?

13
Darcbar

Microsoft hat mit dieser Idee mit seiner Xbox Live-Begleit-App für jede Plattform experimentiert.

Hier ist die My Xbox LIVE App für iOS:

Screenshot of the "quickplay" menu in My Xbox LIVE for iOSScreenshot of the "discover" screen in My Xbox LIVE for iOS
Screenshot of a game's details in My Xbox LIVE for iOSScreenshot of the avatar edit interface in My Xbox LIVE for iOS

Bilder aus der My Xbox LIVE-App im iTunes App Store

… Und hier ist die gleiche App für Android:

Screenshot of the games listing in My Xbox LIVE for AndroidScreenshot of the "spotlight" interface in My Xbox LIVE for Android
Screenshot of the "social" interface in My Xbox LIVE for AndroidScreenshot of the avatar edit screen in My Xbox LIVE for Android

Bilder aus der My Xbox LIVE-App bei Google Play

… Und zum Schluss noch ein paar Bildschirme aus der iPad-Version:

Screenshot of the games interface in My Xbox LIVE for iPadScreenshot of the "discover" screen in My Xbox LIVE for iPadScreenshot of a details listing in My Xbox LIVE for iPad

Bilder aus der My Xbox LIVE-App im iTunes App Store

Dies alles ist (relativ) einfach zu entwerfen , aber technisch außerordentlich schwierig zu implementieren. Einige Dinge, die zum Beispiel zu beachten sind (die aus statischen Screenshots möglicherweise nicht sofort ersichtlich sind):

  • Anstatt Panoramen im Metro-Stil zu verwenden (die den Rand des nächsten Bereichs anzeigen, um anzuzeigen, dass Sie horizontal scrollen können), verwenden diese Apps Punktindikatoren im Karussellstil, um Sie darüber zu informieren, wie viele Bildschirme sich im aktuellen Panorama befinden (und welche) du bist jetzt dran). Andere kleine Dinge wie
  • Diese App kommt davon, in Metro zu sein, weil ihre Benutzer Metro auf ihren Xboxes selbst erlebt haben. Die Benutzer haben eine vernünftige Erwartung, wie es funktioniert (insbesondere auf der iPad-Oberfläche, die die TV-Oberfläche genau nachahmt).
  • Die Segoe-Benutzeroberfläche (oder ihre Schwesterschrift Segoe WP) ist ein großer Teil dessen, was Metro zu Metro macht. Daher müssten Sie Lizenzierung der Schriftart zur Verwendung in Ihren Apps
  • Metro-Apps für Windows Phone werden mit einer Hardware-Zurück-Taste entwickelt. Da dies in iOS nicht verfügbar ist, müssen Sie die Notwendigkeit einer Software-Zurück-Schaltfläche berücksichtigen (Sie sehen oben auf den "Avatar" -Bildschirmen, dass Microsoft dies unter iOS tut, jedoch nicht Android welche) hat einen Hardware-Zurück-Button)
  • Metro ist stark von Animation abhängig . Sie müssen mit Blick auf die Animation entwerfen und alle Animationen selbst implementieren (auf jeder Plattform).
  • Sie können die Muttersprache und die Metro-Designsprache nicht kombinieren. Sie müssen benutzerdefinierte Steuerelemente für jede Funktion implementieren (von Formularelementen wie Dropdown-Menüs bis hin zu UI-Funktionen wie dem Laden von Throbbern). Die My Xbox LIVE iOS-App verletzt dies auf dem Einstellungsbildschirm, indem sie ein iOS UISwitch -Steuerelement anzeigt.
  • Möglicherweise müssen Sie Interaktionen emulieren, von denen Sie nicht wissen, dass sie überhaupt existieren (in Windows Phone kann ich jede Menüleiste als Berührungsgeste nach oben klappen, aber in der My Xbox LIVE iOS-App muss ich auf das sehr kleine "..." - Ziel tippen, um tun Sie dies).
  • Es gibt viele Auswirkungen auf die Barrierefreiheit, die Sie berücksichtigen müssen. Unter iOS ist die My Xbox LIVE-App nicht besonders kompatibel mit dem integrierten VoiceOver-Bildschirmleser, insbesondere auf dem Startbildschirm (z. B. wird eine Schaltfläche mit der visuellen Bezeichnung "Gamer Spotlight: Begrüßen Sie Dr. Black Bones" als "abgeblendet" ausgelesen button ", die Nachrichtentaste wird einfach als" button "ausgelesen und Schaltflächen, die völlig unsichtbar sind, werden ausgelesen), obwohl einige andere Bildschirme (wie der Bildschirm" Letzte Spiele ") perfekt lesbar sind (sogar das Hinzufügen von neuem gesprochenem Text, der nicht 'ist). t auf dem Bildschirm sichtbar und liest so etwas wie "Fruit Ninja: 17 Erfolge erzielt. Gamerscore ist 170 von 200"). Die Verwendung nativer Steuerelemente garantiert Ihnen natürlich auch keine gute Zugänglichkeit. Es ist nur einfacher anzuwenden, wenn Sie nichts anderes tun als die übrigen Erwartungen der Plattform.
19
Kit Grose

Ich verstehe Ihre Gefühle gegenüber Metro (oder wie auch immer sie es jetzt nennen) vollständig. Es ist einfach, sauber, lebendig, insgesamt einfach wunderbar. Ich halte es jedoch für eine schreckliche Idee, sich auf alle anderen Plattformen zu verteilen.

Jede Plattform verfügt über eine Reihe von Design- und Funktionsstandards, an die ihre Benutzer gewöhnt sind. Wenn Sie Benutzern auf anderen Plattformen die Metro-Benutzeroberfläche vorstellen, werden Sie gegen alles verstoßen, was sie gewohnt sind. Sie müssen auch berücksichtigen, dass Ihre Benutzer die Metro-Benutzeroberfläche möglicherweise nicht mögen. Wenn jeder Metro wollte, würde jeder ein Windows Phone kaufen, aber wir wissen, dass dies nicht der Fall ist, da Sie Benutzer haben, die Sie an anderer Stelle unterstützen können.

Unabhängig davon, auf welche Plattform Sie sich konzentrieren, sollten Sie auf eine dem Benutzer vertraute Weise speziell für diese Plattform erstellen. Sie möchten, dass sich Ihre Benutzer in Ihrer App wie zu Hause fühlen. Dies erreichen Sie am besten, indem Sie die Richtlinien für ihre Plattform befolgen.

14
Michael Celey

Ich denke, die allgemeine Verwirrung ist, dass es bei der Metro-Benutzeroberfläche (oder der modernen Benutzeroberfläche, wie sie jetzt genannt wird) anscheinend nur um die Verwendung großer flacher Kacheln geht, und es gibt Verwirrung darüber, wie dies in das Design von cross integriert werden könnte Plattform-Apps . Sie müssen sich jedoch darüber im Klaren sein, dass Microsoft Live-Kacheln oder flache Kacheln als Referenzpunkte verwendet, um den Fokus der Einfachheit und des Inhalts auf Inhalte zu lenken, indem große Typografien und Animationen verwendet werden, um den Informationsfluss flüssiger zu gestalten. Die Gestaltungsprinzipien von Metro Design, die angewendet werden können überall sind:

  1. Zeigen Sie Stolz auf Handwerkskunst: Einfach ausgedrückt, arbeiten Sie daran, Ihre Designs so pixelgenau wie möglich zu gestalten, und stellen Sie sicher, dass die kleinen Details berücksichtigt werden

  2. Seien Sie schnell und flüssig: Einfach ausgedrückt: Reagieren Sie auf Benutzerinteraktionen und bereiten Sie sich auf die nächste Interaktion vor, sodass Sie mit jeder Interaktion einen aussagekräftigen Benutzerfluss erstellen

  3. Authentisch digital sein: Einfach ausgedrückt, seien Sie sich bewusst, dass Sie mit dem digitalen Medium zu tun haben, und versuchen Sie, die im digitalen Medium angebotenen Funktionen zu verwenden, um Ihren Benutzerfluss zu zeigen. Beispiele für die ordnungsgemäße Verwendung wären der Benutzer lebendiger Farben, um den Benutzerfokus zu fördern, und die Verwendung großer Schriftarten, um Aktionen für Inhalte aufzurufen. Mit anderen Worten, versuchen Sie, Skeumorphs zu vermeiden

  4. Mit weniger mehr erreichen: Einfach ausgedrückt, ermöglichen Sie dem Benutzer, direkt mit Inhalten zu interagieren, ohne sich mit vielen störenden Elementen auseinandersetzen zu müssen.

  5. Win as one: Einfach ausgedrückt, stellen Sie sicher, dass es eine minimalistische Redundanz gibt und dass das Design über mehrere Faktoren und Layouts hinweg konsistent ist.

Alle diese Designprinzipien können auf jede Designoberfläche angewendet werden, und es gibt einige Apps, die es geschafft haben, sie ziemlich gut umzusetzen, wie unten gezeigt

enter image description here

enter image description here

enter image description here

enter image description here

enter image description here

enter image description here

Das heißt, stellen Sie sicher, dass Sie beim Entwerfen Ihrer Apps die Entwurfsprinzipien der Plattform befolgen, für die Sie entwerfen, damit die Benutzer wissen, wie sie über die App navigieren können, da sie Konsistenz in der Navigation erwarten würden.

2
Mervin

Ich war auch vom Metro-Stil beeindruckt und ich denke, es lohnt sich, ihn auf anderen Plattformen zu erkunden. Wenn ein Benutzer ein Windows Phone und ein iPad hat, wäre es auf jeden Fall schön, die gleiche konsistente Erfahrung zu haben. Auf der anderen Seite denke ich, dass besondere Vorsicht geboten ist, wenn Interaktionen eingeführt werden, die sich drastisch von denen unterscheiden, die unter iOS oder Android, um Benutzer nicht zu verwirren. Zum Beispiel unter iOS ein Klick auf Inhalte können eine Symbolleiste aufrufen. Benutzer können davon ausgehen, dass dies auch in Ihrer App funktioniert. Es gibt einige Benutzeroberflächen (z. B. Twitter-App auf dem iPad), die sich nicht strikt an die Interaktionsrichtlinien für iOS halten, aber die App ist dennoch recht intuitiv und einfach benutzen.

0
Anna Rouben

Meine letzte App verwendet ein flaches Design (oh ja, ich bevorzuge diesen neutralen Begriff gegenüber dem herstellerzentrierten) .

Bisher ist das Feedback positiv . Ich weiß nicht, welcher UI-Stil immer besser ist. Trotzdem hat mich folgendes Zitat inspiriert:

„Beliebte Produkte im Internet haben eine ähnliche Designästhetik mit ungefähr den gleichen Arten von Fasen, eingelassenen Schatten und Schlagschatten. Für Designer ist das Erreichen dieses Niveaus der „leckbaren“ Benutzeroberfläche ein Punkt des Stolzes. Für uns und für eine Minderheit von UI-Designern da draußen fühlt es sich falsch an. “

~ Allan Grinshtein (Layervault)

0
ohho

Nur bis zu einem gewissen Punkt.

Die Idee, Boxen zu verwenden, ist keine moderne Benutzeroberfläche (übrigens nennen sie es nicht mehr Metro). Boxen sind in Ordnung, manchmal ist es eine wirklich gute Idee, sie zu verwenden, aber wenn Sie zu tief in eine andere Benutzeroberfläche eintauchen, werden die erlernten, üblichen Arten der Benutzerinteraktion mit dem Gerät missbraucht.

Die einzige Ausnahme ist eine Situation, in der Sie die Funktionen einer anderen Schnittstelle präsentieren möchten. Dann kannst du wild werden.

0
Dominik Oslizlo