01 ya 03
Mwisho Mwisho wa Atomic.io Unajumuisha Vyombo vya Scrollable
Nyuma ya miezi michache nilionyesha jinsi atomic.io inaweza kutumika kwa mwendo wa mfano . Moja ya pointi muhimu nilizofanya kwenye kipande ilikuwa "kuonyesha mwendo" badala ya kuiacha mawazo ya mteja au wa timu ni muhimu. Kwa kweli, hii imekuwa muhimu sana kwamba kikundi kipya kipya cha zana za UX / UI kinaonekana kwenye eneo hilo. Wao ni pamoja na - Kielelezo cha Apple, Adobe's Edge Animate, Baada ya Athari na UXPin , kutaja wachache. Mtoto mpya kwenye block ni Atomic.io ambayo ilikuwa katika beta wazi wakati mimi kwanza aliandika juu ya bidhaa.
Jambo lenye nadhifu kuhusu beta ya wazi nio hupa mtengenezaji wa programu fursa ya kukusanya maoni ya mtumiaji kwenye kuweka vipengele, ikiwa ni pamoja na vipengee vya kukosa, na kisha kuziwezea kwenye programu na kuwahakikishia kabla ya kutolewa kwa kibiashara. Katika kesi ya atomiki, kipengele kimoja nilichokosa ni uwezo wa kurasa maudhui kwa usawa au kwa usawa. Hii inaweza kujumuisha vitu kama kadi, slide inaonyesha au kwa karibu chochote mtumiaji angeweza kugeuza au kuvuta ndani ya mipaka ya interface ya programu au tovuti.
Hili lazima limekuwa suala la watumiaji wengi walioulizwa kwa sababu vyenye vilivyoingizwa vilivyoanzishwa kwenye programu mwezi huu na, ni lazima nikubali, kuunda maudhui yaliyotumiwa katika mfano ni wafu rahisi kuwezesha.
Hapa ni jinsi ...
02 ya 03
Jinsi ya Kujenga Maudhui ya Upimaji Wima katika Atomic
Utahitaji kujiandikisha kwanza kwa majaribio ya siku 30 bila malipo, na mwishoni mwa kipindi hicho, utawasilishwa na mipango mitatu ya bei.
Jambo la kwanza unahitaji kujua ni kazi yote utakayofanya ni kwenye kivinjari na programu inalenga kwa ufanisi kwenye Google Chrome. Mara baada ya kuingia, utachukuliwa kwenye ukurasa wa Miradi . Kufungua programu, bofya kifungo cha Mradi Mpya .
Wakati interface inaonekana utaona kuna idadi ndogo ya zana, uwezo wa kuongeza kurasa na tabaka kwenye kurasa, sanaa na, kwa upande wa kulia, paneli ya mali ya mazingira.
Katika mfano huu, nimeanza na upangilio wa iPhone 5 ambao ni 320 x 568.Kisha ufungua folda iliyo na picha zinazopigwa na kuzivuta kwenye tani. Waliongeza kwa moja kwa moja kwenye mradi na unaweza kuona ni kwenye tabaka za mtu binafsi ikiwa unabonyeza tabani ya Tabaka . Nilichagua chombo cha Arrow (Uchaguzi), kuchaguliwa picha na kuikuta kwenye nafasi mpya ili kuongeza nafasi kati yao. Nilichagua picha zote na kubofya kifungo cha Kusambaza Verti kwenye barani ya zana. Hii sawasawa iliacha picha.
Hatua inayofuata ni kuchagua maudhui yote yanayopangwa na kubofya kitufe cha Container au chagua Fungua Chombo cha Msajili kutoka kwenye kifungo cha Kundi cha chini. Mara chombo kikiundwa- utaiona kwenye jopo la Layers - bofya chombo na gurudisha kushughulikia chini hadi chini ya kitani . Bonyeza kifungo Preview chini ya Jopo la Mali na hii itazindua dirisha la kivinjari. Tumia gurudumu la panya la mouse ili upeze maudhui. Ili kurudi kwenye mradi wako, bofya kifungo cha Hifadhi chini ya kulia ya kivinjari cha kivinjari.
03 ya 03
Jinsi ya Kujenga Maudhui ya Kutafuta Horizontal katika Atomic
Kutafuta kwa usawa ni rahisi sana kufikia.
Katika kesi hii, alichota mfululizo wa picha kwenye turuba na kuzipiga dhidi ya kila mmoja. Kwa picha zilizochaguliwa, kisha bonyeza kitufe cha Juu cha Align ili kuhakikisha kuwa wote wamekaa.
Mimi kisha ulikuwa chini ya Shift muhimu na kuchaguliwa kila safu katika jopo Layers. Pamoja na picha zilizochaguliwa, nilibofya kifungo cha Container na , katika paneli za Mali, zimechaguliwa kwa usawa katika eneo la Mipango.
Nilijaribu mradi huo kwenye dirisha la Kivinjari kwa kubonyeza kifungo cha Preview.
Ingawa nimeonyesha jinsi ya kuunda matoleo ya kibinafsi ya kupima kwa wima na ya Horizontal, kwa muda mrefu tukiweka maudhui yaliyotumika katika chombo, unaweza kuwa na vyombo hivi katika maeneo tofauti ya skrini. Kwa mfano, ukurasa wa wavuti unaweza kuwa na maudhui ya kupiga sauti kwenye orodha ya upande na usawa wa kupiga picha kwenye slide-show kwenye ukurasa huo. Kwa kweli, chombo kinaweza kuwa na uvinjari wa wima na usawa wa vitu kama vile picker ya picha ambayo ina dazeni au hivyo vidole.
Ili kujifunza zaidi kuhusu kipengele hiki katika atomic.io angalia:
- Tukio la blogu
- Inasimulia mafunzo ya chombo
- Masking kutumia Containers
- Ufumbuzi wa Vipindi vya Kujiunga