UI Pattern

มอง UI เป็นภาพสะท้อน

0

featured-reflectionตอนที่เขียนบทความนี้ ผมกำลัง design interface ใหม่สำหรับหน้าแสดงรายละเอียดโรงแรมและห้องพัก เพื่อแสดงบนอุปกรณ์มือถือ ให้กับเว็บ Agoda หลังจากที่ผมส่ง mockup ให้กับ Designer Manager เพื่อดูความถูกต้องของ Interface และองค์ประกอบโดยรวม มีสิ่งหนึ่งที่ผมชอบมากในคำแนะนำของหัวหน้าผม เป็นมุมมองอันยิ่งใหญ่ที่ผู้มีประสบการณ์ช่ำชองเท่านั้นถึงจะเห็นภาพนี้ได้ เค้าเห็น “ภาพสะท้อน

compare-01นี่เป็นส่วนหนึ่งของ Interface หน้ารายละเอียดโรงแรมนะครับ (หน้าเต็มต้องรอฉายจริงบนเว็บก่อน ผมถึงจะสามารถนำมาลงได้) เป็นส่วนแสดงคะแนนของโรงแรมและราคาเริ่มต้นของห้องพัก

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

จากนั้นย้ายเอาตัวเลขคะแนนมาไว้ด้านหน้า (ตัวเลข 8.8) เพราะมีความสำคัญกว่าคำบรรยายคะแนน และจะได้สะท้อนกลับตัวเลขราคาสีม่วงได้อย่างลงตัว

สุดท้ายก็ปรับแต่งขนาดให้ดูมีลำดับขั้น (Hierarchy) ตามลำดับความสำคัญของข้อมูล โดยยังคงรักษาความเป็นภาพสะท้อนในเรื่องขนาดตัวอักษร น้ำหนักไว้เหมือนเดิม

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

ความจริงแล้วนี่ก็เป็นส่วนหนึ่งของทฤษฎีเกสตอลท์เรื่องความสมมาตร แต่เป็นมุมมองที่ลึกซึ้งยิ่งกว่าเพื่อสร้าง UI ที่มีความสมดุล, ตรงประเด็น, มีพลังและสวยงาม ก่อให้เกิดเป็นภาพสะท้อนเหนือคำบรรยาย

UI ยังมีอะไรสนุกๆ อีกเยอะจริงๆ ครับ ^^

uiblogaziner
สวัสดีครับ ผมชื่อฟริ้นครับ รักและชอบงาน Graphic Design เอามากๆ เลย พอได้เริ่มทำงานเป็น UI Designer แล้ว ยิ่งสนุกขึ้นอีกแยะ งานออกแบบที่ใช้ความรู้สึกและเหตุผลเป็นอะไรที่สุดยอดจริงๆ ครับ

ไอคอนแจกฟรี จาก Sketch Active

Previous article

UI จับสแปม, CAPTCHA CHA CHA!

Next article

You may also like

Comments

Leave a reply

Your email address will not be published. Required fields are marked *

More in UI Pattern