ไอคอนกล่องโต้ตอบจะแสดงในกล่องโต้ตอบแบบป๊อปอัปที่แจ้งให้ผู้ใช้โต้ตอบ โดยใช้การไล่สีอ่อนและเงาด้านในเพื่อให้โดดเด่นบนพื้นหลังสีเข้ม
ดังที่อธิบายไว้ในการเตรียมชุดไอคอนตามความหนาแน่น คุณควรสร้างชุดไอคอนแยกต่างหากสำหรับหน้าจอความหนาแน่นต่ำ ปานกลาง และสูง ซึ่งจะช่วยให้มั่นใจได้ว่าไอคอนจะแสดงอย่างถูกต้องในอุปกรณ์ต่างๆ ที่ติดตั้งแอปพลิเคชันของคุณได้ ดูตารางที่ 1 เพื่อดูรายการขนาดไอคอนที่แนะนำสำหรับความหนาแน่นแต่ละระดับ นอกจากนี้ โปรดดูเคล็ดลับสำหรับนักออกแบบ เพื่อดูคำแนะนำเกี่ยวกับวิธีทำงานกับชุดไอคอนหลายชุด
ตารางที่ 1 สรุปขนาดไอคอนของกล่องโต้ตอบที่เสร็จสมบูรณ์แล้ว สำหรับความหนาแน่นทั่วไปของหน้าจอทั้ง 3 แบบ
ldpi (120 dpi)(หน้าจอความหนาแน่นต่ำ) |
mdpi (160 dpi)(หน้าจอความหนาแน่นปานกลาง) |
hdpi (240 dpi)(หน้าจอความหนาแน่นสูง) |
xhdpi (320 dpi)(หน้าจอความหนาแน่นสูงพิเศษ) |
|
|---|---|---|---|---|
| ขนาดไอคอนกล่องโต้ตอบ | 24 x 24 พิกเซล | 32 x 32 พิกเซล | 48 x 48 พิกเซล | 64 x 64 พิกเซล |
ต้องส่งออกภาพสุดท้ายเป็นไฟล์ PNG แบบโปร่งใส อย่าใส่ สีพื้นหลัง
เทมเพลตสำหรับสร้างไอคอนใน Adobe Photoshop มีอยู่ในชุดเทมเพลต ไอคอน
Android ทุกเวอร์ชัน
หลักเกณฑ์ต่อไปนี้อธิบายวิธีออกแบบไอคอนกล่องโต้ตอบสำหรับแพลตฟอร์ม Android ทุกเวอร์ชัน
โครงสร้าง
- ไอคอนกล่องโต้ตอบมีกรอบปลอดภัย 1 พิกเซล รูปร่างพื้นฐานต้องพอดีกับ กรอบปลอดภัย แต่การป้องกันรอยหยักของรูปร่างกลมสามารถทับซ้อนกับกรอบปลอดภัยได้
- มิติข้อมูลทั้งหมดที่ระบุในหน้านี้อิงตามขนาดอาร์ตบอร์ด 32x32 พิกเซลใน Adobe Photoshop เว้นระยะห่าง 1 พิกเซลรอบกล่องขอบเขตภายใน เทมเพลต Photoshop
|
รูปที่ 1 Safeframe และการไล่ระดับสีสำหรับไอคอนกล่องโต้ตอบ ขนาดไอคอนคือ 32x32 |
แสง เอฟเฟกต์ และเงา
ไอคอนกล่องโต้ตอบเป็นแบบแบนและแสดงภาพจากด้านหน้า โดยจะสร้างขึ้นโดยใช้การไล่ระดับสีอ่อนและเงาด้านในเพื่อให้โดดเด่นตัดกับพื้นหลังสีเข้ม
|
รูปที่ 2 แสง เอฟเฟกต์ และเงาสำหรับไอคอนกล่องโต้ตอบ
|
ทีละขั้นตอน
|