ตอนที่ 9 การจัด layout

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

บน OS X มีการกำหนดนโยบายว่าแต่ละ form ควรออกแบบมาอย่างไร ใครที่พัฒนาบน platform อื่น สามารถนำไปประยุกต์ใช้ได้นะครับ

Center Equalize ไม่ได้หมายความว่าจะจัดทุกอย่างให้อยู่ตรงกลาง ถ้าเราพิจารณาจากรูปจะเห็นว่า layout ที่จัดขึ้นจะออกแบบให้สมดุลกันระหว่างด้านซ้ายและด้านขวาดังรูป

เมื่อเราใส่สีลงไปจะยิ่งทำให้ดูชัดมากขึ้น

ลองดูตัวอย่างต่อมา

แล้วลองระบายสีลงไป จะเห็นถึงความสมดุลย์

การจัด Labels ชื่อกลุ่ม โดยยึดเส้นด้านขวา

การจัด Control โดยยึดเส้นด้านซ้าย

จัดข้อความด้านหลัง Control ให้เท่ากัน

จัดขอบด้านข้าง และระยะห่างของ Control ทุกตัวให้เป็นระบบเดียวกัน ไม่อึดอัด

สุดท้ายเป็นส่วนของ Action Buttons จะต้องอยู่ด้านขวามือเท่านั้น ปุ่ม OK จะต้องอยู่ด้ายขวามือด้วย และจะต้องเขียนด้วยคำว่า OK ไม่ใช่ Okey หรือ Ok

หลัง Checkbox/Radio ควรตามด้วยคำกริยา เพื่อให้ง่ายแก่การทำความเข้าใจ และลดความผิดพลาดต่างๆ ที่อาจจะเกิดขึ้น

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

• “Quality icons”:http://www.thaimacdev.com/?q=node/39 <- อันนี้เขียนไปแล้ว
• Quality graphics
• File Display Names
• Minimal toolbars
• File Name Extensions
• Reserved keyboard shortcuts

สามารถหาอ่านได้จาก Human interface guideline ของ apple ครับ

เป็นอันจบเรื่อง Designing for Aqua หากเราสามารถออกแบบได้ตามนี้อย่างน้อยโปรแกรมของเราก็จะเป็นโปรแกรมที่แตกต่างจากโปรแกรมของคู่แข่งแน่นอน