ඔබ මීට පෙර එහි ගොස් ඇති. පරිශීලකයින්ට මාදිලියක් පෙන්වීම අතර අපි තෝරා ගන්නේ කෙසේද සහ අපි ඒවා වෙනම, නව පිටුවකට සංචාලනය කරන්නේ කවදාද? සහ එය කිසිසේත්ම වැදගත්ද? ඇත්ත වශයෙන්ම, එය කරයි. තීරණය පරිශීලකයන්ගේ ප්‍රවාහය, ඔවුන්ගේ සන්දර්භය, විස්තර සෙවීමේ හැකියාව සහ ඒ සමඟ දෝෂ සංඛ්‍යාතය සහ කාර්යය සම්පූර්ණ කිරීම කෙරෙහි බලපායි. විකල්ප දෙකම කඩාකප්පල්කාරී සහ කලකිරීමට පත් විය හැකිය - වැරදි වේලාවක සහ වැරදි ස්ථානයේ. එබැවින් අපි එය නිවැරදිව ලබා ගැනීම වඩා හොඳය. හොඳයි, අපි බලමු කොහොමද ඒක කරන්නේ කියලා. Modals එදිරිව Dialogs එදිරිව overlays vs. Lightboxes අපි බොහෝ විට තනි මාදිලියේ UI සංරචකයක් ගැන කතා කරන අතර, අපි බොහෝ විට විවිධ මාදිලියේ සියලු වර්ග අතර සියුම්, සංකීර්ණ සූක්ෂ්මතා නොසලකා හරිමු. ඇත්ත වශයෙන්ම, සෑම මාදිලියක්ම සමාන නොවේ. මාදිලි, සංවාද, ආවරණ සහ ලයිට් පෙට්ටි - සියල්ල සමාන ය, නමුත් ඒවා ඇත්ත වශයෙන්ම වෙනස් ය:

"සංවාදය" සඳහා DialogA සාමාන්‍ය පදය (පරිශීලක ↔ පද්ධතිය). Overlay කුඩා අන්තර්ගත පැනලයක් පිටුවක ඉහලින් සංදර්ශණය වේ. ModalUser overlay + පසුබිම අක්‍රිය කර ඇති සමඟ අන්තර් ක්‍රියා කළ යුතුය. NonmodalUser overlay + පසුබිම සක්‍රීය කර ඇති සමඟ අන්තර් ක්‍රියා කළ යුතුය. මාදිලිය කෙරෙහි අවධානය යොමු කිරීමට Lightbox අඳුරු පසුබිම.

ඇනා කේලි උද්දීපනය කරන පරිදි, බොහෝ ආවරණ වැරදි වේලාවක දිස් වේ, විවේචනාත්මක කාර්යයන් අතරතුර පරිශීලකයින්ට බාධා කරයි, දුර්වල භාෂාව භාවිතා කරයි, සහ පරිශීලකයින්ගේ ප්‍රවාහය බිඳ දමන්න. ඒවා ස්වභාවයෙන්ම බාධාකාරී වන අතර සාමාන්‍යයෙන් ඒ සඳහා දැඩි අවශ්‍යතාවයකින් තොරව ඉහළ මට්ටමේ බරපතලකමකින් යුක්ත වේ.

ඔවුන්ගේ ක්‍රියාවේ ප්‍රතිවිපාක ඉහළ බලපෑමක් ඇති කරන්නේ නම් නිසැකවම පරිශීලකයන් මන්දගාමී විය යුතු අතර බාධා කළ යුතුය, නමුත් බොහෝ අවස්ථා සඳහා මාදිලි නොවන ඒවා වඩාත් සියුම් වන අතර පරිශීලකයාගේ අවධානයට යමක් ගෙන ඒමට වඩාත් මිත්‍රශීලී විකල්පයකි. යමක් ඇත්නම්, එය පෙරනිමියක් ලෙස මම සැමවිටම යෝජනා කරමි. මාදිලි → තනි, ස්වයං අන්තර්ගත කාර්යයන් සඳහා නිර්මාණකරුවන් වශයෙන්, අපි බොහෝ විට මාදිලි අදාළ නොවන සහ කරදරකාරී ලෙස බැහැර කරමු - සහ බොහෝ විට ඒවා! - නමුත් ඒවායේ වටිනාකම ද ඇත. විය හැකි වැරදි ගැන පරිශීලකයින්ට අනතුරු ඇඟවීමට හෝ දත්ත නැතිවීම වළක්වා ගැනීමට ඒවා ඉතා ප්‍රයෝජනවත් විය හැකිය. පිටුවේ වත්මන් තත්ත්වයට බාධා නොකර අදාළ ක්‍රියා සිදු කිරීමට හෝ විස්තර කිරීමට ඔවුන්ට උදවු කළ හැක. නමුත් මොඩල් වල ඇති ලොකුම වාසිය නම් ඒවා පරිශීලකයින්ට වත්මන් තිරයේ සන්දර්භය තබා ගැනීමට උපකාර කිරීමයි. එයින් අදහස් කරන්නේ UI පමණක් නොව, සංස්කරණය කළ ආදානය, අනුචලනය වන ස්ථානය, ඇකෝනියන් තත්ත්වය, පෙරහන් තේරීම, වර්ග කිරීම යනාදියයි.

