使用 Ctrl+D 可将网站添加到书签
 
当前位置：码云笔记 > 前端 > HTML/CSS > 提升用户体验的CSS技巧
码云码云 HTML/CSS

提升用户体验的CSS技巧

产品经理经常说要注重用户体验，但当我们谈及改善用户体验时，你会想到什么？

其实，有一点是很容易被开发者忽视的，那就是CSS。我们可以使用一些CSS技巧来改善网页的表现形式、交互细节和可访问性。

而且这些技巧不需要花费太多时间，也不需要消耗服务器资源。你只需要花两个小时学习，然后就可以把它应用到你所有的项目中，并永远改善用户体验。

可点击区域

有时你的按钮很小，这可能导致用户无法准确点击按钮。这种现象经常发生在移动端上。如果用户点击次数太多，没有点击他们想要的按钮，或者点击错误的按钮，会让他们感到非常沮丧。

那么，如何解决这个问题呢？有些开发者可能会说：把按钮做大点。

但网页中元素的大小往往是固定的，我们不能轻易调整一个元素的大小。而且如果按钮太大，感觉很奇怪。

一个更好的解决方案是在不改变按钮原始尺寸的情况下增加其可点击区域。具体来说：我们可以使用伪元素来增加一个元素的可点击区域。

例如，这里有一个按钮：

<button id="btn">btn</button>

然后，我们可以为它添加一个伪类：

#btn::before {
  content: "";
  position: absolute;
  top: -20px;
  right: -20px;
  bottom: -20px;
  left: -20px;
}

js添加按钮点击事件：

document.getElementById("btn").onclick = function () {
  alert("click");
};

这时，如果我们点击按钮周围的区域，我们仍然可以触发按钮的点击事件。

可点击区域平滑滚动

当页面被 # 链接滚动时，默认效果是这样的。

默认滚动效果

这种突然的跳跃会让人感到不舒服。为了解决这个问题，我们可以使用这个CSS样式：sroll-behavior: smooth。

<nav>
  <a href="#page-1">1</a>
  <a href="#page-2">2</a>
  <a href="#page-3">3</a>
</nav>
<div class="scroll-container">
  <div class="scroll-page" id="page-1">1</div>
  <div class="scroll-page" id="page-2">2</div>
  <div class="scroll-page" id="page-3">3</div>
</div>

CSS代码：

a {
  display: inline-block;
  width: 50px;
  text-decoration: none;
}
nav, .scroll-container {
  display: block;
  margin: 0 auto;
  text-align: center;
}
nav {
  width: 339px;
  padding: 5px;
  border: 1px solid black;
}
.scroll-container {
  width: 350px;
  height: 200px;
  overflow-y: scroll;
  scroll-behavior: smooth;
}
.scroll-page {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 5em;
}

效果如下：

平滑滚动

选择所有文本

我们的网页经常需要提供一些内容供用户选择，如电话号码、地址、标题等。而这些文字应该是一个整体，我们希望当用户点击部分文字时，剩余的文字会被自动选择。

效果如下：

选择所有文本

要实现这种效果非常简单，只需使用这个CSS样式：user-select: all 。用户选择的CSS属性控制用户是否可以选择文本。如果它的值是 all，意味着一个元素的所有内容都将被原子化地选择。

HTML代码：

<div>
  <h2 class="all">提升用户体验的10个CSS技巧</h2>
  <h3 class="all">码云笔记</h3>
  <div>电话号码: <span class="all">12345678</span></div>
  <p class="all">一个成功的Web App必须有良好的用户体验。当我们谈及改善用户体验时，你会想到什么？
其实，有一点是很容易被开发者忽视的，那就是CSS。我们可以使用一些CSS技巧来改善网页的表现形式、交互细节和可访问性。</p>
</div>

CSS代码：

.all{
  user-select: all;
}

如果你想在文本被选中后添加一些额外的样式，你可以使用::selection 。::selection CSS伪元素将样式应用于文档中被用户突出显示的部分（比如在文本上点击和拖动鼠标）。

但要记住。只有某些CSS属性可以和::selection一起使用。

  • color
  • background-color
  • text-decoration 及其相关属性
  • text-shadow
  • stroke-color, fill-color 和 stroke-width

Cursor

在不同的场景下使用不同的鼠标样式可以帮助读者感知页面的当前状态，从而改善用户的互动体验。

CSS cursor属性设置鼠标指针在一个元素上时要显示的鼠标指针（如果有的话）。

光标设置应该告知用户在当前位置可以进行的鼠标操作，包括文本选择、激活帮助或上下文菜单、复制内容、调整表格大小，等等。你可以用一个关键词来指定光标的类型，或者加载一个特定的图标来使用（有可选的回退图像和强制性的关键词作为最后的回退）。

例如：

CSS cursor属性设置鼠标指针

HTML代码：

<button id="a">cursor: pointer;</button>
<button id="b">cursor: not-allowed;</button>
<button id="c">cursor: wait;</button>
<button id="d">cursor: zoom-in;</button>
<button id="e">cursor: help;</button>

CSS代码：

#a {
  cursor: pointer;
}
#b {
  cursor: not-allowed;
}
#c {
  cursor: wait;
}
#d {
  cursor: zoom-in;
}
#e {
  cursor: help;
}

除了示例，还有很多光标样式，你可以在MDN文档中找到它们。

Text Overflow

现在我们来看看 text-overflow 的问题。如果一个文本容器的内容是从服务器返回的，或者是由用户输入的，那么就很难预测这个文本会有多长。

如果没有任何预防措施，你可能会写出这样的代码。

