Axure RP - คู่มือฉบับย่อ

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

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

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

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

บริษัท พัฒนาซอฟต์แวร์ส่วนใหญ่ต้องการให้กระบวนการนี้รวดเร็วที่สุด ดังนั้นพวกเขาจึงไม่ใช้ความพยายามและการลงทุนเวลาจากสมาชิกในทีมทั้งหมด พวกเขาดำเนินการอย่างชาญฉลาดในการจ้างวิศวกร User Experience (UX) ซึ่งมีชุดทักษะในการแสดงภาพคุณลักษณะเฉพาะ สิ่งนี้ทำให้พวกเขาอยู่บนที่นั่งคนขับเมื่อพัฒนาผลิตภัณฑ์

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

ระยะที่เหมาะสมสำหรับการพัฒนาต้นแบบ

ในยุคปัจจุบันของการพัฒนาซอฟต์แวร์ที่มีรายละเอียดสูงมีความก้าวหน้ามากมายในตารางวงจรชีวิตการพัฒนาซอฟต์แวร์โดยรวม ความก้าวหน้าเหล่านี้มาจากแง่มุมของเทคโนโลยีตลอดจนบทบาท / ตำแหน่งของสมาชิกในทีมเฉพาะในวงจรชีวิต หนึ่งในตำแหน่งดังกล่าวเริ่มได้รับแรงฉุดซึ่งเรียกว่าวิศวกร UX

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

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

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

สำหรับวิศวกร UX กระบวนการทำความเข้าใจฐานผู้ใช้ของตนไม่ได้ จำกัด เพียงแค่การรับข้อมูลจากลูกค้าหรือการสนทนาที่เกี่ยวข้องเท่านั้น มีขั้นตอนที่น่าสนใจบางอย่างที่พวกเขาต้องทำเพื่อทำความเข้าใจว่าผู้ใช้ต้องการอะไร งานจริงเริ่มต้นเมื่อพวกเขาค่อนข้างชัดเจนเกี่ยวกับสิ่งที่ผู้ใช้อาจคาดหวังจากผลิตภัณฑ์ซอฟต์แวร์

เมื่อมีข้อมูลบางอย่างเกี่ยวกับวิธีที่ผู้ใช้รับรู้ซอฟต์แวร์ที่กำลังจะมาถึงหรือการปรับปรุงในซอฟต์แวร์ที่มีอยู่วิศวกร UX จะกลับมาที่ห้องปฏิบัติการเพื่อออกแบบส่วนต่อประสานผู้ใช้สำหรับพวกเขา ตามเนื้อผ้าหรือเป็นแนวทางทั่วไปเมื่อมีคนพูดว่าการออกแบบหมายถึงซอฟต์แวร์เช่น Adobe Photoshop, CorelDraw หรือแม้แต่ Microsoft Paint ในบางครั้งเพื่อกลับไปหาผู้ใช้อย่างรวดเร็วนักออกแบบ UX จึงใช้ปากกาและกระดาษเก่า ๆ ที่ดีในการออกแบบอินเทอร์เฟซ

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

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

ในระดับที่สูงขึ้นต่อไปนี้เป็นคุณสมบัติที่นำเสนอโดย Axure -

  • การจัดทำแผนภาพและเอกสาร
  • การสร้างต้นแบบที่มีประสิทธิภาพด้วยเนื้อหาไดนามิก
  • การไหลตามเงื่อนไข
  • ภาพเคลื่อนไหวที่สวยงามเพื่อเพิ่มการโต้ตอบ
  • มุมมองที่ปรับเปลี่ยนได้
  • รองรับ Windows และ Mac

หากต้องการสำรวจรายการคุณลักษณะโดยละเอียดจาก Axure โปรดไปที่ https://www.axure.com. สำหรับคำแนะนำในการติดตั้งตามลิงค์https://www.axure.com/download.

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

ด้วยชุมชนที่เข้มแข็งพร้อมให้ความช่วยเหลือ Axure RP จึงกลายเป็นเครื่องมือที่เป็นที่ต้องการสำหรับผู้ที่ชื่นชอบ UX และผู้ปฏิบัติงาน

เมื่อคุณติดตั้ง Axure คุณจะพบกับอินเทอร์เฟซดังที่แสดงในภาพหน้าจอต่อไปนี้

หน้าจอนี้จะแสดงเสมอเมื่อเริ่มต้นจนกว่าคุณจะเลือกที่จะไม่แสดง

บนหน้าจอนี้คุณมีตัวเลือกดังต่อไปนี้ -

  • เริ่มไฟล์ใหม่ใน Axure
  • เปิดโครงการ Axure ที่มีอยู่

ให้เราสร้างไฟล์ใหม่ด้วย Axure

เมื่อคุณคลิกปุ่ม“ ไฟล์ใหม่” คุณจะเห็นหน้าจอต่อไปนี้เพื่อสร้างต้นแบบใหม่

ดังแสดงในรูปด้านบนพื้นที่ทำงานแบ่งออกเป็น 6 ส่วน

  • Pages
  • Libraries
  • Inspector
  • Outline
  • Masters
  • พื้นที่ออกแบบ

ให้เราเดินผ่านส่วนเหล่านี้ทีละส่วน

หน้า

ส่วนนี้แสดงหน้าที่คุณกำลังทำงานอยู่ เพจเหล่านี้จะแสดงในโครงสร้างต้นไม้เริ่มต้นดังต่อไปนี้ โฮมเพจมีเพจย่อยดังต่อไปนี้

บ้าน

Page 1

Page 2

Page 3

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

เช่นเดียวกับเครื่องมือต่างๆที่มีอยู่ส่วนนี้ช่วยให้คุณสามารถโต้ตอบกับเพจในต้นแบบของคุณได้ คุณสามารถใช้เพื่อวางแผนหน้าจอในต้นแบบที่ต้องการ

บานหน้าต่างไลบรารี

