Isang Komprehensibong Gabay sa Pagdidisenyo ng Mga Background sa 2024

Kung nag-subscribe ka sa isang serbisyo mula sa isang link sa page na ito, maaaring makakuha ng komisyon ang Reeves and Sons Limited. Tingnan ang aming pahayag ng etika.

Kapag ang pinakamahalagang bahagi ng anumang disenyo ng website, ang background ng isang site ay maaaring magamit sa maraming mga paraan upang makatulong na lumikha ng isang mas mahusay na karanasan ng gumagamit.

Ngayon, ang paglikha ng mga background nang maayos ay mas mahirap kaysa dati, at nagpapakita ng ilang mga bagong hamon, habang nililimitahan ang ilan sa mga potensyal na iba pang mga background.wise ay magkakaroon ng.

Halimbawa, ang background sa mga nakaraang panahon ay maaaring aktwal na magamit bilang isang praktikal na bahagi ng disenyo. Maaari kang maglagay ng mga arrow dito, halimbawa, upang idirekta ang atensyon ng manonood sa isang bagay na mahalaga.

Kung bakit nagbago ang mga bagay ay dahil sa pangangailangan responsive disenyo, at ang pagkakaiba-iba ng iba't ibang laki ng screen at uri ng screen na maaaring ginagamit ng mga tao.

Bilang isang resulta, ang background ay naging isang hindi gaanong mahalagang elemento sa disenyo ng site ngayon, at medyo maraming mga site ang walang opisyal na background sa lahat.

Talaga bang mahalaga ang mga background? Upang malaman, sinuri namin ang nangungunang 30 mga website na niraranggo (hindi kasama ang mga pag-uulit) at ang mga resulta ay talagang kawili-wili.

Tulad ng makikita mo mula sa larawan sa itaas, ang mga nangungunang website na may ranggo ay hindi nag-abala sa mga background, at tila hindi ito nakagawa sa kanila ng kaunting pinsala patungkol sa pagtanggap ng gumagamit.

Lumilipad ito sa harap ng kumbensyonal na pag-iisip tungkol sa disenyo ng website, ngunit mahirap makipagtalo sa mga malamig na katotohanan. Kamangha-mangha, ang unang website sa listahan na may background ay hindi papasok hanggang sa maabot mo ang numero 10, na Twitter, at makikita lang ang background na iyon kung hindi ka naka-log in.

Sa nangungunang 30 mga website para sa 2017, ang mga site lamang na may tamang background ay:

  • Twitter, na may background na potograpiya (niraranggo ang ika-10)
  • Live (Outlook), na may isang solidong background ng kulay (niraranggo sa ika-12)
  • NetFlix, na may background sa collage (niraranggo sa ika-21)
  • Ang WordPress, na may isang solidong background ng kulay (niraranggo 26th)
  • Bing, na may background sa potograpiya (niraranggo ang 29th)
  • Tumblr, na may background sa potograpiya (niraranggo ang 30th)

Kaya't 20 porsyento lamang ng nangungunang 30 mga website ang may mga background, at ang mga nagawa nito ay hindi maganda ang listahan.

Ang tanging bentahe ng background ng site ay nakakatulong itong mapanatili ang isang pakiramdam ng pagkakakilanlan ng site sa maraming pahina, ngunit dahil may iba pang mga elemento na makakamit din ang layuning ito at maaaring mas mahusay, hindi iyon isang malaking kalamangan.

Ang mga disadvantages ay marami. Ang mga background ay nagpapakilala ng mga karagdagang hamon pagdating sa site responsiveness, at maaaring mangailangan ng madalas na pag-update upang maiwasang maging lipas.

Ang isa pang hamon para sa modernong taga-disenyo ay na bilang karagdagan sa mga static na background, posible ring lumikha ng mga background sa video. Kung pipiliin mo ang huli, mahalaga na malaman kung ano ang iyong ginagawa, dahil maraming mga gumagamit ang makakahanap ng isang hindi magandang naisip na background ng video na nakakainis.

Sa napakaraming dahilan para hindi gumamit ng mga background, maaari kang magpasya na sundin ang mga yapak ng mga nangungunang website na iyon at itapon ang buong ideya sa background nang minsan at para sa lahat. Ngunit kung ang maikling iginiit na ang site ay kailangang may background, ano ang maaari mong gawin? Iyan ang susubukan naming lutasin sa natitirang bahagi ng artikulong ito.

Dapat na nilalaman ang mga background

