首页

SpringBoot与Vue交互解决跨域问题

前端达人

Hello，你好呀，我是灰小猿，一个超会写bug的程序猿！

最近在利用springboot+vue整合开发一个前后端分离的个人博客网站，所以这一篇总结一下在开发中遇到的一个问题，关于解决在使用vue和springboot在开发前后端分离的项目时，如何解决跨域问题。在这里分别分享两种方法，分别在前端vue中解决和在后台springboot中解决。

浏览器同源策略

为什么会出现跨域问题？ 首先一个定义一定要了解，就是浏览器的同源策略，

什么是浏览器的同源策略， 简单来说就是浏览器发送请求的协议、域名和端口要和服务器接收请求的协议、域名以及端口一致。这样才能完成交互，但是很显然这样是不可能的，尤其在对于在同一台电脑上开发前后端分离的项目的时候，一定是会使用两个端口的。那么这样就形成了跨域问题。

在这里分享一下我解决跨域问题用到的两个方法，

一、VUE前端配置代理解决跨域

（1）Vue中让浏览器请求携带cookie

先说一下我是怎么发现出现跨域问题的吧，最开始我在从前端浏览器向后台发送请求的时候是没有携带浏览器的cookie的，但是这样就导致了无法对浏览器的请求进行验证，所以在后来我用了一个方法让浏览器在每次发送请求的时候在http请求头中携带上cookie，方法如下：

在vue的main.js方法中写入如下代码： 

//引入axios依赖 import axios from 'axios' //让请求携带上浏览器的cookie axios.defaults.withCredentials=true Vue.prototype.$axios = axios 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    •

以上表示引入axios请求，也就是ajax请求，同时开启写入凭证，只有withCredentials等于true的时候，才会携带cookie。

（2）vue中配置代理解决跨域

在vue中解决跨域问题其实也比较简单，因为我们每次浏览器发送的请求中，URL的前半部分一定是相同的，比如http://localhost:8080/blogs与http://localhost:8080/login，我们就可以将他们相同的URL提取出来，封装到axios.defaults.baseURL中，这样我们在每次请求的时候，就可以将请求地址简写成“/blogs”这样，也相当于是将URL头部进行了一个简单的封装。

注意：设置统一请求路径的axios.defaults.baseURL =
"http://localhost:8080"应该写在axios.js中

但是在解决跨域问题的时候，我们应该将axios.defaults.baseURL = "http://localhost:8080"写成axios.defaults.baseURL = “/api”。
这样我们每次请求的路径前面都会是“/api”的形式。
这也是第一步：

第一步，设置统一访问路径

在axios.js中设置axios.defaults.baseURL = "http://localhost:8080"写成axios.defaults.baseURL = "/api"

第二步、配置跨域代理

在babel.config.js的同级目录下新建一个js文件vue.config.js
在这里插入图片描述

在其中写入如下代码：这段代码是解决跨域问题而配置的一个代理。我这里后台服务器的请求连接是http://localhost:8081，所以如果你的不是的话需要修改一下。 

/**
 * 解决跨域问题
 * @type {{devServer: {proxy: {"/api": {changeOrigin: boolean, pathRewrite: {"^/api": string}, target: string}}, host: string, open: boolean}}}
 */ module.exports = { devServer: { host: 'localhost', open: true, // 自动打开浏览器 // 代理配置表，在这里可以配置特定的请求代理到对应的API接口 // 例如将'localhost:8080/api/xxx'代理到'www.example.com/api/xxx' proxy: { '/api': { // 匹配所有以 '/api'开头的请求路径 target: 'http://localhost:8081', // 代理目标的基础路径 // secure: false,  // 如果是https接口，需要配置这个参数 changeOrigin: true, // 支持跨域 pathRewrite: { // 重写路径: 去掉路径中开头的'/api' '^/api': '' } } } } } 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    • 

    
  • 
        14
    
    • 

    
  • 
        15
    
    • 

    
  • 
        16
    
    • 

    
  • 
        17
    
    • 

    
  • 
        18
    
    • 

    
  • 
        19
    
    • 

    
  • 
        20
    
    • 

    
  • 
        21
    
    • 

    
  • 
        22
    
    • 

    
  • 
        23
    
    •

第三步、测试请求

如我们现在要发送login登录请求，那么请求应该是这样写的： 

this.$axios.post("/login") 

    

    
  • 
        1
    
    •

二、springboot后端配置解决跨域

在springboot框架的后端想要解决跨域问题，只需要添加一个类CorsConfig，并且让它实现WebMvcConfigurer接口， 其中代码如下，一般在开发的时候直接将代码复制过去就可以了。 

 import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.CorsRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; /**
 * 解决跨域问题
 */ @Configuration public class CorsConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOriginPatterns("*") .allowedMethods("GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS") .allowCredentials(true) .maxAge(3600) .allowedHeaders("*"); } } 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    • 

    
  • 
        14
    
    • 

    
  • 
        15
    
    • 

    
  • 
        16
    
    • 

    
  • 
        17
    
    • 

    
  • 
        18
    
    • 

    
  • 
        19
    
    • 

    
  • 
        20
    
    • 

    
  • 
        21
    
    • 

    
  • 
        22
    
    • 

    
  • 
        23
    
    • 

    
  • 
        24
    
    •

以上我解决跨域的两种方法，在网上也查找了很多解决跨域的方法，但是错综复杂，经过尝试和自己研究，以上两种方法是我亲测成功的，当时前后端都配置了。

所以小伙伴们有不同的见解或者更好的方法，欢迎提出指正！

我是灰小猿，我们下期见！











































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

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

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

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

评论(0) 浏览(2214)

Vue 组件通信(父传子,子传父,跨组件传值)

前端达人

目录

一, 简单介绍组件通信

二, 详解传值方法

1.父传子 props

2.子传父 $emit

3.跨组件通信 event-bus

一, 简单介绍组件通信

        我们知道在现在的开发环境下,不管前后端开发都是组件化模块化,这是因为组件的优势无比的巨大,可以进行多次的复用增加开发效率,也可以分类鲜明,便于维护,而我今天所写的就是开发中分割成不同的组件互相传递数据和互动

        我的工作中常用地组件通信大致分为三类: 父传子 , 子传父 , 跨组件传值

        下面就来分别介绍一下 我常用的这三种传值方法

二, 详解传值方法

        父子组件的确认方法:我将 B 组件import引入到 A 组件中,那么 B 就是 A 的子组件,A 就是 B 的父组件

1.父传子 props

        简而言之,父传子就是父组件把数据传给子组件,具体就是如下,在子组件的props中定义自定义属性来待接收父组件的数据,有两种方法 如下:

        第一种,也是最推荐用的一种,以复杂类型的方式进行声明,这样存储的便是一个地址,可以和父组件的数据进行双向绑定,同步数据,虽然可以双向绑定,但是在Vue2.0中还是不可以直接在子组件中更改父组件的数据,需要用到子传父才行,这点等下会写到

        这里只是用 text 举个栗子,具体叫什么都可以哈,只是父子里面需要对应上相同

        这个 text 接收到数据后的使用方法和一般data中声明的变量一样,只是不能再子组件中改变他

子组件中:        props 定义属性接收 

 

    

    
  1. 

        
    

            
    

            
    

        
    

        
    

            
    
                <template>
            
    

        
    

    
    2. 

    
  2. 

        
    

            
    

            
    

        
    

        
    

            
    
                <div> 
            
    

        
    

    
    3. 

    
  3. 

        
    

            
    

            
    

        
    

        
    

            
    
                <h2>son组件</h2> 
            
    

        
    

    
    4. 

    
  4. 

        
    

            
    

            
    

        
    

        
    

            
    
                <p>props:{{ text }}</p> 
            
    

        
    

    
    5. 

    
  5. 

        
    

            
    

            
    

        
    

        
    

            
    
                </div> 
            
    

        
    

    
    6. 

    
  6. 

        
    

            
    

            
    

        
    

        
    

            
    
                </template>
            
    

        
    

    
    7. 

    
  7. 

        
    

            
    

            
    

        
    

        
    

            
    

            
    

        
    

    
    8. 

    
  8. 

        
    

            
    

            
    

        
    

        
    

            
    
                <script> 
            
    

        
    

    
    9. 

    
  9. 

        
    

            
    

            
    

        
    

        
    

            
    
                export default {
            
    

        
    

    
    10. 

    
  10. 

        
    

            
    

            
    

        
    

        
    

            
    
                // 在此处定义props 
            
    

        
    

    
    11. 

    
  11. 

        
    

            
    

            
    

        
    

        
    

            
    
                props: {
            
    

        
    

    
    12. 

    
  12. 

        
    

            
    

            
    

        
    

        
    

            
    
                // props中定义 接收父组件数据的自定义属性,叫什么都可以,我随便起了个text 
            
    

        
    

    
    13. 

    
  13. 

        
    

            
    

            
    

        
    

        
    

            
    
                text: {
            
    

        
    

    
    14. 

    
  14. 

        
    

            
    

            
    

        
    

        
    

            
    
                type: String, // type 是用来规定此属性接收到的数据的数据类型 
            
    

        
    

    
    15. 

    
  15. 

        
    

            
    

            
    

        
    

        
    

            
    
                default: "未传递时默认的文字" // 这个default是当这个 text 没有接收到传递的数据时的默认值 
            
    

        
    

    
    16. 

    
  16. 

        
    

            
    

            
    

        
    

        
    

            
    
                }
            
    

        
    

    
    17. 

    
  17. 

        
    

            
    

            
    

        
    

        
    

            
    
                }
            
    

        
    

    
    18. 

    
  18. 

        
    

            
    

            
    

        
    

        
    

            
    
                }
            
    

        
    

    
    19. 

    
  19. 

        
    

            
    

            
    

        
    

        
    

            
    
                </script> 
            
    

        
    

    
    20.

