Meginreglan um nálægð í vefhönnun
Nýlega tók ég upp gamall hönnun bók sem ég hafði ekki snert um stund, og minnti mig á hönnunarreglu sem margir af okkur setja í framkvæmd sennilega aðeins ómeðvitað, ef yfirleitt.
Bókin fjallar um hönnun fyrir prentun, en ég hélt að það myndi gera frábært efni til að ræða í samhengi við vefhönnun.
Meginreglan um nálægð kallar á að tengdir hlutir séu flokkaðar sjónrænt, skapa minna ringulreið og gera fyrir skipulagða skipulag. Hlutir sem tengjast ekki hvort öðru ætti að vera settur frekar í sundur, til að leggja áherslu á skort á sambandi.
Ég mun ræða um smáatriði og nokkrar leiðir þar sem hægt er að innleiða þetta á áhrifaríkan hátt, en þessi skilgreining ætti að fullnægja því sem við munum ræða í þessari grein.
Rétt notkun nálægðar, í tengslum við aðrar hönnunarreglur, hefur mikil áhrif á reynslu notenda og að lokum heildarframleiðsla vefsvæðisins.
Ekki óttast hvíta plássið
Fyrsta skrefið til að réttlæta meginregluna um nálægð er að skilja mikilvægi hvítra rýmis í hönnun.
Skortur á hvítu rými er algengt vandamál í áhugasviði. Hönnun er leið til að miðla upplýsingum og þegar áhugamenn reyna að flytja skilaboð í gegnum hönnun er náttúrulega tilhneiging þeirra að breiða út innihaldið jafnt til að fylla plássið án þess að hugsa hugsanlega vel skipulagt hvítt rými.
Hvítt rými getur haft áhrif á hegðun notandans eins mikið, ef ekki meira en raunverulegt efni á síðunni. Hvítt pláss stýrir augum notandans í fyrirhugaða átt, skapar andstæða og gerir varanleg áhrif.
Jafnvel þó að W3Avenue vefsíðan hér að ofan inniheldur töluvert magn af efni (með greinum undir fjölmörgum flokkum, eins og hvaða hönnun blogg) og röð auglýsinga í skenkur, er það ekki gagnlegt fyrir notendur.
The rúmgóð herbergi í hausnum og viðeigandi á milli hluta á efnis- og hliðarsvæðunum stuðla að þessu hreinu og skipulagða útlit. W3Avenue er ekki að gera neitt sérstakt einstakt við innihald hennar, en hönnun hennar stuðlar líklega við sterk umferð það fær í a stutt tímabil .
Svo ekki vera óviss um tómt rými í hönnun þinni. Rétt notkun hvíta plásssins er fyrsta skrefið í því að innleiða meginregluna um nálægð og þannig gera hönnun meira sjónrænt aðlaðandi.
Tengdir þættir sem tengjast sjónrænum hópum
Hvítt rými er hins vegar aðeins ein hluti af því að koma í nálægð. Hönnun getur haft mikið af hvítu plássi, en ef hlutir eru ekki flokkaðar á réttan hátt mun hvíta plássið hafa lítil áhrif, eins og sýnt er af tveimur nafnspjöldum hér fyrir neðan:
Kortið til vinstri er ekki ringulreið; það hefur nokkra hvíta pláss. En þættirnir eru ekki rökréttar flokkaðir, þannig að áhrifin eru veik.
Lesandinn er neyddur til að skanna kortið oft. Kortið til hægri hefur hins vegar betra sjónræn áhrif. Lesandinn þarf einfaldlega að líta á það til að taka inn upplýsingarnar (meira um þetta síðar).
Flokkun þætti í kortinu til hægri er einnig rökrétt . Í fyrsta setti af þætti sjáum við nafn fyrirtækisins í stór letri með staðsetningunni fyrir neðan það. Annað sett segir okkur hvernig á að fá upplýsingar um þá þjónustu sem veitt er (þ.e. símanúmer og vefslóð).
Þetta dæmi sýnir mikilvægi nálægðar í prenthönnun og svipað hugmynd er hægt að nota fyrir þætti í vefhönnun, eins og sýnt er á skjámyndinni hér fyrir neðan.
Þó að vefsíða Arora Designs sé ekki flókið eða upplýsingar-þungt, þá er notkun hennar á hvítu plássi og sjónrænum aðskilnaði hópsþátta árangursríkt. Það skal tekið fram hér að "hvítur rými" þarf ekki að vera hvítur; Það getur verið eitthvað tómt rými milli þinna, óháð lit.
Í tilviki Arora Designs, þótt hvíta plássið hafi lit, þjónar það sama tilgangi að sjónrænt aðgreina haus, flakk og efni.
Búa til sjónrænt stigveldi
Notkun hvítt rými á áhrifaríkan hátt og flokkun tengdra þátta er mikilvægt að gefa vefsíðunni skýr sjónrænt stigveldi. Auðvitað er arkitektúr vefsvæðisins og upplýsingaflæði grundvöllur árangursríkrar nálægðar .
Stigveldi er flutt með því hvernig einingar eru flokkaðar og undirflokkaðar.
Þessi stigveldi hjálpar notandanum að skilja hvar þeir hafa verið og hvar þeir vilja fara og hjálpar þannig að miðla tilgangi vefsins. Listi er gott dæmi um þátt sem hefur tilhneigingu til að miðla sjónrænum stigveldi, eins og sýnt er á myndinni hér að neðan:
Bara með því að horfa á listann hér að ofan, án þess að skoða efni einu sinni, muntu sjá að listinn til vinstri hefur skýra sjónræna stigveldi og sýnir tengsl milli atriða (innihaldsefni eru undirflokkar aðalatriðanna).
Þessi stigveldi væri ekki mögulegt án hvítt pláss (þ.mt þjóðhagsleg og ör hvítt pláss). Listinn til hægri er bara handahófi hópur þætti sem ekki virðist tengsl eða stigveldi.
Innleiðing þessarar reglu á vefsíðu með eitthvað eins einfalt og HTML listi er auðvelt. Áskorunin er að nota þessa reglu sem leiðandi þáttur í byggingu vefsvæðisins frá skipulagningu og vírframleiðslu í hönnun.
Layouts sem auðvelt er að skanna og lesa
Innihald sem er skipulagt í stigveldi og rökrétt flokkuð er auðveldara að lesa og skanna .
Fyrirsagnir, til dæmis, ættu að leyfa notandanum að skanna með því að auðkenna aðalatriði. Óþarfi að segja, ætti að skipuleggja efni frá því að komast að því að endurspegla viðeigandi sjónræna stigveldi; Listinn hér að ofan með dálknum er lélegt dæmi vegna þess að innihald passar ekki við sjónræna stigveldið.
Vefsvæði sem notar nálægð í arkitektúr og hönnun er ekki yfirgnæfandi notandi með upplýsingar.
Svo, þrátt fyrir að það sé tiltölulega auðvelt að innleiða meginreglurnar um nálægð á vefsvæðum sem eru léttar á efni, er nálægð miklu mikilvægara á innihaldsríkum vefsíðum.
Fréttir vefsíður eru góðar dæmisögur um þessa reglu. Hér fyrir neðan er samanburður á Los Angeles Times og Globe og Mail .
Á heildina litið hefur LA Times vefsíðu skemmtilega hönnun, aðallega vegna þess að litvalkostir og leturfræði eru til staðar. En það hefur líka hreint og hreint útlit, sérstaklega í hausnum.
Lógóið er stórt og bendir til þess að það stuðli að vörumerkinu á markaðnum. Hluturinn sem er næst merkinu er láréttir flipi að neðan. Vegna þess að stýrihnappurinn er dökk, andstæður það við merkið.
Textinn tengist fyrir ofan lógóið er snyrtilegt raðað, með nóg pláss á milli tveggja hluta. Vinstri samræming á innihaldi í hausnum stuðlar einnig að hreinu útlitinu.
Sérhver hluti af upplýsingum í LA Times hausnum er flokkaður með tengdum atriðum, nema fyrir lógóið, sem er einn. Ekkert í hausnum ruglar þig eða gerir þig að furða hvar það tilheyrir.
Hvað um Globe and Mail website, sýnt hér að neðan?
The Globe and Mail website hefur flókið haus kafla sem nær ekki að innleiða meginregluna um nálægð.
Eina umtalsverða hvíta plássið er í miðjunni, við hliðina á merkinu, sem nær ekkert. Tvær auglýsingar birtast í hausnum og stuðla að ringulreiðinni. Auglýsingarnar kunna að vera nauðsynlegar af fjárhagslegum ástæðum, þannig að vandamálin eru skiljanleg.
Stærsta vandamálið er sóðalegur hluti fyrir ofan stóru auglýsingaborðið. Það er engin skýr munur á milli þátta í þeim hluta.
Þrjár dotted lóðrétt línur reyna að skilja svæðið í fjóra hluta, en fyrsta skilinn gerir ekkert vit. Reyndar myndi þessi hluti líklega líta betur út ef þessi dotted separators voru fjarlægðar.
Grids Hjálp Með Nálægð
Ein leið til að flokka hluti og nota hvítt rými á viðeigandi hátt er að byrja með rist .
Frá léttri sýn á bæði LA Times og Globe og Mail vefsíður virðist aðeins LA Times hafa byggt hönnun sína á rist eða að minnsta kosti notað meginreglur á grundvelli áætlunarinnar. Vefsvæði heimsins og póstsins sýnir lítil merki um ristarsnið.
Rist byggð skipulag, með viðeigandi rennibrautum, gerir ráð fyrir mikið pláss á milli hluta og í mörgum tilvikum brýtur það hönnuðurinn að innleiða meginreglur nálægðar án þess að jafnvel hugsa um það.
Hér að neðan eru skjámyndir frá tveimur vefsíðum sem hafa starfað 960 ristakerfi . Þau eru bæði frekar einföld (þ.e. ekki innihaldsþung eins og fréttasíðurnar sem ræddar eru hér að framan), en þeir sýna að grids gefa hliðarþáttum í andrúmslofti, sem gefur hverjum hluta sitt eigin sjónarhús.
Leiða notendur niður réttan braut
Eitt annað stórt ávinningur af nálægð er að það hjálpi notendum að vafra um vefsíðu án óþarfa tafa eða hindrana. Þegar aðalleiðsögnin er greinilega aðskilin frá öðrum þáttum á síðunni finnur hún strax og er líklegri til að gleymast.
Rétt sjónrænt stigveldi í nálægð hjálpar notendum að grípa dýpra inn á vefsvæðið þitt án þess að hafa áhyggjur af því hvar þeir hafa verið eða hvar þeir eru að fara.
Þeir munu alltaf líða vel, og þeir munu komast að mikilvægustu köflum vefsvæðisins á fljótlegan og skilvirkan hátt.
Vefhönnuðir með litla eða enga reynslu í prenthönnunum gætu haft mikinn ávinning af þeirri grundvallarreglu að prenta hönnuðir hafi verið að setja í framkvæmd frá árinu áður en vefurinn kom upp.
Nálægð er ekki eini hönnunarreglan sem mun hjálpa vefsvæðinu að vera meira nothæft og sjónrænt ánægjulegt, en það er mikilvægur þáttur í huga að mörgum af þeim ástæðum sem rætt er um.
Frekari lestur
Þessi færsla var skrifuð eingöngu fyrir Webdesigner Depot eftir Louis Lazaris, sjálfstætt rithöfundur og vefur verktaki. Louis keyrir Áhrifamikill vefur , þar sem hann sendir greinar og námskeið um vefhönnun. Þú getur fylgst með Louis á Twitter eða hafðu samband við hann í gegnum heimasíðu hans .