ภาพรวมของนักออกแบบ UI
คำอธิบายโดยละเอียดเกี่ยวกับอินเทอร์เฟซของ AppMaster UI Designer สำหรับการสร้างเว็บแอป
หลังจากสร้างแอปพลิเคชันสำเร็จ คุณจะถูกนำไปยังแท็บตัวออกแบบ UI
UI Designer ใน AppMaster ได้รับการออกแบบมาให้ใช้งานง่าย ช่วยให้คุณสร้างหน้าเว็บแอปที่น่าทึ่งได้อย่างง่ายดาย
ด้วยอินเทอร์เฟซแบบลากและวางที่ใช้งานง่าย คุณสามารถออกแบบหน้าเว็บและเติมเนื้อหาลงในหน้าเว็บได้อย่างราบรื่น โดยไม่จำเป็นต้องใช้ทักษะการเขียนโค้ดขั้นสูง
UI Designer แบ่งออกเป็นสี่ส่วนหลักเพื่อให้ผู้ใช้สามารถโต้ตอบกับ:
- แถบเครื่องมือด้านซ้าย
- แผงด้านบน
- แผงด้านล่าง
- พื้นที่ผ้าใบ
- แผงคุณสมบัติ
แถบเครื่องมือด้านซ้าย
แถบเครื่องมือทางด้านซ้ายมีเครื่องมือสำหรับจัดโครงสร้างเว็บไซต์ของคุณ เมื่อคลิกที่ไอคอนที่อยู่ด้านบนของแถบด้านข้าง แผงต่อไปนี้จะถูกเปิดเผย:
- รายการองค์ประกอบ UI
- ต้นไม้องค์ประกอบ
- ต้นไม้หน้า
- แผนผังเค้าโครง
- ผู้จัดการสินทรัพย์
รายการองค์ประกอบ UI (ทางลัด: 1 )
รายการองค์ประกอบ UI ให้องค์ประกอบทั้งหมดที่สามารถเพิ่มลงในพื้นที่แคนวาสได้โดยการลากจากแผง
องค์ประกอบ UI ได้รับการจัดระเบียบเป็นหมวดหมู่ตามวัตถุประสงค์ ทำให้ง่ายต่อการนำทางและค้นหาวิดเจ็ตที่เหมาะสมสำหรับแอปของคุณ
หากต้องการไปยังองค์ประกอบอย่างรวดเร็ว คุณสามารถใช้แถบค้นหาที่ด้านบนของแผงได้
ต้นไม้องค์ประกอบ (ทางลัด: 2 )
จาก แผนผังองค์ประกอบ คุณสามารถจัดการและจัดระเบียบส่วนประกอบทั้งหมดที่อยู่ในหน้าที่เลือกของเว็บแอปของคุณได้
คุณสามารถโต้ตอบกับองค์ประกอบเหล่านี้ได้ที่นี่:
- ย้ายรายการระหว่างต้นไม้โดยการลาก
- เปลี่ยนชื่อส่วนประกอบ
- เปลี่ยนสถานะการมองเห็นขององค์ประกอบบนผืนผ้าใบ (ซ่อน/แสดง)
ใช้แถบค้นหาที่ด้านบนของแผงสำหรับองค์ประกอบการค้นหาที่รวดเร็วในแผนผัง
แผนผังหน้า (ทางลัด: 3 )
โครงสร้างหน้า ช่วยให้คุณสามารถจัดระเบียบและจัดการหน้าเว็บไซต์ของคุณได้ คุณสามารถสร้างหน้าหรือโฟลเดอร์ใหม่ได้ที่นี่
ใน Pages Tree คุณสามารถทำซ้ำหรือลบหน้าหรือโฟลเดอร์ได้
ใช้แถบค้นหาที่ด้านบนของแผงสำหรับหน้าการค้นหาอย่างรวดเร็วหรือโฟลเดอร์ในแผนผัง
รายการเค้าโครง (ทางลัด: 4 )
แผนผังเค้าโครง ช่วยในการจัดการเค้าโครงเพจของคุณ เช่นเดียวกับใน Pages Tree คุณสามารถทำซ้ำหรือลบเค้าโครงได้
ใช้แถบค้นหาที่ด้านบนของแผงสำหรับเลย์เอาต์การค้นหาที่รวดเร็วในแผนผัง
ผู้จัดการสินทรัพย์ (ทางลัด: 5 )
ตัวจัดการสินทรัพย์ อำนวยความสะดวกในการอัพโหลดและการจัดระเบียบสินทรัพย์ (เช่น เอกสาร รูปภาพ และภาพเคลื่อนไหว) สำหรับการใช้งานเว็บไซต์ของคุณ
เนื้อหาทั้งหมดที่คุณอัปโหลดระหว่างการพัฒนาจะถูกเก็บไว้ในตัวจัดการสินทรัพย์และสามารถนำมาใช้ซ้ำได้โดยไม่ต้องอัปโหลดซ้ำ
คุณยังสามารถลบเนื้อหาใดๆ ที่คุณไม่ต้องการอีกต่อไปได้
ท็อปบาร์
แถบด้านบนมีชุดการตั้งค่ามุมมองเพิ่มเติม เริ่มจากด้านซ้ายมือ ถัดจากปุ่มเมนู และขยายไปทางขวา คุณจะมีชุดเครื่องมือดังต่อไปนี้:
- เอกสารปัจจุบัน: แสดงหน้าหรือเค้าโครงที่คุณกำลังทำงานอยู่
- เบรกพอยท์: ไอคอนเบรกพอยต์ทำให้คุณสามารถสลับระหว่างเบรกพอยท์ต่างๆ เพื่อดูตัวอย่างและแก้ไขลักษณะที่ไซต์ของคุณปรากฏบนอุปกรณ์ขนาดต่างๆ
- เลิกทำและทำซ้ำ: ปุ่มเลิกทำและทำซ้ำช่วยให้คุณสามารถย้อนกลับหรือนำการกระทำที่คุณทำไว้ใน Designer ไปใช้ใหม่ เช่น การใช้สไตล์หรือการลบองค์ประกอบ นอกจากนี้ยังมีทางลัดให้เลือกใช้อีกด้วย: สำหรับการเลิกทำการกระทำ -
CRTL/⌘+Zและสำหรับการทำซ้ำการกระทำ -CTRL/⌘+SHIFT+Z
แถบด้านล่าง
แผงด้านล่างช่วยให้คุณสามารถซูมหรือปรับขนาดมุมมองเพจได้
ที่ด้านซ้ายของแผง คุณสามารถตั้งค่าความละเอียดของหน้าแบบกำหนดเองได้โดยการตั้งค่าความสูงและความกว้างของผืนผ้าใบของคุณ
ทางด้านขวา คุณสามารถควบคุมมาตราส่วนได้:
- ซูมเข้าหรือซูมออก
- กำหนดมาตราส่วนเป็นเปอร์เซ็นต์
- กำหนดขนาดจริง
- ปรับหน้าต่างปัจจุบันให้พอดีกับพื้นที่ที่มองเห็นได้
ผ้าใบ
แคนวาสคือพื้นที่ทำงานเชิงโต้ตอบของคุณ นี่คือที่ที่คุณสามารถมีส่วนร่วมกับองค์ประกอบของหน้าได้ คุณสามารถเลือกองค์ประกอบ เปลี่ยนตำแหน่ง และแก้ไขเนื้อหาได้โดยตรงบนเพจ
นอกจากนี้ คุณยังสามารถคัดลอก ( CRTL/⌘+C ) และวางองค์ประกอบ ( CRTL/⌘+V ) ระหว่างเพจและแอปพลิเคชัน หรือทำซ้ำองค์ประกอบภายในหน้าปัจจุบัน ( CRTL/⌘+D )
แผงคุณสมบัติ
แผงคุณสมบัติ ทางด้านขวาของตัวออกแบบช่วยให้คุณปรับแต่งลักษณะที่ปรากฏและลักษณะการทำงานขององค์ประกอบ เค้าโครง หรือเพจที่เลือกได้
แผงคุณสมบัติประกอบด้วยแผงหลัก 4 แผง:
- แผงลักษณะที่ปรากฏ
- แผงตัวเลือกเพิ่มเติม (ไม่บังคับ)
- แผงแบบสอบถามสื่อ
- แผงลอจิกธุรกิจ
บนส่วนหัวของแผง คุณสามารถเปลี่ยนชื่อรายการที่เลือกได้โดยคลิกที่ชื่อรายการ อ่านคำอธิบาย หรือลบรายการโดยคลิกที่ไอคอนถังขยะ
แผงลักษณะที่ปรากฏ
แผงลักษณะที่ปรากฏ ช่วยให้คุณเข้าถึงเนื้อหาและคุณสมบัติคงที่ที่แสดงขององค์ประกอบที่เลือก คุณสามารถป้อนหรือเลือกค่าเหล่านี้ในฟิลด์ที่เกี่ยวข้องได้ และสไตล์จะถูกนำไปใช้กับองค์ประกอบของคุณบนผืนผ้าใบทันที
หากไม่มีการเลือกองค์ประกอบบนผืนผ้าใบ แผงนี้จะแสดงการตั้งค่าของหน้าหรือเค้าโครงปัจจุบัน
แผงตัวเลือกเพิ่มเติม
แผงตัวเลือกเพิ่มเติม มีไว้สำหรับองค์ประกอบที่ต้องการข้อมูลการตั้งค่าหรือตัวเลือกเพิ่มเติม
คุณสามารถตั้งค่าแหล่งข้อมูลหรือป้อนตัวเลือกด้วยตนเองได้ ขึ้นอยู่กับส่วนประกอบที่เลือก
แผงแบบสอบถามสื่อ
แผง Media Queries ช่วยให้คุณสามารถแทนที่คุณสมบัติของรายการสำหรับเบรกพอยต์ที่กำหนดไว้แต่ละอัน
แผงลอจิกธุรกิจ
Business Logic Panel ให้ทริกเกอร์ทั้งหมดสำหรับองค์ประกอบ และช่วยให้คุณสร้างการโต้ตอบขององค์ประกอบเมื่อทริกเกอร์เริ่มทำงาน