父组件中:        标签内 传递数据 

 

    

    
  1. 

        
    

            
    

            
    

        
    

        
    

            
    
                <template>
            
    

        
    

    
    2. 

    
  2. 

        
    

            
    

            
    

        
    

        
    

            
    
                <div id="app"> 
            
    

        
    

    
    3. 

    
  3. 

        
    

            
    

            
    

        
    

        
    

            
    
                <!--  
            
    

        
    

    
    4. 

    
  4. 

        
    

            
    

            
    

        
    

        
    

            
    
                 这里的text就是子组件props里定义的text,这两个名字得一致 
            
    

        
    

    
    5. 

    
  5. 

        
    

            
    

            
    

        
    

        
    

            
    
                 并且传递的数据也要符合 type 规定的数据类型 
            
    

        
    

    
    6. 

    
  6. 

        
    

            
    

            
    

        
    

        
    

            
    
                 text就是传递字符串,:text就是传递动态数据 
            
    

        
    

    
    7. 

    
  7. 

        
    

            
    

            
    

        
    

        
    

            
    
                 --> 
            
    

        
    

    
    8. 

    
  8. 

        
    

            
    

            
    

        
    

        
    

            
    
                <Son text="我是大娃 传给子啦" /> 
            
    

        
    

    
    9. 

    
  9. 

        
    

            
    

            
    

        
    

        
    

            
    
                <Son :text="wenzi" /> 
            
    

        
    

    
    10. 

    
  10. 

        
    

            
    

            
    

        
    

        
    

            
    
                </div> 
            
    

        
    

    
    11. 

    
  11. 

        
    

            
    

            
    

        
    

        
    

            
    
                </template>
            
    

        
    

    
    12. 

    
  12. 

        
    

            
    

            
    

        
    

        
    

            
    

            
    

        
    

    
    13. 

    
  13. 

        
    

            
    

            
    

        
    

        
    

            
    
                <script> 
            
    

        
    

    
    14. 

    
  14. 

        
    

            
    

            
    

        
    

        
    

            
    
                import Son from './components/son.vue';
            
    

        
    

    
    15. 

    
  15. 

        
    

            
    

            
    

        
    

        
    

            
    
                export default {
            
    

        
    

    
    16. 

    
  16. 

        
    

            
    

            
    

        
    

        
    

            
    
                data () {
            
    

        
    

    
    17. 

    
  17. 

        
    

            
    

            
    

        
    

        
    

            
    
                return {
            
    

        
    

    
    18. 

    
  18. 

        
    

            
    

            
    

        
    

        
    

            
    
                wenzi: '我是二娃 传给子啦' 
            
    

        
    

    
    19. 

    
  19. 

        
    

            
    

            
    

        
    

        
    

            
    
                }
            
    

        
    

    
    20. 

    
  20. 

        
    

            
    

            
    

        
    

        
    

            
    
                },
            
    

        
    

    
    21. 

    
  21. 

        
    

            
    

            
    

        
    

        
    

            
    
                components: {
            
    

        
    

    
    22. 

    
  22. 

        
    

            
    

            
    

        
    

        
    

            
    
                Son
            
    

        
    

    
    23. 

    
  23. 

        
    

            
    

            
    

        
    

        
    

            
    
                }
            
    

        
    

    
    24. 

    
  24. 

        
    

            
    

            
    

        
    

        
    

            
    
                }
            
    

        
    

    
    25. 

    
  25. 

        
    

            
    

            
    

        
    

        
    

            
    
                </script> 
            
    

        
    

    
    26.

        如上 虽然我的注释写的很清楚了,但是还是在介绍一下, <Son/> 是子组件的标签,在此标签的基础上书写 子组件props 定义的属性名,并且传递参数具体对应关系和效果如下:

        如上就是第一种我最常用的父传子,其实还有一种方法,但是我一般也不用,很不方便,也贴到下边了,这个是以数组方式声明 

 

    

    
  1. 

        
    

            
    

            
    

        
    

        
    

            
    
                export default {
            
    

        
    

    
    2. 

    
  2. 

        
    

            
    

            
    

        
    

        
    

            
    
                // 在此处定义props 
            
    

        
    

    
    3. 

    
  3. 

        
    

            
    

            
    

        
    

        
    

            
    
                props: ['text']
            
    

        
    

    
    4. 

    
  4. 

        
    

            
    

            
    

        
    

        
    

            
    
                }
            
    

        
    

    
    5. 

    
  5. 

        
    

            
    

            
    

        
    

        
    

            
    
                </script>
            
    

        
    

    
    6. 

    
  6. 

        
    

            
    

            
    

        
    

        
    

            
    

            
    

        
    

    
    7. 

    
  7. 

        
    

            
    

            
    

        
    

        
    

            
    

            
    

        
    

    
    8.

 

2.子传父 $emit

        刚刚说到了在 Vue2.0 子组件不能直接改父组件的数据,否则会报错,这个解决方法就是在子组件中发起一个 自定义事件 ,在父组件监听这个事件,并且定义一个函数来改变数据,具体操作如下:

子组件:        发起一个自定义事件,等待父组件监听到执行函数 

 

    

    
  1. 

        
    

            
    

            
    

        
    

        
    

            
    
                <template>
            
    

        
    

    
    2. 

    
  2. 

        
    

            
    

            
    

        
    

        
    

            
    
                <div> 
            
    

        
    

    
    3. 

    
  3. 

        
    

            
    

            
    

        
    

        
    

            
    
                <h2>son组件</h2> 
            
    

        
    

    
    4. 

    
  4. 

        
    

            
    

            
    

        
    

        
    

            
    
                <p>props:{{ text }}</p> 
            
    

        
    

    
    5. 

    
  5. 

        
    

            
    

            
    

        
    

        
    

            
    
                <button @click="changeTextFn">改变文字</button> 
            
    

        
    

    
    6. 

    
  6. 

        
    

            
    

            
    

        
    

        
    

            
    
                </div> 
            
    

        
    

    
    7. 

    
  7. 

        
    

            
    

            
    

        
    

        
    

            
    
                </template>
            
    

        
    

    
    8. 

    
  8. 

        
    

            
    

            
    

        
    

        
    

            
    

            
    

        
    

    
    9. 

    
  9. 

        
    

            
    

            
    

        
    

        
    

            
    
                <script> 
            
    

        
    

    
    10. 

    
  10. 

        
    

            
    

            
    

        
    

        
    

            
    
                export default {
            
    

        
    

    
    11. 

    
  11. 

        
    

            
    

            
    

        
    

        
    

            
    
                // 在此处定义props 
            
    

        
    

    
    12. 

    
  12. 

        
    

            
    

            
    

        
    

        
    

            
    
                props: {
            
    

        
    

    
    13. 

    
  13. 

        
    

            
    

            
    

        
    

        
    

            
    
                // props中定义 接收父组件数据的自定义属性,叫什么都可以,我随便起了个text 
            
    

        
    

    
    14. 

    
  14. 

        
    

            
    

            
    

        
    

        
    

            
    
                text: {
            
    

        
    

    
    15. 

    
  15. 

        
    

            
    

            
    

        
    

        
    

            
    
                type: String, // type 是用来规定此属性接收到的数据的数据类型 
            
    

        
    

    
    16. 

    
  16. 

        
    

            
    

            
    

        
    

        
    

            
    
                default: "未传递时默认的文字" // 这个default是当这个 text 没有接收到传递的数据时的默认值 
            
    

        
    

    
    17. 

    
  17. 

        
    

            
    

            
    

        
    

        
    

            
    
                }
            
    

        
    

    
    18. 

    
  18. 

        
    

            
    

            
    

        
    

        
    

            
    
                },
            
    

        
    

    
    19. 

    
  19. 

        
    

            
    

            
    

        
    

        
    

            
    

            
    

        
    

    
    20. 

    
  20. 

        
    

            
    

            
    

        
    

        
    

            
    
                methods: {
            
    

        
    

    
    21. 

    
  21. 

        
    

            
    

            
    

        
    

        
    

            
    
                // 按钮点击事件 
            
    

        
    

    
    22. 

    
  22. 

        
    

            
    

            
    

        
    

        
    

            
    
                changeTextFn () {
            
    

        
    

    
    23. 

    
  23. 

        
    

            
    

            
    

        
    

        
    

            
    
                // 发起自定义事件,名字叫什么都行,第一个参数是事件名,之后再跟着的都是传递的参数 
            
    

        
    

    
    24. 

    
  24. 

        
    

            
    

            
    

        
    

        
    

            
    
                this.$emit('changeFn', '我想变成三娃')
            
    

        
    

    
    25. 

    
  25. 

        
    

            
    

            
    

        
    

        
    

            
    
                }
            
    

        
    

    
    26. 

    
  26. 

        
    

            
    

            
    

        
    

        
    

            
    
                }
            
    

        
    

    
    27. 

    
  27. 

        
    

            
    

            
    

        
    

        
    

            
    
                }
            
    

        
    

    
    28. 

    
  28. 

        
    

            
    

            
    

        
    

        
    

            
    
                </script> 
            
    

        
    

    
    29.

        我先在原有的代码上添加了一个<button>按钮,在点击调用的函数中,通过 $emit 来发起事件并且可以传递参数

格式:        this.$emit('changeFn', '我想变成三娃') 

格式:        this.$emit('自定义事件名', 传递的参数) 

 

