berita

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Sebulan yang lalu, setelah kami menerima dorongan sistem Huawei Hongmeng NEXT, kami langsung melakukan pengalaman langsung.

Mitra di bagian redaksi Aifaner juga bergantian merasakannya. Meskipun setiap orang memiliki merek ponsel utama sehari-hari yang berbeda-beda, penilaian mereka terhadap Hongmeng berdarah murni secara umum sama:

Cukup halus.

Dan Anda dapat melihat topik "#红梦NEXT halus dan halus" di hampir semua platform sosial. Saya juga merasakan hal yang sama, namun saya masih mempunyai beberapa pertanyaan:

• Hasilnya adalah kehalusan sutra, proses apa yang menyebabkannya?
• Tidak banyak perbedaan antara Hongmeng NEXT dengan sistem generasi sebelumnya. Lalu apa perbedaan detailnya?

Setelah pengalaman mendalam selama sebulan, saya menemukan beberapa celah dan celah dalam sistem baru Huawei. Mungkin pengoptimalan yang begitu halus sehingga hampir tidak terlihat ini adalah akar dari kehalusan sutra.

Jadi hari ini kita akan melihat Hongmeng NEXT menurut "frekuensi sentuhan" setiap desain, dari kecil hingga besar, dari titik ke permukaan, dari statis hingga dinamis.

Ikon sangat penting

Layar adalah jendela ke Internet.

Menurut saya pernyataan ini kurang akurat. Yang sebenarnya bisa disebut "jendela/saluran" di ponsel seharusnya adalah sebuah aplikasi.

WeChat, Weibo, Xiaohongshu dan TikTok... satu atau lebih di antaranya diklik hampir setiap jam. Dibandingkan dengan bagian lain dari sistem, ikon Aplikasi paling sering diklik.

Desain ikon Aplikasi telah melalui beberapa tahap pengembangan: skeuomorfisme - kerataan - penyesuaian skeuomorfisme dan kerataan bebas.

Terus terang, ini berpindah-pindah antara simulasi dan gaya ringkas, tetapi ini tidak lebih dari dua inti desain: menyampaikan informasi secara akurat + gaya terpadu.

Huawei secara bertahap menyelesaikan gaya ikonnya melalui sistem generasi ketiga EMUI-HarmonyOS-HarmonyOS NEXT.

Gaya ikon baru disebut "Simulasi Cahaya" dan memiliki 4 karakteristik yang sangat jelas:

①Garis besar ikon ringkas dan mudah dipahami, dan Anda dapat mengetahui fungsinya secara sekilas;

② Gunakan elemen semi-transparan dan buram untuk ditumpuk guna menghadirkan kesan berlapis, yang bobot visualnya lebih ringan dibandingkan kuasi-materialisasi murni dan lebih tiga dimensi dibandingkan gaya datar murni;

③ Memperkuat pemrosesan sorotan pada tepi grafik untuk menyempurnakan tekstur keseluruhan dan menyorot elemen inti grafik sehingga mata dapat menemukan poin-poin penting dengan lebih cepat;

④Warna panel belakang ikon memiliki sedikit gradien, dan objek yang digambarkan dengan pencahayaan dari atas ke bawah tampak lebih alami bagi mata manusia, menghindari dampak dan tiba-tiba gradien warna yang kuat.

Desain aplikasi dari empat poin di atas membuat simbol ikon di desktop terlihat lebih menyatu. Perasaan paling intuitif adalah ini dirancang oleh tim, bukan hasil diskusi kelompok.

Tentu saja, "objek semu ringan" hanyalah tren umum. Akan selalu ada orang yang menyukai gaya yang lebih mendekati aslinya dan tiga dimensi, jadi Anda juga dapat menyesuaikannya secara manual ke gaya lain - bayangan tepi. lebih berat, detailnya lebih spesifik, dan lapisannya lebih detail tiga dimensi dan warnanya lebih cerah.

▲ Kiri adalah gaya skeuomorfik ringan, dan kanan adalah gaya skeuomorfik.

Tidak sulit untuk menemukan bahwa ikon skeuomorfik pun masih mengikuti prinsip desain di atas. Nada terpadu juga digunakan dalam ikon sistem.

