我是你们讲的西瓜 ，我们这节课学习的是 ux 系列课里面的好用的视觉剖析模型 ，我们这节课核心知识点是讲解关于我们 ux 设计在本职工作里面的视觉设计啊 ，视觉剖析的一个分析法 ，呃 ，这个我们这节课呢 ，需要套用一个模型 ，但是模型是一个最终的结论 ，我们在剖析的过程中还需要一些技巧方面的东西 ，所以同学们这节课注重重点 ，还是要学习老师教给大家的这个剖析的一个手段技法 ，这个最终 ，然后套到这个模型里就可以了 ，那么我们先来看一下第七节课这个课的大纲 ，我们这节课一共分为四个阶段 ，首先第一个 ，同学们要知道视觉剖析模型的主要作用 ，它是有什么用 ，它起到一个什么的作用 ，其实这个也是同学目前应该听到最好理解的一个课程啊 ，一节课 ，因为视觉剖析很简单 ，顾名思义 ，它就是对我们的界面设计进行一个视觉方面 ，就是好看与不好看的一个剖析的一个手段 ，对不对 ，所以说我们待会具体的把这个讲一下 ，啊 ，但是草草而过 ，我们具体讲一下下面的东西 ，第二个就是视觉剖析的一个基础标准 ，这个地方我们需要讲解到视觉剖析的一些啊核心的一些标准 ，如何以这种标准来基础之上啊 ，这个是一个底级 ，如果在这个标准之上 ，我们去进行一个呃视觉剖析 ，怎么去定位它到底好还是不好 ，它必须要有一个评判标准 ，也需要有一个可以量化的东西 ，对不对 ，所以我们要有一个基础标准 ，那么第三节呢 ，就会讲到一个如何进行产品的一个视觉剖析 ，这个地方呢 ，就会讲到具体的呃 ，视觉剖析的一个作用 ，那么过程中会给大家去实际的操作一下 ，到底是如何进行的 ，同样也附带了一些实际讲解的一些样式给大家看 ，那么最后一个就是产品剖析的结论 ，如何产出结论 ，方便我们的上下游 ，如果公司有多个视觉设计师的话 ，

那么一定会用到这个结论法 ，那么一个人的话 ，如果只是你孤军奋战的话 ，可能你呢自己会比较好理解 ，但是你如果给别人上线有用的话呢 ，那个这个结论是非常有用可行的 ，好 ，首先我们先来看一下视觉剖析的作用 ，视觉剖析的作用啊 ，老师这个地方给大家呢统计了一句话 ，通过一句话来帮助大家总结这个意思 ，它的概念就是说帮助我们设计师能通过表现层的某些指标啊 ，也就是这些指标来分析我们界面视觉的一个好与坏 ，并且可以找出竞品与我们自己产品的差异性 ，所以说我们这个地方视觉剖析的作用也就分为两大核心知识点 ，第一点 ，我们帮助我们自己清楚 ，通过视觉的表现 ，能清楚地知道哪些地方是好的 ，哪些地方是差的 ，这是评判标准 ，一 ，那么第二个评判标准是帮助我们找到竞品对手的产品和我们自己的产品之间存在的差异化 ，这样也方便我们对界面呢进行一个二次视觉的一个优化 ，对不对 ，所以说视觉剖析最主要的就是帮助我们进行一个分析视觉的好坏 ，这样也是对我们自己的一个能力的一个考考定 ，对吧 ，那么这个剖析模型呢 ，最主要的核心点不会变的地方 ，就是在左侧这个纵向坐标 y 轴这一块 ，那么通过色彩 ，色彩的包含主辅色 ，那么其他的搭配色和说明色这个地方我们就大致就草草而过 ，就不具体讲 ，因为整个的产品来说的话 ，其实最核心的知识点就是主色和辅色 ，主色和辅色是最方便 ，也是最快速帮助用户理解产品的核心调性的一个地方 ，所以说色彩的主角色是非常重要的 ，然后就是图标的风格 ，它代表了整个界面的一个视觉形象 ，

