System Icon Design

Icon Design ใครที่ไหนก็ทำได้? หรือเจ้า Graphic รูปทรงเล็กๆนี้ จะมีอะไรมากกว่าที่ตาเห็น?

เราปฎิเสธไม่ได้ว่า Icon นั้นเป็นหนึ่งใน Component สำคัญ ที่เหล่าบรรดา UX/UI Designer ต้องผ่านตากันมาไม่น้อย รูปทรงเล็กๆที่ดูเหมือนว่าแค่ออกแบบง่ายๆก็เสร็จแล้ว แต่ในการทำงานจริงๆ เจ้า Graphic รูปทรงเล็กๆพวกนี้ กลับมีอะไรมากกว่าที่ตาเห็น วันนี้ทางเราจะมาพูดถึงเจ้าตัว Icon ว่ารูปแบบการออกแบบและการนำมาใช้นั้น ควรจะต้องคำนึงถึงอะไรบ้าง

แต่ก่อนเข้าเรื่องเรามารู้จักกับคำว่า Icon กันก่อน

คำว่า Icon ตามนิยามของผู้เขียนคือ

รูปแบบกราฟฟิคขนาดเล็ก ใช้เป็นสัญลักษณ์แทนข้อความ ที่มีรูปร่างลักษณะเป็นตัวอักษรภาพแทนคำสั่งต่างๆ

ซึ่งในแวดวง Software development นั้น เราจะแยก Categories ออกเป็นสองประเภท โดยประเภทแรก เราเรียกว่า Product icons ซึ่งเป็นตัวนำเสนอ Visual ของ Brand และ Product ประเภทที่สอง เราเรียกว่า System icons ใช้สำหรับเป็นสัญลักษณ์ของ Actions devices และ Directories ต่างๆของตัว Software (จริงๆแล้วมีอีกประเภทหนึ่ง คือ Animated icons แต่ในบทความนี้เราจะขอข้ามไปก่อน)โดยสิ่งที่เราจะมา Focus กันในวันนี้ คือ System icons นั่นเอง

ตัวอย่าง Product Icon และ System Icon

การออกแบบ System Icons จะต้องคำนึงถึงอะไรบ้าง?

การออกแบบ System icon นั้น หลักการออกแบบที่ดี Designer ควรออกแบบ Icon ให้ดูเรียบง่าย และหลีกเลี่ยงการใช้รูปทรงหรือรายละเอียดที่ดูซับซ้อนมากจนเกินไป
การตัดทอน (Simplification) เป็นทักษะที่จำเป็นในการออกแบบ Icon เป็นอย่างมากซึ่งเราจะแบ่งเป็นขั้นตอนการคิดก่อนเริ่มต้นการออกแบบดังนี้

1.ทำความเข้าใจกับ Icon ที่กำลังจะออกแบบ — Designer ต้องมีความเข้าใจว่า Icon ที่จะออกแบบนั้นต้องการจะสื่อความหมายใด หรือต้องการให้ Icon นำเสนอ Action อะไร สิ่งเหล่านี้เป็นตัวกำหนดว่า User จะสามารถเข้าใจ Icon ที่คุณออกแบบได้มากน้อยแค่ไหนนั่นเอง

2.คำนึงถึง keywords กับตีความหมายที่เหมาะสม — ถ้าให้ยกตัวอย่างง่ายๆ หากเราได้รับโจทย์ให้ออกแบบ Icon ที่ต้องการสื่อ Action ของการ “ลบ” หรือ “เอาออก” เราอาจจะนำสิ่งของที่อยู่ในชีวิตประจำวัน เช่น ถังขยะ หรืออาจจะเป็นสัญลักษณ์สากลอย่างเครื่องหมายกากบาทมาออกแบบ ซึ่งการตีความที่เหมาะสม จะทำให้นำเสนอถึงจุดประสงค์ที่ต้องการจะสื่อแก่ User ได้

3.Style ของ Icon — คำนึงถึงรูปแบบ Style ของ Icon ตามความเหมาะสมกับ Concept หรือ องค์ประกอบของ UI เช่น Filled icon, Outline icon, Round icon, Two-tone icon เป็นต้น

ตัวอย่าง style ของ Icon แบบต่างๆ

หลังจากที่ผ่านขั้นตอนการคิดเบื้องต้นแล้ว ก็ถึงเวลาของการเริ่มต้นการออกแบบ ซึ่งเราจะเริ่มกันด้วยขนาด (Size) ของ Icon เป็นอันดับแรก

Icon Sizes & Layout

ตัวอย่าง Size ของ Icon Grid

เราจะทำการออกแบบ Iconโดยใช้ Material design guidelines มาเป็นหลักอ้างอิงในการออกแบบ ซึ่งเราจะกำหนด Size ของ Icon grid ให้มีขนาด 24 x 24 dp (Dp ย่อมาจาก Density-independent pixels)

ตัวอย่าง Live area และ Padding ของ Icon Grid

