เริ่มต้นใช้งานบนเดสก์ท็อป

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

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

คิดในแผง

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

เครื่องชั่งน้ำหนัก

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

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

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

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

เนื้อหาและองค์ประกอบ UI

เมื่อจัดกลุ่มและปรับขนาดเนื้อหาแล้ว UI ของเนื้อหาบางส่วนอาจเปลี่ยนหรือ อัปเดตเพื่อให้เหมาะกับเบรกพอยต์มากขึ้น

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

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

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

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

พิจารณาอนุญาตให้ผู้ใช้ปรับเลย์เอาต์ตามที่ต้องการเพื่อ ให้อ่านง่ายและเพิ่มประสิทธิภาพสูงสุด

การนำทาง

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

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

ความหนาแน่น

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

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

อินพุต

อินพุตเพิ่มเติมหมายถึงรูปแบบการโต้ตอบเพิ่มเติมสำหรับผู้ใช้

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

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

รัฐเพิ่มเติมจะช่วยเพิ่มประสิทธิภาพได้

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