那么还有图片的风格 ，图片的风格对于用后来说 ，是方便用户更好地理解你的产品风格 ，以及图片的里面的一些内容含量的东西 ，对不对 ，所以图片也是非常需要去学习的 ，风格的一个分辨 ，还有一个是排版风格 ，还有界面的布局啊还有组件 ，还有核心的页面 ，呃核心页面指的就是比如说呃非常主要的一些流程的一些页面 ，比如说电商领域里面呢 ，从首页 ，然后跳到我们的呃商品列表页 ，再跳到商品的详情页 ，再跳到下单 ，然后再跳到订单成交支付以后的东西 ，那么这些页面核心页面都属于这都属于它的核心页面啊 ，那么还有动效 ，动效这一块儿的话 ，也不是指的就是那些小按钮的一些交互样式 ，而是指的那个整个产品里面一些比较重要的核心动效 ，对不对 ，那咱比如说过年的时候呢 ，双11就是过年的时候呢 ，支付宝呢会推出一些抢福袋 ，抢福字 ，对不对 ，呃抽福卡 ，那这个抽福卡对当前当时的一个场景来说 ，它是非常重要的 ，那么它这个动效就值得我们去学习或者考究 ，最后还有就是风格的关键词 ，任何一款产品都会通 ，可以通过关键词来定位 ，不管是简约还是时尚 ，还是英伦 ，还是这种 ，就是啊 ，非主流还是暗黑色 ，这些东西都是可以通过关键词来进行定位的 ，当然如果说通过这一一系列的这种评判标准来做一个区间的话 ，定位的话 ，那么一定是具有具象性和抽象性的 ，那么这个地方我们就可以大致的理解为最往下的就是抽象的 ，越往上的那么就是越具象的东西 ，因为这些东西是直接可以落地 ，可以看到的 ，而风格这个东西 ，其实每个人和每个人的定位标准都不太一样 ，但是最起码比如说简约风 ，大家应该大致知道 ，理解 ，能理解成就是白色的 ，是不是纯白色的 ，像小米的那种简约风 ，或者是那种无印良品的风格 ，

对不对 ，那类似的就是成都成为转移风 ，那么有的人可能还会有这个中国风等等的 ，是不是它 ，但是它都偏向于抽象型的 ，因为它是需要通过关键词来进行一个锁定 ，啊就像这个就不需要了 ，就非常明确 ，就知道它是红色就是红色 ，蓝色就是蓝色 ，对不对 ，那么视觉剖析的作用以及整个模型最终的格式就是这个样子 ，这个地方可能同学们要截个图 ，那么最后我们也会用到这个东西 ，同时同学们的视觉剖析的过程中 ，在做作业的时候也会用到这个东西啊 ，那么我们接下来看第二个地方 ，视觉剖析的基础标准 ，视觉剖析 ，如果说严谨来说的话 ，它绝对不简单只限于基础的标准这么简单 ，而是考量整个你的产品视觉的一个所衡量的一个定位 ，它就像一把尺子一样 ，来完全的来评判你这个视觉是否标准准确 ，那么基本也这些东西 ，目前对于我们的产品设计来说的话 ，互联网产品来说的话 ，其实不管是 app 也好 ，还是 pc 也好 ，还是后台也好 ，其实大致的这些大致的基础这种标准型的东西已经是作为一个可落地的了 ，而且是已经是比较目前非常明确的了 ，咱就比如说简单来说 ，红色系啊基本上不会运用于呃医学类医药类的 ，那么基本都会可能会考虑用蓝色的 ，是不是 ，或者是用一些比较冷色的的东西 ，那么或者是这种食品类的 ，那么就多数基本都是见到的都是什么呢 ，橙色的黄色的是不是红色暖色调的这种东西它会更加引起食欲 ，是不是 ，那这种东西目前其实就算不懂色彩心理学的同学们 ，应该也大致就知道现在目前的一些主流的风格是什么样子 ，那那些主流风格就所谓就是标准 ，那么还有一些东西可能同学们就不太清楚 ，这种标准就属于阅读类的 ，它就是文字识别类的 ，文字识别类对于 app 来说是非常重要的 ，

那么 pc 来说的话 ，因为目前很多的市场主流导向都偏向于了小程序 ，还有我们的 app ，那这种情况下的话 ，其实 pc 的话可能有一点点不占上风 ，但是不管哪一种端口的视觉来说 ，它的标准都是完全一致的 ，可以这么定位啊 ，那么比如说黑色调 ，灰色调的上面加一个纯黑色的文案的这种情况下呢 ，那它的阅读能力一定是非常差的 ，是不是 ，那做平面的同学应该也知道 ，呃 ，做喷绘布那种大型室外喷绘布的话 ，那么文字一般都会选选用什么呢 ，选用无衬线字体对不对 ，基本不会选用那种衬线体 ，宋体呀 ，呃 ，素体那种的是不是 ，那么这个也就是一些我们常规逻辑下理解的这种评判标准 ，那么文字识别也是可以通过可量化的方式来进行解答的 ，那么这个地方我们就给大家展示了两个 ，一个色彩的检测 ，色彩检测是通过色彩的配色工具来进行一个色彩检测 ，它能帮助你很直观地判断出液面的主色和辅色是否搭配合理 ，那么检查的工具呢 ，老师就写在了这个地方 ，这个域名就在这个地方 ，同样我给大家看一下这个是什么样子啊 ，打开呢 ，它就是这样的一个页面 ，那么你需要做的是什么呢 ，首先你要定一个颜色 ，这个颜色可以是你的 logo 色 ，也可以是企业的色 ，这个就你自己去定 ，那么通过主色调呢 ，通过主色调呢 ，它可以帮你检测出相关的颜色是否合理 ，它能帮你检测出相关的颜色是否合理 ，是否它是趋于一个视觉标准之内的 ，对不对 ，这是一个色彩检测的方面的东西 ，那么文字识别方面也是同样的 ，通过 wcac 这个是国际性的一个网站啊 ，它这个 aa 级别的要求 ，我们的普通文本的对比至少要在4.5:1之内 ，4.5:1的这个左右 ，这是最好的一个 ，呃评判标准 ，那么大文本大文本的话呢 ，

就可能说相对来说就是稍微少一点点 ，那就是3:1 ，是不是 ，那它这个数值越大 ，说明你的阅读能力是阅读级别是越差的 ，比如说我们这个呃对比色 ，我们现在给大家做了一个这个简单做了一个截图 ，啊那你就比如说这个灰色和黑色 ，它的普通文本完全是失败性的 ，它这个双 a 级别的阅读都是失败的 ，那么3a级别也是失败的 ，这是完全不可取的 ，那么大文本这种情况下也是失败的 ，也就是说它在小文本的小的内容文案的情况下 ，它阅读是有问题的 ，那同样它以标题形式呈现 ，它以这种颜色背景来做底衬的话也是有问题的 ，就包括他在这个呃图形对象和用户界面组件这个地方 ，其实它也是不太合规矩的 ，所以它全部都属于失败 ，那么好的好的时候应该怎么办呢 ，它就是这个样子 ，它最少应该达到4.5:1 ，比这个数值还要再大一些 ，就是我们这个地方设立一个8.1 ，8.15成比这个一 ，那么这种情况下呢就很好的可以去阅读了 ，比如说把我们的背景色呢变得更浅一些 ，是不是 ，那这种情况下 ，小文本和大文本都是经过经过的意思 ，这个是汉化过的啊 ，它就是经过 ，那么它在原文的地方就是通过通过的意思 ，包括它的图形对象和用户界面的组件也是通过的 ，这个网站的链接也给大家编辑 ，在这里大家慢慢的去截图下来去编辑一下 ，因为它这个域名比较长 ，我们来看一下 ，我们来看一下 ，啊这个地方的话就是这个呢就是我们的这个文字色 ，那文字的修改呢是方便我们这个修对应它下面有一个直接展示的样式 ，那么这个呢就是对应的背景色 ，背景色如果产生于就是类似于红色粉色的这种情况下 ，你发现没有 ，它是它是一个失败的过程 ，而 pass 它是一个通过的意思 ，那么这种情况下 ，我们这个3.1:1 ，它是一个相对于稍微相对于比较合理的地方 ，啊相对比较合理的地方就是比4.5:4.5比比一的话 ，可能会稍微的小一点 ，那这个情况同学们自己去考量一下 ，

那如果说我们这个情况 ，比如说已经有了一个评判标准 ，那我们比如说那就是红色 ，那我们这个地方呢就是背景 ，我们就目前想选红色浅红色的背景 ，但是我不想在其他的颜色里面去改 ，怎么办呢 ，也可以 ，也可以做啊 ，直接把你的这个拉动你的这个值就行了啊 ，把这个前景色这个文字色拉到你的纸就可以了 ，让他看到什么情况下 ，只要它这个绿色全部标注 ，说明你就通过了 ，Pass 通过了 ，那么这个背景也是可以的啊背景也是可以的 ，当然你看这个现在就有问题 ，对不对 ，那这个肯定就没有问题 ，这就是评判标准 ，把这个域名可以保存一下 ，那么我们再来看一下 ，这是一种评判标准 ，关于色彩和文字的一个界面 ，里面组成除了色彩和文字还有什么呢 ，还有配图和图标这些是不是排版这个东西就没有什么特别的规规矩矩可行 ，除非如果说硬要拿一个标准可行的话 ，那只有是三格模型 ，但是我们这节课呢 ，不去讲那个东西 ，因为那个东西的话 ，三格模型是相对于又一套相对比较严谨的一个东西 ，我们这节课呢 ，只是视觉剖析里面的局部元素就可以了 ，那么视觉剖析的基础标准 ，第二个 ，第三个和第四个就是配图和图标 ，配图同学们应该是知道的 ，配图的好与坏直接影响到用户的浏览视觉的心情是如何的 ，呃包括还有一些图片的一些要素 ，比如说我们再配一张 banner 的时候 ，左边放着文字 ，右边放一个人物的话 ，那么我们大概率希望的是人物的眼睛来盯着这个核心点的 ，对不对 ，这个文字文字的这样是帮助我们用户通过图片里面的人物的眼睛 ，去引导我们用户去阅读这个文本 ，对不对 ，这是一些图片的规则 ，