Kio estas UI-ŝablono?

Rigardante novan aspekton en UI-projektado

Pli same

Se vi neniam aŭdis pri UI-ŝablono, jen rapida klarigo: same kiel ĉe plej multaj aferoj, precipe dum programaro, multaj aroj da elementoj ofte povas esti grupigitaj, ĉar ili formas rekoneblan ŝablonon. Ekzemplo por programaro estus la difino de arkitekturaj ŝablonoj aŭ ŝablonoj rilataj al specifa programlingvo.

Tamen ekzistas ankaŭ oftaj ŝablonoj dum projektado de UI. Nur rigardante iujn programojn de la aparato, pri kiu vi legas ĉi tiun artikolon, iuj aferoj fine ripetiĝas:

  • modaj vidpunktoj kun ago konservi, nuligi kaj / aŭ forigi
  • sekcioj de elementoj enhavantaj tekston, ekzemple listojn kun svinga ago por ĉiu listero

Do pripensante unu paŝon plu, ĉu estas rimedoj, kiujn vi povas enmeti dum projektado de UI mem? Eble kolekto de ŝablonoj, kiujn aliaj projektistoj jam rekonis kaj formaligis? Nu, mi ne farus ĉi tiun demandon, se mi ne havus la respondon jam! Tempo por la dua ĉapitro!

Ĉapitro dua (la anoncita)

Serĉante formalan difinon, la teamo de Karbono-Dezajno de IBM havas bonegan: Ŝablonoj estas plej bonaj praktikaj solvoj pri kiel uzanto atingas celon. Ili montras reuzeblajn kombinaĵojn de eroj kaj ŝablonoj, kiuj traktas komunajn uzantajn celojn per sekvencoj kaj fluoj.

Ni rigardu iujn ekzemplojn. La jenaj enskriboj estas prenitaj de la retejo Carbon Design de IBM kaj ankaŭ de la paĝo pri ŝablona Material UI de Google. Mi ne povis trovi retejon por Flua Dezajno de Mikrosofto, sed tamen ligis ilian komencan paĝon en la aldono.

Serĉu

Serĉi enhavon estas unu el la esencaj bazaj elementoj por plej multaj programoj, tial ĝi estas perfekta elekto por difini UI-ŝablonon por ĝi. Sendepende de ĝia fina uzado (ĉu tutmonda serĉo aŭ specifa serĉo en enhava paĝo), serĉo UI devas proponi

  • tekstenigo
  • teksta lokokupilo se ankoraŭ ne haveblas enigo
  • ikono klare indikante la celon de la eniga teksto, ekzemple uzante lupeon, kaj ankaŭ agante kiel ellasilo por nova serĉo

En iuj kazoj, aluda etikedo povas helpi distingi inter malsamaj enhavtipoj aŭ doni helpon pri nevalida enigo. Ju pli serĉo devas pritrakti, des pli bona serĉo povas adaptiĝi al ĉi tiu postulo per aldono de eksplicitaj filtraj menuoj.

Dialogo

Unu el la tre elstaraj UI-ŝablonoj. Dialogoj permesas al programo montri informon sen perdi la ĝeneralan kuntekston de retejo. Ĉi tio plenumiĝas ne kovrante la tutan fenestron sed nur malpli grandan parton. Dialogoj interrompas la nunan laborfluon de la uzanto kaj tial devas esti konsiderataj nur necesaj kiam halto en la laborfluo efektive validas. Ili devas nur plenumi malgrandajn taskojn kaj klare fokusiĝi pri tio, kion plenumi. Ekzemple revertu nekonservitajn ŝanĝojn aŭ faru gravan agon.

Malplenaj statoj

Kvankam ĝi povus soni strange unue, malplenaj statoj estas tre oftaj en programoj. Gravas komuniki al la uzanto, ke neniuj datumoj disponeblas, kaj ideale klarigu kial ĉi tio estas la kazo. Depende de kunteksto, aludo pri kiel solvi la malplenan staton povas multe helpi krei bonan X. Ekzemple, uzanto serĉis ion sed ne trovis ion. Ĉi tio povus esti uzokazo, kiam sugesti alian serĉpeton povus helpi la uzanton plenumi la taskon. Ĉiukaze ĉiu vidpunkto, kiu reprezentas malplenan staton, devas esti kunteksta. Negativa ekzemplo estus io kiel "Ĉi tio ne funkciis. Provu denove poste ”.

Ne traktu malplenajn ŝtatojn kiel postpenson en via UI-projektado. Se ĝuste efektivigitaj, ili permesas al uzantoj daŭrigi la laborfluon glate. Malplenaj ŝtatoj, kiuj ĉesigas la tutan laborfluon, estas fakte plej malbona kazo, krom programaj kraŝoj.

Nur komenco

Ĉi tio estis rapida ekrigardo al iuj UI-ŝablonoj, kiujn mi elektis de la Karbona Dezajno de IBM kaj ankaŭ la paĝo de ŝablonoj de Material UI. Ankaŭ apliki UI-ŝablonojn al via programo povas multe helpi redukti frotadon inter la laborfluo de uzanto kaj la uzantinterfaco por plenumi la taskon. Projekti UI povas esti sufiĉe malfacila, do stari sur la ŝultroj de gigantoj lernante de ekzistantaj UX-studoj multe helpas plibonigi la percepton de viaj uzantoj pri la konduto de via programo.