Kaip su DI sukurti gerai atrodančią programėlę

Kad iš DI gautumėte gerai atrodančią programėlę, nustokite prašyti „padaryk gražiai“ ir pradėkite duoti tai, ko norėtų dizaineris: du ar tris patinkančius pavyzdžius, įvardytą dizaino kryptį ir konkrečias taisykles šriftams, spalvoms ir tarpams. Tada sukurkite vieną ekraną, patobulinkite jį iki tinkamo rezultato ir leiskite DI taikyti tą pačią sistemą visiems kitiems ekranams. Didžioji dalis „DI išvaizdos“ kyla iš neaiškių užklausimų, kurie duoda vidutinius atsakymus; konkretus įvesties duomenys duoda konkretų dizainą.

Kodėl DI dizainai atrodo bendri

Jei paprašysite DI „modernaus, švaraus SaaS skydelio“, jis pateiks statistinį visų skydelių, kuriuos matė, vidurį: tą patį bepadinį šriftą, violetinį-mėlyną gradientą, suapvalintas korteles su švelniais šešėliais, piktogramas apskritimuose ir centruotą antraštę „Jūsų darbo eiga, supaprastinta“. Nė vienas pasirinkimas savaime nėra blogas. Problema ta, kad nė vienas jų nebuvo pasirinktas jūsų produktui.

Geras dizainas daugiausia – tai sprendimai. Jūsų užduotis – priimti keletą sprendimų, kurie suteiks programėlei charakterį, o DI nuosekliai atliks tūkstančius smulkmenų.

1 žingsnis: surinkite pavyzdžius prieš užklausdami

Skirkite dvidešimt minučių surinkti du–keturis pavyzdžius – programėles ar svetaines, kurių išvaizda tinka jūsų produktui. Geri šaltiniai: produktai, kuriuos jau naudoja jūsų auditorija, dizaino galerijos ir susijusių sričių įmonių svetainės.

Kiekvienam pavyzdžiui paprastais žodžiais užrašykite, ką jums patinka:

• „Daug balto tarpo, turinys siauru stulpeliu, maži pilki etiketės virš didelių skaičių.“
• „Tankios lentelės su plonomis linijomis, be kortelių šešėlių, vienas akcentinis veiksmų spalva.“
• „Dideli serifiniai antraštės šriftai, šiltas nedidelio kontrasto fonas, nuotraukos vietoj iliustracijų.“

Tada perduokite šiuos aprašymus DI ir, jei įrankis priima vaizdus, pridėkite ekrano nuotraukas. Semkitės įkvėpimo iš savybių, o ne iš produkto: kopijuoti kitos įmonės išdėstymą, prekės ženklą ar tekstą visiškai reiškia teisinę ir patikimumo riziką.

2 žingsnis: pasirinkite ir įvardykite dizaino kryptį

Kryptis – trumpas stiliaus aprašymas. Ji duoda DI filtrą kiekvienam sprendimui. Keletas gerai veikiančių:

Įtraukite ją į pirmąją užklausą kartu su informacija, kam skirta programėlė:

Sukurk rezervavimo programėlę nepriklausomai jogos studijai. Dizaino kryptis: ramu ir minimalistiška, kaip atspausdintas studijos tvarkaraštis. Šiltas nedidelio kontrasto fonas, beveik juodas tekstas, vienas prislopintas šalavijo žalios spalvos akcentas mygtukams ir pasirinktoms būsenoms. Serifinis šriftas antraštėms, švarus bepadis šriftas tekstui. Dosnūs tarpai, be gradientų, be šešėlių, be emoji. Pirmiausia mobiliesiems.

3 žingsnis: nustatykite taisykles – šriftus, spalvas ir tarpus

Šie trys elementai lemia didžiąją dalį vizualinės kokybės. Aiškiai juos aprašyti – pats didžiausias patobulinimas, kurį galite padaryti.

Tipografija

