ui设计b端入门 (ui设计入门必看书籍)

ui新手设计,新手ui设计师怎么做

今天讲的比较轻松喽~

咱们把工具栏剩下的两个小功能说完~然后讲一讲颜色~

操作少些,主要是知道颜色的一些知识点就好~

ui新手设计,新手ui设计师怎么做

工具栏只剩下最后两个就讲完啦~最后这一栏呢,针对的是画布显示,是你操作中用到的观察工具,不会影响图像~

ui新手设计,新手ui设计师怎么做

抓手工具,用途是移动画布,按住鼠标上下左右可以拖拽画布。其实和滚动条是一个作用啦,不过方向任意,好控制些~

我一般很少点这个工具,但是却经常使用,按住【空格】键,会切换成抓手工具,松开就回到原有的工具,是不是很方便= =~

ui新手设计,新手ui设计师怎么做

最后一个~缩放工具,这个就是放大镜啦~我之前讲师父头像栗子的时候用过的~

当你画细节的时候,就需要放大啦~当你想看整体效果的时候,就用缩小~

ui新手设计,新手ui设计师怎么做

来看看选项栏,放大缩小就这里选啦,还有后面的100%、适合屏幕、填充屏幕也挺常用的,PPT啊Keynote都有类似的功能,应该不陌生。

其实说实话,这个工具我也不常点,你们应该猜到啦~

对的,快捷键~Ctrl+是放大,Ctrl-是缩小~

哇哈哈~工具栏终于快讲完了。

接下来咱们说一说颜色~

ui新手设计,新手ui设计师怎么做

1.红色是前景色,白色是背景色;前景色就是不管你弄啥都是这个色,你用画笔画东西是这个,建立形状也是这个,填充颜色也是这个…

2.这个是交换前景色和背景色的,点一下白色就变成前景色,红色变成背景色;

3.快捷恢复默认的前景色和背景色,黑白。

点击一下颜色,会弹出来一个【拾色器】

ui新手设计,新手ui设计师怎么做

这个东西还挺复杂的,咱们一块一块说哈:

1.色域,最右上的圆圈圈就是你选中的颜色,目前这里可以改变颜色的【饱和度】【明暗】,就是水彩里一个颜色加黑加白;

2.颜色取色条,最下面的是滑块,这个条会根据5678区域的改变而改变,H这里是改变颜色的色相,就是水彩里挤出来不一样的颜色;

3.上面是新选出来的颜色,下面是之前的颜色,可以对比,也可以点一下以前的颜色重新选;

4.这个是打印颜色的提示,有叹号说明打印不出来这个颜色,下面是可以打印的最接近的颜色;有的时候还会有个小方块那样的,是网页颜色的提示,不过现在网页基本都能显示了;

5.HSB模式,切换会改变取色条,我最常用的取色模式,H-改变【色相】,S-加白多少,B-加黑多少,见下面动画;

6.RGB模式

7.Lab模式

8.CMYK模式

9.颜色代码,一般给前端标注的时候就是这个,或者是RGB(X,X,X)

ui新手设计,新手ui设计师怎么做

接下来咱们看右上角,【颜色面板】和【色版面板】

ui新手设计,新手ui设计师怎么做

这个很简单啦,【颜色】和刚才说的拾色器差不多,就不说啦~

【色版】就是想要啥色就点啥就好~说下,这里可以新建颜色,可以导入、导出色版,统一化可能有些用,不过我一般用吸管的,觉得这个麻烦哈,看习惯喽~

颜色下边还有两个奇怪的东西,基本用不到。

ui新手设计,新手ui设计师怎么做

蒙版一般我不用这个,之后D9会单拿出来讲用法哈~不着急~

ui新手设计,新手ui设计师怎么做

这个就没啥可说的了,就是软件布局啦,如果你快捷键用的超级熟,可以用全屏模式,我也叫它专家模式,如果误操作了,按一下Esc键就退出来啦~不怕哈~

至此,【工具栏】结束~

下面想说一些题外话,对于UI而言该明白的东西~

什么是颜色?

中学物理我们学过:颜色是通过眼、脑和我们的生活经验所产生的一种对光的视觉效应,我们肉眼所见到的光线,是由波长范围很窄的电磁波产生的,不同波长的电磁波表现为不同的颜色,对色彩的辨认是肉眼受到电磁波辐射能刺激后所引起的一种视觉神经的感觉。

