หน้านี้ได้รับการแปลโดย Cloud Translation API

รูปภาพและกราฟิก

แม้ว่าแอปจะมีได้เฉพาะข้อความและสี แต่คุณอาจต้องการเพิ่มองค์ประกอบภาพอื่นๆ เช่น โลโก้หรือภาพวาด Android มีแนวทางปฏิบัติแนะนำเฉพาะสำหรับการเพิ่มกราฟิกลงในแอป รวมถึงไลบรารีต่างๆ เพื่อสร้างเอฟเฟกต์กราฟิกหรือเพิ่มการเคลื่อนไหว

เนื้อหา Android เรียกว่า drawable ซึ่งเป็นทรัพยากรประเภทหนึ่งที่ วาดบนหน้าจอ ซึ่งรวมถึงแต่ไม่จำกัดเพียงบิตแมป รูปร่าง และ เวกเตอร์

โปรดคำนึงถึงสิ่งต่อไปนี้เมื่อสร้างรูปภาพและกราฟิก

หลีกเลี่ยงการใส่ข้อความที่แก้ไขไม่ได้ในชิ้นงาน
ใช้รูปแบบเวกเตอร์ก่อนทุกครั้งที่ทำได้
ระบุชิ้นงานสำหรับที่เก็บข้อมูลความละเอียด
เว้นระยะห่างระหว่างรูปภาพพื้นหลังกับข้อความให้เพียงพอ
แม้ว่า Android จะสร้างเอฟเฟกต์รูปภาพต่างๆ ได้ เช่น การไล่ระดับสี การใส่สี และการเบลอ แต่บางเอฟเฟกต์ก็ใช้ทรัพยากรมาก
Animated Vector Drawable มีรูปแบบที่ปรับขนาดได้สำหรับภาพเคลื่อนไหว UI ขนาดเล็ก

วิธีส่งออกชิ้นงานสำหรับ Android

จัดรูปแบบชื่อชิ้นงานเป็นตัวพิมพ์เล็ก
ตั้งค่าชิ้นงานแบบเรียบง่ายให้ส่งออกเป็น SVG
ตั้งค่ารูปภาพที่ซับซ้อน เช่น รูปถ่าย ให้ส่งออกเป็น WebP, PNG, JPG
ตั้งค่าการปรับขนาดความละเอียดที่ถูกต้องตามที่แสดงในตารางต่อไปนี้

ขนาดหน้าจอ	สเกล
mdpi	x1
hdpi	x1.5
xhdpi	x2
xxhdpi	x3
xxxhdpi	x4

คุณจะเลือกแปลง SVG เป็น Vector Drawables (VD) โดยใช้ Android Studio ก็ได้ จัดระเบียบชิ้นงานเป็นไดเรกทอรีที่สอดคล้องกับความละเอียดสำหรับการส่งต่อตามที่แสดงในรูปภาพต่อไปนี้ เช่น ใส่ขนาดหน้าจอในชื่อโฟลเดอร์

**รูปที่ 2** ไดเรกทอรี res ที่จัดระเบียบ

ประเภทเนื้อหา

Android รองรับชิ้นงานประเภทต่อไปนี้

เวกเตอร์

กราฟิกเวกเตอร์เป็นรูปแบบที่ไม่สูญเสียข้อมูล ซึ่งหมายความว่าเมื่อปรับขนาดแล้ว ข้อมูลภาพจะไม่สูญหาย เวกเตอร์ประกอบด้วยจุดทางคณิตศาสตร์ที่ เติมเพื่อสร้างรูปภาพ

รูปแบบเวกเตอร์

Android รองรับรูปแบบรูปภาพเวกเตอร์ต่อไปนี้ SVG และ Vector Drawables

Vector Drawables มีลักษณะคล้ายกับ SVG แต่เป็นแบบ XML นอกจากนี้ยังรองรับ แอตทริบิวต์ต่างๆ เช่น การไล่ระดับสี ดูข้อมูลเพิ่มเติมเกี่ยวกับสิ่งที่รองรับได้ที่ VectorDrawable คุณสามารถแปลง SVG เป็น Vector Drawable ได้ผ่าน Vector Asset Studio

กรณีการใช้งาน

เนื่องจากมีขนาดเล็ก จึงควรสร้างไอคอนโดยใช้รูปแบบเวกเตอร์ คุณใช้ Animated Vector Drawable เพื่อเพิ่มการเคลื่อนไหวให้กับไอคอนได้

ภาพประกอบคือกราฟิกที่ช่วยนำทางผู้ใช้ อธิบายแนวคิด หรือ แสดงความคิด โดยปกติแล้วจะแสดงถึงสไตล์ของแบรนด์
ภาพฮีโร่เป็นองค์ประกอบที่เน้นย้ำอย่างมากในบรรดาเนื้อหาอื่นๆ โดยใช้เพื่อกำหนดรูปลักษณ์โดยรวมและอธิบายข้อมูลหลัก
ภาพประกอบเฉพาะจุดมีขนาดเล็กกว่า โดยปกติจะอยู่แบบอินไลน์และสนับสนุนเนื้อหาโดยรอบ

