Con trỏ đã có từ khi “ Mẹ của tất cả các bản trình diễn ”nơi Douglas Englebart giới thiệu với thế giới chuột và giao diện người dùng đồ họa vào cuối những năm sáu mươi. Con trỏ chuột cho phép chúng ta xem chúng ta đang ở đâu trong không gian trên màn hình máy tính. Là một công cụ trải nghiệm người dùng, nó thực sự tuyệt vời khi có thể cho chúng tôi thấy những gì chúng tôi có thể làm tại bất kỳ thời điểm nào trên màn hình hoặc những gì máy tính đang làm. Bài viết này sẽ cho bạn biết về một số cách chúng tôi có thể sử dụng con trỏ chuột trên trang web của mình để cải thiện trải nghiệm người dùng trên trang web của bạn.
Cú pháp
Trong bộ chọn CSS của chúng tôi, chúng tôi sử dụng cú pháp sau để thay đổi con trỏ thành một cái gì đó khác với mũi tên mặc định.
cursor: [ url(1.png), url(2.png) ], etc.,
<mandatory keyword value>
Ở giữa tập hợp dấu ngoặc vuông đầu tiên, chúng ta có một danh sách các url, được phân tách bằng dấu phẩy. Đây là một giá trị tùy chọn. Nó cho phép sử dụng con trỏ tùy chỉnh - có rất nhiều người tạo con trỏ tùy chỉnh trên internet để giúp bạn tạo ra thứ gì đó độc nhất của mình.
Danh sách được phân tách bằng dấu phẩy chỉ ra rằng trình duyệt sẽ cố gắng tải danh sách đầu tiên. Nếu không thể tìm thấy url đầu tiên hoặc url không chính xác, nó sẽ đi xuống danh sách cho đến khi tìm thấy url hoạt động hoặc nó sẽ được đặt thành từ khóa bắt buộc ở cuối.
Tham số đầu tiên - với các url là tùy chọn. Thứ hai là không. Bạn phải bao gồm một từ khóa cung cấp một tập hợp các hướng dẫn để cho biết loại con trỏ nào bạn muốn xem ở đó. Dưới đây là một số giá trị có sẵn:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of CSS custom cursor</title>
<style>
table {
width:100%;
text-align: center;
border-collapse: collapse;
font-family: 'Roboto', sans-serif;
}
thead {
width: 100%;
background: lightblue;
}
tr:nth-child(even) {
background-color: lightgrey;
}
td {
width: 32%;
height: 50px;
padding: 10px;
}
td.test {
color: red;
font-weight: bold;
}
td#auto {
cursor: auto;
}
td#cell {
cursor: cell;
}
td#crosshair {
cursor: crosshair;
}
td#default {
cursor: default;
}
td#none {
cursor: none;
}
td#pointer {
cursor: pointer;
}
td#help {
cursor: help;
}
td#progress {
cursor: progress;
}
td#wait {
cursor: wait;
}
td#text {
cursor: text;
}
td#vertical-text {
cursor: vertical-text;
}
td#zoom-in {
cursor: zoom-in;
}
td#zoom-out {
cursor: zoom-out;
}
</style>
</head>
<body>
<table>
<thead>
<td>Cursor Type:</td>
<td>Description:</td>
<td>Test it Out: </td>
</thead>
<tr>
<td>auto</td>
<td>Automatically figures out which cursor to use based on context.</td>
<td class="test" id="auto"> TEST </td>
</tr>
<tr>
<td>default</td>
<td>Typically an arrow, but depends on platform being used.</td>
<td class="test" id="default"> TEST </td>
</tr>
<tr>
<td>help</td>
<td>Used to indicate help is available</td>
<td class="test" id="help"> TEST </td>
</tr>
<tr>
<td>none</td>
<td>No cursor present</td>
<td class="test" id="none"> TEST </td>
</tr>
<tr>
<td>pointer</td>
<td>Most often used when hovering over link or button to indicate it can be clicked.</td>
<td class="test" id="pointer"> TEST </td>
</tr>
<tr>
<td>progress</td>
<td>A mashup of pointer and wait - indicates that the UI can still be interacted with while something else is happening...</td>
<td class="test" id="progress"> TEST </td>
</tr>
<tr>
<td>text</td>
<td>Tells the user text can be highlighted.</td>
<td class="test" id="text"> TEST </td>
</tr>
<tr>
<tr>
<td>wait</td>
<td>Indicates that the computer is thinking and user CANNOT interact with UI...</td>
<td class="test" id="wait"> TEST </td>
</tr>
<tr>
<td>zoom-in</td>
<td>Indicates to user that we can zoom in on something. </td>
<td class="test" id="zoom-in"> TEST </td>
</tr>
<tr>
<td>zoom-out</td>
<td>Indicates to user that we can zoom out on something. </td>
<td class="test" id="zoom-out"> TEST </td>
</tr>
</table>
</body>
</html> Đoạn mã trên chỉ chia sẻ một số con trỏ có sẵn mà chúng tôi có thể sử dụng trên trang web của mình. Kiểm tra MDN cho những người khác.
Kết luận
Hôm nay chúng ta đã xem xét một số cách khác nhau để thêm con trỏ vào trang web của bạn nhằm hỗ trợ cải thiện trải nghiệm người dùng. Bằng cách sử dụng con trỏ để chỉ ra những gì có thể được thực hiện trên bất kỳ điểm nhất định nào trên trang, người dùng biết điều gì sẽ xảy ra khi họ điều hướng trang web của bạn. Có nhiều hơn những cái được đề cập ở đây.
Tôi khuyên bạn nên kiểm tra các cách khác nhau mà bạn có thể tùy chỉnh con trỏ để phù hợp với nhu cầu của mình. Và hãy nhớ:con trỏ chỉ là một nửa của UX. Nửa còn lại thực sự đang triển khai những gì người dùng mong đợi con trỏ thực hiện. Chúng ta sẽ giải quyết vấn đề đó vào lúc khác. Chúc bạn hack vui vẻ!
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình đã dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.