Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Business
  2. Responsive Web Design
Business

25 Contoh Reka Bentuk Responsif Laman Web Perniagaan yang Terbaik

by
Length:MediumLanguages:
This post is part of a series called How to Make Responsive Business Websites (Tutorial Guide).
12 Important Advantages of Responsive Web Design
How to Make Responsive WordPress Websites (With Themes)

Malay (Melayu) translation by Fatimah (you can also view the original English article)

Reka bentuk web responsif telah menjadi kemarahan buat sementara waktu sekarang. Apabila anda mempertimbangkan semua manfaat yang dibawa ke meja untuk setiap pemilik tapak, tidak hairanlah orang tidak boleh berhenti bercakap mengenainya.

Laman web responsif bukan sahaja membantu anda meletakkan kedudukan yang lebih baik dalam enjin carian, tetapi juga meningkatkan penukaran anda dan menyebabkan peningkatan trafik mudah alih. Jangan lupa bahawa laman web yang responsif menawarkan pengalaman pengguna yang lebih baik dengan pelawat anda dan boleh membantu dengan membina backlink berkualiti dan meningkatkan stok sosial.

Apa yang lebih baik ialah membuat laman web responsif tidak begitu sukar seperti dulu. Terima kasih kepada pelbagai templat dan tema, anda boleh dengan mudah mengubah laman web yang tidak responsif responsif yang menghasilkan lebih banyak trafik dan lebih banyak pendapatan.

Walau bagaimanapun, mempunyai susun atur responsif tidak mencukupi.Laman web anda juga harus mempunyai ciri-ciri yang tepat untuk niche tertentu dan ciri-ciri ini harus mengikut amalan terbaik dan prinsip teras untuk tindak balas.  Dalam artikel hari ini, kami akan menunjukkan kepada anda beberapa contoh laman web responsif perniagaan terbaik di sekeliling supaya anda dapat menggunakannya untuk inspirasi.

Apa yang membuat visual yang baik di Laman Web responsif?

Cecair grid, imej responsif dan soalan teras media adalah prinsip reka bentuk web yang responsif yang membuat susunan adaptif mungkin, namun terdapat beberapa unsur lain yang setiap laman web yang responsif harus mempunyai.Berikut adalah beberapa peraturan lain yang perlu diingat:

  • Reka bentuk yang menarik . Ia tidak mengatakan bahawa laman web anda harus mempunyai reka bentuk visual yang menyenangkan yang akan membantu anda mempersembahkan produk atau perkhidmatan anda dengan sebaik mungkin.  Walaupun reka bentuk yang menarik sangat subjektif, anda boleh mengikuti beberapa asas asas seperti menggunakan fon yang tidak boleh dibaca, menggunakan ruang, dan elakkan warna-warna yang bercanggah untuk memastikan laman web anda estetika menyenangkan.
  • Imej yang dioptimumkan . Kami telah menyebutkan pentingnya imej responsif; Walau bagaimanapun, imej anda juga harus dioptimumkan untuk web. Ini bermakna bahawa di atas skala yang baik dengan susun atur, mereka harus disimpan dalam format yang sesuai.  Gunakan JPG untuk imej seperti potret, adegan latar belakang atau imej lain yang mempunyai warna yang saksama. Gunakan PNG untuk imej seperti logo, ikon, dan imej lain yang memerlukan latar belakang telus.
  • Lumpuhkan peti cahaya untuk peranti mudah alih . Jika anda mempunyai tapak portfolio, pertimbangkan untuk melumpuhkan kesan peti cahaya pada peranti mudah alih.  Uji saiz medan borang pada setiap peranti.Sebagai pemilik tapak perniagaan, anda mungkin mempunyai beberapa bentuk laman web anda. Pastikan untuk menguji borang pada setiap peranti untuk memastikan medan borang dipaparkan dengan betul dan bahkan cukup besar pada skrin kecil.
  • Uji saiz medan borang pada setiap peranti . Sebagai pemilik tapak perniagaan, anda mungkin mempunyai beberapa bentuk laman web anda.Pastikan untuk menguji borang pada setiap peranti untuk memastikan medan borang dipaparkan dengan betul dan bahkan cukup besar pada skrin kecil.
  • Matikan popup pada peranti mudah alih. Sama seperti imej yang dibuka di peti cahaya, surat berita pop timbul boleh menjadi sukar untuk ditutup pada skrin yang lebih kecil, jadi pertimbangkan melumpuhkan mereka dengan pertanyaan media yang betul.
  • Gunakan butang stok responsif. Akhir sekali, pastikan butang saham responsif dan jangan menyekat kandungan anda pada skrin yang lebih kecil.

