前端页面设计舒适度基础指南，网页设计避坑速成

iCE_CUBE_

已于 2023-01-18 13:04:27 修改

阅读量333

点赞数

文章标签：前端 css 设计规范 css3

于 2023-01-17 15:57:59 首次发布

本文链接：https://blog.csdn.net/m0_50795881/article/details/128716397

版权

前言

该文章内容非常基础，偏向设计小白。
网页的设计可以从三个方面进行，第一是界面设计，第二是界面动画设计，第三是界面交互流畅性设计。其中第三点的重要性主要体现在移动端设备上

界面设计丨

优化丨

颜色丨
无论是页面的黑暗模式还是亮色模式，都非常不建议使用#000纯黑底和#FFF纯白字或相反。略微降低黑白的对比度，能起到不小减少视觉疲劳、提高阅读性的效果。建议使用#121212替代黑，#FAFAFA替代纯白。

表单丨

浏览器自带的表单样式真的很丑。

在Apple设备上与edge上的表单有着不同的默认样式，建议自定义CSS取代默认样式，不同浏览器的同一个表单或许会有不同的显示效果。

Safari的表单默认样式最多，按钮有大圆角，黑灰边框，蓝色字体等属性
edge上相对来说更少，所以只需要适配Safari后其他各平台的显示效果就会一致了。

针对解决表单的问题，我制作了一个4kb的微型CSS表单框架，有需要的同学可以在文章底部链接下载。

留白丨

不会留白的页面看起来紧凑、絮乱、甚至无法阅读，学会留白使页面看起来更加整洁，学会适当给他的内部空间加一些内边距。

字体丨
字体大小一般设定为为14px/16px/18px。
免费商用字体建议使用思源黑体、鸿蒙sans、钉钉进步体。（也推荐微软雅黑，但注意微软雅黑原则上不允许商用）

其他丨 对没有学习CSS3的同学说

  CSS不推荐使用Float浮动，推荐使用flex取代.

  float会使元素脱离文档流，造成元素塌陷，且分辨率更高后极易造成页面崩坏，一个元素遮挡另一个元素的现象，或者元素直接消失.

  而flex完全可以取代float，flex更易于适配所有设备的分辨率，能够很好的避免页面崩坏，更不会出现遮挡元素的现象。

界面动画丨

给页面设计一个好的界面之后，就要在动画上做功夫了，可以从鼠标悬浮时、页面滚动时、页面进入时加入动画。

Tips：CSS3中，给元素的CSS添加属性:
transition:(动画类型) (持续时间)(动画速度曲线) (动画播放延迟);
即可在CSS属性发生变化时有一个过渡的效果。例：
transition:all 0.5s ease 0;

鼠标悬浮丨
通常情况下可以设计元素放大、出现阴影、出现描边、改变颜色等效果

页面滚动丨
通常使用位置变化+透明度变化等效果

进阶动画丨
仅仅使用改变CSS属性实现的动画是有局限性的，若想实现类微软官网的页面的MG动画，建议深入了解一下前端的lottie插件与AE的bodymovin插件。实现AE沟通开发。

页面交互流畅性丨

主要体现在动画的跟手与凝练，过多的动画会导致动画冗余。

动画要尽量避免影响到页面的交互，造成“我想点击这个按钮，但是我要等你播完才能点”。
例如我在微信点击了一个好友的聊天界面，但是我反悔了，这时候我会疯狂点击左上角的返回，但我还是必须要等到进入动画播完才能返回。

如果能实现动画未播放完毕就能直接返回的话，网页流畅性会大大提高。