ในบานหน้าต่างไลบรารีตัวควบคุมส่วนใหญ่ที่จำเป็นสำหรับต้นแบบจะพร้อมใช้งาน การควบคุมทั่วไปที่มีอยู่ในส่วนนี้ ได้แก่ - กล่องรูปภาพตัวยึดปุ่ม ฯลฯ Axure RP มีชุดควบคุม UI ที่หลากหลายซึ่งแบ่งตามพื้นที่การใช้งาน

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

ไลบรารีทั่วไป ได้แก่ รูปร่างพื้นฐานปุ่มข้อความส่วนหัวฮอตสปอตแผงไดนามิก ฯลฯ

ด้วย Axure RP สำหรับความต้องการในการสร้างต้นแบบทั้งหมดของคุณมีการควบคุมที่มีประสิทธิภาพมากที่เรียกว่า Hot Spot เมื่อใช้การควบคุมนี้คุณสามารถให้การโต้ตอบกับคลิกกับตัวควบคุมเกือบทุกอย่างใน UI ตัวอย่างจะอยู่ในหน้าการดำเนินการ

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

เมนูและตารางมีโครงสร้างแบบดั้งเดิม โครงสร้างดังกล่าวอาจอยู่ในรูปแบบแนวนอนหรือแนวตั้งมีอยู่ในไลบรารีนี้เรียกว่าเมนูและตาราง

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

พื้นที่ออกแบบ

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

ในพื้นที่นี้คุณสามารถลากและวางการควบคุมที่คุณต้องการจากไลบรารี ให้เราสร้างแถบเมนูด่วนโดยใช้ไลบรารี

ตัวอย่าง - แถบเมนู

จากไลบรารีภายใต้เมนูและตารางให้ลากเมนูคลาสสิก -ตัวควบคุมแนวนอนเพื่อออกแบบพื้นที่

เมื่อคุณลากตัวควบคุมในพื้นที่ออกแบบแล้วคุณจะเห็นหน้าจอต่อไปนี้

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

ตามที่ลูกศรชี้ส่วนตัวตรวจสอบจะแสดงคุณสมบัติของตัวควบคุม ใช้ส่วนนี้เพื่อสร้างชื่อสำหรับการควบคุมของคุณสำหรับการระบุเฉพาะเมื่อสร้างต้นแบบที่ซับซ้อน

ให้เราตั้งชื่อให้กับคอนโทรลนี้เป็น TestMenu เราจะใช้ชื่อนี้ในตัวอย่างการดำเนินการ

คุณสมบัติของเพจ

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

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

ให้เราพูดคุยรายละเอียดในส่วนเหล่านี้

Interactions sectionเกี่ยวข้องกับการโต้ตอบที่เป็นไปได้ (กรณี) กับเพจ ดังที่คุณเห็นกรณีการโต้ตอบ OnPageLoad จะจัดการเหตุการณ์เมื่อเพจโหลด ในต้นแบบส่วนใหญ่วิศวกรของ UX ชอบที่จะใส่ภาพเคลื่อนไหวเพื่อสร้างความประทับใจแรก เหตุการณ์เฉพาะสำหรับการแสดงภาพเคลื่อนไหวนี้มักจะถูกทริกเกอร์ในกรณี OnPageLoad

ในทำนองเดียวกันกรณีอื่น ๆ ได้แก่ - OnWindowResize, OnWindowScroll ในเมนูแบบเลื่อนลงเหตุการณ์เพิ่มเติมคุณสามารถดูกรณีและปัญหาอื่น ๆ ที่รองรับเพื่อกำหนดค่าการโต้ตอบที่เกี่ยวข้องกับเพจ

กับ Adaptive sectionAxure RP เข้าสู่การออกแบบเว็บที่ตอบสนอง ปัจจุบันการออกแบบประสบการณ์สำหรับเว็บไซต์ยังไม่เพียงพอประกอบกับธุรกิจนี้ต้องการให้ไซต์บนอุปกรณ์เคลื่อนที่อยู่ร่วมกับเว็บไซต์

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

บานหน้าต่างตัวตรวจสอบสำหรับวิดเจ็ต

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

ลองพิจารณาตัวอย่างของรายการเมนูที่เราใช้ในส่วนก่อนหน้านี้ เลือกรายการเมนูชื่อ TestMenu และสังเกตส่วนที่ไฮไลต์ในภาพหน้าจอต่อไปนี้

ดังที่คุณเห็นในแท็บคุณสมบัติมีการโต้ตอบที่แตกต่างกันเช่น OnMove, OnShow, OnHide และ OnLoad สิ่งเหล่านี้เฉพาะสำหรับตัวควบคุมเมนูโดยรวม

ตอนนี้คลิกไฟล์จากตัวควบคุมเมนู

คุณจะสังเกตเห็นการเปลี่ยนแปลงประเภทของการโต้ตอบในบานหน้าต่างคุณสมบัติวิดเจ็ต นอกจากนี้ยังให้ความยืดหยุ่นในการตั้งชื่อรายการเมนูนี้ ให้เราใช้กรณี OnClick เป็นตัวอย่าง

OnClick- กรณี OnClick กำหนดลักษณะการทำงานของตัวควบคุมเมื่อคุณคลิกตัวควบคุมเมื่อเรียกใช้ต้นแบบ สิ่งนี้เปิดใช้งานการโต้ตอบต่างๆเช่นการนำทางหน้าป๊อปอัปเมนู ฯลฯ

Notes Pane- ในบานหน้าต่างตัวตรวจสอบเองมีส่วนย่อยที่เรียกว่า Notes ในบานหน้าต่างบันทึกย่อคุณจะสามารถเพิ่มบางจุดที่ต้องจำสำหรับการควบคุมที่คุณเลือก

ประเด็นเหล่านี้จะชัดเจนเมื่อเราเจาะลึกตัวอย่างในบทถัดไป

กริดและคำแนะนำ

สำหรับต้นแบบที่มีคุณภาพและความแม่นยำสูงสุดวิศวกร UX ต้องการความสามารถในการจัดตำแหน่ง / วางตำแหน่งการควบคุมกับส่วนควบคุมอื่น ๆ

