ทำต้นแบบและตรวจอินเทอร์เฟซที่ยืดหยุ่นตามจอ

กระบวนการ

ทำตามลำดับนี้

1. ระบุงานผู้ใช้หลัก ลำดับชั้นเนื้อหา ชั้นอุปกรณ์ที่รองรับ ข้อจำกัดเบราว์เซอร์ และข้อกำหนดการเข้าถึง
2. เริ่มด้วยเลย์เอาต์แคบเป็นเส้นตรงและโครงสร้างเชิงความหมาย แล้วกำหนดกริดยืดหยุ่น สื่อไหล และขนาดภายใน ก่อนเพิ่มจุดพัก
3. เพิ่มจุดพักเมื่อเนื้อหาและการควบคุมใช้ไม่ได้ ไม่ใช่คัดลอกความกว้างรุ่นอุปกรณ์
4. ทำต้นแบบสถานะสำคัญด้วยเนื้อหาสั้นและยาว การขยายจากการแปล ข้อผิดพลาด ข้อมูลว่าง การซูม และการป้อนทั้งตัวชี้และแป้นพิมพ์
5. ทดสอบขนาดวิวพอร์ตตัวแทนและอุปกรณ์จริงเมื่อมี เรื่องการไหลใหม่ ข้อความอ่านได้ จุดสัมผัส ลำดับโฟกัส ประสิทธิภาพ และการหมุนจอ
6. บันทึกกฎตอบสนองและข้อยกเว้น รวบรวมความเห็นผู้มีส่วนได้ส่วนเสียและผู้ใช้ แก้ไข และให้สถานะพร้อมลงมือแล้วกับการตรวจรับ

เตรียมสิ่งนี้

ข้อมูลที่แมวจะขอ

• เส้นทางผู้ใช้และเนื้อหา
• ช่วงเบราว์เซอร์และอุปกรณ์ที่รองรับ
• ข้อจำกัดแบรนด์หรือระบบออกแบบ
• เครื่องมือต้นแบบหรือสภาพแวดล้อมส่วนหน้า

เราเตอร์ + playbook เดียว

จัดเส้นทางก่อน เลือกอันเดียว

Cat Paw โหลด playbook เดียวต่องาน ไม่ผสมหลายอัน เริ่มที่เราเตอร์นี้ เส้นทางที่เหลือเป็นตัวเลือกเฉพาะ workflow

• เราเตอร์: design-pack
• skills/design/emilkowalski/prototype/SKILL.md
• skills/design/emilkowalski/mobile-native/SKILL.md
• skills/design/ui-skills/baseline-ui/SKILL.md

เสร็จหมายถึง

จุดจบที่ตรวจได้

งานสำคัญใช้ได้ที่ความกว้างตัวแทนและความกว้างกลาง ไม่มีเนื้อหาจำเป็นหายตอนซูมหรือไหลใหม่ การปฏิสัมพันธ์แป้นพิมพ์และสัมผัสใช้ได้ และกฎตอบสนองกับสถานะที่ทดสอบถูกบันทึก

แหล่งที่มา

กระบวนการนี้มาจากไหน

1. web.dev/articles/responsive-web-design-basics
2. web.dev/learn/design/
3. developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Responsive_Design

แหล่งที่มาตั้งรูปแบบของ workflow โพสต์ Reddit และชุมชน ถ้ามี ให้ถือเป็นเรื่องเล่าจากผู้ปฏิบัติ ไม่ใช่ข้อเท็จจริงสากล