සමහර අවස්ථාවලදී, පරිශීලකයින්ට තේරීමක් ඉක්මනින් තහවුරු කිරීමට අවශ්‍ය වේ (උදා. ඉහත පෙන්වා ඇති පරිදි පෙරහන්) ඉන්පසු එතැන් සිට වහාම ඉදිරියට යන්න. ස්වයංක්‍රීයව සුරැකීමට එයම සාක්ෂාත් කරගත හැකිය, නමුත් එය සැමවිටම අවශ්‍ය හෝ අවශ්‍ය නොවේ. තවද UI අවහිර කිරීම බොහෝ විට හොඳ අදහසක් නොවේ. කෙසේ වෙතත්, කිසිදු කාර්යයක් සඳහා මාදිලි භාවිතා නොවේ. සාමාන්‍යයෙන්, අපි ඒවා භාවිතා කරන්නන් තුළට පැන, කාර්යයක් සම්පූර්ණ කර, පසුව ඔවුන් සිටි ස්ථානයට ආපසු යා යුතු තනි, ස්වයං අන්තර්ගත කාර්යයන් සඳහා භාවිත කරමු. පුදුමයට කරුණක් නම්, ඔවුන් ඉහළ ප්‍රමුඛතා, කෙටි අන්තර්ක්‍රියා සඳහා හොඳින් ක්‍රියා කරයි (උදා., ඇඟවීම්, විනාශකාරී ක්‍රියා, ඉක්මන් තහවුරු කිරීම්). මාදිලි උපකාර වන විට: 🚫 Modals බොහෝ විට කඩාකප්පල්කාරී, ආක්‍රමණශීලී සහ ව්‍යාකූල වේ.🚫 ඒවා සංසන්දනය කිරීම සහ පිටපත් කිරීම අපහසු කරයි.✅ එහෙත් මොඩල් මඟින් පරිශීලකයින්ට බහු සන්දර්භයන් පවත්වා ගැනීමට ඉඩ සලසයි.✅ ආපසු හැරවිය නොහැකි දෝෂ සහ දත්ත නැතිවීම වැළැක්වීමට ප්‍රයෝජනවත් වේ. ✅ පරිශීලකයන් බාධාව අගය කරන්නේ නම් පමණක් මාදිලියක් පෙන්වන්න. ✅ පෙරනිමියෙන්, අවහිර නොවන සංවාදවලට ("නොවන") කැමති වේ.✅ පසුව සංවාදය අවම කිරීමට, සැඟවීමට හෝ ප්‍රතිසාධන කිරීමට පරිශීලකයින්ට ඉඩ දෙන්න. පිටු → සංකීර්ණ, බහු-පියවර කාර්ය ප්‍රවාහ සඳහා විශාරදයන් හෝ පටිත්ත සංචාලනය සංකීර්ණ ව්‍යවසාය නිෂ්පාදනවල පවා හොඳින් ක්‍රියා නොකරයි - එහි පැති පැනල් හෝ ලාච්චු සාමාන්‍යයෙන් වඩා හොඳින් ක්‍රියා කරයි. පරිශීලකයින්ට දත්ත ලක්ෂ්‍ය සංසන්දනය කිරීමට හෝ යොමු කිරීමට අවශ්‍ය වූ විට ගැටළු ආරම්භ වේ - එහෙත් මාදිලි මෙම හැසිරීම අවහිර කරයි, එබැවින් ඔවුන් ඒ වෙනුවට ටැබ් කිහිපයකින් එකම පිටුව නැවත විවෘත කරයි.

