01 UI/UX නිර්මාණකරණයට හැඳින්වීමක්
මෙම ඒකකයේදී, අපි UI සහ UX යන සංකල්ප දෙකේ මූලික වෙනස්කම් සහ ඒවා වෙබ් අඩවියක සාර්ථකත්වයට බලපාන ආකාරය ඉගෙන ගනිමු.
User Experience (UX) යනු කුමක්ද?
User Experience (පරිශීලක අත්දැකීම) යනු යම් නිෂ්පාදනයක් හෝ සේවාවක් භාවිතා කිරීමේදී පරිශීලකයෙකුට දැනෙන සමස්ත අත්දැකීමයි. එය කෙතරම් පහසුද, කෙතරම් ප්රියජනකද, සහ එය ඔවුන්ගේ ගැටලුව විසඳන්නේද යන්න මින් අදහස් වේ.
උදාහරණයක්:
හොඳ අවන්හලක් ගැන සිතන්න. එහි UX යනු ආහාරවල රසය පමණක් නොවේ. වාහනය නැවැත්වීමේ පහසුව, වේටර්වරයාගේ සේවය, මෙනුපතේ පැහැදිලිකම, සහ අවන්හලේ පවතින සමස්ත পরিবেশය (ambiance) යන සියල්ලම හොඳ UX එකකට දායක වේ.
User Interface (UI) යනු කුමක්ද?
User Interface (පරිශීලක අතුරුමුහුණත) යනු පරිශීලකයා අන්තර්ක්රියා කරන දෘශ්ය කොටසයි. මෙයට වෙබ් අඩවියේ පිරිසැලසුම (layout), බොත්තම්, පින්තූර, අකුරු සහ වර්ණ වැනි සියලුම දෘශ්ය අංග ඇතුළත් වේ.
අවන්හල් උදාහරණයම ගනිමු:
එම අවන්හලේ UI යනු මෙනුපතේ නිර්මාණය, එහි භාවිතා කර ඇති අකුරු වර්ග, බිත්තිවල වර්ණය, මේස සහ පුටු වල පෙනුම, පිඟන් කෝප්පවල හැඩය වැනි දෘශ්යමය දේවල් වේ.
ප්රායෝගික ක්රියාකාරකම: පළමු වෙබ් පිටුව
දැන් අපි අපගේ "Student Notes Website" ව්යාපෘතියේ පළමු පියවර තබමු. අපි ඉතා සරල HTML පිටුවක් නිර්මාණය කරමු.
උපදෙස්:
- ඔබේ පරිගණකයේ ෆෝල්ඩරයක් සාදා එය
ui-ux-projectලෙස නම් කරන්න. - Notepad හෝ VS Code වැනි text editor එකක් විවෘත කරන්න.
- පහත දැක්වෙන කේතය සම්පූර්ණයෙන්ම copy කර එයට paste කරන්න.
- මෙම ගොනුව
student-notes-v1.htmlලෙස එම ෆෝල්ඩරය තුල save කරන්න.
HTML කේතය:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Student Notes</title>
</head>
<body>
<h1>Welcome to Student Notes Website</h1>
<button>Login</button>
</body>
</html>
පිටපත (Output):
ඔබේ ගොනුව web browser එකකින් විවෘත කළ විට, ඔබට මෙවැනි ප්රතිඵලයක් දැකගත හැකි වනු ඇත: