เอกสารประกอบ
ดัชนี
โครงร่างและองค์ประกอบของเว็บแอป Fillet

ทำความเข้าใจอินเทอร์เฟซของแอป
โครงร่างและองค์ประกอบของเว็บแอป Fillet

เรียนรู้เกี่ยวกับโครงร่างของเว็บแอป Fillet และองค์ประกอบต่างๆ ที่คุณสามารถโต้ตอบได้


โครงร่าง

#

แถบนำทาง

ที่ด้านบนของหน้าจอคือแถบนำทาง ประกอบด้วยโลโก้แบรนด์ Fillet ปุ่มแท็บ และปุ่มนำทาง เช่น "เอกสารประกอบ" และ "ออกจากระบบ"

แท็บ

เว็บแอป Fillet มีแท็บดังต่อไปนี้:

  • วัตถุดิบ
  • สูตรอาหาร
  • เมนู
  • ผู้ขาย
  • แรงงาน
  • สินค้าคงคลัง
  • ซิงค์

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

หากต้องการเลือกแท็บ ให้คลิกที่แท็บนั้นในแถบนำทาง

มุมมอง

โดยทั่วไปแล้ว แต่ละแท็บของเว็บแอปจะแบ่งออกเป็นส่วนต่างๆ ดังนี้:

  • มุมมองรายการ
  • มุมมองรายละเอียด
  • แผงด้านข้าง ใหม่

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

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

#

มือถือ มุมมองรายการ

#

มือถือ มุมมองรายละเอียด

มุมมองรายการ

โดยทั่วไปมุมมองรายการจะมีองค์ประกอบดังต่อไปนี้:

  • ปุ่มหลัก
  • ตารางรายการ
  • แถบค้นหาสำหรับตารางรายการ
มุมมองรายละเอียด

โดยทั่วไปมุมมองรายละเอียดจะมีองค์ประกอบดังต่อไปนี้:

  • วิดเจ็ต
  • ส่วนรายละเอียด
  • ตารางรายละเอียด
  • แถบค้นหาสำหรับตารางรายการ
แผงด้านข้าง

ในบางแท็บ จะมีแผงด้านข้างที่คุณสามารถใช้เพื่อนำทางระหว่างแผงต่างๆ ได้

แผงเหล่านี้เป็นแบบเฉพาะสำหรับแท็บที่เลือก


องค์ประกอบ

#

แต่ละแท็บของเว็บแอปจะมีการผสมผสานองค์ประกอบเหล่านี้:

  1. ปุ่มพื้นฐาน
  2. ปุ่มอันตราย
  3. ปุ่มดรอปดาวน์
  4. ปุ่มหลัก
  5. ปุ่มตัวเลือก
  6. ตารางรายการ
  7. แถบค้นหาสำหรับตารางรายการ
  8. วิดเจ็ต
  9. ส่วนรายละเอียด
  10. ตารางรายละเอียด
  11. แถบค้นหาสำหรับตารางรายละเอียด
  12. การแบ่งหน้า

คำจำกัดความ

ปุ่มพื้นฐาน

ปุ่มมาตรฐานที่ใช้ดำเนินการทั่วไปในแอปซึ่งไม่ต้องการความระมัดระวังเป็นพิเศษ

ปุ่มเหล่านี้อาจเป็นสีน้ำเงินหรือสีเทา

ตัวอย่าง: ปุ่มแก้ไข
ปุ่มอันตราย

ปุ่มที่แสดงให้คุณเห็นเมื่อการดำเนินการต้องการความระมัดระวังเป็นพิเศษ

ปุ่มเหล่านี้ช่วยให้คุณทราบว่ากำลังจะทำการเปลี่ยนแปลงที่สำคัญ เช่น การลบออบเจ็กต์

ปุ่มเหล่านี้เป็นสีแดงเสมอ

ตัวอย่าง: ปุ่มลบ
ปุ่มดรอปดาวน์

ปุ่มที่เปิดเมนูตัวเลือกเมื่อคุณเลือก

