Merekabentuk Ikon Adaptif

Android O memperkenalkan format ikon apl baharu: ikon adaptif. Ikon penyesuaian boleh menjadikan peranti lebih koheren dengan menyatukan bentuk semua ikon aplikasi dan membuka pintu kepada kesan visual yang menarik. Jawatan ini menerangkan bagaimana mereka bekerja dan meneroka beberapa teknik untuk merekabentuknya.

Untuk melihat semula di mana ciri ini berasal, lihat:

Asas-asas

Saiz dan bentuk

Ikon penyesuaian adalah saiz 108dp * 108dp tetapi bertopeng ke maksimum 72dp * 72dp. Peranti yang berbeza boleh membekalkan topeng yang berbeza yang mesti cembung dalam bentuk dan mungkin mencapai minimum 33dp dari pusat di tempat.

Contoh-contoh topeng berbentuk yang berbeza digunakan

Oleh sebab jangkauan minimum topeng, anda boleh mempertimbangkan lingkaran berdiameter 66dp sebagai zon selamat, dijamin tidak akan dipotong.

Zon selamat dalam topeng persegi bulat

Kunci utama

Ikon kunci ikon

Bentuk keyline adalah asas grid ikon yang membantu bahagian visual ikon anda konsisten dengan ikon apl lain. Bentuk utama ialah:

  • Lingkaran: diameter 52dp & 36dp
  • Square: 44dp * 44dp, radius sudut 4dp
  • Rectangles: 52dp * 36dp & 36dp * 52dp, jejari sudut 4dp

Lihat templat yang disertakan pada akhir artikel ini.

Lapisan

Ikon penyesuaian sebenarnya terdiri daripada dua lapisan; latar depan dan latar belakang. Kedua-dua lapisan adalah 108dp * 108dp; latar belakang mesti menjadi legap sepenuhnya sementara latar depan mungkin termasuk ketelusan. Lapisan-lapisan ini disusun atas satu sama lain.

Menyediakan elemen dalam dua lapisan berasingan yang lebih besar daripada saiz yang dipaparkan (iaitu bertopeng) menghasilkan peluang untuk rawatan dan animasi visual yang menarik. Tepat kesan apa yang boleh dipakai dan ketika masih menjadi soalan terbuka; ia terpulang kepada peranti dan pembuat pelancar untuk membuat keputusan. Berikut adalah beberapa contoh mudah yang boleh anda bayangkan: paralaks atau berdenyut dengan menerjemahkan atau menyaring secara berasingan setiap lapisan sebelum menggunakan topeng.

Apabila ikon 108dp * 108dp bertopeng sehingga 72dp * 72dp, 18dp luar pada setiap sisi boleh dianggap sebagai "tambahan" kandungan, hanya didedahkan semasa gerakan.

Pertimbangan Reka Bentuk

Garis panduan reka bentuk bahan untuk membuat ikon produk masih banyak digunakan. Secara spesifik ikon anatomi, bayang-bayang dan penamat kekal, tetapi kini anda boleh meletakkan unsur-unsur dalam lapisan latar depan atau latar belakang yang menghasilkan kesan yang berbeza.

Sekarang saya yakin bahawa banyak ikon akan dilayan dengan baik dengan meletakkan tanda jenama mereka di latar depan pada latar belakang berwarna padat dan memanggilnya sehari. Ini akan memastikan bahawa ikon anda sesuai dengan baik pada peranti. Apa yang menggembirakan saya adalah bagaimana kita sebagai komuniti akan meneroka kekangan baru ini dan mencari cara yang menarik, suka bermain dan inovatif untuk menjadikan ikon yang menarik. Berikut adalah beberapa perkara yang harus diingat dan beberapa idea untuk berpotensi diteroka.

Keratan

Oleh kerana sifat dinamik ikon penyesuaian, anda tidak boleh mengetahui bentuk topeng yang tepat yang akan digunakan. Atas sebab itu, lebih baik meletakkan unsur kritikal seperti tanda jenama anda di dalam zon selamat dan menjauhkan diri dari tepi masker.

Latar Belakang Latar Belakang

Menempatkan beberapa unsur yang mungkin kelihatan sebagai latar depan, sebenarnya di latar belakang bermakna mereka akan bergerak secara bebas. Sebagai contoh app kalkulator meletakkan kebanyakan elemen di latar depan, tetapi butang sama dengan blok warna aksen di latar belakang:

Unsur-unsur pada lapisan berbeza menekankan lapisan

Ini mencipta peluang yang menarik untuk bergerak di mana anda mengintai secara visual pada blok berwarna terang, tetapi ia bergerak kurang daripada unsur-unsur latar depan, mewujudkan sensasi kedalaman.

Topeng bertopeng

