”复制粘贴语录“是一个用vue写的网站。用了element-plus组件库。

一开始的网站主页是这样的

就是一个很普通的页面。

现在的主页是这样的

是不是看起来现代化了很多？

那么为什么会有这种效果呢，下面来说说我的ui设计理念。

阴影的使用

给卡片、按钮、输入框等组件加上阴影效果，会有层次感。

阴影不能太浓，并且要扩散得范围大一点，这样比较有质感。

大圆角

给卡片、按钮加上大圆角会比直角更有灵性。

直角卡片会显得很死板，适合商务网页。

对比度低的配色

如果想不好用什么配色，就用黑灰这种对比度低的配色，绝对不会出错。

减少线条的使用

使用线条分栏会有一种很乱的感觉，并且层次感不明显。

推荐几个UI库

NextUI (React)

https://nextui.org/

TDesign

https://tdesign.tencent.com/

OMIU (Omi)

https://omi.cdn-go.cn/omiu/latest

以上几个ui库都是我觉得比较好看的。