Tervezési rendszer fejlesztése. Hogyan kerüljük el a váratlan rutinot.

Négy egyszerű dolog, amelyet emlékezni és követni kell a tervezőrendszer fejlesztése előtt

Ha tervezőrendszereket fejleszt, valószínűleg megtanulta, hogy a sorrend fontos. Amikor létrehoztunk egy összetevőt vagy szimbólumot, és megsokszoroztuk, mielőtt hozzárendeltem volna a szükséges tulajdonságokkal, akkor lehetővé vált egy rutin kockázata.

Példa: az összetevőt beágyazott szimbólumokból hozta létre. Ha elfelejtette időben megadni a paraméterek / korlátozások átméretezését, akkor az összes klónozott hibásan méretezhető.

Gyorsítsa fel a tervezési és fejlesztési időt akár 50% -kal

A Figma anyagtervező rendszere pontosan 512 anyag felhasználói felület összetevőből és 1171 anyag ikonból áll.

  • Egyedi architektúra a gyors testreszabáshoz
  • Felszerelt egyszerű és világos dokumentációval
  • Dedikált asztali és mobil alkalmazásokhoz
  • Anyagtervezési iránymutatások szerint készült, az alábbiak szerint:
  • A Figma „Példány” szolgáltatásait maximálisan használja
  • Támogatja a Figma web API-t a valós idejű integrációhoz
  • Az ügyfelek heti 7 napot támogatnak!

További információ → http://setproduct.com/material

Ha továbbra is kétségei vannak, javaslom, hogy nézze át az áttekintést

① Készítsen listát az ismétlődő elemekről

Azonosítsa és csoportosítsa az összes ismétlődő objektumot pontos elrendezés, prototípus vagy koncepció szerint. Nem csak a gombok a listában. Címkék, ikonok, bemenetek, címsorok és így tovább. Érdemes háttérképeket és még árnyékparamétereket is hozzáadni, ha elegendő rugalmas rendszert akar építeni. Az alábbiakban megtudhatja ezen műveletek célját.

Néhány ismétlődő összetevő

② Határozza meg az összes lehetséges állapotot

Most kezdje el összeállítani egy olyan elem listáját, ahol lehetséges a rendszerválasz, vagy a felhasználó valószínűleg kölcsönhatásba lép. Ha a küldetésed megköveteli még egy állapot állapotának leírását, azt javaslom, hogy ezt a folyamatot tartsa később a fejlődés utolsó szakaszaiban, amikor az összes alkotóelem vizuálisan ismert, és akkor felteheti magának a kérdést: „Melyiküket kell klónozni további államokhoz? ?”

Kevés lehetséges állapot a szövegbevitelhez

③ Állítsa be a korlátozásokat vagy a paraméterek átméretezését

Szerezz magadnak egy szabályt: „Amikor egy alkatrészen dolgozom, mindig szem előtt tartom, hogy az hogyan skálázódik”. Emlékszel a példára, amelyből én kezdtem ezt a posztot? A lényeg az, hogy a korlátozásokat / átméretezési paramétereket azonnal be kell állítania, miután a keretet összetevővé alakította. Ellenkező esetben beragad a rutinba abban az esetben, ha a jövőben minden elemhez kézzel módosítania kell.

A paraméterek átméretezésének ikonjai jobbra kattintva vannak beállítva

④ A hozzáférhető nevek voltak az első, az államok - utána

Elkészült a komponens és klónozza azt további államok számára? Kiváló, de először használjon rá hozzáférhető nevet. Vigyázz magadra és a fejlesztõk csapatára, és használj tiszta elnevezéseket. Ne feledje, hogy a klónozott komponens megtartja a szülő nevét. Ha jobban szereti a rendességet, azt várom, hogy a szövegmező úgy hangzik:

Szövegmezők / aláhúzott / alapértelmezett

Most az összetevő biztonságosan klónozható. Ezután távolítsa el a példányt, végezzen vizuálisan szükséges változtatásokat, és a szerkesztés csak a végén marad:

Szövegmezők / aláhúzott / aktív

⑤ Valami a desszerthez

Nincs rutin. A tervezési folyamatomat mostanában foglalkoztatom a tervező rendszerrel, és élőben mutatom be a YouTube-on:

Az alsó sor ⤑ tartsa meg a sorozatot ♛

Ez a mai alapokról szól. Nem kétséges, hogy még sok más árnyalattal rendelkezik a tervezési rendszerek fejlesztésében, talán később leírom. Kérjük, ossza meg a megjegyzésekben a saját módszereit / lépéseit, amikor a rendszert a semmiből tervezi. Egészségére.

Mi a következő lépés? Ezzel a Figma könyvtárral gyorsan elindíthatja anyagtervezési projektjét

Készült Anyag prototípus-rendszerrel Fig a Figma számára
Fedezze fel a rendszert → http://setproduct.com/material
❷ Az összetevők áttekintése → http://setproduct.com/material/components
❸ További videók → http://setproduct.com/material/videos
❹ Vásárlás és letöltés → http://setproduct.com/material/download
❺ 1000+ anyag ikon → http://setproduct.com/material/icons_pro