“ การออกแบบไม่ใช่แค่รูปลักษณ์และความรู้สึกเท่านั้น การออกแบบคือวิธีการทำงาน”- สตีฟจ็อบส์
ต้นแบบได้รับการพิสูจน์แล้วว่ามีคุณค่าสำหรับการตัดสินใจในการออกแบบที่ดีขึ้น ต้นแบบเป็นหนึ่งในแกนหลักในฐานะสิ่งประดิษฐ์ ส่งมอบ ในการออกแบบ UX และการสร้างต้นแบบและในฐานะกิจกรรมถือเป็นหัวใจสำคัญของ กระบวนการออกแบบที่เน้นผู้ใช้เป็นศูนย์กลาง . ต้นแบบคือการรวมกันของงานออกแบบ UX ก่อนหน้านี้ทั้งหมดที่รวมเข้าเป็นผลิตภัณฑ์เดียวที่มองเห็นได้และใช้งานได้ซึ่งใช้ในการตรวจสอบสมมติฐานและการออกแบบทดสอบ
ฟังดูง่ายพอสมควร แต่ในโลกที่เต็มไปด้วยเครื่องมือออกแบบมากมายการเลือกใช้ ขวา เครื่องมือสร้างต้นแบบไม่ใช่งานเล็ก ๆ ที่ต้องพิจารณาอย่างรอบคอบ นักออกแบบจำเป็นต้องคำนึงถึงต้นทุนคุณสมบัติการทำงานร่วมกับเครื่องมือออกแบบอื่น ๆ เส้นโค้งการเรียนรู้คุณลักษณะการทำงานร่วมกันและแพลตฟอร์มการเล่นสำหรับการตรวจสอบและการทดสอบผู้ใช้
เมื่อไม่นานมานี้มีผู้มาใหม่หลายคนเข้ามาในที่เกิดเหตุ มีเครื่องมือออนไลน์เท่านั้นตัวอย่างเช่น Figma , InVision , UXPin , Framer , Marvel , หลักการ , Origami และบางส่วนเป็นซอฟต์แวร์เดสก์ท็อปแบบดั้งเดิมเช่น ร่าง และ Adobe XD ด้วยการสร้างต้นแบบในตัวเพื่อเป็นส่วนเสริมของฟังก์ชันการทำงาน พวกเขาทั้งหมดมีข้อดีข้อเสียคุณสมบัติและการบูรณาการ
แต่สิ่งใหม่ไม่ได้ดีกว่าเสมอไป ยังมีม้าศึกเก่า ๆ อยู่ในสนามรบ: Axure เป็นหนึ่งในนั้น เมื่อนักออกแบบต้องการนำเสนอต้นแบบที่มีคุณสมบัติครบถ้วนและมีรายละเอียด Axure ควรค่าแก่การมองอีกครั้ง Axure มีมาระยะหนึ่งแล้วหลายปีก่อนที่เครื่องมือที่สร้างใหม่ดังกล่าวข้างต้นจะถือกำเนิดขึ้นและอีกมากมาย นักออกแบบ พิจารณาว่าเป็นปู่ของเครื่องมือ wireframing และการสร้างต้นแบบที่มีความสามารถเชิงลึก
ปัจจุบันนักออกแบบส่วนใหญ่ใช้เครื่องมือสร้างต้นแบบที่ใช้ฮอตสปอตซึ่งพวกเขาเชื่อมโยงหน้าจอและอาจเพิ่มการเปลี่ยนหน้าจอเล็กน้อย ปัญหาคือวิธีนี้ไม่รวมการโต้ตอบเล็ก ๆ น้อย ๆ ที่สรุปประสบการณ์ของผู้ใช้โดยรวมในระหว่างการทดสอบ ในทางตรงกันข้าม Axure สามารถจัดการกับรายละเอียดที่ละเอียดอ่อนและปฏิสัมพันธ์ขนาดเล็กที่ทำให้ต้นแบบมีชีวิตได้อย่างง่ายดาย
ในการสำรวจว่าผู้คนจะโต้ตอบกับการออกแบบที่เฉพาะเจาะจงมากขึ้นอย่างไรนักออกแบบสามารถสร้างต้นแบบด้วยตรรกะเงื่อนไขปัจจัยการผลิตต่างๆของผู้ใช้และภาพเคลื่อนไหวแบบไดนามิกที่ทำให้ต้นแบบดูสมจริงยิ่งขึ้น เป็นวิธีที่ยอดเยี่ยมในการรับข้อมูลเชิงลึกที่มีคุณค่าเกี่ยวกับสิ่งที่ได้ผลและสิ่งที่ไม่ได้ผล
การต้องข้ามไปรอบ ๆ แอปพลิเคชันการออกแบบที่ไม่รวมเข้าด้วยกันจำนวนมากเกินไปก็ทำให้เกิดปัญหาที่ไม่มีประสิทธิภาพ เวิร์กโฟลว์การออกแบบทั่วไปเกี่ยวข้องกับนักออกแบบที่สร้าง UI ใน ร่าง และการสร้างต้นแบบในเครื่องมืออื่นเช่น InVision หรือ Marvel . หลังจากนั้นการออกแบบจะถูกส่งต่อให้กับนักพัฒนาโดยใช้เครื่องมืออื่นเช่น เซปลิน .
Axure เป็นแอปพลิเคชันแบบครบวงจรที่ช่วยลดความจำเป็นในการใช้เครื่องมือออกแบบต่างๆ ตัวอย่างเช่นหลังจากสร้างกระแสผู้ใช้แผนที่เส้นทางของลูกค้าบุคคลสตอรีบอร์ดแผนผังเว็บไซต์สถาปัตยกรรมข้อมูลและโครงร่าง นักออกแบบ สามารถดำเนินการต่อไปยังต้นแบบที่ซับซ้อนได้อย่างง่ายดายภายใน Axure เมื่อนักออกแบบส่งมอบโครงการให้กับนักพัฒนาพวกเขาจะเข้าใจได้ดีขึ้นว่าควรนำบางสิ่งไปใช้อย่างไรและสามารถทำงานร่วมกับผู้จัดการผลิตภัณฑ์ได้อย่างมีประสิทธิภาพมากขึ้นเพื่อประมาณขอบเขตและประเมินความเป็นไปได้ทางเทคนิค
อุปสรรคที่ใหญ่ที่สุดในการนำเสนอผลิตภัณฑ์และบริการที่ออกแบบมาอย่างดีคือการขาดความเข้าใจเกี่ยวกับผู้ใช้ของเรา จาเร็ดสปูล UIE (วิศวกรรมส่วนต่อประสานผู้ใช้)
เช่นเดียวกับเครื่องมือออกแบบอื่น ๆ Axure สามารถหยิบขึ้นมาได้อย่างรวดเร็วและใช้งานได้อย่างรวดเร็ว วิดเจ็ตในตัวที่ใช้สร้างปฏิสัมพันธ์แบบไดนามิกที่แม้แต่ผู้ที่ไม่ใช่โปรแกรมเมอร์ก็สามารถใช้งานได้ทันทีเพื่อการโต้ตอบที่น่าประทับใจ นักออกแบบที่ต้องการเจาะลึกและลงทุนเวลาเพื่อเรียนรู้แอปพลิเคชันสามารถสร้างเว็บไซต์และแอปที่ซับซ้อนสมจริงพร้อมการโต้ตอบที่ซับซ้อน
นักออกแบบมักจะมีเวลาไม่มากนักและจำเป็นต้องแสดงให้เห็นว่ากระแสของผู้ใช้เฉพาะจะทำงานอย่างไรในบทวิจารณ์และทดสอบการออกแบบผลิตภัณฑ์กับผู้ใช้ แต่เนิ่นๆ ความสามารถพื้นฐานของ Axure สามารถเปล่งประกายในสถานการณ์เหล่านี้ได้เนื่องจาก นักออกแบบ สามารถเปลี่ยนรูปภาพจากเครื่องมือออกแบบอื่น ๆ ให้กลายเป็นต้นแบบเชิงโต้ตอบได้อย่างรวดเร็ว
ในตัวอย่างผลิตภัณฑ์ B2B ด้านล่างชุดหน้าจอถูกส่งออกจาก OmniGraffle เป็น PNG รูปภาพถูกครอบตัดปิดบังและวางบนเลเยอร์ใน Axure ถัดไปมีการเพิ่มฮอตสปอตและคอมโพเนนต์แบบโต้ตอบจากไลบรารีวิดเจ็ต Axure เช่นเมนูแบบเลื่อนลงและฟิลด์แบบฟอร์มเพื่อสร้างฟังก์ชันที่สมบูรณ์ ต้นแบบ . จากนั้นคุณสมบัติและฟังก์ชันการทำงานของผลิตภัณฑ์ได้รับการทดสอบโดยใช้รีโมทกลั่นกรอง การทดสอบผู้ใช้ ซึ่งนำไปสู่การออกแบบซ้ำอย่างรวดเร็วตามความคิดเห็นของผู้ใช้
ในอีกตัวอย่างหนึ่งทีมออกแบบและวิศวกรสามารถหาวิธีที่ดีที่สุดในการออกแบบวิดเจ็ตที่ยุ่งยากโดยเฉพาะสองรายการสำหรับผลิตภัณฑ์ B2B ที่ซับซ้อน จุดมุ่งหมายคือการออกแบบ ตัวกรองขั้นสูง และก ตัวเลือกคอลัมน์ที่กำหนดเอง สำหรับตารางที่มีข้อมูลมากซึ่งจะช่วยเพิ่มความสามารถในการใช้งานและยังเป็นไปได้ในทางเทคนิคอีกด้วย
ในสถานการณ์นี้ภาพของสถานะต่างๆจะถูกส่งออกจาก Sketch และมีการเพิ่มการโต้ตอบอย่างรวดเร็วและเคลื่อนไหวใน Axure มีการเพิ่มองค์ประกอบ UI เช่นปุ่มและช่องทำเครื่องหมายเพื่อแสดงการโต้ตอบและผลกระทบ ทีมได้ผ่านการตรวจสอบและทดสอบซ้ำหลายครั้ง กับคนอื่น เครื่องมือสร้างต้นแบบ ความพยายามนี้อาจใช้เวลานานกว่านี้มาก
ฉันเพิ่งทำงานใน บริษัท ที่ใช้เฉพาะต้นแบบการแสดงหน้าจอพื้นฐานที่สร้างขึ้นด้วยไฟล์ InVision และไม่เคยทำการทดสอบผู้ใช้มากนัก เพื่อทดสอบคุณลักษณะผลิตภัณฑ์หลักที่กำลังจะมาถึงฉันได้รับมอบหมายให้สร้างต้นแบบผลิตภัณฑ์โดยละเอียด มีการใช้คุณลักษณะใหม่นี้อย่างมากและผู้มีส่วนได้ส่วนเสียก็ต้องการทำให้ถูกต้อง
ฉันใช้เวลาเพียงสองวันในการสร้างต้นแบบโดยละเอียดใน Axure ด้วยสถานะที่แตกต่างกันและการโต้ตอบขนาดเล็กจำนวนมากที่แสดงให้เห็นว่าผลิตภัณฑ์จะทำงานอย่างไรภายใต้สถานการณ์ที่แตกต่างกัน เป็นประโยชน์ที่ไม่คาดคิดมากมาย ขอบกรณี ปรากฏว่าทีมออกแบบสามารถจัดการได้
เมื่อทำการทดสอบเราจะเห็น ที่ไหน ผู้ใช้ดิ้นรนกับการออกแบบและ ทำไม ซึ่งคงเป็นไปไม่ได้กับต้นแบบที่มีรายละเอียดน้อยซึ่งสร้างขึ้นด้วยหน้าจอแบบคงที่ ด้วยเหตุนี้เราจึงสามารถแก้ไขปัญหาที่พบได้อย่างรวดเร็ว
ฉันยังส่งต่อต้นแบบให้กับนักพัฒนาเพื่อแสดงให้พวกเขาเห็นว่าจุดพักการออกแบบที่ตอบสนองอยู่ที่ใดจุดโฟกัสหรือสถานะข้อผิดพลาดควรมีลักษณะอย่างไรและการค้นหาเชิงคาดการณ์ควรทำงานอย่างไร
เมื่อนักพัฒนาส่วนหน้าสามารถจับมือต้นแบบได้ก็ทำให้ชีวิตของพวกเขาง่ายขึ้นมากเช่นกัน แม้แต่นักพัฒนาส่วนหลังก็ชื่นชมต้นแบบเพราะพวกเขาสามารถเห็นได้ว่าผลิตภัณฑ์ขั้นสุดท้ายควรจะทำงานอย่างไร
การสร้างต้นแบบอย่างรวดเร็วการทดสอบและการใช้งานคุณลักษณะของผลิตภัณฑ์ใหม่นี้เร็วกว่าการพัฒนาคุณลักษณะอื่น ๆ ที่พวกเขามีส่วนร่วมก่อนหน้านี้มากและมีปัญหาน้อยลงเมื่อมาถึงขั้นตอนการควบคุมคุณภาพ
เรียนรู้ที่จะถามคำถามเกี่ยวกับการออกแบบที่มุ่งเน้น
เมื่อพูดและทำเสร็จแล้วทุกคนในทีมก็พูดถึงว่าต้นแบบโดยละเอียดมีประโยชน์เพียงใดและขอให้มีกระบวนการสร้างต้นแบบแบบนี้บ่อยขึ้น สิ่งที่ได้จากการสร้างตรวจสอบและทดสอบต้นแบบโดยละเอียดสามารถสร้างความแตกต่างได้อย่างมาก ทั้งทีมสามารถเห็นการโต้ตอบที่สำคัญและครอบคลุมซึ่งมีความหมายสำหรับผู้ใช้
Axure ช่วยให้เราสามารถทดสอบทุกอย่างได้แม้กระทั่งกรณีการใช้งานที่ซับซ้อนที่สุด ต้นแบบของเรามีลักษณะและการทำงานเหมือนของจริง จูลี่ ห้องปฏิบัติการประสบการณ์ผู้ใช้
นักออกแบบไม่จำเป็นต้องรู้วิธีเขียนโค้ดเพื่อสร้างต้นแบบที่ซับซ้อนไดนามิกและมีฟีเจอร์มากมายใน Axure การโต้ตอบที่ซับซ้อนและซับซ้อนสามารถตั้งค่าได้โดยใช้ การโต้ตอบ แผงที่มีข้อความ 'ถ้าเป็นเช่นนั้นก็ตรงไปตรงมา' ด้านล่างนี้เป็นรายการคุณสมบัติเพิ่มเติมของ Axure:
การสร้างต้นแบบขั้นพื้นฐานและขั้นสูง
การเขียนร่วมและการทำงานร่วมกัน
ทรัพย์สินที่ใช้ร่วมกัน
นักพัฒนา Handoff
เอกสารและข้อกำหนด
เพื่อแสดงความสามารถของ Axure ที่นอกเหนือไปจากต้นแบบการแสดงหน้าจอที่เรียบง่ายฉันได้สร้างหน้าจอสองสามหน้าพร้อมการโต้ตอบที่ละเอียดอ่อนสำหรับ Zalando - เป็นไซต์อีคอมเมิร์ซที่มีอยู่ เมื่อดำเนินการเสร็จแล้วลำดับต้นแบบทั้งหมดเหล่านี้จะถูกส่งออกไปยัง HTML และทุกคนสามารถตรวจสอบในเบราว์เซอร์ได้ทุกที่โดยใช้ Axure Cloud .
ขั้นแรกฉันสร้างการโต้ตอบกับไซต์สองสามรายการเพื่อแสดงให้เห็นถึงเมนูขนาดใหญ่การค้นหาการเลื่อนในแนวนอนผ่านผลิตภัณฑ์การเป็นรายการโปรดและการสมัครรับจดหมายข่าว
ในหน้ารายการผลิตภัณฑ์ฉันสร้างเอฟเฟกต์การวางเมาส์บนภาพขนาดย่อใต้ภาพผลิตภัณฑ์หลักเพื่อแสดงผลิตภัณฑ์ในสีที่ต่างกัน (การสลับภาพเมื่อวางเมาส์เหนือ) ฉันยังเพิ่มรายการโปรดของผลิตภัณฑ์อีกครั้งและวิดเจ็ตแบบเลื่อนลงสำหรับการกรองหน้ารายการผลิตภัณฑ์โดยการกำหนดช่วงราคา
เริ่มต้นกับ angular js
ถัดไปในหลอดเลือดดำเดียวกับหน้าจอด้านบนฉันต้องการแสดงให้เห็นถึงการสลับภาพผลิตภัณฑ์ที่แตกต่างกันเมื่อวางเมาส์เหนือภาพขนาดย่อในหน้ารายละเอียดผลิตภัณฑ์ ฉันยังเพิ่มฟังก์ชันการวางเมาส์เพื่อให้ผู้ซื้อเห็นรายละเอียดสินค้าข้อมูลเกี่ยวกับขนาดและความพอดีการจัดส่งและบทวิจารณ์ สุดท้ายฉันได้รวมตัวเลือกขนาดและเพิ่มสินค้าลงในตะกร้าสินค้า
ฉันต้องการแสดงให้เห็นว่าการจัดการรถเข็นช็อปปิ้งจะทำงานอย่างไรตัวอย่างเช่นการนำสินค้าออกจากรถเข็นโดยใช้สไลด์ที่ละเอียดอ่อนจางและภาพเคลื่อนไหวการเปลี่ยนองค์ประกอบ ไม่มีการใช้โค้ดเพื่อสร้างการโต้ตอบขนาดเล็กที่ละเอียดอ่อนเหล่านี้
สุดท้าย แต่ไม่ท้ายสุดฉันต้องการแสดงการเปลี่ยนแปลง UI ที่ละเอียดอ่อนบนหน้าจอเข้าสู่ระบบเมื่อมีคนป้อนข้อมูลการเข้าสู่ระบบที่ไม่ถูกต้องและข้อความแสดงข้อผิดพลาดจะปรากฏขึ้น
การโต้ตอบที่ละเอียดอ่อนและการเปลี่ยนแปลง UI เหล่านี้มีประโยชน์เมื่อทดสอบคุณลักษณะของผลิตภัณฑ์เนื่องจากนักออกแบบและ นักวิจัยผู้ใช้ สามารถทำการทดสอบผู้ใช้โดยละเอียดมากขึ้นและรับข้อมูลเชิงลึกที่ลึกซึ้งยิ่งขึ้นเกี่ยวกับปฏิกิริยาของผู้คนที่มีต่อไซต์อีคอมเมิร์ซ พวกเขาแสดงให้เห็นถึงรูปลักษณ์ที่เฉพาะเจาะจงและซับซ้อนซึ่งคงเป็นไปไม่ได้หรืออาจพิสูจน์ได้ว่ายากมากที่จะสร้างด้วยเครื่องมือสร้างต้นแบบอื่น ๆ
ในการค้นหาเครื่องมือ wireframing และการสร้างต้นแบบที่ทันสมัยและยิ่งใหญ่ที่สุดบางครั้งนักออกแบบมองข้ามเครื่องมือที่มีความสามารถและเป็นที่ยอมรับซึ่งได้รับการทดสอบมาแล้ว
นักออกแบบควรให้ Axure ดูอีกครั้ง เนื่องจากความลึกชุดคุณสมบัติและความยืดหยุ่น Axure จึงเป็นเครื่องมือที่มีความสามารถและแข็งแกร่งเมื่อเทียบกับโซลูชันอื่น ๆ และ บริษัท ยังคงอัปเดตอย่างต่อเนื่องเพื่อรักษาความเกี่ยวข้องในฐานะเครื่องมือออกแบบ
สามารถดาวน์โหลด Axure รุ่นทดลองใช้ฟรีได้ นักออกแบบสามารถส่งออก UI จาก Sketch นำเข้าสู่ Axure และสร้างต้นแบบที่ดูสมจริง นอกจากนี้ยังมีบทช่วยสอนมากมายสำหรับโครงการทุกประเภท (บน YouTube และ ไซต์ของ Axure ) และวิดเจ็ต Axure ที่พร้อมใช้งานยังมีให้ดาวน์โหลดอย่างกว้างขวาง (ฟรีและจ่ายเงิน)
•••
Axure มีเครื่องมือที่มีความสามารถมากมายและนักออกแบบมักถามว่าทำไมต้องใช้ Axure Axure ยอมรับว่าเป็นเครื่องมือ UX ที่ทรงพลังที่สุด มีวิดเจ็ตในตัวสำหรับ wireframing สภาพแวดล้อมการลากแล้วปล่อยที่เรียบง่ายต้นแบบบนเบราว์เซอร์โดยไม่ต้องเข้ารหัสการเปลี่ยนภาพเคลื่อนไหวฟิลด์แบบฟอร์มที่เปิดใช้งานการป้อนข้อมูลของผู้ใช้และอื่น ๆ อีกมากมาย
Axure มีราคาหลายระดับและสองรุ่น: แบบสมัครสมาชิกและสิทธิ์ใช้งานถาวร สำหรับสิทธิ์ใช้งานแบบถาวรพวกเขามี Axure RP 9 Pro เริ่มต้นที่ $ 495, Axure RP 9 Team $ 895 และ Axure for Enterprise (ขึ้นอยู่กับขนาดของทีม) การสมัครสมาชิกเริ่มต้นที่ $ 29 ต่อเดือนสำหรับ Axure Pro 9
อาจมีเครื่องมือสร้างต้นแบบใหม่ ๆ มากมายในตลาด แต่เมื่อนักออกแบบต้องการนำเสนอต้นแบบที่มีคุณลักษณะหลากหลายมีเหตุผลที่ดีหลายประการที่ต้องใช้ Axure อาจเป็นเครื่องมือสร้างต้นแบบที่หลากหลายที่สุด Axure มีการโต้ตอบแบบไดนามิกตรรกะแบบมีเงื่อนไข Redlines อัตโนมัติและการส่งออกโค้ด
Axure มีชุดเครื่องมือที่ครอบคลุมสำหรับการสร้างไดอะแกรมการเดินทางของลูกค้าการจัดโครงร่างและการสร้างต้นแบบโดยใช้การโต้ตอบแบบไดนามิกตรรกะแบบมีเงื่อนไขเอฟเฟกต์ภาพเคลื่อนไหวเรดไลน์อัตโนมัติและการส่งออกโค้ด นอกจากนี้ยังมี Axure Cloud เพื่อแชร์ต้นแบบ Axure RP และอาร์ตบอร์ดจาก Adobe XD และ Sketch ได้อย่างง่ายดาย
นักออกแบบ UX / UI ใช้ Axure เนื่องจากสถาปัตยกรรมข้อมูลที่ครอบคลุมการจัดโครงร่างและความสามารถในการสร้างต้นแบบ นอกจากนี้นักพัฒนายังใช้สำหรับการสร้างไดอะแกรมและต้นแบบ HTML อีกด้วย Axure มีการโต้ตอบแบบไดนามิกตรรกะเงื่อนไขเอฟเฟกต์ภาพเคลื่อนไหวเรดไลน์อัตโนมัติและการส่งออกโค้ด