วิธีออกแบบแอปให้สวยด้วย AI

เพื่อให้ได้แอปที่ดูดีจาก AI อย่าสั่งว่า "ทำให้ดูดีหน่อย" แต่ให้ข้อมูลแบบที่นักออกแบบต้องการ คือตัวอย่างอ้างอิงสองสามชิ้นที่คุณชอบ ทิศทางการออกแบบที่ตั้งชื่อไว้ และกฎที่ชัดเจนเรื่องตัวอักษร สี และระยะห่าง จากนั้นสร้างหนึ่งหน้าจอ แก้จนถูกต้อง แล้วให้ AI ใช้ระบบเดียวกันกับหน้าอื่น ๆ "ลุคแบบ AI" ส่วนใหญ่มาจากคำสั่งที่กว้างจนได้คำตอบเฉลี่ย ข้อมูลที่เฉพาะเจาะจงจะได้งานออกแบบที่เฉพาะเจาะจง

ทำไมงานออกแบบของ AI ถึงดูทั่วไป

ถ้าขอ AI ว่า "แดชบอร์ด SaaS ที่ทันสมัยและสะอาด" มันจะให้ค่ากลางของแดชบอร์ดทุกอันที่เคยเห็น คือฟอนต์ sans-serif เดิม ๆ ไล่สีม่วงไปน้ำเงิน การ์ดมุมโค้งเงาอ่อน ไอคอนคล้ายอีโมจิในวงกลม และส่วนหัวตรงกลางที่เขียนว่า "เวิร์กโฟลว์ของคุณ ง่ายขึ้น" ไม่มีอะไรผิดในแต่ละตัวเลือก ปัญหาคือไม่มีตัวไหนถูกเลือกมา เพื่อผลิตภัณฑ์ของคุณ

การออกแบบที่ดีส่วนใหญ่คือการตัดสินใจ หน้าที่ของคุณคือทำการตัดสินใจไม่กี่อย่างที่ทำให้แอปมีบุคลิก แล้วปล่อยให้ AI จัดการการตัดสินใจเล็ก ๆ อีกเป็นพัน ๆ อย่างให้สม่ำเสมอ

ขั้นที่ 1: รวบรวมตัวอย่างอ้างอิงก่อนสั่งงาน

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

สำหรับแต่ละชิ้น ให้เขียนด้วยภาษาธรรมดาว่าคุณชอบ อะไร:

• "พื้นที่ว่างเยอะ เนื้อหาอยู่ในคอลัมน์แคบ ๆ ตัวเลขใหญ่มีป้ายสีเทาเล็ก ๆ อยู่ด้านบน"
• "ตารางแน่น เส้นคั่นบาง ไม่มีเงาการ์ด และมีสีเน้นสีเดียวสำหรับการกระทำ"
• "หัวข้อเป็นตัวอักษรเซอริฟขนาดใหญ่ พื้นหลังขาวนวลอุ่น ใช้ภาพถ่ายแทนภาพประกอบ"

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

ขั้นที่ 2: เลือกทิศทางการออกแบบและตั้งชื่อ

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

ใส่ทิศทางนี้ไว้ในคำสั่งแรก พร้อมบอกว่าแอปนี้ทำเพื่อใคร:

สร้างแอปจองคิวสำหรับสตูดิโอโยคะอิสระ ทิศทางการออกแบบ: สงบและเรียบง่าย เหมือนตารางเรียนที่พิมพ์ออกมา พื้นหลังขาวนวลอุ่น ตัวอักษรเกือบดำ และสีเขียวเซจอ่อนสีเดียวสำหรับปุ่มและสถานะที่เลือก ใช้ตัวอักษรเซอริฟสำหรับหัวข้อ และ sans-serif ที่อ่านง่ายสำหรับเนื้อหา มีระยะห่างกว้าง ไม่มีไล่สี ไม่มีเงา ไม่มีอีโมจิ เน้นมือถือเป็นหลัก

ขั้นที่ 3: ตั้งกฎเรื่องตัวอักษร สี และระยะห่าง

สามอย่างนี้ให้คุณภาพทางภาพส่วนใหญ่ การระบุให้ชัดเจนคือการปรับปรุงที่ได้ผลที่สุด

ตัวอักษร

• หนึ่งหรือสองแบบอักษร ฟอนต์สำหรับหัวข้อและฟอนต์สำหรับเนื้อหา หรือครอบครัวเดียวที่มีหลายน้ำหนัก
• สเกลขนาดตัวอักษร ชุดขนาดจำนวนไม่มาก ใช้อย่างสม่ำเสมอ เช่น 14, 16, 20, 28 และ 40 px แทนที่จะให้แต่ละคอมโพเนนต์เลือกเอง
• เนื้อหาอ่านง่าย ประมาณ 16 px บนเว็บ ความสูงบรรทัดประมาณ 1.5 และความยาวบรรทัดประมาณ 60–75 ตัวอักษรสำหรับข้อความยาว
• ลำดับชั้นด้วยน้ำหนักและขนาด ไม่ใช่สี หัวข้อหนาและใหญ่กว่า ข้อความรองเล็กกว่าและเป็นสีเทาอ่อนลง

สี

