UI-平面设计

• UI-平面设计
  • 头图设计
  • 呈现方式
    • 图大于字
    • 非标准与留白
  • 配色
    • 色卡
  • 借物表

头图设计

• 一张好看的图片能有啥效果?

  • [x] 吊起胃口
  • [x] 引人入胜
  • [x] 图片养眼
  • [x] 吟唱施法

• 于是,找到个比较中肯的知乎问答:

  微信公众号推送封面如何设计制作？

---

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

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

  

---

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

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

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

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

呈现方式

图大于字

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

---

非标准与留白

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

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

  

配色

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

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

---

色卡

复制到 vscode 就会呈现出颜色

颜色名	十六进制	RGB
SteelBlue	#4682B4	rgb(70, 130, 180)
Tan	#D2B48C	rgb(210, 180, 140)
Teal	#008080	rgb(0, 128, 128)
Thistle	#D8BFD8	rgb(216, 191, 216)
Tomato	#FF6347	rgb(255, 99, 71)
Turquoise	#40E0D0	rgb(64, 224, 208)
Violet	#EE82EE	rgb(238, 130, 238)
VioletRed	#D02090	rgb(208, 32, 144)
Wheat	#F5DEB3	rgb(245, 222, 179)
White	#FFFFFF	rgb(255, 255, 255)
WhiteSmoke	#F5F5F5	rgb(245, 245, 245)
Yellow	#FFFF00	rgb(255, 255, 0)
YellowGreen	#9ACD32	rgb(154, 205, 50)
蒂芙尼	#67c5c4
deeppink
aqua
	#39C5BB
	#FFC910
	#02C3F6

借物表

暂无…