Ang nilalaman ay dapat palaging nasa isang layer sa itaas ng background ng pahina. Kung hindi mo paghihiwalayin ang mga elemento ng iyong page sa iba't ibang layer, maaari itong lumikha ng mga problema para sa iyo kapag may kailangang baguhin.

Pinakamahusay na kasanayan na gamitin ang paghihiwalay ng layer na ito hangga't maaari. Halimbawa, ang logo ba ng site ay talagang kailangang isama nang direkta sa background? Kadalasan magiging mas makatuwiran na magkaroon ng logo sa isang hiwalay na layer. Sa ganitong paraan kung kailangang ma-update ang logo, maaari itong mai-update nang nakapag-iisa ng buong background.

Ang paggamit ng mga layer sa ganitong paraan ay nangangahulugang mas maraming trabaho para sa iyo sa bahagi ng paglikha ng mga bagay, ngunit mas kaunting trabaho sa panig ng pagpapanatili. Nagbibigay din ito sa iyo ng maximum na kontrol, dahil maaari mong itago ang mga bagay, ilipat ang mga ito, o gawing iba ang kilos ayon sa iyong mga pangangailangan sa anumang oras.

Ipinapakita ng imaheng ito ang perpektong istraktura para sa isang template ng disenyo ng background:

Sa loob ng bawat layer (maliban sa base layer) mayroong saklaw upang lumikha ng karagdagang mga layer para sa kahit na mas mataas na antas ng paghihiwalay kung kailangan mo sila.

Ang mas maraming antas ng paghihiwalay na gagawin mo, mas maraming kontrol ang maaari mong makuha. Maaari mong maramdaman na hindi iyon mahalaga sa iyong ngayon, ngunit madalas itong nangyayari na nagiging salik ito sa ibang pagkakataon.

Ang nag-iisang pinakamahalagang bagay na dapat maunawaan ay ang "background" ay anumang hindi nilalaman. Kaya't ang teksto o mga imahe na inilaan ay nasa pahina ngunit hindi bilang bilang ng nilalaman na bilang bahagi ng background, ngunit hindi lahat ay uuri-uriin ang mga ito sa ganoong paraan.

Pag-frame

Noong mga unang araw ng disenyo ng web, ang pag-frame ay isang simpleng bagay lamang ng pag-eehersisyo kung saan dapat ang iyong nilalaman ay nauugnay sa background. Sa araw na ito ng responsive disenyo, gayunpaman, ito ay karaniwang mas kumplikado kaysa doon.

may responsive disenyo, mayroon ka lamang dalawang pagpipilian upang harapin ang isyu sa pag-frame. Ang unang opsyon ay ang sukatin ang nilalaman at larawan sa background na may kaugnayan sa magagamit na laki ng screen. Ito ay pinakamainam kapag ang integridad ng disenyo ang pinakamahalagang salik, kahit na ito ay magiging isang bihirang sitwasyon.

Ang pangalawang pagpipilian ay i-phase out ang mga seksyon ng background, o kahit ang buong background, sa mas karaniwang sitwasyon kung saan ang pagiging totoo ng nilalaman ay mas mahalaga kaysa sa integridad ng disenyo.

Ang isyung ito ng "integridad ng disenyo", sa pamamagitan ng paraan, nangangahulugan lamang na palaging pareho ang disenyo, anuman ang uri ng screen na tiningnan ito. Ang kabaligtaran ay kung saan laging nakikita ang nilalaman (higit pa o mas kaunti) magkapareho anuman ang uri ng screen na ito ay tiningnan.

Paggamit ng scaling para sa responsiveNess

Kapag gumamit ka ng scaling upang mapanatili ang pare-parehong pag-frame sa iba't ibang uri at oryentasyon ng device, pinapanatili nito ang integridad ng iyong disenyo, ngunit maaaring hindi pa rin palaging magiging resulta ang iyong inaasahan o ninanais, lalo na kung gumagamit ka ng photographic na background.

Tingnan natin ang isang halimbawa ng pamamaraang ito sa pagkilos. Simula sa Samsung Galaxy S5 sa portrait mode (tandaan na ang mga larawang ito ay naka-scale upang magkasya sa artikulo, kaya ang text na makikita mo doon ay talagang nababasa sa mismong device).

