提示和技巧

发布时间：2014 年 2 月 28 日

您可以参考以下提示，提升应用的用户体验。

应用加载时闪烁

您是否曾注意到，在应用加载 WebView 时会闪烁黑白画面？ 这可能是因为应用的窗口背景颜色（通常在主题中设置）加载后，WebView 背景出现了白色闪烁。这发生在 WebView 加载任何内容（包括 CSS）之前。

如需移除白色闪烁，请设置 WebView 的背景颜色。显示此颜色的唯一延迟是在移动应用中绘制 WebView。

mWebView.setBackgroundColor(Color.parseColor("#3498db"));

在 Android 上，最好在 res/values/colors.xml 文件中定义颜色值，如 Android 应用资源指南中所述。如果您选择在应用资源中定义的颜色，代码可能如下所示：

mWebView.setBackgroundColor(getResources().getColor(R.color.my_color_name));

触摸反馈

移动应用与 Web 应用之间的一个区别是，许多 Web 应用缺少触摸反馈。

如需解决此问题，请使用 :active 伪类。

例如，如果您有一个采用以下样式的按钮：

.btn {
  display: inline-block;
  position: relative;
  background-color: #f39c12;
  padding: 14px;

  border-radius: 5px;
  border-bottom-style: solid;
  border-width: 4px;
  border-color: #DA8300;
}

按下状态可能如下所示：

.btn:active {
  background-color: #E68F05;
  border-color: #CD7600;
  border-width: 2px;
  top: 2px;
}

这会略微使背景颜色和边框颜色变深，并减小边框大小，使按钮看起来像是陷入页面中。top 属性会调整位置，以平衡较小的边框。

如果您使用的是 Sass，则可以使用“darken”和“lighten”mixin 来更改元素的颜色，而无需知道确切的十六进制值。或者，您也可以使用在线工具，例如 hexcolortool.com。

系统亮点

许多用户代理都会向元素添加某种形式的轻触反馈，这样就无需定义特定样式。在 WebView 中，您可能会看到元素呈现橙色，或者链接和元素周围出现橙色圆环。

如果您添加了自定义触摸和焦点反馈，则可以使用以下 CSS 属性替换默认值：

-webkit-tap-highlight-color: rgba(0,0,0, 0.0);
outline: none;

并设置您自己的颜色：

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;
}

这会根据状态（包括默认、聚焦和活动 [或“按下”] 状态）更改按钮颜色。

除了按钮之外，不妨考虑在输入字段和锚点标记上设置这些属性。