függetlenül attól, hogy telefonunkon, könyvekben vagy weboldalakon van-e, folyamatosan emésztjük az írott szavakat. Az utasításfüzetektől a bolti frontokig a típus körülöttünk van. Gyakran gondolkodunk az írott szó erejéről, de ritkán vesszük figyelembe a tervező szerepét a szó vagy mondat hangjának emulálásában.
A Színfalak Mögött a tervező időt fordított arra, hogy megvizsgálja a szöveg kinézete és a szöveg mondása közötti kapcsolatot. A valóságban a különböző hangulatok, atmoszférák és érzelmek egyszerűen kifejezhetők a típusválasztáson keresztül. De valójában mi a tipográfia—és miért olyan létfontosságú?
ebben a cikkben felemeljük a fedelet mindent, amit tudnia kell a tipográfiáról. Kezdjük a tipográfia meghatározásával,beleértve annak eredetét. Ezután foglalkozunk a jó tipográfia előnyeivel, valamint a felhasználókra gyakorolt hatásával. Végül megvizsgáljuk a tipográfiát alkotó különböző elemeket,és hogy mit jelentenek.
itt van, mit fogunk fedezni:
- mi a tipográfia?
- miért fontos a tipográfia?
- a tipográfia különböző elemei
- Hogyan válasszuk ki a webhely megfelelő betűtípusát
- következtetés
Kész? Merüljünk bele!
mi a tipográfia?
kezdjük az alapokkal: mi valójában a tipográfia? A tipográfia lényegében a betűk és a szöveg oly módon történő elrendezésének művészete, hogy a másolat olvasható, világos és vizuálisan vonzó legyen az olvasó számára. A tipográfia betűstílust, megjelenést és struktúrát foglal magában, amelynek célja bizonyos érzelmek kiváltása és konkrét üzenetek közvetítése. Röviden, a tipográfia az, ami életre kelti a szöveget.
az alábbi videóban a CareerFoundry UI design mentora, Olga felemeli a fedelet arról, hogy miért fontos a tipográfia—és milyen különbséget tesz a felhasználók számára.
a tipográfia a 11.századra nyúlik vissza, a mozgatható típus innovációja során. A digitális kor előtt a tipográfia szakterület volt, amely könyvekhez és folyóiratokhoz, végül pedig közművekhez kapcsolódott. A tipográfia első példája a Gutenberg Bibliában látható, amely tipográfiai forradalmat indított nyugaton. Fun fact: a Gutenberg Bibliában használt típusstílus ma Textura néven ismert, ma pedig megtalálható a betűtípus legördülő menüben a főbb asztali alkalmazásokban!
gyors előre a mai napig, ahol a tipográfia többnyire mind a digitális világhoz, mind a nyomtatáshoz kapcsolódik. Az internet születésével a tipográfia művészetének kreatív robbanása jött létre. Hirtelen, web tervezők volt rengeteg betűtípusok, típus lehetőségek állnak a rendelkezésükre, így tipográfia vizuálisan változatosabb, mint valaha.
miért fontos a tipográfia?
a tipográfia sokkal több, mint a gyönyörű betűtípusok kiválasztása: ez a felhasználói felület kialakításának létfontosságú eleme. A jó tipográfia erős vizuális hierarchiát hoz létre, grafikus egyensúlyt biztosít a weboldal számára, valamint beállítja a termék általános hangját. Tipográfia kell irányítani, tájékoztatni a felhasználókat, optimalizálja olvashatóság és hozzáférhetőség, és biztosítja a kiváló felhasználói élményt.
vessünk egy kicsit mélyebbre, hogy miért olyan fontos a tipográfia.
tipográfia épít márka elismerése
nem csak a jó tipográfia fokozza a weboldal személyiségét, de a felhasználók szubliminálisan kezdenek társítani a betűtípus szerepelt a webhelyen a márka. Egyedi, következetes tipográfia segít létrehozni egy erős felhasználó következő, bizalmat építeni a felhasználók, valamint segít, hogy készítsen a márka előre.
a tipográfia befolyásolja a döntéshozatalt
a tipográfia mély hatást gyakorol arra, ahogyan a felhasználók megemésztik és érzékelik a szöveg által közvetített információkat. A szemet gyönyörködtető típus sokkal meggyőzőbb, mint a gyenge betűtípusok, amelyek nem erősítik meg a szöveg üzenetét.
tipográfia tartja a figyelmet az olvasók
jó tipográfia lehet a különbség, hogy valaki tartózkodik a honlapon egy perc vagy fél óra. Fontos, hogy az Ön weboldala vizuálisan stimuláló és emlékezetes legyen, a tipográfia pedig nagy szerepet játszik ebben a folyamatban.
a tipográfia különböző elemei
a tipográfia megkezdéséhez először meg kell birkóznia a nyolc alapvető tipográfiai tervezési elemmel.
betűtípusok és betűtípusok
némi zavar veszi körül a betűtípusok és betűtípusok közötti különbséget, sokan a kettőt szinonimaként kezelik. A betűtípus egy tervezési stílus, amely számos különböző méretű és súlyú karaktert tartalmaz, míg a betűtípus a szöveges karakter grafikus ábrázolása. Egyszerűen fogalmazva, a betűtípus a kapcsolódó betűtípusok családja, míg a betűtípusok a betűtípust alkotó súlyokra, szélességekre és stílusokra vonatkoznak.
három alaptípus létezik: serif, sans-serif és dekoratív. Annak érdekében, hogy a felület zavartalan és áramvonalas, egy jó tervező soha nem használ több, mint három betűtípus—és tartsa dekoratív betűtípusok a minimumra. A legtöbb UI tervező párosítja a serif betűtípusokat sans-serif betűtípusokkal, például a fő szöveg beillesztése egy serif betűtípusba, a cím pedig sans-serif betűtípusba, vagy fordítva.
kontraszt
hasonlóan a hierarchiához, a kontraszt segít közvetíteni, hogy mely ötleteket vagy üzenetet szeretné hangsúlyozni az olvasóknak. A kontraszton töltött idő érdekessé, értelmessé és figyelemfelkeltővé teszi a szöveget. A legtöbb tervező kontrasztot hoz létre azzal, hogy különböző betűtípusokkal, színekkel, stílusokkal és méretekkel játszik, hogy hatással legyen az oldalra.
következetesség
a betűtípusok következetességének megőrzése kulcsfontosságú a zavaró és rendetlen felület elkerüléséhez. Az információk továbbításakor elengedhetetlen, hogy ragaszkodjunk ugyanahhoz a betűtípushoz, így az olvasók azonnal megértik, mit olvasnak, és elkezdenek észrevenni egy mintát. Bár ez rendben van, hogy játszani körül szinten hierarchia bizonyos mértékig, ez jó gyakorlat, hogy hozzon létre egy következetes hierarchia betűtípus (egy következetes font fejlécek, egy másik alszámok), és ragaszkodni hozzá.
fehér tér
gyakran “negatív térnek” nevezik, a fehér tér a szöveg vagy a grafika körüli tér. Gyakran figyelmen kívül hagyják, és a felhasználó nem veszi észre, de a fehér tér megfelelő használata biztosítja, hogy a felület tisztátalan legyen, és a szöveg olvasható legyen. A fehér tér akár a szövegre is felhívhatja a figyelmet, összességében esztétikailag kellemes élményt nyújt. A fehér tér gyakran margók, padding vagy csak olyan területek formájában jelenik meg, ahol nincs szöveg vagy grafika.
Igazítás
az igazítás a szöveg, grafika és képek egyesítésének és összeállításának folyamata annak biztosítása érdekében, hogy az egyes elemek között egyenlő hely, méret és távolság legyen. Sok UI tervező margókat hoz létre annak biztosítása érdekében, hogy logójuk, fejlécük és szövegük egymáshoz igazodjon. A felhasználói felület összehangolásakor jó gyakorlat, hogy figyeljen az ipari szabványokra. Például a szöveg jobbra igazítása ellentétesnek tűnik az olvasók számára, akik balról jobbra olvasnak.
Color
a szín a tipográfia egyik legizgalmasabb eleme. Ez az, ahol a tervezők valóban kreatív, emelje fel a felület egy új szintre. A szöveg színét azonban nem szabad enyhén venni: szegező a betűtípus színe lehet, hogy a szöveg látszanak, közvetíteni a hang az üzenet—, de ha ez rossz eredményezheti, hogy egy rendetlen felület, szöveg, amely ütközik a helyszínen színek.
a színnek három fő összetevője van: érték, színárnyalat és telítettség. Egy jó tervező tudni fogja, hogyan kell egyensúlyba hozni ezt a három összetevőt, hogy a szöveg mind szemet gyönyörködtető, mind tisztán olvasható legyen, még a látássérültek számára is. Gyakran előfordul, hogy a tervezők ezt úgy tesztelik, hogy a szöveget szürkeárnyalatban (szín nélkül) nézik meg, ha a szöveg túl sötét vagy túl világos a háttér színével szemben.
hierarchia
a hierarchia létrehozása a tipográfia egyik legfontosabb alapelve. A tipográfiai hierarchia célja, hogy egyértelmű különbséget tegyen a kiemelkedő példányok között, amelyeket először észre kell venni és el kell olvasni, valamint a szabványos szövegmásolatot. Egy olyan korban, rövid figyelmet ível által előidézett szociális média, tervezők arra ösztönzik, hogy tömör, és hozzon létre betűtípusokat, amelyek lehetővé teszik a felhasználók számára, hogy fogyasztják a szükséges információkat rövid idő alatt.
hierarchia lehet létrehozni méretezés, szín, kontraszt, és igazítás. Ha például az elején van egy felkiáltójel ikonnal ellátott másolatsor, amely piros vagy nagyobb, mint az előző példány, akkor ez egy vizuális nyom az olvasók számára, hogy cselekvésre szólít fel. A tipográfiai hierarchia legjellemzőbb példája a méret: a címsoroknak mindig nagyobbnak kell lenniük, mint az alszámok és a standard szöveg.
hogyan választja ki a megfelelő betűtípust a webhelyéhez?
most, hogy megismerkedtünk a különböző tipográfiai elemekkel, beszéljünk az interfész tipográfiai elemeinek kiválasztásának folyamatáról. Olyan sok különböző betűtípus és betűtípus közül lehet választani, ez könnyen úgy érzi, túlterheltek. A helyes választás attól függ, hogy sokkal több, mint látni, hogy mi néz ki szép. Íme néhány kulcsfontosságú szempont:
gondoljon a személyiségre
hogyan szeretné, hogy a felhasználók érezzék magukat, amikor először belépnek a webhelyére. Szeretne utánozni egy barátságos légkört? Szeretné, hogy a webhely csúcsminőségűnek érezze magát, barátságos, játékos, vagy komoly? Fontos, hogy a tipográfia tükrözze a márka vagy a termék személyiségét. Egy jó kiindulási pont, amikor szembesül ezzel a kihívással, hogy meghatározza a fő vonások a márka, és elkezd gyűjteni tipface, amelyek tükrözik ezeket a tulajdonságokat. Innentől kezdve észreveheti a tendenciát.
tükrözze a hangot
ugyanilyen fontos megfontolni, hogy a betűtípus hogyan harmonizál az üzenet hangjával. Például, ha komoly vagy fontos információkat szeretne közvetíteni, válasszon egy kevésbé stilizált vagy dekoratív betűtípust, amely mind egyértelműen olvasható, mind korlátozza a figyelemelterelést.
ne fukarkodik funkció
funkció ugyanolyan fontos, mint forma: nincs semmi rosszabb, mint egy weboldal, amely úgy néz ki, szép, de teljesen olvashatatlan, ami akkor kattintson a rossz gombot, vagy hogy egy rossz fordulatot, mert az utasítások nem voltak egyértelműek. Amikor arról döntenek, milyen betűtípusok közé a felület, meg a stílus, esztétikai, valamint a hang-félre, tükrözik-e a betű olvasható, olvasható, valamint hozzáférhető. Lehet-e a szöveg olvasható törzs nélkül? A karakterek elég különbözőek?
fontolja meg a teljesítményt
egy dolog, amit sok tervező gyakran figyelmen kívül hagy, a webböngésző-Barát betűtípusok kiválasztása. A gyakran használt betűtípus-könyvtárak, például a Google betűtípusok webalapú betűtípusfájlokat kínálnak, amelyek tökéletesen megjeleníthetők egy böngészőben, bármilyen probléma nélkül. Pro tipp: webes betűtípusok letöltésekor soha ne töltsön le több karakterkészletet, mint amire szüksége van. Így elkerülheti a túlsúlyt!
get inspired
Ha nem biztos benne, hol kezdje, szánjon egy kis időt arra, hogy megnézze, mit csinálnak más emberek. Nyisd ki a szemed, hogy a tipográfia, amit látsz körülötted. Észrevehet hasonló mintákat? Lát jó és rossz tipográfiai példákat? Még a tipográfia hashtagek követése a közösségi médiában, vagy a tipográfia keresése a Pinteresten néhány jó ötletet ad neked arról, hogy mi van odakint. A további inspiráció érdekében megnézheti ezt a nyolc tipográfiai tendenciát is.
szánjon egy kis időt a
tesztelésére a legjobb módja annak, hogy megfejtse, melyik betűtípust használja az interfészhez? Teszt, teszt és teszt! A valódi felhasználók hasznos visszajelzéseinek összegyűjtésével világosabb betekintést nyerhet abba, hogy mi működik, mi nem, mi olvasható, Mi érzi magát ellenintuitívnak vagy zavarosnak.
következtetés
tipográfia gyakran figyelmen kívül hagyják, de ez egy fontos eleme a felhasználói felület kialakítása. Mastering tipográfia látni fogja, hogy jól az utat, hogy egyre fantasztikus UI tervező! Ha nem biztos benne, hogy hol kezdje, miért nem megy a kedvenc weboldalak, és elkezd egy megjegyzés, hogy milyen betűtípusokat mentek.
szeretne többet megtudni a felhasználói felület kialakításáról? Nézze meg ezeket a kapcsolódó blogbejegyzéseket:
- 10 példa a gyönyörű blogokra, amelyek szögezték a felhasználói felület kialakítását
- 32 felhasználói felület elemei az UI tervezőinek: a végső szójegyzék
- itt van, hogyan kell megtervezni egy ikont a semmiből: lépésről-lépésre útmutató