前端提高用户体验不完全指南(CSS篇)

所谓提高用户体验,就是给用户在使用过程中带来方便,比如提高加载时速度,亮眼的色彩搭配,添加动画效果等,那么作为一个卑微前端,可以为提高用户体验奉献些什么呢?

布局优化

css计算属性的使用

前端提高用户体验不完全指南(CSS篇)_第1张图片

这样定左不定右的布局,右侧自然应该适应剩余宽度。

	.left{
		width: 200px;
		height: 100%;
		border: red 5px solid;
	}

	.right{
		width: calc(100% - 200px);
		border: #55007f 5px solid;
	}

再比如这样,把某一宽度平均分成n份 

前端提高用户体验不完全指南(CSS篇)_第2张图片

            .container{
				height: 100%;
				display: flex;
			}
			
			.container div{
				height: 100px;
				width: calc(100% / 7);
				border: #007AFF solid 4px;
			}

滚动优化

scroll-snap-type:属性定义在滚动容器中的一个临时点(snap point)如何被严格的执行。

光看定义有点难理解,简单而言,这个属性规定了一个容器是否对内部滚动动作进行捕捉,并且规定了如何去处理滚动结束状态。让滚动操作结束后,元素停止在适合的位置

前端提高用户体验不完全指南(CSS篇)_第3张图片

	.scroll_box{
		overflow: auto;
		scroll-snap-type: x mandatory;
	}
	
	.scroll_box div{
		scroll-snap-align: center;
	}

图片拉伸问题

打个比方,假如商品列表,商品缩略图宽高比例不一样时,就会出现如下图情况,显然严重不符合审美效果,

前端提高用户体验不完全指南(CSS篇)_第4张图片

这时给图片规定宽高,预览图就变形,不好看了, 

前端提高用户体验不完全指南(CSS篇)_第5张图片

接下来,重点来了,上代码: 

	.goods_item img{
		width: 100%;
		height: 2rem;
		object-fit: cover;
	}

  前端提高用户体验不完全指南(CSS篇)_第6张图片

object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度。

不过就是兼容性差了一点

按钮用户体验

可以加上适当的鼠标移入、点击效果:

	.btn:hover{
		background: #088cff;
		cursor: pointer;
	}
	
	.btn:active{
		background: #000088;
	}

前端提高用户体验不完全指南(CSS篇)_第7张图片

如上图,当点击按钮频率过快时,会选中按钮文字,我们可以这样

    .btn{
        user-select: none;
    }

 前端提高用户体验不完全指南(CSS篇)_第8张图片

 这样无论怎么点击都不会选中文字了,网课期末考试题目无法选中复制就是这样实现的呢。

加载动画

凡是等待加载的时候,都可以用上一些好看的动画,下面是多种css3写的动画,好看吧。戳这里下载

前端提高用户体验不完全指南(CSS篇)_第9张图片

边界保护

边界保护就是给元素边界撑合适的padding值,如下有图,好看得多了。

前端提高用户体验不完全指南(CSS篇)_第10张图片

PC端文字选择优化

正常情况下,我们选择文字是这样的:

前端提高用户体验不完全指南(CSS篇)_第11张图片

但是有时用户或许需要复制整段文字,或者电话号码啥的 ,我们可以这样做,把需要选择复制到一起的内容装到一个元素内,给元素添加下面样式:

	{
		user-select: all;
	}

前端提高用户体验不完全指南(CSS篇)_第12张图片

处理动态文本超长问题:

如下图,显然不符合美观视觉

前端提高用户体验不完全指南(CSS篇)_第13张图片

此时我们可以这样写,文字不换行溢出显示省略号:

{
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width:200px//宽度看具体情况而定,父级限定宽度也可以
}

 前端提高用户体验不完全指南(CSS篇)_第14张图片                   前端提高用户体验不完全指南(CSS篇)_第15张图片

文字多行行溢出显示省略号:

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

图片加载失败处理

前端提高用户体验不完全指南(CSS篇)_第16张图片

 上图左边图片加载失败处理过的。

暂无数据

前端提高用户体验不完全指南(CSS篇)_第17张图片

 写的不合适的地方还望多多指教。

你可能感兴趣的:(css,css3)