Mobil tervezési sablon

Ez a cikk bemutatja, hogy mit tartalmaz az UI-sablon, és mire használható.

Cél

Az alkalmazás célja, hogy segítse az alkalmazásfejlesztőket felhasználóbarát, egységes és egyszerűsített mobilalkalmazások létrehozásában. Ha az alkalmazásokat a mobil felhasználói élményt szem előtt tartva fejlesztik, azok hasznosabbá válnak a mobil eszközökön.

Az alkalmazás példát mutat arra, hogyan néz ki egy Tulip-alkalmazás, és bemutatja az alkalmazásokban használható általános lépéselrendezéseket. Felvázolja, milyen elemeket kell tartalmaznia egy alapelrendezésnek, fejlécnek és láblécnek, így megkönnyítve az alkalmazásfejlesztők számára a Tulip-alkalmazásokkal való kezdést. A sablon jelentősen leegyszerűsíti az alkalmazáskészítést, mivel lehetővé teszi az alkalmazásfejlesztők számára, hogy a lépéselrendezéseket másolják és beillesszék az alkalmazásaikba. Ez nemcsak időt takarít meg, hanem biztosítja az e útmutató segítségével készített összes alkalmazás egységes megjelenését is.

Beállítás

A felbontás döntő fontosságú a mobilalkalmazások esetében, mivel a különböző eszközök képernyőméretei széles skálán mozognak. Az alkalmazás jelenleg két lehetőséget kínál a mobilbeállításokhoz: „Mobil fekvő” és „Mobil álló”. Újabb mobilkészülékek esetén a 19,5:9-es álló és 19,5:9-es fekvő felbontások használatát javasoljuk.

A funkciók áttekintése

Az első 6 lépés tervezési útmutatóként szolgál, bemutatva az alkalmazásokban használt színeket, gombokat, gombikonokat és tipográfiát. Ezen elemek meghatározásával könnyebbé válik a konzisztens felület fenntartása egy vállalaton vagy példányon belül.

A „Színek” lépésben a felhasználók megtekinthetik az alkalmazáskészítés során használt összes színt, a hozzájuk tartozó hexadecimális kódokkal együtt. Ha egy színváltoztatást több lépésben is alkalmazni kell, bármelyik színt el lehet menteni változóként, hogy az alkalmazás egészében biztosítva legyen az egységesség.

A „Gombok” és a „Gombikonok” lépések meghatározzák a világos és sötét módú alkalmazásokban egyaránt gyakran használt gombokat, valamint a hozzájuk tartozó ikonokat. A gombikonok szöveggel együtt használhatók az áttekinthetőség javítása és a helymegtakarítás érdekében, amennyiben az ikon jelentése azonnal egyértelmű. Minden ikonnak következetes jelentéssel kell rendelkeznie az alkalmazás összes lépésében, és ideális esetben a munkaterület összes alkalmazásában.

A szakasz utolsó lépése a „Tipográfia” lépés, amely meghatározza a címek és a bekezdéses szövegek betűméretét és stílusát. Mobilalkalmazások esetében ajánlott a betűméretet 20px felett tartani, és a jobb olvashatóság érdekében gondoskodni a háttérrel való erős kontrasztjáról.

A következő szakasz segít az alkalmazáskészítőknek az alkalmazásukhoz leginkább illeszkedő alapelrendezés megtervezésében. Különböző fejléc- és láblécelemeket kínál, amelyeket másolhatnak és beilleszthetnek az alapelrendezésbe. A navigációs sáv hozzáadása az alapelrendezéshez javítja a felhasználói munkafolyamatot, mivel lehetővé teszi a különböző lépések közötti ugrást, a frissítést vagy a gépek állapotának ellenőrzését. Az alkalmazáskészítő választhat a világos vagy a sötét témájú alapelrendezés között.

Az alkalmazás emellett tartalmaz egy lépéssablonokhoz és egy lépéselrendezésekhez tartozó lépéskészletet is. Ezek között megtalálhatók a Menü, a Modál ablakok, a Munkavégzési utasítások, a Képfelvétel és még sok más.

További olvasnivaló

Az alkalmazás-tervezés bevált gyakorlatairól itt olvashat bővebben.

Ha többet szeretne megtudni a mobil eszközökre szánt alkalmazások tervezéséről, olvassa el a közösségi fórumon a mobil UI/UX bevált gyakorlatokról szóló vitát.