Saya fikir ada peluang yang menarik untuk meletakkan unsur-unsur masking di latar depan - iaitu unsur padat dengan kawasan yang dipotong. Pertimbangkan ikon yang mungkin untuk Gedung Google Play, ini mungkin dibina dengan cara yang 'jelas', iaitu meletakkan segitiga berwarna di latar depan di latar belakang putih.

Lakaran 'standard' diletakkan di atas latar belakang putih

Daripada melakukan ini, kita mungkin menggunakan latar belakang yang berwarna-warni dan latar depan putih dengan segi tiga yang dikurangkan untuk menghasilkan output statik yang sama:

Latar belakang yang berwarna-warni alternatif dengan latar belakang pelindung

Persediaan ini akan membolehkan warna mengintip melalui 'untuk bergerak secara bebas daripada topeng yang mendedahkan bahagian-bahagian latar belakang yang berlainan apabila diterjemahkan atau diperkecil.

Kiri adalah komposisi biasa; Betul dengan latar belakang pelindung

Cahaya & bayang-bayang

Interaksi kesan pencahayaan dan bayang-bayang yang diletakkan dalam lapisan berasingan boleh menghasilkan hasil yang menarik. Sebagai contoh, menggunakan teknik bayang-bayang panjang pada elemen latar depan boleh mempunyai interaksi yang suka bermain ketika bergerak di dalam kawasan bertopeng. Begitu juga kesan pencahayaan boleh diletakkan di lapisan latar dan bukannya dibakar ke latar belakang. Sebagai contoh, lapisan 'selesai' boleh diletakkan di latar depan untuk meniru sumber cahaya. Meletakkan ini di latar depan bermakna ia akan bermain di atas lapisan latar belakang apabila bergerak, bergerak pada kadar yang berbeza untuk itu.

Contoh bayangan latar depan dan (dibesar-besarkan) sumber cahaya diletakkan di latar belakang

Berhati-hati untuk tidak membuat kesan yang tidak masuk akal mis. bayang melayang dari unsur latar depan atau bergerak di belakang elemen latar belakang. Juga ingat bahawa banyak ikon yang mungkin dilihat bersama-sama jadi konservatif dengan kesan pencahayaan terdahulu dan tetap dekat dengan garis panduan material.

Tinggalkan di belakang

Anda boleh meletakkan unsur-unsur dalam lapisan latar belakang yang benar-benar dikaburkan oleh lapisan latar dan hanya dipaparkan di bawah gerakan.

Elemen hanya tertera di bawah gerakan

Sumber dan alat

Berikut adalah fail lakaran saya yang boleh anda gunakan sebagai templat sambil mencipta ikon penyesuaian. Ia termasuk grid ikon, bentuk kunci dan kawasan selamat. Ia dilaksanakan sebagai simbol sehingga mengubah elemen induk akan mengemas kini salinan yang memberi anda pratonton dengan topeng yang berbeza digunakan.

Saya juga memuat naik templat Adobe Illustrator jika itu lebih banyak perkara anda.

Di samping itu, lihat sumber-sumber lain yang saya jumpa:

  • Alat pratonton ikon penyesuaian
  • Templat Pereka Affinity
  • Templat Bjango termasuk ikon penyesuaian
  • Templat Figma (memerlukan log masuk)
  • Templat XD Adobe

Taman Permainan Ikon Adaptif

Dalam membangunkan ikon penyesuaian, saya telah menghargai bahawa banyak perihal yang datang dari interaksi latar depan dan unsur latar belakang apabila kesan gerakan digunakan. Ini masih merupakan persoalan terbuka kerana kita belum melihat bagaimana peranti dan pembuat pelancar akan melaksanakannya. Untuk membantu menyiasat ruang ini, saya telah membuat aplikasi ujian kecil untuk membantu anda menilainya semasa membuat ikon anda:

Eksperimen dengan topeng dan kesan gerakan yang digunakan pada ikon anda

Apl ini memaparkan semua aplikasi yang dipasang pada peranti anda dengan ikon penyesuaian. Skrol grid menggunakan kesan paralaks pada ikon dan menyentuh ikon menggunakan kesan skala. Anda boleh mengkonfigurasi kekuatan kesan dan menukar topeng yang digunakan untuk semua ikon. Mudah-mudahan alat ini membantu anda untuk membayangkan bagaimana ikon anda akan muncul dan mungkin bergerak pada peranti yang berbeza.

Anda boleh memuat turun APK atau checkout sumber di github:

Pergi dan beradaptasi

Semoga jawatan ini memberi anda maklumat dan inspirasi untuk reka bentuk ikon penyesuaian hebat untuk apl anda. Sebagai pengguna, saya tidak boleh menunggu aplikasi saya menjadi lebih koheren. Apa yang menggembirakan saya walaupun lebih, melihat apa penyelesaian kreatif yang kami buat sebagai sebuah komuniti.

Jika anda seorang pemaju yang ingin membina ikon penyesuaian, maka sertai saya dalam bahagian 3: Melaksanakan ikon penyesuaian.