ตัวอย่างเช่นคุณต้องการแสดงป๊อปอัปการเข้าสู่ระบบ หากป๊อปอัปนี้จะแสดงตรงกลางหน้าจอคุณต้องมีขนาดโดยรวมของหน้าจอ นอกจากนี้ในการจัดแนวตรงกลางหน้าจอคุณควรมีกริดเพื่อจัดแนวให้เหมาะสม

Axure มีคุณลักษณะของ Grids and Guides เพื่อให้คุณสามารถใช้พื้นที่ออกแบบของคุณได้อย่างมีประสิทธิภาพ

หากต้องการดู Grids และ Guides ให้คลิกขวาที่พื้นที่ออกแบบจากนั้นเมนูบริบทที่แสดงในภาพหน้าจอต่อไปนี้จะปรากฏขึ้น

ตอนนี้ให้เราเข้าใจตัวเลือกที่มี

Grid- ตัวเลือกสามตัวแรกที่แสดงในเมนูบริบทเกี่ยวข้องกับกริด ได้แก่ Show Grid, Snap to Grid และ Grid Settings

  • Show Grid- เมื่อเปิดใช้งาน Show Grid คุณจะสามารถเห็นเส้นตารางบนพื้นที่ออกแบบดังที่แสดงในภาพหน้าจอต่อไปนี้ สิ่งนี้มีประโยชน์มากในการปรับแนวการควบคุมให้ตรงกับตัวควบคุมอื่น ๆ บนหน้าจอ

  • Snap to Grid- เมื่อเปิดใช้งาน Snap to Grid ตัวควบคุมจะเชื่อมต่อโดยอัตโนมัติตามกริดที่มีอยู่รอบ ๆ คุณจะสามารถเห็นลักษณะการทำงานนี้เมื่อคุณลากตัวควบคุมและมันจะแนบตัวเองเข้ากับเส้นตารางใกล้ ๆ

  • Grid Settings- การตั้งค่าเพิ่มเติมที่เกี่ยวข้องกับกริดมีอยู่ในกล่องโต้ตอบนี้ ดังที่แสดงในภาพหน้าจอต่อไปนี้ระยะห่างระหว่างเส้นตารางชนิดของเส้นตาราง ฯลฯ จะอยู่ในกล่องโต้ตอบนี้ คุณสามารถเลือกกริดของจุดตัดประเภทได้ตามความสะดวกของคุณ

Guides - ในเมนูบริบทดังที่แสดงในภาพหน้าจอต่อไปนี้ตัวเลือกหลังตัวคั่นแรกจะเกี่ยวข้องกับคำแนะนำ

เราจะกล่าวถึงตัวเลือกต่างๆที่มักใช้สำหรับ Guides

  • Show Global Guides- คำแนะนำเหล่านี้จะมองเห็นได้เมื่อคุณลากจากไม้บรรทัดทั้งแนวนอนและแนวตั้งในพื้นที่ออกแบบ ลองด้วยตัวคุณเอง!

  • Show Page Guides- ยังมีคำแนะนำในระดับหน้า คำแนะนำเหล่านี้สร้างขึ้นเมื่อคุณลากจากไม้บรรทัดแนวตั้งและแนวนอน เป็นเรื่องธรรมดากว่า Global Guides การมีคู่มือหน้าช่วยเพิ่มความยืดหยุ่นในการออกแบบในระดับหน้า

  • Show Adaptive Guides- เมื่อพูดถึงการออกแบบหน้าเว็บสำหรับมุมมองแบบปรับเปลี่ยนที่แตกต่างกันคุณควรมีคำแนะนำแบบปรับเปลี่ยนได้ ตัวเลือกนี้ช่วยให้มองเห็นคำแนะนำแบบปรับได้ซึ่งจะใช้เพื่อจัดแนววัตถุในมุมมองที่ปรับเปลี่ยนได้

  • Snap to Guides- เมื่อจัดเรียงองค์ประกอบของหน้าจอที่แตกต่างกันในพื้นที่ออกแบบฟังก์ชันนี้จะช่วยให้สามารถจัดเรียงวัตถุเข้ากับเส้นบอกแนวได้ สิ่งนี้มีประโยชน์เมื่อคุณวางวัตถุเฉพาะบนหน้าจอและจัดเรียงให้สอดคล้องกับวัตถุอื่น

บทนี้จะนำคุณไปสู่การโต้ตอบพื้นฐานที่ Axure กำหนดไว้เมื่อออกแบบหน้าจอ

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

ปฏิสัมพันธ์ Axure

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

ในขณะที่สร้างต้นแบบ HTML Axure RP จะแปลงการโต้ตอบเป็นรหัสจริง (HTML, CSS และ JavaScript) สิ่งนี้ทำหน้าที่เป็นตัวเร่งปฏิกิริยาเพื่อแสดงการออกแบบและการโต้ตอบที่ต้องการบนหน้า

โดยปกติการโต้ตอบจะเริ่มต้นด้วย Whenการโต้ตอบกำลังเกิดขึ้น ตัวอย่างเช่นเมื่อโหลดหน้าเว็บในเบราว์เซอร์เมื่อผู้ใช้คลิกที่องค์ประกอบใดองค์ประกอบหนึ่งเป็นต้น

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

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

กิจกรรม Axure

เหตุการณ์ใน Axure สามารถมีได้สองประเภทซึ่งถูกกระตุ้นโดยเหตุการณ์สองประเภท

เพจและกิจกรรมระดับมาสเตอร์

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

  • OnPageLoad
  • OnWindowResize
  • OnMouseMove
  • OnAdaptiveViewChange

เหตุการณ์ระดับวัตถุหรือวิดเจ็ต

