当前位置：网站首页>提高用户体验防御性编程

提高用户体验防御性编程

2022-07-02 06:20:00 【沉迷...】

提高用户体验

页面呈现+注重细节的交互设计+完善的可访问性+性能 = 良好的用户体验

用户体验是可以被提升的 ,而且并不难
良好的用户体验设计, 是产品每一个环节共同努力的结果
提升用户体验也不是能够一蹴而就的,在不同的细节发力积少成多

防御性编程

防御式编程的主要思想是：子程序应该不因传入错误数据而被破坏，哪怕是由其他子程序产生的错误数据。这种思想是将可能出现的错误造成的影响控制在有限的范围内。

文本超长处理

单行文本超出省略

  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

多行文本超出省略

  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

预留保护边界

考虑各种异常情况的处理 , 使用min-width却没考虑到按钮过长的情况

给按钮添加

padding-left :16px;
padding-right:16px;

图片展示-- 同时设置宽高

尽可能的给图片设置宽高防止布局错乱

img{
    
    width:150px;
    height:100px;
}

指定高宽也会出现问题,譬如图片被拉伸了

有可能出现客户上传的图片大小不符合现有配置

// 利用object-fit :cover,使图片内容在保持其宽高比的同时填充元素的整个内容框 img{
    
    width:150px;
    height:100px;
    object-fit:cover;
}

响应式图片-- 适配不同DPR

标签提供的属性srcset 让我们适配不同的DPR,给不同DPR的屏幕提供最适合的图片

<img src='[email protected]' srcset='[email protected] 1x,[email protected] 2x,[email protected] 3x' />

<img src='photo.png' sizes='(min-width:600px) 600px, 300px ' srcset='[email protected] 300w,[email protected] 600w,[email protected] 1200w' />

在css中, 有多倍图需求的,同样可以利用image-set 标签进行多倍图适配提供最适合的图片:

.box {
    
    background-image: image-set(url('[email protected]') 1x, url('[email protected]')2x,url('[email protected]')3x);
}

图片丢失同时展示兜底图与描述信息

做法

利用图片加载失败, 触发元素的onerror事件, 给加载失败的元素新增一个样式类
利用新增的样式类, 配合元素的伪元素,展示默认兜底图的同时 ,还能一起展示元素的alt信息

<img src='test.png' alt='图片描述' οnerrοr='this.classList.add('error')'
     
 img.error {
     position:relateive;
     display: inline-block;
 }
img.error::before {
     content: "";
     background: url(error-default.png)
     }     
 img.error::after{
     content:attr(alt)
     }

动画够迅速

缓慢的动画产生了不必要的停顿

保持过渡动画简短因为用户会频繁看到它们让动画持续时间保持在300ms或更短

操作便利点击区域优化

不改变按钮原本大小的情况下,增加按钮的点击热区让用户的操作更加便利

btn{
    
    border: 10px solid transparent;
} //利用透明的 border //利用伪元素 btn:: before{
    
    content:'';
    position: absolute;
    top:-10px;
    right:-10px;
    bottom:-10px;
    left:-10px;
}

操作便利–快速选择

在一些需要复制粘贴的场景, 利用 user-select: all 快速选择某段文本

选取优化 --禁止选择

利用 user-select:none样式将不可被选中元素设置为不可被选中

按钮跳转优化

让鼠标支持右键打开新页面

合理运用:focus-visible

:focus-visible: 可以有效地根据用户的输入方式(鼠标vs 键盘) 展示不同形式的焦点

button: active{
    
    background: #eee
}
button:focus{
    
    outine: 2px solid green;
}
button:focus-visible{
    
    outline: 2px solid red;
}
// focus-visible 兼容性写法 button:focus:not(:focus-visible) {
    
    outline:none;
}