共计 1931 个字符，预计需要花费 5 分钟才能阅读完成。
我的本职工作是后端开发工程师，记不清从什么时候开始对「设计」产生了兴趣，可是对「设计」领域知识的学习由于从小就受到固有思维的影响，甚至受到很多不正确教学方法的误导，在学习的过程中很容易让人产生自我怀疑，特别是对天赋的自我怀疑，从而慢慢的主动放弃。
本文结合自己的学习经历，从「什么是设计」开始切入，引出何选择设计工具，如何画下设计的第一笔以及随之而来的其他基础设计问题。希望这篇关于学习设计最初级的心得体会能给那些曾经跟我有类似兴趣的朋友们一些学习上的参考。
如果想成为一名高级的、或者艺术家级别的设计师肯定需要天赋。但是，对于大多数为了完成工作或者实现自己想法的基本设计能力完全可以通过自学学会的。
什么是设计？
“设计是努力使 现况 接近 期望 的探索过程”，- by 著名建筑设计师：姚仁禄。与百科词条中对于“设计”的解释相比，我更喜欢姚先生的版本，言简意赅，直击重点。
好的思想都是相通的，不管是建筑领域还是互联网领域，对我们学习 Web UI 设计同样受用。
设计并没有标准答案，通常也不是一步到位，好的设计作品大多是不断演化而成的。
因此先认清现况是一个很有必要的步骤，能够帮助我们制定出更合理的期望 / 目标，避免好高骛远。
本文以「如何学习 Web UI 设计」为例子：
- 假定我们的现况 / 水平：新手
- 制定出具体的期望 / 目标：设计一个博客网站
- 最后，也是最重要的过程就是：付出实际行动，一步步将这个目标实现
如何选择设计工具
上一步已经确定了目标，下一个随之而来的问题就是：选择什么样的设计工具？
我很喜欢”随之而来“这个词，有些东西不需要刻意，只要你把 当下 想清楚之后，未来 会主动找上门。设计工具有很多，Photoshop，Sketch，Adobe XD 等等甚至还可以直接用纸笔。
对于初学者的建议是：以最快的速度确定一款设计工具，哪怕是通过点兵点将、扔筛子的方式，重点是快速做出选择，然后付出行动，动手操作。
初学设计的时候我也很纠结，看了很多工具对比文章，甚至去看国外分享的工具对比视频。但是，当我真正开始动手去做一个实实在在作品的时候，发现设计的思想才是重点，工具之间无非就是有些软件对某些操作比较方便而已，等你亲自动手做过一次完完整整的设计作品之后就会发现，即使下一次做设计想换到其他工具也是很容易上手的。
如何在空白页面画下第一笔
我们将要设计的博客网站最终需要在浏览器上显示，由于显示器屏幕有非常多的规格大小，小到手机上的浏览器、主流桌面浏览器、大到接近电视的超宽屏显示器
面对这么多的载体，会有很多问题随之而来：
- 如何让我们的网页能够在不同尺寸上都有比较理想的显示效果？
- 页面上的内容应该居中对齐，还是左对齐，右对齐？
- 如果是左对齐，应该距离左边多少？
- 如果是右对齐，应该距离右边多少？
- …… 等等
这些问题可以通过开启 网格辅助线 的方式解决，辅助我们做设计
随之而来的其他问题
有了网格系统辅助我们做设计，可以大胆的画下第一笔。
可是，第一笔之后又有很多问题随之而来：
如果你第一笔写的文字，文字的字体、字号、颜色等等问题随之而来
如果你第一笔画的是形状，形状边框样式，背景颜色，阴影等等问题也会随之而来
一旦你开始第二笔，两笔元素之间的间距、对齐方式等等问题立刻紧随其后
这些问题是新手做设计最头疼的问题，是最容易产生自我怀疑的设计阶段。我在自学设计的过程中，也是参考了无数资料，做了大量练习，总体的解决思路无非下面一张图所示：
以颜色为例：
-
如果你有经验，这里说的有经验包括以下几种情况
- 不管经验是来自以往的设计经验，还是衣服搭配等等，只要你可以确定出自己最想用的颜色，就可以尝试用这种颜色及其衍生色做设计中的主要颜色
- 公司的产品已经有品牌色
- 来自其他的，任何可以让你不需要纠结就能确定出颜色的都属于有经验
-
如果你没有任何经验
- 从现在开始，养成一个习惯：将平时看到的，自己喜欢的网站，收藏起来。收集资源是一个长期的过程，不一定等到要用了才去找
- 从上一步收集的资源中，挑选出你最想要的配色或者变体色
- 如果你不想参考任何其他网站的配色，那就用最简单的白底黑字去设计，但是记住一点：并不是只有纯净的黑与白，黑白之间还有很多不同等级的灰度色可以使用
动手操作
设计是一门需要持续动手实践的技能，意淫多少篇都不如亲自动手实操一遍来的实在。
当你真正亲自动手做一次设计之后就会发现，哪怕只是设计一个简单的博客网站，也会遇到设计过程中 90% 的常见问题，而且这些问题跟你选择什么样的设计工具没有任何关系，重点在思想。有了想法之后，通过不断练习丰富自己的经验，同时完善自己的设计思想。
我已经将文章开头定下的「设计一个博客网站」的目标实现了，点击下方的链接查看完整实现过程
从 0 开始学设计、并将设计稿转成 HTML + CSS + JS
同时学习「设计」与「前端开发」基本技能