Reka Bentuk Responsif: Cara Memperolehnya dengan Betul Kali Pertama

Pendedahan: Sokongan anda membantu mengekalkan laman web ini! Kami memperoleh bayaran rujukan untuk beberapa perkhidmatan yang kami cadangkan di halaman ini.


Dalam memoirnya tahun 1939, Angin, Pasir dan Bintang, Pengarang dan bangsawan Perancis Antoine de Saint-Exupery berpendapat, “Seorang pereka tahu dia telah mencapai kesempurnaan bukan ketika tidak ada yang tersisa untuk ditambahkan, tetapi ketika tidak ada yang tersisa untuk diambil.” Penerbang terkenal dan pengarang Little Prince tidak hidup untuk melihat Zaman Maklumat, tetapi kata-katanya tetap bergema di dunia di mana dunia maya telah menggantikan langit sebagai sempadan inovasi.

Sebenarnya, dengan perhatian yang semakin berkurang walaupun kekayaan kandungan yang ada berkembang secara eksponen, pendekatan Saint-Exupery “kurang lebih banyak” lebih relevan daripada sebelumnya. Perniagaan tidak lagi memiliki kemewahan mengalahkan semak peribahasa apabila tingkap rata-rata untuk melibatkan pengunjung bergerak ke laman web mereka kurang dari lima saat. Memandangkan lebih daripada lima sen setiap dolar dibelanjakan dalam talian, adalah wajar bagi anda untuk membuat setiap detik itu dikira.

Ini lebih daripada sekadar mencari penyedia hosting yang terkenal dan memuat naik laman web asas. Anda mesti membuat laman web yang memenuhi keperluan semua pelawat. (Sekiranya anda memerlukan bantuan untuk memahami bagaimana laman web dan web hosting berfungsi, lihat panduan ilustrasi kami untuk hosting).

Kunci untuk menarik perhatian pengunjung dan memastikan tetingkap terbuka (dan menunjuk ke arah halaman anda) ada di dalamnya reka bentuk responsif. Pasar dengan cepat menjadi bahagian yang sangat penting dari dunia pasca-PC, dan apabila semakin banyak pengguna mendapat berita mereka, menikmati hiburan, dan membuat pembelian dengan tablet dan telefon pintar, memastikan laman web anda dirancang untuk memenuhi keperluan mereka yang sentiasa berkembang adalah kritikal. Ini semua mengenai menjaga ciri yang diinginkan pengunjung dan tidak ada perkara yang tidak mereka inginkan.

Tidak ada ruang untuk grafik yang kikuk, navigasi yang membingungkan, atau halaman yang terkunci dalam resolusi hanya desktop. Pengguna mudah alih mahu Internet mereka ramping, bersih, dan sesuai dengan ukuran skrin mereka – jadi pastikan untuk memilih hos (dan platform) yang menyokong reka bentuk yang benar-benar responsif.

Potensi ganjaran untuk membuat lebih banyak daripada yang kurang banyak. Dengan lebih daripada 2.1 bilion pelanggan jalur lebar mudah alih sebagai bakal pelanggan, ekonomi ekspresi dan interaktiviti maksimum adalah yang terpenting; reka bentuk terbaik mungkin adalah reka bentuk yang mempunyai interaktiviti terbaik dan “sentuhan pereka” paling sedikit.

Reka bentuk yang menang

Reka Bentuk Responsif: Memperbaikinya

Dalam persekitaran inovatif hari ini, jumlah peranti yang digunakan untuk melayari laman web terus bertambah tanpa ada tanda-tanda melambatkan. Reka bentuk responsif mewujudkan pengalaman pengguna yang optimum di seluruh peranti dari desktop hingga telefon pintar, memudahkan pengguna membuat keputusan pembelian yang cepat dan berpendidikan.

Mengapa Reka Bentuk Responsif Sangat Penting?

Terdapat 2.1 bilion langganan jalur lebar mudah alih.

87% orang dewasa Amerika mempunyai telefon bimbit.

55% menggunakan telefon bimbit mereka untuk masuk ke dalam talian, 31% daripadanya dalam talian kebanyakannya menggunakan telefon mereka daripada komputer atau peranti lain.

45% orang dewasa Amerika mempunyai telefon pintar, 90% menggunakan telefon mereka untuk masuk ke dalam talian.

Pengguna Amerika menghabiskan purata 1.4 jam sehari melayari laman web pada peranti mudah alih.

37% pemilik telefon bimbit dan 64% pemilik telefon pintar menggunakan telefon mereka untuk mendapatkan berita dalam talian.

60% pengguna tablet lebih suka membaca berita di web mudah alih daripada melalui aplikasi.

79% pengguna telefon pintar menggunakan telefon mereka untuk membantu membeli-belah.

71% pengguna mengharapkan laman mudah alih dimuat secepat jika tidak lebih cepat daripada laman web desktop.

74% pelawat bergerak akan meninggalkan laman web sekiranya memerlukan lebih daripada 5 saat untuk memuat turun.

