Dizainas kaip įrankis programėlės tobulinimui: žingsnis po žingsnio mokymo programa

Naudojimo sąsajos dizainas gali padaryti didelį skirtumą tarp geros ir puikios programėlės. Šiame mokomojojemedžiagoje sutelksime dėmesį į tai, kaip dizainąnaudoti kaip įrankį, kad jūsų programėlė būtų vizualiai patrauklesnė. Pasirūpinsime nauju ekranu, kuris optiškai išsiskiria iš esamų elementų ir sužavi vartotoją patraukliu dizainu. Pradėkime iš karto.

Geriausi įžvalgos

• Įvairios spalvos ir kontrastai padidina vizualinį patrauklumą.
• Aiškios maketo struktūros padeda vartotojams geriau orientuotis.
• Pastovios šriftų dydžiai ir dizainai skatina malonų vartotojo patirtį.

Žingsnis po žingsnio instrukcija

Pridėti naują valdiklį

Norėdami sukurti naują ekraną, pradėsime nuo naujo valdiklio pridėjimo. Eikite į savo sąsajos kūrėją, spustelėkite „Pridėti valdiklį“ ir nustatykite jį taip, kad jis pritaikytųsi po esamais ekranais.

Valdiklio nustatymai

Pavadinkite savo naują valdiklį „Kursų valdiklis“, kad būtų lengviau priskirti jį ateityje. Pasirūpinkite, kad pasenęs „iPhone 8 kopija“ pavadinimas būtų pakeistas į „Profilio valdiklis“.

Priderinti fono spalvą

Norintvizualiai padaryti programėlę patrauklesnę, svarbu pasirinkti dominuojančią fono spalvą. Pasirinkite ryškią žalią, kuri jau naudojama kitose jūsų programėlės dalyse. Ši strategija padidins kontrastą su baltais elementais ir suteiks daugiau dinamikos.

Statuso juostos konfigūracija

Nustatykite statuso juostą į „Tamsi“, kad tekstas ant žalio fono būtų gerai skaitomas. Patikrinkite padėtį ir įsitikinkite, kad ji puikiai pritaikyta.

Labelis

Sukurkite naują labelį kurso rodymui. Pradėkite su antrašte, kuri užima visą valdiklio plotį. Pasirinkite H4 šriftą ir nuspalvinkite tekstą balta.

Priedėti papildomus labelius

Pridėkite dar vieną labelį kurso pavadinimui. Naudokite 40 pikselių šrifto dydį ir įsitikinkite, kad jis yra tinkamai išdėstytas - jis neturi turėti tarpo su ankstesniu labeliu.

Rodoma daugiau informacijos

Norėdami vartotojams pateikti daugiau informacijos, pridėkite trečią labelį. Naudokite mažesnį šriftą su 17 pikselių, kad tekstas nebūtų per daug akivaizdus, kol jis nereikalingas.

Stalo kūrimas

Galiausiai pridėkite stalą, kad pamokas būtų galima aiškiai pateikti. Pradėkite su paprastu stačiakampiu, kuris užima visą plotį ir padarykite fono spalvą šiek tiek tamsesnę, kad galėtumėte dirbti su baltais tekstais.

Pamokos kaip ląstelės

Sukurkite ląstelę pirmosios pamokos pavadinimu „Pagrindai 1 dalis“. Pasirūpinkite tinkamu atstumu ir išlyginimu.

Separatorius įterpti

Norint sukurti aiškų atskyrimą tarp pamokų, pridėkite separatorių (ploną liniją). Ši linija turėtų būti tarp ląstelių, kad būtų pasiektas vizualinis atskyrimas.

Sukurti panaikinimo mygtuką

Norint vartotojams leisti išeiti iš šio vaizdo, pridėkite panaikinimo mygtuką, kuris atrodytų kaip „X“. Įsitikinkite, kad jis gerai matomas ekrano viduryje.

Žvilgsnis į kitus žingsnius

Po to, kai sėkmingai sukurtas naujas kursų valdiklis, kitas žingsnisbus prisijungimo integracija. Tai leis vartotojams išsaugoti savo pažangą programėlėje.

Apibendrinimas – dizainas kaip įrankis programėlės patobulinimui

Šiame mokyme sužinojote, kaip efektyvus programėlės dizainas gali pagerinti vartotojų patirtį. Nuo naujo valdiklio pridėjimo, spalvų pasirinkimo iki ląstelių ir mygtukų įtraukimo – perėjote visus būtinus žingsnius, kad jūsų programėlė būtų vizualiai patraukli.