有呀，有呀，设计！有呀，有呀，组件！

有呀，有呀，设计！

最近看了一本关于设计的书《有呀，有呀，设计！》，受到了启发，想做一个类似于有呀，有呀，设计 的 有呀，有呀，组件，旨在提供给前后端开发人员开箱即用的组件，尤其是UI组件，与样式有关的组件，更多的是为后端人员考虑，减轻后端开发研究组件样式的苦恼。

如果没有UI设计提供的设计图，那么前后端在开发时就会陷入困境，逻辑我会写啊，功能能实现啊，但是页面展示的好丑哦，怎么都看得不顺眼，怎么调样式才能好看呢，反复地调样式最终也不满意，于是我花了很多的时间，看了很多设计类相关的书籍，正在尝试开发一个网站，对于没有设计图的前后端来说，页面该怎样配色，怎样布局，怎样搭配才能赏心悦目，令人心情愉悦，我觉得这件事情很有意义，就尝试去做了，目前项目在github上开源，地址是color-library，还在开发中，有兴趣的小伙伴可以关注一下，顺手点个star也不是不可以~

下面摘录一下《有呀，有呀，设计！》这本书里的精华吧，对于苦恼于设计的我来说，真的帮助很大，也学到了很多。

有一些能使版式设计更好的方法,至今还没有专属用语。
于是，我们把这些方法统一叫作“有呀，有呀，设计！”。
啊，有呀有呀，我确实看到过这个设计！
为了让大家在感叹“有呀有呀”的同时，记住对应的设计用语，
我们决定立马制作这样一本书。这么一来，就会出现下面的情景：
对啦，这里就用“圆形效果”吧。
这里的话，“一般用双色调搞定”。
啊，也许可以“两张照片并排”。
就像上面这样，通过把设计用语说出口来回想，
大家便可以简单快速地做设计。
而且,技能“存货”也会越来越多！
基于这一出发点,我们想出了“有呀有呀用语”。

本书将那些会让你不假思索地感叹“有呀，有呀，我以前确实见过！”的版式特征，整理总结成45个设计用语，每个设计用语设置4页篇幅和6个范例搭配相应解说来介绍。

1. 一般用双色调搞定
2. 圆形效果
3. 整体围粗框
4. 左起四分之一法则
5. 散放三角形
6. 画线分段
7. 半透明背景
8. 倾斜效果
9. 小字装饰
10. 活用插画
11. 漂亮的拱形
12. 四周留白最棒了
13. 字间留空排列
14. 加一根极粗线条
15. 文字添框线
16. 带状底纹生韵律
17. 对话框打造亲近感
18. 溢出效果
19. 铺上条带即可
20. 自然地镂空文字
21. 斜线切分
22. 聪明的网格设计
23. 不知如何设计？使用条纹
24. 只要有单色照片就行
25. 可爱手绘文字
26. 形似标志设计
27. 各式框架
28. 凝练的渐变
29. 手写字体增添魅力
30. 居中摆放正方形
31. 软乎乎的挖版效果
32. 白色背景上放切好的图片
33. 文字点缀
34. 照片大块留白
35. 水珠花纹点缀
36. 重复重复再重复
37. 使文字灵动起来
38. 文字贴近版面边缘
39. 添置多幅照片
40. 不显全貌，若隐若现
41. 错开框架
42. 用文字作框架
43. 用装饰性线条，营造气氛
44. 文字跨越排列
45. 两张照片并排