Kas padara lielisku meklēšanas interfeisu?
Meklēšanas lodziņš ir viens no būtiskajiem elementiem, kas ir iekļauts gandrīz katrā vietnes dizainā. Lai gan dažreiz izveidi šīs mazās elements pārvēršas pārdomas, nav iemesla, kāpēc meklēšanas lodziņā mērķis nedrīkst būt tik skaisti kā pārējā mājas lapā.
Meklēšanas lodziņa noformējumam ir jāatspoguļo pārējās vietnes dizains, tam jābūt funkcionālam un viegli lietojamam, un tas jānovieto lietotājiem saprotamā vietā. Šodien mēs apskatīsim lieliskus meklēšanas lodziņus un dažus rīkus, kas palīdzēs jums izveidot savu dizainu.
Vai jūsu vietnei ir nepieciešams meklēšanas lodziņš?
Vienkārša atbilde ir jā. Ja jūsu vietne ietver ievērojamu informācijas daudzumu - domāju, ka vairāk nekā teaser vai uzplaiksnījuma lapa - meklēšanas lodziņš ir obligāta.
Izmantojot meklēšanas lodziņu, lietotājiem ir vieglāk atrast saturu. Tas var arī palīdzēt jums apkopot informāciju par to, ko lietotāji vēlas atrast un kuri ierodas jūsu vietnē, piemēram, informāciju par produktu, atslēgvārdu lietojumu un lietotāju vēlmēm un vajadzībām.
No otras puses, vietnes, kas darbojas kā ziņu lapa vai slampāt lapa, varētu būt labi, ja nav iekļauta meklēšanas funkcija. Parasti jūs varētu domāt, ka vienas lapas vietnes ietilpst šajā kategorijā, taču tas tiešām ir atkarīgs no lieluma, apjoma un dizaina. Vietnes ar vienas lapas vietnēm, kurās ir daudz satura, izmantojot tādus elementus kā paralaksa ritināšana, varētu gūt labumu no meklēšanas funkcionalitātes iekļaušanas.
Meklēšanas funkcionalitāte
Viens no lielākajiem jautājumiem, kas saistīts ar meklēšanu, ir “ko tam vajadzētu darīt?” Lai gan tas var šķist acīmredzams jautājums un atbilde, meklēšanas iespējas dažādās vietnēs var atšķirties. Pamatojoties uz vietnes saturu, lietotājiem var būt dažādas cerības par to, kā darbosies arī meklēšana.
Vienkāršā meklēšana: Visizplatītākais veids mājas meklēšana ir paredzēta ap kasti, kas ietver vietu rakstīt, ko jūs meklējat un "meklēt" vai "iesniegt" pogu. (Mēs izmantojam šo meklēšanu šeit uz dizaina būda vietnes veidu). Bieži vien logs ietver to, kas ir meklējams uz vietas, piemēram, atslēgvārdus vai vienības numurus.
Intelligent meklēšana: Google ir līderis, kad runa ir par inteliģentu meklēšanu, kas palīdz aizpildīt, ko jūs meklējat, balstoties uz tautas meklēšanas terminu un attiecas uz vietni.
Filtrēts meklēšana: Sites izmantojot filtrētu meklēšanu, dod lietotāja iespējas, ko un kur meklēt kaut ietvaros vietā. Amazon ir filtrētas meklēšanas izmantošanas lielisks piemērs. Augšējā joslā varat meklēt vienumu visā vietnē vai sašaurināt to līdz noteiktai produktu kategorijai. (Amazon arī izmanto inteliģentu meklēšanu, parādot, ka jūs esat ne tikai viena veida meklēšanas funkcionalitāte.)
Meklēšanas lodziņa izvietojums
Ir labs iemesls, kāpēc gandrīz katrā apmeklētajā vietnē ekrāna augšdaļā ir meklēšanas lodziņš. Tieši tur lietotāji to sagaida.
Vietnes meklēšanas šodien veiktā analīze parādīja, ka no 50 labākajiem Amerikas Savienoto Valstu mazumtirgotājiem visiem bija meklēšanas lodziņš, kas atradās lapas augšpusē. No šiem 54 procentiem meklēšanas lodziņa atradās augšējā labajā stūrī, 30 procentiem - augšējā centrā un 16 procentiem - lapas augšējā kreisajā stūrī. Rezultāti bija līdzīgi Apvienotās Karalistes mazumtirgotāju pētījumā ar vienu galveno brīdinājumu - meklēšana biežāk atrodas vietnes augšējā centrā, kam seko augšējā labajā stūrī.
Izvietojums, no kura jums vajadzētu izvairīties, atrodas jebkur zem ritināšanas rāmja vai vietnes apakšā. (Tas ir, ja vien jūs abās vietās neiekļaujat meklēšanas lodziņu.) Dizaineriem vajadzētu arī izvairīties no meklēšanas lodziņa slēpšanas navigācijas izvēlnē vai rīkjoslas iekšpusē.
Meklēšanas identifikatori
Meklēšanas rīkiem jābūt viegli identificējamiem un lietojamiem. Ja lietotāji nevar atrast rīku, tas var izraisīt neapmierinātību vai likt lietotājam pamest jūsu vietni.
Parastie meklēšanas identifikatori ir lodziņš ar vārdu meklēšanu vai palielināmo stiklu blakus ievades lodziņam. Tieši tā. Plānojot meklēšanu, viena no šīm iespējām ir jūsu labākais solījums.
Un neaizmirstiet darbības pogu. Tāpat kā meklēšanas identifikatoriem, arī vienkāršai ir jābūt pogai faktiskās meklēšanas veikšanai. Izmantojiet tādus vārdus kā “meklēt” vai “atrast”. “Go” ir vēl viena pieņemama iespēja.
Meklēt dizaina padomus
Kad runa ir par meklēšanas lodziņa (vai daudzu citu parasto lietotāja interfeisa elementu) izveidi, galvenā nozīme ir vienkāršībai. Meklēšanas lodziņam ir vajadzīgas vairākas lietas: ievades lodziņš, nosaukums, darbības poga un instrukcijas.
Izstrādājot meklēšanas lodziņu, dizainam galvenā uzmanība jāpievērš lodziņam. Izklausās vienkārši, vai ne? Ņemiet vērā, ka lodziņam jābūt pietiekami lielam, lai ierakstītu (un redzētu) ar jūsu vietni saistītus parastos meklēšanas vienumus, un tajā jābūt pietiekami lielam tekstam, lai lasītu vienkāršā burtveidolrakstā. Esiet prom no ļoti maza tipa vai jaunuma vai skriptu burtveidoliem.
Skaidri norādiet, ka esat meklējis. Marķējiet savu meklēšanas funkcionalitāti kā tādu, izmantojot virsrakstu blakus vai virs lodziņa vai ar tekstu lodziņa iekšpusē, lietotājiem norādot “meklēt vietni šeit”.
Pārliecinieties, ka lietotāji zina, kā lietot meklēšanu. Meklēšanas lodziņā iekļaujiet vienkāršas instrukcijas, kurās ir pateikts, ko viņi var atrast, izmantojot rīku. (Bet pārliecinieties, ka parauga teksts nodziest, kad lietotājs noklikšķina, lai ierakstītu vai aktivizētu lodziņu.) Visbeidzot, meklēšanas iesniegšanai iekļaujiet skaidru aicinājuma uz darbību pogu.
Meklēšanas rīki un resursi
Google meklētājprogramma
Jūs varat pievienot Google meklēšanu savai vietnei, izmantojot vienkāršu rīku, kas bez pamata funkcijām var pielāgot, lai tas atbilstu jūsu vietnes dizainam. Google ir arī maksas meklēšanas rīks, kas ietver dažus papildu labumus, ieskaitot citas dizaina iespējas, par USD 100 gadā.
Meklēšanas ievade ar ieteikumu
Šis vienkāršais lodziņš nāk kā Adobe Photoshop fails, kuru jūs varat nedaudz pielāgot, lai ātri sāktu meklēšanas lodziņa noformējumu. Slāņainā vektora failā ir iekļauts automātiskās ieteikšanas līdzeklis, un tas ir tikai 2 ASV dolāri no radošā tirgus.
Meklēšanas joslas nolaižamā izvēlne
Šajā vienkāršajā meklēšanas joslas failā tiek izmantots vienkāršs meklēšanas formāts ar izvēlnes opciju nolaižamo izvēlni. Photoshop failu var bez maksas lejupielādēt ar atbilstošu kredītu.
Paplašināms meklēšanas lodziņš
Ja vēlaties uzzināt, kā kodēt meklēšanas lodziņu, apskatiet šo paplašināmo opciju, kas pieejama vietnē CodePen.
CSS3 veidlapu pakotne
Ja jūs neesat pilnīgi pārliecināts, kāda stila meklēšanas lodziņā jūs meklējat CSS3 veidlapas Pack ietver sešas meklēšanas formā stilus. Visa iepakojuma licence ir 4 USD par jauku labumu kolekciju.
Kā izveidot meklēšanas formu
Veidojot kodu, jūs varat arī daudz kontrolēt savu meklēšanas lodziņu. SpeckyBoy Design ir lieliska vienkārša koda piemērs tīram meklēšanas lodziņam, ko ir viegli sekot gandrīz ikvienam, kam ir pamata kodēšanas zināšanas.
Secinājums
Lai gan lielisks meklēšanas lodziņš var nebūt dizaina jautrākais posms, tas bieži ir būtiska jūsu vietnes sastāvdaļa. Veidojot meklēšanas lodziņu, vispirms padomājiet par lietotāju un pēc tam apsveriet kopējo dizainu.
Meklēšanas lodziņi jūsu vietnei var pievienot lielisku funkcionalitāti, vienlaikus izskatoties lieliski. Izvēlieties lodziņu, kas atbilst jūsu vietnes kopējai tēmai un tiek sajaukts, bet pilnībā to neslēpjot.
Ja vēlaties redzēt vēl vairāk lielisku meklēšanas lodziņu, apskatiet Design Shack galeriju.
Attēla avots: Džeimija Syke meklēšanas lodziņš.
