การออกแบบการย้อนกลับที่คาดการณ์ได้

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

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

ใช้คําแนะนําการออกแบบในหน้านี้หากการออกแบบแอปของคุณกำหนดให้มีการนําทางกลับสําหรับการเปลี่ยนภาพและภาพเคลื่อนไหวที่กําหนดเองสําหรับช่วงสําคัญ

รองรับการย้อนกลับที่คาดการณ์ได้

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

หลังจากเลือกใช้แล้ว แอปจะมีภาพเคลื่อนไหวในตัว เช่น ภาพเคลื่อนไหวสำหรับการกลับไปที่หน้าแรก ภาพเคลื่อนไหวข้ามกิจกรรม และภาพเคลื่อนไหวข้ามงาน

นอกจากนี้ คุณยังอัปเกรดการพึ่งพาคอมโพเนนต์ Material เป็น 1.10.0-alpha02 ขึ้นไปของ MDC Android เพื่อรับภาพเคลื่อนไหวของคอมโพเนนต์ Material ต่อไปนี้ได้ด้วย

ตรวจสอบว่าแอปรองรับการแสดงผลแบบเต็มหน้าจอ

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

รูปที่ 1: อินเซ็ตท่าทางสัมผัสของระบบ หลีกเลี่ยงการวางเป้าหมายการแตะไว้ใต้ส่วนเหล่านี้โดยสิ้นเชิง

แพลตฟอร์มแบบเต็มหน้าจอ

หากแอปสร้างทรานซิชันในแอปที่กําหนดเองสําหรับแพลตฟอร์มแบบเต็มหน้าจอ ให้ทําตามคำแนะนำการออกแบบนี้

วิดีโอ 1. ตัวอย่างการย้อนกลับของพื้นผิวแบบเต็มหน้าจอ


ตัวอย่างด้านหลัง

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

การประมาณค่าในช่วง

Interpolator ที่ใช้ช่วยให้หน้าจอออกได้อย่างรวดเร็ว พารามิเตอร์คือ (.1, .1, 0, 1) ที่จะจับคู่กับอินเตอร์โพลเตอร์ที่ใช้สำหรับภาพเคลื่อนไหว SystemUI

ยกเลิกการดำเนินการ

หากผู้ใช้ปล่อยท่าทางสัมผัสในสถานะไม่ดำเนินการ เนื้อหาจะกลับมาอย่างรวดเร็วและปรับขนาดกลับเป็นสถานะและขนาดเดิมก่อนที่จะเริ่มท่าทางสัมผัส เป็นการเลิกทำการเปลี่ยนแปลงสถานะ

วิดีโอ 2. ตัวอย่างสถานะการไม่ยืนยันและการดําเนินการยกเลิก

ข้อมูลจำเพาะด้านการเคลื่อนไหว

พารามิเตอร์

ค่าเริ่มต้น

ค่าเป้าหมาย

บริบท

มาตราส่วนการออก

100%

90%

ป้อนมาตราส่วน

110%

100%

เฟดออก

100%

0%

ค่อยๆ จางเป็นค่าเป้าหมายเมื่อความคืบหน้าถึงเกณฑ์ 35%

ฟีเจอร์ "Enter Fade"

0%

100%

เข้าสู่โหมดเริ่มจางลงเมื่อเกณฑ์ความคืบหน้าอยู่ที่ 35%
วิดีโอ 3. ใช้การพลิกแบบลงเล็กน้อยเพื่อลดแรงดึงที่สปริงขึ้นระหว่างการทำท่าทาง

การเปลี่ยนองค์ประกอบแบบใช้ร่วมกัน

หากแอปสร้างการเปลี่ยนที่กำหนดเองในแอปสำหรับการเปลี่ยนองค์ประกอบที่แชร์ ให้ใช้คำแนะนำในการออกแบบต่อไปนี้

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

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


แสดงตัวอย่างเพลงในเบื้องหลัง

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

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

วิดีโอ 4. ตัวอย่างตัวอย่างเพลงที่เล่นจากด้านหลัง

ข้อมูลจำเพาะของการเคลื่อนไหว