ให้เราพิจารณาเราได้สร้างเพจและวิดเจ็ตปุ่มเฉพาะบนเพจ ตอนนี้สำหรับการโต้ตอบกับวิดเจ็ตปุ่มนี้อาจจะด้วยการสัมผัส (บนต้นแบบมือถือ) หรือคลิกเมาส์ ต่อไปนี้เป็นตัวอย่างบางส่วนของเหตุการณ์ระดับวัตถุหรือวิดเจ็ต

  • OnClick
  • OnMouseEnter
  • OnDrag
  • OnDrop
  • OnMouseHover

กรณี

ตามที่กล่าวไว้ในบทก่อนหน้าในส่วนคุณสมบัติของเพจสามารถออกแบบการโต้ตอบกับวิดเจ็ตเฉพาะได้ เหล่านี้เรียกว่าcases. การโต้ตอบโดยเฉพาะอาจเป็นเรื่องปกติของหลาย ๆ กรณี

ให้เราพิจารณาตัวอย่างเพื่อทำความเข้าใจสิ่งนี้ให้ดีขึ้น

ตัวอย่าง: Axure Prototype - แสดงเมนูเมื่อวางเมาส์

ในการเริ่มต้นด้วยตัวอย่างนี้ให้สร้างไฟล์ใหม่โดยคลิก New ภายใต้ File เมนูหรือใช้ปุ่มทางลัด Ctrl + N.

ในตัวอย่างนี้เราจะออกแบบสิ่งที่เรียบง่าย Menu Barดังที่เห็นในผลิตภัณฑ์ซอฟต์แวร์ส่วนใหญ่ โครงสร้างเมนูจะมีองค์ประกอบเมนูต่อไปนี้และเมนูย่อยอยู่ข้างใต้แต่ละเมนู

File

  • New
  • Open
  • Save
  • Close

Edit

  • Cut
  • Copy
  • Paste
  • Find
  • Replace

View

  • แสดงแถบสถานะ
  • แถบเครื่องมือ
    • แถบเครื่องมือหลัก
    • แถบเครื่องมือจัดแต่งทรงผม

Help

  • เริ่มต้นใช้งาน
  • ใช้วิธีใช้
  • นี่คืออะไร

ในการเริ่มต้นให้ลากและวาง Classic Menu – Horizontalในพื้นที่ออกแบบ คุณจะพบได้ใน Libraries → Menus and Tables ตั้งชื่อตัวควบคุมเป็น MenuBarExample ให้เราสร้างองค์ประกอบนี้ให้มีความกว้าง 300 พิกเซลและสูง 30 พิกเซล วางตำแหน่งที่ 100 บนแกน X และ 30 บนแกน Y คุณสามารถปรับค่าเหล่านี้ได้ภายใต้แท็บลักษณะภายใต้ส่วนตัวตรวจสอบทางด้านขวา

ในตอนท้ายของขั้นตอนข้างต้นคุณจะสามารถเห็นผลลัพธ์สุดท้ายดังที่แสดงในภาพหน้าจอต่อไปนี้

ให้เราเพิ่มชื่อในชื่อเมนูในส่วน Inspector ด้วย คลิกชื่อเมนูแต่ละรายการและสังเกตส่วนตัวตรวจสอบ หากไม่ได้กำหนดชื่อให้กับแถบเมนูเฉพาะชื่อจะเปลี่ยนเป็น (Menu Item Name)

ตั้งชื่อเมนูไฟล์เป็น FileMenu.

เช่นเดียวกับการแก้ไขเป็น EditMenu และดูเป็น ViewMenu.

หากต้องการยืนยันว่าได้ระบุชื่อแล้วให้คลิกแต่ละเมนูและยืนยันภายใต้ตัวตรวจสอบ: รายการเมนู คุณจะสามารถเห็นชื่อและไม่เห็น (ชื่อรายการเมนู)

ตอนนี้ตามความต้องการของเราให้เรากรอกแถบเมนูด้วยเมนูวิธีใช้ คลิกขวาที่ชื่อแถบเมนู - ดูคุณจะเห็นเมนูบริบท คลิกเพิ่มรายการเมนูหลัง

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

ต่อไปให้เราออกแบบการโต้ตอบสำหรับเมนูไฟล์

คลิกชื่อแถบเมนูไฟล์และสังเกตตัวตรวจสอบ: รายการเมนู

ตามที่ไฮไลต์ไว้ในภาพหน้าจอด้านบนให้สังเกตแท็บคุณสมบัติ

ภายใต้แท็บคุณสมบัติเราจะสร้างการโต้ตอบสำหรับเมนูไฟล์

การเพิ่มเมนูย่อยลงในเมนูทำได้ง่ายมาก คลิกขวาที่เมนูไฟล์ในเมนูบริบทที่ปรากฏขึ้นให้คลิกเพิ่มเมนูย่อย

Note - เรายังสามารถลบเมนูย่อยได้โดยทำขั้นตอนเดิมซ้ำแล้วคลิกลบเมนูย่อย

เมื่อเพิ่มเมนูย่อยแล้วเมนูย่อยว่างจะปรากฏขึ้น ดับเบิลคลิกที่รายการเมนูแต่ละรายการและระบุชื่อเช่น - ใหม่เปิดบันทึก

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

เป็นแนวทางปฏิบัติที่ดีในการตั้งชื่อรายการเมนูย่อยทั้งหมดภายใต้ส่วนตัวตรวจสอบเช่นกัน สิ่งนี้ช่วยอ้างอิงในกระบวนการออกแบบโดยรวมของคุณ

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

ให้เราพูดคุยเกี่ยวกับการโต้ตอบ - Hover. การโต้ตอบนี้มีลักษณะการทำงานที่ไม่เหมือนใครในการเรียกใช้เมื่อตัวชี้เมาส์วางอยู่เหนือองค์ประกอบใดองค์ประกอบหนึ่ง ใน Axure การโต้ตอบนี้จะถูกนำไปใช้โดยอัตโนมัติกับเมนูคลาสสิก - แนวนอน

หากต้องการดูการโต้ตอบในการดำเนินการให้คลิกปุ่มแสดงตัวอย่างในแถบเครื่องมือ Axure จะเปิดตัวอย่างในเบราว์เซอร์เริ่มต้น

