แนวคิดหลายอย่างในการออกแบบ UI ไม่ได้ดูแตกต่างกันมากในแง่ที่แท้จริง แต่ในความเป็นจริงพวกเขาแตกต่างกันอย่างมาก อาจารย์ @akane_lee นักออกแบบชาวไต้หวันที่ไม่ได้ตีพิมพ์เป็นเวลานานใช้โอกาสในการวิเคราะห์แนวคิดและอธิบายรายละเอียดเกี่ยวกับการทำงานของแผนภูมิการไหลและการไหลของ UI ในรายละเอียด ~
ฉันไม่ได้โพสต์บทความใด ๆ เป็นเวลาเกือบหนึ่งเดือนและฉันกำลังยุ่งอยู่กับการเขียนแผนการทำต้นแบบและดำเนินการรายงานของนักเรียนทดลอง เมื่อเร็ว ๆ นี้ฉันต้องจัดระเบียบ UI จำนวนมาก ยิ่งฉันจัดระเบียบหัวของฉันมากเท่าไหร่ฉันก็ยิ่งรู้สึกเหมือนวาง มาพูดคุยเกี่ยวกับแผนภูมิการไหลและการไหลของ UI โฟลว์คือ "กระบวนการ", การไหลของ UI คือการไหลของหน้าและแผนภูมิการไหลเป็นแผนภูมิการไหลทั้งสองเป็นแผนภูมิที่แตกต่างกันอย่างสิ้นเชิง
นักออกแบบ UI คุ้นเคยกับการไหลของ UI มาก แต่อาจไม่คุ้นเคยกับแผนภูมิการไหล ในการพัฒนาซอฟต์แวร์แผนภูมิ Flow มักจะเขียนโดย SA โดยมุ่งเน้นที่ "การตัดสิน" ... มันไม่ยากเลยให้ถือว่าเป็นการทดสอบทางจิตวิทยาที่แนบมากับนิตยสารเพียงเลือก "ใช่" แล้วไปทางขวาและเลือก "ไม่" แล้วไปทางซ้าย
สำหรับ RD คุณต้องรู้ก่อนว่า "ตรรกะ" ก่อนที่จะเขียนโปรแกรมนั่นคือสถาปัตยกรรมปฏิบัติการที่ประกอบด้วย "การตัดสิน" ที่หลากหลาย ตรรกะก็มีความสำคัญมากสำหรับ UI มิฉะนั้นผู้ใช้ควรตอบสนองอย่างไรหลังการดำเนินการ?
การเข้าสู่ระบบสมาชิกที่เจริญรุ่งเรืองที่สุด
การใช้ "การเข้าสู่ระบบสมาชิก" เป็นตัวอย่างหากผู้ใช้ป้อนรหัสผ่านบัญชีและหากอินพุตถูกต้องมันจะข้ามไปยังหน้าข้อมูลสมาชิกโดยอัตโนมัติ หากอินพุตผิดมันจะแจ้งข้อผิดพลาด ...
จากแผนที่ที่ใช้งานได้ฉันต้องการวาด UI Flow ฉันมักจะเพิกเฉยต่อ "จะทำอย่างไรถ้าผู้ใช้ทำงานไม่ถูกต้อง" ในช่วงเวลาสุดท้ายฉันพบว่ามีปัญหาการขาดแคลนซึ่งหมายความว่า UI เพิ่มหน้าหายไปอย่างเร่งด่วนและ RD ไม่ได้สง่างามในการทำงานหนัก มันแจ้งว่าข้อผิดพลาดไม่ใช่สิ่งที่วางไว้บนเวทีหรือเสริมเมื่อคุณมีเวลา หน้าและโปรแกรมไม่ได้เขียนด้วยปากของพวกเขา ...
ฉันจะส่งรหัสยืนยันให้คุณ
ดูเหมือนง่ายมาก? ไม่ใช่แค่นั้น เมื่อคุณวาดมันจริง ๆ คุณจะพบว่ามีหลายสิ่งหลายอย่างที่มองข้ามไปได้อย่างง่ายดายในการไหลของ UI ที่ไม่ได้รับการพิจารณา (และเป็นไปได้อย่างไรที่ไม่มีฟังก์ชั่น?)
บางครั้งผู้ใช้จะยังคงพิมพ์ข้อผิดพลาดและมีเหตุผลที่จะเดาว่ามีคนพยายามขโมยบัญชี วิธีการปิดกั้นทั่วไปคือการขอให้ผู้ใช้ที่ป้อนข้อผิดพลาดหลายอย่างเพื่อกรอกรหัสการตรวจสอบอีกหนึ่งฟิลด์ แผนภูมิการไหลกลายเป็น:
ภาพด้านบนเป็นเพียงการสาธิตกระบวนการง่ายๆ แต่มันเป็นเพียงประโยคที่ไม่เป็นทางการ "เฮ้เพิ่มฟังก์ชั่นรหัสการตรวจสอบให้ฉัน" และแผนภูมิการไหลจะกลายเป็นไขมันในทันที มีเทคนิคเพิ่มเติมและข้อควรพิจารณาด้านความปลอดภัยสำหรับการตรวจสอบการเข้าสู่ระบบของสมาชิกจริง ตัวอย่างเช่นหากคุณมีข้อผิดพลาดในการเข้าสู่ระบบ 3 ข้อคุณจะให้ "ลืมรหัสผ่าน" มากขึ้นและอื่น ๆ หากคุณล็อคบัญชีโดยตรงโปรดติดต่อฝ่ายบริการลูกค้าเพื่ออุทธรณ์
แผนภูมิการไหลและการไหลของ UI เติมเต็มซึ่งกันและกันและแม้แต่แผนภูมิการไหลของ UI ก็มีอยู่ครั้งแรก เมื่อไม่มีแผนภูมิการไหลและคุณไม่ทราบว่าการตัดสินในการประมวลผลมากแค่ไหนคุณจะสร้างกระแส UI ความน่าจะเป็นของหน้าหายและฟังก์ชั่นที่ขาดหายไปนั้นสูงมาก
หากมีเพียงการไหลของ UI และไม่มีแผนภูมิการไหล RD แทบจะไม่สามารถจินตนาการถึงแผนภูมิการไหลตามรูปภาพและวิธีการตัดสิน แต่ยิ่งระบบมีขนาดใหญ่ขึ้น แต่ไม่มีการไหลของ UI เพียงไม่กี่ wireframes หรือ mockups เป็นเพียงคนตาบอดที่สัมผัสกับช้าง หากคุณดูภาพคงที่เดียวคุณจะไม่ทราบวิธีการสตริงหน้า มันคงจะแปลกถ้าคุณพึ่งพาสมองของคุณเพื่อชดเชยมัน
หากคุณไม่ให้อะไรเลยเพียงแค่โยนต้นแบบและขอให้ RD คัดลอก มันง่ายมากที่จะทำมันเหมือนกันใช่ไหม RD ยังต้องกระตุ้นและกระตุ้นทุกปุ่มกดในแต่ละหน้าจอและลองใช้ข้อผิดพลาดต่าง ๆ ก่อนที่คุณจะรู้วิธีเชื่อมต่อฟังก์ชั่น คุณเกลียด RD ในการทำสิ่งนี้มากแค่ไหน?
ข้อมูลอ้างอิง:
ผังงาน - MBA คิดว่าสารานุกรมถัง
คำอธิบายผังงาน
จากมุมมองของนักออกแบบ UI แผนภูมิโฟลว์สามารถถือได้ว่าเป็น "วิธีการทำงานของผู้ใช้และทำงานให้เสร็จสมบูรณ์และวิธีการที่ซอฟต์แวร์ตอบสนองในสถานการณ์นี้" และการไหลของ UI จะขยายไปถึง "เนื่องจากผู้ใช้ทำงานด้วยวิธีนี้และเรามีฟังก์ชั่นและข้อมูลเหล่านี้
นักออกแบบ UI ไม่จำเป็นต้องรู้วิธีการวาดแผนภูมิการไหล แต่คุณต้องเข้าใจพวกเขา สัญลักษณ์ผังงานทั่วไปได้รับการแก้ไข อย่าออกแบบสไตล์ใหม่เพียงเพราะคุณดูน่าเกลียด RD จะหมุนตารางอย่างแน่นอน
มีคำพูดที่โด่งดัง "น้ำในหัวของคุณก่อนการแต่งงานคือน้ำตาไหลหลังจากการแต่งงาน" ซึ่งใช้กับการพัฒนาซอฟต์แวร์ "สมองที่ใช้เวลาน้อยกว่าก่อนที่จะทำงานคือตับที่จะเสียหายหลังเลิกงานคือตับที่จะเสียหายหลังเลิกงานเป็นสิ่งที่เริ่มต้น" คาดว่าจะมีฟังก์ชั่นกี่ฟังก์ชั่นในระยะแรกคาดว่าจะมีกี่ชั่วโมงทำงานในระยะต่อมา ...