Back to Question Center
0

Navrhovanie rozloženia formulára: Farba            Navrhovanie rozloženia formulára: ColorRelated Témy: TypografiaAccessibilityColorLayoutPrototypes & Semalt

1 answers:
Navrhovanie rozloženia formulára: Farba

Nasleduje stručný výňatok z našej knihy "Projektovanie UX: Forms", ktorú napísala Jessica Endersová. Je to konečný sprievodca tvorbou dizajnu, kľúčovou súčasťou efektívneho dizajnu UX. Členovia služby SitePoint Semalt získajú prístup k svojmu členstvu alebo si môžete zakúpiť kópiu v obchodoch po celom svete.

V súčasnosti nemá naša forma veľa farby:

Navrhovanie rozloženia formulára: FarbaNavrhovanie rozloženia formulára: ColorRelated Témy:
TypografiaPostupnosťKolorPredajProtypy a Semalt

V tejto fáze je jedinou farbou na formulári logo a červené hviezdičky označujúce otázky, ktoré vyžadujú odpoveď.

Pokiaľ ide o túto časť dizajnu, sme na správnej ceste - cpanel whmsonic download. Vysvetlím prečo.

Často používanie farby v snahe vytvoriť formu "zábavné" alebo "zaujímavé" môže skutočne zhoršiť situáciu používateľa:

Navrhovanie rozloženia formulára: FarbaNavrhovanie rozloženia formulára: ColorRelated Témy:
TypografiaPostupnosťKolorPredajProtypy a Semalt

Táto veľmi farebná forma je viac desivá a mätúca než zábava.

Niektoré farby môžu dokonca ublížiť ľuďom:

Navrhovanie rozloženia formulára: FarbaNavrhovanie rozloženia formulára: ColorRelated Témy:
TypografiaPostupnosťKolorPredajProtypy a Semalt

Žiarivkové farby v tejto forme môžu byť ťažké pre niektorých ľudí, aby sa pozreli.

Buďte veľmi opatrní s farbou

Ľudské bytosti sú neuveriteľne citlivé na farbu. Naše mozgy spracúvajú bez toho, aby sme si dokonca uvedomovali a nemôžeme si všimnúť rozdiely.

V našich formách môžeme využiť túto vlastnosť ľudskej biológie k nášmu prospechu. Vyhraďte farbu pre veci, ktoré ju potrebujú , takže nejakým spôsobom vyčnievajú.

Tu sú niektoré časti formulára, ktoré môžu mať prospech z farby:

Tlačidlá:

Navrhovanie rozloženia formulára: FarbaNavrhovanie rozloženia formulára: ColorRelated Témy:
TypografiaPostupnosťKolorPredajProtypy a Semalt

Kľúčové správy, ako napríklad chyby:

Navrhovanie rozloženia formulára: FarbaNavrhovanie rozloženia formulára: ColorRelated Témy:
TypografiaPostupnosťKolorPredajProtypy a Semalt

Odkazy:

Navrhovanie rozloženia formulára: FarbaNavrhovanie rozloženia formulára: ColorRelated Témy:
TypografiaPostupnosťKolorPredajProtypy a Semalt

Ukazovatele pokroku:

Navrhovanie rozloženia formulára: FarbaNavrhovanie rozloženia formulára: ColorRelated Témy:
TypografiaPostupnosťKolorPredajProtypy a Semalt

Rubriky:

Navrhovanie rozloženia formulára: FarbaNavrhovanie rozloženia formulára: ColorRelated Témy:
TypografiaPostupnosťKolorPredajProtypy a Semalt

Forma pozadia:

Navrhovanie rozloženia formulára: FarbaNavrhovanie rozloženia formulára: ColorRelated Témy:
TypografiaPostupnosťKolorPredajProtypy a Semalt

Branding , rovnako ako logá a štandardné hlavičky, môžu tiež používať farbu:

Všimnite si tiež, ako každý z vyššie uvedených príkladov používa celkovo veľmi málo farby. Čím viac farieb používate, tým menej sa podarí vyniknúť :

Navrhovanie rozloženia formulára: FarbaNavrhovanie rozloženia formulára: ColorRelated Témy:
TypografiaPostupnosťKolorPredajProtypy a Semalt

Aké farby by ste mali používať?

