一个优秀的设计不仅要解决正确的问题，同时也是给用户创造积极的情感。在过去，实体产品可以通过人类的五感来创造情感体验，但对于如今的数字化产品来说，这似乎很难达到，因为只是在屏幕上进行枯燥的交互来获取服务。

所以，数字化产品设计师们需要更深入的理解每种类型的情感，以及创造它们的心理学原则。

根据唐.诺曼（Don Norman）的研究，人们对一个物体产生情感有三个层次：本能、行为和反思。

• 本能层: “用户想要的感觉是什么”

• 行为层: “用户想要做什么”

• 反思层: “用户想成为什么样的人”

在第一层，用户将通过视觉和与产品的交互设计中产生情绪。因此，这是UI设计师擅长发挥的地方。除了美学和基本的平面设计原则外，下面是我在工作中经常应用到设计中的心理学原则。

格式塔原理

相似律

人类的眼睛倾向于将相似的元素连接成一个组，而大脑会认为这些元素都有相同的目的。 

因此，在设计具有相同功能和内容的界面元素时，就应该要保持一致性。（彩云注：这也是为什么要保持一致性的理论解释）

应用场景: 导航、控件、卡片、banner、内容、分页

连续律

人眼会将连续的元素视为一组。这一定律与对称性和相似性非常相关，通过在一个序列上设计相似和重复的元素，我们可以将用户的视线引导到我们想要的方向，它能使得阅读信息更加连贯和清晰。

一点点的切割是在暗示用户，这里还有更多的内容等待你去查看。

应用场景: 菜单、列表、排序、轮播、服务进度

封闭律

当看到一幅不完整的图像时，大脑会依赖之前的经验进行填充。 

这是图形和logo设计中常用的规则，但是在产品设计中，我们也经常把它用在图标和Loading设计中。

应用: 图标、loading、数据可视化

相近律

这是UI设计中的一个基本规则，因为人眼会将任何相邻元素视为一个组。 

在设计的时候，我非常注重使用间距来将元素组合在一起。我通常使用大空间来分隔大内容组，然后使用小空间来分隔大内容组中的小内容组。

应用场景: 导航、控件、卡片、banner、内容、分页

对称律

我们的大脑喜欢看到对称和平衡的东西。它是所有设计领域中使用最频繁、最安全的法则。它帮助我们创造一种稳定和秩序的感觉。 

当设计需要简单和谐可视化的产品时，我经常使用对称律。当用户需要关注重要的事情时，它也能让他们感到更舒服。缺点是，如果过度使用，产品会变得乏味和单调。通常，我用标题或CTA按钮来更好地强调和号召行动，打破画面的单调格局。（彩云注：CTA是call to action的缩写，中文通常翻译为行为号召。可以理解为引导用户点击的行为都算是行为号召）

应用场景:控件，banner，强调内容，产品显示，清单，导航。

背景分割

这个定律是关于人眼倾向于注意脱离背景或组合的事物。 

我使用这个规则引导用户的眼睛看到重要信息。它通常是一个卡片设计与一个轻投影在背景之上的层。此外，构建整体也是应用这一规则的一种方式。

应用场景：卡片、内容、列表、服务、摘要

共同命运法则

在同一方向上移动的元素被认为比固定的元素或在另一个方向上移动的元素更相关。这个规则应用帮助我们建立组和状态之间的关系。 

在制作动画时，我经常更明确地使用这个规则。然而，我们仍然可以适用于许多不同的因素。

应用场景：导航/下拉菜单，折叠，手风琴，工具提示，产品滑块，视差滚动和指示器。

2. 焦点原则

当我们看东西时，我们的眼睛倾向于首先关注最突出的元素。理解这种行为将帮助我们在设计中创建一个“锚点”，从而推动用户查看我们的场景之后的内容。

应用场景:内容、落地页、价格、产品页、banner 

3. 雷斯多夫效应

（彩云注：维基百科解释为指个人对学习材料或所见所闻的资讯，容易记住最特殊的部分的现象。例如：有一些参考书将重要的资料，以不同颜色或特殊的字体标示出来，就是利用雷斯多夫效应来加深读者的印象。）