• ส่วนใหญ่เป็นสีเป็นกลาง พื้นหลัง พื้นผิว เส้นขอบ และเทาของข้อความทำงานหนักที่สุด
• สีเน้นหนึ่งสี สำหรับการกระทำและสถานะที่เลือก สีที่สองใช้เฉพาะเมื่อมีหน้าที่ชัดเจน
• สีสื่อความหมาย สำหรับสำเร็จ เตือน และผิดพลาด และใช้เฉพาะกับสิ่งเหล่านั้น
• คอนทราสต์ WCAG 2 กำหนดอัตราส่วนคอนทราสต์อย่างน้อย 4.5:1 สำหรับข้อความเนื้อหาปกติ และ 3:1 สำหรับข้อความขนาดใหญ่ ข้อความสีเทาอ่อนบนพื้นขาวมักไม่ผ่าน ให้ AI ช่วยตรวจ
• โหมดมืด ถ้าต้องการ ให้ออกแบบโดยตั้งใจ ไม่ใช่แค่กลับสี

ระยะห่างและเลย์เอาต์

• สเกลระยะห่าง เช่น 4, 8, 12, 16, 24, 32, 48, 64 px ทุกอย่างยึดกับสเกลนี้
• การจัดแนว ขอบเรียงกัน เนื้อหาอยู่บนกริดหรือคอลัมน์ความกว้างสูงสุดที่สม่ำเสมอ
• ความใกล้ชิด สิ่งที่เกี่ยวข้องอยู่ใกล้กัน สิ่งที่ไม่เกี่ยวข้องอยู่ห่างกัน กฎข้อเดียวนี้แก้หน้าจอที่รกได้ส่วนใหญ่
• ใช้การ์ดน้อยลง ไม่ใช่ทุกอย่างต้องอยู่ในการ์ด เส้นขอบ เส้นคั่น และพื้นที่ว่างช่วยจัดกลุ่มเนื้อหาได้อย่างนุ่มนวลกว่า

คำสั่งที่ตั้งระบบนี้ครั้งเดียว:

ก่อนสร้างหน้าจอเพิ่ม ให้ตั้งระบบการออกแบบเล็ก ๆ แล้วใช้ทุกที่: สเกลตัวอักษร 14/16/20/28/40 px ความสูงบรรทัดของเนื้อหา 1.5 สเกลระยะห่าง 4/8/12/16/24/32/48 px พาเลตต์เป็นกลางตั้งแต่ขาวใกล้ ๆ ถึงดำใกล้ ๆ สีเน้นหนึ่งสี (#3F6B5A) ใช้เฉพาะปุ่มหลัก และสีแดงใช้เฉพาะข้อผิดพลาด ปุ่ม ช่องกรอก และการ์ดควรมีรัศมีมุมเดียวกัน ตรวจว่าข้อความทั้งหมดผ่านคอนทราสต์ WCAG AA

ถ้าใช้เครื่องมือที่เข้าใจโค้ด สิ่งนี้มักกลายเป็นโทเคนการออกแบบ เช่น CSS variables หรือธีม Tailwind ซึ่งหมายความว่าการเปลี่ยนแปลงในภายหลังทำที่จุดเดียว

ขั้นที่ 4: สร้างหน้าจอหนึ่งหน้าให้ดีก่อน

อย่าสร้างสิบสองหน้าจอแล้วพยายามแก้ทั้งหมดพร้อมกัน เลือกหน้าที่ผู้ใช้เห็นบ่อยที่สุด ซึ่งมักเป็นแดชบอร์ดหรือรายการหลัก แล้วปรับจนถูกต้อง จากนั้นสั่งว่า:

ใช้แดชบอร์ดเป็นต้นแบบสำหรับทุกหน้า: ส่วนหัว ระยะห่าง ขนาดตัวอักษร สไตล์ปุ่ม และสไตล์ตารางเหมือนกัน ปรับหน้าการตั้งค่าและหน้าการจองให้ตรงกับแดชบอร์ด

หน้าจอต้นแบบที่สมบูรณ์สื่อรสนิยมของคุณได้ดีกว่าคำคุณศัพท์ใด ๆ

ขั้นที่ 5: ปรับแก้ทีละเล็กทีละน้อยด้วยคำขอที่เจาะจง

การให้ฟีดแบ็กกับ AI ทำงานเหมือนการให้ฟีดแบ็กกับนักออกแบบรุ่นน้อง คือเจาะจง ทีละส่วน และบอกชัดว่าอะไรควรคงไว้

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

ขั้นที่ 6: รายละเอียดที่ทำให้แอปดีกว่าแบบทั่วไป

เมื่อโครงสร้างถูกต้องแล้ว สิ่งเล็ก ๆ เหล่านี้ทำให้แอปดูเสร็จสมบูรณ์:

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

ข้อผิดพลาดที่พบบ่อย

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

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

การออกแบบกับ Mythex

ใน Mythex คุณอธิบายการออกแบบในแชต ดูผลในพรีวิวสด และตรวจกรอบขนาดโทรศัพท์ก่อนการเปลี่ยนแปลงครั้งถัดไป เอกสารมีรูปแบบสั้น ๆ สำหรับเรื่องนี้: คำสั่งการออกแบบและ UI ที่อธิบายการระบุสิ่งที่จะเปลี่ยนและสิ่งที่จะคงไว้ และออกแบบ UI ใหม่ สำหรับการปรับโฉมทีละหน้าโดยไม่สูญเสียฟีเจอร์ Mythex ยังค้นหาภาพสต็อกหรือสร้างภาพในแชตได้ เช่น ภาพฮีโร่ พื้นหลัง หรือภาพแชร์ และวางลงในแอปเมื่อคุณขอ ถ้าการปรับแก้ครั้งใดผิดพลาด ให้ย้อนกลับไปยังจุดตรวจสอบก่อนหน้านั้น และถ้าอยากเริ่มจากการออกแบบที่มีอยู่แล้วแล้วปรับเอง ลองดูเทมเพลต

คำถาม