Panduan Komprehensif untuk Merekabentuk Latar Belakang pada 2024

Jika anda melanggan perkhidmatan daripada pautan di halaman ini, Reeves and Sons Limited mungkin mendapat komisen. Lihat kami pernyataan etika.

Sebagai bahagian terpenting dalam reka bentuk laman web, latar belakang laman web dapat digunakan dalam banyak cara untuk membantu mewujudkan pengalaman pengguna yang lebih baik.

Hari ini, mencipta latar belakang dengan betul adalah lebih sukar berbanding dahulu, dan memberikan beberapa cabaran baharu, sambil mengehadkan beberapa potensi yang menjadi latar belakang yang lain.wise perlu.

Sebagai contoh, latar belakang pada zaman sebelumnya sebenarnya boleh digunakan sebagai bahagian praktikal reka bentuk. Anda boleh meletakkan anak panah padanya, sebagai contoh, untuk mengarahkan perhatian penonton kepada sesuatu yang penting.

Mengapa keadaan berubah adalah kerana keperluan responsive reka bentuk, dan kepelbagaian saiz skrin yang berbeza dan jenis skrin yang mungkin digunakan oleh orang ramai.

Hasilnya, latar belakang menjadi elemen yang kurang penting dalam reka bentuk laman web hari ini, dan banyak laman web sama sekali tidak mempunyai latar belakang rasmi.

Adakah latar belakang sangat penting? Untuk mengetahuinya, kami memeriksa 30 laman web teratas (tidak termasuk ulangan) dan hasilnya sangat menarik.

Seperti yang anda boleh lihat daripada imej di atas, tapak web yang berada di kedudukan teratas tidak peduli dengan latar belakang sama sekali, dan ia nampaknya tidak memudaratkan mereka sedikit pun berkaitan dengan penerimaan pengguna.

Ini berlarutan dalam menghadapi pemikiran konvensional mengenai reka bentuk laman web, tetapi sukar untuk berhujah dengan fakta yang sukar. Cukup menakjubkan, laman web pertama dalam senarai dengan latar belakang tidak akan bermula sehingga anda mencapai nombor 10, iaitu Twitter, dan latar belakang itu hanya kelihatan jika anda tidak log masuk.

Di 30 laman web teratas untuk 2017, satu-satunya laman web dengan latar belakang yang betul adalah:

  • Twitter, dengan latar belakang fotografi (kedudukan ke-10)
  • Langsung (Outlook), dengan latar belakang warna pepejal (kedudukan ke-12)
  • NetFlix, dengan latar belakang kolaj (kedudukan ke-21)
  • WordPress, dengan latar belakang warna yang kukuh (kedudukan 26th)
  • Bing, dengan latar belakang fotografi (kedudukan 29th)
  • Tumblr, dengan latar belakang fotografi (kedudukan 30th)

Oleh itu, hanya 20 peratus daripada 30 laman web teratas yang mempunyai latar belakang, dan laman web yang betul-betul berada dalam senarai.

Kelebihan tunggal latar belakang tapak ialah ia membantu mengekalkan rasa identiti tapak merentas berbilang halaman, tetapi memandangkan terdapat unsur lain yang boleh mencapai matlamat ini dengan baik dan mungkin lebih baik, itu bukanlah satu kelebihan yang besar.

Kelemahannya banyak. Latar belakang memperkenalkan cabaran tambahan apabila ia datang ke tapak responsiveness, dan mungkin memerlukan kemas kini yang kerap untuk mengelakkan daripada menjadi basi.

Cabaran lain untuk pereka moden adalah bahawa selain latar belakang statik, kini juga memungkinkan untuk membuat latar belakang video. Sekiranya anda memilih yang terakhir, adalah mustahak untuk mengetahui apa yang anda lakukan, kerana banyak pengguna akan menganggap latar belakang video yang dirancang dengan tidak baik akan menjengkelkan.

Dengan begitu banyak sebab untuk tidak menggunakan latar belakang, anda mungkin membuat keputusan untuk mengikut jejak tapak web peringkat teratas tersebut dan membuang keseluruhan idea latar belakang sekali dan untuk semua. Tetapi jika ringkasan itu menegaskan bahawa laman web itu perlu mempunyai latar belakang, apakah yang boleh anda lakukan? Itulah yang akan kami cuba selesaikan dalam artikel ini yang lain.