• Vienas ar du šriftai. Antraštės šriftas ir teksto šriftas arba viena šeima keliais storiais.
• Šriftų mastelis. Keletas dydžių, naudojamų nuosekliai – pavyzdžiui, 14, 16, 20, 28 ir 40 px – o ne tai, ką kiekvienas komponentas pasirenka pats.
• Skaitomas pagrindinis tekstas. Apie 16 px žiniatinklyje, eilutės aukštis apie 1,5 ir ilgesniame tekste apie 60–75 simboliai eilutėje.
• Hierarchija per storį ir dydį, o ne spalvą. Antraštės storesnės ir didesnės; antrinis tekstas mažesnis ir švelnesnis pilkas.

Spalvos

• Daugiausia neutralios spalvos. Fonai, paviršiai, linijos ir teksto pilkos atlieka didžiąją darbo dalį.
• Viena akcentinė spalva veiksmams ir pasirinktoms būsenoms. Antra – tik jei ji turi aiškią paskirtį.
• Semantinės spalvos sėkmei, įspėjimui ir klaidai – ir naudojamos tik joms.
• Kontrastas. WCAG 2 reikalauja bent 4,5:1 kontrasto santykio įprastam tekstui ir 3:1 didelio dydžio tekstui. Šviesiai pilkas tekstas ant balto dažnai neatitinka; paprašykite DI patikrinti.
• Tamsus režimas, jei norite jo, – suprojektuotas sąmoningai, o ne tiesiog apverstas.

Tarpai ir išdėstymas

• Tarpų skalė, pavyzdžiui, 4, 8, 12, 16, 24, 32, 48, 64 px. Viskas prisitaiko prie jos.
• Lygiavimas. Kraštai sutampa; turinys stovi tinklelyje arba nuosekliu maksimalaus pločio stulpeliu.
• Artumas. Susiję dalykai arti vienas kito, nesusiję – toliau. Ši viena taisyklė ištaiso daugumą perkrautų ekranų.
• Mažiau konteinerių. Ne viskam reikia kortelės. Linijos, skirtukai ir balto tarpo zonos turinį dažnai sugrupuoja tyliau.

Užklausimas, kuris vieną kartą nustato visą sistemą:

Prieš kurdamas daugiau ekranų, sukurk nedidelę dizaino sistemą ir naudok ją visur: šriftų mastelis 14/16/20/28/40 px, teksto eilutės aukštis 1,5, tarpų skalė 4/8/12/16/24/32/48 px, neutralios spalvos nuo beveik baltos iki beveik juodos, viena akcentinė spalva (#3F6B5A) tik pagrindiniams veiksmams ir raudona tik klaidoms. Mygtukai, laukeliai ir kortelės turi turėti tą patį kampų suapvalinimo spindulį. Patikrink, kad visas tekstas atitinka WCAG AA kontrastą.

Jei dirbate su įrankiu, kuris supranta kodą, tai dažniausiai virsta dizaino žetonais – CSS kintamaisiais arba Tailwind tema – o tai reiškia, kad vėlesni pakeitimai vyksta vienoje vietoje.

4 žingsnis: pirmiausia gerai sukurkite vieną ekraną

Negeneruokite dvylikos ekranų ir vėliau bandykite visus ištaisyti. Pasirinkite ekraną, kurį vartotojai mato dažniausiai – dažnai tai skydelis arba pagrindinis sąrašas – ir tobulinkite jį, kol bus tinkamas. Tada:

Naudok skydelį kaip nuorodą visiems kitiems puslapiams: ta pati antraštė, tarpai, šriftų dydžiai, mygtukų stiliai ir lentelių stilius. Atnaujink Nustatymų ir Rezervacijų puslapius, kad atitiktų.

Baigtas nuorodinis ekranas daug geriau perteikia jūsų skonį nei bet koks būdvardis.

5 žingsnis: tobulinkite konkrečiais, mažais prašymais

Atsiliepimas DI veikia kaip atsiliepimas jaunesniajam dizaineriui: konkretus, po vieną sritį ir aiškiai nurodantis, ką palikti.

Visada pridėkite, ką išlaikyti – „išlaik visus maršrutus, tekstus ir funkcijas nepakitusius“ – kad vizualinis patobulinimas tyliai nepašalintų funkcionalumo. Ir patikrinkite kiekvieną pakeitimą telefono dydžio ekrane prieš prašydami kito; kaip atrodo gera išvaizda mažuose ekranuose, žr. kaip sukurti mobiliesiems pritaikytą žiniatinklio programėlę.

6 žingsnis: detalės, kurios atskiria gerą nuo bendro

Kai struktūra jau teisinga, šie maži dalykai daro programėlę baigtą:

• Tuščios būsenos. Ką mato naujas vartotojas be duomenų: trumpas paaiškinimas ir vienas aiškus veiksmas, o ne tuščia lentelė.
• Įkėlimo būsenos. Turinį primenantys skeletonai, o ne sukiojami ratukai visur.
• Klaidų būsenos. Paprasta kalba parašyti pranešimai šalia lauko, kuris sukėlė klaidą.
• Užvedimo, fokuso ir paspaudimo būsenos kiekvienam interaktyviam elementui – fokusavimo žiedai svarbūs klaviatūros naudotojams.
• Tikras turinys. Pakeiskite „Lorem ipsum“ ir „Jonas Jonaitis“ realistišku tekstu ir duomenimis; vietos rezervavimo turinys slepia išdėstymo problemas.
• Piktogramos iš vieno rinkinio, viename ar dviejuose dydžiuose, su nuosekliu brūkšnio storiu.
• Vaizdai su paskirtimi. Tikros jūsų produkto, vietos ar žmonių nuotraukos nugali bendras stock nuotraukas. Naudodami stock ar sugeneruotus vaizdus, laikykitės nuoseklaus stiliaus.
• Tekstas. Trumpos, konkrečios etiketės („Rezervuoti pamoką“, o ne „Pateikti“) suteikia suvokiamos kokybės tiek pat, kiek bet koks spalvos pasirinkimas.

Dažniausios klaidos

• Viso dizaino perrašymas vienoje užklausoje. Dideli perrašymai įveda regresijų. Eikite puslapis po puslapio.
• Per daug akcentinių spalvų. Jei viskas paryškinta, nieko neišsiskiria.
• Viso centravimas. Centruotas tekstas, išskyrus antraštę, sunkiai skaitomas; daugumą turinio lygiuokite į kairę.
• Maži, mažo kontrasto tekstai, kurie didelame monitoriuje atrodo elegantiškai, o telefone saulėje – neįskaitomi.
• Dekoras vietoj hierarchijos. Gradientai ir šešėliai neištaisys ekrano, kuriame svarbiausias veiksmas nėra akivaizdus.
• Pagrindinio puslapio ignoravimas. Daugeliui produktų tai pirmasis įspūdis; žr. kaip sukurti konversiją duodantį nukreipimo puslapį.

Daugiau užklausimų šablonų ne tik dizainui rasite straipsnyje kaip rašyti užklausimus DI programėlių kūrimo įrankiams. Jei jūsų darbas pats yra produktas – dizaino ar fotografijos portfelis – kaip sukurti portfelio svetainę išsamiau nagrinėja pristatymą.

Dizainas su Mythex

Mythex dizainą aprašote pokalbyje, matote jį tiesioginėje peržiūroje ir prieš kitą pakeitimą patikrinate telefono dydžio rėmelį. Dokumentacijoje yra trumpų pavyzdžių: dizaino ir UI užklausimai – kaip nurodyti, ką keisti ir ką išlaikyti, ir perdarykite savo UI – kaip atnaujinti vieną puslapį neprarandant funkcijų. Mythex taip pat gali pokalbyje ieškoti nemokamų nuotraukų arba sugeneruoti vaizdą – pagrindinį paveikslėlį, foną ar bendrinimo vaizdą – ir įdėti jį į programėlę, kai paprašote. Jei kuris nors pakeitimas nepavyksta, grįžkite prie kontrolinio taško, sukurto prieš jį. Jei norite pradėti nuo esamo dizaino ir jį pritaikyti, peržiūrėkite šablonus.

Klausimai