A kezdő útmutató a lapos kialakításhoz

Burger King márkanév
(Kép jóváírása: Burger King Corporation)

A múltban a webdesignerek különös figyelmet fordítottak készségeik és portfóliójuk bemutatására azzal, hogy webhelyeket mutatós illusztrációkkal és animációkkal csomagoltak, amelyek állítólag elbűvölték látogatóikat. Ezután következett a váltás a skeuomorphic tervezés felé, amely faux-realisztikus textúrákkal, árnyékokkal és valós tárgyjellemzőkkel kísérelte meg a való életet a képernyőn.

Ez utat engedett a lapos kialakításnak, amely szembeszállt mindezekkel a „mesterséges” tervezési technikákkal az egyszerűbb, klasszikusan digitális esztétika mellett. És bár ez a felhasználó-központú webdesign stílus már évek óta létezik, még mindig ugyanolyan releváns és népszerű, mint valaha, és újjáéledik logó tervezés , is. Tehát, ha még mindig nem biztos benne, miről van szó, akkor ez az útmutató éppen az lehet, amire szüksége van ...

Mi az a lapos kialakítás?

Mi az a lapos kialakítás?



A Windows 8 a lapos kivitel trendjének élén állt

A lapos kialakítás egy minimalista tervezési megközelítés, amely hangsúlyozza a használhatóságot. Tiszta, nyitott teret, éles széleket, élénk színeket és kétdimenziós illusztrációkat tartalmaz.

A Microsoft az elsők között alkalmazta ezt a tervezési stílust a felületén, amelyet egyesek visszavágásnak tekintettek a népszerű skeuomorphic design ellen, amelyet az Apple indított el az iOS felületével. A valós tárgyak, például naptár átalakítása apró, valósághű illusztrációk helyett a lapos kialakítás hívei egyszerű, ikonszerű képekkel azonosítják az alkalmazásokat.

Ahelyett, hogy a valós élet aspektusait illesztené fel az interfészre, ez egyértelmű különbséget mutat a technológia és a tapintható objektumok között.

A minimalista nem azt jelenti, hogy unalmas

Lapos kivitelben a díszítő elemeket felesleges rendetlenségnek tekintik. Ha egy szempont nem szolgál funkcionális céllal, akkor ez a felhasználó figyelmét elvonja. Ez az oka a lapos kialakítás minimalista jellegének.

Azonban csak azért, mert hiányzik belőle egy mutatós dizájn, még nem jelenti azt, hogy ez a stílus unalmas. Az élénk, kontrasztos színek miatt az illusztrációk és a gombok háttérképekből pattannak ki, könnyedén megragadják a figyelmet és irányítják a felhasználó figyelmét. A minimalista képek célja hozzájárul a lapos kivitel funkcionális karakteréhez is.

A lapos kialakítás egyszerű

alkalmazás ikonjai

A lapos kialakításnak mindenképpen van egy pillanata - túl messzire ment?(Kép jóváírása: Tobias van Schneider)

Az egyszerű képek gyorsabban továbbítják az üzeneteket, mint a részletes illusztrációk. Az olyan képek, mint az ikonok, univerzális cselekvéseket vagy célokat jelezhetnek, hogy mindenki könnyen megértse őket.

Könnyű azonnal észrevenni a különbséget a skeuomorf és a lapos kialakítás között. Figyelje meg, hogy a nagyobb, egyszínű blokkok miért vonzanak jobban figyelmet, és az ikonok jelentése gyorsan érzékelhető.

A fenti ikonok csak néhányat mutatnak a 2021-ben használt ikonok közül, beleértve a tavalyi ellentmondásos Google ikon-márkanevet is. A veszély itt az, hogy mivel mindannyian követik a lapos tervezési trendet, és élénk színekkel emelik a terveiket, szinte túlságosan hasonlóvá válnak (amint azt ez a darab ). Ez csak azt mutatja, hogy finom vonal van az olyan trendek követése, mint a lapos kialakítás, és a tömegből való kitűnés között.

Amit a lapos kialakításból megtudhat

A lapos kialakítás visszatér a tervezés, mint funkcionális eszköz alapjaihoz. Egy weboldalt úgy terveznek és ítélnek meg, hogy mennyire jól működik, szemben azzal, ahogy kinéz.

Ez a nyers funkcionalitás arra kényszeríti a webhelyet, hogy a felhasználói élményre összpontosítson, így az ezt a stílusot sikeresen alkalmazó webhelyek valószínűleg felhasználóbarátként pozitív visszajelzéseket kapnak.

Hogyan készítsünk lapos kialakítást

A hatékony sík terület megtervezéséhez minden tervezési elemnek az egyszerűség ezen gondolatára kell összpontosítania. Az egyszínű, élénk színek olyan szempontokra helyezik a hangsúlyt, amelyek szükségesek ahhoz, hogy megkülönböztessék őket a szemléltető részletek helyett; a sans-serif tipográfia tiszta, éles kiegészítést nyújt az illusztrációkhoz; a szöveg tömör és pontos; A felhasználói felület elemei, például a gombok és a linkek, világosak és észrevehetőek.

Mindent ugyanazt a célt szem előtt tartva kell megtervezni, hogy koherens vizuális és funkcionális webdesign készüljön. Az alábbiakban néhány remek példa a lapos kialakításra ...

Lapos kiviteli példák: Tripfinder

Példák lapos kialakításra: Tripfinder

A színek és ikonok minimális másolással segítik a jelentés tisztázását

Ez utazás tervezés app tervezés az indonéz felhasználói felület tervezője Bady rendkívül egyszerűvé teszi a járatok lefoglalását csomagok és költségvetések alapján. Minden világos és érthető, és a tervezés leginkább a színekre és az ikonokra támaszkodik, hogy értelmet nyújtson. A másolat tömör, és az ideális repülés keresésének felhasználói felülete nyilvánvaló.

Lapos kiviteli példák: Burger King webhely

lapos kivitelű Burger King webhely

A Burger King weboldala összhangban van a legújabb márkanévvel(Kép jóváírása: Burger King)

Burger King márkanév 2021 elején nagy elismeréssel, új logója a lapos kivitelezés mesterkurzusa. Honlapja újratervezték, hogy megfeleljen, és egyszerű illusztrációkkal és ikonokkal vezeti a felhasználókat a webhely körül. Az alkalmazás szintén hasonlóan áramvonalas megközelítést alkalmaz.

Lapos kiviteli példák: Időjárás kb

Példák lapos kialakításra: Időjárás kb

A lapos kialakítás nem függ az élénk színtől

Ez időjárás app UI tervezés azt mutatja, hogy a lapos kialakítás élénk színek használata nélkül is sikeres lehet. Az éles ikonográfia és a nagy tipográfia felhívja a figyelmet az időjárás legfontosabb aspektusaira, amit a felhasználó keres.

Amikor lapos kialakítást fedez fel a munkája során, ügyeljen arra, hogy minden szempontot minimalista és felhasználóközpontú perspektívával tervezzen meg az egységes felület biztosítása érdekében. Miután ezt sikeresen elvégezte, a felhasználók értékelni fogják a webhely funkcionális jellegét.

Kapcsolódó cikkek: