เคล็ดลับและคำแนะนำ

เผยแพร่: 28 กุมภาพันธ์ 2014

ปรับปรุงประสบการณ์ของผู้ใช้แอปพลิเคชันด้วยเคล็ดลับต่อไปนี้

ภาพกะพริบเมื่อแอปพลิเคชันโหลด

คุณเคยเห็นภาพสีขาวดำกะพริบเมื่อแอปพลิเคชันโหลด 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 คุณสามารถใช้มิกซ์อิน darken และ lighten เพื่อเปลี่ยนสีขององค์ประกอบได้โดยไม่ต้องทราบค่าฐาน 16 ที่แน่นอน หรือจะใช้เครื่องมือออนไลน์อย่าง hexcolortool.com ก็ได้

ไฮไลต์ของระบบ

User Agent จำนวนมากจะเพิ่มการตอบกลับการสัมผัสรูปแบบหนึ่งๆ ให้กับองค์ประกอบ ซึ่งทำให้ไม่ต้องกำหนดสไตล์ที่เฉพาะเจาะจง ใน 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;
}

ซึ่งจะเปลี่ยนสีปุ่มตามสถานะต่างๆ ซึ่งรวมถึงสถานะเริ่มต้น โฟกัส และใช้งานอยู่ (หรือ "กด")

นอกจากปุ่มแล้ว ให้พิจารณาตั้งค่าพร็อพเพอร์ตี้เหล่านี้ในช่องป้อนข้อมูลและแท็กแองเคอร์ด้วย