这也被称为隔离效应，它表明人们倾向于注意并记住与其他部分不同的部分。这条规则很容易与焦点定律混淆。不同的是，应用此规则的元素通常是独立的，没有为用户导航更多信息的额外功能。 

应用场景：定价表、促销banner、不同会员介绍 

4. 本能反应

基于现实世界打造的视觉体验。比如，当我们看一个视频，每个高潮笑话时都有旁白跟着一起笑时，我们会更容易发笑（彩云注：想想《快乐大本营》）。用户会喜欢我们的设计，如果它让他们感觉良好和舒适。

（彩云注：这个理论的意思是说尽可能让用户产生沉浸感，把产品用到真实的环境上，比如大家平时使用的手机样机，把设计的界面放到这些样机中就能够给人直观的感受到应用后的效果，也是这个理论的运用）。 

应用场景：产品配图、插图、摄影 

5. 色彩心理学

有很多研究表明颜色对我们的潜意识有特别的影响。对颜色的看法也因性别、宗教和文化而异。这张彩色心理学海报就足够了（彩云注：感兴趣的可以自行翻译研究下）。

此外，我们不要忘记从早期到现在一直在广泛使用的颜色，这些颜色的使用更符合用户习惯：

红色：错误

绿色：成功

蓝色：进行中

黄色：警告

6. 形状心理学

就像颜色一样，人类的潜意识对不同的形状也有不同的反应。例如:

圆形、椭圆形：传递积极的信息，通常与社区或关系有关。

方形和三角形：带有强烈的信息，通常与力量和稳定联系在一起。

竖线：代表强度、力量或攻击性。

横线：表示平静、相等、安静。

7. 双码理论

这一理论解释了人类需要视觉和语言信息来尽可能快地处理信息。此外，人类是视觉动物，我们的大脑处理图像的速度是处理文本的6万倍。为了最大化设计的有效性，我们不应该去掉解释性的文字。

（彩云注：根据这个理论，在做作品集时，就应该尽可能的多用视觉化语言，文字作为辅助，对于视觉设计师来说，能用图表达的就尽量减少文字的比重。） 

 一个很明显的例子就是导航栏。大多数新的应用或具有复杂功能的应用都同时设计了图标和文字标签。 

8. 并行设计

人类的眼睛倾向于看到平行因素比其他因素更相关。我经常使用这一原则对同一屏幕内的两组不同内容进行分类。最容易看到的例子可能是Facebook messenger界面，当帖子并排排列时，消息是平行的。 

9. 共同区域

这一原则类似于格式塔原则中的相似定律，但它并不是完全相似。共同区域原则是通过我们使用分隔线、形状或颜色的方式创建的。 

如果一个界面需要用户滚动更多来查看内容，我们应该有一些方法来更清楚地划分它，而不仅仅是使用间距。

应用场景：列表清单、信息流

10.扫描图形

根据NNGroup UXPin等组织或团体的各种研究，两种最常用的扫描模式是“F”和“Z”。

• F的使用最为广泛，尤其是对于内容量大的网站。

• Z用于不太注重文本的网站，通常强调在最后的号召行动。

一旦我们理解了如何使用这些模式，我们就可以选择布局并有效地安排元素来实现我们的设计目标。 

总结

第一印象是最令人难忘的，积极的体验可以在用户和产品之间创造持久的关系。如果能让用户在一开始就喜欢上我们的设计，就能为我们的产品创造了一个很好的优势。

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

什么是视觉层次

视觉层次不仅仅包含文字有关，它还包含我们的图片，视频按钮以及文字以外的视觉元素。所以当你设计一个网页时候，除了网站整体的颜色，排版，图片也能够影响视觉层次。那么如何让设计的层次更清晰，常用方法有哪些，今天我们一起来聊聊关于设计层次，希望可以帮助到你。

运用尺寸大小建立层次

▲如上图插画的比重很大，在设计这种大的元素时，你的每个元素比例和细节处理都被同时放大了，我们可以看见这副插画四周还运用了很多元素，让页面达到平衡，同时这个画面和旁边的文字场景也很好融合在一起。一个好的设计一定是通过视觉手段让用户理解信息更加准确，在看完页面文字和图片后，很自然的引导到底部的按钮，这才能算是一个很引人注目的设计。