ui新手设计,新手ui设计师怎么做

图为约翰内斯 · 伊腾所创色环色环就是有很多颜色的轮子,将可见光区域以圆环来表示。左下偏冷,右上偏暖。

什么是颜色模式?

细节部分很难理解,你只需要清楚原理:人眼看到的所有物体表面(包括印刷品)的颜色都是减法混色的结果,是白光过滤后形成的颜色。而电脑显示器中的颜色都是由不同光色混合形成的,也就是加法混色的结果。看图:

ui新手设计,新手ui设计师怎么做

这样就形成了两种最常见的颜色模式:

减法混色-【CMYK模式】

加法混色-【RGB模式】

接下来咱们稍微解释一下常见的颜色模式~

【CMYK模式】

C-Cyan-青色;M-Magenta-品红;Y-Yellow-黄色;K-Key Plate(blacK)-关键色即黑色。

CMYK模型针对印刷媒介,即基于油墨的光吸收/反射特性,眼睛看到颜色实际上是物体吸收白光*特中**定频率的光而反射其余的光的颜色。

每种 CMYK 四色油墨可使用从 0 至 100% 的值。 为最亮颜色指定的印刷色油墨颜色百分比较低,而为较暗颜色指定的百分比较高。

【RGB模式】

R-Red-红色;G-Green-绿色;B-Blue-蓝色。

电脑屏幕上的所有颜色,都由这红色绿色蓝色三种色光按照不同的比例混合而成的。一组红色绿色蓝色就是一个最小的显示单位。屏幕上的任何一个颜色都可以由一组RGB值来记录和表达。在电脑中,RGB的所谓“多少”就是指亮度,并使用整数来表示。通常情况下,RGB各有256级亮度,用数字表示为从0、1、2...直到255。注意虽然数字最高是255,但0也是数值之一,因此共256级。

ui新手设计,新手ui设计师怎么做

【Lab模式】

L-Luminosity-明度;a-从洋红色至绿色的范围;b-从黄色至蓝色的范围。

你只需要知道这个模式是PS特有的,就够啦~

【HSB模式】

H-Hue-色相;S-Saturation-饱和度;B-Brightness-明度。

上面讲拾色器的时候我已经说过,我喜欢用这个模式选颜色,因为它很直观~

色相就是颜色的相貌,就是水彩中不同的颜色;饱和度就是颜色的鲜艳成都,饱和度越高颜色越鲜艳,反之,颜色越暗淡;明度就是亮暗、深浅。这个很好理解的~

什么是颜色的对比?

约翰内斯 · 伊滕,包豪斯学派著名艺术家,定义了不同颜色之间的7种对比:明暗对比、冷暖对比、互补对比、同步对比、色质对比、色量对比及色相对比。

不想展开讲了,要讲好多啊,你只需要知道上面色环角度180°的,为互补色就好,红-绿;蓝-橙;黄-紫,是最常见的三对对比色。使用的时候要注意明度、饱和度、面积的控制。

ui新手设计,新手ui设计师怎么做

什么是配色?如何配色?

简单来说,配色就是你的设计稿中出现的所有颜色~

ui新手设计,新手ui设计师怎么做

普遍来说,年轻用户往往喜欢较亮的颜色,上图中三角框出来的区域;

ui新手设计,新手ui设计师怎么做

性别也会决定一部分~

功利一些,选色的依据,最好根据客户或者老板的喜好,察言观色,从身上的特殊颜色、饰品的颜色观察。

配色建议有哪些?

1.设计时,先选3个颜色做基准:

突出色-突显最主要的交互元素;对比色-用来提示重要内容的颜色;底色-大面积出现的颜色,低饱和度,禁止出现大面积艳色。

颜色允许小范围波动,在色盘上的位置不能出现过大偏移,可以改变单调性。

就是说好的配色需要配合面积

2.做Icon、Banner时,多彩色上,禁用纯黑纯白,这样做会使画面柔和,为以后高光、暗部留空间。

3.若非要用大红大绿,饱和度很高的颜色,只有黑白才压得住。

4.多看优秀作品,除了看颜色以外,要注意面积。

-总结-

今天就讲这些~后面的算拓展吧~看的懂最好~

下一讲很!重!要!图层~

今天的课比较轻松喽~

