Bevezetés az arányosságba

Az arányosság a művészetben és a formatervezésben régóta meghatározza a szépséget. Az ókori egyiptomiak rácsrendszert használtak a falfestményeikhez, ami segített a lépték, az arányok megállapításában és a hierarchia szemléltetésében. Az ókori görögöket lenyűgözték az emberi test arányai. Az aranymetszést használták a Gutenberg-biblia “tökéletes” arányainak megteremtéséhez. Nincs hiány példákból az arányok gondos mérlegelésére.

Az arány ma is erőteljes tervezési elvként él, amely segít kialakítani a konzisztenciát, a hierarchiát, a ritmust és az általános szépséget a tervezésben. Ebben a leckében azt tárgyaljuk, hogyan használjuk az arányosságot a felhasználói felület tervezésében.

Size vs Scale vs Proportion

Hogy kihasználhassuk az arányosság előnyeit a felhasználói felület tervezésében, először is meg kell értenünk a méret, a méretarány és az arányosság közötti különbségeket. Mindhárom fogalom összefügg, de van néhány egyértelmű különbségtétel, amelyet figyelembe kell vennünk.

A méret egy elem tényleges méretei, amelyeket gyakran px-ben, pt-ben, em-ben, rem-ben stb. mérnek.

Ez a logó mérete például 75px magas és 275px széles.

A méretarány egy elem relatív méretei, gyakran százalékban vagy többszörösében mérve.

Egy elem például méretezhető úgy, hogy nagyobb vagy kisebb legyen az eredeti méreténél.

Az arányosság két vagy több méretarányos elem harmonikus viszonya.

Ha például egy elem mérete növekszik, a többi elemnek is ugyanolyan mértékben kell növekednie, hogy arányos maradjon.

Az arányosság a felhasználói felület tervezésében

Az arányos és az aránytalan logó összehasonlítása egy dolog, de valószínűleg elgondolkodik azon, hogy “Hogyan működik ez a felhasználói felület tervezésében?”. Elvégre a különböző képernyőméretek és eszközök mellett nem lehet arányos UI-t tartani, igaz? A válasz erre a kérdésre: “Igen és nem.”

A felhasználói felületeken jellemzően statikus és folyékony elemek kombinációja található.

  • A statikus elemek ugyanolyan méretűek maradnak, függetlenül attól, hogy mekkora vagy kicsi a képernyő.
  • A folyékony elemek a tárolójuk meghatározott százalékára méreteződnek.

A statikus elemek és a folyékony elemek összehasonlítása definíció szerint soha nem eredményezne arányos kialakítást, mivel nem azonos mértékben méreteződnek. A felhasználók azonban jellemzően nem váltogatják az eszközöket, miközben a felhasználói felületét tapasztalják.

Ezt szem előtt tartva lehetséges az arányosság használata a felhasználói felület tervezésében. Azonban lehet, hogy nem úgy, ahogyan azt várnád.

Mértékegységek a felhasználói felület tervezésében

Valószínűleg hallottad már a “pixel” kifejezést, amelyet leggyakrabban a digitális termékek mértékegységeként használnak. Ez általánosan elfogadható volt egészen 2010-ig, amikor az Apple bevezette a Retina kijelzőt.

A Retina kijelző megváltoztatta a “méretről” való gondolkodásunkat azzal, hogy kétszer annyi pixel került a kijelző négyzetcentiméterére. Míg egy elem mérete a Retina és a nem Retina kijelző között azonosnak tűnik, az adott elemet alkotó pixelek teljes száma jelentősen eltér. Például egy gomb, amely egy hagyományos kijelzőn 48 pixel magas, most 96 pixel magas lenne egy Retina kijelzőn a pixelsűrűség miatt.

Azóta számos különböző nagy pixelsűrűségű (HPD) képernyő vált elérhetővé számos különböző márkában és eszközön. Szerencsére a HPD-képernyőket jellemzően az határozza meg, hogy négyzetcentiméterenként hány pixelrel több fér el, mint a szabványos 1X pixelsűrűségű kijelzőn.

A legtöbb képernyő például 1X, 2X vagy 3X pixelsűrűségűnek mondható.

A “pixel” kifejezés még mindig általánosan elfogadott egy elem méretének leírására. A félreértések elkerülése érdekében azonban sok tervező inkább a “pont” vagy “pt” kifejezést használja, amely a képernyő pixelsűrűségétől függetlenül írja le a méretet.

A lecke hátralévő részében a “pt” és a “px” kifejezéseket felváltva fogjuk használni, mint mértékegységet a tervezésünkben szereplő elemek közötti kapcsolatok leírására.

A 8pt rácsrendszer