แรสเตอร์

กราฟิกแบบสูญเสียหรือกราฟิกที่สูญเสียรายละเอียดเมื่อมีการดัดแปลงผ่าน การบีบอัดหรือการปรับขนาดประกอบด้วยพิกเซลเพื่อสร้างรูปภาพ กราฟิกแรสเตอร์ มักใช้กับรูปภาพที่มีรายละเอียด เช่น รูปภาพหรือการไล่ระดับสีที่ซับซ้อน เนื่องจากรูปภาพเหล่านี้จะสูญเสียรายละเอียดเมื่อปรับขนาด ให้ส่งออกรูปภาพเหล่านี้ในหลายความละเอียด

รูปแบบแรสเตอร์

Android รองรับรูปแบบภาพแรสเตอร์ต่อไปนี้ PNG, GIF, JPG, WebP

กรณีการใช้งาน

กรณีการใช้งาน ได้แก่ รูปภาพที่มีพื้นผิวหลากหลายซึ่งส่งผลให้มีจานสี และการไล่ระดับสีที่หลากหลาย หรือรูปภาพที่มีชุดจุดเบซิเยร์ ที่ซับซ้อนมากเกินไป กรณีการใช้งานยังรวมถึงชิ้นงานรูปภาพที่มีรายละเอียดสูง เช่น รูปภาพผลิตภัณฑ์ รายละเอียดสถานที่ และอื่นๆ

การกำหนดขนาด

โปรดคำนึงถึงข้อควรพิจารณาต่อไปนี้เมื่อสร้างชิ้นงาน

กลุ่มการแก้ไข

แอปควรมีกราฟิกบิตแมปตามช่วงความหนาแน่นของหน้าจอหรือ กลุ่ม ระบบปฏิบัติการจะแสดงกราฟิกที่ถูกต้องโดยอัตโนมัติ ในอุปกรณ์ที่เป็นปัญหาโดยใช้ที่เก็บข้อมูลเหล่านี้ ตรวจสอบว่ากราฟิกที่มีความเที่ยงตรงสูงแสดงบนอุปกรณ์ทุกเครื่องโดยระบุชิ้นงานสำหรับแต่ละกลุ่ม

ตัวอย่างขนาดความละเอียดของรูปภาพและป้ายกำกับกลุ่ม — **รูปที่ 5** แคนตาลูปปาร์ตี้ที่มีความหนาแน่นและขนาดที่เหมาะสมสำหรับการส่งออก

Padding

ไอคอนและชิ้นงานขนาดเล็กที่คล้ายกันควรมีระยะเว้นภายใน (ในตัว) เพื่อให้ชิ้นงานมีพื้นที่เป้าหมายการสัมผัสเพียงพอและมีขนาดที่สอดคล้องกัน

**รูปที่ 6** ไอคอน 24 dp ที่มีระยะขอบในตัวชิ้นงาน

ชื่อไฟล์

ชิ้นงาน Android จะเป็นตัวพิมพ์เล็กและไม่มีคำต่อท้ายความละเอียด

ใช้แบบแผนการตั้งชื่อและโครงสร้างที่สอดคล้องกันเพื่อจัดระเบียบไฟล์และ โปรเจ็กต์ เช่น การตั้งชื่อไอคอนด้วยคำนำหน้า "ic_…" จะช่วย จัดระเบียบไอคอนทั้งหมดในโปรเจ็กต์ และช่วยระบุไอคอนได้อย่างรวดเร็วในระหว่าง การพัฒนา

ชิ้นงานแอปอื่นๆ

**รูปที่ 7** ไอคอน Launcher และหน้าจอเริ่มต้นแบบขาวดำ

ไอคอนแอป

ไอคอน Launcher จะอยู่ในหน้าจอหลัก ค้นหาไอคอนขาวดำใน UI ของระบบ ซึ่งรวมถึงการแจ้งเตือน แถบสถานะ และวิดเจ็ตขาวดำ

จัดรูปแบบไอคอนแอปเป็นเนื้อหาที่วาดได้แบบเวกเตอร์สำหรับไอคอนแบบปรับอัตโนมัติ และ PNG สำหรับไอคอนรุ่นเดิม ดูข้อมูลเพิ่มเติมเกี่ยวกับการสร้างและแสดงตัวอย่างไอคอนแอปได้ที่ ออกแบบและแสดงตัวอย่างไอคอนแอป

หน้าจอแนะนำ

ตั้งแต่ Android 12 เป็นต้นไป แอปจะแสดงหน้าจอเริ่มต้นแบบเคลื่อนไหว ซึ่งมีไอคอนแอปขณะที่แอปเปิดขึ้น

ตำแหน่ง

