Vietnes lietotāja interfeisa pogu dizains: 10 tendences un padomi
Lielisks pogu dizains ir kaut kas tāds, par ko vairums vietņu lietotāju nekad nedomā ... jo, kad tas darbojas labi, tas ir gandrīz nemanāms. Vislabākās pogas ir viegli noklikšķināt vai pieskarties, tām ir acīmredzama funkcija un tās palīdz lietotājiem bez domāšanas mijiedarboties ar dizainu.
Tā ir diezgan vienkārša formula, taču to var būt grūti noformēt, ja atstājat to kā pārdomu.
Šodien mēs aplūkojam pogu noformējuma tendences, kā arī dažus padomus, kas palīdzēs jums izveidot UI pogu, uz kuras cilvēki atkal un atkal noklikšķina. Piešķiriet pogas dizainam impulsu, izmantojot šos padomus, tendences un idejas, lai rosinātu iedvesmu.
Izpētiet dizaina resursus
1. Saglabājiet to vienkārši
Tas viss atgriežas pie šīs klasiskās frāzes dizaina teorijā: saglabājiet to vienkārši, muļķīgi (vai muļķīgi, ja vēlaties).
Vietnes pogu dizains neatšķiras. Pogas noformējumam nav jābūt pārāk sarežģītam. Tam vajadzētu būt acīmredzamam un funkcionālam. Dažreiz to var traucēt citas dizaina tendences, un tas var ietekmēt reklāmguvumus jūsu vietnē.
Tāpēc, runājot par pogu dizainu, padomājiet šādi - un nepārlieciet to. Pogai vajadzētu izskatīties kā pogai. Tas ir tik vienkārši.
2. Nodrošiniet daudz kontrastu
Gandrīz tikpat svarīgi kā identificējamai pogai ir pārliecināties, ka tā ir viegli redzama.
Spoku pogu stili virs ātri izlīdzinātiem un izbalinātiem attēliem ir tāpēc, ka pogām nebija pietiekami daudz kontrastu, lai tās būtu viegli pamanāmas. Lietotāji tos uzreiz nevarēja atrast.
Neslēpiet pogas ar sliktu kontrastu. Lieciet viņiem izcelties un kliegt ar lielu krāsu un telpas kontrastu, lai tie atšķirtos no citiem ekrāna elementiem. Ap pogām atstājiet daudz polsterējuma, lai tās varētu elpot.
Tas lietotājiem ļauj pogas vieglāk atrast un identificēt kā noklikšķināmus elementus, kā arī ļauj fiziski vieglāk noklikšķināt, kļūdaini nesaņemot nepareizu elementu.
3. Izmantojiet krāsu
Vai esat kādreiz pamanījis, cik pogas ir sarkanas vai oranžas? Tas ir tāpēc, ka spilgtas krāsas pievērš uzmanību šiem elementiem un mudina rīkoties.
Krāsu izmantošana ir arī diezgan moderns dizaina paņēmiens. No spilgtām krāsām līdz pogām ar vienkāršiem slīpumiem krāsa varētu būt viens no vienkāršākajiem veidiem, kā palīdzēt cilvēkiem mijiedarboties ar dizainu.
4. Uzrakstiet mikroskopiju, kas rada cerības
Neveiciet šo kļūdu: poga ar vārdiem “Click Here”. (Cik tas ir surogātpasts?)
Mikroskopijai pogas noformējumā vajadzētu radīt skaidras cerības par to, kas notiks ar klikšķi. Pastāstiet lietotājiem, ko viņi iegūs nākamie. Tas varētu būt tikpat vienkāršs kā “Iesniegt”, lai ievadītu datus, vai noklikšķinot uz saites “Uzzināt vairāk”, vai skatoties videoklipu. Neatkarīgi no tā, kāda ir darbība, pastāstiet lietotājiem mikroskopijā.
Šī informācija var palīdzēt radīt uzticēšanos lietotājiem un palielināt reklāmguvumus ar darbībām / mijiedarbību, kas lietotājiem šķiet vēlama.
5. Iesaistieties smalkā animācijā
Pogu dizainā ir tendence, kad vietnes izmanto divas pogas blakus. Viens ir aizpildīts, viens ir spoku stils. Abos ir iekļauta lidmašīnas animācija, kas vēl vairāk uzsver divas klikšķināmas izvēles.
Animācija var palīdzēt pievērst uzmanību pogām un pat mudināt uz klikšķiem. Tas ir kļuvis par vispārpieņemtu lietotāja modeli, lai uz pogas ietvertu lidināmā animāciju, un tas lietotājiem nodrošina vienkāršu norādi.
Tikai neejiet pāri bortam. Virpuļojošas, vērpjošas, mirgojošas pogas ir vairāk kaitinošas nekā noderīgas.
6. Padariet to pietiekami, lai piesitinātu
Pogām ir jāaptver noklikšķināms (piespiežams) laukums, kura diametrs ir vismaz 10 milimetri, un lielāks vienmēr ir OK. Šis padoms nāk no MIT Touch Lab pētījuma, kurā tika izskatīti pirkstu spilventiņu izmēri saistībā ar skāriena ierīcēm.
Apskatīsim to perspektīvā. Parasti fiziskās datora tastatūras taustiņš ir 15 milimetri un 15 milimetri. Tas ir labs mērķis. (Vienkārši neaizmirstiet ņemt vērā dažādus ekrāna izmērus, lai mazajos ekrānos nepazustu jūsu poga.)
Ja jums ir jāizmanto mazākas pogas, apsveriet iespēju tam pievienot plaša klikšķa rādiusu. Tādā veidā, ja lietotājs pats izlaiž pogas, ap to ir pietiekami daudz vietas, lai vēlamā darbība joprojām notiktu. (Jūsu vietnes apmeklētāji jums pateiks paldies.)
7. Izmantojiet pazīstamo stilu
Ir daži vispārīgi pogu stili, kas visiem ir pazīstami. Izmantojiet vienu no tiem.
- Taisnstūra aizpildīta poga ar kvadrātveida malām un tekstu iekšpusē
- Taisnstūrveida aizpildīta poga ar noapaļotām malām un tekstu iekšpusē
- Taisnstūra aizpildīta poga ar redzamu pilienu ēnu (virs)
- Taisnstūra spoku poga
- Vienkāršas apļa pogas, kuras visbiežāk tiek izmantotas apakšējā labajā stūrī, lai apzīmētu atbalstu, palīdzību vai tērzēšanu
8. Ievietojiet paredzētajā vietā
Pogām ir ne tikai jāparādās un jāparedz, ka tām arī jādarbojas, bet tām arī jāatrodas vietā, kur lietotāji tās meklēs.
- Mājaslapās tas ietver pogu izvietojumu zem galvenā virsraksta vai teksta bloka. Pogas parasti ir pa kreisi saskaņotas ar tekstu vai ekrāna centrā.
- Veidlapām pogas parādās pēc ievades. Dažas atsevišķas ievades formas izlīdzina pogu tajā pašā rindā pa labi no ievades.
- Vispārējās CTA pogas parādās tieši zem satura, uz kuru tās atsaucas.
- Pogas video vai spēles atskaņošanai vai palaišanai bieži atrodas priekšskatījuma ekrāna centrā.
- Pirkumu groza vai e-komercijas pogas parasti atrodas augšējā labajā stūrī.
9. Neaizmirstiet atsauksmes
Vai poga reaģē uz mijiedarbību? Pārliecinieties, ka pogas interfeisa dizainā ir iekļauta acīmredzama atgriezeniskā saite.
Nodrošiniet vizuālu vai instrukcijas norādi, ka poga ir izdarījusi savu darbu. Dažām pogām būs nepieciešams vairāk darba nekā citām. Piemēram, pogas, kas novirza uz citu lapu vai vietni, sniedz atsauksmes par to, ka poga ir darbojusies, ja tiek ielādēta jaunā lapa. Veidlapas iesniegšanas poga var parādīt ekrānā pateicības ziņojumu, ja informācija ir pareizi iesniegta.
10. Apzināti izmantojiet pogas
Pārāk daudz pogu rada haosu.
Izmantojiet pogas tur, kur tām ir jēga. Nepārslogojiet dizainu ar pogām visur. Lietotājiem nebūs skaidra priekšstata par to, kur un uz ko ir vissvarīgāk noklikšķināt.
Saglabāt pogas izmantošanai ar vietnes mērķiem. Viņiem vajadzētu piesaistīt apmeklētājus pie elementiem, kas ir vissvarīgākie jūsu vispārējā dizainā.
Secinājums
Vietnes poga ir elements, kas pārveido jūsu aicinājumu uz darbību rezultātā. Nepieciešams laiks, lai pārdomātu šo dizainu, sākot no krāsas līdz funkcijai un beidzot ar mikroskopiju. Pārbaudes pogas dizains, lai pārliecinātos, ka interfeisā ir visfunkcionālākā versija.
Ja jums ir poga, kas darbojas, neiekļūstiet tendenču slazdā un nemainiet dizainu. Runājot par pogām, šai funkcijai vajadzētu būt galvenajai prioritātei.
