/impeccable adapt
Adapt
ทำให้การออกแบบทำงานข้ามหน้าจอ อุปกรณ์ และบริบทโดยไม่ตัดฟีเจอร์
เมื่อไรควรใช้
/impeccable adapt มีไว้สำหรับนำการออกแบบที่สร้างสำหรับบริบทหนึ่งไปทำให้ทำงานในอีกบริบทหนึ่ง มือถือจากเดสก์ท็อป แท็บเล็ตจากมือถือ พิมพ์จากเว็บ ฝังตัวจากแบบสแตนด์อโลน อีเมลจากแดชบอร์ด ใช้เมื่อการออกแบบต้นฉบับแข็งแกร่งแต่พังที่เบรกพอยต์อื่น บนการสัมผัส หรือในคอนเทนเนอร์ที่แตกต่าง
ไม่ได้มีไว้สำหรับสร้างเรสปอนซิฟตั้งแต่เริ่มต้น สำหรับสิ่งนั้น เริ่มด้วย /impeccable และกำหนดรูปแบบเลย์เอาต์แบบเรสปอนซิฟเฟิร์ส Adapt มีไว้สำหรับการเติมเต็มย้อนหลังแบบ “เราไม่เคยคิดเรื่องมือถือ”
วิธีการทำงาน
สกิลทำงานผ่านสี่มิติของความเหมาะสมตามบริบท:
- เบรกพอยต์และเลย์เอาต์แบบ fluid: ยุบหลายคอลัมน์เป็นคอลัมน์เดียว ปรับช่วง clamp แนะนำเบรกพอยต์ใหม่ที่การออกแบบพังจริงๆ
- เป้าหมายสัมผัส: พื้นที่สัมผัสขั้นต่ำ 44px ระยะห่างเพียงพอระหว่างเป้าหมายที่อยู่ติดกัน ขนาดแตะใหญ่กว่าขอบเขตภาพที่จำเป็น
- รูปแบบการนำทาง: ไซด์บาร์เดสก์ท็อปกลายเป็นการนำทางด้านล่างแบบมือถือหรือสไลด์เอาท์ แถบเครื่องมือหนาแน่นยุบเป็นเมนู สถานะ hover ได้สิ่งที่เทียบเท่าการสัมผัส
- ลำดับความสำคัญเนื้อหา: ตัดสินใจว่าอะไรต้องมองเห็น อะไรสามารถยุบเป็นการเปิดเผย อะไรสามารถลบออกสำหรับบริบทนั้น
กฎที่ไม่อาจเจรจาได้: ปรับให้เข้า ไม่ใช่ตัดออก ฟังก์ชันการทำงานที่สำคัญไม่สามารถหายไปบนมือถือแค่เพราะมันไม่สะดวก หาทางใส่มัน ออกแบบการโต้ตอบใหม่ หรือพิจารณาใหม่ว่ามันสำคัญจริงๆ บนเดสก์ท็อปไหม
ลองใช้งาน
/impeccable adapt the settings page for mobileการเปลี่ยนแปลงที่คาดหวัง:
- กริดสามคอลัมน์กลายเป็นคอลัมน์เดียวพร้อมส่วนหัวส่วนทำหน้าที่เป็นตัวแบ่งแบบ sticky
- การนำทางไซด์บาร์ย้ายเป็นสครอลเลอร์แนวนอนเหนือเนื้อหา
- สวิตช์ได้รับ padding แนวตั้ง 8px เพื่อให้ถึงเป้าหมายสัมผัส 44px
- ข้อความช่วยเหลืออินไลน์ย้ายเป็นแตะเพื่อเปิดเผย ไม่ใช่ hover
- ส่วน “Danger zone” ขยายเต็มที่บนมือถือแทนที่จะยุบ เพราะมันมีแอคชันที่กลับคืนไม่ได้และเราต้องการให้ผู้ใช้มองเห็นชัดเจน
ข้อควรระวัง
- ตัดฟีเจอร์ออก หากเวอร์ชันมือถือซ่อนสิ่งที่เวอร์ชันเดสก์ท็อปทำได้ นั่นคือการถดถอย ไม่ใช่การปรับให้เข้า ต่อสู้เพื่อฟีเจอร์
- ถือว่ามือถือเป็น “เดสก์ท็อปที่เล็กกว่า” มือถือเป็นบริบทที่แตกต่างกัน: นิ้วหัวแม่มือ การถูกขัดจังหวะ เซสชันสั้น ปรับให้เข้ากับบริบท ไม่ใช่ความกว้างวิวพอร์ต
- ข้าม
/impeccable hardenหลังจากนั้น เลย์เอาต์เรสปอนซิฟเผยกรณีขอบเขต รัน hardening หลัง adapt เพื่อจับสิ่งที่ปรากฏเฉพาะที่ 320px