提示和祕訣

發布日期：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));

觸覺回饋

行動應用程式和網頁應用程式之間的一個差異，是許多網頁應用程式缺乏觸控回饋。

如要解決這個問題，請使用 :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，可以使用深色和淺色混合函式變更元素的顏色，而不需要知道確切的十六進位值。您也可以使用線上工具，例如 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;
}

這會根據狀態變更按鈕顏色，包括預設、聚焦和啟用 (或「按下」) 狀態。

除了按鈕之外，建議您在輸入欄位和錨點標記上設定這些屬性。