<head>
  <style>
    .container{
      border: 2px solid red;
      width: 200px;
      height: 60px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="username">码云笔记</div>
    <p class="profile">关注前端开发的技术博客</p>
  </div>
</body>

效果如下：

Text Overflow

这个容器有一个固定的宽度和高度，包裹着名字和介绍。

但如果有些用户的简介太长，就会导致文本溢出容器，使页面看起来很糟糕。

文本溢出容器

在这一点上，我们可以将溢出的文本折叠起来，溢出的部分以省略号展示。做到这一点只需添加三行CSS样式即可实现。

.profile {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

white-space: nowrap; 可以使文本不被包起来。然后我们使用overflow: hidden来隐藏溢出的文本。最后，我们使用 text-overflow: ellipsis 在文本的末尾添加一个圆点，向用户表明有一些隐藏的文本。

隐藏溢出的文本

Image

现在我们来讨论一下图片的风格。网络应用中使用的图片一般由后端提供。你可能已经与后端开发者达成协议，将图片保持在一个固定的尺寸。然后你写下这样的代码。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .img-list {
      display: flex;
      flex-direction: row;
      list-style: none;
    }
  </style>
</head>

<body>
  <ul class="img-list">
    <li>
      <img src="images/1.png">
    </li>
    <li>
      <img src="images/2.jpeg">
    </li>
    <li>
      <img src="images/3.png">
    </li>
  </ul>
</body>
</html>

而网页看起来是这样的：

网页看起来是这样的

图片的排列与我们所期望的一样。

通常情况下是没有问题的。但是当我们写代码时，我们不能假设一切都会按照我们的预期发展。我们需要做好充分的准备。如果后端返回的图片不正常，不符合预期的尺寸，可能大也可能小，那么布局就会被打乱。

这个时候我们替换一张大尺寸的图片，看看接下来的效果。

你会发现，页面突然变得杂乱无章。

杂乱无章

为了防止这个问题，使我们的页面更加健壮，我们可以设置图片的宽度和高度。这样，我们就不必担心后端返回的图片的大小。

img {
  width: 128px;
  height: 128px;
}

设置图片的宽度和高度

但上述写法有一个缺点：如果图像本身的长宽比与我们设定的长宽比不一致，图像将被压缩或拉伸。

为了保持图像的原始长宽比，我们可以使用 object-fit: cover 。

img {
  width: 128px;
  height: 128px;
  object-fit: cover;
}

CSS的 object-fit属性用来设置一个被替换的元素的内容，如<img>或<video>，应该如何调整大小以适合其容器。

如果该值是 cover，那么被替换的内容的大小将保持其长宽比，同时填充元素的整个内容框。如果对象的长宽比与它的盒子的长宽比不一致，那么该对象将被剪掉以适配。

object-fit属性

无图片

我们之前讨论的情况都是建立在我们能够得到图片的前提下。但是，在实际应用中，可能由于后端服务的不稳定，或者用户自身的网络信号不好，我们的网页可能无法正确加载图片。

当图片缺失时，浏览器的默认样式是不优雅的，这里我们可以优化它。

我们可以给 img元素添加一个 onerror 事件。如果在加载图片时出现了错误，那么我们可以通过 onerror事件给该元素添加一个样式，并使用404图片。

img 元素:

<img src="images/404.jpg" alt='fireworks picture' onerror="this.classList.add('error');">

假设这就是我们的404图像：

https://media.mybj123.com/wp-content/uploads/2022/02/1644458517-6c2f7db3328ae69.png

404图像

CSS代码:

img.error {
  display: inline-block;
  transform: scale(1);
  content: '';
  color: transparent;
}
img.error::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #f5f5f5 url('https://media.mybj123.com/wp-content/uploads/2022/02/1644458517-6c2f7db3328ae69.png') no-repeat center / 100% 100%;
}

这样，当 img 元素中的图片链接无法加载图片时，我们的404图片将被使用。

这里还有一点需要优化。在这种情况下，如果原始图片没有被正确加载，用户就不知道这个图片应该是什么。为了方便用户理解，我们可以将 img 元素的 alt 属性显示在页面上。

img.error::after {
  content: attr(alt);
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  line-height: 2;
  background-color: rgba(0, 0, 0, .5);
  color: white;
  font-size: 12px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

假设img的 alt 属性是这样的。

<img src="images/404.jpg" alt='Log of Medium' >

img的 alt 属性

色彩对比度

当你在设计颜色组合时，你是否考虑过页面的颜色对比？

你需要知道，世界上有很多色盲和色弱用户。如果你的页面的对比度低，可能会导致他们无法正常使用你的产品。无论是出于人文关怀，还是出于留住客户的考虑，你都应该设计出合适的对比度。

WCAG AA规范指出，所有重要的内容需要有4.5:1以上的色彩对比度。

这里有一个对比度检查器的工具。

对比度检查器

当然，我们也可以使用Chrome DevTool来检查一个元素的颜色对比。

结语

“细节决定成败”，如果你的项目有很多可以改善用户体验的细节，你就可以让用户使用你的产品时感到舒服，赢得口碑，你就有更高的成功概率。

相关文章阅读：

「点点赞赏，手留余香」

赞 1 赏

给作者打赏，鼓励TA抓紧创作！

微信微信 支付宝支付宝

还没有人赞赏，快来当第一个赞赏的人吧！

标签：
使用声明：
1. 本站所有素材（未指定商用），仅限学习交流。
2. 会员在本站下载的VIP素材后，只拥有使用权，著作权归原作者及码云笔记网所有。
3. 原创商用和VIP素材，未经合法授权，请勿用于商业用途，会员不得以任何形式发布、传播、复制、转售该素材，否则一律封号处理。
4. 本平台织梦模板仅展示和个人非盈利用途，织梦系统商业用途请预先授权。
码云笔记 » 提升用户体验的CSS技巧

码云 会员

分享到：

相关推荐

发表回复

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们