父组件:        行内监听子组件的 自定义事件名(函数上不用写参数,在 methods 中直接写形参就行) 

 

    

    
  1. 

        
    

            
    

            
    

        
    

        
    

            
    
                <template>
            
    

        
    

    
    2. 

    
  2. 

        
    

            
    

            
    

        
    

        
    

            
    
                <div id="app"> 
            
    

        
    

    
    3. 

    
  3. 

        
    

            
    

            
    

        
    

        
    

            
    
                <Son :text="wenzi" @changeFn="changeFn" /> 
            
    

        
    

    
    4. 

    
  4. 

        
    

            
    

            
    

        
    

        
    

            
    
                </div> 
            
    

        
    

    
    5. 

    
  5. 

        
    

            
    

            
    

        
    

        
    

            
    
                </template>
            
    

        
    

    
    6. 

    
  6. 

        
    

            
    

            
    

        
    

        
    

            
    

            
    

        
    

    
    7. 

    
  7. 

        
    

            
    

            
    

        
    

        
    

            
    
                <script> 
            
    

        
    

    
    8. 

    
  8. 

        
    

            
    

            
    

        
    

        
    

            
    
                import Son from './components/son.vue';
            
    

        
    

    
    9. 

    
  9. 

        
    

            
    

            
    

        
    

        
    

            
    
                export default {
            
    

        
    

    
    10. 

    
  10. 

        
    

            
    

            
    

        
    

        
    

            
    
                data () {
            
    

        
    

    
    11. 

    
  11. 

        
    

            
    

            
    

        
    

        
    

            
    
                return {
            
    

        
    

    
    12. 

    
  12. 

        
    

            
    

            
    

        
    

        
    

            
    
                wenzi: '我是二娃 传给子啦' 
            
    

        
    

    
    13. 

    
  13. 

        
    

            
    

            
    

        
    

        
    

            
    
                }
            
    

        
    

    
    14. 

    
  14. 

        
    

            
    

            
    

        
    

        
    

            
    
                },
            
    

        
    

    
    15. 

    
  15. 

        
    

            
    

            
    

        
    

        
    

            
    

            
    

        
    

    
    16. 

    
  16. 

        
    

            
    

            
    

        
    

        
    

            
    
                components: {
            
    

        
    

    
    17. 

    
  17. 

        
    

            
    

            
    

        
    

        
    

            
    
                Son
            
    

        
    

    
    18. 

    
  18. 

        
    

            
    

            
    

        
    

        
    

            
    
                },
            
    

        
    

    
    19. 

    
  19. 

        
    

            
    

            
    

        
    

        
    

            
    

            
    

        
    

    
    20. 

    
  20. 

        
    

            
    

            
    

        
    

        
    

            
    
                methods: {
            
    

        
    

    
    21. 

    
  21. 

        
    

            
    

            
    

        
    

        
    

            
    
                // 监听子组件自定义事件 
            
    

        
    

    
    22. 

    
  22. 

        
    

            
    

            
    

        
    

        
    

            
    
                changeFn (newText) {
            
    

        
    

    
    23. 

    
  23. 

        
    

            
    

            
    

        
    

        
    

            
    
                // 这里的形参接受到的就是子组件中 第二个参数传递的数值 
            
    

        
    

    
    24. 

    
  24. 

        
    

            
    

            
    

        
    

        
    

            
    
                this.wenzi = newText
            
    

        
    

    
    25. 

    
  25. 

        
    

            
    

            
    

        
    

        
    

            
    
                }
            
    

        
    

    
    26. 

    
  26. 

        
    

            
    

            
    

        
    

        
    

            
    
                }
            
    

        
    

    
    27. 

    
  27. 

        
    

            
    

            
    

        
    

        
    

            
    
                }
            
    

        
    

    
    28. 

    
  28. 

        
    

            
    

            
    

        
    

        
    

            
    
                </script> 
            
    

        
    

    
    29.

对应关系和效果图如下:

 

 

 

3.跨组件通信 event-bus

        如果两个组件的关系非常的复杂或者没有未产生直接联系，那么通过父子组件通讯是非常麻烦的。这时候可以使用通用的组件通讯方案：事件总线（event-bus)

        按照我的习惯,我会将事件总线创建到 main.js 中,这个使用原理是将bus挂载到Vue原型上,这样就可以保证所有的组件都能通过 this.bus 访问到事件总线,从而通过同一个事件总线监听同一个事件,具体原理和父子传参差不多,都是 $emit 传递数据, 只不过接收变成了$on 

        我这次以送礼物举例用了两个关系不大的组件 分别是 男组件 和 女组件 (随便起的名)具体如下图:

发送数据 男组件:   

    this.bus.$emit('自定义事件名',传递的参数)  

 

    

    
  1. 

        
    

            
    

            
    

        
    

        
    

            
    
                <template>
            
    

        
    

    
    2. 

    
  2. 

        
    

            
    

            
    

        
    

        
    

            
    
                <div> 
            
    

        
    

    
    3. 

    
  3. 

        
    

            
    

            
    

        
    

        
    

            
    
                <h1>男组件</h1> 
            
    

        
    

    
    4. 

    
  4. 

        
    

            
    

            
    

        
    

        
    

            
    
                <button @click="sendGiftFn">送礼物</button> 
            
    

        
    

    
    5. 

    
  5. 

        
    

            
    

            
    

        
    

        
    

            
    
                </div> 
            
    

        
    

    
    6. 

    
  6. 

        
    

            
    

            
    

        
    

        
    

            
    
                </template>
            
    

        
    

    
    7. 

    
  7. 

        
    

            
    

            
    

        
    

        
    

            
    

            
    

        
    

    
    8. 

    
  8. 

        
    

            
    

            
    

        
    

        
    

            
    
                <script> 
            
    

        
    

    
    9. 

    
  9. 

        
    

            
    

            
    

        
    

        
    

            
    
                export default {
            
    

        
    

    
    10. 

    
  10. 

        
    

            
    

            
    

        
    

        
    

            
    
                data () {
            
    

        
    

    
    11. 

    
  11. 

        
    

            
    

            
    

        
    

        
    

            
    
                return {
            
    

        
    

    
    12. 

    
  12. 

        
    

            
    

            
    

        
    

        
    

            
    
                gift: '玫瑰花' 
            
    

        
    

    
    13. 

    
  13. 

        
    

            
    

            
    

        
    

        
    

            
    
                }
            
    

        
    

    
    14. 

    
  14. 

        
    

            
    

            
    

        
    

        
    

            
    
                },
            
    

        
    

    
    15. 

    
  15. 

        
    

            
    

            
    

        
    

        
    

            
    

            
    

        
    

    
    16. 

    
  16. 

        
    

            
    

            
    

        
    

        
    

            
    
                methods: {
            
    

        
    

    
    17. 

    
  17. 

        
    

            
    

            
    

        
    

        
    

            
    
                sendGiftFn () {
            
    

        
    

    
    18. 

    
  18. 

        
    

            
    

            
    

        
    

        
    

            
    
                // 通过 bus 事件总线发起 自定义事件,并且传递参数(第一个是事件名,第二个开始是参数) 
            
    

        
    

    
    19. 

    
  19. 

        
    

            
    

            
    

        
    

        
    

            
    
                this.bus.$emit('sendMessage', this.gift)
            
    

        
    

    
    20. 

    
  20. 

        
    

            
    

            
    

        
    

        
    

            
    
                }
            
    

        
    

    
    21. 

    
  21. 

        
    

            
    

            
    

        
    

        
    

            
    
                }
            
    

        
    

    
    22. 

    
  22. 

        
    

            
    

            
    

        
    

        
    

            
    
                }
            
    

        
    

    
    23. 

    
  23. 

        
    

            
    

            
    

        
    

        
    

            
    
                </script> 
            
    

        
    

    
    24.

接收数据 女组件:         

 this.bus.$on('监听的事件名',(e)=>{ e这个形参所接收的就是监听事件所携带的参数数据 })  

 

    

    
  1. 

        
    

            
    

            
    

        
    

        
    

            
    
                <template>
            
    

        
    

    
    2. 

    
  2. 

        
    

            
    

            
    

        
    

        
    

            
    
                <div> 
            
    

        
    

    
    3. 

    
  3. 

        
    

            
    

            
    

        
    

        
    

            
    
                <h1>女组件</h1> 
            
    

        
    

    
    4. 

    
  4. 

        
    

            
    

            
    

        
    

        
    

            
    
                <p>来自男组件的礼物:{{ info }}</p> 
            
    

        
    

    
    5. 

    
  5. 

        
    

            
    

            
    

        
    

        
    

            
    
                </div> 
            
    

        
    

    
    6. 

    
  6. 

        
    

            
    

            
    

        
    

        
    

            
    
                </template>
            
    

        
    

    
    7. 

    
  7. 

        
    

            
    

            
    

        
    

        
    

            
    

            
    

        
    

    
    8. 

    
  8. 

        
    

            
    

            
    

        
    

        
    

            
    
                <script> 
            
    

        
    

    
    9. 

    
  9. 

        
    

            
    

            
    

        
    

        
    

            
    
                export default {
            
    

        
    

    
    10. 

    
  10. 

        
    

            
    

            
    

        
    

        
    

            
    
                data () {
            
    

        
    

    
    11. 

    
  11. 

        
    

            
    

            
    

        
    

        
    

            
    
                return {
            
    

        
    

    
    12. 

    
  12. 

        
    

            
    

            
    

        
    

        
    

            
    
                info: "" 
            
    

        
    

    
    13. 

    
  13. 

        
    

            
    

            
    

        
    

        
    

            
    
                }
            
    

        
    

    
    14. 

    
  14. 

        
    

            
    

            
    

        
    

        
    

            
    
                },
            
    

        
    

    
    15. 

    
  15. 

        
    

            
    

            
    

        
    

        
    

            
    

            
    

        
    

    
    16. 

    
  16. 

        
    

            
    

            
    

        
    

        
    

            
    
                created () {
            
    

        
    

    
    17. 

    
  17. 

        
    

            
    

            
    

        
    

        
    

            
    
                // e 就是 sendMessage 这个事件所传递的数据 
            
    

        
    

    
    18. 

    
  18. 

        
    

            
    

            
    

        
    

        
    

            
    
                this.bus.$on("sendMessage", (e) => {
            
    

        
    

    
    19. 

    
  19. 

        
    

            
    

            
    

        
    

        
    

            
    
                this.info = e;
            
    

        
    

    
    20. 

    
  20. 

        
    

            
    

            
    

        
    

        
    

            
    
                });
            
    

        
    

    
    21. 

    
  21. 

        
    

            
    

            
    

        
    

        
    

            
    
                }
            
    

        
    

    
    22. 

    
  22. 

        
    

            
    

            
    

        
    

        
    

            
    
                }
            
    

        
    

    
    23. 

    
  23. 

        
    

            
    

            
    

        
    

        
    

            
    
                </script> 
            
    

        
    

    
    24. 

    
  24. 

        
    

            
    

            
    

        
    

        
    

            
    

            
    

        
    

    
    25. 

    
  25. 

        
    

            
    

            
    

        
    

        
    

            
    
                <style> 
            
    

        
    

    
    26. 

    
  26. 

        
    

            
    

            
    

        
    

        
    

            
    
                </style> 
            
    

        
    

    
    27.

具体效果如下:

 

综上所述,就是我在工作中总结出来的一些组建通信的方法,希望您看到这里会有所收获

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

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

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

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

评论(0) 浏览(2630)

JavaScript作用域

前端达人

  • 作用域简介

  • JavaScript 作用域：就是代码名字，在某个范围内起的作用和效果。目的是为了提高程序的可靠性，减少命名冲突；

  • 作用域是可访问变量的集合。

  • 在 JavaScript 中, 对象和函数同样也是变量。

  • 在 JavaScript 中, 作用域为可访问变量，对象，函数的集合。

  • JavaScript 函数作用域: 作用域在函数内修改。

  •  变量的作用域：根据作用域的不同我们的变量可以分为全局变量和局部变量

  • 局部作用域 

    
                    
      

                        
    1. 

                            
      

                                
      

                                
      

                            
      

                            
      

                                
      
                                    function fn() {
                                
      

                            
      

                        
      2. 

                        
    2. 

                            
      

                                
      

                                
      

                            
      

                            
      

                                
      
                                        var str = '我是一个局部作用域';
                                
      

                            
      

                        
      3. 

                        
    3. 

                            
      

                                
      

                                
      

                            
      

                            
      

                                
      
                                    }
                                
      

                            
      

                        
      4. 

                        
    4. 

                            
      

                                
      

                                
      

                            
      

                            
      

                                
      
                                    console.log(str);    // 这时是访问不到的
                                
      

                            
      

                        
      5. 

                        
    5. 

                            
      

                                
      

                                
      

                            
      

                            
      

                                
      

                                
      

                            
      

                        
      6. 

                        
    6. 

                            
      

                                
      

                                
      

                            
      

                            
      

                                
      
                                    // 局部变量：在局部作用域下的变量   或者在函数内部的变量就是局部变量
                                
      

                            
      

                        
      7. 

                        
    7. 

                            
      

                                
      

                                
      

                            
      

                            
      

                                
      
                                    // 注意：函数的形参也可以看做是局部变量
                                
      

                            
      

                        
      8. 

                        
    8. 

                            
      

                                
      

                                
      

                            
      

                            
      

                                
      

                                
      

                            
      

                        
      9. 

                        
    9. 

                            
      

                                
      

                                
      

                            
      

                            
      

                                
      
                                    function fun(aru) {
                                
      

                            
      

                        
      10. 

                        
    10. 

                            
      

                                
      

                                
      

                            
      

                            
      

                                
      
                                        var num1 = 50; // num1就是局部变量  只能在函数内部使用
                                
      

                            
      

                        
      11. 

                        
    11. 

                            
      

                                
      

                                
      

                            
      

                            
      

                                
      
                                        console.log(num1); // 在这里使用是正确的 但是在函数外面使用报错
                                
      

                            
      

                        
      12. 

                        
    12. 

                            
      

                                
      

                                
      

                            
      

                            
      

                                
      
                                        num2 = 70;
                                
      

                            
      

                        
      13. 

                        
    13. 

                            
      

                                
      

                                
      

                            
      

                            
      

                                
      
                                        console.log(num2); // num2在这里可以正常输出
                                
      

                            
      

                        
      14. 

                        
    14. 

                            
      

                                
      

                                
      

                            
      

                            
      

                                
      

                                
      

                            
      

                        
      15. 

                        
    15. 

                            
      

                                
      

                                
      

                            
      

                            
      

                                
      

                                
      

                            
      

                        
      16. 

                        
    16. 

                            
      

                                
      

                                
      

                            
      

                            
      

                                
      
                                        console.log(aru);
                                
      

                            
      

                        
      17. 

                        
    17. 

                            
      

                                
      

                                
      

                            
      

                            
      

                                
      
                                        // 首先在fun括号里面传入一个hello 然后在函数内部输出是正确的但是在函数外部输出是错误的
                                
      

                            
      

                        
      18. 

                        
    18. 

                            
      

                                
      

                                
      

                            
      

                            
      

                                
      

                                
      

                            
      

                        
      19. 

                        
    19. 

                            
      

                                
      

                                
      

                            
      

                            
      

                                
      
                                    }
                                
      

                            
      

                        
      20. 

                        
    20. 

                            
      

                                
      

                                
      

                            
      

                            
      

                                
      
                                    //fun(); 
                                
      

                            
      

                        
      21. 

                        
    21. 

                            
      

                                
      

                                
      

                            
      

                            
      

                                
      
                                    fun('hello');
                                
      

                            
      

                        
      22. 

                        
    22. 

                            
      

                                
      

                                
      

                            
      

                            
      

                                
      
                                    //console.log(num1);// 报错 num1是局部变量
                                
      

                            
      

                        
      23. 

                        
    23. 

                            
      

                                
      

                                
      

                            
      

                            
      

                                
      
                                    console.log(num2); // 这里可以输出num2是因为num2是特殊的全局变量
                                
      

                            
      

                        
      24.

  • 全局作用域：

    全局变量：在全局作用域下的变量称为全局变量，在全局下都可以使用
    // 注意：如果在函数内部没有声明直接赋值的变量也属于全局变量
      

    
                    
      

                        
    1. 

                            
      

                                
      

                                
      

                            
      

                            
      

                                
      
                                    var num = 10; //num就是一个全局变量
                                
      

                            
      

                        
      2. 

                        
    2. 

                            
      

                                
      

                                
      

                            
      

                            
      

                                
      
                                    console.log(num);
                                
      

                            
      

                        
      3. 

                        
    3. 

                            
      

                                
      

                                
      

                            
      

                            
      

                                
      

                                
      

                            
      

                        
      4. 

                        
    4. 

                            
      

                                
      

                                
      

                            
      

                            
      

                                
      

                                
      

                            
      

                        
      5. 

                        
    5. 

                            
      

                                
      

                                
      

                            
      

                            
      

                                
      
                                    function fn() {
                                
      

                            
      

                        
      6. 

                        
    6. 

                            
      

                                
      

                                
      

                            
      

                            
      

                                
      
                                        console.log('全局变量在函数内部也可以使用' + num);
                                
      

                            
      

                        
      7. 

                        
    7. 

                            
      

                                
      

                                
      

                            
      

                            
      

                                
      

                                
      

                            
      

                        
      8. 

                        
    8. 

                            
      

                                
      

                                
      

                            
      

                            
      

                                
      
                                    }
                                
      

                            
      

                        
      9. 

                        
    9. 

                            
      

                                
      

                                
      

                            
      

                            
      

                                
      
                                    fn();
                                
      

                            
      

                        
      10.

  • 作用域链

  • 作用域链：内部函数访问外部函数的变量，采取的是链式查找的方式决定取哪个值 这种结构我们称为作用域链 就近原则 

  • 
                    
      

                        
    1. 

                            
      

                                
      

                                
      

                            
      

                            
      

                                
      
                                    var num = 10;
                                
      

                            
      

                        
      2. 

                        
    2. 

                            
      

                                
      

                                
      

                            
      

                            
      

                                
      
                                    function fn() { //外部函数
                                
      

                            
      

                        
      3. 

                        
    3. 

                            
      

                                
      

                                
      

                            
      

                            
      

                                
      
                                        var num = 20;
                                
      

                            
      

                        
      4. 

                        
    4. 

                            
      

                                
      

                                
      

                            
      

                            
      

                                
      
                                        function fun() { //内部函数
                                
      

                            
      

                        
      5. 

                        
    5. 

                            
      

                                
      

                                
      

                            
      

                            
      

                                
      
                                            console.log(num);
                                
      

                            
      

                        
      6. 

                        
    6. 

                            
      

                                
      

                                
      

                            
      

                            
      

                                
      
                                        }
                                
      

                            
      

                        
      7. 

                        
    7. 

                            
      

                                
      

                                
      

                            
      

                            
      

                                
      
                                        fun();
                                
      

                            
      

                        
      8. 

                        
    8. 

                            
      

                                
      

                                
      

                            
      

                            
      

                                
      
                                    }
                                
      

                            
      

                        
      9. 

                        
    9. 

                            
      

                                
      

                                
      

                            
      

                            
      

                                
      
                                    fn();
                                
      

                            
      

                        
      10.

  • 作用域链总结：

  • 内部函数访问外部函数的时候，采取的是链式查找的方式，一层一层往外查找

  • 先是查找外一层，有没有，没有在往外接着查找，找到了我就输出相应的结果

  • 没有的话继续往上找就可以了，所以这个方法，我们称为作用域链

  • 简单总结就是就近原则，谁离我近我就执行谁


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

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

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

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

评论(0) 浏览(2796)

前端脚手架的执行原理

前端达人

最近收到几位老师留言，提到一些脚手架相关的问题，跟着自己浅显的理解，以vue脚手架在windows系统上的执行为例做个分析。

正题之前，先说几个概念

脚手架的本质：运行在操作系统上node客户端里的可执行程序。

脚手架做了哪些工作？一般脚手架的工作内容主要包括三方面：

  1. 创建项目+通用代码： 埋点、http请求、工具方法、组件库。
  2. git操作： 创建仓库、代码冲突、远程代码同步、创建版本、发布打tag。
  3. 构建+发布上线： 依赖安装和构建、资源上传CDN、域名绑定、测试\正是服务器。

脚手架给我们带来哪些好处？提升前端研发效能！（就这么一句空话~~）从其为我们带来的最终体验上来讲，是实现研发过程的：

  1. 自动化：项目重复代码的copy、git操作、发布上线操作；
  2. 标准化：项目创建、git flow、发布流程、回滚流程；
  3. 数据化：使研发过程系统化、数据化、使得研发过程可量化。

脚手架的命令执行： 

vue create csjName –g
  1. vue 是脚手架名称
  2. create 是command，脚手架中已注册的命令
  3. csjName 是params，命令的参数
  4. –g 是options，命令的配置
  5. 一般options后也会有参数，我们称之为配置参数，上面命令其实是省略了true 
    vue create csjName –g true

下面说一下vue脚手架的执行过程

环境要求，已安装node

先来思考一个问题：

我们安装vue脚手架时，安装的是@vue/cli 

npm install @vue/cli –g

为什么创建项目的时候用的却是vue 

vue create projectName

咱们先看 npm install @vue/cli –g命令完成拉资源后，在操作系统中都做了什么。

命令执行完成后，咱们切换到D:\mysoft\node\node_global（这个是自己安装node时设置的全局npm包的安装路径，并且已配置到环境变量中，不清楚的老师可以去熟悉一下node的安装教程），发现此路径下已经生成了一个cmd命令vue.cmd，因为此路径已配置到环境变量中，所以在cmd我们必然可以直接输入vue来执行vue.cmd。

那么vue.cmd文件中又执行了什么？打开vue.cmd

可以看到，其实它是去调用了vue脚手架资源路径下的vue.js文件

正如我们在这个路径下执行 

node vue.js create csjName

是一样的。脚手架的命令及其参数的注册与解析都在此文件中完成。具体的代码逻辑不再深入讲了，因为我也没看。。。。。

再来思考个问题，在完成脚手架资源的下载后，为什么会在D:\mysoft\node\node_global下自动生成一个vue.cmd？我们能不能自定义这个脚手架的名字？

其实每个脚手架都是npm项目，vue.cmd是在此npm项目的package.json中配置的，我们也可以对其自定义修改。

欲修改脚手架名称，直接去D:\mysoft\node\node_global下重命名vue.cmd即可。如果是自己的脚手架，可在npm项目内的package.json中通过上述配置，指定脚手架的名称。

补充

另外在linux或mac系统中，其实node\node_global下并未生成vue.cmd，而是生成了一个叫做vue软链接，并且链向了node_global\node_modules\@vue\cli下的vue.js。

而且在linux和mac系统中，并未使用node vue.js，而是直接执行了vue.js那是因为在vue.js顶部已通过Shebang声明当前文件默认使用系统中环境变量/usr/bin/env 下的node解释器执行。此语法在windows系统中无效。

以上是对vue脚手架在windows中执行过程的浅显理解。不到之处，还请指正~~

最后安利一个自己已发布的npm项目csjtools，旨在打造一个前端通用的工具库，就是自己平常封装的js工具函数，如对timeout的异步封装、对storage的面向对象的封装、对日期格式的转换、还有对象之间的深比较等，目前工具还不够丰富，欢迎大家一起使用&完善，一个人的力量很小~~ 

npm install csjtools -g


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

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

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

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

评论(0) 浏览(2867)

重新设计东南亚头部在线超市的真实案例

lanlanwork


I. 发现

客户访谈

由于这位甲方的合作态度良好，所以设计师有机会与 SESA 的创始人和产品经理进行了 2-3 次会议。

借此了解了业务目标、用户需求和技术限制等关键问题：

图片

主要问题：

  • 低转化率：杂乱的界面使用户很难浏览商品。
  • 手机端体验不友好：几乎 90% 的用户是通过手机访问网站，但手机版的设计不够理想。
  • 手机端糟糕的界面和体验：目前他们使用的是现有的网站模板，根据目标用户的反馈，缺乏优化而且加载速度很慢。

客户需求

  • 一键式购物
  • 轻松的界面和体验
  • 无缝的商品搜索
  • 折扣和优惠更容易被看到
  • 使用网站时能感觉熟悉而简便

成功指标

  • 增加客单价
  • 增强人们的对品牌的认知感
  • 增加用户和订单数量
  • 无缝的体验
  • 让健康的生活方式更加受欢迎、评价、容易取得，更加有趣而美好
  • 提供并教育用户健康的生活方式，并转化为愉快美好的生活

 

目标人群

根据产品团队提供的数据，整理出了目标人群的特征：

图片

 

II. 构思

人物角色

根据以上信息，整理出了两个完全不同的人物角色：

图片图片

 

故事版

没有区分人物角色的故事版：

图片

目标用户的故事版：

图片

 

体验地图

思考分析用户旅程的五个阶段（探索网站、比较商品、确认下单、完成购买和接收配送）和用户感知的三个方面（行为、思考和感知），制作了体验地图：

图片

将当中的关键信息挑选出来：

图片

 

竞品分析

设计师找到了三家主要竞品，先大概了解他们的特色和优势：

图片图片图片

然后从 Google Play 的评论中寻找竞品的问题，这样就可以思考如何战胜他们：

图片图片

P.S. 评论分析是一种简单有效的竞品分析利器（也可以用来分析自己的产品），具体方法我之前有分享过：别总想着数据分析/用户调研，先把评论分析做了吧！

 

III. 设计

信息导航

先把大致的用户流程确定下来，这样对整个产品就有了一个整体构思：

图片

 

线框图

然后用手画出线框图，定下页面的整体布局：

图片

 

低保真

将线框图手稿用绘图软件细化，制作成低保真方案，用来向客户展示和做用户测试：

图片

图片

 

IV. 完成

可用性测试

找用户做测试时，用的是低保真可交互原型。

根据测试发现的问题，设计师直接将优化方案运用到了高保真方案上，所以下面整理的问题都用高保真方案来配图展示：

  • 1. 自动定位：测试之前用户必须手动搜索位置。
  • 2. 属性选择：由于客户想要一键式购物，所以当用户点击熟悉（通常是重量）右侧的箭头时，可以反转卡片进行详细选择。

图片

  • 3. 促销展示：原本设计了三个促销区，但是测试中发现用户面对大量的信息无法充分理解，所以移除了一部分，只保留了头图和分类优惠。

  • 4. 商品导航：为了避免用户迷路，将商品分类导航放在了所有页面顶部，并且悬停时展示子分类和相关文章。

 

高保真

图片

 

响应式

这个网站需要具备很高的响应式能力，不论在 PC 端还是手机端，都能轻松使用。

但由于 PC 端和手机端的尺寸相差太大了，所以不得不使用断点（Breakpoint）来判断用户当前处在哪个端，并展示相应的界面。

这个断点的概念在栅格系统很常用到，指的是当界面尺寸缩小或增大到某个（或几个）零界点时，间距大小或其它界面元素发生突变。

图片

上图来源：三种最主流的响应式栅格

 

这个方案的对于移动端的特殊处理包括：

  • 确保商品分类的位置，方便用户记忆
  • 使用汉堡菜单
  • 提供模仿原生 APP 的吸底导航

图片

 

Before&After

最后对比一下优化前后的方案：

图片

图片
图片
图片

图片

 

原文地址：体验进阶（公众号）

作者：设计师ZoeYZ

转载请注明：学UI网》重新设计东南亚头部在线超市的真实案例

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

截屏2021-05-13 上午11.41.03.png

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

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




评论(0) 浏览(2508)

原子设计方法论！值得一学的设计思维模式

lanlanwork


1、什么是原子设计？

原子设计是创建设计系统的理论方法，分为原子、分子、组织、模板、页面五个层次。从最基础的原子开始，原子构成分子，分子组成组织，相互协作以创造出更有效的页面。

原子设计借鉴了化学中看待事物的方式，并将其应用在数字产品中。例如我们看的界面是由一些基本的元素组成，文字，颜色和图标等都是一个个原子。

图片

原子设计是一种思维模式，并不特指某一种设计风格或框架。通过原子设计理论，将产品和页面联系为一个有机的整体，其中的每个小元素都发挥着至关重要的作用。

 

2、原子设计方法论: 从原子到产品

原子设计有特定的框架，方便帮助设计师组织思路并在设计过程中作为指导。

 

原子

原子指化学反应不可再分的基本微粒，虽然基础但会对分子和个体的形成产生很大的影响。

同理在设计中，原子是构成设计的最基础的元素，可以是一个icon、一种字体…本身不具备特有的功能但这些基础元素同样值得重视。

图片

 

分子

分子由原子构成，以一定的次序和排列方式结合成分子。回到设计中，多个设计元素组合在一起，也会创造出一种新东西——具有明确功能性的组件。

图片

原子设计强大的地方在于，可以为分子(组件)的创造分配时间，以确保组件具有明确的意义和功能。

 

组织

不同的分子组合形成组织，在设计中各种不同的组件组合在一起，形成一个完整的功能模块，例如在首页轮播图模块，有图像、文字等元素，还有按钮、导航箭头等组件。

利用组织这个概念能帮助设计师建立模块化意识，对页面结构有更深入的理解。

图片

 

模板

通过元素、组件和功能模块的相互关联，从而得到产品的模板即产品框架，也可以理解为产品的低保真线框图。

图片

在这个阶段，产品的信息架构和可视化的层次结构变得非常重要。产品页面、搜索结果页、主页等都有各自的模板，会显示内容的结构和基本的原型，方便后期使用。

 

页面

在模板基础上，继续添加需要的细节，最终会形成完整的页面，即产品的高保真原型。

这个阶段中需要注意的是，页面中所有的占位符尽可能提供真实的内容——真实的图像、真实的文案。

图片

对于完成的页面，我们可以利用原子设计的灵活性来调整和优化页面设计。

比如当有某些地方的设计没有达到预期，可以灵活调整页面中的某个分子或组织模块来实现想要的效果。

 

3、原子设计的优势

灵活性和适应性

原子设计是在设计过程中构建事物的方式，但它并不限制对环境变化做出反应的自由。

通过为产品中的每种类型的内容创建组件和模式，获得一个灵活的系统。模板为产品的一致性提供了一定的支撑，后期既可以按这些模板原型快速设计，也可以根据需求灵活调整。

原子设计相当于将设计内容纳入到一个模式里，组成的页面不仅拥有准确的内容，并能以最好的样式展现出来。

图片

 

系统模式

原子设计鼓励设计师投入时间和精力来创建整个系统，以便在产品设计的最后阶段，能够以一种高效的方式灵活地完成设计工作。

图片

 

更少的组件，更高效的开发

利用原子设计可以确保在项目过程中组件的数量会受到一定的控制，避免团队重复设计同一个组件的多个版本或提供样式差不多的副本。

图片

控制UI组件的数量，带来的好处之一就是开发的效率会变得更高。有了以原子设计方法为基础的理论架构，设计过程的每个环节会紧紧串联在一起，避免混乱。

 

最后

原子设计成为一种用户体验设计方法，以全新的方式带领大家设计每一个元素、组件以及页面，通过这样的方法论有助于设计师构建一个完整的设计系统。

 

原文地址：Clip设计夹（公众号）

作者：Clippp

转载请注明：学UI网》原子设计方法论！值得一学的设计思维模式

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

截屏2021-05-13 上午11.41.03.png

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

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



评论(0) 浏览(2776)

2021 必备的超赞神器，用上它，效率都要提升三倍！！

lanlanwork


图片
上图就是这个神器制作出来的一些效果，之前看Dribble上面有很多类似的设计，现在终于知道它们大部分来源于这个神器。
下面我也找了一些案例，大家一起来看看。
图片
图片
图片
这样看，效果还是真的不错，它支持颜色修改、样式修改，目前一共有11种几何样式。
图片
好了，现在下面正式介绍这个传说中的神器，我相信大家一定会喜欢上的。
图片
上图就是这个神器的基本外貌，一共11种基础类型，当点击其中一个进去后，可以进行编辑。
这里我点击上图中的第二个模式（MIXTAPE）进去。
图片
如果大家英文不好，可以将整个页面翻译成中文，Google自带的翻译。
进入这个页面，大家可以根据自己喜欢的风格调整样式，同时还可以修改颜色。
图片

