Veröffentlicht: 28. Februar 2014
Mit den folgenden Tipps können Sie die Nutzerfreundlichkeit Ihrer Anwendung verbessern.
flackern, wenn die Anwendung geladen wird
Haben Sie schon einmal bemerkt, dass eine Anwendung, die mit einer WebView geladen wird, kurz schwarz-weiß erscheint? Das kann durch das Laden der Fensterhintergrundfarbe der App verursacht werden, die normalerweise im Design festgelegt ist, gefolgt vom weißen Aufblitzen des WebView-Hintergrunds. Das geschieht, bevor WebView Inhalte lädt, einschließlich des CSS.
Wenn Sie das weiße Aufflackern entfernen möchten, legen Sie die Hintergrundfarbe der WebView fest. Die einzige Verzögerung bei der Darstellung dieser Farbe tritt in der mobilen App beim Zeichnen der WebView auf.
mWebView.setBackgroundColor(Color.parseColor("#3498db"));
Unter Android empfiehlt es sich, Farbwerte in einer res/values/colors.xml
-Datei zu definieren, wie im Leitfaden zu Android-App-Ressourcen beschrieben.
Wenn Sie eine in den Ressourcen der Anwendung definierte Farbe auswählen, könnte der Code so aussehen:
mWebView.setBackgroundColor(getResources().getColor(R.color.my_color_name));
Haptisches Feedback
Ein Unterschied zwischen mobilen und Web-Anwendungen besteht darin, dass viele Web-Apps kein Touch-Feedback bieten.
Verwenden Sie die Pseudoklasse :active
, um dieses Problem zu beheben.
Angenommen, Sie haben eine Schaltfläche mit dem folgenden Stil:
.btn {
display: inline-block;
position: relative;
background-color: #f39c12;
padding: 14px;
border-radius: 5px;
border-bottom-style: solid;
border-width: 4px;
border-color: #DA8300;
}
Der gedrückte Zustand kann so aussehen:
.btn:active {
background-color: #E68F05;
border-color: #CD7600;
border-width: 2px;
top: 2px;
}
Dadurch werden die Hintergrund- und Rahmenfarbe leicht abgedunkelt und die Rahmengröße verringert, sodass es so aussieht, als würde die Schaltfläche in die Seite einsinken. Mit der Eigenschaft top
wird die Position so angepasst, dass der kleinere Rahmen ausgeglichen wird.
Wenn Sie Sass verwenden, können Sie die Farben von Elementen mit den Mixins „darken“ und „lighten“ ändern, ohne den genauen Hexadezimalwert zu kennen. Alternativ können Sie auch Online-Tools wie hexcolortool.com verwenden.
System – Highlights
Viele User-Agents fügen Elementen eine Art Touch-Feedback hinzu, sodass keine bestimmten Stile definiert werden müssen. In der WebView sehen Sie möglicherweise orangefarbene Elemente oder einen orangefarbenen Ring um Links und Elemente.
Wenn Sie benutzerdefiniertes Feedback für Berührungen und Fokus hinzufügen, können Sie die Standardeinstellungen mit den folgenden CSS-Eigenschaften überschreiben:
-webkit-tap-highlight-color: rgba(0,0,0, 0.0);
outline: none;
und legen Sie Ihre eigenen Farben fest:
button {
outline: 0;
-webkit-tap-highlight-color: rgba(0,0,0, 0.0);
}
button:focus {
background-color: #E68F05;
border-color: #DA8300;
}
button:active {
background-color: #FFA91F;
border-color: #E68F05;
}
Dadurch ändert sich die Farbe der Schaltfläche je nach Status, einschließlich Standardstatus, Fokusstatus und aktivem (oder „gedrücktem“) Status.
Sie können diese Properties nicht nur für Schaltflächen, sondern auch für Eingabefelder und Anker-Tags festlegen.