Apakah reka bentuk adaptif dan responsif?

reka bentuk penyesuaian dan reka bentuk responsif: perbezaan utama

Reka bentuk penyesuaian dan reka bentuk responsif adalah dua kaedah reka bentuk web yang berbeza. Reka bentuk penyesuaian menggunakan susun atur statik berdasarkan titik putus dan tidak bertindak balas selepas memuatkan;

Reka bentuk yang dipilih untuk projek bergantung kepada keperluan khusus. Reka bentuk penyesuaian menyediakan pengalaman pengguna yang lebih disesuaikan kerana ia membolehkan reka bentuk khas untuk peranti yang berbeza, tetapi memerlukan lebih banyak kerja. Reka bentuk responsif lebih fleksibel dan mudah dilaksanakan, tetapi mungkin tidak memberikan pengalaman yang disesuaikan yang sama.

Melaksanakan reka bentuk penyesuaian boleh meningkatkan kelajuan pemuatan laman web kerana ia hanya memuat sumber yang diperlukan oleh peranti tertentu. Walau bagaimanapun, ia memerlukan pemahaman yang mendalam tentang peranti yang berbeza yang digunakan oleh penonton sasaran dan boleh meningkatkan masa dan kos pembangunan.

salah faham "reka bentuk responsif"?

kita semua biasa dengan istilah "reka bentuk responsif", yang bermaksud merancang laman web yang boleh dipaparkan dengan betul pada semua peranti dan saiz skrin. Tetapi sesetengah orang berfikir bahawa "reka bentuk penyesuaian" lebih sesuai.

Adakah mereka perkara yang sama? Atau "reka bentuk penyesuaian" satu perkara lain? Bagaimanakah "reka bentuk cecair" difahami?

Soalan ini nampaknya mudah, tetapi selepas beberapa penyelidikan, saya mendapati ia lebih samar daripada yang saya fikir, dan mungkin juga kontroversial.

Nampaknya terdapat dua definisi reka bentuk penyesuaian:

Definisi 1: Reka bentuk responsif adalah seperti tongkat selfie, reka bentuk penyesuaian adalah seperti payung

Dalam definisi ini, laman web yang direka dengan responsif -seperti tongkat selfie -boleh berada di pelbagai negeri dari peregangan penuh hingga penarikan balik penuh dan mana -mana titik antara

, dan lain -lain. Sudah tentu, beberapa lebar atau titik putus lebih penting daripada yang lain, tetapi setiap lebar yang berbeza menghasilkan susun atur yang sedikit berbeza. Reka bentuk penyesuaian lebih seperti payung. Ia mempunyai "status" pratetap - untuk menghalang hujan dan mati untuk mudah alih. "Negeri pertengahan" tidak penting.

Self-stick dengan payung banyak animasi GIF menggambarkan konsep ini dengan baik.

Pada tahun 2015, Geoff Graham menggariskan pandangannya mengenai perbezaan antara kedua > Breakpoint spesifik

untuk menyesuaikan diri dengan lebar penyemak imbas.

Geoff mengatakan reka bentuk responsif didasarkan pada peratusan (iaitu sama dengan reka bentuk cecair), manakala reka bentuk adaptif didasarkan pada unit tetap pengukuran . Kedua -duanya dikuasakan oleh pertanyaan media CSS.

Definisi 2: Reka bentuk penyesuaian itu sendiri bertindak balas terhadap keseluruhan persekitaran peranti (bukan hanya skrin)

Walau bagaimanapun, seperti yang anda lihat dari komen di bawah artikel Geoff, tidak semua orang bersetuju dengan definisi ini.

Berikut adalah komen teratas:

"Reka bentuk responsif boleh mengalir atau tetap, dan reka bentuk penyesuaian juga boleh. Reka bentuk penyesuaian diri direka khusus untuk menyesuaikan diri dengan persekitaran penyemak imbas, dan mungkin atau mungkin tidak menganggap saiz semasa penyemak imbas. "⏤ Zzzzbov.

Menurut definisi ZzzzBOV, reka bentuk penyesuaian dikuasakan oleh JavaScript, yang bertindak balas terhadap jenis peranti

dan juga berkaitan dengan saiz skrin. Sebagai contoh, tablet mungkin mempunyai skrin resolusi tinggi, tetapi memerlukan sasaran sentuhan yang lebih besar. Telefon mungkin memerlukan sistem navigasi yang berbeza. Ramai orang terkenal telah menyatakan pendapat mereka, dari Uxpin ke Mozilla, tetapi ia masih kelihatan terbuka.

Pendapat saya