A tervezőszoftverekkel, például Illustrator, Photoshop, Sketch, XD, Figma stb. való munka során nagyon gyakori, hogy a tervezők rácsokat vagy oszlopokat használnak a tervezés segítésére. Az ebben a tanfolyamban tárgyalt tervezési elvek közül számos megvalósítható a rácsok vagy oszlopok segítségével, így nem meglepő, hogy ezek népszerű eszköznek számítanak a tervezők eszköztárában.

Van azonban egy különleges stratégia, amely kivételesen jól működik az arányok esetében. Ez a stratégia a 8pt Rácsrendszer néven ismert.

A 8pt Rácsrendszert először a Google Material Design specifikációja vezette be. Szerencsére viszonylag könnyen érthető. Lényegében egy olyan rácsot akarsz használni, amely 8 x 8 pt-os négyzetekből áll. Ahogy ezen a rácson tervezel, biztosítanod kell, hogy minden elem a rácshoz illeszkedjen.

Ez olyan elemeket eredményez, amelyek méretei mindig oszthatók 8-cal. Az ilyen módon történő tervezéssel könnyű megtartani az elemek arányosságát, miközben egyfajta függőleges ritmus érzetét kelti a designban.

Miért 8 pont?

A 8pt rendszer két fő okból a legszélesebb körben elfogadott:

  • A leggyakoribb képernyőméretek 8-cal oszthatók, így a tervek a legtöbb eszközön nagyon élesek és világosak lesznek (nincs osztott pixel).
  • A weben ajánlott alap betűméret 16px. Ez lehetővé teszi a fejlesztők számára, hogy a weblap elemeit REM-egységekben méretezzék, miközben hűek maradnak a rácsrendszerhez.

Összességében több előnye van a 8 pont használatának, mint bármely más számnak a rácshoz. Használhat azonban egy olyan számot is, mint a 10pt vagy a 12pt, ha az jobban megfelel Önnek.

Miért nem 4 pont?

A Google Material Design specifikáció TÉNYLEG a 4pt használatát ajánlja a “Kisebb komponensek, például ikonográfia és tipográfia” esetében. Azonban a felhasználói felület elemeinek többsége még mindig kezelhető a 8pt rendszerrel, így kezdetben ez a népszerűbb.

Az aranymetszés

A 8pt rácsrendszernek egyértelmű előnyei vannak a felhasználói felület tervezésében, de ha egy gyors Google-keresést végez a “Proportion in UI Design” kifejezésre, akkor egy címoldalnyi találattal fog találkozni az aranymetszéssel kapcsolatban.

Az aranymetszés 1:1,618, és úgy tartják, hogy a matematika és az esztétikai szépség metszéspontja. Sok tervező teljesen figyelmen kívül hagyja a rácsrendszereket, hogy helyette az aranymetszés segítségével teremtsen arányokat.

Bőven van példa arra, hogy az aranymetszést a Gutenberg-bibliától kezdve a modern logótervezésen át a természetben előforduló jelenségekig mindenre felhasználták. Vannak azonban olyanok is, akik szerint az aranymetszés szépsége egyszerűen csak mítosz.

Mindettől függetlenül tagadhatatlan, hogy sokan rajonganak az aranymetszésért, ezért mindenképpen érdemes megemlíteni ebben a leckében.

Az aranymetszés használata a felhasználói felület tervezésében

A tanfolyam 4. leckéjében arról beszéltünk, hogy egy designnak nem szabad 3-4-nél több hierarchiaszintet tartalmaznia a felhasználói felület egy adott részén. Ezt szem előtt tartva az alábbi egyszerű lépésekkel alkalmazhatja az aranymetszést a tervezésben:

Meghatározza a téglalap magasságát, és ezt a számot szorozza meg 1,618-cal, hogy megtalálja a szélességét. Ezáltal létrejön egy “arany téglalap.”

A fenti példában a kiinduló számunk 350pt, de bármilyen számot használhatsz, amit csak szeretnél.

Az arany téglalapodat oszd fel tökéletes négyzetekre. Minden egyes tökéletes négyzet egy új, kisebb Arany négyszöget fog eredményezni.

Folytasd az Arany négyszög felosztását, amíg 3-4 különböző méretű tökéletes négyzetet nem kapsz.

Az egyes négyzetek méretét “helytartóként” használja, hogy segítsen megtörni az elrendezést és kommunikálni a hierarchiát a tervben.

Az eredmény egy esztétikus és arányos design lesz. Nézze meg ezt a példát a Prototypr.io oldalról.

Korlátozásokkal kezdeni

Most, hogy áttekintettünk néhány módszert az arányok megállapítására a felhasználói felület tervezésében, beszéljünk néhány nagyszerű kiindulási pontról. Ha először a korlátozásokkal kezdünk, könnyebb lesz a felhasználói felületet e korlátozások köré építeni.

