Axure RP - ส่วนต่อประสานผู้ใช้

เมื่อคุณติดตั้ง 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- เมื่อจัดเรียงองค์ประกอบของหน้าจอที่แตกต่างกันในพื้นที่ออกแบบฟังก์ชันนี้จะช่วยให้สามารถหักวัตถุเข้ากับเส้นบอกแนวได้ สิ่งนี้มีประโยชน์เมื่อคุณวางวัตถุเฉพาะบนหน้าจอและจัดเรียงให้สอดคล้องกับวัตถุอื่น