วางเมาส์บนเมนูไฟล์ เมนูย่อยจะแสดงดังที่แสดงในภาพหน้าจอต่อไปนี้

หากเรามองอย่างเป็นกลางเราเพิ่งใช้ Axure เพื่อสร้างปฏิสัมพันธ์ที่ซับซ้อนเช่นการวางเมาส์บนรายการเมนู ในการเข้ารหัส HTML ปกติจะใช้เวลาเกือบ 1 ถึง 1.5 ชั่วโมง

ในการมอบหมายงานให้กรอกเมนูที่เหลือสำหรับเมนูย่อย

ตอนนี้ให้เราสร้างการโต้ตอบอย่างรวดเร็วในเมนูย่อยปิดใต้เมนูไฟล์ เราจะเน้นด้วยสีแดงเมื่อวางเมาส์ไว้ โดยคลิกขวาที่ Close submenu คลิกสไตล์การโต้ตอบ ...

ภายใต้แท็บ MouseOver ให้เลือกเลือกเติมสีและเลือกสีแดง Axure จะแสดงภาพตัวอย่างในพื้นที่ออกแบบทันที สมมติว่าเลือกใช้กับส่วนเมนูที่เลือกและเมนูย่อยทั้งหมดจะเน้นทั้งเมนูเป็นสีแดง

คลิกรายการเมนูที่เลือกเท่านั้น ตอนนี้ตรวจสอบเลือกสีแบบอักษรและเลือกสีขาวสำหรับแบบอักษร ตัวอย่างจะอัปเดตทันที

คลิกตกลงเพื่อเสร็จสิ้นการตั้งค่านี้

คลิกดูตัวอย่างอีกครั้งเพื่อดูการโต้ตอบที่กำลังดำเนินการอยู่

นี่เป็นตัวอย่างที่สมบูรณ์

คุณอาจลองใช้การโต้ตอบต่อไปนี้เป็นการมอบหมายงานด่วน

คุณสมบัติ OnClick โดยใช้วิดเจ็ตปุ่ม

แนวทางการพัฒนาซอฟต์แวร์หลายวิธีในการพัฒนาส่วนต่อประสานผู้ใช้ใช้เทคนิคทั่วไปนั่นคือการสร้างผู้เชี่ยวชาญ

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

ในการเริ่มต้นกับ Masters คุณสามารถมุ่งเน้นไปที่ส่วน Masters (ทำเครื่องหมายเป็น 5) ตามที่ไฮไลต์ไว้ในภาพหน้าจอต่อไปนี้

ใช้ส่วนปริญญาโทนี้เพื่อ -

  • จัดระเบียบต้นแบบของต้นแบบโดยการเพิ่มลบหรือแก้ไขหน้า / โฟลเดอร์ต้นแบบ

  • เลือกต้นแบบเฉพาะสำหรับการแก้ไข

แผงแบบไดนามิก

ใน Axure RP ดังที่เราได้เห็นในบทก่อนหน้านี้มีสถานะต่างๆที่เกี่ยวข้องกับวิดเจ็ตที่กำหนด สำหรับการรวม / จัดระเบียบสถานะของวิดเจ็ตหรือชุดวิดเจ็ตเฉพาะเราจำเป็นต้องมีคอนเทนเนอร์ / ตัวยึด แผงแบบไดนามิกทำหน้าที่เป็นคอนเทนเนอร์ / ตัวยึดสำหรับสถานะของวิดเจ็ต

ให้เราเข้าใจแผงไดนามิกให้ดีขึ้นโดยใช้ตัวอย่าง เราจะดำเนินการต่อจากตัวอย่างแถบเมนูของเรา

ส่วนที่เพิ่มในตัวอย่างนี้จะเป็นพื้นที่รูปภาพและปุ่มใต้แถบเมนู ใช้ตัวยึดวิดเจ็ตสำหรับพื้นที่รูปภาพและปุ่มภายใต้วิดเจ็ตทั่วไป ตั้งชื่อตัวยึดเป็น ImageAreaPlaceholder ปุ่มเป็น showImageButton

นอกจากนี้ให้เราเพิ่มแถบเมนูลงในมาสเตอร์ คลิกขวาที่แถบเมนูแล้วคลิก Convert to Master กล่องโต้ตอบจะปรากฏขึ้นเพื่อแจ้งชื่อของต้นแบบ เพิ่มชื่อเป็น menuBarMaster

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

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

ให้เราดูวิธีสร้างแผงไดนามิก คลิกขวาที่ Image Area เมนูบริบทจะปรากฏขึ้นเลือก Convert to Dynamic Panel

แผงไดนามิกจะอยู่ใต้ Outline: Page นอกจากนี้ภายใต้ตัวตรวจสอบจะแสดงแผงไดนามิก ตั้งชื่อแผงไดนามิกเป็น showImageDynamicPanel ชื่อสำหรับแผงไดนามิกนี้จะได้รับการอัปเดตในส่วน Outline: Page

ในพื้นที่ออกแบบคลิกขวาที่แผงแสดงภาพไดนามิกเพื่อดูเมนูบริบท เลือกตั้งค่าซ่อนแผงไดนามิกจะหายไปจากหน้าจอ

คุณสามารถเข้าถึงแผงไดนามิกได้โดยดับเบิลคลิกใต้โครงร่าง: หน้า

ตอนนี้ให้เราจัดเตรียมเหตุการณ์การคลิกไปที่ปุ่ม คลิกปุ่มแสดงรูปภาพภายใต้ตัวตรวจสอบ→คุณสมบัติดับเบิลคลิกที่การโต้ตอบ OnClick

ดังที่แสดงในภาพหน้าจอด้านบนคลิกแสดง / ซ่อนภายใต้วิดเจ็ต มันจะแสดงวิดเจ็ตที่มีให้โดยอัตโนมัติเพื่อกำหนดค่าการกระทำ เลือก showImageDynamicPanel คลิกตกลง

