17 May 2014

วิธีการออกแบบไอคอนสำหรับแอปพลิเคชันแอนดรอยด์

Updated on

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


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

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



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



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



        ภาพนี้เจ้าของบล็อกทำไว้ที่ขนาดเท่าไร?

        อย่างน้อย 512x512 px เพราะอย่าลืมว่าเวลาที่อัปโหลดไฟล์ขึ้น Google Play จะมีให้ใส่ภาพ Hi-res Icon ซึ่งระบุไว้ว่าต้องมีขนาด 512x512 px เพราะงั้นเจ้าของบล็อกจึงทำภาพอย่างน้อย 512x512 px (หรือบางทีก็ทำเผื่อไว้เป็นขนาด 1024x1024 px)


        ภาพนี้ใช้โปรแกรมอะไรวาด?

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

        แต่สำหรับเจ้าของบล็อกจะนิยมใช้โปรแกรม Adobe Photoshop กับ Illustrator เป็นของคู่กัน โดยการขึ้นรูปจะอยู่ใน Illustrator ส่วนการตกแต่งเอฟเฟคต่างๆหรือขนาดของภาพจะอยู่ใน Photoshop


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



        ข้อดีหลักๆเลยก็คือผู้ที่หลงเข้ามาอ่านไม่ต้องย่อขนาดภาพเอง โดยเฉพาะผู้ที่หลงเข้ามาอ่านที่ไม่ค่อยถนัดงานด้านกราฟฟิคซักเท่าไร (แต่ทางที่ดีควรฝึกบ้างอะไรบ้าง)

        แล้วทำไมไฟล์ไอคอนต้องสร้างหลายๆขนาดด้วยล่ะ? 

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

                        36 x 36 px      :     LDPI
                        48 x 48 px      :     MDPI
                        72 x 72 px      :     HDPI
                        96 x 96 px      :     XHDPI
                      144 x 144 px    :     XXHDPI
                      192 x 192 px    :     XXXHDPI

     (สำหรับ TVDPI ไม่ต้องทำเพราะใช้ร่วมกับ HDPI ไปเลย)


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


        ทีนี้สมมติว่าผู้ที่หลงเข้ามาอ่านเขียนโค๊ดเสร็จแล้ว แล้วอยากจะใส่ไอคอนใหม่ลงไปทีหลังล่ะ จะต้องทำยังไง?

        ย่อภาพยังไงก็ได้เพื่อให้ได้ขนาดตามที่กำหนดไว้โดยตั้งชื่อไฟล์ว่าอะไรก็ได้ หรือจะชื่อ ic_launcher เพื่อแทนที่ของเดิมก็ได้ (อย่าลืมว่าต้องตั้งชื่อเป็นตัวพิมพ์เล็กไม่สามารถพิมพ์ตัวอักษรใหญ่หรือสัญลักษณ์พิเศษได้)

        ในกรณีที่ชื่อไฟล์ไม่ได้ชื่อว่า ic_launcher แล้วอยากเปลี่ยนให้ใช้รูปไอคอนอันใหม่แทนก็ให้ไปแก้ไขใน AndroidManifest.xml เอาซะ



        ทีนี้เจ้าของบล็อกขอพูดถึงเรื่องการย่อภาพบ้าง สมมติว่าใช้ Adobe Photoshop ละกันเนอะ โดยปกติแล้วการย่อหรือขยายภาพ จะมีกระบวนการที่เรียกว่า Image Interpolation ซึ่งจะมีผลกับภาพหลังจากย่อขนาดแล้ว โดยที่ Photoshop จะมีให้เลือกทั้งหมด 6 แบบด้วยกัน



        จากตัวอย่างเจ้าของบล็อกจะลองย่อภาพไอคอนจาก 512x512 px ให้เหลือ 50x50 px โดยที่เลือก Image Interpolation ในแบบต่างๆ จะได้ผลลัพธ์จะออกมาดังนี้


                       1. Nearest Neighbor
                       2. Bilinear
                       3. Bicubic
                       4. Bicubic Smoother
                       5. Bicubic Sharper
                       6. Bicubic Automatic

        ให้ลองสังเกตดีๆจะเห็นว่าหมายเลข 2 ได้ภาพมาค่อนข้างใกล้เคียงกับตอนแรกที่สุด เพราะสังเกตุตั้งแต่ 3 ถึง 6 จะเห็นว่าตรงขอบๆของตัวภาพจะมีขอบเข้มๆอยู่ด้วย ซึ่งการย่อจากโปรแกรมในตอนสร้างโปรเจคเริ่มต้นก็จะได้ภาพที่ใช้วิธี Bicubic (หมายเลข 3)

        และถ้าจะให้สะดวกก็สร้างภาพเป็น Vector แล้วมาย่อขยายในขนาดที่ต้องการเอาซะเลย จะทำให้ภาพไอคอนที่ได้มีลักษณะที่สมบูรณ์ (ซึ่ง Bilinear จะใกล้เคียงมากจนแทบดูไม่ออก)