ปุ่มเหล่านี้ช่วยให้คุณสามารถเลือกการดำเนินการอย่างใดอย่างหนึ่งจากรายการได้

ตัวอย่าง: ปุ่มการดำเนินการ
ปุ่มหลัก

ปุ่มตัวหนาที่มองเห็นได้ง่ายบนหน้าจอ

ใช้สำหรับงานสำคัญ เช่น การสร้างออบเจ็กต์ใหม่

ปุ่มเหล่านี้มักจะเป็นสีน้ำเงิน

ตัวอย่าง: ในแท็บวัตถุดิบ ปุ่มหลักคือ "สร้างวัตถุดิบ"
ปุ่มตัวเลือก

ปุ่มนี้จะแสดงการดำเนินการเพิ่มเติมที่คุณสามารถทำได้

ปุ่มเหล่านี้มักจะเป็นสีเทา

ตัวอย่าง: ตัวเลือกตัวกรอง
ตารางรายการ

ตารางในมุมมองรายการ

แสดงรายการออบเจ็กต์สำหรับแท็บที่เลือก

ตัวอย่าง:

ในแท็บวัตถุดิบ ตารางรายการจะแสดงวัตถุดิบทั้งหมดของคุณ: "วัตถุดิบทั้งหมด"

แถบค้นหาสำหรับตารางรายการ

แถบค้นหาที่อยู่เหนือตารางรายการ

ใช้เพื่อค้นหาชื่อของออบเจ็กต์ในตารางรายการ

ตัวอย่าง: ในแท็บวัตถุดิบ ให้ค้นหารายการ "วัตถุดิบทั้งหมด" เพื่อค้นหาวัตถุดิบตามชื่อ
วิดเจ็ต

องค์ประกอบคล้ายการ์ดที่เน้นหัวข้อหรือฟังก์ชันการทำงานเฉพาะ

แสดงข้อมูลที่เกี่ยวข้องและให้การดำเนินการเฉพาะหัวข้อ

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

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

แต่ละแท็บมีหลายส่วน และแต่ละส่วนมุ่งเน้นไปที่วัตถุประสงค์เฉพาะ

ประกอบด้วยองค์ประกอบต่างๆ เช่น ตารางรายละเอียด กล่องข้อความ และการแสดงข้อมูลด้วยภาพ

ตัวอย่าง:

ในแผงหลักของแท็บวัตถุดิบ ส่วนที่ใช้ได้มีดังนี้:

  • ราคา
  • หน่วยที่เป็นนามธรรม
  • บันทึก
  • ประเทศต้นกำเนิด
  • ป้ายกำกับ
  • กลุ่ม
ตารางรายละเอียด

ตารางที่เป็นส่วนหนึ่งของส่วนรายละเอียด

โดยปกติจะมีตารางรายละเอียดหลายตารางในแท็บที่เลือก ซึ่งจัดระเบียบตามส่วน

แสดงข้อมูลและมีตัวเลือกในการแก้ไขหรือลบข้อมูล

ตัวอย่าง: ในแท็บวัตถุดิบ ส่วนราคาจะมีตารางราคา แสดงราคาทั้งหมดสำหรับวัตถุดิบที่เลือก
แถบค้นหาสำหรับตารางรายละเอียด

แถบค้นหาที่อยู่เหนือตารางรายละเอียด

ใช้เพื่อค้นหาชื่อของออบเจ็กต์ในตารางรายละเอียดนั้น

ตัวอย่าง: ในแท็บวัตถุดิบ ให้ค้นหาตารางราคาเพื่อค้นหาผู้ขายตามชื่อ
การแบ่งหน้า

นี่คือส่วนควบคุมที่ใช้ในการนำทางผ่านเนื้อหาหลายหน้า

มีปุ่มสำหรับถัดไปและก่อนหน้าเพื่อเลื่อนไปข้างหน้าและข้างหลัง รวมถึงจำนวนหน้า

จะมองเห็นได้เมื่อตารางมีมากกว่า 10 แถว


แดชบอร์ด

เมื่อคุณเปิดเว็บแอป Fillet คุณจะเห็นแดชบอร์ด

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

#