比如我可以选择8X12列和行的几何布局。

图片
对颜色、列和行、开启阴影调整，得到如上效果。
图片

最终可以导出一张高清大图（3240X4860），尺寸是完全够用的。

图片

随便调整下又是一张不错的几何背景，还可以作为作品集封面。好了，关键时刻来了，神器的网址已经打包好，大家可以拿去使用。

领取方式如下：添加小编微信，备注：神器699，小编会将下载地址发给你（小编不是机器人，回复会慢一些，大家稍等）。

 

原文地址： 功夫UX（公众号）
作者： 功夫UX

转载请注明：学UI网》2021 必备的超赞神器，用上它，效率都要提升三倍！！

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

截屏2021-05-13 上午11.41.03.png

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

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



评论(0) 浏览(2537)

需求太碎？设计师如何在小业务中提炼价值

lanlanwork


Chapter One .
理清小业务的业务目标

相对于大业务（例如网站改版），小业务因为简单，其业务目标界定常容易被忽略。在日常设计中常会遇见设计师在不知道业务目标是什么、目标模糊、目标不正确的情况，直接从梳理小业务具备哪些功能入手，分析下现状问题后开始制定设计策略，这往往会导致设计出现解决不了关键问题、出现偏差情况。产品功能本身只是满足用户需求和实现业务目标的服务载体，只是策略的表象。理清小业务所承担的业务目标是前提，那么如何理清呢？

 

理清业务目标

小业务目标来自大业务目标，对大业务的业务目标进行一级级向下拆解后，即可获得小业务对应的目标。目标拆解需要遵循MECE原则，拆解方法包含：二分法、过程法、要素法、公式法、矩阵法。（tips：目标的拆解有一定难度）

图片

Dapp设计详情为例，在酷家乐大增长业务背景下，用户活跃和用户留存为核心的目标，设计详情处于设计路径的一个节点，拆解得到设计详情的5个主要业务目标：

  • 设计详情-用户周活跃
  • 设计详情-新用户留存
  • 设计详情-老用户留存
  • 设计详情-内容投稿数
  • 设计详情-内容分享数
图片

业务目标可分为2个类别：

  • 第一类别：符合用户意愿，如活跃、留存，在满足用户需求的情况下可以自然达成；
  • 第二类别：不符合用户意愿，如内容投稿、内容分享，用户不太会主动去完成，需要去创造动机，激励用户进行。

 

Chapter Two .
挖掘小业务关联的用户需求场景

有小业务的业务目标后，第二步就需要给用户提供价值满足用户需求，以此来实现业务目标的达成。梳理清楚小业务服务了哪些用户需求是提供价值的前提，那如何获取用户需求场景呢？

 

用户访谈——获取相关用户需求场景

用户需求场景可以帮我们清晰了解到用户使用产品的原因。用户需求场景可以一句话进行界定，包含四个关键要素，其中需求本身最为核心，需要挖掘出当前诉求和其背后的潜在需求。

“在【某环境下】，【某用户】做了【某事】来满足【某需求】”

图片

用户访谈为了挖掘到更为深入用户需求场景的要素信息。以设计师入行年限分组（1-3年、3-5年、5年以上），每次分组访谈2-3个设计师。梳理出设计详情相关的8个需求场景：

图片

访谈信息整合如下

图片

 

规整用户需求场景

在业务访谈中获取的场景往往都是碎片化的，碎片化场景对设计指导容易出现偏差，需要把场景结构化，为后续的方案设计提供依据。我把获得的场景按照设计师设计流程进行规整，按设计前、设计中、设计后三个阶段进行划分。

图片

以上梳理了设计详情相关的用户需求场景，再来看原设计详情只基础满足了资料管理和方案展示的2个单一场景，在设计师的整个设计流程中只占了一部分。从设计层面来看，该2个场景局限在方案设计大场景中，设计更多做的是对其方案设计操作的体验优化，在原有较好操作体验的现状下，其对给用户创造价值上没有很大增量。再从以上业务目标来看，2个单一场景很难去促使用户对内容进行分享和投稿。

 

Chapter Three .
梳理产品功能矩阵

在理清小业务的业务目标和需求场景后，下一步就是按照场景去梳理产品能力。

 

小业务功能现状分析

老版app设计详情的功能进行初步的现状分析，设计详情包含渲染、图文编辑、图片管理、投稿、分享5个主要功能。从需求场景来看，多个场景无法实现，如营销、谈单；从业务目标来看，通过当前功能有较大的优化空间，如当前投稿很难让用户知道投稿有什么价值。

图片

 

产品能力梳理

分析现状发现功能不足以支撑用户需求场景，有获取功能2个方向：

  1. 挖掘现有能力：可以扩大梳理范围，从小业务所在的上一级业务到整个平台，一级级往上梳理场景对应的现有功能。
  2. 打造新能力：围绕场景，打造出新的功能

图片

挖掘平台上现有能力，可对业务的能力价值最大化利用，与其他业务形成互通，实现1+1大于2的业务价值。亦可围绕场景打造新能力，可反推产品去发倔新功能。

以下是设计详情涉及所有场景的产品功能矩阵，从平台获取到了很多全新的能力，以及对原有的能力进行了能力拓展。

图片

 

Chapter Four .
拆解每个场景的设计目标和策略

在梳理出产品能力后，需要通过设计策略把产品能力有效组织起来，让用户快速感知快速上手使用。设计策略推导自设计目标，那如何得到设计目标？

基于用户需求场景将行为事件拆分，提炼行为事件再推导出设计目标，再基于设计目标给出设计策略。

图片

Dapp设计详情受制于移动端能力，只涉及设计详情中5个相关场景，其设计目标和设计策略的拆解结果如下

图片

拆解出设计目标后，基于目标分析产品现状得到存在的设计问题。为什么要基于目标分析现状？首先需要明确什么是问题，问题是导致目标和现状不一致的原因。只有明确了目标才可以理性分析与现状存在多少问题。在日常中时常看到设计师会直接得到问题，很多情况是默认假设了一个预设目标，但这目标得到不严谨、不全面，容易导致得到的问题本身也出现偏差。设计策略基于设计目标或问题得出，其最终都来自设计目标。

图片

对老版Dapp设计详情现状进行了分析，得到了问题：

图片

 

Chapter Five .
设计策略落地

在上一步得到设计策略后，围绕着设计策略是设计方案。本段将不全部展开说明，只选3个关键点讲述设计方案的思考

 

设计详情框架的设计

Dapp设计详情涉及5个场景的承载及产品功能繁多，设计三步思考：

第一步：简化功能认知，对功能结构化，以场景的维度重组织功能，并以场景打造功能集合的认知，建立场景能力区；

第二步：梳理场景共同涉及的内容，作为联系的载体承载场景的放置，设计详情中展示态的方案涉及到了5个场景中的4个场景；

第三步：提取场景中即时性和高优先级功能，打造快捷功能区

框架如下：

图片

建立框架后，填充具体的能力和内容。如场景入口放置于底部，并根据场景优先级做了主次的区分。

图片

设计详情框架建立后，打造细分场景中的设计。

 

营销获客场景设计

营销场景的设计，将营销组成拆分为可营销内容、营销的渠道、渠道内容展现三大类，就可以清晰去梳理出现有的功能，以及可从内容、渠道各自去拓展挖掘。内容和渠道清晰后，再传达各渠道提供的价值激励用户去触发行为。

图片

 

谈单场景设计

谈单场景关键在方案详情上，谈单面对不同情况，存在多种内容形式去展示方案。在上面内容梳理中最主要是3个内容：图文方案、全屋漫游、渲染图册。在方案详情中，头部承载了全屋漫游、图册，如图文方案过于繁琐可直接点击全屋漫游图进行讲解，亦可点击封面进入图册直接图片说明。图文详情加上了房间切换的导航，可快速切换到需要讲解的地方。

 

Chapter Six .
上线验证

上线后数据平稳后观测，设计详情的周活提升了89%，每个场景下的功能数据都得到显著的提升（tips：有部分数据因技术原因没有采集到）。除了改版了Dapp侧的设计详情，后续对PCweb侧的设计详情进行迭代，同样起到不错的结果。数据的结果验证了方法的可行，并起到了积极的效果。

图片

 

Chapter Seven .
思考小结

以上是我应用这套设计方法去做了块小业务优化，反向推动进入产品迭代，上线后取得了不错的成绩。在本次赋能后，对小业务中多了一些感悟

  • 小业务是大业务的缩影，可以作为去赋能大业务前沿验证的实验田，大概率可以快速验证自己的想法，即使方向错了因为小业务改动影响面也小
  • 因知识广度和深度的限制，不是所有设计师都可以一开始就可以把控大业务，小业务可作为打磨设计深度专业度，一些小业务的复杂度并不低于大业务
  • 该设计方法同样适用于大业务，但方法是死的，不是所有情况都套用，得需要把握重点灵活应用
  • 不要总想着搞个大新闻，在能力未被业务方认可时，小业务的赋能可以成为一个很好的发声口
  • 不要轻视小业务，有可能是你根本还不了解

以上内容，感谢阅读！

 

原文链接：酷家乐用户体验设计（公众号）

作者：小波

转载请注明：学UI网》需求太碎？设计师如何在小业务中提炼价值

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

截屏2021-05-13 上午11.41.03.png

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

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


评论(0) 浏览(3302)

B端设计也“好色”

鹤鹤


我们需要什么样的配色方案？


B端的系统的主色代表着一个系统的气质，与所在行业、产品的定位、用户群体都有一定的关系。前面调研了众多竟品及市场前沿配色方案，目的就是期望从它们身上找出共性，引领我们的系统找到最适合的方案，这是知彼。

光有“知彼”是不够的，我们还要清晰的知道自己是谁？这样我们才可以说我们的配色方案是最适合我们的，有理有据的方案。


B端系统的真正使用人群比较复杂，具有年龄跨度大，文化水平参差不等，从事行业广泛等特点。



源于自然之美的色调，突显灵活性与再生的创意！