运用色彩建立层次

运用文字大小字重建立层次

运用视觉重量建立层次

▲设计师熟悉的medium官方App设计，在正文阅读时，同样采用不同的视觉重点来突出重要信息，比如左边通过字重以及文字背景绿色底色和正文对比，非常醒目。右侧通过浅绿色作为背景强调突出。

▲同样在一些重要位置，Medium也是运用视觉重量处理，如左图通过顶部提示条提示可以通过语音播放，在右侧付费文章通过行动按钮引导用户升级付费。

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

Vue中的基本动画实现

直接一点，基本动画的步骤

1. 在需要加动画的地方，加入transition

<transition> <P v-if="isNum">我是一只小小鸟</P> </transition>  


    

        1
    

    

        2
    

    

        3
    

在style中写vue已定义好的类名

 进入前和结束后的状态
    .v-enter,.v-leave-to{ opacity: 0; transform: translateX(80px); } 进入和离开的动画时间段
    .v-enter-active,.v-leave-active{ transition: all 0.5S ease }  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

这样就已经完成了基本动画了，上完整代码

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="../node_modules/vue/dist/vue.min.js"></script> <style> 进入前和结束后的状态 .v-enter,.v-leave-to{ opacity: 0; transform: translateX(80px); } 进入和离开的动画时间段 .v-enter-active,.v-leave-active{ transition: all 0.5S ease } </style> </head> <body> <div id="box"> <button @click="tags">显示/隐藏</button> <transition> <P v-if="isNum">我是一只小小鸟</P> </transition> </div> <script> new Vue({ el:'#box', data:{ isNum :true }, methods: { tags(){ this.isNum=!this.isNum; } }, }) </script> </body> </html>  


    

        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
    

    

        46
    

    

        47
    

    

        48
    

    

        49
    

    

        50
    

动画类名的重定义

只需要在transition标签上添加一个name属性，然后把类名中v改成你定义的类名就可以了

<transition name='my'> <P v-if="isNum">我是一只小小鸟</P> </transition>  


    

        1
    

    

        2
    

    

        3
    

 进入前和结束后的状态
    .my-enter,.my-leave-to{ opacity: 0; transform: translateX(80px); } 进入和离开的动画时间段
    .my-enter-active,.my-leave-active{ transition: all 0.5S ease }  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

使用第三方的动画库

第三方的动画库有很多
Animate、Anicollection、Cssshake、Animatable、Hover、Animations、JXAnimate、Spinkit、Velocity动画、AlloyStick骨骼动画引擎、Rocket、Cssynth、Stylie、Dynamicsjs、Anijs、Animsition、Parallax、Wow、Bouncejs、Easie、Greensock

我就选择其中一个库做示范其他都一样

1. 在使用第三方库之前，需要在，你要做动画的标签上加个基本类
   animated，这个基本类是根据每个库不一样而定的，
   我们要用Animated，所以需要加

<transition name='my'> <P v-if="isNum" class="animated">我是一只小小鸟</P> </transition>  


    

        1
    

    

        2
    

    

        3
    

接着就是引入第三方库，你们可以下载。
我比较懒，我就直接npm下载了。

npm install animate.css --save  


    

        1
    

然后引入文件

<link rel="stylesheet" href="../node_modules/animated/lib/Animated.js">  


    

        1
    

写上类名，就行了，，提示，千万别下错文件，不然动画也无法实现

 <!-- 进入用lightSpeedIn    离开用 lightSpeedOut --> <transition enter-active-class="lightSpeedIn" leave-active-class ="lightSpeedOut"> <P v-if="isNum" class="animated">我是一只小小鸟</P> </transition>  


    

        1
    

    

        2
    

    

        3
    




     

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

文章来源：csdn

分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

<p style="box-sizing:border-box;margin-top:0px;margin-bottom:1rem;font-size:16px;font-variant-ligatures:no-common-ligatures;white-space:normal;background-color:#FFFFFF;text-align:justify;color:rgba(0, 0, 0, 0.84);font-family:&quot;letter-spacing:0.1px;">
    <strong style="box-sizing:border-box;font-size:14px;font-family:微软雅黑, Arial, Helvetica, sans-serif;color:#323232;"><b style="box-sizing:border-box;widows:1;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="font-family:&quot;font-size:14px;background-color:#FFFFFF;white-space:normal;widows:1;line-111111111111111111111:20px;color:#3e3e3e;box-sizing:border-box !important;"><strong style="box-sizing:border-box;font-family:微软雅黑, Arial, Helvetica, sans-serif;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><i style="box-sizing:border-box;"><a href="http://www.lanlanwork.com/blog/admin" target="_blank" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;">蓝蓝设计</a>(&nbsp;<a href="http://www.lanlanwork.com/" target="_blank" style="box-sizing:border-box;text-decoration-line:none;color:#0C386E;transition:all 0.5s ease 0s;vertical-align:baseline;background-position:0px -60px;padding:0px;margin:0px;text-indent:34px;">www.lanlanwork.com&nbsp;</a>)是一家专注而深入的<a href="http://www.lanlanwork.com/index.html" target="_blank" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;background-position:0px -60px;padding:0px;margin:0px;">界面设计公司</a>，为期望卓越的国内外企业提供卓越的UI界面设计、<a href="http://www.lanlanwork.com/bs.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;background-position:0px -60px;padding:0px;margin:0px;">BS界面设计&nbsp;</a>、&nbsp;<a href="http://www.lanlanwork.com/csjm.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;background-position:0px -60px;padding:0px;margin:0px;">cs界面设计&nbsp;</a>、&nbsp;<a href="http://www.lanlanwork.com/scjm.html" target="_blank" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;background-position:0px -60px;padding:0px;margin:0px;">ipad界面设计</a><a href="http://www.lanlanwork.com/csjm.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;background-position:0px -60px;padding:0px;margin:0px;">&nbsp;</a>、&nbsp;<a href="http://www.lanlanwork.com/baozhuang.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;background-position:0px -60px;padding:0px;margin:0px;">包装设计&nbsp;</a>、&nbsp;<a href="http://www.lanlanwork.com/icon.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;background-position:0px -60px;padding:0px;margin:0px;">图标定制&nbsp;</a>、&nbsp;<a href="http://www.lanlanwork.com/yhty.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;background-position:0px -60px;padding:0px;margin:0px;">用户体验 、交互设计、&nbsp;</a><a href="http://www.lanlanwork.com/web.html" target="_blank" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;background-position:0px -60px;padding:0px;margin:0px;">网站建设</a><a href="http://www.lanlanwork.com/WEB.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;background-position:0px -60px;padding:0px;margin:0px;">&nbsp;</a>、<a href="http://www.lanlanwork.com/xz.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;background-position:0px -60px;padding:0px;margin:0px;">平面设计服务</a></i></b></b></b></b></b></b></strong></b></strong></b></strong></b></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></b></strong> 
</p>

<div>
    <strong style="box-sizing:border-box;font-size:14px;font-family:微软雅黑, Arial, Helvetica, sans-serif;color:#323232;"><b style="box-sizing:border-box;widows:1;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="font-family:&quot;font-size:14px;background-color:#FFFFFF;white-space:normal;widows:1;line-111111111111111111111:20px;color:#3e3e3e;box-sizing:border-box !important;"><strong style="box-sizing:border-box;font-family:微软雅黑, Arial, Helvetica, sans-serif;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"> </b></b></b></b></b></b></strong></b></strong></b></strong></b></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></b></strong> 
</div>

效果：

HTML：

 


    


        


            


            

        

        


            

                <div class="sel01"> 
            

        

    

    


        


            


            

        

        


            

                <select v-model="selectClassEnd" @change="selectClass($event)"> 
            

        

    

    


        


            


            

        

        


            

                <option value="NONE">未选择</option> 
            

        

    

    


        


            


            

        

        


            

                <option v-for="(options,id) in selectClassData" :key="id" :value="options.id"> 
            

        

    

    


        


            


            

        

        


            

                {{options.title}}
            

        

    

    


        


            


            

        

        


            

                </option> 
            

        

    

    


        


            


            

        

        


            

                </select> 
            

        

    

    


        


            


            

        

        


            

                </div> 
            

        

    

