07 Interaction Design සහ Microinteractions

හොඳ නිර්මාණයක් යනු පෙනුම පමණක් නොවේ, එය පරිශීලකයා සමඟ අන්තර්ක්‍රියා කරන ආකාරය ද වේ. අපි වෙබ් අඩවියට ජීවයක් ලබා දෙමු.

Interaction Design (IxD) යනු කුමක්ද?

Interaction Design යනු පරිශීලකයා සහ නිෂ්පාදනය (අපගේ වෙබ් අඩවිය) අතර සිදුවන සංවාදය නිර්මාණය කිරීමයි. පරිශීලයෙකු බොත්තමක් ක්ලික් කළ විට කුමක් සිදුවේද? පෝරමයක් submit කළ විට කුමන ප්‍රතිචාරයක් ලැබේද? මේ සියල්ල IxD හි කොටසකි.

Microinteractions: කුඩා දේවල බලය

Microinteractions යනු තනි කාර්යයක් වටා කේන්ද්‍රගත වූ කුඩා, සියුම් ප්‍රතිපෝෂණ වේ. ඒවා පරිශීලකයාට ඔවුන්ගේ ක්‍රියාව තහවුරු වූ බවට දෘශ්‍ය ප්‍රතිපෝෂණයක් ලබා දෙන අතර, වෙබ් අඩවිය වඩාත් "ජීවමාන" සහ ප්‍රතිචාරාත්මක බවක් දැනීමට සලස්වයි.

උදාහරණ:

බොත්තමක් මතට mouse cursor එක ගෙන ගිය විට එහි වර්ණය වෙනස් වීම (Hover Effect).
Facebook හි 'Like' බොත්තම එබූ විට දිස්වන සජීවීකරණය.
යමක් load වන විට දිස්වන progress bar එක.
Mute බොත්තම එබූ විට speaker icon එක වෙනස් වීම.

මෙන්න සරල hover effect එකක්: (Mouse එක උඩට ගෙන යන්න)

ප්‍රායෝගික ක්‍රියාකාරකම: Login බොත්තමට Hover Effect එකක් එක් කිරීම

දැන් අපි අපේ Login බොත්තමට සරල සහ සුමට hover effect එකක් CSS භාවිතයෙන් එක් කරමු. පරිශීලකයෙකු බොත්තම මතට mouse එක ගෙන ආ විට එය ක්ලික් කළ හැකි බවට දෘශ්‍ය ඉඟියක් ලබා දීම මෙහි අරමුණයි.

උපදෙස්:

ඔබේ student-notes-v5.html ගොනුව විවෘත කරන්න.
<style> ටැගය තුළ, .btn-primary class එකට transition නීතියක් එක් කරන්න. මෙය වර්ණ වෙනස්වීම සුමට කරයි.
ඊට පහළින්, .btn-primary:hover නමින් නව pseudo-class එකක් සාදා, එහිදී පසුබිම් වර්ණය තරමක් තද පැහැයකට වෙනස් කරන්න.
ගොනුව student-notes-v6.html ලෙස අලුතින් save කරන්න.

HTML කේතය:

                        
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Student Notes</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f9;
            color: #333;
        }
        .container {
            padding: 20px;
            max-width: 800px;
            margin: auto;
        }
        .btn-primary {
            background-color: #007bff;
            color: white;
            border: none;
            padding: 10px 15px;
            cursor: pointer;
            border-radius: 5px;

            transition: background-color 0.3s ease; /* Smooth transition for color change */

        }

        .btn-primary:hover {
            background-color: #0056b3; /* A darker blue for hover state */
        }

    </style>
</head>
<body>

<div class="container">
    <!-- The rest of the HTML body remains the same -->
    <nav>...</nav>
    <hr>
    <h1>Welcome to Student Notes Website</h1>
    <p>A simple place to store your notes online.</p>
    <button class="btn-primary">Login</button>
</div>

</body>
</html>
                        
                    

පෙර ඒකකය ඊළඟ ඒකකය: Figma භාවිතය