依据彩通色彩研究所专家的说法，纽约时装周2021春夏季的色彩强调我们渴望能激发出巧思与创意的色彩，这些色彩的百搭性质穿越季节，容许更多的选择自由，适于表达原创的风格，也足够灵活来适应现代新的更片断化的生活方式 。

“2021春夏的色调呈现出大自然，强调我们渴望拥有全年皆宜的灵活色彩，这一季的色彩充满道地真实的感觉，这种感觉对色彩而言愈来愈重要，同时结合了某种程度的舒适与轻松感，并散发出活力，激励振奋我们的心情”


说到这里“主题色”如何来选择？


色彩对于人的大脑的冲击力大于造型，比如淘宝，我们会记忆起淘宝的主色是橙色；色彩是影响人类视觉思维的重要因素，色彩能直观的体现产品的性格和气质，所以选择一款适合产品的主色很重要。


我们的用户在更替，如何让产品年轻化、品牌年轻化是现在几乎所有企业都在思考的问题，新的用户群体从小接受的教育和喜好决定着产品的发展方向。

比如：我们这次颜色升级中律动、青春活力是核心关键词，而蓝色则可以让产品视觉符号得到延续。



对于主题色的选择指标有哪些？


通过关键词图片像素化提取颜色，同时参考B端产品颜色流行趋势和当年的年度流行色，以及竟品颜色分析结果，获取蓝色的色相、纯度、明度范围。


2020潘通年度颜色经典蓝（19-4052 Classic Blue），颜色值为#174A7B（H207 S81 B48）

2021潘通年度颜色搭配色鸟舍系列中19-4151Skydiver，颜色值为#02569D（H207 S99 B62）


假设：竟品的主题色蓝色的色相范围为205-225；纯度的范围为70-96，平均值为86；明度的范围为70-98，平均值为88，B端产品流行趋势的主色也多是蓝色系，色相范围为200-232；纯度的平均值为70；明度的平均值为68。



色彩的使用范围及色阶有哪些？


色彩的应用场景包括：关键行动点，操作状态、重要信息高亮，图形化等场景；针对这些使用场景只有一个色值是不能满足所有场景使用的，所以我们要建立主题色的不同色阶来满足不同场景下颜色的使用。以建立色彩层级，或传达信息，或强化界面层级。


在色彩系统中，常使用 Tints and shades 系统来建立调色板，通过在颜色上面增加白色，或者增加黑色，来改变它的明度和饱和度，形成同色系的调色板，在符合无障标准的区域，选择不同明度饱和度的色彩，形成有梯度、有层级的彩色调色板。



B端产品中光有“主角”是不够的，还要有“配角” 所以我们还要看一下辅助颜色是如何定义的？


辅助色是为了帮助页面区分状态和层级而设立的颜色，主要包括图表类仪表盘颜色和功能色，通过合理的颜色传递产品正确的信息，让其信息传达更明确清晰。


辅助色的作用是配合衬托产品主色调，在不同的产品中，辅助色运用的策略是不同的，比如我们在竟品调研中发现，辅助色经常是取自主色的邻近色、对比色和互补色等。


仪表盘配色：通过对竟品的分析可得知，优秀的仪表盘的配色有多系列及低纯度的特点，多系列配色是为了满足用户个性化的需求，而低纯度是考虑用户在长时间使用产品，色彩对其心理的影响。


功能色：这类颜色在系统一般不会随意更改，而且特定的语义一般都有固定的色相，只需改变其纯度和明度，使其视觉上符合主色的气质，使其搭配和谐。


1.通过默认主题色选择辅助色及默认仪表盘颜色

我们以默认主题色为#467FEA（H 219 S 70 B 92) 为起始点，S（饱和度）、B（明度）保持不变，H（色相）以180°为起点，以15°为增量或减量标准，生成24色色板。这个色板是我们选取辅助色的重要依据。



以邻近色、互补色、对比色为原则选择丰富的颜色


邻近色：在色相环中，相差15°的颜色为邻近色，凡在60°范围内的颜色都属于邻近色的范围，主色和邻近色的色系组成的搭配，可以在同一个色调中构建出丰富的视觉层次感和质感，赋予不同的功能含义，信息表达明确，和谐统一感很好，视觉上的趣味性，颜色的搭配显得很柔和。


对比色： 在色相环中，角度相差120°-180°之间的色彩，这里使用了120°为角度来选择对比色。


互补色： 在色相环中成180°角的两种颜色，互为补色；主色可以和其互补色的两个色彩的搭配，该色彩可以为邻近色，例如：蓝色和黄色、橙色的搭配；这种搭配既能保持互补色搭配强烈的对比度，区分关键信息，次要信息，又能增加视觉上的趣味性，色彩看上去丰富多彩。


例如：蓝色作为主色，互补色黄色作为辅助色应用在图表、图标和标签上，再选择黄色的邻近色橙色作为另外一个辅助色，应用在不同的关键信息上，有助于用户更好的阅读产品的功能和内容。



获得辅助色-9色相


通过邻近色、互补色和对比色的选择，我们从24色色相环中得到了9色相色环，9色相色盘优化后将做为图表的仪表盘颜色和语义类的功能色出现页面设计中。


校正辅助颜色


虽然我们保持相同的饱和度和明度，使用科学的方法得到了较为合适的色相，但由于色彩本身自带感官明度属性，导致在视觉感受上的感官体验并不同频。


黄色、绿色的明度即发光度较高，蓝色就稍微偏暗一些，导致色板看起来不一致，为了让不同色相看起来更加协调，需要调整色板的明度和饱和度，以保证视觉感官体验同频且更加和谐舒适。


校正后的颜色主要用于功能色和仪表盘颜色。




从辅助色中提取功能色及仪表盘色系


通过对竟品的分析总结同时结合默认主题色分析得出的9色色环，归纳分离，最后形成系统的默认仪表盘颜色。


功能色的目的是明确信息及状态，比如成功、出错、失败、提醒、链接等；功能色的选取需要遵守用户对色彩的基本认知，结合分析得出的9色色环，颜色校正，得出系统功能色。




辅助色的色阶


为了度量不同的可视化从高到低的数值，我们仪表盘颜色远远不够，所有为了保证视觉上的统一性，我们需要加入辅助色的明度色阶来区分数据层级。


同时我们产品有深色和浅色两种模式，由于视觉对比的原因，在深色的场景看下看的颜色，和浅色场景下看到的颜色是两种感受，深色场景下颜色会发亮，所以为了保持视觉上统一，我们也需要加入辅助色的色阶。


辅助色色阶建立方法与主色的色阶建立方法一致，使用 Tints and shades 系统，通过在颜色上面增加白色，或者增加黑色，来改变它的明度和饱和度，形成同色系的调色板。



模拟方案一主色、辅助色及消色汇总


通过以上分析我们得出模拟的主题色、仪表盘颜色、功能色及消色。为了方便记忆，我们分别给颜色取了名字和编号，命名方式采用植物色彩命名，这也是200多年前颜色数值出来之前的命名方式，最早见于1814 年出版的《维尔纳色彩命名法》



本期交流就先到这里，希望这个配色的思路能够帮到大家，感谢大家的耐心观看！

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

文章来源：站酷  作者：Evan绘酷设计

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

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

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



评论(0) 浏览(3758)

当你设计时，你应该思考些什么

鹤鹤

作为设计师的我们总会在自己的闲暇时间去做设计有关的练习，那么我们到底有没有深入思考过我们怎么去练习以及如何思考才是最有效的呢？也许有的人练习了很久发现自己的进步速度很缓慢，有的人练习的不多，但每次输出的作品质量跟上次相比却提升很多。那么其中的差异到底是出现在哪些方面呢，我之前也一直在思考这方面的问题。现在将自己领悟出来的一些方法分享给大家，希望能够起到一些帮助。



前言：什么是最有效的学习方式


在开始正文之前，我希望大家能够理解什么是最有效的学习方式。在当前的大环境下，各个平台学习类的教程或者文章层出不穷，我们似乎总是有学不完的知识，每天也都在积极地学习，当时看完觉得收获颇丰，但一天工作下来也许看过的东西就忘了50%，甚至过了一周后发现自己已经什么都忘了。


那么你有没有思考过为什么会产生这样的结果呢？对于自身的学习和思考方式我们是不是还有待改进的方法？我们可以先来了解一下学习金字塔这个模型：

学习金字塔是美国缅因州的国家训练实验室研究成果


从图上我们可以看出，我们平常用的最多的听讲或者阅读的学习内容留存率[两周以后还能记住内容的多少]仅仅只占5%~10%这个区间，而讨论/实践/教授给他人等这种需要自身参与性强的学习内容留存率则高达50%-90%，平常通过阅读等获取信息很容易遗忘的原因也有一部分在于此。


不难发现，前四类的学习行为都是属于被动输入型学习，而后三类学习行为则是属于主动输出型学习。这也就是常说的“最有效的输入方式就是输出”。


因此要想提高听讲或者阅读的学习内容停留率，我们需要将被动输入转化成主动输出，即我们在进行这类活动时需要调动大脑积极思考，将大脑接触到的信息与我们已经掌握的知识产生关联，去想一下我看了这些内容可以运用在哪些方面以及怎么去运用，并在最后真正用于实践[经历过实践去输出你才会发现那些潜在性的问题]。我们才能更为有效地去消化一篇文章或教程。好了，希望大家看完能积极思考一下本文所阐述的内容，能够拥有一些不一样的收获就是我写这篇文章最大心愿。那么接下来进入正题。



01 明确自己的设计目的


做任何事情都应该拥有一定的目的，因此我们在开始一项设计练习时，第一件需要做的就是确定我们的练习目的，即你通过这次练习想要表达什么，这种表达可以是技法的展现或者说内心情感的表达，只有明确当前的目的性，你才能有更精准的方向。

但很多人会发现即使自己设立了目的却总是会因为各种原因而中途放弃掉，那么能让我们去坚持完成目的的核心是什么呢，就是去量化你的目的和设立明确的截止日期。量化目标就是要将你的大目标分解到具体每一天应该完成的小任务，这样拆解不仅降低了目标的难度，也能清楚知道每天该做什么，有明确截止日期的话就能避免拖延。


比如拿“在一个月内我的练习目的是做电影界面的设计“和”在1月1日至1月30日期间我要完成30张电影界面“相比，显而易见后者的目标更具象，更具操作性。只要我保证每天一张界面，即可在规定时间内完成任务，偶尔如果遇到特殊事件也能及时弥补落下的部分。前者模糊不清的目标很容易让我们三天打鱼两天晒网，一张界面也是练习，一百张界面也是练习，也许一个月下来发现自己就做了那么几张界面，完全达不到练习效果。