การเปลี่ยนองค์ประกอบที่แชร์จะได้รับผลกระทบโดยตรงจากการเปลี่ยน X และ Y จากจุดเริ่มต้นของท่าทางสัมผัส ส่วนนี้จะอธิบายข้อกําหนดและค่าที่ควบคุมกลไกที่ใช้สําหรับการแสดงผลบนหน้าจอ

ตัวเลขต่อไปนี้แสดงข้อกำหนดการเคลื่อนไหวที่แนะนำสำหรับภาพเคลื่อนไหวบนพื้นผิว

รูปที่ 2: พารามิเตอร์การเปลี่ยนพื้นผิว สเกล และระยะขอบสำหรับการปัดจากขอบด้านซ้าย"

1 ระยะขอบ: 5% ของความกว้างในแต่ละด้าน (เกี่ยวข้องกับพื้นที่ผิวที่อธิบายไว้ใน 3)

2 การเปลี่ยนแปลงที่คำนวณหากปรับขนาดหน้าต่างไปยังจุดกึ่งกลาง คำนวณระยะขอบ 8dp ที่จำเป็น: ((ความกว้างหน้าจอ / 20) - 8) dp

3 พื้นผิวจะปรับขนาดเป็น 90% โดยเหลือขอบ 10% (ดู 1)

4 เว้นระยะห่าง 8 dp จากขอบหน้าจอ

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

ในรูปก่อนหน้า ความกว้างของหน้าจอคือ 1280 ซึ่งทำให้ค่า X-shift เป็น 56 dp สูตรคำนวณคือ

((1280/20)-8)= 56 dp x-shift

ภาพที่ 3: พารามิเตอร์ Shift และการปรับขนาด Y สำหรับการปัดจากขอบด้านซ้าย แพลตฟอร์มแบบเต็มหน้าจอจะแสดงตัวอย่างเพลงที่เล่นอยู่

1 ระยะห่างระหว่างขอบและระยะขอบของอุปกรณ์ที่พร้อมใช้งานสำหรับการเลื่อนในแนวตั้ง

2 หากพื้นผิวเลื่อนออกไปนอกหน้าจอ ให้ปรับขนาดพื้นผิวให้เล็กลงไม่เกิน 50%

2 พื้นผิวเริ่มต้นที่กึ่งกลางแนวตั้ง โดยมีการกําหนดค่า y-shift ดังนี้

  • จำกัดการเลื่อนตามแนวตั้งเพื่อไม่ให้พื้นผิวเลยขอบหน้าจอ 8 dp
  • หากไม่ต้องการให้พื้นผิวหยุดกะทันหัน ให้ใช้ตัวอินเทอร์โพเลเตอร์การลดความเร็วและจับคู่กับขีดจำกัดการเลื่อนในแนวตั้ง

3 คงระยะขอบ 8 dp ไว้เมื่อพื้นผิวสั้นพอ

สำหรับภาพเคลื่อนไหวที่กําหนดเอง คุณต้องกําหนดพารามิเตอร์ต่อไปนี้ทั้งหมด

พารามิเตอร์

ค่า

บริบท

เปลี่ยนตำแหน่งตามแกน X

((screen width / 20) - 8) dp

เลื่อนสูงสุดโดยเว้นระยะขอบ 8dp

Y Shift

((ความสูงของหน้าจอที่ใช้ได้ / 20) -8) dp

เลื่อนสูงสุดโดยเว้นระยะขอบ 8dp

สเกล

90%

ขนาดหน้าต่างขั้นต่ำ

นักพัฒนาซอฟต์แวร์ที่ใช้ภาพเคลื่อนไหวที่กําหนดเองโดยใช้ Predictive Back Progress API จะใช้พารามิเตอร์เหล่านี้

การประมาณความคืบหน้าของท่าทางสัมผัส

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

มุ่งมั่นที่จะดำเนินการ

วิดีโอ 5. ตัวอย่างการโยนเพื่อส่ง

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

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

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

ยกเลิกการดำเนินการ

วิดีโอ 6. ตัวอย่างการยกเลิกการดำเนินการ

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