Latar belakang mesti dibendung

Kandungan mesti sentiasa berada pada lapisan di atas latar belakang halaman. Jika anda tidak memisahkan elemen halaman anda kepada lapisan yang berbeza, ia boleh menimbulkan masalah untuk anda apabila sesuatu perlu diubah.

Amalan terbaik untuk menggunakan pemisahan lapisan ini sebanyak mungkin. Sebagai contoh, adakah logo laman web ini benar-benar perlu dimasukkan terus ke latar belakang? Selalunya lebih masuk akal jika logo berada dalam lapisan yang terpisah. Dengan cara ini jika logo perlu dikemas kini, ia dapat diperbaharui secara bebas dari keseluruhan latar belakang.

Menggunakan lapisan dengan cara ini bermaksud lebih banyak kerja untuk anda dari aspek penciptaan, tetapi lebih sedikit kerja dari aspek penyelenggaraan. Ini juga memberi anda kawalan maksimum, kerana anda dapat menyembunyikan barang, memindahkannya, atau membuatnya berperilaku berbeza sesuai dengan keperluan anda setiap saat.

Gambar ini menunjukkan struktur yang sesuai untuk templat reka bentuk latar belakang:

Di dalam setiap lapisan (kecuali lapisan dasar) ada ruang untuk membuat lapisan tambahan untuk tahap pemisahan yang lebih besar jika anda memerlukannya.

Lebih banyak tahap pemisahan yang anda buat, lebih banyak kawalan yang boleh anda perolehi. Anda mungkin merasakan itu tidak penting untuk anda sekarang, tetapi ia sering berlaku bahawa ia menjadi faktor kemudian.

Satu perkara yang paling penting untuk difahami adalah bahawa "latar belakang" adalah apa-apa yang tidak puas. Jadi teks atau gambar yang dimaksudkan berada di halaman tetapi tidak dianggap sebagai kandungan sebagai latar belakang, tetapi tidak semua orang akan mengklasifikasikannya seperti itu.

Framing

Pada zaman awal reka bentuk web, pembingkaian hanyalah perkara mudah untuk menentukan tempat kandungan anda sepatutnya berkaitan dengan latar belakang. Pada hari ini responsive reka bentuk, bagaimanapun, ia biasanya lebih rumit daripada itu.

Dengan responsive reka bentuk, anda hanya mempunyai dua pilihan untuk menangani isu pembingkaian. Pilihan pertama adalah untuk menskalakan kandungan dan imej latar belakang berbanding dengan saiz skrin yang tersedia. Ini adalah optimum apabila integriti reka bentuk adalah faktor yang paling penting, walaupun ini akan menjadi situasi yang jarang berlaku.

Pilihan kedua adalah menghentikan bahagian latar belakang, atau bahkan keseluruhan latar belakang, dalam situasi yang lebih biasa di mana keterbacaan kandungan lebih penting daripada integriti reka bentuk.

Masalah "integriti reka bentuk" ini, bermaksud bahawa reka bentuknya selalu kelihatan sama, tidak kira apa jenis paparannya. Sebaliknya adalah di mana kandungannya selalu kelihatan (lebih kurang) sama tidak kira apa jenis skrin yang dilihat.

Menggunakan penskalaan untuk responsiveBilut

Apabila anda menggunakan penskalaan untuk mengekalkan pembingkaian seragam merentas jenis dan orientasi peranti yang berbeza, ia mengekalkan integriti reka bentuk anda, tetapi hasilnya mungkin masih tidak seperti yang anda jangkakan atau inginkan, terutamanya jika anda menggunakan latar belakang fotografi.

Mari lihat contoh teknik ini dalam tindakan. Bermula dengan Samsung Galaxy S5 dalam mod potret (perhatikan bahawa imej ini diskalakan untuk dimuatkan dalam artikel, jadi teks yang anda boleh lihat di sana sebenarnya boleh dibaca pada peranti itu sendiri).

