UI-平面设计

分割线

头图设计


  • 从博客文章头图无从下手切入的,以往就是百度谷歌搜关键词,找一个好看的图,但是耦合性太差,想找个流水线式解决方案.

  • 起初是因为看到 @小康博客 的文章头图,感觉很好看,于是去找的方案.

    20210127191714

  • 我发现并没有太过快速的生成器(哈哈哈不能一口吃个胖子)

    • 但是找到了不少好模板网站.

    • 推荐下,我这篇文章用的是可画 网做出来的,我改了改字就可以使用了.

  • 上手时间成本几乎没有,现阶段可以说是最直接有效的解决方案了.

分割线

呈现方式

图大于字

  • 有些情况下,同样的内容,同样的格式性,图片效果还是会更显著
20210226172913 20210226173119

非标准与留白

  • 比如上面的两张图,有毛边效果,用的好的话可以让人眼前一亮(我截的图比较差)

  • 还有留白(padding),下图的留白就不是很好,略小了

    20210226173845

分割线

配色

之前自己调整了一个 vscode 主题, 虽然用了很久了,但总感觉还可以再精进一步

恰逢见到此视频讲解配色,有空修理一番:


色卡

复制到 vscode 就会呈现出颜色

颜色名十六进制RGB
SteelBlue#4682B4rgb(70, 130, 180)
Tan#D2B48Crgb(210, 180, 140)
Teal#008080rgb(0, 128, 128)
Thistle#D8BFD8rgb(216, 191, 216)
Tomato#FF6347rgb(255, 99, 71)
Turquoise#40E0D0rgb(64, 224, 208)
Violet#EE82EErgb(238, 130, 238)
VioletRed#D02090rgb(208, 32, 144)
Wheat#F5DEB3rgb(245, 222, 179)
White#FFFFFFrgb(255, 255, 255)
WhiteSmoke#F5F5F5rgb(245, 245, 245)
Yellow#FFFF00rgb(255, 255, 0)
YellowGreen#9ACD32rgb(154, 205, 50)
蒂芙尼#67c5c4
deeppink
aqua
#39C5BB
#FFC910
#02C3F6

分割线

借物表

暂无…