ตอนนี้คลิกดูตัวอย่าง บนหน้าจอแสดงตัวอย่างคลิกแสดงรูปภาพ ในที่สุดการโต้ตอบอื่นสำหรับปุ่มจะถูกสร้างขึ้น

ในบทนี้เราจะพูดถึงตรรกะเงื่อนไขที่ใช้ใน Axure RP

ถ้า - แล้ว - อื่นใน Axure

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

ต่อไปนี้เป็นขั้นตอนที่ง่ายและรัดกุมสำหรับตรรกะเงื่อนไข -

  • หากมีการคลิกวิดเจ็ต / หน้าจอใด ๆ
  • จากนั้นดำเนินการกระทำ / ปฏิสัมพันธ์เฉพาะ
  • มิฉะนั้นให้ / เปลี่ยนสถานะของวิดเจ็ตหรือหน้าจอ

เพื่อให้เข้าใจสิ่งนี้ได้ดีขึ้นให้เรากลับมาดำเนินการต่อจากตัวอย่างก่อนหน้านี้ เพื่อจุดประสงค์นี้เราจำเป็นต้องทำความคุ้นเคยกับ Condition Builder

ตัวสร้างเงื่อนไข

ดับเบิลคลิกที่การโต้ตอบใด ๆ ตัวอย่างเช่น OnClick คุณจะสามารถเห็น Case Editor ดังที่แสดงในภาพหน้าจอต่อไปนี้

คลิกปุ่ม - เพิ่มเงื่อนไขใกล้กับชื่อเคส จะแสดงด้านล่างในกล่องโต้ตอบ

ตามที่แสดงในคำอธิบายตัวสร้างเงื่อนไขจะสร้างโฟลว์ If-Then-Else ตามเงื่อนไขที่เลือกในส่วนเงื่อนไข

ให้เราสร้างเงื่อนไขที่ปุ่มนี้

เราต้องการแสดงปุ่มซ่อนรูปภาพเมื่อมองเห็นแผงไดนามิก เราทำให้แผงไดนามิกมองเห็นได้จากการคลิกปุ่มแสดงรูปภาพในตัวอย่างก่อนหน้านี้ ตอนนี้ให้เราสร้างปุ่มอื่นซ่อนรูปภาพที่มองเห็นได้

ปิดตัวสร้างเงื่อนไขและกลับมาที่พื้นที่ออกแบบ

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

คลิกขวาที่ปุ่ม Hide Image แล้วคลิก Set Hidden ปุ่มจะถูกซ่อนจากพื้นที่ออกแบบดังที่แสดงในภาพหน้าจอต่อไปนี้

ตอนนี้ให้เรากลับมาที่การโต้ตอบสำหรับปุ่มแสดงรูปภาพ

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

ในทำนองเดียวกันโดยใช้การดำเนินการแสดง / ซ่อนเลือก showImageButton และตั้งค่าการเปิดเผยเพื่อซ่อน

เราได้จัดการการมองเห็นของปุ่มซ่อนรูปภาพดังกล่าวแล้วเมื่อเราคลิกปุ่มแสดงรูปภาพปุ่มจะปรากฏขึ้น

เงื่อนไขที่สมบูรณ์จะเป็นดังที่แสดงในภาพหน้าจอต่อไปนี้

ให้เราสร้างเงื่อนไข

ภายใต้พื้นที่ออกแบบให้คลิกปุ่มซ่อนรูปภาพ จากส่วนตัวตรวจสอบคลิกเพิ่มเคส

ภายใต้เพิ่มเคสให้คลิกปุ่มเพิ่มเงื่อนไข ตามพื้นหลังที่ให้ไว้ก่อนหน้านี้ให้สร้างชุดเงื่อนไขโดยใช้ค่าแบบเลื่อนลงใน Condition Builder

กล่าวง่ายๆด้วยเงื่อนไขข้างต้นเรากำลังตรวจสอบว่าแผงไดนามิก showImageDynamicPanel สามารถมองเห็นได้หรือไม่

ตอนนี้ให้เราออกแบบการโต้ตอบสำหรับปุ่มซ่อนรูปภาพกำหนดค่าดังนี้ -

  • เลือกแสดง / ซ่อนการกระทำ
  • เลือกวิดเจ็ต showImageDynamicPanel
  • ตั้งค่าการเปิดเผยเป็นซ่อน

ในทำนองเดียวกันให้เจาะซ้ำเพื่อแสดง showImageButton และซ่อน hideImageButton

เมื่อเสร็จแล้วให้คลิกตกลงเพื่อปิด Case Editor

จากนั้นคลิกดูตัวอย่างเพื่อดูการเปลี่ยนแปลงที่เสร็จสิ้น

ผลลัพธ์ที่สำเร็จจะเป็นดังที่แสดงในภาพหน้าจอต่อไปนี้

เมื่อคลิกปุ่ม Show Image -

เมื่อคลิกปุ่มซ่อนรูปภาพ -

จนถึงตอนนี้เราได้แนะนำตัวเราให้รู้จักกับคุณสมบัติพื้นฐานของ Axure สำหรับการโต้ตอบ อย่างไรก็ตามจะมีสถานการณ์ในโลกแห่งความจริงมากมายโดยที่ต้นแบบจะต้องมีความชาญฉลาด ด้วยคำว่าอัจฉริยะต้นแบบจะต้องตรวจจับสถานะของวิดเจ็ตบางอย่างเพื่อดำเนินการ / กระตุ้นพฤติกรรมบางอย่าง

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

การใช้ตัวแปรใน Axure

Variableตามความหมายหมายถึงปัจจัยที่มีแนวโน้มที่จะเปลี่ยนแปลงหรือเปลี่ยนแปลง ใน Axure เราสามารถใช้ตัวแปรเพื่อแสดงหรือระบุสถานะของวิดเจ็ต / การโต้ตอบ

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

ต่อด้วยตัวอย่างสุดท้ายของเราให้เราพิจารณาว่าเราต้องการแสดงจำนวนครั้งที่แสดงภาพ

