วันศุกร์ที่ 12 ตุลาคม พ.ศ. 2555

ออกแบบ Icon สำหรับ OSX

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

ภาพตัวอย่าง icon บน OSX

เราจะสังเกตเห็นว่าถึงแม้ Icon จะมาจาก Apple เอง ก็ยังมีความแตกต่างที่ไม่เข้าพวกกัน ในที่นี้อยากให้ลองสังเกตเงาและองศาในการมองครับ

มุมในการวาด Icon ของ Application

ตาม Guideline ของ Apple ระบุว่า ถ้ากำลังวาดภาพ Icon ของ Application ให้วาดในมุมกด เสมือน Icon นั้นวางไว้บนโต๊ะแล้วฉายกล้องกดลงไปได้ภาพวัตถุมุมเอียง ส่วนเงาก็จะพาดลงไปบนโต๊ะเพราะแสงส่องมาจากด้านบน


มุมในการวาด Icon ของ Utility

สำหรับ Icon ของ Utility จะวาดเหมือนของชิ้นนั้นแขวนไว้บนผนัง แล้วถ่ายภาพตั้งฉากกับผนัง ดังนั้นจึงมักเห็น Icon ของ Utility เป็นแบบแบนๆ ส่วนเงาก็ไม่ได้ทอดลงมาด้านล่างมากนักเพราะมันวางชิดกับผนัง

มุมในการวาด Icon ของ Utility ที่เป็น 3D

บาง Icon ถึงจะเป็น Utility แต่คนออกแบบจงใจวาดเป็นวัตถุ ก็จะได้รับการยกเว้นไม่ต้องไปแขวนอยู่บนผนังให้วางไว้บนพื้นได้ แต่มุมในการถ่ายยังเป็นมุมตั้งฉากกับผนังอยู่ดี

มุมในการวาด Icon บน Toolbar

มุมในการวาด Icon สำหรับ Toolbar โดยหลักๆ จะเหมือนกับ Utility แต่มันจะมีรายละเอียดมากกว่า อยากให้ลองไปอ่านเพิ่มเติมที่ Designing Toolbar Icons ครับ


เทียบภาพ Icon สำหรับ Utitlity และ Application

จากภาพ Icon ของ System Preference และ Icon ของ Contact จะเห็นว่าผลลัพธ์ที่ออกมามีลักษณะไม่เหมือนกันตามหลักการออกแบบด้านบน ซึ่งผมเชื่อว่าถึงแม้ผู้ใช้จะไม่ทันสังเกตแต่เค้าสามารถรู้สึกได้ครับ ยิ่งถ้าทุก Application, Utility มันทำมาแนวเดียวกันหมด ผู้ใช้ก็จะได้รับการสอนโดยอัตโนมัติ และช่วยลดเวลาในการจำแนก Application ได้ ช่วยสร้างประสบการณ์ที่ดีให้กับผู้ใช้ครับ :-)

อ้างอิง - OSX HIG

ไม่มีความคิดเห็น:

แสดงความคิดเห็น