การออกแบบกราฟิกสำหรับนักพัฒนา Android: การสร้างไอคอนแอพในอุดมคติ

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

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

---

หลังจากการเปิดตัว “ไอคอนแบบปรับได้” ด้วย Android Oreo ไอคอนแอปจะประกอบด้วยเลเยอร์พื้นฐานสามเลเยอร์:

เลเยอร์พื้นหลังทึบแสง, เลเยอร์เบื้องหน้า กับ การสนับสนุนความโปร่งใสและ หน้ากาก ที่กำหนดรูปร่างของไอคอน เลเยอร์ทั้งหมดเหล่านี้มีขนาด 108 x 108 dp แม้ว่าผู้ใช้จะมองเห็นได้เพียง 72 x 72 dp ภายในเท่านั้น ส่วนอีกส่วนหนึ่งซึ่งถูกตัดออกไปโดยหน้ากากด้านบน ใช้สำหรับเอฟเฟกต์พิเศษภายใน UI เพื่อทำให้ไอคอนดูมีชีวิตชีวา สำหรับผู้ที่ไม่ได้ฝึกหัด DP หรือ พิกเซลที่ไม่ขึ้นอยู่กับการแสดงผล ย่อมาจากหน่วยวัดสำหรับอินเทอร์เฟซทั้งหมดของ Android และถูกกำหนดให้เท่ากับขนาดของ หนึ่งพิกเซลบนจอแสดงผล 160 จุดต่อนิ้ว.)

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

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

เมื่อเปิดไฟล์โครงการใน Inkscape และ เติมและโรคหลอดเลือดสมอง (Shift+Ctrl+F) ส่งออกรูปภาพ PNG (Shift+Ctrl+E) และ เลเยอร์ แผง (Shift+Ctrl+L) เปิดขึ้น เราก็พร้อมที่จะเริ่มต้นแล้ว แผงเลเยอร์เป็นที่ซึ่งเนื้อของโปรเจ็กต์อยู่ พร้อมด้วย เบื้องหน้า และ พื้นหลัง เลเยอร์หมายถึงที่เก็บส่วนประกอบที่มียศฐาบรรดาศักดิ์และ แนวทาง และ หน้ากาก หมายถึงการเปิดและปิด (โดยคลิกที่ไอคอนรูปตาเล็ก ๆ ด้านข้าง) เพื่อใช้อ้างอิง

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

พื้นหลัง

เริ่มต้นด้วยการตั้งค่าพื้นหลัง ซึ่งจะประกอบด้วยท้องฟ้าสีฟ้าและดวงอาทิตย์สีเหลืองตรงกลาง การหมุน หน้ากาก มองไม่เห็น ฉันเลือกและทำให้มองเห็นได้ เลเยอร์พื้นหลังให้เติมผืนผ้าใบทั้งหมดด้วย สร้างสี่เหลี่ยมและสี่เหลี่ยม เครื่องมือ (F4) และตั้งค่าสีเติมของสี่เหลี่ยมผืนผ้า เติมและโรคหลอดเลือดสมอง ถึง 64B5F6FF (สีน้ำเงินอ่อน) ตาม จานสีวัสดุ. จากนั้นฉันก็เลือก สร้างวงกลม จุดไข่ปลา และส่วนโค้ง (F5) และกด Shift และ Ctrl ค้างไว้ วาดวงกลมจากกึ่งกลางของคีย์ไลน์ไปยังวงกลมที่ใหญ่เป็นอันดับสอง และตั้งค่าสีเป็น FFEE58FF ซึ่งให้ดวงอาทิตย์ดวงเล็กๆ ที่อบอุ่นแก่เรา เป็นการดีเสมอที่จะยึดติดกับรูปทรงเรขาคณิตพื้นฐานในการออกแบบทุกประเภท และภาษาการออกแบบของ Android ส่งเสริมความเรียบง่ายโดยเฉพาะ เพื่อให้เป็นไปตามแนวทางการใช้วัสดุ ฉันจึงให้เงาเล็กๆ ส่องผ่านดวงอาทิตย์ด้วย ฟิลเตอร์ → เงาและแสง → วางเงา.

เบื้องหน้า

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

ผลลัพธ์

หน้ากาก ตอนนี้สามารถมองเห็นและปรับแต่งได้แล้ว แก้ไขเส้นทางตามโหนด (F2) เพื่อลองจำลองมาสก์รูปทรงต่างๆ นอกจากนี้ สองชั้นยังสามารถส่งออกแยกกันได้โดยใช้ ส่งออกรูปภาพ PNG แผงสำหรับการใช้งาน ในแอนดรอยด์สตูดิโอและร่วมกันเพื่อ ไอคอนกูเกิลเพลย์.

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

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