Beginilah rupanya dalam mod landskap (hampir selalu lebih baik untuk memegang telefon dalam orientasi landskap untuk segala-galanya kecuali membuat panggilan telefon, namun orang ramai masih berkeras untuk memegang telefon mereka dalam orientasi potret.

Seperti yang anda lihat, susun aturnya sangat baik ketika diskalakan, walaupun anda hanya mempunyai 640 x 360 piksel untuk digunakan. Selanjutnya kita mempunyai iPad dalam orientasi potret.

Dan landskap.

Perkara yang anda akan perhatikan apabila penskalaan digunakan ialah terdapat sedikit variasi antara peranti dan resolusi yang berbeza, kecuali terdapat banyak ruang menegak yang terbuang pada paparan potret.

Sebenarnya lebih baik menggunakan kaedah yang berbeza pada bahagian latar belakang dan kandungan, sehingga item menu akan dibungkus ke dalam grid 2 ร— 2 dan bukannya selalu berada dalam susun atur 1 ร— 4, tetapi alasannya tidak dilakukan dengan cara itu adalah kerana mustahil untuk meramalkan berapa banyak ruang menegak yang akan ada.

Oleh itu, kelebihan penskalaan adalah ketika anda ingin memastikan bahawa beberapa komponen selalu diperhatikan, tidak kira apa keadaannya.

Menggunakan sembunyi & dedah berperingkat responsiveBilut

Senario yang lebih praktikal, dan yang paling kerap ingin digunakan oleh pereka bentuk, ialah reka bentuk di mana latar belakang (atau bahagiannya) boleh dihapuskan secara mudah jika tidak ada ruang yang mencukupi untuk menunjukkannya, jadi kandungan tapak sentiasa mendapat perhatian yang maksimum.

Berikut adalah contoh perbezaan apabila menggunakan kaedah ini. Kami akan menggunakan peranti dan orientasi yang sama untuk menggambarkan. Pertama ialah potret Samsung Galaxy S5.

Landskap Samsung Galaxy S5.

Potret iPad.

Landskap iPad.

Di sini anda boleh melihat perbezaan yang ketara antara peranti. Skrin kecil Samsung Galaxy S5 tidak membenarkan latar belakang dipaparkan, tidak kira sama ada peranti dipegang dalam orientasi potret atau landskap, dan apa yang ditunjukkan dilaraskan agar sesuai dengan ruang yang tersedia.

Apabila laman web yang sama dilihat di iPad, maka latar belakang selalu ditunjukkan tanpa mengira orientasi, tetapi ada beberapa perbezaan dalam apa yang dilihat.

Konsep terbaik untuk reka bentuk latar belakang (mengikut urutan)

1. Warna pepejal (atau tanpa warna)

2. Fotografi (diregangkan)

3. Jubin kecil (sempurna lancar)

4. Jubin besar (sempurna lancar)

Perkara yang perlu anda elakkan ialah memasang jubin latar belakang fotografi melainkan ia boleh dilakukan dengan cara yang tidak ketara. Regangan biasanya terbaik untuk latar belakang fotografi, atau untuk mengehadkannya dalam ruang yang telah ditetapkan.

Era latar belakang besar yang memercik hampir mati kecuali tapak pakar yang bertujuan hanya untuk tontonan pada a desktop. Kebanyakan latar belakang direka untuk desktops tidak akan kelihatan baik apabila dilihat pada telefon.

Penyelesaian yang boleh anda lakukan adalah dengan menyediakan sebilangan besar breakpoint dalam fail dan reka bentuk CSS andadividua latar belakang untuk setiap titik putus, tetapi seperti biasa anda mempunyai cabaran bahawa ruang menegak yang tersedia tidak dapat dikira, walaupun jenis peranti diketahui.

gambar header milik

Bogdan Rancea

Bogdan adalah ahli pengasas Inspired Mag, yang telah mengumpulkan hampir 6 tahun pengalaman dalam tempoh ini. Pada masa lapang dia suka belajar muzik klasik dan mendalami seni visual. Dia juga taksub dengan fixies juga. Dia sudah memiliki 5 orang.

Komen-komen Responses 0

Sila tinggalkan balasan anda

Alamat email anda tidak akan disiarkan. Ruangan yang diperlukan ditanda *

Kedudukan *

Laman web ini menggunakan Akismet untuk mengurangkan spam. Ketahui bagaimana data komen anda diproses.