8 เคล็ดลับที่เป็นประโยชน์สำหรับ UX ที่ดีขึ้นใน Flutter

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

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

ดังนั้นมาทำให้แอปของเราโดดเด่นกันเถอะ!

1. ทำให้วิดเจ็ตที่เลื่อนได้ของคุณสามารถเลื่อนได้เสมอ

BouncingScrollPhysicsยอดเยี่ยมมาก! แต่ถ้าเราไม่มีของมากพอที่จะขยายให้เกินมุมมอง มันก็ไม่เด้งเลย มันสมเหตุสมผลแล้วจริงๆ

แต่ถ้าเราต้องการรีเฟรชรายการล่ะ

ในการสร้างเอฟเฟกต์การตีกลับ/การเลื่อนเกินโดยไม่คำนึงถึงขนาดของรายการ เราควรใช้ AlwaysScrollableScrollPhysics ร่วมกับมัน

เลื่อนได้เสมอ

2. โฟกัสอัตโนมัติเมื่อเปิด

บางครั้งเราต้องการใช้หน้าเพื่อกรอกช่องข้อความเท่านั้น

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

โฟกัสอัตโนมัติเมื่อเปิด

3. ตรวจสอบให้แน่ใจว่าช่องข้อความสามารถมองเห็นได้

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

ผู้ใช้อาจไม่เข้าใจเนื่องจากฟิลด์เหล่านี้ไม่ปรากฏบนหน้าจอในขณะนั้น นั่นอาจทำให้เกิดประสบการณ์ที่ไม่น่าพึงพอใจ

แต่ไม่ต้องกังวล การป้องกันทำได้ง่ายมาก! ถ้าอย่างนั้นเรามาดูกันเลย!

ตรวจสอบให้แน่ใจว่ามองเห็นช่องข้อความได้

4. โฟกัสที่วิดเจ็ตถัดไปเมื่อป้อนหรือส่ง

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

โฟกัสต่อไปที่การป้อน

ฉันยังสังเกตเห็นบางอย่าง: หลายคนใช้ FocusNode สำหรับสิ่งนั้น ไม่มีอะไรผิดปกติกับ FocusNode แต่เราก็ไม่ต้องการสิ่งนั้นเช่นกัน เราสามารถตั้งค่า textInputAction ได้ง่ายๆ และเริ่มกันเลย! การใช้ FocusNode เป็นขั้นตอนพิเศษที่เราไม่ต้องการ

5. จำตำแหน่งเลื่อน

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

จำตำแหน่งเลื่อน

6. แตะอีกครั้งเพื่อออก

ผู้ใช้ Android อาจเผลอคลิกปุ่มย้อนกลับในขณะที่อยู่ในหน้าแรก และแอปจะไปที่พื้นหลังทันที

นั่นจะเป็นประสบการณ์ที่ดีสำหรับพวกเขาหรือไม่?

ฉันจะทิ้งคำถามนี้ไว้ให้คุณคนเดียวและแสดงให้คุณเห็นว่าคุณสามารถป้องกันไม่ให้สิ่งนี้เกิดขึ้นได้อย่างไร!

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

แตะอีกครั้งเพื่อออก

7. เลิกโฟกัสที่การเลื่อน

เราพิมพ์ เราป้อน และเราต้องการให้แป้นพิมพ์ปล่อยให้เราอยู่กับเนื้อหาตามลำพัง นั่นคือทั้งหมดที่เราต้องการ! โปรดอย่าไว้ชีวิตเรา!

เลิกโฟกัสที่การเลื่อน

8. เลิกสนใจเทปข้างนอก

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

ไม่เน้นแตะข้างนอก

สุดท้ายนี้

ไม่มีเวทย์มนตร์เป็นเพียงรายละเอียดเล็ก ๆ น้อย ๆ

ใส่ใจรายละเอียดเล็กๆ น้อยๆ จนคนคิดว่าคุณเป็นผู้วิเศษ!

- นักมายากล

โครงการ Github

รับไปปรบมือรัวๆ!

ขอบคุณสำหรับการอ่าน!

ฉันคิดว่าฉันจะขยายบทความนี้เป็นชุด

คุณสามารถติดตามฉันและติดตามข่าวสารเกี่ยวกับส่วนใหม่ได้!

โปรดอย่าลืมคลิกที่ปุ่ม และขอให้มีวันที่สดใส!