Boya o ti wa nibẹ tẹlẹ. Bawo ni a ṣe le yan laarin fifi modal han si awọn olumulo, ati nigbawo ni a ṣe lilö kiri wọn si lọtọ, oju-iwe tuntun? Ati pe o ṣe pataki rara? Lootọ, o ṣe. Ipinnu naa ni ipa lori ṣiṣan awọn olumulo, agbegbe wọn, agbara wọn lati wo awọn alaye, ati pẹlu igbohunsafẹfẹ aṣiṣe ati ipari iṣẹ-ṣiṣe. Awọn aṣayan mejeeji le jẹ idalọwọduro ati idiwọ - ni akoko ti ko tọ, ati ni aaye ti ko tọ. Nitorinaa a yoo dara ki a gba ni ẹtọ. O dara, jẹ ki a wo bi a ṣe le ṣe iyẹn. Modals vs Awọn ibaraẹnisọrọ vs. Overlays vs Lightboxes Lakoko ti a ma n sọrọ nigbagbogbo nipa paati UI modal kan ṣoṣo, a ma foju palara itanran, awọn nuances intricate laarin gbogbo awọn oriṣi awọn awoṣe. Ni otitọ, kii ṣe gbogbo modal jẹ kanna. Awọn awoṣe, awọn ibaraẹnisọrọ, awọn agbekọja, ati awọn apoti ina - gbogbo wọn dun iru, ṣugbọn wọn yatọ pupọ:
DialogA jeneriki oro fun “ibaraẹnisọrọ” (olumulo ↔ eto). OverlayA nronu akoonu kekere ti o han lori oke oju-iwe kan. ModalUser gbọdọ ṣe ajọṣepọ pẹlu agbekọja + alaabo abẹlẹ. NonmodalUser gbọdọ ṣe ibaṣepọ pẹlu agbekọja + isale ṣiṣẹ. LightboxDimmed abẹlẹ si idojukọ idojukọ lori modal.
Gẹgẹbi Anna Kaley ṣe afihan, ọpọlọpọ awọn agbekọja han ni akoko ti ko tọ, da awọn olumulo duro lakoko awọn iṣẹ ṣiṣe to ṣe pataki, lo ede ti ko dara, ati fọ ṣiṣan awọn olumulo. Wọn jẹ idalọwọduro nipasẹ iseda, ati ni igbagbogbo pẹlu ipele giga ti idibajẹ laisi iwulo to lagbara fun iyẹn.
Nitootọ awọn olumulo gbọdọ fa fifalẹ ati idilọwọ ti awọn abajade ti iṣe wọn ba ni ipa giga, ṣugbọn fun ọpọlọpọ awọn oju iṣẹlẹ ti kii ṣe awọn adaṣe jẹ arekereke pupọ ati aṣayan ọrẹ diẹ sii lati mu nkan wa si akiyesi olumulo. Ti o ba jẹ ohunkohun, Mo daba nigbagbogbo lati jẹ aiyipada. Modals → Fun Nikan, Awọn iṣẹ-ṣiṣe ti ara ẹni Gẹgẹbi awọn apẹẹrẹ, a ma yọ awọn awoṣe nigbagbogbo bi ko ṣe pataki ati didanubi - ati nigbagbogbo wọn jẹ! - sibẹ wọn tun ni iye wọn. Wọn le ṣe iranlọwọ pupọ lati kilọ fun awọn olumulo nipa awọn aṣiṣe ti o pọju tabi ṣe iranlọwọ fun wọn lati yago fun pipadanu data. Wọn tun le ṣe iranlọwọ lati ṣe awọn iṣe ti o jọmọ tabi lu sinu awọn alaye laisi idilọwọ ipo lọwọlọwọ ti oju-iwe naa. Ṣugbọn anfani ti o tobi julọ ti awọn awoṣe ni pe wọn ṣe iranlọwọ fun awọn olumulo lati tọju ipo ti iboju lọwọlọwọ. Ko tumọ si UI nikan, ṣugbọn tun satunkọ titẹ sii, ipo lilọ kiri, ipo awọn accordions, yiyan awọn asẹ, yiyan, ati bẹbẹ lọ.
Ni awọn akoko, awọn olumulo nilo lati jẹrisi yiyan ni iyara (fun apẹẹrẹ, awọn asẹ bi o ti han loke) ati lẹhinna tẹsiwaju lẹsẹkẹsẹ lati ibẹ. Ifipamọ aifọwọyi le ṣaṣeyọri kanna, nitorinaa, ṣugbọn kii ṣe nigbagbogbo nilo tabi fẹ. Ati didi UI nigbagbogbo kii ṣe imọran to dara. Sibẹsibẹ, awọn awoṣe ko lo fun awọn iṣẹ ṣiṣe eyikeyi. Ni deede, a lo wọn fun ẹyọkan, awọn iṣẹ ṣiṣe ti ara ẹni nibiti awọn olumulo yẹ ki o fo sinu, pari iṣẹ-ṣiṣe kan, ati lẹhinna pada si ibiti wọn wa. Laisi iyanilẹnu, wọn ṣiṣẹ daradara fun pataki-giga, awọn ibaraẹnisọrọ kukuru (fun apẹẹrẹ, awọn itaniji, awọn iṣe iparun, awọn ijẹrisi iyara). Nigbati awọn awoṣe ṣe iranlọwọ: 🚫 Modals nigbagbogbo jẹ idamu, apanirun, ati idamu.🚫 Wọn jẹ ki o nira lati ṣe afiwe ati daakọ-lẹẹmọ. ✅ Ṣafihan modal kan nikan ti awọn olumulo yoo ṣe idiyele idalọwọduro naa. Awọn oju-iwe → Fun eka, Awọn iṣan-iṣẹ Iṣẹ-Igbese pupọ Awọn oṣó tabi lilọ kiri laarin awọn modals ko ṣiṣẹ daradara daradara, paapaa ni awọn ọja ile-iṣẹ eka - nibẹ, awọn panẹli ẹgbẹ tabi awọn ifipamọ n ṣiṣẹ dara julọ. Awọn iṣoro bẹrẹ nigbati awọn olumulo nilo lati ṣe afiwe tabi tọka awọn aaye data - sibẹsibẹ awọn awoṣe ṣe idiwọ ihuwasi yii, nitorinaa wọn tun ṣii oju-iwe kanna ni awọn taabu pupọ dipo.
Fun awọn ṣiṣan ti o nipọn diẹ sii ati awọn ilana igbesẹ-pupọ, awọn oju-iwe adaduro ṣiṣẹ dara julọ. Awọn oju-iwe tun ṣiṣẹ daradara nigbati wọn beere akiyesi kikun olumulo, ati itọkasi si iboju ti tẹlẹ ko ṣe iranlọwọ pupọ. Ati awọn apoti ifipamọ ṣiṣẹ fun awọn iṣẹ-ṣiṣe ti o ni idiju pupọ fun modal ti o rọrun, ṣugbọn ko nilo lilọ kiri oju-iwe ni kikun. Nigbawo lati yago fun awọn awoṣe: 🚫 Yago fun awọn awoṣe fun awọn ifiranṣẹ aṣiṣe.🚫 Yago fun awọn awoṣe fun awọn iwifunni ẹya. Yẹra fun MejeejiFun Awọn iṣẹ-ṣiṣe Tuntun Ni ọpọlọpọ awọn eka, awọn ọja ti o wuwo-ṣiṣe, awọn olumulo yoo rii ara wọn ni ṣiṣe awọn iṣẹ-ṣiṣe kanna leralera, leralera. Nibe, awọn ọna kika mejeeji ati awọn lilọ kiri oju-iwe tuntun ṣafikun ija nitori wọn ṣe idiwọ sisan tabi fi agbara mu awọn olumulo lati ṣajọ data ti o padanu laarin gbogbo awọn taabu oriṣiriṣi tabi awọn iwo. Ni ọpọlọpọ igba, awọn olumulo pari pẹlu iriri fifọ, ti o kun fun awọn iṣeduro ti ko ni opin, awọn ikilọ abumọ, awọn itọnisọna ọrọ-ọrọ, tabi o kan sonu awọn aaye itọkasi. Gẹgẹbi Saulius Stebulis ti mẹnuba, ninu awọn oju iṣẹlẹ wọnyi, awọn apakan ti o gbooro tabi ṣiṣatunṣe ni aaye nigbagbogbo ṣiṣẹ dara julọ - wọn jẹ ki iṣẹ ṣiṣe duro si iboju lọwọlọwọ. Ni iṣe, ni ọpọlọpọ awọn oju iṣẹlẹ, awọn olumulo ko pari awọn iṣẹ-ṣiṣe wọn ni ipinya. Wọn nilo lati wo awọn data, daakọ-lẹẹmọ iye, sọ awọn titẹ sii ni awọn oriṣiriṣi awọn aaye, tabi ṣe atunyẹwo awọn igbasilẹ ti o jọra bi wọn ti n ṣiṣẹ nipasẹ awọn iṣẹ ṣiṣe wọn. Awọn agbekọja ati awọn apẹẹrẹ jẹ iranlọwọ diẹ sii ni mimu iraye si data isale lakoko iṣẹ-ṣiṣe naa. Bi abajade, ọrọ-ọrọ nigbagbogbo duro ni aaye rẹ, wa fun itọkasi tabi daakọ-lẹẹmọ. Ṣafipamọ awọn awoṣe ati lilọ kiri oju-iwe fun awọn akoko nibiti idalọwọduro ṣe afikun iye nitootọ - ni pataki lati yago fun awọn aṣiṣe to ṣe pataki. Modals vs. Awọn oju-iwe: Igi Ipinnu kan Ni igba diẹ sẹhin, Ryan Neufeld ṣajọpọ itọsọna ti o wulo pupọ lati ṣe iranlọwọ fun awọn apẹẹrẹ yan laarin awọn modals ati awọn oju-iwe. O wa pẹlu iwe afọwọṣe PNG ti o ni ọwọ ati awoṣe Google Doc pẹlu awọn ibeere ti o fọ lulẹ kọja awọn apakan 7. O gun, ni pipe, ṣugbọn o rọrun pupọ lati tẹle:
O le dabi ohun ti o lewu, ṣugbọn o jẹ ilana igbesẹ mẹrin ti o rọrun pupọ:
Ọrọ ti iboju naa. Ni akọkọ, a ṣayẹwo boya awọn olumulo nilo lati ṣetọju ipo ti iboju ti o wa labẹ. Idiju iṣẹ-ṣiṣe ati iye akoko. Rọrun, idojukọ, awọn iṣẹ-ṣiṣe ti ko ni iyanilẹnu le lo modal, ṣugbọn gigun, awọn ṣiṣan eka nilo oju-iwe kan. Itọkasi si oju-iwe ti o wa labẹ.Lẹhinna, a ṣayẹwo boya awọn olumulo nigbagbogbo nilo lati tọka si data ni abẹlẹ tabi ti iṣẹ-ṣiṣe ba jẹ ijẹrisi ti o rọrun tabi yiyan. Yiyan agbekọja ti o tọ. Nikẹhin, ti apọju ba jẹ aṣayan ti o dara nitootọ, o tọ wa lati yan laarin modal tabi nonmodal (titẹ si ọna ti kii ṣe adaṣe).
Fi ipari si Nigbakugba ti o ba ṣeeṣe, yago fun idinamọ gbogbo UI. Ṣe ifọrọwerọ kan ti o leefofo, ti o bo UI ni apakan, ṣugbọn gbigba lilọ kiri, yi lọ, ati daakọ-diẹ. Tabi ṣafihan awọn akoonu ti modal bi apamọ ẹgbẹ kan. Tabi lo accordion inaro dipo. Tabi mu awọn olumulo lọ si oju-iwe lọtọ ti o ba nilo lati ṣafihan ọpọlọpọ awọn alaye. Ṣugbọn ti o ba fẹ lati ṣe alekun ṣiṣe ati iyara awọn olumulo, yago fun awọn awoṣe ni gbogbo awọn idiyele. Lo wọn lati fa fifalẹ awọn olumulo, lati ṣajọpọ akiyesi wọn, lati yago fun awọn aṣiṣe. Gẹgẹbi Therese Fessenden ṣe akiyesi, ko si ẹnikan ti o nifẹ lati ni idilọwọ, ṣugbọn ti o ba gbọdọ, rii daju pe o tọsi idiyele naa. Pade “Awọn awoṣe Apẹrẹ Ibaraẹnisọrọ Ọgbọn” O le wa gbogbo apakan nipa awọn awoṣe ati awọn ọna yiyan ni Awọn ilana Apẹrẹ Itọka Iwari Smart, iṣẹ-ẹkọ fidio 15h-fidio wa pẹlu awọn 100 ti awọn apẹẹrẹ iṣe lati awọn iṣẹ akanṣe gidi - pẹlu ikẹkọ UX laaye nigbamii ni ọdun yii. Ohun gbogbo lati mega-dropdowns si awọn tabili ile-iṣẹ eka - pẹlu awọn apakan 5 tuntun ti a ṣafikun ni gbogbo ọdun. Lọ si awotẹlẹ ọfẹ. Lo koodu BIRDIE lati fipamọ 15% pipa. Pade Awọn awoṣe Apẹrẹ Ibaraẹnisọrọ Smart, ẹkọ fidio wa lori apẹrẹ wiwo & UX.
Fidio + Ikẹkọ UX Fidio nikan + Ikẹkọ UX$ 495.00 $ 699.00
Gba fidio + UX Training25 awọn ẹkọ fidio (15h) + Ikẹkọ UX Live. 100 ọjọ owo-pada-ẹri owo.Fidio nikan $ 300.00$ 395.00
Gba awọn fidio course40 fidio eko (15h). Ṣe imudojuiwọn ni ọdọọdun.Bakannaa wa bi Lapapo UX pẹlu awọn iṣẹ ikẹkọ fidio 2.
Wulo Resources
Awọn oriṣiriṣi Awọn Agbejade, nipasẹ Anna Kaley Awọn iṣe ti o dara julọ fun Ṣiṣeto Awọn Modal UI, nipasẹ Uxcel A Lo Ọpọlọpọ Awọn Modals Damn: Awọn Itọsọna UX, nipasẹ Adrian Egger Modal & Awọn ibaraẹnisọrọ Nonmodal, nipasẹ Therese Fessenden Apẹrẹ UI Idawọle ode oni: Awọn ibaraẹnisọrọ Modal, nipasẹ James Jacobs Modals ni Design Systems
