กำไร:
- ความสามารถในการเปลี่ยนวัตถุประสงค์ของหน้าจอและลำดับความสำคัญของเนื้อหาให้เป็นบรีฟที่ชัดเจน และสร้างแบบร่างโครงร่างและรูปแบบต่างๆ ด้วยปัญญาประดิษฐ์
- ความสามารถในการประเมินผลลัพธ์ของเครื่องมือที่สร้างอินเทอร์เฟซจากข้อความอย่างรวดเร็วและคัดกรองตามหลักการออกแบบ
- ความสามารถในการพัฒนาโครงร่าง AI ที่สมบูรณ์โดยคำนึงถึงเนื้อหาจริง Edge Case และการเข้าถึง
โครงลวดเป็นโครงกระดูกระดับกล่องของหน้าจอ ที่ไม่มีสี รายละเอียดภาพ และตราสินค้า วัตถุประสงค์นั้นง่าย: เพื่อทดสอบลำดับความสำคัญ ตำแหน่ง และการไหลของเนื้อหาอย่างรวดเร็ว ไขคำถาม "อะไร ที่ไหน ทำไมที่นี่" โดยไม่ต้องคำนึงถึงสุนทรียศาสตร์ การออกแบบที่มีความเที่ยงตรงต่ำยังอธิบายถึงขั้นตอนแรกแบบร่างคร่าวๆ นี้ด้วย ปัญญาประดิษฐ์จะเร่งขั้นตอนนี้อย่างรวดเร็ว: เครื่องมือที่สร้างโครงร่างจากข้อความจะสร้างโครงร่างหน้าจอจากคำขอหนึ่งประโยค แต่ความเร็วนี้ยังก่อให้เกิดความเข้าใจผิดว่า "ผลลัพธ์แรกคือการออกแบบขั้นสุดท้าย" หน่วยนี้จะสอนวิธีสร้างโครงร่าง AI อย่างชาญฉลาดและเติบโตเต็มที่
ขั้นแรกให้สรุป จากนั้นจึงผลิต
โครงร่างที่แย่ที่สุดมักเกิดจากการบรีฟที่ไม่ดี หากคุณบอก AI ให้ "สร้างหน้าจอเข้าสู่ระบบ" คุณจะได้รูปแบบทั่วไป บทสรุปโครงลวดที่แข็งแกร่งประกอบด้วย:
- วัตถุประสงค์ของหน้าจอ: ทำไมผู้ใช้ถึงมาที่หน้าจอนี้ เขาได้อะไรจากหน้าจอนี้?
- ลำดับความสำคัญของเนื้อหา: องค์ประกอบที่สำคัญที่สุดสามประการคืออะไร ดวงตาของผู้ใช้ควรตกตรงไหนก่อน?
- บริบท: อุปกรณ์ (อุปกรณ์เคลื่อนที่/เดสก์ท็อป) อารมณ์ปัจจุบันของผู้ใช้ หน้าจอก่อนหน้า
- ข้อจำกัด: องค์ประกอบที่จำเป็น (ข้อจำกัดความรับผิดชอบ องค์ประกอบแบรนด์) การจำกัดพื้นที่
- คำขอรูปแบบ: จำนวนเค้าโครงที่แตกต่างกันที่คุณต้องการดู
เมื่อคุณให้บรีเรื่องนี้ แบบจำลองจะสร้างตัวเลือกต่างๆ ที่จะช่วยคุณในการตัดสินใจ ถ้าบรีฟอ่อนแอ ทุกอย่างก็จะคล้ายกันและไร้ประโยชน์
เคล็ดลับ: ถาม AI ไม่ใช่สำหรับโครงร่างที่ "สมบูรณ์แบบ" เพียงอันเดียว แต่สำหรับ 3 แนวทางที่แตกต่างกันอย่างชัดเจน (เช่น "หนึ่งรายการหนัก หนึ่งภาพหนัก หนึ่งเดียวเน้นการกระทำ") ตัวเลือกที่หลากหลายจะเปิดจุดบอดของคุณ
ตำแหน่งที่สมจริงของเครื่องมือที่สร้างอินเทอร์เฟซจากข้อความ
ในช่วงไม่กี่ปีที่ผ่านมา เครื่องมือที่สัญญาว่าจะ "เขียนแล้วอินเทอร์เฟซปรากฏขึ้น" แพร่หลายมากขึ้น สิ่งเหล่านี้สร้างร่างเริ่มต้นที่รวดเร็วมาก แต่ถ้าคุณไม่ทราบขีดจำกัดของมัน มันจะทำให้คุณเข้าใจผิด:
- ไม่ได้ทดสอบกับเนื้อหาจริง: ข้อความตัวอย่างมีความยาวที่เหมาะสมเสมอ หากชื่อจริงล้นออกไป เค้าโครงอาจหยุดชะงัก
- ไม่มีกรณีขอบ: รายการว่าง ชื่อยาว กรณีข้อผิดพลาดมักจะไม่ถูกวาด
- การเข้าถึงไม่ใช่ค่าเริ่มต้น: คอนทราสต์ พื้นที่สัมผัส ลำดับการอ่านมักไม่ได้รับการควบคุม
- มันไม่แยแสกับโมเดลทางจิต: โมเดลจะสร้าง "อินเทอร์เฟซโดยเฉลี่ย" ไม่ใช่นิสัยของผู้ใช้ของคุณ
ทัศนคติที่ถูกต้อง: ถือว่าผลลัพธ์เป็นเพียงร่างเริ่มต้น ไม่ใช่การออกแบบขั้นสุดท้าย สิ่งที่ทำให้ Wireframe "ดี" คือผ่านการทดสอบกับเนื้อหาจริง Edge Case และการเข้าถึงได้
เวที
เอาท์พุตเอไอ
วุฒิภาวะที่คุณเพิ่ม
สั่งซื้อครั้งแรก
โครงกระดูกเส้นกล่อง
แก้ไขตามลำดับความสำคัญของเนื้อหา
เนื้อหา
ตัวอย่างความยาวในอุดมคติ
ทดสอบด้วยเนื้อหาจริงล้นและว่างเปล่า
ขอบกรณี
ปกติไม่มีเลย
สถานะว่างเปล่า/ผิดพลาด/กำลังโหลด
การเข้าถึง
ไม่ได้เลือก
คอนทราสต์ ลำดับ พื้นที่สัมผัส
ลิงค์สตรีม
หน้าจอเดียว
ความสอดคล้องกับหน้าจอก่อนหน้า/ถัดไป
มินิเคสสามอัน
กรณีที่ 1 — มีสามรูปแบบ การตัดสินใจที่ชัดเจน นักออกแบบถาม AI สำหรับเลย์เอาต์ที่แตกต่างกัน 3 แบบสำหรับแดชบอร์ด (การ์ดสรุป ตาราง แผนภูมิที่เน้นหนัก) 3 ร่างมาถึงใน 15 นาที; ทีมงานได้แสดงสิ่งเหล่านี้ให้ผู้มีส่วนได้ส่วนเสียและตัดสินใจทิศทางภายใน 20 นาที หากดำเนินการด้วยตนเอง ฉบับร่าง 3 รายการจะใช้เวลาครึ่งวัน
กรณีที่ 2 — เนื้อหาจริงขัดขวางคำสั่งซื้อ ในโครงลวด AI ชื่อผลิตภัณฑ์จะเป็น 2 คำเสมอ ในแค็ตตาล็อกจริง บางชื่อมีความยาว 40 อักขระและมีการ์ดล้น ผู้ออกแบบเปลี่ยนเค้าโครงหลังจากทดสอบด้วยข้อมูลจริง บทเรียน: เนื้อหาตัวอย่างโกหก; ทดสอบด้วยเนื้อหาจริง
กรณีที่ 3 — กรณีที่ลืมว่างเปล่า โครงร่างหน้าจอ "รายการโปรดของฉัน" แสดงเฉพาะรายการทั้งหมด ผู้ใช้ใหม่ไม่มีรายการโปรด หน้าจอเปิดขึ้นมาว่างเปล่า ผู้ออกแบบบอกให้ปัญญาประดิษฐ์ "วาดสภาวะว่างเปล่าด้วย" และเพิ่มสภาวะว่างเปล่าที่เป็นแนวทาง บทเรียน: สถานะว่างเป็นส่วนหนึ่งของการออกแบบหลัก ไม่ใช่ส่วนขอบ
เนื้อหาก่อนกล่องหลัง
ความเข้าใจผิดที่พบบ่อยที่สุดใน Wireframing คือการออกแบบ "การวางกล่อง" ผิด อย่างไรก็ตาม wireframe ที่ดีนั้นเน้นที่เนื้อหา ขั้นแรกคุณต้องตัดสินใจว่าข้อมูลใดควรปรากฏบนหน้าจอ และจัดลำดับความสำคัญเท่าใด กล่องเป็นผลมาจากการตัดสินใจครั้งนี้ การสร้าง "ลำดับความสำคัญของเนื้อหา" เป็นขั้นตอนแรกของการวางโครงร่าง: คุณแสดงรายการสิ่งที่ผู้ใช้ต้องการเห็นบนหน้าจอนี้จากสำคัญที่สุดไปสำคัญน้อยที่สุด AI เป็นพันธมิตรที่ดีในการสร้างรายการนี้ โดยจะจัดลำดับความสำคัญขององค์ประกอบเนื้อหาที่เป็นไปได้เมื่อคุณให้วัตถุประสงค์ของหน้าจอ จากนั้นคุณแปลลำดับความสำคัญนั้นตามลำดับ: รายการที่สำคัญที่สุดในตำแหน่งที่มองเห็นได้ชัดเจนที่สุด เมื่อลำดับนี้กลับกัน เมื่อคุณวาดเค้าโครงที่สวยงามเป็นครั้งแรก จากนั้นพยายามจัดเนื้อหาให้พอดี ข้อมูลที่ผู้ใช้ต้องการจริงๆ จะถูกผลักไปที่พื้นหลัง
ข้อควรระวัง: โครงลวดที่ดูดีอาจซ่อนลำดับความสำคัญของเนื้อหาที่ไม่ถูกต้อง “จัดแบบนี้ดีมั้ย?” แต่ "ข้อมูลที่สำคัญที่สุดเป็นสิ่งแรกที่ดึงดูดสายตาคุณหรือเปล่า" ถาม.
พร้อมท์ที่คัดลอกได้
บทบาทของคุณ: นักออกแบบผลิตภัณฑ์อาวุโส วัตถุประสงค์ของหน้าจอ: <<วัตถุประสงค์>> อุปกรณ์: <<มือถือ/เดสก์ท็อป>>.3 อันดับแรก: <<รายการ>> องค์ประกอบที่จำเป็น: <<รายการ>>งาน: แนะนำแนวทาง Wireframe ที่แตกต่างกัน 3 วิธี (พร้อมข้อความ ทีละส่วน) สำหรับแต่ละวิธี: ตรรกะของเลย์เอาต์ ลำดับความสำคัญ และสาเหตุที่ใช้งานได้
ทดสอบคำจำกัดความของโครงร่างนี้ในสภาวะโลกแห่งความเป็นจริง: << ข้อความโครงร่าง >> วาดหรืออธิบาย: สถานะว่างเปล่า เนื้อหายาว (ล้น) สถานะข้อผิดพลาด สถานะการโหลด ให้เขียนว่าเค้าโครงควรปรับเปลี่ยนอย่างไรสำหรับแต่ละรายการ
ตรวจสอบโครงร่างนี้เพื่อดูการเข้าถึง: ลำดับการอ่านสมเหตุสมผลหรือไม่ เป้าหมายการสัมผัสเพียงพอหรือไม่ มีเพียงข้อมูลที่เป็นสีเท่านั้น การดำเนินการหลักชัดเจนหรือไม่ ระบุปัญหาและข้อเสนอแนะทีละรายการ โครงลวด: <<ข้อความ>>
สร้างเนื้อหาตัวยึดตำแหน่งที่สมจริงสำหรับโครงร่างนี้: ส่วนหัว 5 ส่วนที่มีความยาวต่างกัน (จากสั้นไปยาวมาก) ข้อความสถานะว่างเปล่า 3 ข้อความ ข้อความแสดงข้อผิดพลาด 2 ข้อความ วัตถุประสงค์: เพื่อทดสอบการออกแบบด้วยเนื้อหาจริง ไม่เหมาะ บริบท: <<หน้าจอ>>
พรอมต์อ่อน / พรอมต์แข็งแกร่ง
จุดอ่อน: "สร้างโครงร่างหน้าแรก"
ผลลัพธ์: โครงกระดูกทั่วไปที่มีลำดับความสำคัญของเนื้อหาไม่ชัดเจน ความสม่ำเสมอ และไม่มี Edge Case
ชัดเจน: "แนะนำแนวทาง Wireframe ที่แตกต่างกัน 3 วิธีสำหรับหน้าแรกบนมือถือโดยมีวัตถุประสงค์ X องค์ประกอบที่สำคัญที่สุด 3 ประการคือ อธิบายตรรกะลำดับความสำคัญของแต่ละวิธี แสดงสถานะว่างเปล่าและข้อผิดพลาดด้วย"
ผลลัพธ์: ตัวเลือกที่เปรียบเทียบได้ จัดลำดับความสำคัญ และสมจริง
ความแตกต่าง: พรอมต์ที่แข็งแกร่งให้วัตถุประสงค์ + ลำดับความสำคัญ + รูปแบบ + ตัวพิมพ์ใหญ่
ข้อผิดพลาดทั่วไป
- พิจารณาเอาท์พุตแรกเป็นการออกแบบขั้นสุดท้าย AI wireframe คือจุดเริ่มต้น การดำเนินการในสภาพที่ยังไม่บรรลุนิติภาวะมีค่าใช้จ่ายสูง
- พอใจกับเนื้อหาตัวอย่าง ข้อความจำลองที่มีความยาวเหมาะสมทำให้เค้าโครงดูสวยงามเกินจริง
- ข้ามสถานะ null และข้อผิดพลาด หน้าจอแรกที่ผู้ใช้เห็นมักจะว่างเปล่า
- ปล่อยให้การเข้าถึงเป็นที่สุดท้าย ลำดับคอนทราสต์และการอ่านจะพิจารณาที่ระยะโครงร่างและจะไม่ได้รับการแก้ไขในภายหลัง
- ดำเนินการต่อด้วยรูปแบบเดียว การยึดติดกับแนวคิดแรกโดยไม่สร้างตัวเลือกจะขยายจุดบอดให้กว้างขึ้น
โดยสรุป
Wireframing เป็นวิธีที่ถูกที่สุดในการทดสอบลำดับความสำคัญและความลื่นไหลของเนื้อหาโดยไม่ต้องคำนึงถึงความสวยงาม AI ช่วยเร่งขั้นตอนนี้อย่างมาก สิ่งสำคัญคือการให้ข้อมูลสรุปที่ชัดเจน (วัตถุประสงค์ ลำดับความสำคัญ บริบท ข้อจำกัด รูปแบบ) ก่อนการผลิตและดูผลลัพธ์เป็นร่างเริ่มต้น ผลลัพธ์ของเครื่องมือที่สร้างอินเทอร์เฟซจากข้อความยังไม่สมบูรณ์จนกว่าจะทดสอบด้วยเนื้อหาจริง Edge Case และการเข้าถึง ใช้แบบจำลองเหมือนตัวสร้างตัวเลือกด่วน คุณเพิ่มความเป็นผู้ใหญ่และการตัดสินใจ
งานสมัคร
- เลือกหน้าจอและเขียนบทสรุปที่มีจุดประสงค์ องค์ประกอบที่สำคัญที่สุด 3 ประการ และองค์ประกอบบังคับ
- สร้างแนวทาง Wireframe ที่แตกต่างกัน 3 แบบอย่างชัดเจนด้วยพรอมต์แรก
- ด้วยพรอมต์ที่สี่ ให้สร้างเนื้อหาตัวยึดตำแหน่งที่เหมือนจริง (สั้น-ยาว-ว่างเปล่า) และทดสอบเค้าโครง
- เพิ่มสถานะว่าง ข้อผิดพลาด และการโหลดด้วยพรอมต์ที่สอง
- ทำการตรวจสอบการเข้าถึงด้วยพรอมต์ที่สามและโพสต์สิ่งที่ค้นพบไปที่โครงร่าง
รายการตรวจสอบ
- [ ] ฉันเขียนบรีฟโดยมีวัตถุประสงค์และลำดับความสำคัญก่อนการผลิต
- [ ] ฉันไม่ได้ผลิตเพียงหนึ่งรูปแบบ แต่มี 3 รูปแบบที่แตกต่างกัน
- [ ] ฉันทดสอบเลย์เอาต์ด้วยเนื้อหาที่สมจริง (ยาว/สั้น/ว่างเปล่า)
- [ ] ฉันออกแบบสถานะว่าง ข้อผิดพลาด และการโหลด
- [ ] ฉันตรวจสอบการเข้าถึงที่ระยะโครงลวดแล้ว
- [ ] ฉันถือว่าผลลัพธ์เป็นเหมือนร่างเริ่มต้นและทำให้มันสมบูรณ์