වඩාත් සංකීර්ණ ප්‍රවාහ සහ බහු-පියවර ක්‍රියාවලි සඳහා, ස්වාධීන පිටු වඩාත් හොඳින් ක්‍රියා කරයි. පරිශීලකයාගේ සම්පූර්ණ අවධානය ඉල්ලා සිටින විට පිටු ද වඩා හොඳින් ක්‍රියා කරන අතර පෙර තිරය වෙත යොමු වීම එතරම් ප්‍රයෝජනවත් නොවේ. සහ ලාච්චු සරල මාදිලියකට ඉතා සංකීර්ණ වන උප-කාර්යයන් සඳහා ක්‍රියා කරයි, නමුත් සම්පූර්ණ පිටු සංචාලනයක් අවශ්‍ය නොවේ. මාදිලි වළක්වා ගත යුත්තේ කවදාද: 🚫 දෝෂ පණිවිඩ සඳහා මාදිලිවලින් වළකින්න. 🚫 විශේෂාංග දැනුම්දීම් සඳහා මාදිලිවලින් වළකින්න. අවශ්ය. දෙකම වළකින්නපුනරාවර්තන කාර්යයන් සඳහා බොහෝ සංකීර්ණ, කාර්ය බහුල නිෂ්පාදනවල, පරිශීලකයන් නැවත නැවතත් එකම කාර්යයන් නැවත නැවතත් සිදු කරනු ඇත. එහිදී, මොඩල් සහ නව පිටු සංචාලන යන දෙකම ඝර්ෂණය එක් කරන්නේ ඒවා ප්‍රවාහයට බාධා කරන නිසා හෝ විවිධ ටැබ් හෝ දසුන් අතර නැතිවූ දත්ත රැස් කිරීමට පරිශීලකයින්ට බල කරන බැවිනි. බොහෝ විට, පරිශීලකයින් අවසන් වන්නේ බිඳුණු අත්දැකීමක්, කිසිදා නිම නොවන තහවුරු කිරීම්, අතිශයෝක්තියට පත් වූ අනතුරු ඇඟවීම්, වාචික උපදෙස්, හෝ යොමු ලකුණු මඟ හැරීමෙන් පිරී ය. Saulius Stebulis සඳහන් කළ පරිදි, මෙම අවස්ථා වලදී, පුළුල් කළ හැකි කොටස් හෝ ස්ථානගත සංස්කරණය බොහෝ විට වඩා හොඳින් ක්‍රියා කරයි - ඔවුන් කාර්යය වත්මන් තිරයට නැංගුරම් ලා තබා ගනී. ප්‍රායෝගිකව, බොහෝ අවස්ථා වලදී, පරිශීලකයන් තම කාර්යයන් හුදකලාව සම්පූර්ණ නොකරයි. ඔවුන්ට දත්ත සෙවීමට, අගයන් පිටපත් කිරීමට, විවිධ ස්ථානවල ඇතුළත් කිරීම් පිරිපහදු කිරීමට හෝ ඔවුන්ගේ කාර්යයන් හරහා වැඩ කරන විට සමාන වාර්තා සමාලෝචන කිරීමට අවශ්‍ය වේ. කාර්යය අතරතුර පසුබිම් දත්ත වෙත ප්රවේශය පවත්වා ගැනීම සඳහා ආවරණ සහ ලාච්චු වඩාත් ප්රයෝජනවත් වේ. එහි ප්‍රතිඵලයක් වශයෙන්, සන්දර්භය සැමවිටම එහි ස්ථානයේ පවතී, යොමු කිරීම හෝ පිටපත් කිරීම සඳහා ලබා ගත හැකිය. බාධා කිරීම් සැබෑ වටිනාකමක් එකතු කරන අවස්ථා සඳහා ආකෘති සහ පිටු සංචාලනය සුරකින්න - විශේෂයෙන් තීරණාත්මක වැරදි වැළැක්වීමට. Modals vs. Pages: A Decision Tree ටික කලකට පෙර, Ryan Neufeld නිර්මාණකරුවන්ට ආකෘති සහ පිටු අතර තෝරා ගැනීමට උපකාර කිරීම සඳහා ඉතා ප්‍රයෝජනවත් මාර්ගෝපදේශයක් එක් කළේය. එය පහසු PNG cheatsheet එකක් සහ කොටස් 7ක් හරහා ප්‍රශ්න සහිත Google Doc සැකිල්ලක් සමඟ පැමිණේ. එය දිගු, අතිශයින්ම සවිස්තරාත්මක, නමුත් අනුගමනය කිරීමට ඉතා පහසුය:

එය භයානක පෙනුමක් ඇති නමුත් එය ඉතා සරල 4-පියවර ක්රියාවලියකි:

තිරයේ සන්දර්භය.පළමුව, පරිශීලකයින්ට යටින් පවතින තිරයේ සන්දර්භය පවත්වා ගැනීමට අවශ්‍ය දැයි අපි පරීක්ෂා කරමු. කාර්යය සංකීර්ණත්වය සහ කාලසීමාව. සරල, නාභිගත, අවධානය වෙනතකට යොමු නොවන කාර්යයන් සඳහා මාදිලියක් භාවිතා කළ හැකි නමුත් දිගු, සංකීර්ණ ප්‍රවාහයන්ට පිටුවක් අවශ්‍ය වේ. යටින් පවතින පිටුව වෙත යොමු වන්න.එවිට, පරිශීලකයන් බොහෝ විට පසුබිමේ දත්ත වෙත යොමු කිරීමට අවශ්‍ය දැයි හෝ කාර්යය සරල තහවුරු කිරීමක් හෝ තේරීමක් දැයි අපි පරීක්ෂා කරමු. නිවැරදි අතිච්ඡාදනය තෝරා ගැනීම. අවසාන වශයෙන්, අතිච්ඡාදනය ඇත්තෙන්ම හොඳ විකල්පයක් නම්, එය අපට මාදිලිය හෝ අවිධිමත් නොවන (අනුරූප නොවන එකක් දෙසට නැඹුරු වීම) තෝරා ගැනීමට මඟ පෙන්වයි.