Pusat kendali, antarmuka pengaturan, dan bilah navigasi aplikasi sistem semuanya memiliki ikon sistem, namun mudah diabaikan karena biasanya muncul dengan teks.

Ini juga merupakan kesulitan pertama dalam mendesain ikon sistem: bagaimana menjaganya tetap konsisten dengan tata letak teks? Solusi Huawei adalah mengkarakterisasi gambar sehingga dapat dihubungkan secara mulus dengan font sistem.

Ini dapat secara cerdas beradaptasi sesuai dengan perubahan ketebalan teks, memastikan bahwa ikon dapat secara fleksibel beradaptasi dengan ketebalan teks yang berbeda dan menjaga koherensi visual.

Kami juga menemukan detail lain selama pengalaman ini. Ikon sistem Hongmeng NEXT memiliki efek yang lebih dinamis: lampu kilat bintang, senter, Huawei Share, mode pelindung mata, mode hemat daya... semuanya memiliki efek eksklusif.

Sistem baru ini menetapkan 7 efek dinamis untuk ikon, melalui kombinasi warna yang muncul, menghilang, memantul, menskala, mengganti, berdenyut, dan bervariasi.

Anda mungkin berpikir, apa hubungan antara desain ikon dan kelancaran sistem?

Dari perspektif kecil, animasi ikon juga merupakan bagian dari sistem, dan koherensi serta konsistensi gerakan akan mempengaruhi persepsi pengguna tentang kelancaran sistem; dari perspektif besar, ikon sangat sering muncul di sistem, dan frekuensi pengguna menyentuhnya juga sangat tinggi.

Desain yang terpadu dan harmonis memungkinkan Anda melihat bayangan sistem di halaman yang Anda bolak-balik, menghindari "kekacauan".

Oleh karena itu, desain elemen statis yang konsisten adalah dasar agar sistem menjadi lancar.

seperti air

Dengan tata letak ikon aplikasi dan sistem, mari kita lihat skenario penggunaan spesifiknya.

Adaptasi aplikasi dan sistem UI pada ponsel layar penuh selalu dikritik karena terlalu "kekerasan". Mereka hanya membuat aplikasi dengan rasio layar standar menjadi lebih besar dan lebar, dan tidak memanfaatkan layar besar secara maksimal untuk menampilkan lebih banyak informasi dua kali lipat luasnya, seperti strategi malas pada tablet di tahun-tahun awal.

Antarmuka yang nyaman harus seperti air, yang selalu mengisi wadah dengan sempurna, apa pun bentuknya.

Solusi adaptasi "seperti air" ini disebut "tata letak responsif" oleh Huawei.

Ketika ukuran wadah jendela berubah, elemen antarmuka dapat secara otomatis berubah untuk beradaptasi dengan perubahan ukuran wadah.

Huawei mencapai transisi yang mulus dan adaptasi antarmuka dengan merentangkan latar belakang halaman, teks, ikon, komponen, dan elemen lainnya secara bersamaan.

Komponen yang berbeda dapat diskalakan berdasarkan rasio tetap pada halaman berbeda.

Saat halaman berubah, tata letak UI juga akan berubah. Memo adalah contoh yang bagus.

Dalam mode lanskap, antarmuka dibagi menjadi dua, dengan bilah direktori di sebelah kiri dan menu sekunder di sebelah kanan. Hal ini tidak hanya menghindari peregangan yang berlebihan dan ruang kosong yang berlebihan dalam satu tampilan direktori, namun juga memanfaatkan sepenuhnya ruang layar horizontal.

Mengenai adaptasi komponen kecil yang lebih spesifik, Hongmeng NEXT beradaptasi dengan ukuran yang berbeda dengan mengubah bentuk dan kepadatan informasinya sendiri.

Ini sangat mirip dengan ide desain widget desktop: ubah ukuran folder dan gunakan kartu layanan dengan ukuran berbeda agar sesuai dengan ruang kosong di desktop.

Ada banyak solusi tata letak responsif, namun logika dasarnya sama persis:

• Beradaptasi seperti air tenang
• transisi seperti air mengalir

