ชุดไอคอนสำหรับเว็บไซต์หรือแอป: วางแผนและสั่งทำอย่างไร

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

ทำรายการก่อนอย่างอื่น

ไล่ดูเว็บไซต์หรือแอปของคุณ แล้วจดทุกจุดที่ไอคอนจะช่วยได้:

• เมนูหลัก: หน้าแรก แคตตาล็อก ค้นหา ตะกร้า บัญชี
• ฟีเจอร์หรือจุดเด่น: จัดส่งรวดเร็ว ชำระเงินปลอดภัย คืนสินค้า ฝ่ายช่วยเหลือ
• ช่องทางติดต่อและการกระทำ: โทรศัพท์ อีเมล ที่ตั้ง แชร์ ดาวน์โหลด

อธิบายแต่ละไอคอนด้วยคำไม่กี่คำ เช่น "การจัดส่ง: รถตู้คันเล็ก" หรือ "คืนสินค้า: กล่องมีลูกศร" ยิ่งรายการชัดเจน การแก้ไขภายหลังก็ยิ่งน้อย

ต้องใช้ไอคอนกี่ตัว

• ประมาณ 4 ตัว: แลนดิ้งเพจที่มีจุดเด่นสามหรือสี่ข้อ หรือพรีเซนเทชันสั้น ๆ
• ประมาณ 8 ตัว: ส่วนหลักและฟีเจอร์ของเว็บไซต์ขนาดเล็ก
• ประมาณ 16 ตัว: ชุดเต็มสำหรับแอปหรือเว็บไซต์ขนาดใหญ่ที่มีหลายส่วน

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

เลือกสไตล์เดียว

เลือกสไตล์หนึ่งแบบแล้วใช้ทั้งชุด:

• เส้นขอบ (Outline): เส้นบาง ดูเบาและทันสมัย เหมาะกับอินเทอร์เฟซที่เรียบสะอาด
• ทึบ (Filled): รูปทรงทึบ อ่านง่ายแม้ในขนาดเล็กมาก
• สองโทน (Duotone): สองเฉดของสีเดียว มีเอกลักษณ์มากขึ้นอีกนิด
• 3 มิติ (3D): มีมิติและเงานุ่ม ๆ เหมาะกับแลนดิ้งเพจสีสดใส

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

สี

ใช้สีของแบรนด์และระบุเป็นรหัส hex เช่น #1A73E8 ถ้ามี สีหลักหนึ่งสีกับสีเน้นอีกหนึ่งสีมักเพียงพอ ถ้ายังไม่มีสีแบรนด์ โทนสีกลาง ๆ ใช้ได้กับพื้นหลังทุกแบบ

ขนาดเล็กคือตัวตัดสิน

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

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

สิ่งที่ได้รับและวิธีใช้

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

สรุป

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