คู่มือนี้จะช่วยในการเริ่มต้นออกแบบ Android โดยการแปลการออกแบบ iOS สำหรับอุปกรณ์เคลื่อนที่ที่มีอยู่เป็น Android โดยใช้รูปแบบ UX พื้นฐานของ Android พร้อมกับ Material Design
จัดโครงร่างเพื่อความเท่าเทียมกันในการออกแบบและจัดลำดับเพื่อประสิทธิภาพ หากคุณใช้ระบบการออกแบบพื้นฐานที่แชร์ร่วมกัน คุณสามารถแปลการออกแบบด้วยระบบของคุณเองแทน Material 3 ได้ ทั้ง Android และ iOS ยึดมั่นในแนวคิดที่ว่าเนื้อหาต้องมาเป็นอันดับแรก
หลังจากนั้น การสร้างแบรนด์จะแสดงออกมาในรูปแบบสี แบบอักษร และรูปร่าง ซึ่งไม่เพียงแต่ช่วยให้เนื้อหาอ่านง่ายขึ้นเท่านั้น แต่ยังทำให้การสร้างความสอดคล้องกันทำได้ง่ายขึ้นด้วย
เริ่มต้นด้วยการออกแบบ iOS
ก่อนที่จะเริ่ม ให้คัดลอกแอป iOS แอป iOS แบ่งออกเป็น 3 ส่วน ได้แก่ แถบ มุมมอง และการควบคุม คุณสามารถใช้โครงสร้างนี้เพื่อดำเนินการแปล โดยจัดรูปแบบเป็นขั้นตอนสุดท้าย
1. ลบ UI ของระบบ iOS
ลบแถบสถานะและตัวบ่งชี้หน้าแรก ตอนนี้การดำเนินการนี้ทำได้ง่ายขึ้น
2. ปรับขนาดเฟรม
คุณสามารถใช้ขนาดกะทัดรัดของ Android ซึ่งมีขนาด 412 dp แต่ควรพิจารณาอุปกรณ์หลากหลายรุ่นแม้จะอยู่ในขนาดคลาสหน้าต่างเดียวกัน เช่น ทดสอบที่ 360 dp เพื่อ รองรับหน้าจอขนาดเล็ก และปรับขนาดคลาสหน้าต่างทั้งหมด
3. แทนที่ด้วยแถบระบบของ Android
UI ของระบบ Android อาจแตกต่างกันไปตามอุปกรณ์และการตั้งค่าของผู้ใช้ แต่การแสดง UI ของระบบเริ่มต้นจะช่วยให้การออกแบบของคุณมีบริบทมากขึ้น วางแถบการแจ้งเตือนไว้ที่ด้านบน และวางการไปยังส่วนต่างๆ ด้วยท่าทางสัมผัสหรือแถบนำทาง 3 ปุ่มไว้ที่ด้านล่าง
ดูข้อมูลเพิ่มเติมได้ที่ แถบระบบของ Android
4. ขึ้นอยู่กับการนำทาง
เปลี่ยน Tabbar (การนำทางด้านล่าง) เป็นแถบนำทาง
กลับไปดูแผนผังเส้นทางการใช้งาน แอป iOS ของคุณใช้เมนู "เพิ่มเติม" หรือไม่ (แนวทางปฏิบัติแนะนำของ HIG แนะนำว่าไม่ควรใช้รูปแบบนี้) จำกัดรายการไว้ไม่เกิน 5 รายการ ให้แถบนำทางด้านล่างเป็นการนำทางหลัก ประเมินว่ารายการรอง เช่น โปรไฟล์หรือการตั้งค่า สามารถย้ายไปไว้ใน Top App Bar ได้หรือไม่ หรือคุณอาจมีการกระทำหลักที่สามารถแปลเป็นการกระทำลอยได้
การนำทางหลักควรปรากฏในมุมมองระดับบนสุดเสมอ (ระดับบนสุดของส่วนในแผนผังเส้นทางการใช้งาน) หน้าจอสำหรับเด็ก (ทุกอย่างที่อยู่ใต้มุมมองสำหรับพ่อแม่) สามารถรวมการนำทางหลักได้หากอยู่ในลำดับชั้นการนำทางที่สูงกว่าและไม่ใช่โมดัล
อัปเดตแถบนำทางด้านล่างด้วยไอคอนและป้ายกำกับที่เหมาะสม ทั้ง 2 แพลตฟอร์มหลีกเลี่ยงการเคลื่อนไหวด้านข้างระหว่างปลายทางการนำทาง
5. แถบนำทางเป็น Top App Bar
แบ่งออกเป็นส่วนๆ โดยเริ่มจากมุมมองระดับบนสุดก่อน แล้วจึงตามด้วยมุมมองระดับล่าง App Bar ประกอบด้วยด้านซ้าย ได้แก่ การนำทางและชื่อ และด้านขวา ได้แก่ รายการการกระทำ
หากแอปใช้เมนู Nav Drawer แทนแถบนำทางด้านล่าง ไอคอน Drawer จะแสดงในมุมมองระดับบนสุดทั้งหมด
หากแอปไม่มี Rail หรือ Drawer มุมมองระดับบนสุดจะไม่แสดง ไอคอนการนำทางหลัก
ชื่อจะจัดชิดซ้ายโดยค่าเริ่มต้นใน App Bar สำหรับ Android
มุมมองระดับล่างจะมีลูกศรขึ้นในตำแหน่งไอคอนการนำทาง อย่าสับสนกับปุ่มย้อนกลับ ลูกศรขึ้นจะย้ายผู้ใช้ขึ้นไป 1 ระดับผ่านลำดับชั้นการนำทางของแอปในเส้นทางการใช้งานของผู้ใช้ ขณะที่ปุ่มย้อนกลับหรือการปัดจากขอบจะอยู่ในการนำทางของระบบ ซึ่งจะย้ายผู้ใช้กลับไปและอาจนำผู้ใช้ออกจากแอปด้วย
แล้วมุมมองโมดัลล่ะ สำหรับโมดัลแบบเต็มหน้าจอ (เช่น โปรแกรมเล่นวิดีโอและรูปภาพ) โมดัลนี้จะคล้ายกับ App Bar ของมุมมองระดับล่าง ยกเว้นไอคอนการนำทางควรเปลี่ยนเป็นไอคอนปิด ซึ่งจะปิดโมดัล
6. โมดัลมากขึ้นเล็กน้อย
เริ่มต้นด้วยมุมมองโมดัลขนาดใหญ่ ซึ่งเหมาะที่สุดสำหรับการดึงดูดความสนใจของผู้ใช้ไปที่งาน ใน iOS โมดัลเหล่านี้มักจะปรากฏเป็นชีต ซึ่งผู้ใช้สามารถปัดลงได้
สลับ App Bar ให้เสร็จ สำหรับโมดัลชีตของ iOS ให้สลับส่วนชีตด้านบนและพื้นหลังที่แสดงบางส่วนด้วย App Bar ของกล่องโต้ตอบแบบเต็มหน้าจอ
โบนัส: ลองดูว่าชีตโมดัลของ iOS รายการใดที่สามารถแปล เป็น Bottom Sheet ได้
ชีตการกระทำและชีตกิจกรรมเป็น Bottom Sheet (ตอนนี้คุณแปลชีตการแชร์ได้แล้วด้วย)
สำหรับการแจ้งเตือน ให้ใช้กล่องโต้ตอบของระบบ หากคุณใช้กล่องโต้ตอบเหล่านี้สำหรับข้อมูลสำคัญ ที่ต้องการให้ผู้ใช้รับทราบในบางวิธี ให้สลับกล่องโต้ตอบเหล่านี้เป็น กล่องโต้ตอบของระบบ อย่าลืมสลับอินพุตและตัวเลือกในตอนนี้ด้วย
7. เนื้อหาที่อยู่ระดับเดียวกัน
แท็บหรือ ViewPager หรือแท็บแบบปัด หากคุณใช้การควบคุมแบบแบ่งส่วนใน iOS การควบคุมเหล่านี้จะแปลเป็นแท็บใน Android ทั้ง 2 อย่างทำหน้าที่เป็นวิธีในการกรองระหว่างมุมมองข้อมูลที่คล้ายกันแต่ไม่เหมือนกัน โดยปกติแล้วแท็บ Android จะแนบอยู่กับ App Bar และมีข้อดีเพิ่มเติมคือสามารถปัดระหว่างเนื้อหาได้
8. เนื้อหาและการควบคุม
เนื้อหาส่วนใหญ่ของคุณอาจมีการปรับขนาดแล้ว ทั้งนี้ขึ้นอยู่กับวิธีที่คุณตั้งค่าข้อจำกัดหรือลักษณะการทำงานของการปรับขนาด แต่ให้ใช้เวลานี้ในการตั้งค่าระยะขอบ 16dp เป็นมาตรฐานที่ดีสำหรับหน้าจอขนาดเล็ก
กริดพื้นฐานgridอิงตามกริด 8dp สำหรับคอมโพเนนต์ และ 4dp สำหรับแบบอักษร และไอคอน กริด 8pt ทำงานได้ดีใน iOS ดังนั้นคุณอาจพิจารณาใช้กริดนี้เป็นจุดเริ่มต้นสำหรับทั้ง 2 แพลตฟอร์ม
การควบคุม เปลี่ยนปุ่มเปิด/ปิดเหล่านั้นเป็นปุ่มเปิด/ปิดของ Android ใช้ช่องทำเครื่องหมายและปุ่มตัวเลือกของ Android Android มีองค์ประกอบเหล่านี้ทั้งหมด
หากคุณมีแบบฟอร์ม ให้สลับช่องข้อความของ iOS เป็นช่องข้อความของ Android Material มีตัวเลือกต่างๆ เช่น แบบร่างหรือแบบเติม ดังนั้นให้เลือกตัวเลือกที่เหมาะกับการสร้างแบรนด์ของคุณมากที่สุด
รายการ Material มีความแตกต่างบางอย่างเมื่อเทียบกับเซลล์ตารางของ iOS ดังนี้
- ใช้เส้นคั่นอย่างประหยัด
- ไม่ใช้ตัวบ่งชี้ในรายการเพื่อช่วยลดสิ่งรบกวนสายตา
- ขนาดเป็นไปตามกริด 8dp
9. รูปแบบ
สี: สี UI ประกอบด้วยสีเน้น สีเชิงความหมาย และสีพื้นผิวที่ประกอบกัน เป็น รูปแบบสี ระบบจะใช้สีเหล่านี้กับ UI ตามบทบาทของสี
แบบอักษร: หากใช้แบบอักษรของระบบ ให้แทนที่ San Francisco Roboto เป็นแบบอักษรของระบบเริ่มต้นสำหรับ Android อย่างไรก็ตาม เราขอแนะนำให้คุณแสดงสไตล์ที่เป็นเอกลักษณ์ของแบรนด์ด้วยการกำหนดธีมและแบบอักษร Google ที่ดาวน์โหลดได้
ไอคอน: เช่นกัน หากใช้สัญลักษณ์ SF ให้ตรวจสอบอีกครั้งว่าสัญลักษณ์ทั้งหมดได้รับการแปลงเป็นไอคอนหรือสัญลักษณ์ Material แล้ว เลือกรูปแบบที่เหมาะกับแบรนด์ของคุณ คุณทราบไหมว่าคุณสามารถใช้ไอคอน Material ในทุกแพลตฟอร์ม
การเคลื่อนไหว: Android และ iOS มีการออกแบบการเคลื่อนไหวที่แตกต่างกัน ซึ่งควรนำไปใช้กับแต่ละแพลตฟอร์ม การเคลื่อนไหวของ Material ให้ข้อมูล โฟกัส และ แสดงออก Ripple เป็นการไฮไลต์ที่โดดเด่นซึ่งใช้ในคอมโพเนนต์เพื่อแสดงความคิดเห็นเมื่อสัมผัส ระบบการเคลื่อนไหวคือชุดรูปแบบการเปลี่ยนภาพเพื่อใช้ประโยชน์จากการเปลี่ยนรูปแบบคอนเทนเนอร์ แกนที่แชร์ การจางผ่าน และภาพเคลื่อนไหวแบบจาง พิจารณาว่าองค์ประกอบในการออกแบบของคุณมีคอนเทนเนอร์แบบถาวรหรือไม่ ความสัมพันธ์ระหว่างองค์ประกอบ และวิธีที่องค์ประกอบต้องเข้าหรือออก
10. จัดให้เป็นระเบียบ
หากคุณกำลังแปลต้นแบบ นี่เป็นจุดที่ดีในการปรับเปลี่ยน กลับไปดูการนำทางหลัก จากนั้นดู App Bar โดยอย่าลืมความแตกต่างระหว่าง "ขึ้น" กับ "กลับ" และตรวจสอบว่าได้เลือกการเปลี่ยนหน้าเว็บที่เหมาะกับ Android แล้ว (กล่าวถึงในขั้นตอนที่ 9)
คุณควรมีต้นแบบที่ทำงานได้อย่างสมบูรณ์พร้อมใช้งาน และเนื่องจากคุณได้ปรับขนาดแล้ว ต้นแบบจึงพร้อมสำหรับการส่งมอบ
คู่มือรูปแบบและคอมโพเนนต์
หากคุณมีระบบการออกแบบหรือคู่มือแนะนำรูปแบบที่มีอยู่ คุณอาจมีรูปแบบพื้นฐานของคุณเอง (สี แบบอักษร ไอคอน รูปร่าง) ที่สามารถใช้ร่วมกับ Material Design ได้เช่นเดียวกับที่คุณใช้ร่วมกับคำแนะนำของ iOS การใช้การกำหนดธีม Material จะช่วยให้คุณปรับแต่งคอมโพเนนต์ Material ด้วยสไตล์ที่เป็นเอกลักษณ์ของแบรนด์ด้วยสี แบบอักษร และรูปร่างได้
การมีหลักเกณฑ์เฉพาะแพลตฟอร์มไม่ใช่เรื่องแปลกสำหรับผลิตภัณฑ์หลายแพลตฟอร์ม และอาจทำให้ระบบการออกแบบของคุณเน้นผู้ใช้มากขึ้น
สุดท้ายนี้ หากคุณทำงานโดยไม่มีระบบการออกแบบหรือคู่มือแนะนำรูปแบบ โปรดทราบว่าไม่ใช่ทุกแอปหรือผลิตภัณฑ์ที่จะต้องมีระบบการออกแบบที่กำหนดเองแบบเต็ม ลองสร้างคู่มือแนะนำรูปแบบ 1 หน้า คู่มือแนะนำรูปแบบคือเอกสารที่ระบุข้อกำหนดพื้นฐานสำหรับการออกแบบ หลักเกณฑ์การใช้แบรนด์มักจะมีคู่มือแนะนำรูปแบบอยู่ภายใน
คุณสามารถคัดลอกคู่มือนี้สำหรับ Android และใช้เป็นแหล่งที่มาสำหรับการอัปเดตรูปแบบ (หรือสัญลักษณ์ คอมโพเนนต์ หรือไลบรารี)