hand tlhand crfog b
31Mar, 2023
Language blog :
Thai
Share blog : 
31 March, 2023
Thai

ทำความเข้าใจ “Icon” พร้อมแนะนำเว็บไอคอนสามารถนำไปใช้กับงานออกแบบได้ทันที

By

2 mins read
ทำความเข้าใจ “Icon” พร้อมแนะนำเว็บไอคอนสามารถนำไปใช้กับงานออกแบบได้ทันที

อย่างแรกต้องทำความเข้าใจก่อนว่าไอคอนนั้นคืออะไร

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

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

ไอคอนมีกี่ประเภทกันนะ

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

style of icon

 

  • Line : 
    ไอคอนเส้นเรียกว่าสัญลักษณ์สัญลักษณ์ที่มีโครงร่างเป็นแบบที่เห็นได้ทั่วไป เรียบง่าย ใช้สีเดียวและไม่เติมสี ดูสะอาด สบายตา และเข้าใจง่าย เนื่องจากไอคอนเส้นเป็นโครงร่าง ของวัตถุจึงแสดงรายละเอียดได้ชัดเจนทำให้ผู้ใช้ส่วนใหญ่สามารถจดจำและเข้าใจได้ง่าย ไม่เหมาะใช้ในขนาดที่เล็กๆเพราะทำให้ดูรายละเอียดได้ยาก
  • Solid/Filled : 
    ไอคอนทึบที่เราใช้อยู่ตอนนี้มักจะเป็นเพียงสีเดียวและมีรูปแบบที่มั่นคง รายละเอียดน้อยกว่าแบบเส้น ทำให้ไอคอนเหล่านี้มักจะคงรูปร่างได้ดี ออ่านง่ายเมื่อใช้งานในหน้าจอขนาดเล็ก อย่าง Googleหรือ ระบบปฏิบัติการ Android ก็เลือกใช้รูปแบบทึบเป็นไอคอนหลักนั้นเอง
  • Free style : 
    เป็นไอคอนที่มีการเพิ่มสไตล์ ลูกเล่น และสีสัน ซึ่งจะเข้ามาช่วยใส่ในไอคอนเหล่านี้ช่วยเพิ่มความเป็น เอกลักษณ์เฉพาะตัวของแบรนด์ได้เป็นอย่างดี แต่อาจเกิดปัญหาขึ้นได้เมื่อมีสีมากเกินไป ต้องคุมโทนสีและรูปแบบดีๆ

ขนาดที่เลือกใช้ในการออกแบบให้สามารถครอบคลุมการทำงานได้ดีที่สุดใน 5 ขนาด

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

size of icon

 

  • Extra small : 16px
    ไอคอนขนาดเล็กเหมาะที่สุดเมื่อมีพื้นที่จำกัด ใช้ไอคอนขนาดเล็กในองค์ประกอบของเรา เช่น ใน dropdown , Button ขนาดเล็ก , Checkbox , Input ซึ่งใช้ใน system interface เป็นหลัก
  • Small : 20px
    ไอคอนขนาดนี้เหมาะสำหรับอยู่กับ Menu bar , Alert message , Button ขนาดใหญ่
  • Medium : 24px
    ไอคอนขนาดกลางใช้ในAction button ที่เป็น Icon อย่างเดียวเช่น ปุ่ม close มุมขวาบนหรือจะเป็น Back มุมซ้ายบนเป็นต้น จะเลือกใช้ขนาดนี้เป็นมาตราฐาน
  • Large : 32px
    ไอคอนขนาดใหญ่จะใช้กับ Upload , Dropzone ที่มีพื้นที่ค่อนข้างกว้าง
  • Extra large : 48px
    ไอคอนขนาดใหญ่จะใช้เท่าที่จำเป็น เพื่อเน้นแนวคิดหรือเมื่อมีพื้นที่ว่างมากมาย ไม่ว่าจะใช้งานที่ Modal , Empty stage 

 

ทีนี้มาดูกันว่าที่ Senna labs นั้นใช้เว็บ icons อะไรกันบ้าง แนะนำเลย 4 เว็บนี้ !

       เว็บไอคอนที่แนะนำนั้นสามารถใช้ได้กับโปรเแกรมออกแบบทั้ง Figma , Sketch , Adobe XD ที่นักออกแบบ ux/ui designer ต้องใช้กันสักอันเป็นหลักอยู่แล้วแน่นอน สะดวกกับทีม Developer ในการนำไปใช้พัฒนาจะไฟล์ PNG , SVG , HTML/CSS , Android , iOS และอื่นๆ แล้วแต่เว็บไซต์ลองเลือกดูว่าโปรเจคงานเราเหมาะกับสไตล์งาน ตอบโจทย์ทีมเดป

Google Material Icons : https://fonts.google.com/icons

Google Material Icons

Phosphoricons : https://phosphoricons.com

phosphoricons

Iconsax : https://iconsax.io

iconsax

Heroicon : https://heroicons.com

heroicons

 

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

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

 


Ref. 
https://iconscout.com/blog/icon-styles-guide
https://varghesemathai.medium.com/icon-styles-designs-4a4937da7684
https://www.ibm.com/design/language/iconography/ui-icons/usage/
https://atlassian.design/foundations/iconography
https://uxdesign.cc/ui-cheat-sheet-icon-categories-icon-style-reference-guide-5ea75a254c3b

 

Written by
Senna Labs
Senna Labs

Subscribe to follow product news, latest in technology, solutions, and updates

- More than 120,000 people/day visit to read our blogs

Other articles for you

13
October, 2024
UX for Psychology - Loss Aversion (ความกลัวการสูญเสีย)
13 October, 2024
UX for Psychology - Loss Aversion (ความกลัวการสูญเสีย)
หลายคนคงเคยเจอเหตุการต่างๆ บนโลกดิจิทัลที่สามารถนำพาเราไปเสียเงินหรือสมัครใช้บริการได้ง่าย ๆ ทั้งที่ไม่รู้ตัว ลองมาดูกันว่า พวกเขาเหล่านั้น ใช้วิธีหลอกล่อนักชอปอย่างเรากันอย่างไรบ้าง พื้นฐานของคนทั่วไปนั้นไม่อยากที่จะสูญเสียอะไรไป แม้แต่สิ่งที่อาจจะไม่จำเป็น เราอาจจะพบการทำการตลาดในเชิงนี้ได้บ่อย ๆ ทั้ง ๆ ที่เราไม่รู้ตัว และอาจจะไม่จำเป็นต้องซื้อแต่โดนกระตุ้นด้วยข้อมูลที่เรารับมาแบบงง ๆ เช่น Flash sale 40% สินค้าที่มีจำนวนจำกัด นั้นจะน่าสนใจมากกว่าการเดินเจอสินค้าเดียวกันในห้างที่ลดราคา 40% เช่นเดียวกัน ข้อความบนเว็บช็อปปิ้งที่ส่งมาหาคุณว่าสินค้าที่คุณเคยสนใจกำลังลดราคาอยู่ อย่าพลาดโอกาสที่จะซื้อตอนนี้ มักกระตุ้นความต้องการซื้อของเราได้เป็นอย่างดี เพราะเรากลัวที่จะเสียโอกาสดี

By

3 mins read
Thai
13
October, 2024
ทำไม Google Fonts ถึงเป็นทางเลือกที่ดีในการออกแบบเว็บไซต์
13 October, 2024
ทำไม Google Fonts ถึงเป็นทางเลือกที่ดีในการออกแบบเว็บไซต์
แต่ก่อน เวลาที่เว็บไซต์ถูกดีไซน์ด้วยฟอนต์แปลก ๆ หรือมีเอกลักษณ์เฉพาะตัว จะทำให้ผู้ใช้งานบางคนมองไม่เห็น เพราะในเครื่องของผู้ใช้งานไม่มีฟอนต์นั้น ระบบก็จะเลือกเอาฟอนต์อื่นในเครื่องขึ้นมาแสดงผล เห็นเป็นฟอนต์อื่นไป ทำให้ดีไซเนอร์ต้องแก้ปัญหาด้วยการทำรูปแล้วเอามาแปะในเว็บไซต์แทน หรือแม้ว่าจะแสดงผลตามที่ถูกออกแบบมา ความเร็วก็อาจเป็นปัญหาในการโหลดและเข้าถึง เพราะฟอนต์ถูกโหลดจากเซิร์ฟเวอร์ แต่สมัยนี้ไม่มีใครใจเย็นพอที่จะรออะไรนานๆ เพราะจากรายงานระบุว่า 40% ของคนที่เข้าเว็บไซต์ จะออกหรือปิดทันทีถ้ามีการโหลดนานกว่า 3 วินาที โดยเฉพาะนักช็อปออนไลน์เกือบครึ่งที่พร้อมจะหันหลังให้อีคอมเมิร์ซเว็บไซต์ที่โหลดช้ากว่า 2 วินาที และ 79% บอกว่ามีโอกาสที่จะไม่ใช้บริการอีก Google Fonts คืออะไร? (กันแน่) หลายคนคงรู้จัก Google Fonts แต่วันนี้เราจะพามาทำความรู้จักให้มากขึ้น

By

4 mins read
Thai
13
October, 2024
How SennaLabs helped S&P Food transform their online e-commerce business
13 October, 2024
How SennaLabs helped S&P Food transform their online e-commerce business
S&P Food’s yearly revenues were 435 mils $USD. 10% of the revenue was from online sales. The board of directors felt that online sales should account for more. The digital

By

4 mins read
English

Let’s build digital products that are
simply awesome !

We will get back to you within 24 hours!Go to contact us
Please tell us your ideas.
- Senna Labsmake it happy
Contact ball
Contact us bg 2
Contact us bg 4
Contact us bg 1
Ball leftBall rightBall leftBall right
Sennalabs gray logo28/11 Soi Ruamrudee, Lumphini, Pathumwan, Bangkok 10330+66 62 389 4599hello@sennalabs.com© 2022 Senna Labs Co., Ltd.All rights reserved.