การกระจายตัวของขนาดหน้าจอในโทรศัพท์ แท็บเล็ต และเดสก์ท็อป สามารถสร้างความท้าทายที่ยิ่งใหญ่สำหรับนักออกแบบผลิตภัณฑ์และวิศวกร UI โดยเฉพาะอย่างยิ่งในบริษัทขนาดเล็กและขนาดกลางที่ต้องการพัฒนาโซลูชันการออกแบบที่ปรับขนาดได้ แม้ว่าระบบการออกแบบจะเป็นคำตอบที่ชัดเจนที่สุดสำหรับความท้าทายดังกล่าว วิธีที่คุณสร้างและแบ่งส่วนประกอบอาจเป็นปัจจัยหลักระหว่างความสำเร็จและความล้มเหลว

ทีมออกแบบระบบของ Mollieถูกสร้างขึ้นเพื่อแก้ปัญหานี้ แต่แทนที่จะใช้แนวทางตามโครงการ เราตัดสินใจทำงานเป็นทีมผลิตภัณฑ์ ดังนั้นเราจึงกำหนดกรอบความท้าทายด้วยคำถาม "เราจะทำได้อย่างไร":

“เราจะอนุญาตให้มีการสำรวจและใช้งานอินเทอร์เฟซผู้ใช้คุณภาพสูงได้อย่างรวดเร็วได้อย่างไร”

คำถามนี้ช่วยให้เราคิดต่างออกไป สิ่งที่ตระหนักได้มากที่สุดคือเราสามารถสร้างส่วนประกอบที่ดีขึ้นได้หากเรามุ่งเน้นไปที่บริบทของผู้ใช้แทนที่จะเป็นแพลตฟอร์มเดี่ยวๆ (เว็บ, iOS และ Android) วิธีการนี้บังคับให้เราต้องคิดถึงประสบการณ์ที่ดีที่สุดโดยพิจารณาจากขนาดหน้าจอและวิธีการป้อนข้อมูล ดังนั้นเราจึงกำหนดขอบเขตของส่วนประกอบของเราตามคุณสมบัติเหล่านี้ ดังนั้น ส่วนประกอบทั้งหมดจะต้องให้การสนับสนุนและคุณสมบัติตามสิ่งต่อไปนี้:

• ขนาดหน้าจอ:ใหญ่หรือเล็ก
• วิธีการป้อนข้อมูล:เมาส์ แป้นพิมพ์ หรือการสัมผัส

ห้องสมุดเดียวสำหรับทุกบริบท

เมื่อพูดถึงส่วนประกอบ เราเลือกให้มีหนึ่งไลบรารีใน Figma บริบทของตำแหน่งที่สามารถใช้คอมโพเนนต์ได้จะฝังอยู่ในคุณสมบัติของคอมโพเนนต์ ข้อได้เปรียบหลักของวิธีนี้คือนักออกแบบสามารถรู้ได้ทันทีว่าส่วนประกอบใดควรหรือไม่ควรใช้ ส่วนประกอบทั้งหมดของเราอยู่ภายใต้หนึ่งในสี่ประเภทเหล่านี้:

1. หน้าจอขนาดใหญ่และขนาดเล็ก
2. จอใหญ่หรือจอเล็ก
3. หน้าจอขนาดใหญ่เท่านั้น
4. จอเล็กเท่านั้น

1. หน้าจอขนาดใหญ่และขนาดเล็ก

นี่เป็นองค์ประกอบทั่วไปที่เรามี ขนาด ช่องว่างภายใน และรูปแบบจะคงเดิมตามขนาดหน้าจอและวิธีการป้อนข้อมูล ปุ่ม แท็บ ป้าย และอื่นๆ อีกมากมายจัดอยู่ในหมวดหมู่นี้

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

2. หน้าจอขนาดใหญ่หรือหน้าจอขนาดเล็ก

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

3. หน้าจอขนาดใหญ่เท่านั้น

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

4. หน้าจอขนาดเล็กเท่านั้น

อันนี้เป็นของประเภทเดียวกันด้านบน โดยที่รุ่นหน้าจอขนาดเล็กมีรูปแบบการนำทางที่แตกต่างกัน ตัวอย่างหนึ่งของส่วนประกอบดังกล่าวบนหน้าจอขนาดเล็กคือ Tabbar

เมื่อกลับมาที่คำถามเดิม "เราจะทำได้อย่างไร" ฉันพูดได้อย่างมั่นใจว่าแนวทางนี้มีความสำคัญต่อการแก้ปัญหาของเรา ผลกระทบที่สำคัญที่สุดคือความสามารถในการตัดสินใจออกแบบที่ปรับขนาดได้ ในกรณีที่การตัดสินใจของเรา เช่น สำหรับขนาดหน้าจอขนาดเล็ก สามารถใช้ประโยชน์จากแอปของเราบนแพลตฟอร์มต่างๆ ได้ เรายังมีระบบการออกแบบที่ยังใหม่อยู่ แต่นั่นกำลังพัฒนาอย่างรวดเร็วเป็นผลิตภัณฑ์ที่พัฒนาแล้ว

โบนัส: เมตริกของเราสำหรับการสร้างส่วนประกอบ

การยอมรับไม่ใช่เมตริกหลักของเรา อย่างน้อยก็ในตอนนี้ เนื่องจากเราเพิ่งออกแบบใหม่ทั้งหมด 100% ของแพลตฟอร์มถูกสร้างขึ้นโดยใช้ระบบการออกแบบของเรา แต่เรามุ่งเน้นไปที่ความพร้อมใช้งานของส่วนประกอบและโทเค็นแทน เมื่อเราหาวิธีปรับปรุงองค์ประกอบเหล่านี้ เราจะตั้งค่าสถานะรายการเป็น "ปัญหาที่ทราบ" เมื่อระบุโอกาส/จุดบกพร่อง ซึ่งจะกลายเป็นงานของทีมออกแบบระบบของเรา

สถานการณ์ของเราค่อนข้างไม่เหมือนใคร แม้ว่าเราจะมีทีมเล็กๆ ที่มี Product Designers สี่คน ( เรากำลังจ้างอยู่! ) และ UI Engineers มากกว่า 20 คน แต่เรามีทีมออกแบบระบบโดยเฉพาะ การลงทุนที่ช่วยให้เราทำงานริเริ่มประเภทนี้ได้

Caio Manzottiเป็นนักออกแบบผลิตภัณฑ์อาวุโสสำหรับ Design Systems ที่Mollieซึ่งตั้งอยู่ในกรุงอัมสเตอร์ดัม