นี่คือวิธีที่เราจะทำ -

  • เราจะสร้างตัวแปรสำหรับเริ่มต้นการนับเป็น 0

  • เมื่อคลิกปุ่มแสดงรูปภาพเราจะเพิ่มค่าของตัวแปรนี้

  • แสดงค่าในป้ายข้อความ

สำหรับตัวอย่างนี้เราจะสร้างข้อความด้านล่างแผงไดนามิก ข้อความจะอ่าน - ภาพแสดง 0 ครั้ง

Critical- สิ่งสำคัญคือฉลากจะถูกแบ่งออกเป็นสามส่วน โปรดปฏิบัติตามชื่อป้ายกำกับและข้อความที่ระบุไว้ในตาราง

ชื่อป้ายกำกับ ข้อความฉลาก
imageLabel ภาพจะปรากฏขึ้น
countLabel 0 (ศูนย์ในหน่วยหลัก)
timesLabel ครั้ง

สิ่งนี้จำเป็นเนื่องจากเราต้องการควบคุมค่า countLabel สำหรับการคลิกปุ่ม Show Image ทุกครั้ง

ให้เรากำหนดตัวแปรก่อน

เราจะต้องมีตัวแปรซึ่งจะถูกควบคุมเมื่อคลิกปุ่ม ตัวแปรนี้ในคำศัพท์ของ Axure คือ - Global Variable ในการกำหนดตัวแปรส่วนกลางให้คลิกโครงการในแถบเมนูจากนั้นคลิกตัวแปรส่วนกลาง กล่องโต้ตอบจะเปิดขึ้นตามที่แสดงในภาพหน้าจอต่อไปนี้

คลิกไอคอนบวก (+) สีเขียวเพื่อเพิ่มตัวแปรส่วนกลาง ให้เราเรียกตัวแปรทั่วโลกของเรา -varDynamicPanel. ค่าเริ่มต้นจะเป็น0.

ด้วยการโต้ตอบของปุ่มแสดงรูปภาพให้ดับเบิลคลิกที่กรณีที่ 1 เพิ่มการกระทำอื่น ดังที่แสดงในภาพหน้าจอต่อไปนี้การดำเนินการคือSet Text on countLabel to [[varDynamicPanel + 1]].

การเลือกป้ายข้อความเป็นค่านั้นค่อนข้างตรงไปตรงมา ให้เราดูวิธีรับค่าจากแผงไดนามิก

ตามที่ระบุไว้ในขั้นตอนที่ 4 ในภาพหน้าจอด้านบนคลิก fx ปุ่มและกล่องโต้ตอบต่อไปนี้จะเปิดขึ้น

ใต้พื้นที่ข้อความแรกให้ป้อนสตริงต่อไปนี้

[[varDynamicPanel + 1]]

คลิกตกลง

ตอนนี้เราต้องตรวจสอบให้แน่ใจว่าตัวแปรได้รับการอัปเดตทุกครั้งที่คลิกปุ่ม

ในกล่องโต้ตอบตัวแก้ไขเคสภายใต้การกระทำให้เลือกตัวแปร→ตั้งค่าตัวแปร

เลือก varDynamicPanel เป็นตัวแปร

ตั้งค่าตัวแปรเพื่อดึงค่าจากข้อความบนวิดเจ็ตเป็น countLabel จากตัวเลือกที่มี

ปิด Case Editor โดยคลิกตกลง จากนั้นคลิกปุ่มแสดงตัวอย่าง

หลังจากแสดง / ซ่อนภาพสี่ครั้งนี่คือผลลัพธ์บนหน้าจอแสดงตัวอย่าง

เมื่อคุณมีความเชี่ยวชาญในการโต้ตอบและเหตุการณ์ต่างๆที่เป็นไปได้ใน Axure แล้วคุณอาจต้องการขยายงานของคุณเพื่อลดความพยายามในอนาคตให้น้อยที่สุด

ตัวอย่างเช่นตัวอย่างแรกที่มี Classic Menu - Horizontal เคยปรากฏในเวอร์ชัน Axure จากการรวมกันของวิดเจ็ตต่างๆที่มีอยู่ ซึ่งหมายความว่า Axure พัฒนาขึ้นตามเวลาเพื่อรองรับวิดเจ็ตที่ใช้บ่อยในรูปแบบซิงเกิลwidget library.

แนวคิดของไลบรารีวิดเจ็ตสามารถใช้ได้อย่างชัดเจนในทีม UX ขนาดใหญ่ บางองค์กรเก็บวิดเจ็ตที่ได้รับการอนุมัติไว้สำหรับวิศวกร UX รุ่นต่อ ๆ ไปบนที่เก็บส่วนกลาง

ดังนั้นโดยสรุป Axure Widget Library คือชุดของวิดเจ็ตแบบกำหนดเองที่เก็บไว้ในไฟล์เดียว ประเภทไฟล์สำหรับ Axure Widget Library คือRPLIB.

ประเภทของห้องสมุดวิดเจ็ต

ห้องสมุดในตัวของ Axure

ไลบรารีเหล่านี้สามารถเข้าถึงได้จากบานหน้าต่างไลบรารี ไม่สามารถอัปเดต / ลบไลบรารีเหล่านี้ได้ สำหรับความต้องการการสร้างต้นแบบที่ซับซ้อนส่วนใหญ่ห้องสมุดในตัวของ Axure จะเข้ามาช่วย

ไลบรารีประกอบด้วยวิดเจ็ตโฟลว์ที่ไม่ซ้ำกัน 17 วิดเจ็ตซึ่งส่วนใหญ่ใช้สำหรับการสร้างไดอะแกรม นอกจากนี้ยังมีวิดเจ็ต 25 รายการในไลบรารีโครงร่าง

การทำงานโดยย่อของไลบรารีมีอยู่ในบทที่ 3 - ส่วนติดต่อผู้ใช้

Axure Custom Libraries

