Navigieren Sie, wie die Benutzer in einem Touch-Screen-Welt
Die Art und Weise, dass Ihre Website-Besucher mit Ihren Seiten interagieren und Ihre Links navigieren unterscheidet sich dramatisch auf einem iPhone oder iPad als ein Desktop-Computer oder Laptop. Besucher der Website ein iPhone oder iPad verwenden, um ihre Finger mit - nicht eine Maus, eine Tastatur oder Stift. Das bedeutet, dass Links sollte einfach zu identifizieren und groß genug, dass die Benutzer nicht versehentlich zu viele klicken Sie auf zu einer Zeit mit der Fingerspitze.
Denken Sie auch daran, dass Rollover-Effekte auf einem iPhone oder iPad nicht die gleiche Art und Weise funktionieren, wie sie auf einem Desktop-Browser. Rollover-Effekte und ähnliche Hover-Effekte, die etwas bewirken zu passieren als ein Benutzer einen Cursor über ein Bild rollt oder ein anderes Element auf einer Webseite, werden automatisch konvertiert, um "auf Klick" Ereignisse in einem iPhone oder iPad.
In dieser Figur sieht man eine gemeinsame Design-Technik im Web - eine Reihe von Miniaturbildern, die auf größere Versionen verknüpft sind. Auf Ihrem Computer, dann würden Sie Ihren Mauszeiger über jedes Bild rollen die größere version- auf einem iPad diese Überschlagsereignisse Links umgewandelt werden würde, um zu sehen, durch die Berührung eines Fingers ausgelöst.
Gestalten Sie Ihre Links auf dem Touchscreen zu arbeiten, und stellen Sie sicher, zu prüfen, ob Rollover-Effekte und Drop-Down-Menüs kann mit einem Fingerdruck aktiviert werden kann, sowie eine Maus.
Um die Navigation einfach für iPhone und iPad Besucher, müssen Sie
Machen Sie Links einfach zu klicken: Separate Verbindungen mit genügend Platz zwischen ihnen zu erleichtern, ihnen nur eine Fingerspitze zu tippen. (Als Richtlinie empfiehlt Apple, dass Links von 44 Pixeln Raum zu besetzen mindestens 44 Pixel eingestellt werden.)
Diese Empfehlung ist für das iPhone und iPad, weil es auf die Größe eines Fingers basiert, nicht auf die Auflösung des Geräts oder die Größe des Bildschirms. (Auch wenn einige Finger sind dicker als andere, ist 44 Pixel ein guter Richtwert.)
Machen Sie Links leicht zu sehen: Style-Links, so dass sie leicht von anderen Text und Elemente auf einer Seite zu unterscheiden. Denken Sie daran, dass Ihre Besucher abgelenkt werden kann, oder in Eile und kann bei schlechten Lichtverhältnissen oder, schlimmer noch, helles Licht, wenn eine dieser höchst portable Geräte. Unterscheiden Sie Links mit Hilfe von Text und Bildern, dass in starkem Kontrast zu dem Hintergrund.
Organisieren Links: Konzern-Links zu Elementen zusammen, und wenn Sie ein Unternavigationsmenü innerhalb einer Website haben, organisieren diese Links in ihre eigenen, leicht zu erkennen Abschnitte.
Auf dem kleineren iPhone-Bildschirm, Platz Navigationsmenüs am unteren Rand des Bildschirms, nicht an der Spitze: Navigations-Links kann viel Platz auf einem Handy-Display zu besetzen.
Anstatt Unordnung der Spitze Ihres Design mit Links, umfassen eine einzelne Menü-Taste am oberen Rand jeder Seite, wie in diesem Entwurf gezeigt, und einen Link erstellen, der nach unten springt, wo Sie mehr Links enthalten können, ohne vergraben der Inhalt.
Das Design in dieser Figur gezeigt wurde Microsoft von dem talentierten Designer Sia Ea, geschaffen, die bei ansible Mobile funktioniert.