ออกแบบและดูตัวอย่างไอคอนแอป

1. บทนำ

ee9fa08dcd988d4c.png

อัปเดตล่าสุด: 04/08/22

ตั้งแต่ Android 13 เป็นต้นไป ผู้ใช้จะกำหนดธีมไอคอน Launcher แบบปรับอัตโนมัติได้ ฟีเจอร์นี้จะทำให้ไอคอนแอปในตัวเรียกใช้ Android ที่รองรับมีสีตามวอลเปเปอร์และธีมอื่นๆ ที่ผู้ใช้เลือก

สร้างชิ้นงานระบบทั้งหมดที่จำเป็นสำหรับแอป Android ได้อย่างง่ายดาย รวมถึงไอคอนสีที่ปรับเปลี่ยนได้แบบใหม่

สิ่งที่คุณจะได้เรียนรู้

  • ทำความเข้าใจเกี่ยวกับไอคอนแอปประเภทต่างๆ และเคล็ดลับในการออกแบบไอคอน
  • วิธีใช้เทมเพลต Figma ของตัวเรียกใช้งาน Android
  • วิธีใช้เครื่องมือสร้างชิ้นงานของ Android Studio
  • วิธีดูตัวอย่างไอคอน Launcher ด้วยโปรแกรมจำลอง Android Studio

ข้อกำหนดเบื้องต้น

  • มีความรู้พื้นฐานเกี่ยวกับ Figma
  • ไม่บังคับ: อาร์ตเวิร์กไอคอนแอป (ส่วนหน้า พื้นหลัง และสีเดียว)

สิ่งที่คุณต้องมี

2. เริ่มต้นใช้งาน

ตั้งค่า

คุณต้องเข้าถึงไฟล์ Figma ของไอคอนแอป Android เพื่อเริ่มต้นใช้งาน

ก่อนอื่น ให้ลงชื่อเข้าใช้ Figma หรือสร้างบัญชี

ทำซ้ำจากชุมชน Figma

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

35022ce2efffc29c.png

การใช้เทมเพลต

เทมเพลตไอคอน Android ประกอบด้วย 2 หน้า ดังนี้

  • หน้าปกจะอธิบายแนวคิดที่เกี่ยวข้องและวิธีใช้เทมเพลตโดยย่อ
  • หน้าเทมเพลตมีทุกอย่างที่คุณต้องการในการสร้างชิ้นงานที่จำเป็น โดยแบ่งออกเป็น 3 เฟรม (สี รูปร่าง Play Store)

e0182922e07c80f5.png

หมายเหตุ: ในแผงเลเยอร์ทางด้านซ้าย เลเยอร์และกลุ่มส่วนใหญ่จะล็อกไว้และควรล็อกไว้เช่นเดิม (คุณจะวางอาร์ตเวิร์กภายในกลุ่มอาร์ตเวิร์กที่ปลดล็อกได้)

แต่ก่อนที่จะไปสร้างชิ้นงาน เรามาดูกันก่อนว่าเราจะสร้างอะไรกันบ้าง...

3. ไอคอนระบบ Android

1b8d4ebe587e89a0.png

ไอคอน Launcher

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

รูปร่างแบบปรับอัตโนมัติ

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

8ae89f6ed03eaf57.png

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

ความสามารถในการปรับให้เข้ากับรูปร่างยังช่วยให้ระบบใช้เอฟเฟกต์ภาพเคลื่อนไหวต่างๆ กับการโต้ตอบของผู้ใช้ได้ด้วย

สีที่ปรับตาม

ตอนนี้ไอคอนแบบปรับอัตโนมัติสามารถใช้สีแบบไดนามิกเพื่ออนุญาตให้ใช้ไอคอนแอปตามธีมที่ปรับตามโปรไฟล์ของผู้ใช้ได้แล้ว

หากผู้ใช้เปิดใช้ไอคอนแอปที่มีธีม (หรือก็คือเปิดปุ่มสลับไอคอนตามธีมในการตั้งค่าระบบ) และ Launcher รองรับฟีเจอร์นี้ ระบบจะใช้สีของวอลเปเปอร์และธีมที่ผู้ใช้เลือกเพื่อกำหนดสีเฉด