咱们把工具栏剩下的两个小功能说完~然后讲一讲颜色~

操作少些,主要是知道颜色的一些知识点就好~

ui新手设计,新手ui设计师怎么做

工具栏只剩下最后两个就讲完啦~最后这一栏呢,针对的是画布显示,是你操作中用到的观察工具,不会影响图像~

ui新手设计,新手ui设计师怎么做

抓手工具,用途是移动画布,按住鼠标上下左右可以拖拽画布。其实和滚动条是一个作用啦,不过方向任意,好控制些~

我一般很少点这个工具,但是却经常使用,按住【空格】键,会切换成抓手工具,松开就回到原有的工具,是不是很方便= =~

ui新手设计,新手ui设计师怎么做

最后一个~缩放工具,这个就是放大镜啦~我之前讲师父头像栗子的时候用过的~

当你画细节的时候,就需要放大啦~当你想看整体效果的时候,就用缩小~

ui新手设计,新手ui设计师怎么做

来看看选项栏,放大缩小就这里选啦,还有后面的100%、适合屏幕、填充屏幕也挺常用的,PPT啊Keynote都有类似的功能,应该不陌生。

其实说实话,这个工具我也不常点,你们应该猜到啦~

对的,快捷键~Ctrl+是放大,Ctrl-是缩小~

哇哈哈~工具栏终于快讲完了。

接下来咱们说一说颜色~

ui新手设计,新手ui设计师怎么做

1.红色是前景色,白色是背景色;前景色就是不管你弄啥都是这个色,你用画笔画东西是这个,建立形状也是这个,填充颜色也是这个…

2.这个是交换前景色和背景色的,点一下白色就变成前景色,红色变成背景色;

3.快捷恢复默认的前景色和背景色,黑白。

点击一下颜色,会弹出来一个【拾色器】

ui新手设计,新手ui设计师怎么做

这个东西还挺复杂的,咱们一块一块说哈:

1.色域,最右上的圆圈圈就是你选中的颜色,目前这里可以改变颜色的【饱和度】【明暗】,就是水彩里一个颜色加黑加白;

2.颜色取色条,最下面的是滑块,这个条会根据5678区域的改变而改变,H这里是改变颜色的色相,就是水彩里挤出来不一样的颜色;

3.上面是新选出来的颜色,下面是之前的颜色,可以对比,也可以点一下以前的颜色重新选;

4.这个是打印颜色的提示,有叹号说明打印不出来这个颜色,下面是可以打印的最接近的颜色;有的时候还会有个小方块那样的,是网页颜色的提示,不过现在网页基本都能显示了;

5.HSB模式,切换会改变取色条,我最常用的取色模式,H-改变【色相】,S-加白多少,B-加黑多少,见下面动画;

6.RGB模式

7.Lab模式

8.CMYK模式

9.颜色代码,一般给前端标注的时候就是这个,或者是RGB(X,X,X)

ui新手设计,新手ui设计师怎么做

接下来咱们看右上角,【颜色面板】和【色版面板】

ui新手设计,新手ui设计师怎么做

这个很简单啦,【颜色】和刚才说的拾色器差不多,就不说啦~

【色版】就是想要啥色就点啥就好~说下,这里可以新建颜色,可以导入、导出色版,统一化可能有些用,不过我一般用吸管的,觉得这个麻烦哈,看习惯喽~

颜色下边还有两个奇怪的东西,基本用不到。

ui新手设计,新手ui设计师怎么做

蒙版一般我不用这个,之后D9会单拿出来讲用法哈~不着急~

ui新手设计,新手ui设计师怎么做

这个就没啥可说的了,就是软件布局啦,如果你快捷键用的超级熟,可以用全屏模式,我也叫它专家模式,如果误操作了,按一下Esc键就退出来啦~不怕哈~

至此,【工具栏】结束~

下面想说一些题外话,对于UI而言该明白的东西~

什么是颜色?

中学物理我们学过:颜色是通过眼、脑和我们的生活经验所产生的一种对光的视觉效应,我们肉眼所见到的光线,是由波长范围很窄的电磁波产生的,不同波长的电磁波表现为不同的颜色,对色彩的辨认是肉眼受到电磁波辐射能刺激后所引起的一种视觉神经的感觉。

ui新手设计,新手ui设计师怎么做