25 laman web responsif perniagaan terbaik

Laman web dalam senarai ini mempunyai susun atur responsif yang kelihatan hebat di desktop dan peranti mudah alih serta reka bentuk yang menarik. Oleh itu, mari lihat beberapa contoh reka bentuk web responsif:

1. Andersson Wise Architecs

Andersson Wise Architects menggunakan gambar untuk mempamerkan kebolehan mereka, yang sangat berpatutan untuk arkitek portfolio. Pada versi desktop, menu kecil dan tidak mengganggu dan laman web dengan serta-merta menjadikannya jelas apa studio diketahui.

Andersson Wise Architects Responsive Web Design Example

Pada peranti mudah alih, menu beralih ke bahagian atas skrin, dan dengan itu hanya mengandungi beberapa pautan, tidak perlu menggunakan ikon hamburger. Rajah beralih satu dengan satu, menjadikan laman web ini mudah digunakan tanpa mengira peranti.

Andersson Wise Architects Mobile

2. Stephen Caver

Stephen Caver adalah seorang pereka dan pemaju, jadi tidak hairanlah laman webnya adalah contoh sempurna dari laman web portfolio responsif yang dilakukan dengan betul. Dia hanya menggunakan beberapa contoh portfolio kecil lakaran kecil pada skrin yang lebih kecil.

Stephen Caver

Dia juga menggunakan tipografi cantik dan bersih dan banyak ruang putih untuk memberikan ruang reka bentuk yang cukup untuk bernafas.

Stephen Caver mobile

3. Makanan Sense

Blog foodie ini menunjukkan dua lajur susun atur pada komputer riba dan desktop yang beralih ke susun atur blok pada skrin yang lebih kecil.

Food Sense

Logo dan menu berada di pergeseran sidebar sebelah kiri di atas skrin tanpa membuat pautan sulit untuk diklik atau tersembunyi di belakang menu hamburger.

Food Sense mobile

4. Dibuat oleh Tangan

Made By Hand adalah contoh sempurna untuk memastikan media responsif.Satu contoh laman web ini memaparkan dengan satu siri filem pendek yang meraikan orang-orang yang membuat benda dengan tangan dan dengan itu menggunakan gambar dan video.

Made By Hand Responsive Website Example

Kedua-dua imej dan video kelihatan hebat di desktop dan peranti mudah alih dan fon serif elegan menjadikan teks menyeronokkan untuk dibaca.

Made By Hand mobile

5. Hubungan kurus

Persatuan tipis adalah tapak e-dagang, reka bentuk responsif sangat penting di sini.

Skinny Ties Responsive Design Example

Sekiranya anda menukar saiz laman web dalam penyemak imbas anda atau jika anda melawat pada peranti mudah alih, anda akan melihat penggunaan pintar menu mega yang meluas apabila anda membawanya dan menjadikannya sangat mudah untuk mengklik setiap item menu.

Skinny Ties mobile

6. Aromatics White Lotus

Halaman web responsif ini adalah contoh lain dari tapak e-dagang. Laman ini mempunyai dua menu utama, satu menghubungkan ke laman lain di laman web dan satu lagi yang membolehkan pelawat mengakses katalog Katalog dengan mudah dalam format PDF dan bakul mereka.

White Lotus Aromatics

Pelawat pada peranti mudah alih boleh dengan mudah mengakses menu kedua, meletakkan semula di atas dan di bawah logo.

White Lotus Aromatics mobile

7 . Boston Globe

Jika anda mempunyai banyak kandungan untuk dikongsi di laman web anda, ambil petunjuk dari The Boston Globe.

The Boston Globe

Akhbar dan majalah biasanya mempunyai banyak kategori tapak yang The Boston Globe melipat kaki belakang menu hamburger walaupun pada desktop peranti, yang membolehkan pembaca berfokus pada apa yang paling penting di laman akhbar itu: kandungan itu sendiri.

The Boston Globe mobile

8. Starbucks

Starbucks memanfaatkan menu drop down dan menu telefon tersembunyi untuk meletakkan fokus pada kandungan sambil tetap membenarkan pelawat cara yang mudah untuk mengemudi laman web mereka.