สังเกตว่ารูปภาพควรปรับขนาดและจัดตำแหน่งบนหน้าจออย่างไร พอดี ครอบตัด FillHeight, FillWidth, FillBounds, Inside และไม่ปรับขนาดพร้อมให้ตั้งค่า การปรับขนาดในรูปภาพ

นอกจากนี้ คุณยังตัดรูปภาพให้เป็นรูปร่างเพื่อสร้างเอฟเฟกต์เพิ่มเติมได้ด้วย

การครอบตัดที่ปรับเปลี่ยนตามพื้นที่โฆษณา

หากต้องการแสดงรูปภาพแบบปรับเปลี่ยนตามพื้นที่โฆษณา ให้กำหนดวิธีครอบตัดรูปภาพใน ช่วงเบรกพอยต์ต่างๆ การครอบตัดในขีดจำกัดช่วงเบรกพอยต์ต่างๆ จะทำได้ดังนี้

รักษาสัดส่วนคงที่ไว้ 1 รายการ
ปรับให้เข้ากับอัตราส่วนต่างๆ
รักษาความสูงของรูปภาพให้คงที่

รักษาสัดส่วนไว้

การปรับขนาดรูปภาพสามารถคงสัดส่วนคงที่ไว้ 1 รายการในช่วงเบรกพอยต์

**รูปที่ 9** รูปภาพที่แสดงในสัดส่วนภาพต่างๆ

ปรับให้เข้ากับอัตราส่วนต่างๆ

อัตราส่วนรูปภาพอาจเปลี่ยนแปลงได้โดยการปรับให้เข้ากับช่วงเบรกพอยต์ต่างๆ เช่น ในรูปที่ 9 สัดส่วนรูปภาพจะเปลี่ยนจาก 1:1 เป็น 16:9 ระหว่างเบรกพอยต์

ความสูงของรูปภาพคงที่

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

เอฟเฟกต์

Android มีเอฟเฟกต์รูปภาพในตัวหลายแบบ เอฟเฟกต์ที่พบบ่อยมีดังนี้

การไล่ระดับสี

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

แปรงไล่ระดับสีสามารถสร้างการไล่ระดับสีขั้นสูงได้โดยการเพิ่มจุดหยุดสี และการวางเรียงต่อกัน ตราบใดที่คุณระบุรายการสีและเปอร์เซ็นต์ที่ จุดหยุดเกิดขึ้น ใช้คอนเทนเนอร์หรือรูปร่างเพื่อครอบตัดการไล่ระดับสี การเติมสีทึบ หรือ รูปภาพ

**รูปที่ 10** แปลการไล่ระดับสีจาก Figma โดยใช้ตัวแก้ไข Compose

เบลอ

ใช้เอฟเฟกต์เบลอกับรูปภาพโดยใช้เมธอด Modifier.blur() และ ระบุอัตราส่วนการเบลอ โปรดใช้การเบลอด้วยความระมัดระวังเนื่องจากอาจส่งผลต่อ ประสิทธิภาพและใช้ได้เฉพาะในอุปกรณ์ที่ใช้ Android 12 ขึ้นไปเท่านั้น ดูข้อมูลเพิ่มเติมได้ที่ฟังก์ชันที่ใช้ร่วมกันได้ของรูปภาพเบลอ

โหมดการผสม

Android สามารถแก้ไขรูปภาพผ่านการดำเนินการบูลีนและ โหมดการผสมที่คล้ายกันซึ่งคุณอาจเห็นในซอฟต์แวร์ออกแบบ เช่น ยูเนียนหรือคูณ ดูข้อมูลเพิ่มเติมได้ที่ BlendMode

การปรับสมดุลสีเขียว-แดง

ใช้โหมดการผสมและสีเติมเพื่อปรับสีชิ้นงาน ซึ่งช่วยให้คุณมีชิ้นงานเดียว และใช้สีต่างๆ กับชิ้นงานนั้นได้ ซึ่งจะช่วยลดจำนวนชิ้นงานที่สร้างขึ้น

**รูปที่ 11** ชิ้นงานที่มีเฉดสีแตกต่างกันซึ่งใช้เพื่อเสริมสีของเนื้อหาหรือเพื่อระบุสถานะต่างๆ

การเคลื่อนไหว

คุณสามารถสร้างภาพเคลื่อนไหวแบบเป็นโปรแกรมเพื่อสร้างกราฟิกเคลื่อนไหวแทนการอัปโหลดไฟล์การเคลื่อนไหวได้ ซึ่งจะช่วยให้มีความยืดหยุ่นมากขึ้นและใช้ทรัพยากรของชิ้นงานน้อยลง

Animated Vector Drawables ช่วยให้คุณสร้างภาพเคลื่อนไหว UI ขนาดเล็กได้ หรือดูข้อมูลเพิ่มเติมเกี่ยวกับการสร้างภาพเคลื่อนไหวด้วยคีย์เฟรมใน Compose ดูข้อมูลเพิ่มเติมเกี่ยวกับเอฟเฟกต์รูปภาพได้ที่ปรับแต่งรูปภาพ