Mobile First Design

A “Mobile First” kifejezést Luke Wroblewski alkotta meg azonos című könyvében. A kifejezés népszerűségre tett szert a tervezők körében, mint egy módja annak, hogy leküzdjék a késztetést, hogy minél több dolgot zsúfoljanak bele egy felhasználói felületbe csak azért, mert bőséges hely áll rendelkezésre.

A mobiltervezésre összpontosítva először a tervezőknek a mobileszközök korlátait kell megkerülniük, és arra kell összpontosítaniuk, ami valóban számít. Ennek eredményeképpen a felhasználói élmény konzisztens marad az eszközök között, mivel a felhasználói felület fő célja továbbra is a figyelem középpontjában marad.

S betűméret

Amint korábban említettük, a webes testszöveg alapértelmezett betűmérete a legtöbb nagy böngésző esetében 16px. Minden ennél kisebb méret váratlan zoomolási viselkedést válthat ki az Apple mobilkészülékein. Ennek eredményeképpen általában ajánlott 16px alap betűméretet hagyni, és a többi betűméretet (címsorok, kis szövegek, feliratok, címkék stb.) ennek megfelelően meghatározni.

A betűméreteket az arányosság szem előtt tartásával határozhatjuk meg, ha követjük a Google Material Design specifikációját, és 4pt-es lépésekben választjuk a méreteket, például a Bootstrap betűméretre vonatkozó stílus útmutatóját.

Figyelem: a betűméretek aranymetszés szerinti növelése nem ajánlott, mivel az egyes betűméretek közötti különbségek túlságosan nagyok lennének. Például, ha 16-os alap betűmérettel kezdenénk, és minden egyes címsorszintet megszoroznánk 1,618-cal, akkor a H1 címsor 177,4 pts-os lenne, ami nagyon megnehezítené az olvashatóságot.

Gombméret

Egy másik korlátozó tényező, amit figyelembe kell vennünk, az a tervezés során használt beviteli módszer pontossága. Ebben a konkrét esetben az ujjakra, hüvelykujjakra, kurzorokra és stylus tollakra gondolunk.

Az ujjak és a hüvelykujjak sokkal szélesebbek és kevésbé pontosak, mint a kurzorok vagy a stylus tollak. Ezt szem előtt tartva fontos, hogy a gombok, bemenetek, ikonok vagy más érintési pontok méretét gondosan úgy válassza meg, hogy figyelembe vegye ezeket a korlátozásokat.

A Google’sMaterial Design azt javasolja, hogy az érintési pontok mobilon legalább 48pt magasak és 48pt szélesek legyenek, és közöttük legalább 8pt legyen.

Content Width

A tartalom folyékony, ami azt jelenti, hogy annyi vízszintes és függőleges helyet tölt ki, amennyit csak tud. E tulajdonsága ellenére jó gyakorlat, ha meghatároz egy minimális és egy maximális szélességet a tartalom számára.

A minimális tartalomszélességet meghatározhatja az a minimális képernyőszélesség, amelyet a design támogat. A legkisebb képernyőfelbontás, amelyet a legtöbb tervező támogat, 320px (azaz 1X-nél) széles. A minimális szélességet azonban a valós felhasználói adatok alapján kell megválasztania, ha meg tudja szerezni. A Google Analytics egy jó hely az ilyen típusú adatok keresésére.

Míg a tartalom szélessége kitölthet annyi képernyőt, amennyit az adott, általában nem ajánlott, hogy a tartalom 52 karakternél több karaktert foglaljon el soronként. Ez azt sugallja, hogy a tartalom maximális szélességét úgy lehet meghatározni, hogy a tényleges törzsszöveget a normál betűméretben használjuk, és megtaláljuk a kényelmes tartalmi szélességet, amely ebbe a tartományba illeszkedik.

Következtetés

Összefoglalva, az arányosság egy hasznos tervezési elv. Annak ellenére, hogy statikus és folyékony elemek kombinációjával rendelkezünk, az arányos felhasználói felület még mindig elérhető a 8pt rácsrendszer, az aranymetszés vagy más módszer használatával. Az elemek méreteinek meghatározásakor bevett gyakorlat, hogy a korlátozásokkal, például az eszközzel, a betűmérettel, a gombok méretével és a tartalom szélességével kezdjük. Az alapméretek meghatározása után sokkal könnyebb az elemeket ennek megfelelően méretezni.

Következő lecke
A tervezés alapelvei: A tervezés alapelvei: Fehér tér

Előző lecke
A tervezés alapelvei: Kiemelés

Visszajelzés

Hogyan lehetne javítani ezen a leckén? Kérjük, hagyja meg visszajelzését lentebb!