UI/UX Izvēlņu ikonu izmantošana navigācijā

Kuru izvēlnes ikonu izmantot navigācijai?
Šajā rakstā jūs izpētīsiet dažāda veida izvēlnes ikonas un to lietojumu. Navigācijas ikonas var atrast visā internetā un dažādās vietnēs. Tā kā interneta pārlūkošanai izmanto viedtālruņus un planšetdatorus, šīs ikonas bieži tiek izmantotas vietņu un lietotņu mobilajās versijās.

Izņemot izvēlnes ikonas, nevienai no šīm ikonām nav oficiāla nosaukuma, jo dažādi ikonu veidotāji, piemēram, Font Awesome un Material Design, izmanto dažādus nosaukumus visām savām ikonām, kas apgrūtina šo ikonu nosaukumu identificēšanu.

Tātad, kas ir ikonas un kam tās tiek izmantotas?

Ikonas ir nelielas grafikas uz ekrāna, kas attēlo datorprogrammu, failu vai funkciju. Šīs īpašās ikonas apzīmē arī izvēlnes jūsu vietnē.

Izpētīsim visbiežāk lietotās ikonas, kuras dizaineri izmanto tīmekļa vietnēs.

Navigācijas ikonas

Navigācijas ikonas palīdz lietotājiem atrast informāciju, noklikšķinot uz pogas. Tie ir galvenais līdzeklis satura atrašanai lietotnē vai vietnē. Apskatīsim šīs ikonas sīkāk.

Hamburger menu izvēlne

Hamburger menu nosaukums ir vienkāršs. Tas atspoguļo faktu, ka tas atgādina divas maizītes un pīrādziņu. Hamburgera ikona, kas atrodas vietņu un lietotņu augšējā vai apakšējā stūrī, informē lietotājus, ka ārpus šīm trim rindām ir vēl ko atklāt.

Example of a hamburger menu on a mobile device

Varat to izmantot, lai parādītu lietojumprogrammas vai vietnes izvēlnes apgabalu, īpaši, ja ir vairākas sadaļas. Vislabāk ir izvairīties no šīs ikonas, kad vien iespējams, jūsu vietnes darbvirsmas skatā.

Kebab menu izvēlne

Ikonai “Kebabs” ir trīs vertikāli punkti, un tās izcelsme ir Google’s Material Design. Tā ir izvēlnes ikona, kas atver izvēlni ar vairākām opcijām. Ikona parasti atrodas ekrāna vai loga augšējā labajā vai kreisajā stūrī.

Kebab menu icon in UI

Meatballs menu izvēlne, jeb kotletes

Meatballs Menu icon in UI

Kotletes izvēlnes ikona ir horizontāla trīs punktu izvēlne, kas atver izvēlni ar vairāk opcijām. Parasti ikona atrodas ekrāna vai loga augšējā labajā stūrī. Tos izmanto, lai parādītu darbības ar noteiktu vienumu vai atvērtu izvēlni. Tos ir vieglāk atkārtot un izmantot tīmeklī tādiem elementiem kā tabulas un citi horizontāli orientēti elementi, jo tie ir horizontāli.

Bento izvēlne
Bento izvēlne, kas nosaukta vadoties pēc bento kastēm, ir balstīta uz režģi.

Bento menu icon in UI

To bieži izmanto, lai vienā un tajā pašā produktā atvērtu izvēlni ar dažādām lietojumprogrammām, risinājumiem vai funkcijām, kas ļauj ātri pārslēgties starp tām.

Döner menu izvēlne

Example for doner menu styles

Mūsdienās visplašāk izmantotais filtra simbols ir šis populārais turku ēdiens döner. Vēlams to izmantot kopā ar opcijām “kārtot pēc”, taču tas ir atrodams lielākajā daļā mūsdienu lietojumprogrammu, ja to apvieno ar globālajiem filtriem. Kamēr hamburgeru izvēlnē ir trīs vienāda garuma rindas, kas sakrautas viena virs otras, döner izvēlni veido trīs dažāda lieluma līniju vertikāla kaudzīte. Šis lietotāja interfeisa elements sastāv no filtru kolekcijas.

Citi izvēlņu ikonu veidi

Pastāv arī cita veida izvēlnes ikonas. Tie ietver šokolādi, čīzburgeru, dārzeņu burgeru un tā tālāk, un tie ir kaut kas īpašs. Tātad, ja izmantojat kādu no šīm ikonām, ir ļoti svarīgi, lai lietotājiem būtu skaidrs konteksts un nozīme.

Different menu types with their names

Noslēgumā… Mazāk cilvēku var apmaldīties un viņiem būs nepieciešama palīdzība, lai pārvietotos noteiktā vietnē, paskaidrojot, ko nozīmē šīs ikonas, un parādot piemērus, kur tās atrast. Šīs mazās ikoniņas ir vietnes vai lietojumprogrammas standarta funkcionalitātes atslēgas. Atkarībā no apmeklētās vietnes, spēlēm, ko spēlējat vai lietojumprogrammas, ko izmantojat savā tālrunī vai citā mobilajā ierīcē, šīs mazās ikonas var būt atslēga, lai atrastu spēles, kuras meklējat vai tīmekļa lietojumprogrammu.

 

Pielikumā adreses uz populārāko UI/UX ikonu resursiem:

Loading

Noderīgs raksts? Dalies ar citiem:
Dalīties: