สร้างแอป
จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน
บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ
การสร้างแอปสื่อสำหรับ Android Automotive OS ประกอบด้วยงานออกแบบพื้นฐาน 6 งาน
ส่วนนี้จะแสดงภาพรวมของงานเหล่านั้น นอกจากนี้ยังอธิบายวิธีที่ทั้งผู้ผลิตรถยนต์และนักพัฒนาแอปมีส่วนร่วมในประสบการณ์การใช้งานแอปสื่อด้วย
ภาพรวมของงาน
เนื่องจากการออกแบบแอปสื่อส่วนใหญ่จะขึ้นอยู่กับผู้ผลิตรถยนต์ งานเกี่ยวกับการออกแบบสำหรับนักพัฒนาแอปจึงค่อนข้างเรียบง่าย
งานพื้นฐาน 6 งานสำหรับนักพัฒนาแอปมีดังนี้
1) วางแผนแท็บการนำทาง: เลือกมุมมองระดับบนสุดของเนื้อหาได้สูงสุด 4 มุมมอง และเลือกไอคอนหรือป้ายกำกับสำหรับแท็บการนำทาง
2) วางแผนมุมมองการท่องเว็บ: วางแผนว่าจะจัดระเบียบและจัดรูปแบบมุมมองเนื้อหาระดับบนสุดและระดับล่าง (แบบตารางกริดหรือรายการ) อย่างไร
3) ปรับแต่งส่วนควบคุมการเล่น: ตัดสินใจว่าคุณต้องการระบุการทำงานและไอคอนที่กำหนดเองหรือไม่ และจะใช้คิวหรือไม่
4) ปรับขั้นตอนการลงชื่อเข้าใช้: ปรับเปลี่ยนโค้ดที่ระบุเพื่อสร้างขั้นตอนการลงชื่อเข้าใช้สําหรับแอป หากจําเป็นต้องลงชื่อเข้าใช้
5) การตั้งค่าการออกแบบ: ออกแบบหน้าจอการตั้งค่าสำหรับแอป หากจำเป็นต้องตั้งค่า
6) ระบุองค์ประกอบในการสร้างแบรนด์: ระบุไอคอนแอปและสีเฉพาะจุดเพื่อให้ผู้ผลิตรถยนต์เป็นตัวแทนแบรนด์ของคุณบนหน้าจอ
ใช้ลิงก์ด้านบนเพื่อเข้าถึงคำแนะนำเพิ่มเติมเกี่ยวกับงานแต่ละงานโดยละเอียด โปรดดูข้อมูลสรุปเกี่ยวกับองค์ประกอบการออกแบบที่คุณต้องระบุในรายการตรวจสอบ
การแบ่งบทบาท
ตารางด้านล่างสรุปบทบาทในการออกแบบของผู้ผลิตรถยนต์และนักพัฒนาแอปในการทำให้ประสบการณ์การใช้งานแอปสื่อเป็นอันหนึ่งอันเดียวกัน
แง่มุมต่างๆ ของประสบการณ์การใช้งานสื่อ |
บทบาทการออกแบบของผู้ผลิตรถยนต์ |
บทบาทการออกแบบของนักพัฒนาแอป |
การไปยังส่วนต่างๆ ในแอปสื่อ |
เลือกตำแหน่งในแถบแอป และรองรับการไปยังส่วนต่างๆ และการควบคุมของแอปที่อาจปรากฏในแถบแอปได้
|
ตัดสินใจเลือกมุมมองเนื้อหาระดับบนสุดที่จะแสดงในแท็บของแถบแอป และแสดงไอคอนและป้ายกำกับตามต้องการ
ไปที่แท็บการนำทางของแผน
|
เรียกดูรายละเอียดเนื้อหา |
กำหนดขนาดและเนื้อหาของตารางกริดหรือรายการ และใช้ส่วนหัวของแอปที่ระดับเนื้อหาต่ำกว่า
|
กำหนดรูปแบบ (ตารางกริดหรือรายการ) และการจัดการเนื้อหาสื่อที่เรียกดูได้ในแต่ละระดับ
ไปที่แผนมุมมองการท่องเว็บ
|
กำลังเล่นสื่อ |
ใช้มุมมองการเล่นและแถบควบคุมที่ย่อขนาดลงด้วยข้อมูลเมตาของสื่อและการควบคุมการเล่นที่เหมาะสม รวมถึงการควบคุมการทำงานที่กำหนดเองต่างๆ ในแอป มอบค่าคิวในมุมมองการเล่นและการจัดรูปแบบสำหรับคิว
|
เลือกว่าจะใช้การดำเนินการที่กำหนดเองในแถบควบคุมหรือไม่ และระบุไอคอนสำหรับการดำเนินการดังกล่าว ตัดสินใจว่าจะใช้คิวหรือไม่และจะระบุตัวระบุสำหรับแทร็กที่เล่นอยู่ในปัจจุบันหรือไม่
ไปที่ปรับแต่งตัวควบคุมการเล่น
|
การลงชื่อเข้าใช้ การตั้งค่า และการค้นหา |
มอบพื้นที่สำหรับการค้นหาและการตั้งค่าในแถบแอป ออกแบบแป้นพิมพ์การค้นหา และเชื่อมต่อผู้ใช้กับหน้าจอลงชื่อเข้าใช้ได้ตามต้องการ
|
ระบุขั้นตอนการลงชื่อเข้าใช้ (ดัดแปลงจากโค้ดตัวอย่าง) และหน้าจอการตั้งค่า หากจำเป็น
โปรดไปที่ปรับขั้นตอนการลงชื่อเข้าใช้และออกแบบการลงชื่อเข้าใช้และการตั้งค่า
|
การระบุแหล่งที่มาของแบรนด์ |
แสดงไอคอนแอปในหน้าจอเนื้อหาทั้งหมดและเลือกตําแหน่งที่จะใช้สีของแอปของบุคคลที่สามเป็นสีเฉพาะจุด
|
ระบุไอคอนแอปและระบุสีเฉพาะจุด
ไปที่ใส่องค์ประกอบแบรนด์
|
เนื้อหาของหน้าเว็บนี้ได้รับอนุญาตภายใต้ใบอนุญาตที่ต้องระบุที่มาของครีเอทีฟคอมมอนส์ 4.0 และตัวอย่างโค้ดได้รับอนุญาตภายใต้ใบอนุญาต Apache 2.0 เว้นแต่จะระบุไว้เป็นอย่างอื่น โปรดดูรายละเอียดที่นโยบายเว็บไซต์ Google Developers Java เป็นเครื่องหมายการค้าจดทะเบียนของ Oracle และ/หรือบริษัทในเครือ
อัปเดตล่าสุด 2025-07-25 UTC
[null,null,["อัปเดตล่าสุด 2025-07-25 UTC"],[[["\u003cp\u003eDeveloping media apps for Android Automotive OS involves six key design tasks for app developers, including planning navigation and browsing, customizing playback, adapting sign-in, designing settings, and providing branding elements.\u003c/p\u003e\n"],["\u003cp\u003eCar makers handle the broader user interface and experience while app developers focus on content presentation and app-specific features.\u003c/p\u003e\n"],["\u003cp\u003eApp developers have specific responsibilities for navigation tabs, browsing views, playback controls, sign-in flow, settings design, and branding elements.\u003c/p\u003e\n"],["\u003cp\u003eResources are available for detailed guidance on each design task, including links to specific sections and a design checklist.\u003c/p\u003e\n"],["\u003cp\u003eCollaboration between car makers and app developers is crucial to ensure a seamless and unified media experience for users in vehicles.\u003c/p\u003e\n"]]],[],null,["# Create your app\n\n\u003cbr /\u003e\n\nCreating your media app for Android Automotive OS involves 6 basic design tasks.\n\nThis section provides an overview of those tasks. It also describes how both car makers and app developers contribute to the media app experience.\n\n*** ** * ** ***\n\nTask overview\n-------------\n\nBecause most of media app design is up to car makers, the design-related tasks for app developers are relatively simple.\n\nHere are the 6 basic tasks for app developers:\n\n[**1) Plan navigation tabs:**](/cars/design/automotive-os/apps/media/create-your-app/plan-navigation-tabs) Choose up to 4 top-level views of content and decide on icons or labels for navigation tabs.\n\n[**2) Plan browsing views:**](/cars/design/automotive-os/apps/media/create-your-app/plan-browsing-views) Plan how top-level and lower-level views of content will be organized and formatted (grid or list?).\n\n[**3) Customize playback controls:**](/cars/design/automotive-os/apps/media/create-your-app/customize-playback) Decide whether you want to provide custom actions and icons and whether to implement a queue.\n\n[**4) Adapt sign-in flow:**](/cars/design/automotive-os/apps/media/create-your-app/adapt-signin-flow) Adapt the provided code to create a sign-in flow for your app, if it requires sign-in.\n\n[**5) Design settings:**](/cars/design/automotive-os/apps/media/create-your-app/design-settings) Design settings screens for your app, if settings are needed.\n\n[**6) Provide branding elements:**](/cars/design/automotive-os/apps/media/create-your-app/provide-branding-elements) Provide your app icon and accent color, so that car makers can represent your brand onscreen.\n\nUse the links above to access more detailed guidance about each task. For a summary of the design elements you'll need to provide, consult the [checklist](/cars/design/automotive-os/apps/media/app-checklist).\n\n*** ** * ** ***\n\nDivision of roles\n-----------------\n\nThe table below summarizes the design roles of car makers and app developers in ensuring a unified media app experience.\n\n| Aspect of the media experience | Car maker's design role | App developer's design role |\n|---------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| **Navigating media apps** | Decide where the app bar goes and support app navigation and controls that can appear in the app bar | Decide which top-level content views to represent in the app bar's tabs and provide icons and labeling as needed Visit [Plan navigation tabs](/cars/design/automotive-os/apps/media/create-your-app/plan-navigation-tabs) |\n| **Browsing content details** | Determine size and content of grid or list items and implement app header at lower levels of content | Determine format (grid or list) and organization for browsable media content at each level Visit [Plan browsing views](/cars/design/automotive-os/apps/media/create-your-app/plan-browsing-views) |\n| **Playing media** | Implement playback view and minimized control bar with appropriate media metadata and playback controls, including controls for any custom actions in the app. Provide a queue affordance in playback view and styling for the queue. | Decide whether to implement custom actions on the control bar, and provide icons for them. Decide whether to implement a queue and whether to provide an indicator for the currently playing track. Visit [Customize playback controls](/cars/design/automotive-os/apps/media/create-your-app/customize-playback) |\n| **Sign-in, settings \\& search** | Provide affordances for search and settings on the app bar bar, design search keyboards, and connect users to sign-in screens as needed | Provide sign-in flow (adapted from sample code) and settings screens if needed Visit [Adapt sign-in flow](/cars/design/automotive-os/apps/media/create-your-app/adapt-signin-flow) and [Design sign-in \\& settings](/cars/design/automotive-os/apps/media/create-your-app/design-settings) |\n| **Brand attribution** | Display the app icon on all content screens and choose where to apply the third-party app color as an accent | Provide app icon and specify accent color Visit [Provide branding elements](/cars/design/automotive-os/apps/media/create-your-app/provide-branding-elements) |"]]