Mohlomong u kile ua ba teng. Re khetha joang lipakeng tsa ho bonts'a modal ho basebelisi, 'me re li isa neng leqepheng le lecha le arohaneng? Hona na hoa tsotelleha ho hang? Ha e le hantle, ho joalo. Qeto e susumetsa phallo ea basebelisi, maemo a bona, bokhoni ba bona ba ho sheba lintlha, 'me ka lebaka la liphoso le phetho ea mosebetsi. Likhetho tsena ka bobeli li ka ba tse sitisang le tse ferekanyang - ka nako e fosahetseng, le sebakeng se fosahetseng. Kahoo ho molemo hore re e lokise. Hantle, a re boneng mokhoa oa ho etsa joalo. Li-modal vs. Dialogs vs. Overlays vs. Lightboxes Le ha re bua hangata ka karolo e le 'ngoe ea UI, hangata re iphapanyetsa mefuta e metle, e rarahaneng lipakeng tsa mefuta eohle e fapaneng ea li-modal. Ha e le hantle, ha se mofuta o mong le o mong o tšoanang. Li-modal, dialogs, overlays, le lightboxes - kaofela li utloahala li tšoana, empa li fapane haholo:

DialogA poleloana e akaretsang bakeng sa “moqoqo” (mosebelisi ↔ sistimi). OverlayPaneli e nyane ea litaba e bonts'itsoeng kaholimo ho leqephe. ModalUser e tlameha ho sebelisana le overlay + e holofalitsoeng ka morao. NonmodalUser e tlameha ho sebelisana le overlay + e lumelletsoeng ka morao. LightboxDimmed Background ho tsepamisa maikutlo ho modal.

Joalo ka ha Anna Kaley a totobatsa, li-overlays tse ngata li hlaha ka nako e fosahetseng, li sitisa basebelisi nakong ea mesebetsi e boima, li sebelisa puo e mpe, 'me li senya phallo ea basebelisi. Li na le litšitiso ka tlhaho, 'me hangata li na le boemo bo phahameng ba ho tiea ntle le tlhoko e matla ea seo.

Ehlile basebelisi ba tlameha ho fokotsa lebelo le ho sitisoa haeba litlamorao tsa ketso ea bona li e-na le tšusumetso e kholo, empa maemong a mangata bao e seng li-modals ba bolotsana haholo ebile ke khetho e mosa ho tlisa ho hong ho mosebelisi. Haeba ho na le letho, ke lula ke fana ka maikutlo a hore e be ea kamehla. Mekhoa ea Boitšoaro → Bakeng sa Mesebetsi e le Mong, e Ikemetseng Joaloka baqapi, re atisa ho qhelela mekhoa e metle ka hore ha e na thuso le e tenang - 'me hangata ho joalo! — leha ho le joalo li na le bohlokoa ba tsona hape. Li ka thusa haholo ho lemosa basebelisi ka liphoso tse ka bang teng kapa ho ba thusa ho qoba tahlehelo ea data. Ba ka boela ba thusa ho etsa liketso tse amanang kapa ho theola lintlha ntle le ho kena-kenana le boemo ba hajoale ba leqephe. Empa molemo o moholo oa li-modals ke hore li thusa basebelisi ho boloka maemo a skrineng sa hajoale. Ha e bolele UI feela, empa hape e na le kenyelletso e hlophisitsoeng, boemo ba ho phenya, boemo ba li-accordion, khetho ea li-filters, ho hlopha, joalo-joalo.

