โปรดอัพเดตเบราว์เซอร์

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

ธุรกิจ-เศรษฐกิจ

เทคนิคการออกแบบไอคอน | แชมป์ สมชนะ - Exclusive Writer

Ad Addict

อัพเดต 24 มิ.ย. 2566 เวลา 06.50 น. • เผยแพร่ 24 มิ.ย. 2566 เวลา 06.55 น. • สมชนะ กังวารจิตต์

ในอดีตมนุษย์ใช้ไอคอนตั้งแต่สมัยโบราณ เรามักเห็นในพวกผนังในภาพโบราณคดีต่าง ๆ

ปฏิเสธไม่ได้ว่า ไอคอนคือรูปภาพที่แสดงถึงคำบางคำหรือเทียบเท่ากับคำหนึ่งพันคำ ซึ่งมีคำกล่าวที่ว่า “ภาพหนึ่งภาพแทนคำพูดนับพันคำ” จริง ๆ แล้วในปัจจุบันไอคอนมีอยู่ทั่วไป ทั้งใน Online-Offline, แอปฯ, ป้ายบอกทาง และบนบรรจุภัณฑ์

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

ความสัมพันธ์ระหว่างมนุษย์กับไอคอน

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

จากการวิจัย nn/g พบว่าไอคอนต่าง ๆ ถ้ามีการออกแบบอย่างถูกต้องจะช่วยเพิ่มขีดความสามารถในการใช้งาน จดจำได้ง่าย แต่ในทางกลับกัน ถ้าเราออกแบบและใช้งานอย่างไม่ถูกต้อง ไอคอนอาจทำให้เกิดความสับสนเช่นกัน

วันนี้ผมรวบรวมทิปและเทคนิคการออกแบบไอคอนที่ดีมาเล่าให้เพื่อน ๆ ฟัง

1. ต้องศึกษาไอคอนเดิม ๆ ที่ใช้อยู่

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

2. ต้องจดจำง่าย และเป็นอัตลักษณ์ของแบรนด์

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

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

3. ต้องสื่อสารได้ง่าย

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

4. ต้องใส่ใจรายละเอียด

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

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

เรื่องน่ารู้เกี่ยวกับไอคอน

Hamburger Icon 3 บรรทัดเป็นตัวอย่างที่ยอดเยี่ยมของไอคอนสมัยใหม่ที่เป็นสากล Interface ส่วนใหญ่จะใช้ไอคอนนี้เพื่อแสดงเมนูการนำทางหลักด้านบนของเว็บ และบางเว็บก็ใช้ไอคอนนี้เพื่อแสดงรายการต่าง ๆ ออกแบบโดย Norman Lloyd "Norm" Cox

เค้าได้อธิบายถึงการสร้างไอคอนว่า "การออกแบบกราฟิกนั้นควรจะเป็นลักษณะเหมือนป้ายบอกทางที่เรียบง่าย ใช้งานได้อย่างน่าจดจำ และเลียนแบบรูปลักษณ์ของรายการเมนูที่แสดงออกมา" ด้วยจำนวน Pixel ความละเอียดเครื่องคอมสมัยนั้นที่มีน้อยมาก จึงต้องแตกต่างอย่างมาก แต่เรียบง่าย ใช้เพื่อเป็นส่วนหนึ่งใน Interface ของคอมพิวเตอร์ Xerox Star ในปี 1981

Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...