02 目标的确立要跳出我们的舒适区


很多人会说，我确立了明确的目标啊，也有在坚持练习，可一段时间下来却感觉自己的能力没有很明显的提高。这有可能就是你的目标建立出了问题。那么怎样的目的才能最有效地提升我们自身的能力呢，在我看来跳出自身舒适区去建立目标效果才是最正确的。

舒适区指的是一个人所表现的心理状态和习惯性的行为模式，人会在这种状态或模式中感到舒适。舒适区，又称为心理舒适区。


如果你发现你每次确立的目标自己都能够很轻松愉快地完成的话，那么你可能只是一直在自己的舒适区内做着重复性的工作， 对自身的能力提升并不会出现显著变化，也就是常说的那句话“你不是有五年工作经验，而是把一个经验用了五年！“

跳出舒适区，指的是来到学习区，去有意识地练习那些你了解过，但是不能熟练应用的技能。例如你对界面的设计已经比较熟练了，但是你对交互动效这一部分仍然感到比较陌生，那么如果继续坚持界面练习可能只是简单在堆积你的练习数量，这时你更应该去尝试一下界面的一些交互效果并将其制作出来。


这样你就可以将你已经掌握的知识与并不熟练的知识连接起来，从而能够更高效地学习和吸收新的知识。前期尽量选择简单的效果练习，循序渐进，以此来建立你的自信心，不要急于求成而误入恐慌区，妄想在几天之内就能够做出和从业几年的大神一样的高难度复杂效果，那样不仅学习效果差，还会打击你的自信心，造成反效果。



03 多看的重要性以及怎样去看


相信大家对于多看这一点已经是耳熟能详的词汇了，曾经也听过很多次大神分享，无一不提及多看多练这种类似的话。那么你有没有深入思考过为什么很多高手都在提及这一点呢，我们所谓的看和他们的看是否说的是一个概念呢？

牛顿曾说“我之所以比别人看得远一些，是因为我站在巨人的肩膀上”，那么在我的理解范围内，多看即是站在巨人的世界里看设计。


在诸如国内网站站酷/UI中国以及外国网站dribbble/behance等平台上，我们可以找到很多优秀的设计作品（在看的过程中可以不要只是局限于UI设计，可以更多地看看首页的其他作品，能够最大限度地提高你的审美），遇见好的作品我们不要只停留在视觉表面，要学会去分析好的设计，以及与我们自身所做的界面产生对比。


分析最直接的方式就是自我提问。“这个设计我为什么会觉得它好看，是颜色的搭配吸引了我，还是版式的设计非常合理，又或者是整体的配图非常和谐?”当然，你还可以更近一步——“颜色的搭配是哪里吸引了我，是对比色用得非常合理，还是整体色彩的占比非常平衡，又或者说是颜色的明度和饱和度搭配得非常好看？“


最重要的是要联想到自己已经掌握的知识，将你发现的好的方面与自己的知识进行结合。“如果我下次在做界面练习的时候，我该怎么去使用这种色彩搭配，如果换成其它颜色，我有没有能力将它搭配得像这样和谐美观？“

 

这样自我提问的方式最终目的是将好的东西内化为自己的知识，否则你看再多的东西，也只是你每天所接触的信息而已，过眼即忘，并不能有效转化成为你的设计认知。当然，你要将那么好看的设计都收进你的素材库里，好记性不如烂笔头，建立素材库就是为了让我们更好地去复习我们曾经欣赏和思考过的东西。

自己的eagle资料库



04 不找参考的设计都是耍流氓


毕加索曾说过这样一句话：好的设计师借鉴，伟大的设计师偷。乔布斯也曾说过类似的话。举个例子，我们可以先看左边一个比较古老的界面-施乐公司70年代的界面，再看右边乔布斯拿来改进的做的macintosh界面：

以及经过改良后的macintosh界面，然后比尔盖茨在看过这个设计后而做出的关于微软的界面

看了上面两幅对比图，我们可以发现，伟大的人在创作时也需要找参考，但他们都是尽量吸收参考好的部分，然后加入自己的思考和理解，去创造更好的东西。他们并不是说凭空就可以创造出经典的东西。


所以说，找参考是设计过程中非常关键的一个步骤，在找参考的过程中，就相当于你在和其他优秀的设计师对话。因为一个设计师的脑容量是没法与全世界设计师的脑容量相比的。虽然参考不一定是你做设计的标准，但却能对你的创意和设计带来一定的方向和灵感。因此我们在开始一项新的设计目标前找参考，去观察别人的作品是怎样表现的，他们设计的东西出彩的地方在哪里，和我心中所想的有哪些不一样，我该怎么在我的设计中去融合那些出彩的东西。


只有当你找到足够多的参考，你的心中才会有一定的衡量的标准，才会知道好的设计和坏的设计差距在哪里。最终体现在你所做的设计上。也许有人会说，有的厉害设计师感觉都不怎么找参考，那是因为他们的脑海中已经积累了足够的参考来让他们自由调动。



05 你在设计时是否做到了专注


我们可以做一个小实验，在自己手机上下一个Forest[番茄时钟],设定两个小时的设计练习时间，看看在这个持续时间内你有多少次会情不自禁地拿起手机看消息。（我在做这个测试的时候会发现有很多次都会无意识拿起手机看信息），由此可见我们即使是在练习时间内也会存在很多浪费时间的小动作，如果丢掉这些小动作，我们在有限时间内的产出将会大大提升。

我也是在前些日子看《深度工作》这本书时才意识到专注工作的重要性。书中说:想要迅速掌握困难的技能，你必须高度专注，不能有任何干扰。高质量工作产出=时间x专注度。而现实中的我们往往是花费了很多时间，却由于自己的专注度很低，导致整体效率和产出都大打折扣。我想这也能解释为什么都是在同样的时间内，每个个体的成长度都不一样，成长快的人会把单位时间的效率发挥到极致。


因此在每次给自己规定设计练习时间的过程中，尽量找一个安静不受打扰的环境，将手机设置成番茄时钟模式，保持高度的注意力去完成自己的练习目标，你会发现你比平时用了更少的时间却做出了更好的东西。



06 对于规范的理解


我们应该知道，UI设计不同于绘画以及平面设计，它是基于一定限制而进行的设计活动，而这些限制我们称之为设计规范。就像你在开始游戏之前需要知道游戏规则一样，我们在开始设计前也是必须要了解相应的设计规范的。比如状态栏的高度，底部图标的大小，间距的大小，字号的规范等，在这里不做详细解读。也许刚入行的人会觉得设计规范限制了设计的发挥性，但其实规范只是让你能够朝着一个统一的方向和保持基本数值的准确性，但却依然能够给设计很大的发挥空间。就像之前看到的一段话：[此处将其做成了一个图片]

也许看完这个你更能理解规范对于UI的一种作用，盒子就像我们的手机，展示空间就那么大，你需要在一定的限制内发挥你最大的能力去做出好的设计。

 

因此，当我们在练习app界面时，心中一定要有自己的一套规范（不论是否做出来），执行过程中严格按照定义的基础规范来，从而更能够高效地完成练习任务和保证界面的统一性。


07 学会建立自己的界面走查表


就像在学校时，老师总是强调我们试卷答题完成后一定要进行自我检查去排除一些不该犯的错误。同理，设计也是一样，每当我们初步完成了设计界面后，我觉得最重要的也是进行自我检查，排除一些界面常见的错误。当然，我说的走查并不是单纯看文字等显而易见的错误，而是按照一个优秀的界面要求去走查我们的界面：


设计风格统一了吗？

界面的整体设计风格是否统一，符合产品调性。颜色的使用/图标的设计风格/圆角大小的统一等；

图片是否清晰？有无版权？

你在整个设计界面所使用的图片是否是高清的，有无模糊或者水印，图片是否会构成侵权等，一个低质量的图片会瞬间让你的界面下降了一个档次；


信息层级拉开了吗？

做的界面整体的字号大小是否有重点区分，能不能清晰地看出文字的层级关系，元素间距有没有符合各层级的对比关系；


投影用对了吗？

你的投影考虑了环境色的影响吗，如果用纯黑的投影会让整个投影看起来非常沉重；


你的界面有呼吸感吗？

你的界面看起来会不会很拥挤？不要堆得满满的，注意留白以保持元素的呼吸感，从而让界面更耐看；


对齐了吗？

不论你是工作几年还是刚入行的新人，都一定不要忽略这个问题。左对齐右对对齐以及居中对齐。说起来很简单，但不要因为这个错误的发生而让别人质疑你的专业性；


以上列举了一些部分常见的界面问题走查，还有更多的界面基本问题值得大家去留意。我认为走查表的建立还是应该基于自身的经验来制定，那样不仅会更符合你的设计风格，更会让你走查起来更加高效。刚入行的同学的话可以多看看高手关于界面精度提升的一些建议来作为自己的走查参考。



08 不要闭门造车，走出去


相信通过走查表的建立会让你发现一部分的问题，但碍于自己的审美水平以及理解能力，我们很难去完全找出自己的问题。也就是说，当我们通过走查表纠正了一些常见问题后，我们要学会向大神们去请教问题。


通过你认识的一些大神或者在设计群里发出自己的界面，让其他更厉害的人去发现你界面的其它问题，这样会让你意识到一些你不曾发现的问题，从而提高你的判断能力和界面水平，督促自己的进步。当然，不要把请教别人当成一件理所当然的事情，学会向那些给你提出界面修改意见的人们说一声谢谢。（在这里也谢谢曾经帮助过我的那些可爱的人们~）

写在最后：少熬夜多锻炼，注意身体健康


在这里想向广大辛苦奋斗的设计师们说一句，每次做完设计练习还有时间就多多锻炼吧，身体从来就是我们奋斗的本钱，只有身体健康才能更好地作图呢。所用时间的长短从来不是衡量一个人厉害的标准，熬夜不一定代表就能够做出更好的界面，专注和高效才是我们应该学会的方式，希望大家在新的一年能够用更少的时间做出更精致的界面。

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

文章来源：站酷  作者：进击的M

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

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

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

评论(0) 浏览(3228)

分类

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档