Starbucks

Butang mereka juga berfungsi hebat pada skrin yang lebih kecil, menjadikannya mudah untuk dilihat dan klik.

Starbucks mobile

9. Sasquatch !

Laman web yang responsif untuk Festival Muzik Sasquatch adalah contoh hebat slider yang responsif.

Sasquatch Responsive Website Example

Imej skala kasih sayang apabila anda melihatnya di peranti mudah alih dan mudah mengakses maklumat yang paling penting.

Sasquatch mobile

10. tattly

Kedai dalam talian Menjual tatu sementara melakukan kerja yang baik memudahkan pengalaman checkout pada peranti mudah alih.

Tattly

Anda boleh dengan mudah mengklik butang membayar Amazon atau terus di bawah untuk mengisi borang checkout, yang mempunyai medan besar yang bagus dan butang mudah diklik.

Tattly mobile

11. cantina Valpolicella Negrar

Koperasi wain Itali menggunakan video di laman web mereka, yang mudah dimainkan walaupun pada skrin yang lebih kecil terima kasih kepada butang mainan yang mudah dilihat.

Cantina Valpolicella Negrar

Selain responsif media, perkara lain yang betul adalah tapak penggunaan menu melekit, yang memudahkan untuk mengakses halaman lain.

Cantina Valpolicella Negrar mobile

12. Lebih banyak Bahaya lebih banyak pahlawan

Masa memuat turun minimalis dan cepat adalah kelebihan utama laman web untuk duo rakyat Nashville, lebih berbahaya Lebih banyak Wira. Di desktop, anda boleh memainkan lagu, membaca lirik, memuat turun album dan banyak lagi.

More Hazards More Heroes

Lawati laman web pada peranti mudah alih dan anda hanya akan mencari maklumat yang minimum bersama-sama dengan keupayaan untuk memuat turun album terbaharu mereka.

More Hazards More Heroes mobile

13. kopi illy

Apabila anda melawati laman web Illy di desktop atau komputer riba anda, anda akan melihat surat berita popup yang menawarkan kod diskaun 15%.

Illy Italian Coffee

Bagaimanapun, pada peranti mudah alih, pop timbul digantikan dengan butang sampingan yang halus dan bar atas yang tidak menghalang anda daripada melihat kandungan utama.

Illy Italian Coffee mobile

14. Sweet Hat Club

Menu ringkas dan galeri adalah dua kelebihan terbesar kelab Hat Hat ketika melawat pada peranti mudah alih. Terima kasih kepada warna yang terang, butang mudah dikenali.

Sweet Hat Club

Laman web responsif ini juga menunjukkan bahawa animasi halus bekerja hebat pada skrin yang lebih kecil untuk menarik perhatian panggilan ke tindakan.

Sweet Hat Club mobile

15. Alessandro D'agnano

Pereka dan pengarah seni Itali Alessandro D'agnano mengkhusus dalam reka bentuk responsif, jadi tidak menghairankan bahawa portfolio dioptimumkan untuk semua saiz skrin.

Alessandro Dagnano

Thumbnail grid timbunan di atas satu sama lain sebagai blok pada skrin yang lebih kecil dan font sans serif yang mudah dan bersih tetap tidak dapat dibaca.

Alessandro Dagnano mobile

16. Pekerjaan Autentik

Pekerjaan Autentik adalah direktori dalam talian yang kelihatan hebat di desktop dan peranti mudah alih terima kasih kepada tata letak senarai tradisional.

Authentic Jobs

Anda akan melihat sedikit perubahan pilihan penapis yang bergerak dari posisi bar sisi ke menu lungsur di atas kandungan utama apabila anda melawat tapak pada peranti mudah alih.

Authentic Jobs mobile

17. Kuliah DO

Kuliah DO menggunakan susun atur tiga lajur yang membolehkan memaparkan banyak kandungan di halaman depan.

The DO Lectures

Pada peranti mudah alih, menu dengan jelas dilabel dengan jenis tebal dan video dan kandungan dipaparkan dalam dua lajur.

The DO Lectures mobile

18. St. Sekolah Paul

St. Sekolah Paul membuat homestead sederhana dan minimalis - anda akan melihat imej latar belakang yang besar ditambah dengan beberapa butang yang menjadikannya mudah untuk menavigasi ke kawasan utama laman web.