Mari kita gunakan lampu meja laras sebagai contoh dunia nyata: Reka bentuk responsif adalah apabila anda menghidupkan suis, lampu meja bertindak balas kepada

dan menghidupkan cahaya. Reka bentuk penyesuaian ialah anda boleh menyesuaikan /

menyesuaikan lampu meja untuk melihat yang lebih baik. Jika laman web tidak responsif terhadap interaksi anda, ia tidak terlalu responsif jika ia tidak dapat menyesuaikan diri dengan persekitarannya (iaitu skrin peranti) ia tidak begitu menyesuaikan diri. Kedua -duanya akan menjejaskan pengalaman pengguna dengan serius.

mengapa reka bentuk responsif bukan reka bentuk responsif yang benar

Response adalah hasil tindakan lain, contohnya, jika butang laman web mengubah warna latar belakangnya apabila pengguna melayang di atasnya -tindakan itu berlegar, dan tindak balasnya adalah perubahan warna latar belakang. Biasanya apabila kita mengatakan bahawa laman web responsif, kita bermaksud bahawa ia sesuai dengan saiz skrin pada mana -mana peranti, tetapi pada hakikatnya, ia bermakna ia bertindak balas terhadap interaksi pengguna. Alasannya adalah seperti berikut:

Pengguna tidak boleh mengubah saiz penyemak imbas pada peranti mudah alih mereka. Walaupun pengguna boleh menukar saiz penyemak imbas pada komputer desktop mereka, mereka biasanya tidak perlu melakukan ini untuk berinteraksi dengan laman web - ini bukan interaksi pengguna biasa. Sudah tentu, pereka web kami sering mengubah saiz pelayar mereka untuk menguji laman web, tetapi ini bukan tindakan biasa bagi pengguna.

mengapa saya berfikir "reka bentuk penyesuaian" lebih tepat

Oleh kerana saiz skrin sering digunakan dalam keadaan lalai mereka (dalam erti kata anda tidak boleh atau tidak perlu mengubah saiznya), istilah "reka bentuk penyesuaian" mungkin lebih sesuai. Sebuah laman web (sekurang-kurangnya laman web yang direka dengan baik) akan mengubah suai susun aturnya agar sesuai dengan peranti pengguna; Reka bentuk penyesuaian juga boleh menggambarkan bagaimana kami mengoptimumkan masa beban dan prestasi yang dirasakan peranti pegang tangan kecil. Jadi apakah reka bentuk cecair?

Pada awal tahun 2000, perdebatan terbesar adalah "susun atur tetap vs susun atur cecair." Susun atur reka bentuk bendalir menggunakan tetapan peratusan agar sesuai dengan rangka pelayar. Susun atur tetap ditetapkan sebagai susun atur tunggal yang ditentukan oleh lebar piksel. Tidak ada yang ideal. Susun atur tetap kelihatan hebat di skrin yang betul, tetapi ia tidak berfungsi pada monitor kecil. Susun atur bendalir lebih fleksibel, tetapi kelihatan langsing pada paparan skrin lebar. Reka bentuk responsif adalah tindak balas langsung Ethan Marcotte terhadap teka -teki reka bentuk ini -bukan pun. RWD "ditarik balik" klasik adalah seperti versi matang reka bentuk cecair - meregangkan untuk mengisi tingkap, tetapi menyusun semula dirinya jika perlu. Takrifan reka bentuk penyesuaian Geoff -walaupun ramai orang tidak bersetuju -seperti "versi matang reka bentuk tetap" - bukan satu susun atur tetap, tetapi 3, 4 atau lebih susun atur.

Kesimpulan

Inilah yang saya fikir reka bentuk responsif dan reka bentuk penyesuaian. Selepas membaca artikel ini, adakah anda akan mengubah cara anda bercakap tentang istilah ini atau terus menggunakan reka bentuk responsif sebagai cara untuk menyesuaikan laman web anda ke saiz skrin berganda sedikit lebih mudah?

Adakah anda pernah menggunakan istilah "reka bentuk penyesuaian" tetapi hanya mendapat rupa kosong?

Saya ingin tahu, sila beritahu saya dalam komen di bawah!

(jangan berdebat!)

FAQs untuk reka bentuk adaptif dan responsif (FAQ)

Apakah perbezaan utama antara reka bentuk penyesuaian dan reka bentuk responsif?

Perbezaan utama antara reka bentuk penyesuaian dan responsif adalah pendekatan mereka kepada pengalaman pengguna. Reka bentuk penyesuaian menggunakan susun atur statik berdasarkan titik putus, dan sekali pada mulanya dimuatkan, mereka tidak akan bertindak balas. Reka bentuk responsif, sebaliknya, mengalir, yang menggunakan peratusan dan bukannya piksel sebagai unit pengukuran untuk menyesuaikan berdasarkan lebar penyemak imbas.

Adakah reka bentuk penyesuaian lebih baik daripada reka bentuk responsif?

Pilihan reka bentuk penyesuaian dan reka bentuk responsif bergantung kepada keperluan khusus projek. Reka bentuk penyesuaian dapat memberikan pengalaman pengguna yang lebih disesuaikan kerana ia membolehkan penciptaan reka bentuk khusus untuk peranti yang berbeza. Walau bagaimanapun, ia memerlukan lebih banyak kerja kerana anda perlu membuat reka bentuk untuk setiap saiz skrin. Reka bentuk responsif, sebaliknya, lebih fleksibel dan lebih mudah dilaksanakan, tetapi ia mungkin tidak memberikan pengalaman khusus yang sama sebagai reka bentuk penyesuaian.

Bagaimana reka bentuk penyesuaian mempengaruhi kelajuan pemuatan laman web?

Reka bentuk penyesuaian boleh meningkatkan kelajuan pemuatan laman web. Ini kerana ia hanya memuat sumber yang diperlukan oleh peranti tertentu, yang dapat mengurangkan jumlah data yang perlu dimuat turun.

Apakah cabaran melaksanakan reka bentuk penyesuaian?

Melaksanakan reka bentuk penyesuaian boleh menjadi lebih kompleks dan memakan masa daripada reka bentuk yang responsif. Ia memerlukan pemahaman yang mendalam tentang peranti yang berbeza yang digunakan oleh penonton sasaran dan membuat reka bentuk khusus untuk setiap peranti. Ini meningkatkan masa pembangunan dan kos.

Bolehkah reka bentuk penyesuaian meningkatkan pengalaman pengguna?

Ya, reka bentuk penyesuaian dapat meningkatkan pengalaman pengguna dengan ketara. Dengan membuat reka bentuk yang disesuaikan dengan peranti tertentu, anda dapat memastikan kandungan anda dipaparkan pada setiap peranti dengan cara yang optimum. Ini boleh membawa kepada pengalaman pengguna yang lebih menyenangkan dan cekap.

Adakah reka bentuk penyesuaian sesuai untuk semua jenis laman web?

Walaupun reka bentuk penyesuaian mungkin bermanfaat untuk pelbagai jenis laman web, ia mungkin bukan pilihan terbaik untuk semua laman web. Laman web yang memerlukan sangat disesuaikan untuk peranti yang berbeza boleh mendapat manfaat daripada reka bentuk penyesuaian. Walau bagaimanapun, untuk laman web yang lebih mudah, reka bentuk responsif mungkin merupakan pilihan yang lebih kos efektif.

Bagaimana reka bentuk penyesuaian mempengaruhi SEO?

Reka bentuk penyesuaian mungkin mempunyai kesan positif terhadap SEO. Dengan menyediakan pengalaman pengguna yang lebih baik dan masa beban yang lebih cepat, ia dapat meningkatkan kedudukan laman web anda dalam hasil enjin carian. Walau bagaimanapun, adalah penting untuk memastikan semua versi laman web anda mempunyai kandungan dan tag meta yang sama untuk mengelakkan sebarang isu SEO yang berpotensi.

Apakah kemahiran yang diperlukan untuk melaksanakan reka bentuk penyesuaian?

Melaksanakan reka bentuk penyesuaian memerlukan pemahaman yang mendalam tentang prinsip -prinsip reka bentuk web, serta pengetahuan tentang HTML, CSS dan JavaScript. Ia juga perlu reka bentuk untuk peranti dan saiz skrin yang berbeza dan memahami cara mengoptimumkan sumber untuk peranti yang berbeza.

Bolehkah reka bentuk penyesuaian digunakan dengan reka bentuk responsif?

Ya, reka bentuk penyesuaian dan reka bentuk responsif boleh digunakan bersama -sama. Pendekatan ini dipanggil "RESS" (reka bentuk responsif dengan komponen sisi pelayan), yang menggabungkan fleksibiliti reka bentuk responsif dengan pengoptimuman khusus peranti untuk reka bentuk penyesuaian.

Apakah masa depan reka bentuk penyesuaian?

Oleh kerana bilangan peranti dan saiz skrin yang berbeza terus berkembang, permintaan untuk reka bentuk penyesuaian mungkin meningkat. Walau bagaimanapun, sebagai kemajuan teknologi, pendekatan reka bentuk baru yang menggabungkan aspek terbaik reka bentuk penyesuaian dan reka bentuk responsif mungkin muncul.

Atas ialah kandungan terperinci Apakah reka bentuk adaptif dan responsif?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!