Icon (ไอคอน) และ Icon Font (ไอคอนฟอนต์) คืออะไร?

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

Icon (ไอคอน) คืออะไร?

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

Icon Font (ไอคอนฟอนต์) คืออะไร?

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

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

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

ประโยชน์ของ Icon

1. ใช้แทนรูปภาพ

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

2. มีเอกลักษณ์

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

การเลือกใช้งาน Icon

1. เลือกให้ตรงความหมาย

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

2. ดูความสวยงาม

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

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

ขอขอบคุณบทความดีๆจาก ThaiBussinessSearch