ไอคอนมุมมองรายการมีลักษณะคล้ายกับไอคอนกล่องโต้ตอบมาก แต่จะใช้เอฟเฟกต์เงาด้านใน
ซึ่งแหล่งกำเนิดแสงอยู่เหนือออบเจ็กต์ นอกจากนี้ ยังออกแบบมาให้ใช้ใน ListView เท่านั้น ตัวอย่างเช่น แอปพลิเคชันการตั้งค่า
ดังที่อธิบายไว้ในการเตรียมชุดไอคอนตามความหนาแน่น คุณควรสร้างชุดไอคอนแยกต่างหากสำหรับหน้าจอความหนาแน่นต่ำ ปานกลาง และสูง ซึ่งจะช่วยให้มั่นใจได้ว่าไอคอนจะแสดงอย่างถูกต้องในอุปกรณ์ต่างๆ ที่ติดตั้งแอปพลิเคชันของคุณได้ ดูตารางที่ 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 พิกเซลใน Photoshop เว้นระยะห่าง 1 พิกเซลรอบกรอบล้อมภายในเทมเพลต
|
รูปที่ 1 SafeFrame และการไล่ระดับสีเติมสำหรับมุมมองรายการ ไอคอน ขนาดไอคอนคือ 32x32 |
แสง เอฟเฟกต์ และเงา
ไอคอนมุมมองรายการเป็นแบบแบนและแสดงภาพด้านหน้าพร้อมเงาด้านใน สร้างขึ้น ด้วยการไล่ระดับสีอ่อนและเงาด้านใน ทำให้โดดเด่นบนพื้นหลังสีเข้ม
|
รูปที่ 2 แสง เอฟเฟกต์ และเงาสำหรับมุมมองรายการ ไอคอน
|
|||||||||
ทีละขั้นตอน
|