วิธีเขียนพรอมป์ GPT Image สำหรับม็อกอัป UI
วิธีเขียนพรอมป์ GPT Image 2 สำหรับแดชบอร์ด หน้าจอแอป และม็อกอัปบนอุปกรณ์ ให้ได้เลย์เอาต์ที่คาดเดาได้และป้ายข้อความที่อ่านออก
พรอมป์ GPT Image ที่ดีสำหรับม็อกอัป UI จะระบุผลิตภัณฑ์ หน้าจอและคอมโพเนนต์หลัก อุปกรณ์หรือเฟรมที่หน้าจอนั้นอยู่ สไตล์ภาพ และข้อความที่ต้องอ่านออกแบบตรงตัว ไล่คอมโพเนนต์ตามลำดับการอ่านและเขียนข้อความบนหน้าจอให้สั้น เพราะโมเดลเรนเดอร์ป้ายข้อความขนาดใหญ่ไม่กี่จุดได้แม่นยำกว่าข้อความอินเทอร์เฟซยาวเป็นย่อหน้ามาก
บรรยายหน้าจอเหมือนวาดไวร์เฟรม
เริ่มจากบอกว่าหน้าจอนี้มีไว้ทำอะไรและมีอะไรอยู่บ้าง ตามลำดับที่ผู้ใช้จะอ่าน ได้แก่ เมนูนำทาง ส่วนหัว เนื้อหาหลัก แผงรอง และปุ่มดำเนินการ โมเดลจะจัดวางคอมโพเนนต์ได้คาดเดาง่ายกว่าเมื่อไล่รายการออกมา เทียบกับการปล่อยให้คำบอกสไตล์อย่างแดชบอร์ดโมเดิร์นสื่อเป็นนัย
- ระบุผลิตภัณฑ์และหน้าจอ: “แดชบอร์ดวิเคราะห์ข้อมูลสำหรับเครื่องมือจัดการการเรียกเก็บเงินแบบ SaaS” หรือ “หน้าจอเริ่มต้นใช้งานของแอปทำสมาธิ”
- ไล่ส่วนต่าง ๆ ตามลำดับ: แถบเมนูด้านข้าง แถบด้านบนพร้อมช่องค้นหา การ์ด KPI สามใบ กราฟเส้น และตารางธุรกรรมล่าสุด
- ระบุความหนาแน่น: ระยะห่างกว้างขวาง ขนาดการ์ดเท่ากัน การจัดแนวชัดเจน
เลือกเฟรม: หน้าจอแบน อุปกรณ์ หรือฉาก
ตัดสินใจว่าต้องการภาพอินเทอร์เฟซแบบแบนสำหรับกรณีศึกษา ม็อกอัปบนอุปกรณ์สำหรับแลนดิ้งเพจ หรือฉากถ่ายภาพสำหรับงานการตลาด แต่ละแบบต้องใช้ถ้อยคำต่างกัน
- แบบแบน: “ภาพหน้าจอ UI แบบแบน ไม่มีกรอบอุปกรณ์ 16:9”
- อุปกรณ์: “บนแล็ปท็อปบางเฉียบที่วางเอียงเล็กน้อย หน้าจอหันเข้าหากล้อง มีเงาสะท้อนนุ่ม ๆ”
- ฉาก: “แล็ปท็อปบนโต๊ะไม้ในแสงธรรมชาติตอนกลางวัน ระยะชัดตื้น” และควรคาดไว้ว่าอินเทอร์เฟซจะเล็กลงและอ่านยากขึ้น
เขียนข้อความในอินเทอร์เฟซให้สั้นและตรงตัว
ข้อความที่อ่านออกคือจุดที่ UI ที่ AI สร้างพลาดบ่อยที่สุด ใส่เครื่องหมายคำพูดเฉพาะป้ายข้อความไม่กี่จุดที่สำคัญ แล้วปล่อยให้ส่วนที่เหลือเป็นบรรทัดข้อความตัวอย่าง
- ใส่หัวข้อและปุ่มในเครื่องหมายคำพูดแบบตรงตัว: “รายได้”, “อัปเกรดแพ็กเกจ”
- ขอให้ใช้บรรทัดข้อความตัวอย่างแทนเนื้อหาส่วนเนื้อความ
- หลีกเลี่ยงตารางยาว ๆ ที่มีข้อมูลจริง และขอเป็นธุรกรรมตัวอย่างห้าแถวแทน
กำหนดระบบภาพ
คำบอกสไตล์อย่างกลาสมอร์ฟิซึมช่วยได้ แต่ระบบภาพสั้น ๆ จะให้ผลลัพธ์ที่สม่ำเสมอกว่าเมื่อต้องสร้างหลายหน้าจอ
- สี: พื้นหลัง พื้นผิว สีเน้นหลัก และสีแสดงสถานะ
- ตัวอักษร: ฟอนต์ตระกูล sans-serif ลำดับน้ำหนักตัวอักษรที่ชัดเจน และขนาดที่ต่างกันชัดระหว่างหัวข้อกับป้ายข้อความ
- คอมโพเนนต์: ความโค้งของมุม เงา เส้นขอบ และสไตล์ไอคอน
เช็กลิสต์พรอมป์
- ระบุผลิตภัณฑ์ จุดประสงค์ของหน้าจอ และกลุ่มผู้ใช้แล้ว
- ไล่คอมโพเนนต์ตามลำดับการอ่านแล้ว
- เลือกเฟรมแล้ว: ภาพแบบแบน อุปกรณ์ หรือฉาก
- มีเพียงข้อความสั้น ๆ ในเครื่องหมายคำพูดที่ต้องอ่านออก
- กำหนดสี ตัวอักษร และสไตล์คอมโพเนนต์แล้ว
- อัตราส่วนภาพตรงกับเป้าหมาย: 16:9 สำหรับเดสก์ท็อป 9:16 สำหรับมือถือ
คำถามที่พบบ่อย
GPT Image 2 สร้างงานออกแบบ UI ที่ใช้งานได้จริงไหม?
โมเดลสร้างคอนเซ็ปต์ภาพและม็อกอัปที่ดูน่าเชื่อสำหรับงานนำเสนอ แลนดิ้งเพจ และมู้ดบอร์ดได้ ให้ถือว่าผลลัพธ์เป็นภาพอ้างอิง ไม่ใช่งานออกแบบสำหรับโปรดักชัน เพราะระยะห่าง ไอคอน และตัวอักษรขนาดเล็กยังไม่แม่นยำพอจะส่งต่อเป็นสเปก
จะทำให้ข้อความในม็อกอัป UI อ่านออกได้อย่างไร?
จำกัดข้อความที่ต้องอ่านออกไว้แค่ป้ายข้อความไม่กี่จุดในเครื่องหมายคำพูด ทำให้มีขนาดใหญ่ และบรรยายส่วนที่เหลือทั้งหมดเป็นบรรทัดข้อความตัวอย่าง คำสั้น ๆ ในฟอนต์ sans-serif ที่สะอาดตาจะเรนเดอร์ได้แม่นยำที่สุด
จะทำให้หลายหน้าจอดูสอดคล้องกันได้อย่างไร?
ใช้ย่อหน้าระบบภาพเดียวกันซ้ำในทุกพรอมป์ แล้วเปลี่ยนเฉพาะคำบรรยายหน้าจอ หน้าจอที่สร้างจากเทมเพลตเดียวกันจะใกล้เคียงกันมากกว่าหน้าจอที่บรรยายใหม่ตั้งแต่ต้น
เทมเพลตพรอมป์ที่เกี่ยวข้อง
ใช้คู่มือนี้กับพรอมป์จริง
เลือกดูเทมเพลตพรอมป์จากหมวดที่ตรงกันในคลัง แล้วดัดแปลงโครงสร้างให้เข้ากับเวิร์กโฟลว์สร้างภาพของคุณ