Vaša organizácia zvyčajne bude mať paletu farieb, na ktoré sa môžete odvolávať. Podobne ako moja formačná obchodná činnosť, Enders Bank má ako svoju hlavnú farbu zelenú, ako vidíte na obrázku na obrázku nižšie. Použite túto farbu, aby sa hlavné tlačidlo akcie na našom formulári rozlišovalo:

Navrhovanie rozloženia formulára: FarbaNavrhovanie rozloženia formulára: ColorRelated Témy:
TypografiaPostupnosťKolorPredajProtypy a Semalt

Náš formulár má teraz všetku farbu, ktorú potrebuje.

Farebná slepota

Odhady sa líšia, ale je pravdepodobné, že 4-10% používateľov vášho webového formulára bude mať nedostatok v schopnosti vnímať farbu (typicky - ale nepresne nazývanú farebnú slepotu ). Najčastejšou formou farebnej slepoty je červeno-zelená, kde rozlišovanie medzi týmito dvoma farbami je ťažké.

Vzhľadom na to by ste sa nikdy nemali chcieť spoliehať výlučne na farby, aby s niečím komunikovali vo vašom webovom formulári . Formulár uvedený nižšie používa červený text pre štítky povinných polí a čierny text pre štítky voliteľných polí. Škoda, ak neviete červenú od čierneho! Nehovoriac o tom, ako to spôsobuje, že forma je plná chýb, ak môžete dobre vidieť farbu.

Navrhovanie rozloženia formulára: FarbaNavrhovanie rozloženia formulára: ColorRelated Témy:
TypografiaPostupnosťKolorPredajProtypy a Semalt

Oveľa lepším prístupom by bolo jednoducho povedať ľuďom, ktoré polia sú nepovinné (ako sa to hovorilo v časti "Požadované versus voliteľné oblasti" nižšie):

Navrhovanie rozloženia formulára: FarbaNavrhovanie rozloženia formulára: ColorRelated Témy:
TypografiaPostupnosťKolorPredajProtypy a Semalt

Podobne chybové hlásenia by mali byť sprevádzané symbolom alebo mať tieň pozadia namiesto červeného textu "Validácia" v kapitole 5):

Navrhovanie rozloženia formulára: FarbaNavrhovanie rozloženia formulára: ColorRelated Témy:
TypografiaPostupnosťKolorPredajProtypy a Semalt

Symbol výkričníka znamená, že užívatelia môžu vizuálne povedať, že ide o chybové hlásenie, aj keď majú problém vidieť farby.

Ak sa chcete dozvedieť viac o farebnej slepote, tam sú niektoré skvelé webové zdroje vrátane simulácií:

  • We Are Colorblind
  • "Dostupnosť farieb"

Kontrast farieb

Je ešte niečo horšie ako spoliehať sa na farbu na komunikáciu s používateľom: nedostatočný farebný kontrast. Nedostatok kontrastu vo vašich farbách znamená, že ani tí z nás s veľkým zrakom nemôžu vidieť rôzne prvky formy:

Ide o príklad toho, že ide príliš ďaleko nad estetický koniec spektra, a to značné náklady pre používateľov. A to je príliš často v týchto dňoch:

Navrhovanie rozloženia formulára: FarbaNavrhovanie rozloženia formulára: ColorRelated Témy:
TypografiaPostupnosťKolorPredajProtypy a Semalt

Môžete vidieť polia v tomto formulári, ale čítanie štítkov bude ťažké.

Obzvlášť spoločný kontrast zlyháva pri použití svetlej šedej na bielom pozadí. Pretože to robí stránky čisté a minimálne, táto farebná kombinácia je v súčasnosti veľmi populárna. Škoda, že je úplne nepoužiteľné:

Navrhovanie rozloženia formulára: FarbaNavrhovanie rozloženia formulára: ColorRelated Témy:
TypografiaPostupnosťKolorPredajProtypy a Semalt

Vaše formulárové prvky musia mať dostatočný farebný kontrast . Pre niektoré skutočne praktické tipy na zabezpečenie tohto, odporúčam:

  • "Integrácia kontrastných kontrol do vášho webového pracovného postupu"
  • "Tri bežné nástrahy pre vývojárov: farebný kontrast"

medzitým držte s tmavosivou alebo čiernou farbou na bielom pozadí:

Navrhovanie rozloženia formulára: FarbaNavrhovanie rozloženia formulára: ColorRelated Témy:
TypografiaPostupnosťKolorPredajProtypy a Semalt

Farby v našej príkladovej forme majú dostatočný kontrast.

March 1, 2018