UI Wireframes

Kopijuoti Šabloną

Kopijuoti Šabloną

Kopijuoti Šabloną

Kopijuoti Šabloną

Kas yra UI Wireframe?

UI vielinis rėmelis yra vizualus vartotojo sąsajos (UI) dizaino vaizdas, apibūdinantis pagrindinę žiniatinklio ar mobiliosios programos struktūrą ir išdėstymą. Tai žemo tikslumo maketas arba galutinio dizaino skeletas, rodantis įvairių dizaino elementų, tokių kaip mygtukai, meniu, formos ir vaizdai, išdėstymą ekrane.

Kodėl UI vieliniai rėmeliai yra svarbūs?

UI laidiniai rėmeliai svarbūs dėl kelių priežasčių:

• Jie padeda vizualizuoti vartotojo sąsajos dizaino išdėstymą ir leidžia dizaineriams nustatyti galimas naudojimo problemas prieš investuojant laiką ir išteklius į kūrimo procesą.
• Jie naudojami kaip komunikacijos priemonė tarp dizainerių, kūrėjų ir suinteresuotųjų šalių, padedanti užtikrinti, kad visi būtų tame pačiame puslapyje dėl dizaino reikalavimų.
• Jie padeda sutaupyti laiko ir pinigų, nes leidžia greitai kartoti ir pakeisti dizainą prieš pradedant kūrimo procesą.
• Jie suteikia aiškią kryptį, kuria kūrimo komanda turi vadovautis, todėl galutinis produktas yra darnesnis ir patogesnis.

Kaip geriausiai naudojami UI vieliniai rėmeliai?

UI vielinius rėmus geriausia naudoti ankstyvosiose projektavimo proceso stadijose. Dizaineriai paprastai pradeda kurdami kelis žemo tikslumo vielinius rėmus, kad ištirtų skirtingas išdėstymo parinktis ir kartotų dizainą, remdamiesi suinteresuotųjų šalių atsiliepimais. Pasirinkus galutinį dizainą, sukuriami didesnio tikslumo vieliniai rėmeliai arba maketai, kurie suteikia daugiau detalių ir geresnį galutinio produkto pojūtį. Tada šiuos vielinius rėmus kūrimo komanda naudoja kaip nuorodą diegimo etape.

Kas įtraukta į vartotojo sąsajos rėmelį?

UI vielinį rėmą paprastai sudaro šie elementai:

1. Puslapio arba ekrano išdėstymas ir struktūra
2. Navigacijos ir meniu parinktys
3. Mygtukų, formų ir kitų interaktyvių elementų išdėstymas
4. Vietos rezervavimo tekstas ir vaizdai
5. Pagrindinė tipografija ir šriftų stiliai
6. Pagrindinės spalvų schemos ir prekės ženklo elementai
7. Anotacijos arba pastabos, kad būtų galima pateikti papildomo konteksto ir išsamios informacijos

3 Patarimai, Kaip Sukurti Vartotojo Sąsajos Rėmelius

1 Laikykitės Tinklelio

Kuriant naujo puslapio maketą arba pertvarkant esamą, svarbu laikytis tinklelio sistemos. Padalinkite savo vielinį rėmą į tinklelį ir įsitikinkite, kad jūsų vaizdai, tekstas ir raginimas veikti puikiai tinka tinklelyje. Tai nereiškia, kad kiekvienas turtas turi būti tokio paties dydžio, tai reiškia, kad jie turi būti proporcingi vienas kitam.

2 Padvigubinkite Baltą Erdvę

Pažvelkite į visus tarpus tarp teksto skyrių arba mygtukų. Dabar padvigubinkite. Visada geriau, kad tarp pastraipų ar vaizdų būtų daugiau vietos, nei kad jie atrodytų ankšti. Naudotojų neatbaidys daug laisvos vietos (proto ribose), tačiau jie greitai pasijus priblokšti ir sumišę dėl vaizdų, sukrautų vienas ant kito.

3 Išbandykite ir Kartokite

Išbandykite savo puslapį su tikrais vartotojais. Atminkite, kad jūsų dizaino, technologijų ir produktų kūrimo komanda gali jus nuvesti tik iki šiol. Turite klausytis tikrų naudotojų atsiliepimų ir stebėti jų veiksmus, kurių jie imasi naudojant naują vartotojo sąsajos schemą. Ar vartotojams sunku rasti tam tikrą mygtuką? Padarykite jį didesnį. Ar vaizdas per didelis nešiojamųjų kompiuterių naudotojams? Padarykite savo puslapį labiau reaguojantį. Išbandykite savo puslapį ir atitinkamai pakartokite.

Dažnai Užduodami Klausimai Apie UI Vielinius Rėmus

Ar vartotojo sąsajos rėmelius gali sukurti ne dizaineriai?

Taip, bet kas gali sukurti vartotojo sąsajos rėmelį. Tačiau svarbu nepamiršti, kad vieliniai rėmeliai yra esminė projektavimo proceso dalis ir reikalauja pagrindinių vartotojo sąsajos projektavimo principų ir geriausios praktikos supratimo.

Ar į UI vielinius rėmelius turėtų būti įtraukti galutiniai vizualinio dizaino elementai?

Ne, UI laidiniai rėmeliai paprastai yra žemo tikslumo ir juose nėra galutinių vizualinio dizaino elementų, pvz., išsamios tipografijos, spalvų schemų ar prekės ženklo elementų. Tačiau jie gali apimti pagrindinius vaizdinius nurodymus, kad būtų galima suprasti galutinę dizaino kryptį.

Kiek UI laidinių kadrų kartojimų reikia?

UI vielinių rėmelių iteracijų skaičius priklauso nuo projekto sudėtingumo ir reikalaujamo detalumo lygio. Paprastai dizaineriai sukuria kelis žemo tikslumo vielinius rėmelius prieš apsispręsdami dėl galutinio dizaino, o tada sukuria didesnio tikslumo vielos rėmus arba maketus, kad pateiktų daugiau detalių. Neretai dizaineriai kartoja dizainą viso kūrimo proceso metu.