ถึงเวลาที่นักออกแบบจะเปลี่ยนจากการออกแบบตามรูปภาพเป็นการออกแบบตามโค้ด

เหตุใดจึงเปลี่ยนจากการออกแบบที่ใช้รูปภาพเป็นรหัส

มีปัญหาใหญ่ตั้งแต่เริ่มต้นการออกแบบผลิตภัณฑ์ดิจิทัล นักออกแบบถูกแยกออกจากกระบวนการพัฒนาผลิตภัณฑ์และถูกบังคับให้ทำงานกับซอฟต์แวร์เท่านั้น

นักออกแบบใช้กราฟิกแรสเตอร์หรือเครื่องมือออกแบบเวกเตอร์เพื่อวาดภาพเนื่องจากถูกแยกออกจากส่วนที่เหลือขององค์กร กระบวนการส่วนใหญ่ยังคงเหมือนเดิมแม้ว่าจะทำงานในซอฟต์แวร์ต่างๆ เช่น Photoshop, Gimp, Sketch หรือ Fireworks ชุดของภาพนิ่งจะถูกส่งไปยังวิศวกรตามที่นักออกแบบกำหนด

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

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

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

เวิร์กโฟลว์ใหม่มีให้โดยชุดเครื่องมือใหม่ที่:

• นักออกแบบและวิศวกรต่างก็สร้างแหล่งความจริงเพียงแหล่งเดียว
• หากไม่มีประสบการณ์ในการเขียนโปรแกรมใดๆ มันจะช่วยให้นักออกแบบสามารถเขียนโค้ดได้อย่างเต็มที่
• นักออกแบบและวิศวกรทั้ง 2 คนเชื่อมต่อกันผ่านกระบวนการสร้างสรรค์ร่วมกันซึ่งสร้างวิวัฒนาการเวิร์กโฟลว์ที่น่าทึ่ง

อิงจากรูปภาพไปจนถึงการออกแบบตามโค้ดด้วย UXPin

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

เครื่องมือออกแบบโดยใช้รูปภาพเป็นแนวทางที่ใช้มาหลายสิบปีและค่อนข้างเก่า นักออกแบบต้องสร้างกราฟิกแบบเวกเตอร์หรือแรสเตอร์เมื่อวาดภาพซึ่งเป็นแนวคิดของเครื่องมือนี้

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

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

2. ขาดความแม่นยำ: นอกเหนือจากการสร้างการออกแบบที่ยอดเยี่ยมซึ่งมีรายละเอียดแล้ว ผลลัพธ์ที่ไม่แม่นยำที่สุดในระหว่างกระบวนการพัฒนามักใช้เครื่องมือที่ใช้รูปภาพเป็นหลัก ผลงานของนักออกแบบถูกแสดงด้วยกระบวนการที่แตกต่างอย่างสิ้นเชิง

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

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

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

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

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

นักออกแบบและวิศวกรถูกตัดการเชื่อมต่อและผิดหวังซึ่งกันและกัน เนื่องจากส่วนประกอบแบบโต้ตอบที่นำกลับมาใช้ใหม่ได้ ขาดการโต้ตอบที่แท้จริง และความสามารถในการนำเข้าการเชื่อมต่อจากโค้ด

เอกลักษณ์ในการออกแบบตามโค้ด

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

ต่อไปนี้เป็นประโยชน์สำหรับนักออกแบบหลังจากเปลี่ยนจากการออกแบบที่ใช้รูปภาพเป็นการออกแบบโค้ด

1. Fidelity: มีความตรงกันร้อยเปอร์เซ็นต์ระหว่างความตั้งใจของนักออกแบบและผลลัพธ์ที่สามารถเขียนโค้ดได้เมื่อใช้การออกแบบตามโค้ด ในการแสดงโครงการออกแบบทั้งหมด เทคโนโลยีที่ใช้ในการออกแบบโดยใช้โค้ดจะเหมือนกับการพัฒนาเว็บ

2. ขจัดข้อแตกต่างระหว่างนักออกแบบและนักพัฒนา: สิ่งที่ยากต่อการออกแบบและไม่สามารถสร้างขึ้นใหม่ในโค้ดได้ นักออกแบบสามารถสร้างขึ้นในเครื่องมือที่ใช้รูปภาพได้ ข้อจำกัดเดียวกันนี้ใช้ได้กับทั้งนักออกแบบและนักพัฒนาในเครื่องมือที่ใช้โค้ด ดังนั้นจึงทำให้มั่นใจได้ว่าทั้งนักออกแบบและนักพัฒนาจะยังคงซิงค์กัน

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

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

5. สร้างความร่วมมือที่แข็งแกร่งที่สุดเท่าที่เคยมีมา: แนวทางใหม่ที่ปฏิวัติวงการในการทำงานร่วมกันทางวิศวกรรมและการออกแบบทำได้สำเร็จผ่านกระบวนทัศน์ที่ใช้โค้ด

บทความที่เกี่ยวข้อง

Web Designer กับ Web Developer ความแตกต่าง