กำไร:
- ความสามารถในการสร้างโค้ดอินเทอร์เฟซที่แข็งแกร่งสำหรับ Jetpack Compose และ SwiftUI ตามวัตถุประสงค์ ส่วนประกอบ สี่สถานะ (กำลังโหลด/ว่างเปล่า/ข้อผิดพลาด/เต็ม) ระบบการออกแบบ และการเข้าถึง
- ความสามารถในการสร้างอินเทอร์เฟซที่เปิดให้ผู้ใช้ทุกคนโดยกำหนดการเข้าถึงตั้งแต่ต้น โดยมีป้ายกำกับที่ถูกต้อง คอนทราสต์ที่เพียงพอ และสัมผัสที่เหมาะสม
- ความสามารถในการสร้างอินเทอร์เฟซที่พร้อมสำหรับธีมสว่าง/มืดที่สอดคล้องกัน หลายภาษา และด้วยการอ่านสีและพื้นที่จากธีมกลาง
ความสำเร็จของแอปบนอุปกรณ์เคลื่อนที่ส่วนใหญ่ขึ้นอยู่กับอินเทอร์เฟซผู้ใช้ (UI — หน้าจอที่ผู้ใช้เห็นและสัมผัส) และประสบการณ์ผู้ใช้ (UX — ความราบรื่นและความสนุกสนานในการใช้งาน) ผู้ใช้ไม่เห็นรหัสที่ไม่ดี แต่รู้สึกถึงอินเทอร์เฟซที่ไม่ดีในวินาทีแรก AI มีบทบาทที่ทรงพลังสองประการในการพัฒนาอินเทอร์เฟซ ในด้านหนึ่ง AI จะสร้างแนวคิดการออกแบบ โฟลว์ และข้อความ (การเขียน UX) ในทางกลับกัน มันจะแปลงการออกแบบนี้เป็นโค้ดอินเทอร์เฟซที่ใช้งานได้โดยตรง ในหน่วยนี้ เราจะได้เรียนรู้วิธีสร้างอินเทอร์เฟซที่รวดเร็ว เข้าถึงได้ และสอดคล้องกับ AI โดยเน้นที่เครื่องมืออินเทอร์เฟซการประกาศที่ทันสมัย Jetpack Compose (Android) และ SwiftUI (iOS) "การประกาศ" หมายความว่าแทนที่จะอธิบายทีละขั้นตอนถึงวิธีการวาดหน้าจอ คุณอธิบายว่า "นี่คือลักษณะที่หน้าจอควรมีลักษณะในสถานการณ์นี้"; เครื่องมือจะจัดการส่วนที่เหลือ
จากการออกแบบไปจนถึงการเขียนโค้ด: ลำดับที่ถูกต้อง
การบอก AI ให้ “ทำจอสวย” นั้นคลุมเครือ เพราะ “สวย” ไม่สามารถวัดได้ การสร้างอินเทอร์เฟซที่ดีเป็นไปตามลำดับนี้:
- วัตถุประสงค์และเนื้อหา หน้าจอทำอะไร, แสดงข้อมูลอะไร, ผู้ใช้จะทำอย่างไร?
- รายการส่วนประกอบ ส่วนต่างๆ เช่น ชื่อเรื่อง รายการ ปุ่ม ฟิลด์แบบฟอร์ม
- สถานการณ์ กำลังโหลด ว่างเปล่า (ไม่มีข้อมูล) ผิดพลาด เต็ม — สถานะพื้นฐานสี่สถานะหน้าจอ
- ระบบการออกแบบ สี ตัวอักษร กฎการเว้นวรรค โดยทั่วไปจะเป็นไปตามแนวทางอินเทอร์เฟซของมนุษย์ของ Material 3 (Android) หรือ iOS
- การเข้าถึง ป้ายโปรแกรมอ่านหน้าจอ คอนทราสต์ที่เพียงพอ ขนาดเป้าหมายการสัมผัส
- รหัส. ต้องบอกว่าทั้งหมดนี้สร้าง Composable หรือ SwiftUI View
ขั้นตอนที่ข้ามบ่อยที่สุดคือขั้นตอนที่สาม นักพัฒนาจะพิจารณาเฉพาะสถานะ "เต็ม" เท่านั้น ในขณะที่แอปพลิเคชันจริงผู้ใช้มักพบสถานการณ์ "กำลังโหลด" และ "ข้อผิดพลาด" การพิมพ์ทั้งสี่สถานะไปยัง AI เป็นความลับของอินเทอร์เฟซที่แข็งแกร่ง
เคล็ดลับ: เพิ่ม "สร้างการโหลด ว่างเปล่า ผิดพลาด และเต็มแยกกัน" ที่ส่วนท้ายของพร้อมท์ ประโยคเดียวนี้ทำให้อินเทอร์เฟซของคุณพร้อมสำหรับโลกแห่งความเป็นจริง และลดจำนวนข้อผิดพลาดในขั้นตอน QA (การทดสอบคุณภาพ) ได้อย่างมาก
การเข้าถึงไม่สามารถต่อรองได้
ความสามารถในการเข้าถึง — ความสามารถในการใช้แอปพลิเคชันโดยผู้ใช้ที่มีความบกพร่องทางการมองเห็น การได้ยิน หรือการเคลื่อนไหว — เป็นทั้งความรับผิดชอบทางจริยธรรมและการจัดเก็บและความคาดหวังทางกฎหมาย AI สร้างโค้ดที่สามารถเข้าถึงได้หากต้องการ ส่งคืนอินเทอร์เฟซแบบไม่มีแท็กและคอนทราสต์ต่ำ หากไม่ต้องการ กฎง่ายๆ 3 ข้อ: กำหนดให้องค์ประกอบเชิงโต้ตอบแต่ละรายการมีป้ายกำกับที่มีความหมายสำหรับโปรแกรมอ่านหน้าจอ (contentDescription / accessibilityLabel) คอนทราสต์ของสีที่เพียงพอระหว่างข้อความและพื้นหลัง (อัตราส่วนอย่างน้อย 4.5:1) และเป้าหมายการสัมผัสอย่างน้อย 48x48 dp/44x44 pt ถาม AI สิ่งเหล่านี้อย่างชัดเจน
ข้อควรระวัง: AI ยังสามารถเพิ่มแท็กการช่วยสำหรับการเข้าถึงแบบยาวให้กับไอคอนตกแต่งได้ สิ่งนี้ทำให้ผู้ใช้โปรแกรมอ่านหน้าจอล้นหลามด้วยการพูดคุยที่ไม่จำเป็น องค์ประกอบการตกแต่งเพียงอย่างเดียวควร "ซ่อนไม่ให้สามารถเข้าถึงได้" (ตัวอ่านหน้าจออนุญาตให้ข้ามได้) ตรวจสอบฉลากที่ผลิต: ให้ความหมายพูด ปล่อยให้การตกแต่งเงียบ
ความสอดคล้อง: ระบบการออกแบบและธีม
แอปพลิเคชันระดับมืออาชีพไม่ใช้สีและการเว้นวรรคแบบสุ่ม เป็นไปตามระบบการออกแบบ (ชุดสี แบบอักษร ระยะห่าง และส่วนประกอบมาตรฐาน) หากคุณให้ค่าธีมแก่ AI (สีหลัก สีรอง รัศมีมุม ขนาดตัวอักษร) หน้าจอทั้งหมดจะออกมาสอดคล้องกัน หากไม่ทำเช่นนั้น แต่ละหน้าจอจะใช้สีฟ้าที่แตกต่างกัน และแอปจะดูรกตา วิธีที่มีประสิทธิภาพมากที่สุดคือการขอให้ AI สร้างไฟล์โทเค็นธีม/การออกแบบ จากนั้นจึงผูกหน้าจอทั้งหมดเข้ากับธีมนั้น
เรื่อง
วิธีการที่ไม่ดี
แนวทางที่แข็งแกร่ง
สี
รหัสสีแต่ละหน้าจอด้วยตนเอง
ธีมกลาง หน้าจออ่านจากธีม
สถานการณ์
มีเพียง "เต็มหน้าจอ" เท่านั้น
กำลังโหลด/ว่างเปล่า/ผิดพลาด/เต็มสี่สถานะ
การเข้าถึง
เพิ่มในภายหลัง
ย่อมกำหนดไว้ในคำกล่าวอ้างตั้งแต่ต้น
ข้อความ
ฝังอยู่ในโค้ด
แยกแหล่งที่มา พร้อมหลายภาษา
มินิเคสสามอัน
กรณีที่ 1 — บันทึกกรณีว่างแล้ว ทีมแอปข่าวมี AI พิมพ์สถานะหน้าจอแต่ละหน้าจอ ต้องขอบคุณหน้าจอ "สถานะไม่ได้ใช้งาน" ("ยังไม่มีการบันทึกข่าว") ผู้เข้าร่วมการทดสอบ 70% ไม่ได้ออกจากแอปบนหน้าจอว่างเปล่า ในเวอร์ชันก่อนหน้านี้ หน้าจอว่างเปล่ายังคงเป็นสีขาว และผู้ใช้คิดว่าหน้าจอ "พัง" และทิ้งไว้ สำเนาขนาดเล็กเพิ่มอัตราการเก็บรักษา
กรณีที่ 2 — การปฏิเสธคอนทราสต์ ทีมหนึ่งสมัครไปที่ App Store ด้วยหน้าจอที่มีข้อความสีเทาอ่อนซึ่งเป็นสีของแบรนด์ Apple ออกคำเตือนเกี่ยวกับเหตุผลด้านการเข้าถึงเนื่องจากมีคอนทราสต์ต่ำ เมื่อ AI ได้รับคำสั่งให้ "เพิ่มคอนทราสต์ของข้อความ-พื้นหลังให้สูงกว่า 4.5:1" สีก็เข้มขึ้นและปัญหาก็ได้รับการแก้ไข หากได้รับการร้องขอตั้งแต่ต้นก็คงจะไม่ล่าช้า
กรณีที่ 3 — สัญญาณรบกวนฉลากตกแต่ง ผู้ทดสอบที่มีความบกพร่องทางการมองเห็นรายงานว่าไอคอนเครื่องประดับทุกอัน ("เส้น" "จุด" "เงา") ถูกอ่านออกเสียงบนหน้าจอที่สร้างโดย AI ทำให้หน้าจอไม่สามารถใช้งานได้ ประสบการณ์โปรแกรมอ่านหน้าจอจะลื่นไหลเมื่อองค์ประกอบตกแต่งถูกซ่อนจากการเข้าถึง บทเรียน: การเข้าถึงหมายถึง “แท็กที่ถูกต้อง” ไม่ใช่ “แท็กมากเกินไป”
พรอมต์อ่อน / พรอมต์แข็งแกร่ง
ข้อความเตือนที่อ่อนแอ: "ออกแบบหน้าจอโปรไฟล์"
พร้อมท์ที่มีประสิทธิภาพ: "สร้างหน้าจอโปรไฟล์ผู้ใช้สำหรับ iOS/SwiftUI เนื้อหา: อวตาร ชื่อ อีเมล ปุ่ม 'แก้ไขโปรไฟล์' รายการการตั้งค่า สถานะ: กำลังโหลด (โครงกระดูก) ข้อผิดพลาด (ปุ่มลองใหม่) เต็ม การออกแบบ: ไม่ใช่วัตถุ สอดคล้องกับ iOS HIG สีของระบบ ประเภทไดนามิก การเข้าถึง: accessibilityLabel สำหรับแต่ละองค์ประกอบ ไอคอนตกแต่งที่ซ่อนอยู่ แตะเป้าหมายขั้นต่ำ 44pt อ่านค่าของธีมจากไฟล์แยกต่างหาก อย่าฝังรหัสสีบนหน้าจอ ขั้นแรก วาดแผนผังส่วนประกอบ จากนั้นจึงส่งออกโค้ด"
เทมเพลตที่คัดลอกได้
เทมเพลตการสร้างหน้าจอ: "สร้าง [ชื่อหน้าจอ] สำหรับ [แพลตฟอร์ม/เครื่องมือ] เนื้อหา: [องค์ประกอบ] การกระทำของผู้ใช้: [การกระทำ] สร้างสี่สถานะแยกกัน: กำลังโหลด ว่างเปล่า ผิดพลาด เต็ม ระบบการออกแบบ: [วัสดุ 3 / iOS HIG] อ่านจากโทเค็นของธีม การเข้าถึง: ป้ายกำกับ คอนทราสต์ >=4.5:1 มาตรฐานเป้าหมายการสัมผัส"
เทมเพลตระบบธีม/การออกแบบ: "สร้างคำจำกัดความของธีมส่วนกลางสำหรับแอปของฉัน ([เขียนธีม / โครงสร้างโทเค็นการออกแบบใน SwiftUI]): - สีหลัก [ฐานสิบหก] รอง [ฐานสิบหก] สีข้อผิดพลาด สีพื้นผิว - ขนาดการพิมพ์ (ชื่อ เนื้อหา คำอธิบาย) - ขนาดระยะห่าง (4,8,16,24) - มาตรฐานรัศมีมุม เพิ่มการสนับสนุนธีมสว่างและมืด"
เทมเพลตการตรวจสอบการช่วยสำหรับการเข้าถึง:"ตรวจสอบโค้ดหน้าจอนี้เพื่อดูการช่วยสำหรับการเข้าถึง:1) มีองค์ประกอบเชิงโต้ตอบที่ไม่ได้ติดแท็กหรือไม่2) อัตราส่วนคอนทราสต์เพียงพอหรือไม่3) เป้าหมายการสัมผัสมีขนาดใหญ่เพียงพอหรือไม่4) องค์ประกอบตกแต่งถูกซ่อนจากโปรแกรมอ่านหน้าจอหรือไม่แนะนำการแก้ไขสำหรับแต่ละปัญหา [รหัส]"
การออกแบบเป็นเทมเพลตโค้ด: "ฉันอธิบายการออกแบบต่อไปนี้: [คำอธิบายหน้าจอหรือภาพหน้าจอ] แปลสิ่งนี้เป็นโค้ด [เขียน/SwiftUI] รักษาระยะห่างและการจัดแนวให้ตรงตามการออกแบบ แต่เพิ่มสถานะทั้งสี่"
ข้อผิดพลาดทั่วไป
- แค่คิดสถานการณ์ให้เต็มที่ โดยส่วนใหญ่ผู้ใช้จริงจะเห็นหน้าจอการโหลด/ข้อผิดพลาด
- การฝังสีและพื้นที่ในโค้ด หากธีมไม่เป็นศูนย์กลาง ความสอดคล้องจะหายไปและการบำรุงรักษาจะยากขึ้น
- ปล่อยให้การเข้าถึงเป็นที่สุดท้าย การเพิ่มในภายหลังมีราคาแพง ไม่มีค่าใช้จ่ายหากได้รับการร้องขอตั้งแต่ต้น
- การติดฉลากซ้อนทับ การอ่านองค์ประกอบตกแต่งยังรบกวนประสบการณ์การใช้งานโปรแกรมอ่านหน้าจออีกด้วย
- การฝังข้อความในโค้ด เมื่อต้องการการสนับสนุนหลายภาษา จำเป็นต้องเปลี่ยนแต่ละหน้าจอด้วยตนเอง แยกข้อความออกจากกัน
- คาดว่าจะมีสำเนาถูกต้องจากภาพหน้าจอ การออกแบบ AI ผลิตประมาณ ความแม่นยำของพิกเซลถูกตั้งค่าด้วยตนเอง
โดยสรุป
AI มีประสิทธิภาพในการผลิตส่วนต่อประสาน แต่ต้องการคำแนะนำ ลำดับที่ถูกต้อง: วัตถุประสงค์ ส่วนประกอบ สี่สถานะ (กำลังโหลด/ว่างเปล่า/ข้อผิดพลาด/เต็ม) ระบบการออกแบบ การเข้าถึง และโค้ด การเข้าถึงไม่สามารถต่อรองได้และหมายถึง "ป้ายกำกับที่ถูกต้อง" ไม่ใช่ "ป้ายกำกับมากเกินไป" เพื่อความสอดคล้องกัน โปรดอ่านสีและการเว้นวรรคจากธีมกลาง อย่าฝังไว้ในโค้ด ผู้แข็งแกร่งจะกำหนดทั้งหมดนี้ตั้งแต่เริ่มต้น ดังนั้นอินเทอร์เฟซจึงพร้อมสำหรับโลกแห่งความเป็นจริง การอนุมัติของร้านค้า และผู้ใช้ทุกคน
งานสมัคร
การใช้ “เทมเพลตการสร้างหน้าจอ” สำหรับหน้าจอการตั้งค่า ถาม AI สำหรับการเขียนหรือรหัส SwiftUI และขอสถานะทั้งสี่ จากนั้นให้ตรวจสอบรหัสเดียวกันด้วย "เทมเพลตการตรวจสอบการเข้าถึง" ค้นหาและแก้ไขการปรับปรุงการเข้าถึงอย่างน้อยหนึ่งรายการ (ป้ายกำกับหายไป คอนทราสต์ต่ำ หรือเป้าหมายการสัมผัสขนาดเล็ก) และจดบันทึกสถานะ (กำลังโหลด/ว่างเปล่า/ข้อผิดพลาด) ที่คุณคิดว่าจะปรากฏบ่อยที่สุดในการใช้งานจริง
รายการตรวจสอบ
- [ ] ฉันทำให้วัตถุประสงค์และส่วนประกอบของจอแสดงผลชัดเจนในข้อความแจ้ง
- [ ] ฉันมีสถานะสี่สถานะ (กำลังโหลด/ว่าง/ผิดพลาด/เต็ม) ที่สร้างแยกกัน
- [ ] ฉันทำให้สีและพื้นที่อ่านจากธีมกลาง ฉันไม่ได้ฝังไว้ในโค้ด
- [ ] ฉันต้องการป้ายกำกับการเข้าถึงและความเปรียบต่างตั้งแต่ต้น
- [ ] ฉันตรวจสอบแล้วว่าองค์ประกอบตกแต่งถูกซ่อนจากโปรแกรมอ่านหน้าจอ
- [ ] ฉันเก็บข้อความแยกไว้ต่างหาก พร้อมสำหรับหลายภาษา