Penerima memutar konten dan mencerminkan statusnya kepada pengguna. Penerima harus segera merespons tindakan di aplikasi pengirim . Misalnya, saat dijeda di penerima, konten akan menampilkan ikon jeda dan saat pengguna menekan tombol putar di aplikasi pengirim, penerima akan mulai memutar konten dan menghapus ikon jeda.
Contoh masukan UI penerima:
- Sedang diputar
- Dijeda
- Posisi / pencarian pemutaran
- Buffering
UI Penerima
Wajib
A Tempatkan sebagian besar elemen UI di 1/4 bagian bawah layar
dan pertahankan konsistensinya dengan UX Anda yang lainnya.
B Tidak menampilkan elemen sebagai kontrol interaktif. Misalnya, jangan mereproduksi UI pengirim di UI penerima.
Praktik terbaik
- Gunakan transisi (memudar), transparansi, dan nuansa untuk melembutkan efek visual.
- Pertimbangkan fakta bahwa pengguna ingin melihat konten sebanyak mungkin. Pengguna akan sering menjeda konten untuk memeriksanya, sehingga menghilangkan UI yang tidak perlu jika memungkinkan.
Android
UI Pengirim
![](https://developers.google.cn/static/cast/images/a/sender-persistent-control2.png?authuser=3&hl=id)
UI Penerima
![](https://developers.google.cn/static/cast/images/r/receiver-ui-elements1_a.png?authuser=3&hl=id)
iOS
UI Pengirim
![](https://developers.google.cn/static/cast/images/i/sender-persistent-control2.png?authuser=3&hl=id)
UI Penerima
![](https://developers.google.cn/static/cast/images/r/receiver-ui-elements1_a.png?authuser=3&hl=id)
Chrome
UI Pengirim
![UI Pengirim](https://developers.google.cn/static/cast/images/w/sender-persistent-control2.png?authuser=3&hl=id)
UI Penerima
![](https://developers.google.cn/static/cast/images/r/receiver-ui-elements1_a.png?authuser=3&hl=id)
Aplikasi penerima tidak ada aktivitas
Layar tidak ada aktivitas ditampilkan pada penerima, saat penerima terhubung ke pengirim tetapi tidak melakukan transmisi.
Wajib
A Identifikasi aplikasi penerima yang dimuat
Praktik terbaik
- Gunakan layar tidak ada aktivitas untuk mempromosikan konten atau fitur dari aplikasi pengirim.
- Ubah konten setiap 30-60 detik untuk menampilkan lebih banyak konten dan mencegah layar terbakar.
- Putuskan koneksi dari aplikasi penerima dan hentikan aplikasi jika tidak ada aktivitas selama 5 menit. Jika dihentikan, layar utama penerima akan muncul dan akan membantu mencegah layar terbakar.
Android
Dialog Cast, terhubung tetapi tidak mentransmisikan
![](https://developers.google.cn/static/cast/images/a/sender-cast-menu-connected1.png?authuser=3&hl=id)
Aplikasi penerima dimuat / tidak ada aktivitas
![](https://developers.google.cn/static/cast/images/r/receiver-ui-idle1_a.png?authuser=3&hl=id)
iOS
Dialog Cast, terhubung tetapi tidak mentransmisikan
![](https://developers.google.cn/static/cast/images/i/sender-cast-menu-connected1.png?authuser=3&hl=id)
Aplikasi penerima dimuat / tidak ada aktivitas
![](https://developers.google.cn/static/cast/images/r/receiver-ui-idle1_a.png?authuser=3&hl=id)
Pemuatan aplikasi penerima
Saat pengguna terhubung ke penerima, aplikasi penerima harus dimuat terlebih dahulu sebelum dapat menampilkan status tidak ada aktivitas aplikasi atau mulai memutar konten.
Wajib
A Identifikasi aplikasi penerima mana yang sedang dimuat dengan menampilkan
logo aplikasi
B Identifikasi bahwa aplikasi penerima sedang dimuat dengan menampilkan
indikator lingkaran berputar pemuatan animasi
Android
Pengirim terhubung
![](https://developers.google.cn/static/cast/images/a/sender-cast-icon-states4.png?authuser=3&hl=id)
Aplikasi penerima sedang dimuat
![](https://developers.google.cn/static/cast/images/r/receiver-player-loading1_a.gif?authuser=3&hl=id)
iOS
Pengirim terhubung
![](https://developers.google.cn/static/cast/images/i/sender-cast-icon-states4.png?authuser=3&hl=id)
Aplikasi penerima sedang dimuat
![](https://developers.google.cn/static/cast/images/r/receiver-player-loading1_a.gif?authuser=3&hl=id)
Chrome
Pengirim terhubung
![Pengirim terhubung](https://developers.google.cn/static/cast/images/w/sender-cast-icon-states4.png?authuser=3&hl=id)
Aplikasi penerima sedang dimuat
![](https://developers.google.cn/static/cast/images/r/receiver-player-loading1_a.gif?authuser=3&hl=id)
Pemuatan konten penerima
Setelah aplikasi penerima dimuat, konten dapat memulai streaming ke penerima.
Wajib
A Identifikasi konten yang sedang dimuat dengan menampilkan
judul konten atau ilustrasi
B Identifikasi bahwa konten sedang dimuat dengan menampilkan
indikator lingkaran berputar pemuatan animasi
Praktik terbaik
Saat melanjutkan konten yang dijeda, putar ulang pemutaran selama 5-10 detik agar penonton tidak melewatkan apa pun
selama transisi dari pengirim ke penerima.
Android
Memuat konten pengirim
![](https://developers.google.cn/static/cast/images/a/sender-control-elements1.gif?authuser=3&hl=id)
Memuat konten penerima
![](https://developers.google.cn/static/cast/images/r/receiver-content-loading1_a.gif?authuser=3&hl=id)
iOS
Memuat konten pengirim
![](https://developers.google.cn/static/cast/images/i/sender-control-elements1.gif?authuser=3&hl=id)
Memuat konten penerima
![](https://developers.google.cn/static/cast/images/r/receiver-content-loading1_a.gif?authuser=3&hl=id)
Chrome
Memuat konten pengirim
![](https://developers.google.cn/static/cast/images/w/sender-control-elements1.gif?authuser=3&hl=id)
Memuat konten penerima
![](https://developers.google.cn/static/cast/images/r/receiver-content-loading1_a.gif?authuser=3&hl=id)
Pemutaran penerima
Wajib
A Identifikasi konten yang sedang diputar saat konten dimulai
B Identifikasi posisi pemutaran saat posisi disesuaikan
C Identifikasi bahwa penerima mencari konten saat
posisi pemutaran diubah, tetapi belum diputar
Android
Pengirim menyesuaikan posisi pemutaran
![](https://developers.google.cn/static/cast/images/a/sender-control-elements3.gif?authuser=3&hl=id)
Pencarian konten penerima
![](https://developers.google.cn/static/cast/images/r/receiver-ui-seek1_a.gif?authuser=3&hl=id)
iOS
Pengirim menyesuaikan posisi pemutaran
![](https://developers.google.cn/static/cast/images/i/sender-control-elements3.gif?authuser=3&hl=id)
Pencarian konten penerima
![](https://developers.google.cn/static/cast/images/r/receiver-ui-seek1_a.gif?authuser=3&hl=id)
Chrome
Pengirim menyesuaikan posisi pemutaran
![](https://developers.google.cn/static/cast/images/w/sender-control-elements3.gif?authuser=3&hl=id)
Pencarian konten penerima
![](https://developers.google.cn/static/cast/images/r/receiver-ui-seek1_a.gif?authuser=3&hl=id)
Penerima dijeda
Wajib
A Identifikasi bahwa konten dijeda dengan menampilkan ikon
dijeda dan posisi pemutaran
B Identifikasi konten yang dijeda dengan menampilkan judul
atau ilustrasi konten
C Identifikasi aplikasi penerima mana yang dimuat dengan menampilkan
logo aplikasi
Praktik terbaik
- Pengguna akan sering menjeda konten untuk memeriksanya, sehingga UI yang tidak perlu akan memudar saat dijeda selama beberapa detik dengan menampilkan ikon jeda.
- Aplikasi penerima tidak boleh melanjutkan pemutaran konten kecuali jika ada permintaan eksplisit dari pengguna untuk memulai pemutaran seperti melanjutkan pemutaran, atau melewati item dalam antrean.
- Putuskan koneksi dari aplikasi penerima dan hentikan aplikasi jika tidak ada aktivitas selama 20 menit. Jika dihentikan, layar utama penerima akan muncul dan akan membantu mencegah layar terbakar. Simpan lokasi yang dijeda sehingga pengguna dapat melanjutkan pemutaran dari titik tersebut di lain waktu.
Android
Pengirim dijeda
![](https://developers.google.cn/static/cast/images/a/sender-persistent-control2.png?authuser=3&hl=id)
Konten penerima dijeda
![](https://developers.google.cn/static/cast/images/r/receiver-ui-pause1_a.png?authuser=3&hl=id)
Pengirim dijeda
![](https://developers.google.cn/static/cast/images/a/sender-persistent-control2.png?authuser=3&hl=id)
Penerima dijeda, setelah 5 detik
![](https://developers.google.cn/static/cast/images/r/receiver-ui-pause2.png?authuser=3&hl=id)
iOS
Pengirim dijeda
![](https://developers.google.cn/static/cast/images/i/sender-persistent-control2.png?authuser=3&hl=id)
Konten penerima dijeda
![](https://developers.google.cn/static/cast/images/r/receiver-ui-pause1_a.png?authuser=3&hl=id)
Pengirim dijeda
![](https://developers.google.cn/static/cast/images/i/sender-persistent-control2.png?authuser=3&hl=id)
Penerima dijeda, setelah 5 detik
![](https://developers.google.cn/static/cast/images/r/receiver-ui-pause2.png?authuser=3&hl=id)
Chrome
Pengirim dijeda
![](https://developers.google.cn/static/cast/images/w/sender-persistent-control2.jpg?authuser=3&hl=id)
Konten penerima dijeda
![](https://developers.google.cn/static/cast/images/r/receiver-ui-pause1_a.png?authuser=3&hl=id)
Pengirim dijeda
![](https://developers.google.cn/static/cast/images/w/sender-persistent-control2.jpg?authuser=3&hl=id)
Penerima dijeda, setelah 5 detik
![](https://developers.google.cn/static/cast/images/r/receiver-ui-pause2.png?authuser=3&hl=id)
Buffering penerima
Buffering pada penerima terjadi ketika latensi jaringan atau faktor lain menyebabkan penundaan pemutaran.
Wajib
A Identifikasi bahwa penerima melakukan buffering setelah beberapa
detik dengan menampilkan indikator lingkaran berputar buffering. Menunggu beberapa detik untuk menunjukkan buffering akan
mencegah indikator lingkaran berputar buffering terlalu sering muncul dalam kondisi jaringan yang buruk
Praktik terbaik
Identifikasi konten yang buffering jika buffering terus berlanjut setelah 5 detik.
Android
Pengirim menunjukkan buffering penerima
![](https://developers.google.cn/static/cast/images/a/sender-control-elements3.gif?authuser=3&hl=id)
Buffering konten penerima
![](https://developers.google.cn/static/cast/images/r/receiver-ui-buffer1_a.gif?authuser=3&hl=id)
iOS
Pengirim menunjukkan buffering penerima
![](https://developers.google.cn/static/cast/images/i/sender-control-elements3.gif?authuser=3&hl=id)
Buffering konten penerima
![](https://developers.google.cn/static/cast/images/r/receiver-ui-buffer1_a.gif?authuser=3&hl=id)
Chrome
Pengirim menunjukkan buffering penerima
![](https://developers.google.cn/static/cast/images/w/sender-control-elements3.gif?authuser=3&hl=id)
Buffering konten penerima
![](https://developers.google.cn/static/cast/images/r/receiver-ui-buffer1_a.gif?authuser=3&hl=id)
Penerima menghentikan transmisi
Saat pemutaran berhenti atau habis waktunya, UI penerima harus mempromosikan konten atau fitur lain yang tersedia di aplikasi pengirim.
Wajib
A Identifikasi aplikasi penerima yang dimuat atau tidak ada aktivitas dengan
menampilkan logo aplikasi
Praktik terbaik
- Gunakan layar tidak ada aktivitas setelah pemutaran untuk merekomendasikan konten atau fitur dari aplikasi pengirim, berdasarkan konten yang baru saja ditransmisikan
- Mengubah konten layar tidak ada aktivitas setiap 30-60 detik untuk mencegah burn-in (layar berbayang)
- Putuskan koneksi dari aplikasi penerima dan hentikan aplikasi jika tidak ada aktivitas selama 5 menit. Jika dihentikan, layar utama penerima akan muncul dan akan membantu mencegah layar terbakar.
Android
Aplikasi pengirim tidak ada aktivitas
![](https://developers.google.cn/static/cast/images/a/sender-cast-icon-states4.png?authuser=3&hl=id)
Aplikasi penerima tidak ada aktivitas
![](https://developers.google.cn/static/cast/images/r/receiver-ui-complete1_a.png?authuser=3&hl=id)
Pengirim terputus
![](https://developers.google.cn/static/cast/images/a/sender-cast-icon-states2.png?authuser=3&hl=id)
Transmisikan layar utama
![](https://developers.google.cn/static/cast/images/r/receiver-home2.png?authuser=3&hl=id)
iOS
Aplikasi pengirim tidak ada aktivitas
![](https://developers.google.cn/static/cast/images/i/sender-cast-icon-states4.png?authuser=3&hl=id)
Aplikasi penerima tidak ada aktivitas
![](https://developers.google.cn/static/cast/images/r/receiver-ui-complete1_a.png?authuser=3&hl=id)
Pengirim terputus
![](https://developers.google.cn/static/cast/images/i/sender-cast-icon-states2.png?authuser=3&hl=id)
Transmisikan layar utama
![](https://developers.google.cn/static/cast/images/r/receiver-home2.png?authuser=3&hl=id)
Chrome
Aplikasi pengirim tidak ada aktivitas
![Aplikasi pengirim tidak ada aktivitas](https://developers.google.cn/static/cast/images/w/sender-cast-icon-states4.png?authuser=3&hl=id)
Aplikasi penerima tidak ada aktivitas
![](https://developers.google.cn/static/cast/images/r/receiver-ui-complete1_a.png?authuser=3&hl=id)
Pengirim terputus
![Pengirim terputus](https://developers.google.cn/static/cast/images/w/sender-cast-icon-states2.png?authuser=3&hl=id)
Transmisikan layar utama
![](https://developers.google.cn/static/cast/images/r/receiver-home2.png?authuser=3&hl=id)
Gambar yang digunakan dalam panduan desain ini disediakan oleh Blender Foundation, yang dibagikan berdasarkan hak cipta atau lisensi Creative Commons.
- Gajah's Dream: (c) hak cipta 2006, Blender Foundation / Belanda Media Art Institute/www.elephantsdream.org
- Sintel: (c) hak cipta Blender Foundation | www.sintel.org
- Tears of Steel: (CC) Blender Foundation | mango.blender.org
- Big Buck Bunny: (c) hak cipta 2008, Blender Foundation / www.bigbuckbunny.org