图为约翰内斯 · 伊腾所创色环色环就是有很多颜色的轮子,将可见光区域以圆环来表示。左下偏冷,右上偏暖。

什么是颜色模式?

细节部分很难理解,你只需要清楚原理:人眼看到的所有物体表面(包括印刷品)的颜色都是减法混色的结果,是白光过滤后形成的颜色。而电脑显示器中的颜色都是由不同光色混合形成的,也就是加法混色的结果。看图:

ui新手设计,新手ui设计师怎么做

这样就形成了两种最常见的颜色模式:

减法混色-【CMYK模式】

加法混色-【RGB模式】

接下来咱们稍微解释一下常见的颜色模式~

【CMYK模式】

C-Cyan-青色;M-Magenta-品红;Y-Yellow-黄色;K-Key Plate(blacK)-关键色即黑色。

CMYK模型针对印刷媒介,即基于油墨的光吸收/反射特性,眼睛看到颜色实际上是物体吸收白光*特中**定频率的光而反射其余的光的颜色。

每种 CMYK 四色油墨可使用从 0 至 100% 的值。 为最亮颜色指定的印刷色油墨颜色百分比较低,而为较暗颜色指定的百分比较高。

【RGB模式】

R-Red-红色;G-Green-绿色;B-Blue-蓝色。

电脑屏幕上的所有颜色,都由这红色绿色蓝色三种色光按照不同的比例混合而成的。一组红色绿色蓝色就是一个最小的显示单位。屏幕上的任何一个颜色都可以由一组RGB值来记录和表达。在电脑中,RGB的所谓“多少”就是指亮度,并使用整数来表示。通常情况下,RGB各有256级亮度,用数字表示为从0、1、2...直到255。注意虽然数字最高是255,但0也是数值之一,因此共256级。

ui新手设计,新手ui设计师怎么做

【Lab模式】

L-Luminosity-明度;a-从洋红色至绿色的范围;b-从黄色至蓝色的范围。

你只需要知道这个模式是PS特有的,就够啦~

【HSB模式】

H-Hue-色相;S-Saturation-饱和度;B-Brightness-明度。

上面讲拾色器的时候我已经说过,我喜欢用这个模式选颜色,因为它很直观~

色相就是颜色的相貌,就是水彩中不同的颜色;饱和度就是颜色的鲜艳成都,饱和度越高颜色越鲜艳,反之,颜色越暗淡;明度就是亮暗、深浅。这个很好理解的~

什么是颜色的对比?

约翰内斯 · 伊滕,包豪斯学派著名艺术家,定义了不同颜色之间的7种对比:明暗对比、冷暖对比、互补对比、同步对比、色质对比、色量对比及色相对比。

不想展开讲了,要讲好多啊,你只需要知道上面色环角度180°的,为互补色就好,红-绿;蓝-橙;黄-紫,是最常见的三对对比色。使用的时候要注意明度、饱和度、面积的控制。

ui新手设计,新手ui设计师怎么做

什么是配色?如何配色?

简单来说,配色就是你的设计稿中出现的所有颜色~

ui新手设计,新手ui设计师怎么做

普遍来说,年轻用户往往喜欢较亮的颜色,上图中三角框出来的区域;

ui新手设计,新手ui设计师怎么做

性别也会决定一部分~

功利一些,选色的依据,最好根据客户或者老板的喜好,察言观色,从身上的特殊颜色、饰品的颜色观察。

配色建议有哪些?

1.设计时,先选3个颜色做基准:

突出色-突显最主要的交互元素;对比色-用来提示重要内容的颜色;底色-大面积出现的颜色,低饱和度,禁止出现大面积艳色。

颜色允许小范围波动,在色盘上的位置不能出现过大偏移,可以改变单调性。

就是说好的配色需要配合面积

2.做Icon、Banner时,多彩色上,禁用纯黑纯白,这样做会使画面柔和,为以后高光、暗部留空间。

3.若非要用大红大绿,饱和度很高的颜色,只有黑白才压得住。

4.多看优秀作品,除了看颜色以外,要注意面积。

-总结-

今天就讲这些~后面的算拓展吧~看的懂最好~

下一讲很!重!要!图层

下面是作品的时间。

ui新手设计,新手ui设计师怎么做

ui新手设计,新手ui设计师怎么做

ui新手设计,新手ui设计师怎么做