CSS：

 


    


        


            


            

        

        


            

                .sel01{display:inline-block;position:relative;z-index:2;font-size:1.6rem;height:3.6rem;line-height:3.6rem;width:8rem;flex:1;background:#fff;box-sizing:border-box;border-radius:.5rem;}
            

        

    

    


        


            


            

        

        


            

                .sel01:before{content:"";position:absolute;width:0;height:0;border:.5rem solid transparent;
            

        

    

    


        


            


            

        

        


            

                border-top-color:#e92f26;top:50%;right:1rem;cursor:pointer;z-index:-2;margin-top:-0.25rem;}
            

        

    

    


        


            


            

        

        


            

                .sel01 select{width:100%;border:none;height:3.6rem;background:transparent;background-image:none;-webkit-appearance:none;-moz-appearance:none;vertical-align:top;padding-left:1rem;}
            

        

    

    


        


            


            

        

        


            

                .sel01 select:focus{outline:none;}
            

        

    

JS：

 


    


        


            


            

        

        


            

                export default {
            

        

    

    


        


            


            

        

        


            

                name:"Name",
            

        

    

    


        


            


            

        

        


            

                data(){
            

        

    

    


        


            


            

        

        


            

                return{
            

        

    

    


        


            


            

        

        


            

                selectClassData:[ //类别选择数据或者从后台获取数据 
            

        

    

    


        


            


            

        

        


            

                {id:1,title:"科普类"},
            

        

    

    


        


            


            

        

        


            

                {id:2,title:"亲子类"},
            

        

    

    


        


            


            

        

        


            

                {id:3,title:"制作类"},
            

        

    

    


        


            


            

        

        


            

                {id:4,title:"创意类"}
            

        

    

    


        


            


            

        

        


            

                ],
            

        

    

    


        


            


            

        

        


            

                selectClassEnd:"NONE",//类别默认选择 
            

        

    

    


        


            


            

        

        


            

                select_class_id:"",//类别id提交报名需要 
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                methods:{
            

        

    

    


        


            


            

        

        


            

                //类别选中 
            

        

    

    


        


            


            

        

        


            

                selectClass(event){
            

        

    

    


        


            


            

        

        


            

                this.select_class_id = event.target.value; //获取option对应的value值 select_class_id是后台约定的提交数据的名称 
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


                

                    


                

                

                      
                

            

        

    

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

、

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

在如今这个时代，越来越多的信息和内容呈现开始依赖数据驱动，也开始有更多的场合需要信息图来辅助呈现，对于可视化数据，从来没有像现在的要求这般高。但是另一方面，我们周围充斥着大量错误的图表呈现，希望这篇文章提供的 20 条建议能够帮你设计出更好的信息图。

1、选择正确的图表类型

不同的图表类型所承担的功能是截然不同的，不合理的数据呈现会容易让用户误读。同样的数据可以使用不同的图表呈现出不同方面的特征，因此，在设计信息图之前，先理清需求，再来选择使用哪种图表能够更好地呈现。

2、根据数据的正负值选择正确的绘图方向

当使用数据在0的左右波动，产生正负差异的时候，请使用基线来正确反应正负关系，不要在同一侧来呈现数据，这样很容易带来误读。

3、始终从0处开始绘制条形图

和折线图不同，条形图如果从非 0 的位置开始，确实更容易反应趋势，但是给所体现的数据量级和特征是失真的。比如在下面的案例中，B看起来是D的3倍以上，但是实际的情况是，两者差异并不大。所以需要从座标 0 处开始呈现数据，这样会更准确。

4、折线图应该清晰呈现Y轴上的趋势变化

对于折线图，需要考虑一下 Y轴上的尺度，因为如果单位太大，那么折线图所呈现出来的波动幅度不够大，趋势的表达也不够清晰。这个时候，建议调整Y轴上的单位大小，确保折线的波动幅度大概占整个Y轴的 2/3 即可。

5、使用折线图的时候注意时间

折线图是使用线条连接特定时间节点的特定数据的一种数据呈现形式，它有助于说明随着时间推移，某些情况的变化，但是当间隔时间频率不对，参差，缺失，那么折线图的数据可能会无法对应，这个时候使用条形图其实是更容易呈现的。

6、不要使用平滑的折线图

平滑的「折线」在视觉上看起来是愉悦，但是它歪曲了背后的实际数据，也很难读到关键的转折点数据。

7、避免让双折线互相交叉

通常，为了为了节省可视化设计的空间，设计师会采用双折线来呈现数据，但是在数量级不对等的情况下，折线图会很难读，甚至容易会误导用户，这个时候，建议分开使用2个不同的座标系来呈现，更加易读，同样可以看的出趋势，也不会得出错误的结论。

8、限制饼图中的扇形的数量

饼图是最常用但是也是最容易误用的图表之一，在绝大多数的情况下，条形图是更好的选择。如果你决定使用饼图，那么这里有2个基本的建议：

不要超过7个不同的扇区，让饼图尽量简单
你可以将额外的片段分组到「其他」的扇区中

9、在饼状图中直接标注对应的数据

没有合适的文本标签说明的情况下，无论信息图设计得多好都没有意义，直接在图表上进行明确的标识，才会对观看者产生价值，需要观看者自己去关联的设计是失败的。

10、不要在扇面上做标注

不要将数值直接放置在饼状图的扇区上，在较小的扇区块上数据会非常难读，相反，使用引线来指引数据对应的区块会是更好的方法。

11、控制饼图中扇面的排序让其方便阅读

对于饼状图的切分方式，有2种常见的顺序：

将最大的一块置于12点钟方向，然后顺时针按照大小来排布所有的块
将最大的一块置于12点钟方向，然后在右边放次大的块，右边放置再次的块，基本上就是越大的扇区约靠上。

12、避免随机排列

同样的建议也适用于其他的图表，不要使用字母顺序来进行排列，不要使用笔画排序，而是按照数据大小来进行排列，水平条形图就将最大数据放在顶部，垂直排布则将最大数据的放在左侧，减少阅读的时候的信息分辨的障碍。

13、不要牺牲信息图的可读性

饼状图通常是最不容易读的图表，因为它很难对相似的数据进行对比，所以在将它设计成环状的时候，我们可以使用辅助的数据来呈现，但是一定不要牺牲彩色扇区的可读性，这样看起来高级但是并不具备基本的可读性。

14、视觉效果不要影响数据的呈现

不要让不必要的视觉效果来分散用户的注意力，这可能会导致用户对于数据产生误解，通常你应该避免使用：

3D元素和阴影
渐变和失真的色彩
斑马纹或者过多的网格线
装饰性过强的字体

15、选择和数据属性匹配的配色

配色是可视化设计当中绕不开的一个重要的部分，在设计的时候可以考虑以下三种不同的配色方案：

使用定性的配色方案，不同的色相对应不同的元素，确保在整体配色的可访问性
使用符合一定顺序（比如明暗）的近似色的配色，呈现出一种连续的色彩变化
横跨冷暖色调的配色方案，将中性色置于中间，用来呈现存在正负关系的数据变化

16、使用无障碍的配色

根据目前的统计数据，大概 12 人当中有一个人存在视觉障碍，有的是色盲，有的是色弱。你的图表设计需要确保兼顾到这一部分用户的需求。

在配色方案当中使用不同饱和度和明暗的色彩
使用去色效果来校验你的配色的对比度

17、关注内容的易读性

在信息图的排版易读性上同样是有要求的，要避免分散用户的注意力，不会制造视觉障碍：

选择清晰的非衬线字体，避免使用衬线体和过度装饰的字体
避免使用斜体、粗体和全大写字体
确保和背景之间的信息对比度
不要旋转文本

18、使用水平条形图来优化倾斜标签

这是一个非常简单的技巧，能够确保用户在阅读的时候足够轻松，不会因为倾斜的文本扭伤脖子或者加重落枕的症状。

19、事先选好你的图表库

如果你的设计项目是面向 Web 或者移动端的交互式图表，那么你需要考虑的第一个问题就是，要用什么样的图标库。如今不同的图表库在功能模块和规则上各不相同，你需要在一开始就基于你的需求和设计想法，做出选择。

20 、不只停留在在数据静态呈现上

信息图本质上是在对数据进行优化处理、呈现的基础上，帮助用户进行探索，最大化地从数据中获得信息洞察，让数据发挥价值。在下面的 iOS Health 应用就是在最大程度地反映数据应有的意义和功能。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

前言

上一期分享了如何在vue-cli3的框架中，封装mixins，module 。本期将分享如何在vue项目中添加sass。

GitHub项目地址：https://github.com/jiangjiaheng/web-template

关于sass

本文默认你对sass有一定的了解，并且阅读过相关的官方文档，因此本文就不在赘述关于sass的基础知识。

sass官方文档：https://www.sass.hk/

添加方式

1. 创建项目时选择预处理器sass

$ vue create vuedemo
? Please pick a preset: (Use arrow keys)
> default (babel, eslint)
  Manually select features 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

移动上下键选择Manually select features：手动选择创建项目的特性。

显示如下：

? Check the features needed for your project: (Press <space> to select, <a> to t
oggle all, <i> to invert selection)
>( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 (*) CSS Pre-processors
 ( ) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

移动上下键在CSS Pre-processors，按提示点击空格键选择CSS-processors。

显示如下：

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
> SCSS/SASS
  LESS
  Stylus 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

选择第一个SCSS/SASS作为我们的CSS预处理器。

完成后项目会帮我们安装sass-loader node-sass。

2. 手动安装sass-loader

如果在创建项目没有选择CSS预处理器，我们也可以手动安装sass-loader node-sass来集成scss。

npm install -D sass-loader node-sass 


    

        1
    

使用

完成添加后，我们只需要在style指定lang为scss即可，无须多余操作：

<style lang="scss" scoped>
$color: red;

h1 {
  color: $color;
}
</style>

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

文章来源：csdn

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

错误提示：

    


        


            


            

        

        


            

                ERROR  Failed to compile with 1 errors 下午6:51:57
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                error in ./src/views/Login.vue
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                Module build failed: Error: Node Sass version 6.0.1 is incompatible with ^4.0.0.
            

        

    

    


        


            


            

        

        


            

                at getSassImplementation (D:\IDEA\IDEA Projects\Vue\hello-vue\node_modules\_sass-loader@9.0.3@sass-loader\dist\utils.js:77:13)
            

        

    

    


        


            


            

        

        


            

                at Object.loader (D:\IDEA\IDEA Projects\Vue\hello-vue\node_modules\_sass-loader@9.0.3@sass-loader\dist\index.js:34:59)
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                @ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-26084dc2","scoped":true,"hasInline
            

        

    

    


        


            


            

        

        


            

                Config":false}!./node_modules/_sass-loader@9.0.3@sass-loader/dist/cjs.js?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/views/Login.vue 4:14-389
            

        

    

    


        


            


            

        

        


            

                13:3-17:5 14:22-397
            

        

    

    


        


            


            

        

        


            

                @ ./src/views/Login.vue
            

        

    

    


        


            


            

        

        


            

                @ ./src/router/index.js
            

        

    

    


        


            


            

        

        


            

                @ ./src/main.js
            

        

    

    


        


            


            

        

        


            

                @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js
            

        

    

 解决方案：

找到问题所在：Module build failed: Error: Node Sass version 6.0.1 is incompatible with ^4.0.0.

这个问题是因为Sass的版本过高导致，所以根据提示将版本改为对应的版本就可以了，我这里是改为4.0.0版本。

下面是怎么改版本：

1.首先在IDE中找的package.json文件：

2. 然后打开该文件找到“sass-loader”，后面跟着的便是你现在的版本，根据提示将其改为对应版本即可 ：

3.在Terminal（终端）中输入：cnpm install（注意用cnpm 淘宝的镜像，用npm可能会下载不成功）

 4.运行成功：npm run dev

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

文章来源：博客园

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务