Ka linako tse ling, basebelisi ba hloka ho netefatsa khetho kapele (mohlala, li-filters tse bontšitsoeng ka holimo) ebe ba tsoela pele hang-hang ho tloha moo. Ho boloka ka boits'oaro ho ka fihlela se tšoanang, ehlile, empa ha se kamehla se hlokahalang kapa se lakatsehang. Mme ho thibela UI hangata ha se mohopolo o motle. Leha ho le joalo, li-modal ha li sebelisetsoe mesebetsi leha e le efe. Ka tloaelo, re li sebelisetsa mesebetsi e le 'ngoe, ea boinotšing moo basebelisi ba lokelang ho itahlela teng, ba qete mosebetsi, ebe ba khutlela moo ba neng ba le teng. Ka mokhoa o sa tsitsang, ba sebetsa hantle bakeng sa lintho tse tlang pele, litšebelisano tse khutšoanyane (mohlala, litlhokomeliso, liketso tse senyang, ho tiisa ka potlako). Ha mekhoa e thusa: 🚫 Mekhoa e metle hangata e a sitisa, ea hlasela, ebile e ferekanya.🚫 E etsa hore ho be thata ho bapisa le ho kopitsa.✅ Leha ho le joalo mekhoa e lumella basebelisi ho boloka maemo a mangata.✅ E thusa ho thibela liphoso tse ke keng tsa etsolloa le tahlehelo ea data. ✅ Bontša mohlala ha feela basebelisi ba tla ananela tšitiso.✅ Ka kamehla, khetha lipuisano tse sa thibeleng ("nonmodals").✅ Lumella basebelisi ho fokotsa, ho pata, kapa ho khutlisetsa puisano hamorao.✅ Sebelisa modal ho khoehlisa basebedisi, mohlala, netefatsa boitsebiso bo rarahaneng.✅ Fana ka tsela ea ho tsoa ka "Close, kapa lebokose la ESC", kapa tobetsa ESC Maqephe → Bakeng sa Tsamaiso e rarahaneng, e Mehato e Mengata Li-wizard kapa navigation e entsoeng ka har'a li-modals ha e sebetse hantle haholo, esita le lihlahisoa tse rarahaneng tsa likhoebo - moo, liphanele tse mahlakoreng kapa li-drawer li sebetsa betere. Mathata a qala ha basebelisi ba hloka ho bapisa kapa ho supa lintlha tsa lintlha - empa mekhoa e thibela boits'oaro bona, kahoo ba bula leqephe le ts'oanang ka li-tab tse ngata.

Bakeng sa phallo e rarahaneng le lits'ebetso tsa mehato e mengata, maqephe a ikemetseng a sebetsa hantle haholo. Maqephe a boetse a sebetsa betere ha a batla tlhokomelo e felletseng ea mosebelisi, 'me ho bua ka skrine se fetileng ha ho na thuso haholo. 'Me li-drawer li sebetsa bakeng sa mesebetsi e nyane e thata haholo bakeng sa modal e bonolo, empa e sa hlokeng ho fumana leqephe le felletseng. Nako ea ho qoba mekhoa: 🚫 Qoba mekhoa ea melaetsa ea liphoso.🚫 Qoba mekhoa e meng bakeng sa litsebiso tsa likarolo.🚫 Qoba mekhoa ea mekhoa ea ho bapala.🚫 Qoba mekhoa ea mekhoa e rarahaneng, e telele ea mehato e mengata. Qoba BobeliBakeng sa Mesebetsi e Phethahalang Lihlahisoa tse ngata tse rarahaneng, tse boima ba mosebetsi, basebelisi ba tla iphumana ba etsa mesebetsi e tšoanang khafetsa, khafetsa. Ha u le moo, mekhoa le litsela tse ncha tsa maqephe li eketsa khohlano hobane li sitisa ho phalla kapa ho qobella basebelisi ho bokella lintlha tse sieo pakeng tsa li-tab kapa maikutlo a fapaneng. Hangata, basebelisi ba qetella ba e-na le phihlelo e robehileng, e tletseng litiisetso tse sa feleng, litemoso tse fetelelitsoeng, litaelo tsa verbose, kapa lintlha tse fokolang feela. Joalo ka ha Saulius Stebulis a boletse, maemong ana, likarolo tse atolositsoeng kapa ho hlophisoa ha sebaka hangata li sebetsa hantle - li boloka mosebetsi o le teng skrineng sa hajoale. Ka ts'ebetso, maemong a mangata, basebelisi ha ba phethe mesebetsi ea bona ba le bang. Ba hloka ho sheba data, ho kopitsa-ho beha boleng, ho ntlafatsa lipeeletso libakeng tse fapaneng, kapa ho lekola lirekoto tse tšoanang ha ba ntse ba sebetsa mesebetsing ea bona. Li-overlay le li-drawer li thusa haholo ho boloka phihlello ea data ea morao-rao nakong ea mosebetsi. Ka lebaka leo, moelelo oa taba o lula o le sebakeng sa ona, o fumaneha bakeng sa litšupiso kapa ho kopitsa. Boloka mekhoa le ts'ebetso ea maqephe bakeng sa linako tseo tšitiso e eketsang boleng - haholo ho thibela liphoso tse kholo. Modal vs. Maqephe: Sefate sa Qeto Nakoana morao, Ryan Neufeld o ile a kopanya tataiso e thusang haholo ho thusa baqapi ho khetha pakeng tsa mekhoa le maqephe. E tla le PNG cheatsheet e bonolo le template ea Google Doc e nang le lipotso tse arotsoeng likarolong tse 7. E telele, e nepahetse haholo, empa e bonolo haholo ho e latela:

E kanna ea shebahala e tšosa, empa ke mohato o bonolo oa mehato e 4:

Boemo ba skrine.Pele, re hlahloba hore na basebelisi ba hloka ho boloka maemo a skrineng se ka tlase. Ho rarahana ha mosebetsi le nako.Mesebetsi e bonolo, e tsepamisitsoeng, e sa sitisoeng e ka sebelisa modal, empa phallo e telele, e rarahaneng e hloka leqephe. Ho ipapisitsoe le leqephe le ka tlase Ho khetha sekoahelo se nepahetseng.Qetellong, haeba sekoahelo e hlile e le khetho e ntle, se re tataisa ho khetha pakeng tsa modal kapa nonmodal (ho sekamela ho e seng modal).

Ho phethela Nako le nako ha ho khonahala, qoba ho thibela UI kaofela. E-ba le puisano e phaphametseng, e koahelang UI hanyenyane, empa e lumella ho tsamaea, ho tsamaisa, le ho kopiletsa. Kapa bonts'a litaba tsa modal joalo ka lae ea mahlakoreng. Kapa sebelisa accordion e otlolohileng. Kapa tlisa basebelisi leqepheng le arohaneng haeba u hloka ho bonts'a lintlha tse ngata. Empa haeba u batla ho matlafatsa ts'ebetso le lebelo la basebelisi, qoba mekhoa eohle. Li sebelise ho liehisa basebelisi, ho bokella tlhokomelo ea bona, ho thibela liphoso. Joalokaha Therese Fessenden a hlokometse, ha ho motho ea ratang ho sitisoa, empa haeba u tlameha, etsa bonnete ba hore ho na le litšenyehelo tse ngata. Kopana le "Smart Interface Design Patterns" U ka fumana karolo e mabapi le mekhoa le mekhoa e meng ho Smart Interface Design Patterns, thupelo ea rona ea 15h-video e nang le mehlala e sebetsang ea 100s ho tsoa mererong ea sebele ea bophelo - ka koetliso ea UX e tlang hamorao selemong sena. Ntho e ngoe le e ngoe ho tloha ho li-dropdown tsa mega ho isa litafoleng tse rarahaneng tsa likhoebo - ho eketsoa likarolo tse 5 tse ncha selemo se seng le se seng. Tlolela ponong ea mahala. Sebelisa khoutu ea BIRDIE ho boloka phokotso ea 15%. Kopana le Meetso ea Smart Interface Design, thupelo ea rona ea video mabapi le moralo oa sebopeho le UX.

Video + Koetliso ea UXVideo feelaVideo + Koetliso ea UX$ 495.00 $ 699.00

Fumana lithuto tsa video + tsa UX Training25 (15h) + Koetliso ea UX e Phelang.Matsatsi a 100 a tiisetso ea ho khutlisa chelete.Video feela$ 300.00$ 395.00

Fumana lithuto tsa video tsa course40 (15h). E ntlafatsoa selemo le selemo. E fumaneha hape e le UX Bundle e nang le lithuto tse 2 tsa video.

Lisebelisoa tse Molemo

Mefuta e fapaneng ea Popups, ka Anna Kaley Mekhoa e Molemohali ea ho Rala Mekhoa ea UI, ka Uxcel Re Sebelisa Mekhoa e Mengata Haholo ea Damn: Litaelo tsa UX, ka Adrian Egger Modal & Nonmodal Dialogs, ka Therese Fessenden Moralo oa Modern Enterprise UI: Modal Dialogs, ka James Jacobs Mekhoa ea Mekhoa ea Meetso ea Meetso

You May Also Like

Enjoyed This Article?

Get weekly tips on growing your audience and monetizing your content — straight to your inbox.

No spam. Join 138,000+ creators. Unsubscribe anytime.

Create Your Free Bio Page

Join 138,000+ creators on Seemless.

Get Started Free