Solusi adaptasi yang tersembunyi di sudut ini juga memfasilitasi integrasi perangkat lunak dan perangkat keras.

Layar terpisah Hongmeng NEXT sangat bagus. Dalam solusi tradisional, selama dua layar dapat dipisahkan, tugas selesai.

Namun atas dasar ini, sistem baru juga memangkas sudut jendela kecil hingga kelengkungan yang sama dengan sudut R layar.

Sejujurnya, desain jendela dan layar seharusnya seperti ini, tetapi karena sistem Android perlu beradaptasi dengan terlalu banyak merek dan model, adaptasi yang sempurna menjadi masalah besar.

Dan ini juga merupakan keuntungan tambahan yang dibawa oleh sistem Hongmeng berdarah murni: sistem asli dirancang untuk melayani model merek ini, dan tidak perlu mempertimbangkan model lain.

Mainkan seni 3D di layar 2D

Sebulan yang lalu, jika Anda bertanya kepada saya, "Peningkatan apa saja yang telah dilakukan pada UI Hongmeng NEXT?"

Saya hanya dapat memberi tahu Anda bahwa lapisan efek khusus "kaca buram" telah ditambahkan di banyak tempat, tetapi penambahan satu elemen sulit untuk meningkatkan kelancaran sistem pada tingkat tertentu.

Jika Anda ingin mencapainya dan dianggap "halus" oleh pengguna, ini sebenarnya adalah proyek yang sistematis, dan Anda harus mempertimbangkan segalanya. Setelah pengalaman sebulan, saya mengklasifikasikan kelancaran Hongmeng berdarah murni menjadi dua bagian:

• Rasa berlapis-lapis
• bermain dengan kekuatan

Mari kita lihat layeringnya terlebih dahulu. Efek kaca buram (buram) adalah bagian darinya. Biasanya muncul dalam adegan seperti membuka dan menutup aplikasi, satu layar negatif, pencarian drop-down, menutup latar belakang, layar terpisah, dan pemisah bergerak. garis.

Dibandingkan dengan sistem sebelumnya, memang terdapat lebih banyak efek blur, namun pada saat yang sama, penambahan animasi dan penskalaan ikon desktop dapat mensimulasikan proses pemfokusan dan pengaburan mata manusia hasil dari gabungan efek keduanya.

Efek pengangkatan desktop disimulasikan melalui penskalaan, yang juga secara intuitif mencerminkan hubungan hierarki dalam sistem.

Membuka aplikasi, membuat tugas baru, membuka kunci layar, dll. semuanya termasuk dalam level atas dan bawah. Hongmeng NEXT telah menetapkan beberapa efek animasi untuk jenis peralihan ini:

Selain itu, ada juga peralihan antara lintas level dan level yang sama, dan ada animasi yang sesuai.

Dengan membagi hubungan hierarki dan menerapkan efek khusus yang berbeda, salah satunya adalah untuk meningkatkan kesan tiga dimensi sistem melalui lapisan dan membuat transisi tidak terlalu kaku. Yang lainnya adalah dengan mengintegrasikan animasi non-linier ke dalam setiap transisi, dan operasi akan menjadi lebih mudah.

Video demonstrasi di situs resmi menggambarkan dengan baik pengaruh animasi non-linier terhadap kelancaran.

Optimalisasi hubungan hierarki yang dilakukan Huawei tidak terbatas pada transisi halaman besar, namun juga berfokus pada ikon kecil.

Kita dapat melihat animasi one-shot berikut di mana saja di sistem baru:

Baik itu menyorot kotak pencarian, memperbesar ikon aplikasi, atau menghidupkan dan mematikan tombol fungsi, sulit untuk melihat transisi paksa pada sistem ini. Sistem ini selalu dapat menggunakan serangkaian metode seperti bentuk, warna, perpindahan, dan penskalaan membuat transisi terjadi.

Menurut statistik resmi, transisi adalah jenis efek dinamis dengan proporsi tertinggi dalam sistem, mencapai lebih dari 60%. Ini juga salah satu alasan mendasar mengapa banyak orang akan merasa lebih lancar setelah memulai Hongmeng NEXT - Anda dapat melihatnya di mana-mana.

"Musim semi kosong" yang ada di mana-mana

Saya ingat seorang kolega membagikan contoh kepada saya:

Reaksi pertama anak-anak zaman sekarang ketika melihat layar bukanlah mencari remote control, melainkan mengklik atau menggesernya dengan jari.

Di era layar penuh, cara generasi baru berinteraksi dengan produk digital telah sepenuhnya diulang - menggeser dan mengetuk telah menjadi metode masukan bagi sebagian besar barang elektronik konsumen - dan pers sumbu Z sedang sekarat.

Banyak orang akan melewatkan tombol-tombol pada ponsel menengah karena terasa lebih nyaman di tangan dan memiliki konfirmasi sentuhan fisik yang jelas.

Ini juga alasan mengapa layar sentuh dikritik: umpan balik yang tidak memadai. Pabrikan besar juga menggunakan berbagai metode seperti getaran motor (taktil) dan efek suara (pendengaran) untuk mengembalikan gerakan fisik yang menenangkan di layar datar.

Animasi pada ikon sistem merupakan peningkatan konfirmasi visual.

"Sistem efek dinamis gravitasi" Hongmeng NEXT mensimulasikan "kekuatan" objek selama pergerakan melalui berbagai efek dinamis untuk membuat operasi interaktif menjadi hidup.

Huawei telah mewujudkan kekuatan dalam mata air yang tidak ada, memenuhi setiap sudut Hongmeng NEXT.

Misal saat menggeser halaman akan muncul “pegas” di batas atas, bawah, kiri dan kanan. Setelah mencapai batas tersebut, akan timbul efek pantulan yang sangat natural, menandakan bahwa Anda telah mencapai akhir.

Memberikan ruang elastis dalam jumlah tertentu juga dapat mencegah sentuhan yang tidak disengaja dan mencegah sistem menjadi terlalu sensitif, yang mengharuskan kita menggunakan tenaga dan berhati-hati dalam pengoperasian pada tingkat milimeter.

Selain itu, mata air virtual di mana-mana juga dapat meningkatkan kelancaran pengoperasian hingga batas tertentu: seluruh tubuh akan dihubungkan dengan satu gerakan, yang mendekati efek pantulan yang sebenarnya.

Memulihkan efek gerakan di dunia fisik dapat mengurangi biaya pembelajaran pengguna, dan mereka dapat dengan cepat mulai menggunakan perangkat dan sistem baru dengan beroperasi sesuai dengan kebiasaan "begini" dalam hidup.

Bagi yang sudah familiar dengan pengoperasian isyarat atau sistem Hongmeng, interaksi dengan tangan adalah yang paling signifikan.

Ada kalimat ini di situs resmi pengembang Huawei:

Efek animasi harus selalu fokus pada pengoperasian dan sesuai dengan ekspektasi psikologis pengguna, dan pergerakan objek harus sesuai dengan dunia nyata.

Insinyur produk mencoba yang terbaik untuk memampatkan segala sesuatu di dunia tiga dimensi menjadi layar dua dimensi, sementara manajer produk memutar otak untuk meniru dunia nyata dalam tampilan dua dimensi.

▲ Gambar dari: rauno.com

Pada analisis akhir, kajian mendalam tentang desain interaksi sebenarnya adalah pemahaman yang lebih mendalam tentang diri kita sendiri: Skenario manakah yang memerlukan pergeseran? Bagaimana cara mengatur efek khusus selama transisi? Bagaimana cara menutupi 99% operasi dengan satu jari?

Jika Anda seperti saya dan telah beralih dari mesin tombol ke layar penuh selangkah demi selangkah, tidak sulit untuk menemukan bahwa sistem interaktif pada ponsel sebenarnya lebih cocok untuk kita - hampir tidak perlu berpikir dan belajar, cukup gunakan dia.

Ketika Anda tidak menyadari adanya interaksi sistem, itu adalah pujian terbesar bagi suatu sistem, karena semua pertimbangan di atas secara rinci telah menjadikan produk sebagai perpanjangan alami dari tubuh kita.