写给学弟学妹的经验分享，本教程适用于热爱设计但是毫无基础的小朋友，如果你身在学校设计部门，但是做设计纯凭想象，没有章法，那么恭喜你，下面的全都是干货！

借用《写给大家看的设计书》开篇的一个小故事：有一种树其实很常见，人们不知道它名字的时候，却会忽略它的存在，但一旦知道它的名字，就会很容易注意到它。

其实做设计也是一样的道理，想要快速入门，首先得了解做设计的基本规则，掌握它，拥有它，才能在设计过程中信手拈来，融会贯通。

做设计，如何快速入门？接下来，我将从基础工具、常用网站、设计原则、平面基础四个部分进行讲解。

一、基础工具

说到设计基础工具，当然是PS和AI了，PS是强大的位图处理工具，修图、合成样样精通；AI是强大的矢量图形处理工具，主要用于绘制图形、画插画等，图形可以随意放大缩小而不会失真。

-Adobe Photoshop CC2017(win+mac+破解)：

链接:http://pan.baidu.com/s/1kUNlHzx  密码:ryak

-Adobe Illustrator CC2017(win+mac+破解)：

链接:http://pan.baidu.com/s/1o8ObPqE  密码:b5a6

#工欲善其事，必先利其器，设计入门的当务之急当然是拥有一套设计软件，以上链接仅供初学者练习使用，还是建议大家在官网购买正版。

关于设计软件的基础教程，给大家安利优设旗下的优优教程网，知识树系列合集特别基础和实用，相信会对初学者有很大帮助！

知识树系列！最容易听懂的PS零基础入门教程合集：

https://uiiiuiii.com/photoshop/12121781.html

知识树系列！最容易理解的AI零基础入门教程合集：

https://uiiiuiii.com/illustrator/12122680.html

二、常用网站

以上是我常用的一些网站，推荐给你们。其实设计类的网站真的有太多太多，但本教程针对的是初学者嘛，所以这些完全hold得住的！

我推荐的网站基本上是国内浏览无障碍的（除了P站 Pinterest在国内被禁止访问了，但它作为花瓣的爸爸质量确实高出很多，所以感兴趣的朋友还是可以想办法逛一逛）。

三、设计原则

设计原则板块，主要参考了《写给大家看的设计书》部分内容，以及优设上一篇教程文章《设计易容术！如何设计一张高品位高水准的海报？》，原文地址：http://www.uisdc.com/design-high-end-poster。

先祭出设计四大基本原则：对齐、亲密、重复、对比。

01 对齐

对齐原则，我认为是做设计的最基本原则。所有的设计都是有设计师的逻辑在里面的，虽然有的逻辑一般人可能看不懂，但是如果你在设计图上画线，你会发现所有东西的布局都是有迹可循的，这个“迹”就是【对齐】。

题外话：我们做UI，也是一开始先建立栅格，在有规范的基础上，再进行如何破如何立，如何满足视觉和用户体验。

对齐原则使我们设计的各个元素之间有了更好的联系，它会向读者传达我们想要表达的意思。所以，【对齐】就是让设计变得合理的基础，而实现的方法也很简单，那就是：养成使用参考线/参照物的习惯。

-PS里面先Ctrl+R调出标尺，鼠标在上方或左侧的标尺上拖动下来就可以建立参考线了。

-AI里面除了拖动以外，还可以画任意形状，右键选择“建立参考线”，这样你就得到了一个或圆的或方的或斜的，反正很好用的参考线。

以这两张名片为例，我们来看一下对齐与否的差别。

左边这张名片，看上去杂乱无章，信息就像是随意堆砌上去的。这里所有元素都与名片上其他元素没有关联。

右边这张名片，把所有元素都移至左侧，使它们按同一种方式对齐，现在信息立刻就更有条理了，读者能一眼就知道哪些信息是在同一组的，能轻易提取出关键信息，对齐原则使这张名片更加“有效”。

对齐原则除了适用于文本对齐方式之外，还适用于图文排版时的内在逻辑。

有时候文字不美，别怪文字不好看，有可能是你没放对地方！找到通过寻找元素之间的关系，你会发现，文字应该摆放在什么位置。

02 亲密

对齐原则除了适用于文本对齐方式之外，还适用于图文排版时的内在逻辑。

有时候文字不美，别怪文字不好看，有可能是你没放对地方！找到通过寻找元素之间的关系，你会发现，文字应该摆放在什么位置。

有相关联系的元素组织在一起，就会成为一个视觉单元，这样设计的好处是：

（1）页面会变得井井有条。

（2）阅读顺序更人性化，读者知道该从哪里开始到哪里结束，不必重复阅读以防遗漏信息。

（3）留白变得更有组织，让读者感到舒适和轻松。

（1）页面元素的亲密安排

        上方卡片的布局，五个元素是孤立的，阅读顺序通常是从中间开始，因为它的字号最大，但接下来由于元素太散，页面布局不能很好引导读者的目光，所以读者可能会重复阅读这些信息，防止遗漏，增加了读者的时间成本和思考成本。

        但在利用亲密原则之后，下方卡片的阅读顺序清晰明了，能更清楚地传达我们想要表达的信息了。

（2）元素及所属元素的亲密安排

        观察上图中的圆点与相关联的文字之间的距离，中间一列的圆点离左右文字间距很平均，看不出圆点与文字是否有联系。

        但如果我们让圆点与对应的文字之间的间距缩小，让两列院系之间的间距放大，就能够辨认出它们之间的所属关系。

        所以亲密原则有一个简单的小技巧：利用间距体现亲密关系，进行合理划分。