ชุมชน Axure ซึ่งมีขนาดใหญ่ขึ้นทุกวันมีไลบรารีที่ผู้ใช้สร้างขึ้นมากมาย สามารถเยี่ยมชมได้ที่ -https://www.axure.com/support/download-widget-libraries.

ผู้เชี่ยวชาญด้าน UX จากทั่วทุกมุมโลกที่มุ่งมั่นที่จะทำให้ชุมชนนี้เติบโตส่งผลงานของพวกเขาได้ที่ลิงค์ด้านบน

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

ดังที่แสดงในหน้าจอด้านบนเรามีเมนูบริบทซึ่งคุณสามารถดาวน์โหลดไลบรารีต่างๆได้ตามที่เสนอ https://www.axure.com/support/download-widget-libraries. คุณยังสามารถสร้างไลบรารีของคุณเองซึ่งจะสะดวกในขณะที่สร้างการควบคุมซ้ำ ๆ สำหรับต้นแบบที่กำหนด

คำแนะนำทั้งหมดในการดาวน์โหลด / โหลดไลบรารีมีอยู่ที่: https://www.axure.com/support/reference/widget-libraries.

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

คุณอาจสังเกตเห็นว่ามีสไตล์ที่เข้ากันไม่ได้บางอย่างที่มาพร้อมกับไลบรารีวิดเจ็ตที่นำเข้า คุณสามารถเลือกที่จะCancel และนำเข้าเฉพาะวิดเจ็ตหรือคลิกไฟล์ Finish ปุ่มเพื่อนำเข้าแพ็คเกจทั้งหมด

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

ใช้ RPLIB

การใช้ไฟล์ Axure RP Library นั้นค่อนข้างตรงไปตรงมา เมื่อคุณดาวน์โหลดไลบรารีไอคอนสำหรับไฟล์ไลบรารี (.rplib) จะแตกต่างจากไฟล์ต้นแบบ Axure RP (.rp) อย่างชัดเจน ตัวอย่างเช่นดังที่เห็นในภาพหน้าจอต่อไปนี้

กลไกในการทำงาน - คุณสามารถนำเข้าเอกสาร iOS Wireframe ใน iOS Wireframe Demo

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

Axure RP 8 รองรับการทำงานร่วมกันด้วยฟีเจอร์ - Team Projects คุณลักษณะนี้ไม่เพียง แต่เป็นประโยชน์สำหรับทีมที่กระจาย แต่ยังสำหรับผู้ใช้คนเดียว ประโยชน์ของผู้ใช้คนเดียวคือความสามารถในการสร้างเวอร์ชันสำหรับงานที่กำลังดำเนินการอยู่

การทำงานกับ Team Projects

ในสถานการณ์จำลองโครงการทีมสมาชิกในทีมแต่ละคนมีสำเนาของโครงการในคอมพิวเตอร์ของตน โครงการนี้จะซิงค์กับที่เก็บที่ใช้ร่วมกัน ที่เก็บแบบแบ่งใช้นี้เชื่อมต่อกับสมาชิกคนอื่น ๆ ในทีม

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

การเปลี่ยนแปลงจะไม่ปรากฏในที่เก็บแบบแบ่งใช้จนกว่าสมาชิกในทีมจะตรวจสอบองค์ประกอบที่เช็คเอาต์ทั้งหมด Manage Team Project console ให้สมาชิกในทีมทุกคนมีมุมมองแบบเรียลไทม์ของสถานะความพร้อมใช้งานขององค์ประกอบที่ระบบจัดการ

มุมมองนี้ให้รายละเอียดขององค์ประกอบที่สมาชิกทีมอื่นเช็คเอาต์

เริ่มโครงการทีม

สำหรับการทำงานร่วมกับหรือสร้างโปรเจ็กต์ทีมตรงไปที่เมนูทีม คลิกทีมจากนั้นเลือกสร้างโครงการทีมจากไฟล์ปัจจุบัน หน้าจอต่อไปนี้จะปรากฏขึ้น

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

ปฏิบัติตามคำแนะนำบนหน้าจอสำหรับการสร้างโครงการของทีมจากนั้นคุณจะสามารถเริ่มทำงานร่วมกันกับไฟล์ Axure เดียวในทีม / ใช้สำหรับการจัดเก็บประวัติของคุณเอง

หุ้น Axure

ในการจัดแสดงต้นแบบของคุณมีหลายทางเลือกให้เลือกตามสภาพแวดล้อมที่คุณอยู่วิธีการที่ใช้บ่อยที่สุดในการส่งออกต้นแบบของคุณคือการใช้ Axure Share (หรือที่เรียกว่า AxShare)

ด้วย Axure Share ความสามารถในการทำงานร่วมกันต่อไปนี้เป็นไปได้

  • ต้นแบบสามารถโฮสต์บน Axure Share และแชร์กับสมาชิกในทีม / ลูกค้าที่เกี่ยวข้อง

  • ด้วยคุณสมบัติการสนทนา / ความคิดเห็นคุณจะได้รับอินพุตระหว่างเดินทางบนต้นแบบในการสร้าง

เมื่อคุณพร้อมกับต้นแบบแล้วคุณสามารถอัปโหลดต้นแบบไปยัง AxShare โดยใช้การเผยแพร่→เผยแพร่ไปยัง Axure Share กล่องโต้ตอบต่อไปนี้จะปรากฏขึ้น

คุณต้องสร้างบัญชีที่ AxShare.com เพื่อที่จะก้าวหน้า หากคุณมีบัญชีอยู่แล้วคุณสามารถใช้ตัวเลือก 'เข้าสู่ระบบ' เข้าสู่ระบบและอัปโหลดการทำงานของคุณจะAxShare

ข้อมูลที่อัปโหลดอยู่ใน HTML, CSS และ JavaScript เมื่ออัปโหลดแล้วคุณจะได้รับลิงก์ซึ่งคุณสามารถให้กับผู้มีส่วนได้ส่วนเสีย / ทีมงานที่ต้องการได้