像视觉设计师一样思考

10 Sep 2019

探索尝试多个布局

不要单调地只使用居中布局，可以考虑左对齐，或添加一些视觉元素等

选用好字体

几个推荐字体：

• Graphik
• Proxima Nova
• Acumin Pro
• Cerebri Sans
• GT America
• Inter UI ::免费::
• Encode Sans ::免费::
• Work Sans ::免费::

仔细选择颜色

推荐直接在 tailwindcss 中选择 考虑以品牌色作为主题色

圆角

更大的圆角 - 更休闲的设计

使用颜色和字重去制造对比（而不是使用大小）

使用颜色去制造深度

例如一个主输入框，可以使用很浅的灰作背景以制造与背景白的深度差
用背景色制造分割区域：白 / 浅灰 / 深灰 / 主题色之间轮换

在色彩背景中不使用灰色字

改用背景色的浅色

重叠元素，制造多层效果

不要使用过度放大的图标（font）

一般图标设计都缺乏放大后的细节，过度放大后效果不佳 不要过度使用font-awesome
几个推荐图标库：

• Streamline 3.0
• Pixi
• Heroicons
• Heroicons Duo

更多的对齐

像card之类的元素，多尝试使用左对齐

控制形状和尺寸

使用深色模式

更浅的颜色代表前景。
所以使用深色模式时，border应该选用比背景色更深的颜色，而前景中的文字等选用浅色或白色。

避免颜色冲突

如在深色背景中使用圆框头像等元素时，可使用细白边框进行分隔

---

相关资源：
原视频：How to Think Like a Visual Designer - Steve Schoger 一个精选网站设计的站点，可以作为灵感 开源的插图站 本视频演讲者的站点，主题为面向开发者的视觉设计tips 本视频演讲者的Youtube频道