St Pauls School

St. Sekolah Paul membuat homestead sederhana dan minimalis - anda akan melihat imej latar belakang yang besar ditambah dengan beberapa butang yang menjadikannya mudah untuk menavigasi ke kawasan utama laman web.

St Pauls School mobile

19. ASU Online

Kolej tempatan ini jelaskan apa yang harus anda lakukan apabila anda mendarat di laman web mereka. Dua butang tindak-tindak akan diletakkan di bahagian atas laman web dan berpindah ke bahagian bawah skrin pada peranti mudah alih, menjadikannya mustahil untuk dilepaskan.

ASU Online

Bersama-sama dengan slider responsif, imej, dan fon mudah dibaca, laman web melintasi semua Ts ketika datang ke reka bentuk web responsif kreatif.

ASU Online mobile

20. Rally Interactive

Rali interaktif adalah contoh hebat dari reka bentuk berasaskan tipografi yang membuktikan bahawa anda tidak memerlukan imej untuk membuat laman web secara visual menarik.

Rally Interactive

Di samping menjadi mudah digunakan dan menarik pada peranti mudah alih dan desktop, laman web ini juga interaktif.

Rally Interactive mobile

21. Bakery Court Brown

Brown Field Bakery adalah contoh lain dari laman minimalis yang kelihatan hebat pada semua saiz skrin.

Browns Court Bakery

Desktop pengunjung akan melihat menu mudah, jadi tidak perlu ikon hamburger. Reka bentuk dua lajur disusun apabila anda melihat tapak pada peranti mudah alih.

Browns Court Bakery mobile

22. LifeSeasons

Penggunaan warna-warna besar dan tipografi besar yang dipasangkan dengan butang panggilan untuk bertindak lakonan dan cecair bendalir adalah ciri-ciri utama laman LifeSeasons.

LifeSeasons

Kerana ini, anda boleh menambah kedai secara mudah atau mengetahui lebih lanjut mengenai mereka apa-apa peranti yang anda gunakan untuk melihat laman web ini.

LifeSeasons mobile

23. Buka Pakai

Bukan sahaja laman web terbuka responsif, tetapi ia juga menawarkan visual mata-permen dengan interaksi mikro yang berlaku apabila anda membawa lebih daripada pelbagai item menu.

Open Wear

Interaksi mikro mereka kelihatan walaupun pada skrin yang lebih kecil, namun mereka tersembunyi di sebalik ikon hamburger tradisional sehingga mereka tidak terlalu mengganggu pada skrin yang lebih kecil.

Open Wear mobile

24. Peguam Pertahanan Jenayah Philadelphia

Laman web responsif Lloyd Long adalah contoh hebat penggunaan warna bersemangat untuk menambah penekanan visual terhadap panggilan untuk tindakan, yang berfungsi dengan baik pada peranti mudah alih.

Philadelphia Criminal Defense Lawyer

Borang permintaan sama baik dengan Field input besar dan butang yang besar dan mudah untuk diklik.

Philadelphia Criminal Defense Lawyer mobile

25. Fitness Rival

Saingan kecergasan membuat laman utama yang minimum dan memilih pola latar belakang yang mudah dan bukan imej latar belakang yang besar pada peranti mudah alih.

Rival Fitness

Anda boleh dengan mudah mengakses kawasan lain laman web dengan butang pautan yang menjadi sedikit lebih besar pada skrin yang lebih kecil sementara menu menyembunyikan di belakang ikon hamburger.

Rival Fitness mobile

Lebih banyak contoh reka bentuk Web responsif

Saya harap anda telah menemui koleksi contoh reka bentuk web responsif ini akan membantu. Untuk contoh reka bentuk yang sangat responsif, lihat pengeditan pos ini template reka bentuk web yang tersedia pada elemen Envato dan GraphicRiver 

Dapatkan inspirasi oleh contoh-contoh responsif Laman Web Perniagaan ini

Contoh di atas hanyalah hujung gunung kecil ketika datang ke laman web contoh responsif, tetapi kami berharap mereka telah memberi inspirasi kepada Anda untuk mengambil langkah pertama dan memastikan laman web Anda responsif. Mulailah dengan memilih template responsif atau tema yang sesuai untuk laman web anda dan kemudian menggunakan petua reka bentuk web responsif kami untuk membuat laman web baharu anda dengan mudah.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.