คำแนะนำสำหรับการเพิ่มประสิทธิภาพเค้าโครง
นำไปใช้กับคำแนะนำรายการตรวจสอบการปรับปรุงประสบการณ์ใช้งานของ Power Platform Well-Architected นี้:
| XO:06 | รักษาเค้าโครงที่ใช้งานได้และดึงดูดสายตาสำหรับขนาดหน้าจอและความละเอียด ใช้เทคนิคการปรับเปลี่ยนเพื่อแสดงเนื้อหาแบบไดนามิกในรูปแบบต่างๆ |
|---|
คู่มือนี้จะอธิบายคำแนะนำในการออกแบบเค้าโครงหน้าจอที่ใช้งานง่ายและปรับเปลี่ยนได้อย่างลื่นไหลบนอุปกรณ์ต่างๆ แนวทางนี้ทำให้มั่นใจได้ว่าผู้ใช้จะได้รับประสบการณ์การรับชมที่สอดคล้องกันและเหมาะสมที่สุด โดยไม่คำนึงถึงอุปกรณ์ที่พวกเขาใช้
คำนิยาม
| เงื่อนไข | ข้อกำหนด |
|---|---|
| วิวพอร์ต | ส่วนที่มองเห็นได้ของอินเทอร์เฟซดิจิทัล เช่น เว็บเบราว์เซอร์หรือแอปมือถือ ซึ่งแสดงเนื้อหา ช่วงวิวพอร์ตมักจะเชื่อมโยงกับคลาสอุปกรณ์ (มือถือ แท็บเล็ต และเดสก์ท็อป) ตามขนาดและความละเอียดของหน้าจอ |
| จุดสั่งหยุด | ค่าพิกเซลเฉพาะที่กำหนดช่วงวิวพอร์ตที่ใช้ในการกำหนดลักษณะการจัดวางแบบปรับเปลี่ยนได้ |
กลยุทธ์การออกแบบที่สำคัญ
รูปแบบที่ตอบสนองมอบประสบการณ์ผู้ใช้ที่ยืดหยุ่นและมีประสิทธิภาพในหน้าต่างขนาดต่างๆ ปรับเปลี่ยนได้โดยปรับขนาดเนื้อหา จัดเรียงองค์ประกอบใหม่ และเลือกแสดงข้อความและรูปภาพ เค้าโครงที่มีความรับผิดชอบตอบสนองความต้องการของผู้ใช้โดยไม่คำนึงถึงขนาดหน้าจอ
กำหนดกรอบแอปที่สอดคล้องกัน
กรอบแอปพลิเคชันประกอบด้วยชุดการควบคุมที่พร้อมใช้งานอย่างสม่ำเสมอบนทุกหน้าจอ ประกอบด้วยองค์ประกอบย่อยหลัก 3 ส่วน ได้แก่ ส่วนหัว การนำทาง และขอบเขตเนื้อหา แอปที่เรียบง่ายมีความยืดหยุ่นในการใช้ส่วนประกอบส่วนหัว ในขณะที่แอปที่ซับซ้อนกว่ามักจะใช้การนำทางด้านข้างเพื่อเปิดใช้งานหลายหน้า ส่วนประกอบย่อยสามารถปรับแต่งได้ ตัวอย่างเช่น คุณสามารถรวมการค้นหาทั่วโลกในส่วนหัวหรือกลุ่มรายการในการนำทางด้านข้างเพื่อให้เหมาะกับความต้องการของแอปของคุณ
องค์ประกอบย่อยหลักสามประการของกรอบแอปได้แก่:
ส่วนหัว เป็นองค์ประกอบหลักที่ออกแบบมาเพื่อเป็นส่วนหนึ่งของทุกแอปพลิเคชันภายใน ประกอบด้วยส่วนประกอบย่อยที่ให้ผู้ใช้เข้าถึงฟังก์ชันทั้งระบบ ช่วยกำหนดทิศทางให้กับ UI และให้ความสอดคล้องกันระหว่างประสบการณ์ต่างๆ จะปรากฏที่ด้านบนของกรอบแอปและควรคงอยู่ในทุกหน้าของแอป โดยสามารถเลือกโฮสต์คำสั่งส่วนกลางได้ เช่น การค้นหา การตั้งค่า การแจ้งเตือน คำติชม โปรไฟล์ หรือความช่วยเหลือ ควรแสดงชื่อของแอปเสมอ และควรจะใช้เป็นลิงก์ที่คลิกไปยังหน้าแรกหรือหน้าแลนด์ดิ้งได้ ส่วนหัวควรตอบสนอง โดยมีคำสั่งย้ายไปยังตัวควบคุมโอเวอร์โฟลว์ในวิวพอร์ตที่มีขนาด 600 พิกเซลหรือต่ำกว่า ความกว้างของอินพุตการค้นหายังตอบสนองที่ 1,023 พิกเซลและต่ำกว่า
การนำทาง คือระบบควบคุมที่ทำงานร่วมกันเพื่อช่วยให้ผู้ใช้ค้นหาข้อมูลและทำงานให้เสร็จสิ้น ช่วยให้ผู้ใช้ข้ามจากส่วนหนึ่งไปยังอีกส่วนของแอปพลิเคชัน โดยลำดับชั้นจะไม่แนบกับหน้าหรือส่วนใดๆ แต่อยู่เหนือเนื้อหาอื่นๆ ทั้งหมด โดยจะแสดงอยู่เสมอ และอาจย่อให้เหลือสถานะยุบ (หรือเรียกว่าสถานะราง) เพื่อเพิ่มพื้นที่ว่างสำหรับเนื้อหาของหน้า เมื่อหน้าต่างมีขนาดเล็กลง คุณสามารถย่อขนาดลงในเมนูลอยได้ รูปแบบการนำทางที่พบบ่อยที่สุด ได้แก่ การนำทางด้านบนและการนำทางด้านข้าง อย่าใช้ทั้งสองแบบพร้อมกัน
ขอบเขตเนื้อหา ประกอบด้วยโฟกัสของหน้าจอ ขนาดของหน้าต่างเบราว์เซอร์จะส่งผลต่อเฟรมเนื้อหาและพื้นที่ว่างในภูมิภาคเนื้อหาหลัก เฟรมนี้จะปรับตามเบรกพอยต์และพฤติกรรมการตอบสนองที่สอดคล้องกันของแต่ละองค์ประกอบ เรียนรู้เพิ่มเติมใน สร้างเมทริกซ์เบรกพอยต์
ขอบเขตเนื้อหาสามารถเลือกได้ว่ามีหลายภูมิภาคย่อยที่พร้อมใช้งานสำหรับการจัดวางองค์ประกอบที่สอดคล้องกัน เช่น ส่วนหัวของหน้า บานหน้าต่างด้านข้างแบบอินไลน์ หรือแผงที่ซ้อนทับเนื้อหา
การปฏิบัติตามภาษาการออกแบบที่สอดคล้องกันกับโทนสี ตัวอักษร และโครงสร้างเค้าโครงจะช่วยให้ผู้ใช้ระบุและโต้ตอบกับองค์ประกอบต่างๆ ได้อย่างรวดเร็วโดยไม่เกิดความสับสน ยิ่งใช้รูปแบบเฟรมของแอปอย่างสม่ำเสมอในแอปพลิเคชันทางธุรกิจภายในทั้งหมด การจดจำหรือแบบจำลองทางจิตของผู้ใช้ก็จะยิ่งแข็งแกร่งขึ้นเท่านั้น การปรับให้สอดคล้องกับมาตรฐานอุตสาหกรรมหรือรูปแบบแพลตฟอร์มทั่วไปจะช่วยเพิ่มผลกระทบนี้ให้ดียิ่งขึ้น
หลังจากกำหนดกรอบแอปแล้ว เค้าโครงของแต่ละหน้าจอจะอยู่ภายในพื้นที่เนื้อหาของกรอบแอป
ใช้ขอบเขตเนื้อหาอย่างรอบคอบ
ผู้ใช้ปรารถนาประสบการณ์ที่ราบรื่นโดยที่ข้อมูลสามารถเข้าถึงได้ง่าย ข้อความอ่านง่าย และความสวยงามที่ดีขึ้นมากกว่าที่จะขัดขวางการใช้งาน จัดลำดับความสำคัญการมองเห็นข้อมูลสำคัญเบื้องต้น ตรวจสอบให้แน่ใจว่าสามารถอ่านข้ามคอลัมน์ได้ และปรับองค์ประกอบการออกแบบให้สอดคล้องกันเพื่อความสวยงาม
ตรวจสอบให้แน่ใจว่าข้อมูลสำคัญมองเห็นได้ทันทีเมื่อเปิดหน้าจอโดยไม่จำเป็นต้องเลื่อน จัดลำดับความสำคัญของการแสดงข้อมูลที่จำเป็น เช่น ตัวเลือกการนำทาง เนื้อหาที่สำคัญ และรายการที่ดำเนินการได้ใกล้กับด้านบนของหน้าจอ การสร้างสมดุลระหว่างการแสดงรายการที่เพียงพอและการให้ข้อมูลโดยละเอียดสำหรับแต่ละรายการถือเป็นความท้าทายอย่างต่อเนื่อง ในทางกลับกัน แม้ว่าการให้ข้อมูลที่เป็นไปได้ทั้งหมดในมุมมองเริ่มต้นอาจดูน่าดึงดูดใจ แต่ข้อมูลที่มากเกินไปก็มีความเสี่ยงที่ผู้ใช้จะล้นหลามและทำให้ความสำคัญขององค์ประกอบหลักลดน้อยลง ลองใช้บทสรุปที่กระชับหรือการแสดงตัวอย่างที่นำเสนอเนื้อหาที่มีรายละเอียดมากขึ้น เพื่อดึงดูดผู้ใช้ให้เจาะลึกยิ่งขึ้น แดชบอร์ดได้รับการปรับให้เหมาะสมเพื่อรองรับจุดประสงค์นี้ในการแสดงภาพข้อมูลจำนวนมาก
รวมคอลัมน์ ส่วน หรือการจัดกลุ่มหลายรายการเพื่อจัดระเบียบเนื้อหาอย่างมีเหตุผลและเพิ่มพื้นที่ให้สูงสุด ใส่ใจกับความกว้างของคอลัมน์อย่างพิถีพิถัน เพื่อให้มั่นใจว่าข้อความจะอ่านได้ชัดเจนโดยไม่ต้องเครียดจนเกินไป หลีกเลี่ยงคอลัมน์ที่แคบจนเกินไปซึ่งบังคับให้ผู้ใช้เลื่อนในแนวนอนอย่างต่อเนื่อง ซึ่งขัดขวางการโต้ตอบ ในทางกลับกัน คอลัมน์ที่กว้างเกินไปอาจขัดขวางการอ่าน ทำให้ผู้ใช้ต้องติดตามบรรทัดในระยะทางที่ขยายออกไป พยายามสร้างความสมดุลที่เอื้อต่อการอ่านหนังสือที่สะดวกสบาย ในขณะเดียวกันก็ใช้พื้นที่ที่มีอยู่อย่างมีประสิทธิภาพ
ขนาดและตำแหน่งองค์ประกอบภาพอย่างเหมาะสมเพื่อสร้างอินเทอร์เฟซที่สมดุลและสวยงาม จัดแนวคำบรรยายด้วยภาพหรือชื่อเรื่องที่สอดคล้องกัน รักษาระยะห่างระหว่างองค์ประกอบให้สอดคล้องกัน และยึดตามลำดับชั้นตามความต้องการของผู้ใช้ ตัดการตกแต่งที่ไม่จำเป็นและจัดสรรพิกเซลให้กับองค์ประกอบที่สำคัญที่สุดอย่างรอบคอบ จัดลำดับความสำคัญและเน้นเนื้อหาและองค์ประกอบการนำทาง โดยเฉพาะในแอปหรือหน้าแรกที่เน้นการนำทาง และหลีกเลี่ยงการตกแต่งที่ไม่จำเป็นซึ่งทำให้ใช้งานไม่ได้
ตารางที่อยู่ด้านล่างจะเป็นประโยชน์ในการจัดเรียงองค์ประกอบต่างๆ อย่างสม่ำเสมอ ลักษณะตารางที่เลือกควรสอดคล้องกันในทุกขอบเขตเนื้อหาของหน้าจอในแอป และยังสามารถนำมาใช้ในระดับส่วนประกอบได้ เช่น การ์ดหรือบานหน้าต่างด้านข้าง เค้าโครงตารางประเภททั่วไปที่ใช้ในเว็บแอปพลิเคชันคือตารางคอลัมน์ แนะนำให้ใช้ลักษณะกริดแบบไหล (หรือแบบยืด) เพื่อใช้งานหน้าจอแบบตอบสนอง
ใช้เค้าโครงที่กำหนดไว้และรูปแบบการจัดกลุ่ม
ใช้โครงสร้างและการจัดเตรียมที่เป็นที่ยอมรับโดยทั่วไปสำหรับการจัดระเบียบเนื้อหาและองค์ประกอบภายในอินเทอร์เฟซผู้ใช้ เค้าโครงและรูปแบบเหล่านี้ได้รับการปรับปรุงและพิสูจน์แล้วว่ามีประสิทธิภาพเมื่อเวลาผ่านไป ทำให้ผู้ใช้คุ้นเคยและใช้งานง่าย ในขณะเดียวกันก็ทำให้ง่ายต่อการใช้รูปแบบที่ปรับเปลี่ยนได้ เมื่อระบุสถานการณ์และองค์ประกอบหลักแล้ว ให้แมปแต่ละสถานการณ์กับเค้าโครงที่กำหนดไว้ซึ่งให้การโต้ตอบที่ดีที่สุด จัดลำดับความสำคัญของเนื้อหาและฟีเจอร์ที่สำคัญต่อการทำงานให้เสร็จสิ้น ตัดสินใจว่าองค์ประกอบใดควรมองเห็นและเข้าถึงได้บนหน้าจอเสมอ และองค์ประกอบใดสามารถซ่อนหรือเข้าถึงได้ผ่านเมนูหรือการกระทำอื่นๆ
รายการต่อไปนี้แม้จะไม่ครบถ้วนสมบูรณ์แต่จะอธิบายโครงร่างที่สร้างขึ้นซึ่งมักใช้สำหรับแอปพลิเคชันทางธุรกิจหรือเพิ่มประสิทธิภาพการทำงาน ทั้งหมดสามารถเกิดขึ้นได้ภายในขอบเขตเนื้อหาหลัก
หน้าจอหน้าแลนด์ดิ้ง/หน้าแรก
หน้าจอเริ่มต้นหรือหน้าจอหน้าแรกทำหน้าที่เป็นจุดเริ่มต้นสู่แอปพลิเคชัน โดยให้ภาพรวมของข้อเสนอหรือคุณสมบัติของแอปแก่ผู้ใช้ โดยทั่วไปมีจุดมุ่งหมายเพื่อดึงดูดความสนใจของผู้เยี่ยมชมและกระตุ้นให้ดำเนินการบางอย่าง เช่น ทำงานครั้งแรกให้สำเร็จหรือสำรวจเนื้อหาเพิ่มเติม มักจะมีรูปภาพหลักและตัวเลือกการนำทางที่ชัดเจน
เหมาะอย่างยิ่งสำหรับการต้อนรับผู้ใช้ โดยให้การเข้าถึงฟังก์ชันหลัก ตัวเลือกการนำทาง หรือคำกระตุ้นการตัดสินใจได้อย่างรวดเร็ว และกำหนดโทนสำหรับประสบการณ์การใช้งานแอป จัดลำดับความสำคัญของความชัดเจน ความเรียบง่าย และการนำทางที่ใช้งานง่ายเพื่อนำทางผู้ใช้อย่างมีประสิทธิภาพ
แดชบอร์ด
แดชบอร์ดเป็นฮับแบบรวมศูนย์ภายในแอปพลิเคชันที่นำเสนอภาพรวมที่ครอบคลุมของข้อมูลที่เกี่ยวข้องแก่ผู้ใช้ มักประกอบด้วยวิดเจ็ตหรือโมดูลที่ปรับแต่งได้ ทำให้ผู้ใช้สามารถตรวจสอบตัวชี้วัดเฉพาะหรือดำเนินการได้
แดชบอร์ดเหมาะสำหรับแอปพลิเคชันที่มีชุดข้อมูลที่ซับซ้อนหรือฟังก์ชันการทำงานที่หลากหลาย ช่วยให้ผู้ใช้สามารถติดตามความคืบหน้า วิเคราะห์แนวโน้ม และทำการตัดสินใจโดยมีข้อมูลครบถ้วนได้ในพริบตา มีประโยชน์อย่างยิ่งในแพลตฟอร์มการวิเคราะห์ เครื่องมือการจัดการโครงการ และแอปการจัดการทางการเงิน
ฟอร์ม
ฟอร์มเป็นเค้าโครงที่มีโครงสร้างซึ่งอำนวยความสะดวกในการป้อนข้อมูลจากผู้ใช้ โดยทั่วไปจะประกอบด้วยช่องสำหรับการป้อนข้อมูลประเภทต่างๆ เช่น ข้อความ ตัวเลข วันที่ และการเลือก แบบฟอร์มมีความจำเป็นในการรวบรวมอินพุตของผู้ใช้ ประมวลผลธุรกรรม และอำนวยความสะดวกในการโต้ตอบภายในแอปพลิเคชัน
โดยทั่วไปจะใช้ในขั้นตอนการลงทะเบียน กระบวนการชำระเงิน งานป้อนข้อมูล และสถานการณ์ใดๆ ที่ต้องป้อนข้อมูลหรือคำติชมจากผู้ใช้
มุมมองเอนทิตี/โปรไฟล์
มุมมองเอนทิตีหรือโปรไฟล์นำเสนอข้อมูลโดยละเอียดเกี่ยวกับเอนทิตีเฉพาะ เช่น โปรไฟล์ผู้ใช้ รายการผลิตภัณฑ์ หรือรายการเนื้อหา โดยทั่วไปจะประกอบด้วยข้อความอธิบาย องค์ประกอบมัลติมีเดีย และการดำเนินการหรือการโต้ตอบที่เกี่ยวข้อง
เหมาะอย่างยิ่งสำหรับการจัดแสดงข้อมูลโดยละเอียดเกี่ยวกับรายการต่างๆ ภายในแอปพลิเคชัน โดยให้ข้อมูลเชิงลึกแก่ผู้ใช้ อำนวยความสะดวกในการตัดสินใจ และสนับสนุนการมีส่วนร่วมกับเอนทิตีเฉพาะ เช่น โปรไฟล์ผู้ใช้ในแอปโซเชียลเน็ตเวิร์ก หรือรายการผลิตภัณฑ์ในแพลตฟอร์มอีคอมเมิร์ซ
หน้ารายการ
รายการหรือตารางแสดงคอลเลกชันของรายการหรือเอนทิตีในรูปแบบที่มีโครงสร้าง ซึ่งมักนำเสนอในรูปแบบเชิงเส้นหรือตาราง โดยทั่วไปจะมีข้อมูลสรุปโดยย่อหรือการแสดงตัวอย่างแต่ละรายการ พร้อมด้วยตัวควบคุมการนำทางสำหรับการเรียกดูหรือตัวกรอง
หน้ารายการมีประสิทธิภาพในการนำเสนอชุดเนื้อหาหรือข้อมูลจำนวนมากในรูปแบบที่เข้าใจง่าย ทำให้ผู้ใช้สามารถสแกน ค้นหา และนำทางได้อย่างมีประสิทธิภาพ หากเปิดใช้งานการดำเนินการในแถวใดแถวหนึ่ง กระบวนการก็ควรมีความชัดเจน หน้ารายการมักใช้ในระบบการจัดการเนื้อหา รายการไดเรกทอรี ผลการค้นหา และฟีดข่าว
รีวิวย่อ (แยกหน้าจอ)
หน้าจอรีวิวย่อหรือการแบ่งจะแบ่งอินเทอร์เฟซออกเป็นสองส่วนที่แตกต่างกัน โดยมีรายการแสดงทางด้านซ้ายและมุมมองรายการทางด้านขวา โดยทั่วไปรายการจะประกอบด้วยคอลเลกชันของรายการ ในขณะที่มุมมองรายการจะให้ข้อมูลโดยละเอียดเกี่ยวกับรายการที่เลือกในรายการ
เค้าโครงนี้มีประสิทธิภาพโดยเฉพาะอย่างยิ่งในสถานการณ์ที่ผู้ใช้จำเป็นต้องเรียกดูรายการอย่างรวดเร็วและดูข้อมูลโดยละเอียดเกี่ยวกับแต่ละรายการพร้อมกัน เช่น เมื่อดำเนินการจำนวนมาก แค็ตตาล็อกผลิตภัณฑ์ ระบบการจัดการเอกสาร อีเมลหรือไคลเอ็นต์การสื่อสาร และเครื่องมือการจัดการงาน (เช่น โปรแกรมดูแบบสอบถาม Azure Dev Ops) เป็นสถานการณ์ที่โดยทั่วไปจะเหมาะกับรูปแบบนี้
ตัวช่วยสร้าง
วิซาร์ดแนะนำผู้ใช้ผ่านชุดขั้นตอนหรืองานตามลำดับ ซึ่งโดยทั่วไปเป็นแบบเชิงเส้น เพื่อทำกระบวนการที่ซับซ้อนให้เสร็จสิ้นหรือบรรลุเป้าหมายเฉพาะ โดยมักจะมีตัวบ่งชี้ความคืบหน้า ข้อความแจ้ง และการตรวจสอบความถูกต้อง ตัวสร้างมีประโยชน์ในการทำให้กระบวนการที่ซับซ้อนง่ายขึ้น ลดภาระงานด้านการรับรู้ที่มากเกินไป และแนะนำผู้ใช้ผ่านงานหรือเวิร์กโฟลว์ที่ไม่คุ้นเคย โดยทั่วไปจะใช้ในโฟลว์การเริ่มต้นใช้งาน กระบวนการตั้งค่า แบบฟอร์มหลายขั้นตอน และการโต้ตอบตามงาน เช่น การกำหนดค่าการตั้งค่าหรือธุรกรรมที่ซับซ้อน
ปรับแต่งและสร้างเค้าโครงมาตรฐานเพื่อให้เหมาะกับความต้องการเฉพาะ กระบวนการนี้อาจรวมถึงการเพิ่มหรือลบองค์ประกอบ การปรับขนาดและตำแหน่งขององค์ประกอบ และการใช้สไตล์เพื่อให้ตรงกับเอกลักษณ์ของแบรนด์หรือแนวทางการออกแบบภาพ ทดลองใช้การกำหนดค่าและรูปแบบต่างๆ ของเค้าโครงมาตรฐานเพื่อค้นหาการจัดเรียงเนื้อหาและประสบการณ์ผู้ใช้โดยรวมที่มีประสิทธิภาพสูงสุด
ออกแบบเค้าโครงสำหรับอุปกรณ์ทั้งหมด
เค้าโครงเป็นจุดสูงสุดของกฎที่กำหนดไว้และการจัดระเบียบเนื้อหาโดยเจตนา การนำเนื้อหาของคุณเข้าสู่โครงสร้างที่รอบคอบเป็นสิ่งสำคัญ แต่การทำให้เนื้อหาทั้งหมดไหลลื่นไปพร้อมกับลำดับชั้นที่ชัดเจนทั่วทั้งแพลตฟอร์มและขนาดหน้าจอต้องใช้ตรรกะในการปรับขนาด การออกแบบที่ปรับเปลี่ยนได้และตอบสนองเฉพาะบุคคลสามารถรับมือกับความท้าทายนี้ได้ ในบางกรณี การผสมผสานระหว่างการออกแบบที่ปรับเปลี่ยนได้และแบบตอบสนองคือตัวเลือกที่เหมาะสม
การออกแบบที่ปรับเปลี่ยนตามอุปกรณ์ ใช้เพียงเค้าโครงเดียวซึ่งมีเนื้อหาที่ลื่นไหลและสามารถปรับให้เข้ากับขนาดรูปแบบที่เปลี่ยนแปลงได้ เทคนิคการออกแบบนี้ใช้คำสั่งสื่อเพื่อตรวจสอบคุณลักษณะของอุปกรณ์ที่กำหนดและแสดงผลเนื้อหาตามนั้น การออกแบบที่ตอบสนองช่วยให้คุณสร้างคุณลักษณะเพียงครั้งเดียวและทำงานได้อย่างมีประสิทธิภาพในทุกขนาดหน้าจอ
เค้าโครงที่ปรับเปลี่ยนได้ เปลี่ยนแปลงทั้งหมดตามรูปแบบที่นำเสนอ การออกแบบที่ปรับเปลี่ยนได้มีขนาดเค้าโครงคงที่หลายขนาด และทริกเกอร์ให้เบราว์เซอร์โหลดเค้าโครงที่กำหนดตามพื้นที่ว่าง เว็บไซต์ที่สร้างด้วยการออกแบบที่ปรับเปลี่ยนได้จะใช้คำสั่งสื่อเพื่อตรวจจับเบรกพอยต์ คล้ายกับการออกแบบที่ตอบสนอง ยังใช้มาร์กอัปเพิ่มเติมตามความสามารถของอุปกรณ์ กระบวนการนี้เรียกว่า "การเพิ่มประสิทธิภาพแบบก้าวหน้า"
จัดตำแหน่งใหม่
เปลี่ยนตำแหน่งขององค์ประกอบของหน้า
รักษาเนื้อหาของคุณให้เป็นระเบียบ อ่านง่าย และมีความสมดุลโดยการปรับองค์ประกอบให้เหมาะสมเมื่อขนาดหน้าต่างเพิ่มขึ้น ตัวอย่างเช่น องค์ประกอบที่ซ้อนกันในแนวตั้งบนวิวพอร์ตบนมือถือสามารถเปลี่ยนตำแหน่งในแนวนอนบนวิวพอร์ตที่ใหญ่กว่าได้ การเปลี่ยนแปลงนี้เป็นไปตามลำดับการอ่านจากซ้ายไปขวาตามธรรมชาติ สร้างความสมดุลในการออกแบบ และรักษาการโฟกัสภาพไปที่องค์ประกอบหลักบนหน้า
ปรับขนาด
ปรับขนาดและระยะขอบขององค์ประกอบของหน้า
ปรับขนาดองค์ประกอบของหน้าเพื่อปรับให้เหมาะสมเพื่อประสบการณ์การใช้งานที่หลากหลายโดยการแสดงเนื้อหาเพิ่มเติมที่ด้านบนของหน้าต่าง ซึ่งช่วยลดความจำเป็นในการเลื่อนแนวตั้ง ปรับระยะขอบของหน้าเพื่อเพิ่มพื้นที่สีขาวและความสมดุลให้กับเค้าโครง ซึ่งช่วยให้เนื้อหาดูโดดเด่นและเพิ่มความดึงดูดสายตาของการออกแบบ ตัวอย่างเช่น คอมโพเนนต์หลักอาจขยายจนเต็มความกว้างของหน้าต่างเพื่อแสดงภาพพื้นหลังมากขึ้น เนื้อหาใต้รูปภาพอาจถูกขยาย แต่ใช้ระยะขอบที่แตกต่างกันเพื่อเพิ่มความหลากหลายในเค้าโครง และช่วยในการกำหนดลำดับชั้นของภาพ
เรียงหน้าใหม่
ปรับการโฟลว์ขององค์ประกอบของหน้าให้เหมาะสม
ปรับองค์ประกอบของหน้าเพื่อให้แน่ใจว่าจะแสดงได้ครบถ้วน โดยคำนึงถึงขนาดหน้าต่างและการวางแนวโดยการจัดเรียงเนื้อหาใหม่ ตัวอย่างเช่น เนื้อหาคอลัมน์เดียวในหน้าต่างขนาดเล็กสามารถจัดเรียงใหม่ในหน้าต่างขนาดใหญ่ขึ้นเพื่อแสดงข้อความสองคอลัมน์ได้ เทคนิคนี้ช่วยให้สามารถแสดงเนื้อหา "ครึ่งหน้าบน" ได้มากขึ้น
แสดง/ซ่อน
ปรับเนื้อหาให้เหมาะสมสำหรับขนาดหน้าต่างและการวางแนว
แสดงหรือซ่อนองค์ประกอบของหน้าเพื่อปรับเนื้อหาให้เหมาะสมกับขนาดหน้าต่างและการวางแนว เทคนิคการตอบสนองนี้จะปรับแต่งปริมาณข้อมูลให้เหมาะกับบริบทในการรับชม ตัวอย่างเช่น หมวดหมู่ที่ปรากฏบนหน้าจอขนาดเล็กอาจแสดงข้อมูลเมตาที่จำกัด เช่น รูปภาพ ชื่อ และลิงก์ เพื่อให้มองเห็นข้อมูลอื่นได้เพื่อช่วยให้ผู้ใช้มุ่งเน้น บนหน้าจอที่ใหญ่ขึ้น หมวดหมู่สามารถแสดงข้อมูลเมตาเพิ่มเติม เช่น บุคคล วันที่ และคำอธิบายสั้นๆ ในขณะที่ยังคงเหมาะสมในวิวพอร์ต
การแก้ไขสถาปัตยกรรม
แยกหรือยุบองค์ประกอบหน้าและเนื้อหาเพื่อเน้นไปที่ข้อมูลและการดำเนินการที่สำคัญ
แนวทางนี้คล้ายกับการปฏิบัติตาม "การเปิดเผยข้อมูลแบบก้าวหน้า" ในการออกแบบของคุณ แต่สำหรับขนาดหน้าต่างและการวางแนวที่แตกต่างกัน ตัวอย่างเช่น การขยายหน้าต่างทำให้สามารถแสดงรายการของรายการถัดจากรายละเอียดได้ ลิงก์ภาพระหว่างเนื้อหานี้ทำให้ผู้ใช้สามารถเลือกรายการอื่นได้อย่างง่ายดาย บนหน้าจอขนาดเล็ก โฟกัสจะยังคงอยู่ที่การแสดงข้อมูลสำคัญ
สร้างเมทริกซ์เบรกพอยต์
เมทริกซ์เบรกพอยต์ทำหน้าที่เป็นภาพกราฟิกที่แสดงลักษณะการทำงานในการตอบสนองหรือการปรับการออกแบบแอปพลิเคชันในขนาดหน้าจอและการวางแนวที่แตกต่างกัน โดยทั่วไปจะแสดงตารางหรือเค้าโครงที่มีโครงสร้างซึ่งมีรายละเอียดการตอบสนองของการออกแบบที่เบรกพอยต์ต่างๆ แต่ละส่วนสอดคล้องกับความกว้างของหน้าจอที่แตกต่างกัน โดยให้ข้อมูลเชิงลึกเกี่ยวกับโครงสร้าง การออกแบบ และฟังก์ชันการทำงานของการออกแบบ เมทริกซ์เบรกพอยต์ครอบคลุมการพิจารณาความกว้างของหน้าจอ การวางแนววิวพอร์ต องค์ประกอบการออกแบบ โครงสร้างเค้าโครง การนำเสนอเนื้อหา การนำทาง สื่อ และส่วนประกอบเชิงโต้ตอบ เพื่อแสดงให้เห็นว่าการออกแบบของเว็บไซต์หรือแอปตอบสนองอย่างไรในขนาดหน้าจอและการวางแนวที่แตกต่างกัน วิธีการนี้ไม่เพียงแต่ช่วยสรุปการออกแบบของแต่ละหน้าจอ แต่ยังช่วยให้การใช้งานง่ายขึ้นเมื่อมีการติดตามและสื่อสารการเปลี่ยนแปลงคุณสมบัติของส่วนประกอบหลักอย่างชัดเจน
การอำนวยความสะดวก Power Platform
เค้าโครงฟอร์มของแอปแบบจำลองได้รับการกำหนดค่าโดยใช้ Power Apps Studio ตัวออกแบบฟอร์ม อนุญาตให้ผู้สร้างเพิ่มองค์ประกอบในโครงสร้างตาราง ซึ่งช่วยให้หน้าแบบฟอร์มตอบสนองโดยธรรมชาติ ส่วนประกอบที่กำหนดเองแบบฝัง เช่น หน้าแบบกำหนดเอง, ส่วนประกอบพื้นที่ทำงานแบบฝัง และ ส่วนประกอบโค้ด Power Apps Component Framework จำเป็นต้องรวมพฤติกรรมแบบตอบสนองในการใช้งาน ตัวอย่างเช่น เพจแบบกำหนดเองต้องใช้พฤติกรรมตอบสนองในลักษณะเดียวกับแอปพื้นที่ทำงานเพียงอย่างเดียวเพื่อให้ทำงานได้อย่างถูกต้อง
แอปพื้นที่ทำงานจำเป็นต้องมีการกำหนดค่าที่ชัดเจนสำหรับแต่ละองค์ประกอบเพื่อ ปรับใช้พฤติกรรมการตอบสนอง ช่วยให้สามารถควบคุมประสบการณ์ได้มากขึ้น ขนาดหน้าจอจะกำหนดตามคำจำกัดความของแอป ซึ่งสามารถอ้างอิงเพื่อกำหนดตำแหน่ง พฤติกรรม การมองเห็น และคุณสมบัติอื่นๆ ที่เกี่ยวข้อง