UI Pattern มอง UI เป็นภาพสะท้อน By uiblogaziner October 3, 20142324 views ShareTweet 0 ตอนที่เขียนบทความนี้ ผมกำลัง design interface ใหม่สำหรับหน้าแสดงรายละเอียดโรงแรมและห้องพัก เพื่อแสดงบนอุปกรณ์มือถือ ให้กับเว็บ Agoda หลังจากที่ผมส่ง mockup ให้กับ Designer Manager เพื่อดูความถูกต้องของ Interface และองค์ประกอบโดยรวม มีสิ่งหนึ่งที่ผมชอบมากในคำแนะนำของหัวหน้าผม เป็นมุมมองอันยิ่งใหญ่ที่ผู้มีประสบการณ์ช่ำชองเท่านั้นถึงจะเห็นภาพนี้ได้ เค้าเห็น “ภาพสะท้อน” นี่เป็นส่วนหนึ่งของ Interface หน้ารายละเอียดโรงแรมนะครับ (หน้าเต็มต้องรอฉายจริงบนเว็บก่อน ผมถึงจะสามารถนำมาลงได้) เป็นส่วนแสดงคะแนนของโรงแรมและราคาเริ่มต้นของห้องพัก Design ด้านบนอันแรกเป็นอันที่ผมทำส่งให้หัวหน้าผมตรวจ จากนั้นเค้าก็เดินตรงมาที่โต๊ะผม แล้วก็ให้ลองปรับเปลี่ยนสไตล์ตามภาพที่อยู่ในความคิดของเค้า อันดับแรกคือ ให้ใช้สไตล์ตรงส่วนราคา ไปใช้กับส่วนของคะแนนรีวิว เหมือนการสะท้อนสไตล์ และเป็นการรักษาสมดุลและน้ำหนักของ Interface ได้อย่างสมบูรณ์ที่สุดเท่าที่ผมเคยประสบมา จากนั้นย้ายเอาตัวเลขคะแนนมาไว้ด้านหน้า (ตัวเลข 8.8) เพราะมีความสำคัญกว่าคำบรรยายคะแนน และจะได้สะท้อนกลับตัวเลขราคาสีม่วงได้อย่างลงตัว สุดท้ายก็ปรับแต่งขนาดให้ดูมีลำดับขั้น (Hierarchy) ตามลำดับความสำคัญของข้อมูล โดยยังคงรักษาความเป็นภาพสะท้อนในเรื่องขนาดตัวอักษร น้ำหนักไว้เหมือนเดิม ภาพนี้ ผมแสดงให้เห็นว่าข้อความไหนเป็นภาพสะท้อนของอันไหน โดยดูจากวงกลมสีที่เหมือนกันครับ คงจะดูออกไม่ยากใช่ไหมครับ แต่กว่าจะมองออกได้อย่างงี้ ต้องสั่งสมประสบการณ์มากนานโขทีเดียวเลยแหละ ความจริงแล้วนี่ก็เป็นส่วนหนึ่งของทฤษฎีเกสตอลท์เรื่องความสมมาตร แต่เป็นมุมมองที่ลึกซึ้งยิ่งกว่าเพื่อสร้าง UI ที่มีความสมดุล, ตรงประเด็น, มีพลังและสวยงาม ก่อให้เกิดเป็นภาพสะท้อนเหนือคำบรรยาย UI ยังมีอะไรสนุกๆ อีกเยอะจริงๆ ครับ ^^