จาก Icon grid เราจะทำการกำหนด Live area สำหรับพื้นที่ Icon หรือ Image ที่เราออกแบบ และกำหนด Padding เพื่อแบ่งพื้นที่เว้นว่างระหว่าง Icon element โดยที่หาก Visual weight ของ Icon มีความจำเป็นที่ต้องเกินพื้นที่ Padding ออกมาก็สามารถทำได้ตามความเหมาะสม แต่ต้องไม่เกินเส้นตัดขอบสีแดง (Trim area) เพื่อให้ขนาดและสัดส่วนของ Icon มีความสม่ำเสมอและคงที่ (Consistency)

Geometric Shapes

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

Pixel-Perfect

เพื่อเป็นการหลีกเลี่ยงการผิดเพี้ยนของ Icon หรือ Pixel blur หลังจากการ Export ในขั้นตอนการออกแบบ Designer ควรวางตําแหน่งของ icon ให้พอดี On pixel เพื่อการแสดงผลที่ถูกต้องตามหลัก Pixel-perfect

ตัวอย่าง icon หลังจากที่ export แบบ ไม่ on pixel และ on pixel

Stroke & Corners

ความหนาของเส้น Stroke ของ System icon โดยปกติควรมีขนาด 2 dp เพื่อความสม่ำเสมอและคงที่ของ Icon เช่นเดียวกับรัศมีความโค้งมนของมุม ซึ่งมุมด้านในของ Shape ควรเป็นลักษณะมุมเหลี่ยม และรัศมีของมุมควรมีขนาดรัศมี 2 dp ให้สอดคล้องกับความหนาของเส้น stroke

ตัวอย่าง ขนาดความหนาของ Stroke และ Corners

Visual weight & Visual unity

ในการควบคุมให้ลักษณะ Icon มีความสม่ำเสมอและคงที่ต่อเนื่องกัน Designer ควรกำหนดให้ขนาด, ความหนาของเส้น stroke หรือแม้กระทั้ง สี และระดับรายละเอียดของตัว Icon มีความสัมพันธ์ไปในทางเดียวกันด้วย

เมื่อ Design เสร็จแล้วยังไงต่อ?

หลังจากผ่านขบวนการขั้นตอนการ Design ที่กล่าวมาข้างต้นจนได้ System icon ที่พร้อมจะนำมาใช้งานจริงแล้ว แต่ว่าจะนำ Icon ทั้งหลายเหล่านั้นมาใช้งานยังไงต่อ? เพื่อให้ Developer สามารถนำไปใช้งานได้สะดวกและง่ายที่สุด สิ่งที่ต้องคำนึงหลังจากขั้นตอน Design ก็คือ การ Export icon นั่นเองครับ

ซึ่งปกติแล้วรูปแบบของไฟล์ที่ export นั้นจะมีหลาย Format โดยบาง Format นั้นเป็นไฟล์มาตรฐานที่ทุกๆ Platform รองรับเหมือนกัน ยกตัวอย่างเช่น ไฟล์ PNG จะสามารถใช้ได้ทั้งระบบปฎิบัติการ iOS และ Android หรือบาง Platform จะรองรับ Format ไฟล์เฉพาะ เช่นไฟล์ PDF จะเหมาะสำหรับระบบปฎิบัติการ iOS หรือในทางกลับกัน ไฟล์ SVG จะเหมาะสำหรับระบบปฎิบัติการ Android และ Web Interface มากกว่า อีกทั้งยังมีเรื่องสีของ Icon เช่นการ Export icon ควรเป็นสีในรูปแบบของ RGB เท่านั้น หรือในบางกรณี การ Export icon เป็นสี grayscale ใน PDF Format นั้นจะช่วยให้เหล่า iOS developer สามารถเปลี่ยนแปลงสี Icon ด้วย code ได้

จากที่กล่าวมาเบื้องต้น ไม่ว่า Designer จะ Export icon มาในรูปแบบ Format ชนิดใดก็ตาม สิ่งสำคัญคือการส่งมอบงานต่อให้ Developer สามารถทำงานได้ราบรื่นและมีปัญหาน้อยที่สุดเท่าที่ทำได้ ฉะนั้นการสื่อสารระหว่าง Designer และ Developer หรือ แม้แต่สมาชิกใน Team นั้น ถือเป็นสิ่งสำคัญที่ไม่ควรมองข้ามเป็นอย่างยิ่งครับ

Wrap-Up

• Icon แบ่งหลักๆออกเป็นสองแบบ คือ Product icons และ System icons
• ก่อนเริ่มออกแบบควรคำนึงถึง ความหมาย, Action, Keyword, และ Style
• Icon size หรือ Icon grid ควรมีขนาด 24 x 24 dp โดยที่ Live area ควรมีขนาด 20 x 20 dp
• ควร Design เป็น Geometric shape วางตำแหน่ง On pixel และกำหนดขนาด Stroke 2 dp
• ควร Export ไฟล์ให้เหมาะสมแต่ละ Platform
• Icon ควรใช้รูปแบบสี RGB เสมอ
• การสื่อสารถือเป็นสิ่งสำคัญ (Communication is the key)

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

Reference:
https://developer.apple.com/
https://material.io/
https://designcode.io/sketch-exporting