（3）元素及所属元素的亲密安排

        观察上图中的圆点与相关联的文字之间的距离，中间一列的圆点离左右文字间距很平均，看不出圆点与文字是否有联系。

        但如果我们让圆点与对应的文字之间的间距缩小，让两列院系之间的间距放大，就能够辨认出它们之间的所属关系。

        所以亲密原则有一个简单的小技巧：利用间距体现亲密关系，进行合理划分。

03 重复

上图的排版很平淡，缺少层次感，让人不愿意深入阅读，尽管用到了对齐原则，但画面依旧不好看。

川外学生之家公众号很多推送的排版都存在这样的问题，下面让我们用重复原则对画面进行修改。

修改后的排版解决了信息阅读的问题，让重点更为突出，分组更为明显。

重复的标题颜色和加粗的样式，使整个画面更和谐统一。

除了统一标题样式，我们还可以添加图标或图片来辅助阅读，使文案内容可视化。这也是做设计时为了避免文字过多，内容无聊，而常用的方法。

04 对比

设计四大基本原则的最后一点，对比。

对比就是要避免页面的元素过于相似，对比是解决设计太单调的一大法宝。

以这张banner为例，一家人站成一排，大人们身高都差不多，但小朋友在画面上明显比他们个头小，这时形成的对比，突出了小朋友的俏皮和可爱，而且在她上方空出的位置上，还巧妙地成为了文案的放置地，也让亲情这一主题更为突出。

再来看下这张banner，是不是“数据”和“创新”两个词与其他的文案形成了鲜明的对比？

这就是利用字体和字号差异形成的对比。

下面这张banner，也是把主文案的字号放大、加粗，再在下方添加与绿色互补的橙色进行对比，突出主题，利用字号和颜色吸引读者视线。

我们在做学生之家公众号banner的时候，也可以借鉴这种方式：左图右文格式，把文案分重要级别、按亲密原则进行分组，再利用对比原则对文案进行加工，找到合适的对齐方式，最后整理出重点突出，画面干净利落的banner图。

这两张banner截图自UI中国的首页，好的banner总是能让人眼前一亮，然后自觉截图保存下来（因为banner具有时效性，第一张图是我几周前截的，第二张图是我昨天截的）。

我们先来看看第一张banner，在对主标题进行突出展示之外，他还用了哪些对比方式呢？

显而易见的，是色彩的对比，首先，“自古红蓝出CP”，哈哈，红色和蓝色一向是很搭的。红色和橙色是相似色，他们在一起会显得很和谐。而红色和绿色是互补色，也就是撞色，碰撞在一起会产生强烈的对比，谁说红配绿丑得哭？那是他们没见过世面。

然后还有点线面的对比，以及形状的对比，总之就是666。

下面这张banner，在深灰色的背景之上用了高饱和度的黄色，这是对比之一；黄色和绿色，这是对比之二；众多黄色的圆中间，一个绿色的发光苹果，这是对比之三；当然还有点线面的对比、字体的对比，视觉元素的布置等。

介绍完了设计的四大基本原则，我们来看一段五分钟的视频，以加深印象。

视频链接：https://www.bilibili.com/video/av12370274/

四、平面基础

掌握了这四个基本原则，就相当于掌握了最基本的排版与构图逻辑，除此之外呢，做设计想要快速入门，还需要补充一些平面基础，比如点线面、字体和色彩。

因为是比较基础的平面知识，我主要给大家推荐三个基础视频来了解。

基础要素视频：http://www.bilibili.com/video/av12389045/

字体基础视频：http://www.bilibili.com/video/av12368230/

色彩原理视频：https://www.bilibili.com/video/av12369672/

平面基础要素：线、形状、图形、肌理、平衡。

01 线

02 形状

03 图形

04 肌理

05 平衡

学会欣赏每一个设计作品的小细节！

关于字体，大家主要掌握有衬线和无衬线两个类型就好，有衬线和无衬线的区别主要就是宋体和黑体的区别。

关于配色，相信很多同学都比较迷茫，但我们想要入门呢，至少要达到当你做设计的时候，定下了主色调，你心里会清楚应该用什么色去配搭它的级别。

所以我建议大家一定要掌握三原色、相似色和互补色是哪些，其他的颜色其实看色盘是能够分辨得出的，所以色彩虽然纷繁复杂，但我们掌握了根源，之后的一切都可以慢慢推导和实践，在不断的积累中形成自己的色感。

我配色的做法一般是：1、先定基调（根据画风和需求，选择合适的主色调，这里涉及到颜色的性格的知识，比如红色一般代表热情，蓝色一般代表忧郁之类的），2、寻找搭配色（这里要根据你自己的设计意图，决定是寻找相似色，让画面比较统一但也有层次感；还是寻找互补色，让画面视觉感强烈，形成对比，突出重点），3、调整颜色的饱和度，使颜色搭配时显得和谐。

小练习：根据设计四原则，对上图排版进行改造。

# 我会在本周四2017年10月19日，上传范例到UI中国，请大家做完练习自行对比、总结和吸收设计四原则，尽量做到在以后的设计中，心中有原则。

——————————————————————————————————

最后，干货！

1、《写给大家看的设计书》高清扫描版

链接:http://pan.baidu.com/s/1jI5T082  密码:0a7h

2、免费商用字体

链接:http://pan.baidu.com/s/1pLmM3ov  密码:3a7o

——————————————————————————————————

划重点了#第一周作业#：

① 观看PS和AI教程（至少看完AI的前八节，下次课要实战）。

PS 教程https://uiiiuiii.com/photoshop/12121781.html

AI 教程https://uiiiuiii.com/illustrator/12122680.html

② 根据今天讲的四原则(对齐 重复 亲密 对比)，完成“原则练习.psd”的排版。

下载链接：http://pan.baidu.com/s/1jHCyTMY

③川外学生之家banner改版，星期五下午六点前提交。

④下周课程预报：字体设计和LOGO设计，软件：AI。