Mobil design sablon

::: (info) () Az alkalmazás letöltéséhez látogasson el a következő weboldalra: Könyvtár:::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áskészítőket felhasználóbarát, konzisztens és áramvonalas mobilalkalmazások létrehozásában. Azzal, hogy az alkalmazásokat a mobil élményt szem előtt tartva építjük, azok hasznosabbá válnak a mobileszközökön.

Az alkalmazás példát ad arra, hogyan néz ki egy Tulip alkalmazás, és bemutatja az alkalmazásokban használható gyakori lépéselrendezéseket. Körvonalazza, hogy milyen elemeket kell tartalmaznia egy alapelrendezésnek, fejlécnek és láblécnek, megkönnyítve az alkalmazáskészítők számára a Tulip-alkalmazások elkészítésének megkezdését. A sablon jelentősen leegyszerűsíti az alkalmazáskészítést, mivel lehetővé teszi az alkalmazáskészítők számára, hogy a lépéselrendezéseket másolva és beillesztve beépítsék az alkalmazásukba. Ez nemcsak időt takarít meg, hanem egységes megjelenést is biztosít az útmutató segítségével épített összes alkalmazás számára.

Beállítás

A felbontás a mobilalkalmazások esetében kulcsfontosságú a különböző készülékek képernyőméreteinek széles skálája miatt. Az alkalmazás jelenleg két lehetőséget kínál a mobil beállításokhoz: Mobil tájkép és mobil portré. Az újabb mobileszközök esetében a 19,5:9-es Portrait és a 19,5:9-es Landscape felbontást javasoljuk használni.

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. Ezeknek az elemeknek a meghatározásával könnyebbé válik a vállalaton vagy példányon belüli egységes felület fenntartása.

A Színek lépésben a felhasználók megtekinthetik az alkalmazásépítés során használt összes színt, a hozzájuk tartozó Hex-kódokkal együtt. Ha egy színváltozást több lépésben is alkalmazni kell, lehetőség van bármely színt változóként elmenteni, hogy az egész alkalmazásban biztosítsa a következetességet.

A Gombok és gombok ikonjai lépések meghatározzák a világos és sötét módú alkalmazásokban gyakran használt gombokat, valamint a hozzájuk tartozó ikonokat. A gombok ikonjai szöveggel együtt használhatók az átolvashatóság javítása és a helytakarékosság érdekében, ha az ikon jelentése azonnal egyértelmű. Minden ikon jelentése legyen konzisztens az összes alkalmazáslépésben é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ésszö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 nagy kontrasztot biztosítani a háttérrel szemben.

A következő szakasz segít az alkalmazáskészítőknek megtervezni az alkalmazásukhoz legjobban illeszkedő alapelrendezést. Különböző fejléceket és lábléceket biztosít, amelyeket bemásolhatnak és beilleszthetnek az alapelrendezésbe. 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ésekhez való ugrást, a frissítést vagy a gép á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 használata között.

Az alkalmazás tartalmaz továbbá egy lépéssablont és egy lépéssablont tartalmazó lépéssort a lépéselrendezésekhez. Ezek közé tartozik a Menü, a Modals, a Munkautasítások, a Képfelvétel és még sok más.

További olvasnivalók

Tekintse meg az asztali felhasználói felület sablonját: https://tulip.co/library/apps/tulip-ui-template/

Az alkalmazásokon belüli eszközök másolásához segítséget nyújt a How To Copy/Paste Content Within Apps and Between Apps (Hogyan másoljunk/illesszünk be tartalmat az alkalmazásokon belül és az alkalmazások között) című fejezet.

A mobil UI/UX legjobb gyakorlatokról szóló közösségi vitában többet megtudhat az alkalmazások mobileszközökre történő tervezéséről: https://community.tulip.co/t/mobile-ui-ux-best-practices.