Anatomi Laman Responsif

Pada peringkat pembangunan, terdapat 3 bahan teknikal reka bentuk laman web responsif:

  1. Grid Bendalir – Reka bentuk berdasarkan peratusan yang sesuai dengan ukuran skrin dengan sewajarnya.
  2. Imej Fleksibel – Imej bersaiz dalam unit relatif untuk mengelakkannya dipaparkan di luar elemen yang mengandunginya.
  3. Pertanyaan Media – Cara untuk menerapkan peraturan CSS ke halaman berdasarkan ukuran penyemak imbas yang dipaparkan.

5 elemen reka bentuk utama e-dagang yang responsif memastikan pengalaman pengguna terbaik.

The Masthead

Kepala

Harus kecil dan sederhana untuk memastikan fokus pada isi inti, tetapi mudah dilihat.

Cuba gunakan kecerunan CSS linier dan bukannya gambar latar untuk memberikan fleksibiliti reka bentuk yang lebih besar dan mengurangkan permintaan HTTP.

Logo

Harus lebih besar dan diperkecil hingga dimensi akhir.

Navigasi Utama

Atau menu utama boleh menjadi sukar ketika bekerja dalam reka bentuk responsif kerana ruang yang terhad yang disediakan oleh skrin telefon kecil.

Terdapat banyak pilihan untuk mengatasi ini bergantung pada jumlah pilihan menu yang disukai, termasuk:

  • Penanda menu sederhana di tajuk yang menukar navigasi utama pada skrin kecil.
  • Penanda header yang melompati pengguna ke navigasi yang diletakkan di footer.
  • Nail slaid kiri (seperti Facebook) yang diakses oleh ikon menu, menunjukkan dulang yang meluncur masuk dari kiri dan memindahkan kandungan utama ke kanan.
  • Navigasi yang melapisi kandungan utama halaman.

Kotak carian

Kotak carian membolehkan pengunjung melompat terus ke tempat yang mereka cari.

Galeri Gambar

Navigasi Imej

Daripada navigasi gambar berasaskan teks, tunjukkan pratonton pandangan produk yang berbeza.

Imej harus dihubungkan dengan rakan sejawatnya yang lebih besar.

Imej Produk

Jadikan imej produk anda sebagai titik fokus halaman.

Cubalah skrip ringan yang disebut Swipe.js untuk membuat karusel gambar mesra sentuhan, yang membolehkan pengguna meleret di antara foto produk dengan cara mesra sentuhan.

Penerangan Produk

Gambaran Keseluruhan Produk

Sekiranya muncul di atas gambar (di markup sebelum bekas gambar), memberikan nama produk, harga, dan populariti atau penilaian kepada pengunjung.

Dengan cara ini, mereka dapat menentukan apakah itu produk yang mereka cari tanpa perlu menunggu sisa halaman dimuat.

Kiraan Ulasan

Kiraan ulasan melonjak ke ulasan di bawah perincian produk.

Perincian kecil ini dapat sangat berharga bagi 79% pengguna telefon pintar yang menggunakan telefon mereka untuk membantu membeli-belah, dan bahkan mungkin membuat atau menghentikan penjualan.

Bidang Kuantiti, Dropdown Saiz, dan Butang Tambah ke Troli

Butang Kongsi

Berkongsi kandungan dan produk di rangkaian sosial boleh menjadi cara yang baik untuk meningkatkan pendedahan. Cukup mudah dengan satu butang.

The Footer

Navigasi Kaki

Menyediakan akses ke navigasi laman web utama adalah cara yang baik bagi pengguna untuk melompat ke bahagian lain dan mengelakkan meninggalkan mereka pada jalan buntu.

Nombor dan E-mel Perkhidmatan Pelanggan

Ingat, telefon membuat panggilan! Pengunjung mungkin mempunyai pertanyaan tentang produk dan mempunyai kemampuan untuk menghubungi wakil pelanggan dengan cepat dapat menjadi apa yang mereka perlukan untuk membuat keputusan pembelian.

Kembali ke Pautan Atas

Sekali lagi, ini mengenai pengalaman dan kemudahan pengguna!

Sumber

  • Lembaran Fakta Teknologi Mudah Alih – pewinternet.org
  • Aliran Penggunaan Internet Mudah Alih dan Kelakuan Pengguna – madmobilenews.com
  • MobiForge – mobithinking.com
  • Mengapa 2013 Merupakan Tahun Reka Bentuk Web Responsif – mashable.com
  • Anatomi Reka Bentuk Web Responsif Pertama Bergerak – bradfrostweb.com
  • Bagaimana Grid Bendalir Berfungsi dalam Reka Bentuk Web Responsif – 1stwebdesigner.com
  • Di luar Pertanyaan Media: Anatomi Reka Bentuk Web Adaptive – slideshare.net
  • Apa Reka Bentuk Web Responsif? – johnpolacek.github.io
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map