(ซ้าย) ย่อภาพแบบ Bilinear (ขวา) ย่อภาพจากภาพ Vector

        ดังนั้นถ้าจะใช้วิธีย่อภาพก็ให้กำหนดเป็น Bilinear หรือย่อจากภาพ Vector ซะเลย

        ทำไมมันดูยุ่งยากจัง? ต้องมานั่งย่อภาพหลายๆขนาด แต่จริงๆก็มีวิธีที่ง่ายกว่านั้นเยอะ ถ้าจะเอาแบบง่ายสุดๆนะ (คุณ LaYer Sutachad เค้าบอกมา) ก็ไปเรียกหน้ากำหนดไอคอนในโปรแกรมขึ้นมาใหม่สิ โดยคลิกขวาที่โปรเจคแล้วเลือก New > Other...



        จากนั้นให้เลือกที่ Android > Android Icon Set



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



        เมื่อกำหนดเรียบร้อยแล้ว โปรแกรมจะมีการถามว่าต้องการแทนที่ไฟล์เดิมหรือไม่ (เพราะอย่าลืมว่ามีรูปไอคอนเดิมอยู่แล้ว) ก็ให้กด Yes to All ไป เพราะภาพไอคอนจะแทนที่ทั้งหมด (mdpi, hdpi, xhdpi, xxhdpi) เท่านี้ก็เป็นอันเสร็จ


        เท่านี้ไฟล์ไอคอนอันใหม่ก็จะไปแทนที่ของเก่าให้โดยทันที แถมไม่ต้องมานั่งย่อขนาดภาพเองอีกด้วย ~


        นอกจากนี้ยังมีอีกวิธีหนึ่งก็คือใช้เว็ปช่วยแปลงขนาดภาพสำหรับทำไอคอนโดยเฉพาะเลยก็ได้เช่นกัน ซึ่งมีอยู่เยอะแยะหลายเว็ปให้เลือก เจ้าของบล็อกขอยกตัวอย่างเป็น Make App Icon แล้วกัน เพราะดูใช้ง่ายดี



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


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

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


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


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

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



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



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



        เจ้าของบล็อกใส่พื้นหลังเป็นสี่เหลี่ยมมุมมนสีขาวนะ ส่วนพื้นหลังสีเทาใส่ไว้เพื่อให้มองเห็นง่ายๆเท่านั้น




        ดังนั้นจึงควรดูลักษณะของไอคอนด้วยว่าเป็นแบบใด ถ้าขอบของภาพดูไม่เรียบง่าย และดูยากเวลาที่ไปอยู่บนหน้าจอ ก็ควรใส่พื้นหลังเป็นที่รูปทรงง่ายๆเพื่อทำให้มองเห็นได้ง่ายขึ้นนั่นเอง

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

        Keep it simple because simple is best.

        จากไอคอนในที่ยกขึ้นมาก็ลองทำเป็นรูปแบบต่างๆเล่นๆก็ได้จะออกมาหลายแบบเลยทีเดียว ซึ่งแต่ละอันก็ทำได้ง่ายมากอยู่ที่ไอเดีย ขอแค่อิงกับความเรียบง่ายก็เป็นพอ


        ก่อนจบบทความนี้ก็ขอพูดทิ้งท้ายซักนิดละกัน

        สำหรับไอคอนที่ผู้ที่หลงเข้ามาอ่านหลายๆคนอาจจะมองข้ามไป เมื่อมองให้ดีๆก็จะพบว่ามันก็เปรียบเสมือน Logo ตัวหนึ่งนั่นเอง ดังนั้นอย่ามองข้ามมัน เพราะเจ้า Logo ตัวนี้นี่ล่ะที่จะทำให้แอปพลิเคชันของเราถูกจดจำไว้ในความทรงจำของผู้ใช้ เพราะงั้นจงพยายามทำออกมาให้ดีและน่าสนใจ ถึงแม้ว่ามันจะเป็นแค่ไฟล์ภาพขนาดแค่ 512x512 px ก็ตาม