මොබයිල් ඇප් නිර්මාණය කිරීමේ තුන්වන පියවර: සැලසුම (UI/UX)

බොහෝ විට UI සහ UX යන වචන දෙක එකට භාවිතා වුවත්, ඒවායේ අර්ථයන් වෙනස් වේ. මේ දෙකම එකට ක්‍රියාත්මක වීමෙන් ඇප් එකක හොඳම අත්දැකීම ලබා දිය හැකිය.

UI (User Interface) - පරිශීලක අතුරු මුහුණත

UI යනු ඇප් එකක පෙනුමයි. බොත්තම්, වර්ණ, අකුරු, පින්තූර සහ layout එක වැනි දෘශ්‍යමය සියලුම අංග මෙයට අයත් වේ. හොඳ UI එකක් මඟින් ඇප් එකක් භාවිතා කිරීමට ආකර්ෂණීය සහ පහසු බවක් දැනේ.

උදාහරණයක් ලෙස, ඔබ ෆේස්බුක් ඇප් එක භාවිතා කරන විට, එහි ඇති නිල් සහ සුදු වර්ණ, අකුරු වර්ග, සහ එහි බොත්තම් පිහිටා ඇති ආකාරය UI එකට අයත් වේ. ඔබේ ඇප් එකේ පෙනුම ගැන අවධානය යොමු කිරීමෙන්, පරිශීලකයන්ට ඇප් එක හා සම්බන්ධ වීමට පහසු වනු ඇත.

UX (User Experience) - භාවිත අත්දැකීම

UX යනු ඇප් එකක් භාවිතා කිරීමේදී පරිශීලකයාට දැනෙන සමස්ත හැඟීමයි. එය ඇප් එකක තර්කනයට (logic) සහ ක්‍රියාකාරීත්වයට අදාළ වේ. උදාහරණයක් ලෙස, යම්කිසි කාර්යයක් (task) සම්පූර්ණ කිරීමට කොතරම් පහසුද, ඇප් එකේ පිටු අතර මාරු වීම කෙතරම් සුමටද යන්න මෙයට ඇතුළත් වේ.

උදාහරණයක් ලෙස, Uber ඇප් එකේ ගමනක් ඇණවුම් කිරීමේදී, ඔබගේ ස්ථානය ස්වයංක්‍රීයව හඳුනා ගැනීම, ඉක්මනින් රියදුරෙකු සොයා ගැනීම, සහ ගමන අවසන් වූ පසු ස්වයංක්‍රීයව මුදල් ගෙවීම වැනි දේවල් එහි UX එකට අයත් වේ. UX එක හොඳ නැතිනම්, ඇප් එක කොතරම් ලස්සන වුවත්, මිනිසුන් එය භාවිතා කිරීමට කැමති වන්නේ නැත.

ඔබේ ඇප් එකේ UI සහ UX සැලසුම් කිරීම සඳහා පහත පියවර අනුගමනය කළ හැකිය:

පියවර 1: වයර්ෆ්‍රේමින් (Wireframing)

වයර්ෆ්‍රේමින් යනු ඔබේ ඇප් එකේ මූලික සැලැස්ම සරල රූප සටහන් ලෙස ඇඳ ගැනීමයි. මේ සඳහා ඔබට පෑනක් සහ කඩදාසියක් හෝ Balsamiq වැනි සරල ඩිජිටල් මෙවලම් භාවිතා කළ හැකිය. මෙහිදී ඇප් එකේ වර්ණ හෝ අකුරු ගැන සැලකිලිමත් විය යුතු නැත. ප්‍රධාන අරමුණ වන්නේ බොත්තම්, පින්තූර සහ පෙළ කොහේ තියෙන්න ඕනේද යන්න තීරණය කිරීමයි.

වයර්ෆ්‍රේමින් යනු නිවසක් හදන්න කලින් බිම් සැලැස්මක් අඳිනවා වගේ වැඩක්. මෙය, කෝඩ් ලිවීමට පෙර ඇප් එකේ ව්‍යුහය (structure) ගැන පැහැදිලි අවබෝධයක් ලබා දෙනවා.

පියවර 2: මෝකප්ස් (Mockups)

මෝකප්ස් යනු වයර්ෆ්‍රේම් එකට වර්ණ, අකුරු, පින්තූර සහ වෙනත් දෘශ්‍ය අංග එකතු කිරීමෙන් සෑදූ ඇප් එකේ සැබෑ පෙනුමට සමාන රූප සටහන් වේ. මේ සඳහා Figma, Adobe XD හෝ Sketch වැනි බලවත් මෙවලම් භාවිතා කළ හැකිය. මේවා භාවිතා කිරීමෙන් ඔබට කෝඩ් ලිවීමට පෙර ඇප් එකේ අවසාන පෙනුම කෙසේදැයි දැකගත හැකිය.

පියවර 3: ප්‍රොටෝටයිප් (Prototype)

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

ඔබට Figma වැනි මෙවලම් භාවිතා කර මෙය පහසුවෙන් නිර්මාණය කළ හැකිය. මිතුරන් සහ පවුලේ අය සමඟ මෙම ප්‍රොටෝටයිප් එක පරීක්ෂා කර, ඔවුන්ට ගැටලු ඇතිවන ස්ථාන හඳුනාගෙන, ඔබේ සැලසුමේ අවශ්‍ය වෙනස්කම් සිදු කරන්න.