381ea3ee1c973b4c.png

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

นอกจากนี้ คุณยังใช้ไอคอนขาวดำเดียวกันสำหรับไอคอนการแจ้งเตือนได้ด้วย

เดิม

ควรใส่ไอคอนเดิมเพื่อรองรับอุปกรณ์ที่ใช้ Android เวอร์ชันเก่าหรืออุปกรณ์ที่ไม่รองรับฟีเจอร์แบบปรับได้ (ก่อนเวอร์ชัน 8.0)

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

d29acf3d7ec8207c.png

ไอคอนการแจ้งเตือน

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

a7fad196a542c189.png

อาร์ตเวิร์กของ Store

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

ไอคอนแอปนี้ไม่ได้มาแทนที่ไอคอน Launcher ของแอป แต่ควรเป็นเวอร์ชันที่มีคุณภาพและความละเอียดสูงขึ้น

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

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

4. แนวทางปฏิบัติแนะนำในการออกแบบ

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

ใช้ภาพปกที่เรียบง่าย หลีกเลี่ยงการใช้หลายเลเยอร์ เอฟเฟกต์จำนวนมาก และข้อความ รายละเอียดเหล่านี้จะหายไปหรือมองเห็นได้ยากเมื่อมีขนาดเล็ก 6295287d18a6dc89.png

หลีกเลี่ยงรูปร่างที่ซับซ้อน ซึ่งรวมถึงโลโก้ด้วย ใช้โลโก้ที่เรียบง่ายหากเป็นไปได้ หรือพิจารณาสัญลักษณ์ที่ผู้ใช้เชื่อมโยงกับแอปของคุณ รูปร่างที่อ่านง่ายและโดดเด่นจะช่วยสร้างความเป็นหนึ่งเดียวเพื่อให้ผู้ใช้จดจำแอปของคุณได้ง่ายจากบริบทต่างๆ (สีที่ปรับเปลี่ยนได้และการแจ้งเตือน) 3084a344b34b47f0.png

ใช้ตารางกริด ใช้ประโยชน์จากตารางกริดหรือเส้นสำคัญเพื่อให้แน่ใจว่างานศิลปะในเบื้องหน้าจะทำงานได้เมื่อครอบตัด รวมถึงงานศิลปะภาพวาดแบบเต็มขอบe99f2fabd60e52d9.png

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

วางอาร์ตเวิร์กไว้ในโซนปลอดภัย เก็บชิ้นงานเบื้องหน้าไว้ภายใน 72x72 พิกเซล (เว้นแต่คุณจะใช้การตัดขอบเต็ม) ใช้พื้นหลังขนาด 108x108 พิกเซล หมายเหตุ: กรอบงานศิลปะของเทมเพลตไอคอนมีขนาดใหญ่กว่า 72x72 พิกเซลเพื่อให้คุณสร้างงานศิลปะของไอคอนได้ ระบบจะปรับขนาดชิ้นงานให้เป็นไปตามข้อกำหนด78c8a6d59f9320bc.png

รูปแบบเวกเตอร์ พยายามใช้ภาพอาร์ตเวิร์กในรูปแบบเวกเตอร์ (เช่น ไฟล์ SVG, AI, PDF และ EPS) แทนรูปแบบแรสเตอร์ (เช่น ไฟล์ PNG, JPG และ GIF) ซึ่งจะช่วยให้งานศิลปะของคุณใช้งานร่วมกับฟีเจอร์ใหม่ๆ ได้และแก้ไขได้ง่ายขึ้น 4c6aae783bb5e415.png

5. ไอคอนการแจ้งเตือนและสีแบบปรับอัตโนมัติ

