3 Móttækileg hönnunarhamför - og hvernig á að forðast þau
Móttækilegur hönnunaraðferðir eru mjög gagnlegar fyrir forritara vegna þess að þeir leyfa okkur að þjóna efni á víðtækustu tækjabúnað án þess að þurfa að viðhalda sérstökum útgáfum af vefsvæðinu og án nokkurra neikvæðra gallana við aðrar aðferðir eins og stigstærð og vökvaútlit.
Þessi grein mun leggja áherslu á efstu 3 mistök hönnuðir fundur með móttækilegur hönnun, og mun veita nokkrar aðferðir til að forðast þessar mistök.
Skala vs. vökva vs móttækilegur
Það er mikið af rugli yfir þessum skilmálum og hönnuðir nota þær oft á rangan hátt. Í sannleikanum eru hver þessir greinilegir þróunarþættir í uppsetningartækni sem hafa komið fram með tímanum í takt við framfarir í tækni.
Stækkunarútlit eru hönnuð til að kvarða hvert frumefni miðað við hvert annað atriði . Þeir eru móttækilegir í þeim skilningi að þeir munu mæla innihaldinu virkilega til að bregðast við breytingum á stærð sjónarhússins. Útlitið sjálft er kyrrstætt og breytir stærð hvers frumefni til að viðhalda samræmi.
Ofangreint: dæmi um stigstærð í mismunandi ályktunum: Hönnunarfórnin er læsileg fyrir samkvæmni.
Vökvasnið eru öðruvísi vegna þess að þeir mæla ílát þætti miðað við stærð sjónarhornsins . Þetta er gert með því að nota ættingja eininga, svo sem ems, til að sigrast á vandamálinu með því að draga úr textanum. Hönnunin getur verið brotin af notanda sem skalla hana.
Ofangreint: dæmi um vökvaútlit við mismunandi ályktanir: Hönnunin fórnar í samræmi við læsileika.
Móttækileg útlínur mæla ekki neitt. Þess í stað breytast þau hvað birtist eftir stærð sjónvarpsins.
Ofan: dæmi um móttækilegan skipulag við mismunandi ályktanir.
Hörmung 1) Umbúða valmyndir
Ef þú notar navbar efst á síðunni þinni, þá er svarandi hönnun ætlað að "smella" á hana í sams konar sniði þegar blaðsíðan birtist á litlum skjá. En þetta virkar ekki alltaf fullkomlega ef svæðið er breiðara en brotið, en of lítið til að birta allar valmyndir í einum línu. Niðurstaðan er valmynd sem hylur.
Það eru nokkrar leiðir til að leysa þetta vandamál. Í fyrsta lagi er að draga úr fjölda atriða sem birtast lárétt á stikunni með því að flokka þau í flokka og undirflokka. Þú getur þá notað fellilistar til að birta undirflokka þegar flokkur er valinn.
Önnur leiðin er að breyta brot á lægra gildi. Raunverulegur fjöldi til nota er breiddin þar sem stýrihjólin þín byrjar að mistakast, ekki ákveðin tækistærð.
Þriðja leiðin er að nota annan valmynd fyrir tæki, svo sem renniborð.
Hörmung 2) Að nota föstar breiddarmyndir
Innihaldssvið eru venjulega stillt á stærð miðað við sjónarhornið. Svo þegar mynd með föstum breiddum er breiðari en stærð svæðisins kemur myndin að skurðmyndun.
Ofangreint: dæmi um slæmt föstbreiddar mynd sem er of stórt: Nú hefur það skrúfubara og efni er ýtt af skjánum.
Þú getur forðast þetta vandamál með því að nota ættingjaeiningar til að stilla breidd myndarinnar, eða ef þú notar ramma sem styður það (td Bootstrap) getur þú notað móttækilegan myndflokka (td: class = "img-responsive" ).
Ofangreind: Sama þáttur með móttækilegri myndatökuaðferð: Nú er skrúfa barinn farin.
Hörmung 3) Element röskun
Þetta er svolítið meira hylja en í rauninni hvað gerist þegar útlitið er sýnt á litlu útsýni er að einhver óháð dálka hegða sér eins og línum. Þetta er vandamál vegna þess að truflun á innihaldinu breytir óvæntum stigveldi hönnunarinnar.
Ofan: Dálkur verður röð, truflandi efni.
Lausnin er augljós en þó kemur á óvart hversu margir eru í baráttunni við það: Stilla einfaldlega hæð, breidd og fyllingu frumefnisins. Ef það fer úr stöðu og nær yfir aðrar þættir getur þú þvingað það til að vera þar sem þú vilt með því að hylja það í div og stillingamörkum.
Skipulagning hjálpar til við að forðast mistök
Þessi grein hefur aðeins fjallað um 3 algengustu móttækilegar hönnunarhamranir, en það eru margar aðrar leiðir til þess að góð hönnun geti farið úrskeiðis. Að koma í veg fyrir villur er ekki of erfitt. Nútíma vafrar hafa innbyggða móttækilegan skipulag próf, þannig að skipuleggja hönnunina vel og prófa oft.