Ikekwe ị nọbu ebe ahụ. Kedu otu anyị ga-esi họrọ n'etiti igosi ndị ọrụ modal, na olee mgbe anyị ga-agagharị na ibe dị iche, ibe ọhụrụ? Ọ̀ dịkwa mkpa ma ọlị? N'ezie, ọ na-eme ya. Mkpebi ahụ na-emetụta nrịba nke ndị ọrụ, ihe gbara ha gburugburu, ikike ha ịchọpụta nkọwa, yana site na njehie ugboro na mmecha ọrụ. Nhọrọ abụọ a nwere ike ịkpaghasị ma na-akụda mmụọ - n'oge na-adịghị mma, na ebe na-adịghị mma. Ya mere, ọ ka mma ka anyị nweta ya nke ọma. Ọfọn, ka anyị hụ otu esi eme nke ahụ. Modals vs. Dialogs vs. Overlays vs. Lightboxes Ọ bụ ezie na anyị na-ekwukarị maka otu modal UI akụrụngwa, anyị na-elegharakarị ọmarịcha nuances dị mgbagwoju anya n'etiti ụdị ụdịdị dị iche iche. N'ezie, ọ bụghị ụdị ọ bụla bụ otu. Modals, dialog, overlays, na lightbox - ha niile na-ada ụda, mana ha dị nnọọ iche:
DialogA okwu ọnụ maka “mkparịta ụka” (onye ọrụ ↔ sistemu). OverlayA obere ogwe ọdịnaya egosiri n'elu ibe. ModalUser ga-emekọrịta ihe na nkpuchi + ndabere nwere nkwarụ. Onye ọrụ Nonmodal ga-emekọrịta ihe na nkpuchi + ndabere agbanyere. LightboxDimmed ndabere iji lekwasị anya na modal.
Dị ka Anna Kaley na-akọwapụta, ọtụtụ ihe mkpuchi na-apụta n'oge na-ekwesịghị ekwesị, na-egbochi ndị ọrụ n'oge ọrụ dị oke mkpa, na-eji asụsụ na-adịghị mma, na-agbajikwa ọsọ nke ndị ọrụ. Ha na-akwụsịtụ site na okike, yana na-enwekarị oke ike na-enweghị mkpa siri ike maka nke ahụ.
N'ezie, ndị ọrụ ga-akwụsịlata ma kwụsịtụ ma ọ bụrụ na nsonaazụ nke omume ha nwere mmetụta dị elu, mana maka ọtụtụ ọnọdụ ndị na-abụghị ụdịdị bụ ihe dị nro karị na nhọrọ enyi na enyi iji weta ihe n'uche onye ọrụ. Ọ bụrụ na ihe ọ bụla, m na-atụ aro ka ọ bụrụ ndabara. Modals → Maka otu, ọrụ ejiri onwe ya Dị ka ndị na-emepụta ihe, anyị na-ewepụkarị ụdịdị dị ka ihe na-adịghị mkpa na iwe - na mgbe mgbe ha na-! — ma ha nwekwara uru ha bara. Ha nwere ike na-enye aka na-adọ aka ná ntị ọrụ banyere nwere mmejọ ma ọ bụ nyere ha aka izere data ọnwụ. Ha nwekwara ike inye aka mee omume ndị metụtara ya ma ọ bụ gbadata n'ime nkọwa na-akwụsịghị ọnọdụ ibe dị ugbu a. Ma nnukwu uru nke modal bụ na ha na-enyere ndị ọrụ aka idebe ihe ngosi nke ihuenyo dị ugbu a. Ọ pụtaghị naanị UI, kamakwa ntinye edeziri, ọnọdụ mpịakọta, ọnọdụ nke nkwekọrịta, nhọrọ nke nzacha, nhazi, na ihe ndị ọzọ.
Mgbe ụfọdụ, ndị ọrụ kwesịrị ịkwado nhọrọ ngwa ngwa (dịka ọmụmaatụ, nzacha dị ka egosiri n'elu) wee gaa n'ihu ozugbo ebe ahụ. Nchekwa akpaaka nwere ike nweta otu ihe ahụ, n'ezie, mana ọ bụghị mgbe niile ka achọrọ ma ọ bụ chọọ ya. Na igbochi UI anaghị abụ ezigbo echiche. Agbanyeghị, a naghị eji modals eme ihe ọ bụla. Dị ka ọ na-adịkarị, anyị na-eji ha eme otu, ọrụ nwere onwe ya ebe ndị ọrụ kwesịrị ịwụba, rụchaa ọrụ wee laghachi ebe ha nọ. Na-atụghị anya ya, ha na-arụ ọrụ nke ọma maka mkpa dị elu, mmekọrịta dị mkpirikpi (dịka ọmụmaatụ, ihe ngosi, omume mbibi, nkwenye ngwa ngwa). Mgbe modal na-enyere aka: 🚫 Modals na-enwekarị ọgba aghara, na-akpaghasị anya, na mgbagwoju anya. ✅ Gosi modal naanị ma ọ bụrụ na ndị ọrụ ga-eji mgbagha ahụ kpọrọ ihe.✅ Na ndabara, họrọ dialog na-adịghị egbochi ("nonmodals"). Ibe → Maka Mgbagwoju anya, Multi-Step Workflows Wizards ma ọ bụ taabụ igodo n'ime modal anaghị arụ ọrụ nke ọma, ọbụlagodi na ngwaahịa ụlọ ọrụ siri ike - ebe ahụ, akụkụ akụkụ ma ọ bụ drawer na-arụ ọrụ nke ọma. Nsogbu na-amalite mgbe ndị ọrụ kwesịrị ịtụle ma ọ bụ tụnye aka na isi data - mana ụdịdị na-egbochi omume a, yabụ ha na-emepe otu ibe ahụ na ọtụtụ taabụ kama.
Maka usoro mgbagwoju anya na usoro ọtụtụ nzọụkwụ, ibe ndị kwụ ọtọ na-arụ ọrụ kacha mma. Ibe akwụkwọ na-arụkwa ọrụ nke ọma mgbe ha na-achọ nlebara anya nke onye ọrụ, na ntụaka na ihuenyo gara aga adịghị enye aka. Na drawer na-arụ ọrụ maka obere ọrụ ndị dị mgbagwoju anya maka modal dị mfe, mana ọ dịghị mkpa igodo ihu akwụkwọ zuru ezu. Mgbe ị ga-ezere ụdịdị: 🚫 Zenarị Modal maka ozi njehie. Zere Ha abụọMaka Ọrụ Ugboro ugboro N'ọtụtụ mgbagwoju anya, ngwaahịa dị arọ nke ọrụ, ndị ọrụ ga-ahụ onwe ha na-arụ otu ọrụ ahụ ugboro ugboro, ugboro ugboro. N'ebe ahụ, ma modals na ihu akwụkwọ ọhụrụ na-agbakwụnye esemokwu n'ihi na ha na-akwụsị ịgbasa ma ọ bụ na-amanye ndị ọrụ ka ha chịkọta data efu n'etiti taabụ ma ọ bụ echiche dị iche iche. Ọtụtụ mgbe, ndị ọrụ na-ejedebe na ahụmahụ gbajiri agbaji, juputara na nkwenye na-adịghị agwụ agwụ, ịdọ aka ná ntị ekwubigara okwu ókè, ntụziaka okwu ọnụ, ma ọ bụ naanị ihe ntụaka na-efu. Dị ka Saulius Stebulis kwuru, n'ọnọdụ ndị a, ngalaba na-agbasawanye ma ọ bụ na-edezi ebe na-arụ ọrụ nke ọma - ha na-edobe ọrụ ahụ na ihuenyo ugbu a. Na omume, n'ọtụtụ ọnọdụ, ndị ọrụ anaghị emecha ọrụ ha na iche. Ha kwesịrị inyocha data, detuo-mado ụkpụrụ, mezie ndenye n'ebe dị iche iche, ma ọ bụ naanị nyochaa ndekọ ndekọ ka ha na-arụ ọrụ ha. Mkpuchi na drawer na-enye aka karịa n'ịkwado ohere ịnweta data ndabere n'oge ọrụ ahụ. N'ihi ya, ihe ndị gbara ya gburugburu na-anọkarị n'ọnọdụ ya, dị maka ntụnye aka ma ọ bụ detuo-paste. Chekwaa modal na igodo ihu peeji maka oge nkwụsịtụ na-agbakwunye uru n'ezie - ọkachasị iji gbochie mmejọ dị egwu. Modals vs. Ibe: Osisi Mkpebi N'oge gara aga, Ryan Neufeld chịkọtara ntuziaka na-enye aka nke ukwuu iji nyere ndị na-emepụta aka ịhọrọ n'etiti modal na ibe. Ọ na-abịa na cheatsheet PNG aka yana ndebiri Google Doc nwere ajụjụ gbajiri n'ofe ngalaba asaa. Ọ dị ogologo, zuru oke, mana ọ dị mfe ịgbaso:
Ọ nwere ike iyi ihe na-akụda mmụọ, mana ọ bụ usoro dị mfe nke 4:
Ihe dị na ihuenyo ahụ. Nke mbụ, anyị na-elele ma ọ bụrụ na ndị ọrụ kwesịrị idowe ọnọdụ nke ihuenyo dị n'okpuru. Ịdị mgbagwoju anya na ogologo oge ọrụ. Ọrụ dị mfe, lekwasịrị anya na nke na-adịghị adọrọ mmasị nwere ike iji modal, mana ogologo, mgbagwoju anya na-achọ ibe. Ntụaka na ibe dị n'okpuru. Mgbe ahụ, anyị na-elele ma ndị ọrụ na-achọkarị ịtu aka na data na ndabere ma ọ bụ ọ bụrụ na ọrụ ahụ bụ nkwenye dị mfe ma ọ bụ nhọrọ. Ịhọrọ ihe mkpuchi kwesịrị ekwesị. N'ikpeazụ, ọ bụrụ na ihe mkpuchi bụ n'ezie nhọrọ dị mma, ọ na-eduzi anyị ịhọrọ n'etiti modal ma ọ bụ nonmodal (na-adabere na onye na-abụghị modal).
Na-achịkọta Mgbe ọ bụla enwere ike, zere igbochi UI niile. Nwee mkparịta ụka na-ese n'elu mmiri, na-ekpuchi akụkụ ụfọdụ UI, mana na-enye ohere ịnyagharị, pịgharịa, na ntughari. Ma ọ bụ gosi ọdịnaya nke modal dị ka drawer n'akụkụ. Ma ọ bụ jiri accordion kwụ ọtọ kama. Ma ọ bụ weta ndị ọrụ na ibe dị iche ma ọ bụrụ na ịchọrọ igosi ọtụtụ nkọwa. Mana ọ bụrụ na ịchọrọ ịkwalite arụmọrụ na ọsọ nke ndị ọrụ, zere ụdịdị ọ bụla. Jiri ha mee ka ndị ọrụ kwụsịlata, chịkọta uche ha, iji gbochie mmejọ. Dị ka Therese Fessenden si kwuo, ọ dịghị onye na-enwe mmasị ka a kwụsị ya, ma ọ bụrụ na ị ghaghị, jide n'aka na ọ bara ezigbo uru. Zute “Ụdị Nhazi Ọsọ Interface” Ị nwere ike ịchọta akụkụ dum gbasara ụdịdị na usoro ndị ọzọ na Smart Interface Design Patterns, usoro vidiyo 15h anyị nwere 100s nke ihe atụ bara uru sitere na ọrụ ndụ n'ezie - yana ọzụzụ UX dị ndụ mgbe afọ a gasịrị. Ihe niile sitere na mega-dropdowns ruo na tebụl ụlọ ọrụ dị mgbagwoju anya - yana akụkụ 5 ọhụrụ agbakwunyere kwa afọ. Gaa na nlele efu. Jiri koodu BIRDIE chekwaa 15% kwụsịrị. Zute Smart Interface Design Patterns, usoro vidiyo anyị na imewe interface & UX.
Vidiyo + Ọzụzụ UX Vidiyo naanị Vidiyo + Ọzụzụ UX$ 495.00 $ 699.00
Nweta nkuzi vidiyo + UX Ọzụzụ25 (awa 15) + Ọzụzụ UX dị ndụ. 100 ụbọchị ego-azụta nkwa. Vidiyo naanị $ 300.00$ 395.00
Nweta nkuzi vidiyo 40 nkuzi vidiyo (awa 15). A na-emelite kwa afọ. Ọ dịkwa ka ngwugwu UX nwere nkuzi vidiyo 2.
Akụrụngwa bara uru
Ụdị Popup dị iche iche, nke Anna Kaley dere Omume kacha mma maka imepụta ụdị UI, nke Uxcel dere Anyị na-eji ọtụtụ ụdị mmebi iwu: Ntuziaka UX, nke Adrian Egger dere Modal & Nonmodal Dialogs, nke Therese Fessenden dere Ime ụlọ ọrụ ọgbara ọhụrụ UI: Modal Dialogs, nke James Jacobs Modals na Sistemụ Nhazi