ตอนนี้ถึงตาคุณสร้างไอคอนระบบ Android ของคุณเองแล้ว

  1. ค้นหาไฟล์ Figma ของไอคอนแอป Android
  2. ค้นหากรอบสีที่ปรับเปลี่ยนได้ในไฟล์ มองหา Adaptive color > Components > art > Icon artwork area > Themed Icon art < add your icon ในแผงเลเยอร์ด้านซ้าย หากคุณมีไอคอนสีเดียวพร้อมใช้งาน ให้คัดลอกมาที่นี่เพื่อแทนที่ไอคอน Bugdroid ตัวอย่าง แล้วข้ามไปที่ขั้นตอนที่ 64249cd4ed81cc44b.png
  3. หากไม่มีไอคอนสีเดียว ให้เริ่มจากโลโก้หรือไอคอนที่เกี่ยวข้องกับแอปของคุณ ดูเคล็ดลับการออกแบบเพื่ออัปเดตไอคอน โดยเริ่มจากการลดความซับซ้อนและหลีกเลี่ยงรูปร่างที่ซับซ้อน ตัวอย่างเช่น ภาพที่ใช้ในแอปจะได้รับการปรับให้เรียบง่ายด้วยรูปทรงใบไม้ที่ไม่ซับซ้อน เงาและรายละเอียดเส้นจะจำลองด้วยการเว้นวรรค 2c92cd6e441e7396.png
  4. ตอนนี้ให้อัปเดตการปรับขนาดโดยใช้แนวเส้นกรอบ ในที่นี้ เราได้ตั้งค่าการปรับขนาดเป็นปรับขนาด และตรวจสอบว่าอาร์ตเวิร์กอยู่ในโซนปลอดภัยของเลเยอร์ด้านหน้า เทมเพลตจะตั้งค่าด้วยอาร์ตเวิร์กที่ 4x และปรับขนาดโดยอัตโนมัติเพื่อการส่งออก คุณจึงออกแบบไอคอนในขนาดที่ใหญ่ขึ้นได้ 606367689d303633.png
  5. ระบบตั้งค่าไฟล์ให้ทำงานร่วมกับ Material Theme Builder เพื่อช่วยแสดงตัวอย่างสีแบบไดนามิก เชื่อมต่อรูปแบบสีไอคอนเบื้องหน้ากับ On-surface-variant f4a805802fc9b2f7.png
  6. ตอนนี้เมื่อเปิด Material Theme Builder จากแผงปลั๊กอิน คุณจะสับเปลี่ยนสีต้นฉบับหรือเพิ่มรูปภาพเพื่ออัปเดตสีโดยใช้สีต้นฉบับที่แยกออกมาก็ได้ b3a28c64e5488762.png
  7. ภาพจะปรากฏอย่างไรในความละเอียดต่างๆ หรือบนหน้าจอหลัก เทมเพลตได้รับการตั้งค่าเพื่อให้ชิ้นงานที่วางไว้ในกรอบชิ้นงานปรากฏในบริบทการแสดงตัวอย่างต่างๆ
  8. ระบบจะใช้ไอคอนสีเดียวเป็นการแจ้งเตือนและแสดงในการแสดงตัวอย่าง

94e264c7bc7a881a.png

6. ไอคอนแบบปรับอัตโนมัติและไอคอนเดิม

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

  1. ค้นหากรอบรูปร่างในไฟล์ มองหา Icon background < add your icon* ในแผงเลเยอร์ด้านซ้าย หากมีไอคอนพร้อมแล้ว ให้คัดลอกมาที่นี่เพื่อแทนที่ไอคอน Bugdroid ตัวอย่าง แล้วข้ามไปยังขั้นตอนที่ 5* หากไม่มีไอคอน ให้เริ่มต้นด้วยโลโก้หรือไอคอนที่เกี่ยวข้องกับแอป หรือใช้ไอคอนขาวดำซ้ำ 4249cd4ed81cc44b.png
  2. อัปเดตไอคอนเบื้องหน้าโดยคำนึงถึงแนวทางปฏิบัติแนะนำเกี่ยวกับไอคอน ในที่นี้ ฉันได้นำสีของภาพต้นฉบับกลับมา แต่ยังคงรายละเอียดไว้ให้น้อยที่สุด 245853d7421f0f41.png
  3. ตอนนี้ให้อัปเดตการปรับขนาดโดยใช้แนวเส้นกรอบ ในที่นี้ เราได้ตั้งค่าการปรับขนาดเป็นScale และตรวจสอบว่าอาร์ตเวิร์กอยู่ในโซนปลอดภัยของเลเยอร์ด้านหน้า 8e877043477b5fff.png
  4. ไอคอนแอปที่มีรูปร่างแบบปรับอัตโนมัติจะมีพื้นหลังที่แตกต่างกันได้ด้วย ซึ่งจะช่วยให้เลเยอร์ของไอคอนครอบตัดได้อย่างปลอดภัยและสร้างเอฟเฟกต์การเคลื่อนไหวเล็กๆ น้อยๆ เมื่อมีการโต้ตอบ คุณยังใช้และกำหนดพื้นหลังสีทึบใน Android Studio ได้ด้วย 2e3513c3cf827f52.png
  5. ตัวอย่างจะอัปเดตเพื่อแสดงลักษณะของภาพพื้นหน้าและพื้นหลังร่วมกันบนหน้าจอหลัก รูปร่างที่ครอบตัดต่างๆ และเป็นไอคอนเดิม

e933e6a6dba859a6.png

คุณอัปเดตรูปร่างที่ใช้ครอบตัดได้ภายในตัวอย่างหน้าจอหลักโดยเลือกไอคอนและเปลี่ยนตัวเลือกรูปร่าง a4cf54ad48dbcd02.png

7. กำลังส่งออก

เยี่ยมเลย ตอนนี้คุณได้อัปเดตเทมเพลตด้วยไอคอนแอปแล้ว มาส่งออกเพื่อนำไปใช้กัน

  1. ตรวจสอบว่าไม่ได้เลือกอะไรไว้ใน Canvas
  2. ไปที่เมนู Figma > ไฟล์ > ส่งออก (Shift + Cmd + E)
  3. ยืนยันการส่งออกในเมนูการส่งออก การดำเนินการนี้จะดาวน์โหลดชิ้นงานจากเทมเพลต

f510263d7cf38b80.png

ข้อมูลที่ส่งออกมีอะไรบ้าง

ชิ้นงานที่ส่งออกจะมีไฟล์ที่จำเป็นทั้งหมดในการติดตั้งใช้งานไอคอนแอป ดังนี้

  • Figma จะส่งออกไอคอนพื้นหน้าสีเดียวสำหรับสีแบบปรับอัตโนมัติเป็นไฟล์ SVG พร้อมกับทั้งพื้นหน้าและพื้นหลังสำหรับไอคอนรูปร่างแบบปรับอัตโนมัติ
  • นอกจากนี้ Figma ยังมีไอคอนเดิมในไดเรกทอรี mipmap ต่างๆ ซึ่งจัดระเบียบตามความละเอียด

f98accd8c1ce99fc.png

เท่านี้ก็เรียบร้อย ไอคอนของคุณพร้อมส่งให้ทีมพัฒนาแล้ว

หรือหากต้องการดูตัวอย่างไอคอนภายใน Android Studio และแปลง SVG เหล่านั้นเป็นรูปแบบชิ้นงานสุดท้าย ให้ทำตามขั้นตอนถัดไป

8. ใช้สตูดิโอเนื้อหารูปภาพ

เริ่มต้นใช้งาน Android Studio

1c70e1d460e8be34.png

  1. ดาวน์โหลดและติดตั้ง Android Studio
  2. เปิด Android Studio

Android Studio จะแจ้งตัวเลือกให้คุณเริ่มโปรเจ็กต์ใหม่หรือเลือกโปรเจ็กต์ที่มีอยู่

  1. เลือกโปรเจ็กต์ใหม่ไปก่อน หน้าจอต่อไปนี้จะแนะนำขั้นตอนการตั้งค่าโปรเจ็กต์ใหม่ c3a666acd93b7b07.png
  2. เลือกเทมเพลตใดก็ได้จากเทมเพลตเริ่มต้น เนื่องจากเราจะดูเฉพาะไอคอนเปิดแอป b4feedbfae851843.png
  3. หลังจากนั้น ให้ตั้งชื่อโปรเจ็กต์ใหม่แล้วเลือกเสร็จสิ้น ระบบจะใช้เวลาสักครู่ในการสร้างโปรเจ็กต์ใหม่

ใช้สตูดิโอเนื้อหารูปภาพ

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

  1. หากต้องการเข้าถึงเครื่องมือนี้ ให้เลือกเมนูไฟล์ > ใหม่ > ชิ้นงานรูปภาพ 5d379aab7d1bab51.png
  2. เมื่อสตูดิโอเนื้อหารูปภาพเปิดขึ้น ให้เพิ่มเลเยอร์เบื้องหน้าโดยเลือกไอคอนโฟลเดอร์ในเส้นทาง เลือกไฟล์ SVG ที่ส่งออกเป็น drawable-anydpi/ic_launcher.svg4864e066f02b8ad.png
  3. เลือกแท็บเลเยอร์พื้นหลัง แล้วเลือกเลเยอร์พื้นหลังที่ส่งออกในลักษณะเดียวกัน หรือเลือกประเภทชิ้นงานเป็นสีเพื่อใช้พื้นหลังของ Launcher เป็นสีทึบแทน 6cdc173881a1fda3.png
  4. กลับไปที่เลเยอร์เบื้องหน้าและตรวจสอบอีกครั้งว่ารูปภาพอยู่ในโซนปลอดภัย ปรับขนาดไอคอนให้เหมาะสมกับภาพมากที่สุด b0beca093edf54f2.png
  5. เมื่อเสร็จแล้ว ให้คลิกถัดไป ระบบจะถามว่าควรวางไอคอนไว้ที่ใดในโปรเจ็กต์ (ปล่อยให้เป็นค่าเริ่มต้นหรือเปลี่ยนเป็น "หลัก") จากนั้นคลิกเสร็จสิ้น คุณจะดูชิ้นงานของ Launcher ได้ในส่วน res > drawable การดับเบิลคลิกจะเปิดตัวอย่างของเวกเตอร์ที่ถอนออกได้ขั้นสุดท้าย

6c780144c7204425.png

  1. คัดลอกและวางชิ้นงานเลเยอร์ขาวดำลงใน res/drawable หรือ res/drawable-v24 ด้วยตนเอง หรือนำเข้าเลเยอร์ขาวดำด้วยตนเองโดยคลิกขวาที่โฟลเดอร์ res แล้วเลือกใหม่ > ชิ้นงานเวกเตอร์
  2. ใน res/mipmap-anydpi-v26/ic_launcher.xml และ res/mipmap-anydpi-v26/ic_launcher_round.xml ให้เพิ่มหรือเปลี่ยน android:monochrome="path/to/monochrome/asset ที่มีอยู่ให้ชี้ไปยังชิ้นงานขาวดำที่ถูกต้อง

9. ตัวอย่างและแหล่งข้อมูล

แสดงตัวอย่างในโปรแกรมจำลอง

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

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

ชิ้นงานสุดท้าย

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

ชิ้นงานจะอยู่ในรูปแบบของทรัพยากรในแอป Android และค้นหาได้โดยเปิดแผงทรัพยากร (โดยปกติจะอยู่ทางด้านซ้าย) เจาะลึกลงไปในแอป แล้วค้นหาโฟลเดอร์ Res คลิกขวาเพื่อเปิดเมนู แล้วเลือกเปิดใน Finder (ใน Mac) ซึ่งจะเปิดหน้าต่าง Finder คุณอาจประหยัดเวลาในการพัฒนาและ QA ได้โดยการแปลงและทดสอบชิ้นงานอื่นๆ ของแอปโดยใช้กระบวนการที่คล้ายกัน หากแปลงเนื้อหาอื่นๆ ของแอปแล้ว คุณจะแชร์โฟลเดอร์นี้กับการพัฒนาได้

7a22d780b86d9713.png

10. ขอแสดงความยินดี

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

หากมีข้อสงสัย โปรดถามเราได้ทุกเมื่อโดยใช้ @MaterialDesign บน Twitter

โปรดติดตามเนื้อหาการออกแบบและบทแนะนำเพิ่มเติมได้ที่ youtube.com/MaterialDesign