එතීම හැකි සෑම විටම, සම්පූර්ණ UI අවහිර කිරීමෙන් වළකින්න. UI අර්ධ වශයෙන් ආවරණය කරමින්, නමුත් සංචාලනය, අනුචලනය සහ පිටපත් ඇලවීමට ඉඩ දෙමින් සංවාදයක් පාවෙන ලෙස තබා ගන්න. නැතහොත් මාදිලියේ අන්තර්ගතය පැති ලාච්චුවක් ලෙස පෙන්වන්න. නැතහොත් ඒ වෙනුවට සිරස් ඇකෝනියන් භාවිතා කරන්න. නැතහොත් ඔබට බොහෝ විස්තර පෙන්වීමට අවශ්‍ය නම් පරිශීලකයින් වෙනම පිටුවකට ගෙන එන්න. නමුත් ඔබට පරිශීලකයින්ගේ කාර්යක්ෂමතාව සහ වේගය ඉහළ නැංවීමට අවශ්‍ය නම්, ඕනෑම වියදමකින් මාදිලි වලින් වළකින්න. පරිශීලකයන් මන්දගාමී කිරීමට, ඔවුන්ගේ අවධානය එකතු කිරීමට, වැරදි වළක්වා ගැනීමට ඒවා භාවිතා කරන්න. තෙරේස් ෆෙසෙන්ඩන් සඳහන් කළ පරිදි, කිසිවෙකු බාධා කිරීමට කැමති නැත, නමුත් ඔබට අවශ්‍ය නම්, එය පිරිවැය සම්පූර්ණයෙන්ම වටින බවට වග බලා ගන්න. "Smart Interface Design Patterns" හමුවන්න ඔබට මෙම වසර අගදී සජීවී UX පුහුණුවක් සමඟ - සැබෑ ජීවිත ව්‍යාපෘති වලින් ප්‍රායෝගික උදාහරණ 100ක් සහිත අපගේ 15h-වීඩියෝ පාඨමාලාව වන Smart Interface Design Patterns තුළ මාදිලි සහ විකල්ප පිළිබඳ සම්පූර්ණ කොටසක් සොයා ගත හැක. මෙගා-ඩ්‍රොප්ඩවුන් සිට සංකීර්ණ ව්‍යවසාය වගු දක්වා සෑම දෙයක්ම - සෑම වසරකම නව කොටස් 5ක් එක් කරයි. නොමිලේ පෙරදසුනක් වෙත පනින්න. 15% වට්ටමක් ඉතිරි කර ගැනීමට BIRDIE කේතය භාවිතා කරන්න. ස්මාර්ට් අතුරුමුහුණත් නිර්මාණ රටා හමුවන්න, අතුරු මුහුණත් නිර්මාණය සහ UX පිළිබඳ අපගේ වීඩියෝ පාඨමාලාව.

වීඩියෝ + UX පුහුණු වීඩියෝව පමණක් වීඩියෝ + UX පුහුණුව$ 495.00 $ 699.00

Video + UX Training25 වීඩියෝ පාඩම් (පැ. 15) + සජීවී UX පුහුණුව ලබා ගන්න. දින 100ක මුදල් ආපසු ගෙවීමේ සහතිකය.වීඩියෝව පමණක්$ 300.00$ 395.00

වීඩියෝ පාඨමාලාව 40 වීඩියෝ පාඩම් (පැ. 15) ලබා ගන්න. වාර්ෂිකව යාවත්කාලීන කෙරේ. වීඩියෝ පාඨමාලා 2ක් සමඟ UX Bundle එකක් ලෙසද ලබා ගත හැක.

ප්රයෝජනවත් සම්පත්

විවිධ ආකාරයේ උත්පතන, ඇනා කේලි විසිනි UI Modals සැලසුම් කිරීම සඳහා හොඳම භාවිතයන්, Uxcel විසින් අපි ඕනෑවට වඩා නරක මාදිලි භාවිතා කරමු: UX මාර්ගෝපදේශ, Adrian Egger විසින් Modal සහ Nonmodal Dialogs, තෙරේස් ෆෙසෙන්ඩන් විසිනි Modern Enterprise UI Design: Modal Dialogs, James Jacobs විසිනි සැලසුම් පද්ධතිවල මාදිලි

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