Ako navrhnúť grafické užívateľské rozhranie?

Potom váš dizajn v dlhodobom horizonte určite zlyhá — Ak váš návrh nie je zábavný, potom váš dizajn v dlhodobom horizonte určite zlyhá.

Všetci sa skôr alebo neskôr stretneme s GUI (grafickými používateľskými rozhraniami). Tento článok vás prevedie procesom navrhovania vlastných používateľských rozhraní webovej stránky. Rozhranie webového rozhrania sa príliš nelíši od „grafického používateľského rozhrania“; v skutočnosti je to dieťa toho druhého. Webové rozhrania umožňujú interakciu medzi webovou stránkou alebo programom prostredníctvom internetu alebo prostredníctvom internetu a / alebo sietí.

V čom je odlišný a jedinečný, zameriava sa na prvky alebo základy skvelého alebo úspešne funkčného rozhrania. Začnime...

Kroky

1
Pamätajte na zlaté pravidlo. Aby ste úspešne porozumeli a rozvíjali svoje vlastné návrhy rozhraní, osvojte si základné a/alebo zložité tvary. (Kruh, štvorec, trojuholník, hviezda atď.) Každý mysliteľný tvar alebo dizajn sa v konečnom dôsledku skladá zo série veľmi základných tvarov.
- Ak si to dokážete predstaviť alebo vidieť základné tvary v kombinácii s akýmkoľvek dizajnom alebo fotografiou, môžete z pamäte nakresliť/navrhnúť čokoľvek, nielen skopírovať alebo vystopovať obrázok.
2

Zabudnite na všetko, čo si myslíte, že viete o „dizajne rozhrania“. Nezabudnite sa zabaviť. Ak váš návrh nie je zábavný, váš návrh z dlhodobého hľadiska určite zlyhá.
3

Nájdite perfektné škálovateľné rozloženie/dizajn. Vytvorte rozloženie, kde na seba prvky nadväzujú ako na stavebné bloky.
4

Rozhodnite sa pre svoj návrh o rozmeroch (konečná veľkosť) a farebnej schéme (vzorkovníky).
5

Vyberte si požadovanú aplikáciu grafického dizajnu (photoshop, ohňostroj atď.).
6

Vytvorte „nový dokument“ a uložte ho ako „váš_názov_súboru“. Môžete napríklad vytvoriť dokument široký 1024 pixelov BY: vysoký 848 pixelov s bielym alebo priehľadným pozadím.
7
Vytvorte „vrstvy“ alebo „skupiny“ s názvom „pracovné priestory“. Potom vo Photoshope vytvorte 11 priečinkov, jednu pre každú oblasť. Zoskupenie umožňuje ľahký prístup a úpravy.
- Oblasť loga
- Vyhľadávacie pole
- Oblasť navigácie/ponuky
- Posúvač webovej stránky
- Skupina tlačidiel Hľadať
- Možnosti výsledku vyhľadávania
- Obsah L1
- Obsah L2
- Správny obsah
- Najnovšie správy
- Päta
8
Zadajte hlavné „sekcie“, ktoré bude mať váš návrh. Pre každú vrstvu alebo skupinu pracovného priestoru použite rôzne farby. Sekcie číslovania umožňujú ľahký prístup k súboru your.PSD (zdrojový súbor) pre kohokoľvek, kto potrebuje vo vašej neprítomnosti vykonať zmeny alebo pridať ďalšie prvky návrhu.
- Váš návrh by mal pripomínať nasledujúce „rozloženie pracovného priestoru“.
9

Dim/fade (zmena nepriehľadnosti) skupiny rozloženia pracovného priestoru.
10

Pomocou zablokovaných sekcií začnite rozmiestňovať svoje „prvky webových stránok “.
11

Uistite sa, že „rozloženie pracovného priestoru“ je úplne navrchu vašich vrstiev. A skontrolujte, či je uzamknutý na úpravu.
12

V tomto mieste môžete začať pridávať webové prvky a obsah do ktorejkoľvek z vymedzených sekcií alebo „pracovných priestorov“.
13

Pridajte/navrhnite obsah všetkých svojich sekcií, ako aj vyhľadávacie pole.
14

Pokračujte v práci na obsahu, kým nebudete s rozložením spokojní. Nezabudnite si svoju prácu uložiť, ako budete postupovať.
15

Pokračujte v pridávaní ďalších a ďalších podrobností k sekciám. Nezabudnite skontrolovať, či pracujete na príslušnej sekcii.

Že ste rozhranie navrhli sami — Exportujte celý návrh tak, ako postupuje, aby ste neskôr vytvorili dokument „WIP“ (nedokončená výroba), aby ste dokázali, že ste rozhranie navrhli sami.

Tipy

Podľa potreby duplikujte vrstvy na reprodukciu obsahu alebo prvkov, ktoré použijete. Rovnaký prvok alebo text a opatrne umiestnite svoj novo duplikovaný prvok do pracovnej oblasti.
Organizujte svoje vrstvy a skupiny pomocou jedinečných názvov pre vrstvy a prvky (majte na pamäti, že organizovanie práce sa z dlhodobého hľadiska vypláca).
Nájdite si čas na prieskum a zhromaždenie zdrojových fotografií a fotografií, ktoré sa majú použiť vo vašom rozhraní (webová stránka).
Uložte všetky svoje fotografie a obrázky na jedno miesto, aby bol k nim ľahký prístup.
Uložte rôzne verzie súboru Photoshop, aby ste ich mohli neskôr skontrolovať a porovnať, ak sa rozhodnete vykonať veľké alebo veľké zmeny rozloženia v súbore Adobe Photoshop.
Exportujte celý návrh tak, ako postupuje, aby ste neskôr vytvorili dokument „WIP“ (nedokončená výroba), aby ste dokázali, že ste rozhranie navrhli sami. Experti a začiatočníci sa rozhodli vytvárať WIP, pretože ilustrujú všetky rôzne fázy, ktoré prešli, aby dosiahli konečný produkt alebo dizajn a/alebo rozhranie. Takmer vždy sa používa aj ako „návody krok za krokom“.
Pamätajte si, že zobrazenie všetkých rôznych procesov s citáciami a vysvetleniami umožňuje iným (začiatočníkom) postupovať podľa pokynov na vytváranie a učenie sa z nich.

Varovania

Pri práci v programe ako Photoshop alebo Fireworks vždy ukladajte svoju prácu.

Veci, ktoré budete potrebovať

Počítač s prístupom na internet
Adobe Photoshop (ľubovoľná verzia) alebo iný podobný program
Zdroj Obrázky/fotografie na okorenenie dizajnu

Prečítajte si tiež: Ako kúpiť doménové meno prostredníctvom spoločnosti Google?