Pogu noformēšanas padomi: vienkārši, mazi un ļoti svarīgi
Dizainā daudz runājam par detaļām. Tas ir pamatota iemesla dēļ. Pievēršot uzmanību pat vismazākajām detaļām, dizains var tikt izveidots vai sabojāts.
Šodien mēs iedziļināsimies vienā no šīm detaļām un izskatīsim veidus, kā noformēt pogas, uz kurām lietotāji vēlas noklikšķināt (vai pieskarties). Kaut arī pogas varētu būt viens no mazākajiem elementiem jūsu dizainā, tās ir vienas no vissvarīgākajām. Kā gan jūs darītu zināmas darbības lietotājam? Kā citādi viņi sniegtu informāciju šajā atgriezeniskās saites cilpā?
Uz brīdi padomājiet par vienu no lielajām sūdzībām par plakano dizainu sākuma stadijā: Lietotāji nezināja, kas bija un kas nebija interaktīvs projektēšanā. Līdz ar to liela pogas dizaina nozīme.
Izpētiet dizaina resursus
Tam vajadzētu izskatīties aizkustināms
Lietotājiem ir jāredz poga noformējumā un jādomā, ka viņiem ir nepieciešams, lai sasniegtu un pieskartos tai. Kaut arī uz ekrāna var noklikšķināt gandrīz jebkura izmēra pogas, skārienierīces pogas izmērs un polsterējums ir ļoti svarīgi.
Vidusmēra lietotājam pirksta gals ir no 8 līdz 10 milimetriem. Paturot to prātā, mērķis 10 līdz 10 milimetri ir lielisks sākuma izmērs skārieniekārtu pogu pogām. (Tas ir nedaudz mazāks nekā standarta tastatūras taustiņi.)
Ir dažas dizaina lietas, kuras varat darīt, lai arī elements izskatās pieskaitāms.
- Smalka ēna var “pacelt” elementu no fona, lai tas justos mazliet tuvāk lietotājam.
- Paaugstināts polsterējums ap pogām padara tos vieglāk noklikšķināmus un palīdz lietotājam virzīties uz elementu.
- Krāsainas kursora pārvietošanas vai pārslēgšanas darbības lietotājiem var parādīt, ko viņi dara reālajā laikā, un nozīmē darbību.
Krāsu jautājumi
Pogas krāsai jābūt īpašai visā vietnes dizainā. Šī ir piemērota vieta, kur izmantot noteiktu akcentu krāsu un izmantot to tikai darbību veikšanai ar pogām.
Pogu krāsai jābūt spilgtai un saistošai. Ir iemesls, ka tik daudzos dizainos ir dzeltenas, zilas vai zaļas pogas. Tos ir viegli redzēt un izcelties no pārējā dizaina. Pogai, kas patiešām izceļas, atlasiet krāsu, kas papildina dizainparauga galveno krāsu (pretstati krāsu ritenī).
Citas bažas par krāsu ir zīmols. Jūs vēlaties atlasīt pogas krāsu, kas atbilst jūsu krāsu paletei un zīmola identitātei. Neatkarīgi no tā, cik ļoti vēlaties, lai pogas krāsa izceltos dizainā, tai vajadzētu darboties ar savu primāro krāsu shēmu - nevis pret.
Izmērs ir vēl svarīgāks
Padariet to lielu!
Pogām ir vajadzīga neliela daļa, lai lietotāji nekavējoties tiktu pievilināti pie ekrāna. Spoku pogu tendence - izklāsts bez atšķirīgas pogas krāsas - ir vērsta uz lielām pogām pikseļu skaita ziņā, bet tai trūkst vizuālā svara. Pogas lielumam jābūt lielam abos aspektos. (Tas ir viens no iemesliem, kāpēc šī tendence ir izkritusi no modes.)
Tomēr ir sarežģīta vieta, kad poga ir no perfekta izmēra līdz mulsinoši lielgabarītam. Precīzi, kad tas notiks, ir atkarīgs no citu dizaina elementu mēroga, bet jūs noteikti zināt, kad tas notiks. Ja poga ir viss, ko redzat dizainā, iespējams, ka tā ir pārāk liela.
Izvietojums ir atslēga
Kur dizainā pogai vajadzētu iet? Vai ir kāda atrašanās vieta, kas palīdzēs radīt klikšķus vairāk nekā citi?
Vairumā gadījumu pogām vajadzētu sekot saturam, kuru tās ir izveidotas, lai papildinātu.
- Veidlapas beigās
- Pa labi no ziņojuma par aicinājumu uz darbību
- Lapas vai ekrāna apakšā
- Centrā zem ziņojuma
Kāpēc šie izvietojumi? Jo tas seko dabiskajam darbības ceļam un tam, kā lietotāji lasa un mijiedarbojas ar vietnēm.
Koncentrējieties uz kontrastu
Ar visiem dizaina elementiem svarīgs apsvērums ir kontrasts. Tas attiecas uz paņēmieniem, ko izmanto pašā elementā, bet arī attiecībām starp elementu un tā izvietojumu dizainā un apkārtni.
Šajā duālajā vidē atcerieties padomāt par šādām metodēm:
- Krāsa
- Tipa svars un lielums
- Elementu lielums
- Forma, ciktāl tā attiecas uz fonu
- Caurspīdīgums vai animācija
- Ēnas vai greideni
- Atstarpe un polsterējums
Izmantojiet standarta formas
Runājot par pogām, jums jāņem vērā tikai divas formas:
- Apļi. Apļveida poga ir kļuvusi populāra, pateicoties Material Design un Material Lite koncepcijām. Ar jebkuru līdzīgu estētiku apaļa poga darbojas ar dizainu un der lietotāja modelim.
- Taisnstūri. Šai noklusējuma formai vajadzētu būt pieejamai visām pogām, ja vien iepriekšminētajā gadījumā neizmantojat loku. Tas ir tas, ko lietotāji zina un ir pieraduši. Lielākā daļa pogas taisnstūru mēdz būt vismaz divreiz platākas nekā garas (dažreiz trīs vai četras reizes platākas). Lietotāji redz šo formu un uzreiz zina, kā rīkoties. Lai gan daži var apgalvot noapaļoto stūru un 90 grādu leņķu priekšrocības, abi ir vienlīdz piemēroti, ņemot vērā jūsu dizaina stilu.
Pasakiet lietotājiem, kas jādara
Katrā pogā jāiekļauj teksta instrukcijas, kurās lietotājiem precīzi norādīts, ko poga darīs. Vēlaties, lai valoda būtu īsa un vienkārša, un tai jāatbilst pārējās vietnes dizaina toni.
Tad izpildiet šo solījumu. Nākamajai uznirstošajai lietai vajadzētu pateikt lietotājam, ka viņi ir ieradušies paredzētajā galamērķī. Neatkarīgi no tā, vai tas iesniedz veidlapu, veic pirkumu vai vienkārši pāriet uz citu saiti, mijiedarbojoties ar pogu, lietotājam vajadzētu iegūt vēlamo rezultātu. (Ja nē, pārliecinieties, vai atgriezeniskās saites cilpā ir norādīta kļūda, lai jūs zināt, kādi labojumi jādara vietnes dizainā.)
Pogas ziņojumapmaiņas piemēri:
- Noklikšķiniet šeit
- Izveidojiet kontu tūlīt
- Izmēģiniet to bez maksas
- Pievienot grozam
- Lasīt vairāk
Piešķiriet pogām lielu vizuālo nozīmi
Lielākā daļa dizainu ir piepildīti ar maziem UI elementiem. Viens no slazdiem, kas notiek, ir šo elementu noformējums, līdz projekts ir gandrīz pabeigts. Un tad jūs izvēlaties vienu dizainu visiem UI elementiem ar dažām nelielām atšķirībām.
Neiesprūstiet šajā bīstamajā situācijā.
Konstrukcijā pogām vajadzētu izskatīties tikai kā pogām! Nevienam citam dizainam nedrīkst būt tāda pati forma, krāsa un vizuālais svars kā pogai. Viņiem jābūt atšķirīgiem. Padomājiet par pogu stila izveidi, kas ir lielāka nekā jebkurš cits līdzīgs dizaina elements, vai izmantojiet akcenta krāsu, kas paredzēta tikai pogām. Šīs metodes var palīdzēt pogai izskatīties īpaši un uzsvērt tās izmantošanu.
Secinājums
Vai jūs sākat pārdomāt dažas pogas dizaina izvēles? Vai jūs domājat, ka varat izveidot kaut ko tādu, kas labāk veicinās klikšķus?
Izmēģiniet dažus no šiem padomiem, vienlaikus uzmanot vietnes analīzi, lai precīzi redzētu, uz kādām dizaina izmaiņām jūsu lietotāju bāze reaģē. Izmantojiet šo informāciju, lai palīdzētu izveidot vēl vairāk klikšķināmu pogu nākamajiem projektiem.