Ganito ang hitsura sa landscape mode (halos palaging mas mahusay na humawak ng telepono sa landscape na oryentasyon para sa lahat maliban sa pagtawag sa telepono, ngunit ang mga tao ay nagpipilit pa ring hawakan ang kanilang mga telepono sa portrait na oryentasyon.

Tulad ng nakikita mo, ang layout ay perpektong pagmultahin kapag na-scale, kahit na mayroon ka lamang 640 x 360 pixel upang gumana. Susunod na mayroon kaming iPad sa orientation ng larawan.

At tanawin.

Ang bagay na mapapansin mo kapag ginamit ang pag-scale ay ang maliit na pagkakaiba-iba sa pagitan ng iba't ibang mga device at resolution, maliban na maaaring magkaroon ng maraming nasayang na vertical space sa portrait view.

Totoong magiging mas mahusay na gumamit ng iba't ibang mga pamamaraan sa background at mga bahagi ng nilalaman, upang ang mga item sa menu ay ibabalot sa isang 2 ร— 2 grid sa halip na laging manatili sa 1 ร— 4 na layout, ngunit ang dahilan na hindi ito ginagawa sa ganoong paraan ay dahil imposibleng mahulaan kung magkano ang magagamit na patayong puwang.

Sa gayon ang bentahe ng pag-scale ay kapag nais mong matiyak na ang ilang bahagi ay palaging mananatili sa pagtingin, anuman ang mga pangyayari.

Gamit ang phased hide & reveal responsiveNess

Ang isang mas praktikal na senaryo, at ang gustong gamitin ng karamihan sa mga taga-disenyo, ay isang disenyo kung saan ang background (o mga bahagi nito) ay maaaring i-phase out kung walang sapat na espasyo upang ipakita ito, kaya ang nilalaman ng site ay palaging nakakakuha ng maximum na atensyon.

Narito ang isang halimbawa ng pagkakaiba kapag ginagamit ang pamamaraang ito. Gagamitin namin ang parehong mga device at oryentasyon upang ilarawan. Una ay Samsung Galaxy S5 portrait.

Samsung Galaxy S5 na tanawin.

Potograpiya ng iPad.

iPad Landscape.

Dito makikita mo ang isang malaking pagkakaiba sa pagitan ng mga device. Ang maliit na screen ng Samsung Galaxy S5 ay hindi pinapayagan ang background na ipakita, hindi alintana kung ang device ay hawak sa portrait o landscape na oryentasyon, at kung ano ang ipinapakita ay inaayos upang magkasya sa magagamit na espasyo.

Kapag ang parehong site ay tiningnan sa iPad, kung gayon ang background ay palaging ipinapakita anuman ang orientation, ngunit may ilang pagkakaiba sa nakikita.

Pinakamahusay na mga konsepto para sa disenyo ng background (sa pagkakasunud-sunod)

1. Solid na kulay (o walang kulay)

2. Photographic (nakaunat)

3. Maliit na tile (perpektong seamless)

4. Malaking tile (perpektong seamless)

Ang dapat mong iwasan ay ang pag-tile ng mga photographic na background maliban kung magagawa iyon sa paraang hindi ito mahahalata. Ang pag-stretch ay karaniwang pinakamainam para sa mga photographic na background, o upang i-confine ang mga ito sa loob ng isang paunang natukoy na espasyo.

Ang panahon ng malaking splashy na background ay halos patay na maliban sa mga dalubhasang site na nilalayon lamang para sa pagtingin sa isang desktop. Karamihan sa mga background na idinisenyo para sa desktops ay hindi magiging maganda kapag tiningnan sa mga telepono.

Ang isang workaround na magagawa mo ay upang mag-set up ng isang malaking bilang ng mga breakpoint sa iyong CSS file at idisenyo sadividalawahang mga background para sa bawat breakpoint, ngunit tulad ng dati mayroon kang hamon na ang patayong magagamit na puwang ay hindi maaaring kalkulahin, kahit na ang uri ng aparato ay kilala.

imahe ng header sa kabutihang loob ng

Bogdan Rancea

Si Bogdan ay isang founding member ng Inspired Mag, na naipon ang halos 6 na taong karanasan sa panahong ito. Sa kanyang bakanteng oras gusto niyang mag-aral ng klasikal na musika at galugarin ang visual arts. Medyo nahuhumaling rin siya sa mga fixies. Nagmamay-ari na siya ng 5.

Comments 0 Responses

Mag-iwan ng Sagot

Ang iyong email address ay hindi nai-publish. Mga kinakailangang patlang ay minarkahan *

Marka *

Ang site na ito ay gumagamit ng Akismet upang mabawasan ang spam. Alamin kung paano naproseso ang data ng iyong komento.