Mẹo và thủ thuật

Ngày xuất bản: 28 tháng 2 năm 2014

Hãy nâng cao trải nghiệm người dùng của ứng dụng bằng các mẹo sau.

Nhấp nháy khi ứng dụng tải

Bạn đã bao giờ thấy một tia chớp đen trắng khi một ứng dụng tải lên bằng WebView chưa? Điều này có thể là do quá trình tải màu nền cửa sổ của ứng dụng, thường được đặt trong giao diện, theo sau là ánh sáng trắng của nền WebView. Quá trình này xảy ra trước khi WebView tải bất kỳ nội dung nào, bao gồm cả CSS.

Để xoá ánh sáng trắng, hãy đặt màu nền của WebView. Độ trễ duy nhất trong việc hiển thị màu này là trong ứng dụng di động để vẽ WebView.

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

Trên Android, bạn nên xác định giá trị màu trong tệp res/values/colors.xml, như mô tả trong Hướng dẫn về tài nguyên ứng dụng Android. Nếu bạn chọn một màu được xác định trong tài nguyên của ứng dụng, thì mã có thể có dạng như sau:

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

Phản hồi khi chạm

Một điểm khác biệt giữa ứng dụng di động và ứng dụng web là nhiều ứng dụng web không có phản hồi cảm ứng.

Để giải quyết vấn đề này, hãy sử dụng lớp giả :active.

Ví dụ: nếu bạn có một nút có kiểu sau:

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

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

Trạng thái nhấn có thể trông giống như sau:

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

Thao tác này làm tối màu nền và màu đường viền một chút, đồng thời giảm kích thước đường viền để trông như nút đang chìm vào trang. Thuộc tính top điều chỉnh vị trí để cân bằng đường viền nhỏ hơn.

Nếu sử dụng Sass, bạn có thể sử dụng các mixin làm tối và làm sáng để thay đổi màu của các phần tử mà không cần biết giá trị hex chính xác. Hoặc bạn có thể sử dụng các công cụ trực tuyến như hexcolortool.com.

Điểm nổi bật của hệ thống

Nhiều tác nhân người dùng thêm một số hình thức phản hồi cảm ứng vào các phần tử, giúp bạn không cần xác định các kiểu cụ thể. Trong WebView, bạn có thể thấy màu cam trên các phần tử hoặc vòng tròn màu cam xung quanh các đường liên kết và phần tử.

Nếu thêm phản hồi chạm và lấy tiêu điểm tuỳ chỉnh, bạn có thể ghi đè các giá trị mặc định bằng các thuộc tính CSS sau:

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

Và đặt màu của riêng bạn:

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

Thao tác này sẽ thay đổi màu nút dựa trên trạng thái, bao gồm trạng thái mặc định, tiêu điểm và trạng thái đang hoạt động (hoặc "được nhấn").

Ngoài các nút, hãy cân nhắc đặt các thuộc tính này trên trường nhập và thẻ neo.