เทคนิคการพัฒนารายงานบนเว็บใน LuckyTemplates

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

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

พวกคุณที่รู้จักเราค่อนข้างดีจะรู้ว่าเรามีแนวทางสี่เสาหลัก นี่คือกรอบงานของเราสำหรับการพัฒนารายงาน LuckyTemplates เสาแรกกำลังโหลดและแปลงข้อมูล เสาที่สองคือการสร้างแบบจำลองข้อมูล เสาหลักที่สามคือการคำนวณ DAX และเสาหลักที่สี่คือรายงานและการแสดงภาพ วันนี้เรากำลังข้ามสามเสาหลักแรกและเรากำลังดำดิ่งสู่เสาหลักที่สี่

สารบัญ

• วิธีสร้างรายงานบนเว็บใน LuckyTemplates
  • ธีมสีรายงาน
  • การนำทางหน้ารายงานบนเว็บ
  • เคล็ดลับเครื่องมือในรายงานบนเว็บ
• เทคนิคและเคล็ดลับการแสดงภาพเพิ่มเติมสำหรับรายงานบนเว็บ
• บทสรุป

วิธีสร้างรายงานบนเว็บใน LuckyTemplates

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

ธีมสีรายงาน

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

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

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

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

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

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

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

เมื่อคุณเลือกธีมสีแล้ว คุณสามารถคัดลอกสีและวางลงในรายงานของคุณ โดยส่วนตัวแล้วฉันชอบพื้นหลังสีเข้มและตัวอักษรสีขาว

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

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

ตอนนี้เราได้ตั้งค่าธีมแล้ว เรามาดำเนินการต่อไปยังการนำทางของหน้า

การนำทางหน้ารายงานบนเว็บ

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

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

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

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

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

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

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

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

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

จากนั้นฉันสามารถเพิ่มภาพและสร้างข้อมูลเชิงลึกสำหรับรายงานได้อย่างรวดเร็ว

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

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

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

เคล็ดลับเครื่องมือในรายงานบนเว็บ

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

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

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

เมื่อคุณสร้างคำแนะนำเครื่องมือของคุณเสร็จแล้ว คุณสามารถฝังไว้ในภาพของรายงานของคุณได้ เพียงคลิกที่การแสดงภาพ ไปที่ลูกกลิ้งทาสี จากนั้นคลิกที่คำแนะนำเครื่องมือด้านล่าง

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

เทคนิคและเคล็ดลับการแสดงภาพเพิ่มเติมสำหรับรายงานบนเว็บ

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

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

ภายในไม่กี่นาที คุณสามารถสร้างรายงานบนเว็บที่ยอดเยี่ยมใน LuckyTemplates พร้อมประสบการณ์การนำทางที่ยอดเยี่ยมและรูปลักษณ์ที่น่าสนใจ

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

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

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

เคล็ดลับการออกแบบ LuckyTemplates: การสร้างรายงานที่เหมือนแอปพลิเคชัน
เทคนิคการรายงาน LuckyTemplates: การตั้งค่ารายงานที่เหมือนแอปพลิเค
ชัน ตัวอย่างรายงาน LuckyTemplates ที่ดีที่สุด | แอปการรายงานสูตร 1

บทสรุป

บทช่วยสอนนี้อ้างอิงจากการประชุมสุดยอดครั้งล่าสุดที่ LuckyTemplates คุณสามารถดูวิดีโอแบบเต็มด้านล่างเพื่อดูรายละเอียดเกี่ยวกับวิธีที่ฉันสร้างรายงานนี้

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

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

ไชโย