我们经常会将Word转换成PDF，下面给大家介绍一种很不错的Word转PDF格式的方式。

打开浏览器搜索speedpdf找到并打开在线转换工具首页，选择主页上的Word转PDF进入转换（也可以点击上方所有工具字样，选择Word转PDF进入）。

将需要转换的Word文档添加上传后，点击进度条后面的转换按钮，就可以开始转换了，等待转换完成后点击下载箭头即可。

如果转换前有登录账户，还可以通过点击登录头像处，选择账户，在转换记录中查看转换状态和下载转换后的文档。

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

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

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

目录

 一、vue路由概念

1.概念：

2.初体验：

二、路由基础

1.路由模式        

2.路由写法

总结手动自动配置区别：

三、路由重定向与二级路

1.路由重定向

2.二级路由

 四、路由跳转传参

1.声明式导航：

2.编程式导航

 一、vue路由概念

1.概念：

确保我们在vue中实现页面跳转到我们所想的页面

2.初体验：

 可以看到当我们点击不同的组件的时候我们实现了路由的功能：在vue中实现页面的跳转

注意看，当我点击的时候上面地址栏中加载了不同的网页。下面我们来学习下路由的写法

二、路由基础

1.路由模式

路由两种模式

路由书写写法：

在index.js中的router对象中书写

    


        


            


            

        

        


            

                const router = new VueRouter({
            

        

    

    


        


            


            

        

        


            

                mode: 'history',//默认是hash模式
            

        

    

    


        


            


            

        

        


            

                })
            

        

    

hash模式：

路由例如: http://localhost:8080/#/home

history模式：

路由例如: http://localhost:8080/home

两种模式的区别：

1. 外观：hash的url有个#符号，history没有，history外观更好看。
2. 刷新：hash刷新会加载到地址栏对应的页面，history刷新浏览器会重新发起请求，如果服务端没有匹配当前的url，就会出现404页面。
3. history模式以后上线需要服务器端支持, 否则找的是文件夹

 2.路由写法

 起步 | Vue RouterVue Router3官网介绍： 起步 | Vue Router

①手动配置（较少使用）

1. 下载与导入vue-router
2. 导入组件
3. 创建routes路由规则（路径和页面一一对应）
4. 创建路由对象
5. 把路由对象挂载到App.vue
6. 在页面写路由导航router-link （生成a标签）
7. 在页面写路由出口router-view (生成占位盒子，用于显示页面内容)

下面开始我们相关文件的创建

1.创建我们的脚手架(此时没有选择Router)：

 2.准备我们的App.vue文件：

    


        


            


            

        

        


            

                <template>
            

        

    

    


        


            


            

        

        


            

                <div>
            

        

    

    


        


            


            

        

        


            

                <!-- 顶部导航栏 -->
            

        

    

    


        


            


            

        

        


            

                <div class="footer_wrap">
            

        

    

    


        


            


            

        

        


            

                <a href="#/find">发现音乐</a>
            

        

    

    


        


            


            

        

        


            

                <a href="#/my">我的音乐</a>
            

        

    

    


        


            


            

        

        


            

                <a href="#/friend">朋友</a>
            

        

    

    


        


            


            

        

        


            

                </div>
            

        

    

    


        


            


            

        

        


            

                <!-- 下面内容 -->
            

        

    

    


        


            


            

        

        


            

                <div class="top"></div>
            

        

    

    


        


            


            

        

        


            

                </div>
            

        

    

    


        


            


            

        

        


            

                </template>
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                <script>
            

        

    

    


        


            


            

        

        


            

                export default {
            

        

    

    


        


            


            

        

        


            

                methods: {}
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                </script>
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                <style scoped>
            

        

    

    


        


            


            

        

        


            

                body,
            

        

    

    


        


            


            

        

        


            

                html {
            

        

    

    


        


            


            

        

        


            

                margin: 0;
            

        

    

    


        


            


            

        

        


            

                padding: 0;
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                .footer_wrap {
            

        

    

    


        


            


            

        

        


            

                position: fixed;
            

        

    

    


        


            


            

        

        


            

                left: 0;
            

        

    

    


        


            


            

        

        


            

                top: 0;
            

        

    

    


        


            


            

        

        


            

                display: flex;
            

        

    

    


        


            


            

        

        


            

                width: 100%;
            

        

    

    


        


            


            

        

        


            

                text-align: center;
            

        

    

    


        


            


            

        

        


            

                background-color: #333;
            

        

    

    


        


            


            

        

        


            

                color: #ccc;
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                .footer_wrap a,
            

        

    

    


        


            


            

        

        


            

                span {
            

        

    

    


        


            


            

        

        


            

                cursor: pointer;
            

        

    

    


        


            


            

        

        


            

                flex: 1;
            

        

    

    


        


            


            

        

        


            

                text-decoration: none;
            

        

    

    


        


            


            

        

        


            

                padding: 20px 0;
            

        

    

    


        


            


            

        

        


            

                line-height: 20px;
            

        

    

    


        


            


            

        

        


            

                background-color: #333;
            

        

    

    


        


            


            

        

        


            

                color: #ccc;
            

        

    

    


        


            


            

        

        


            

                border: 1px solid black;
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                .footer_wrap a:hover,
            

        

    

    


        


            


            

        

        


            

                span:hover {
            

        

    

    


        


            


            

        

        


            

                background-color: #555;
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                .top {
            

        

    

    


        


            


            

        

        


            

                padding-top: 62px;
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                .footer_wrap .router-link-active {
            

        

    

    


        


            


            

        

        


            

                background-color: #000;
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                </style>
            

        

    




    

3.在src下面新建views文件夹并创建我们需要的.vue文件

3.1 find.vue

    


        


            


            

        

        


            

                <template>
            

        

    

    


        


            


            

        

        


            

                <div>
            

        

    

    


        


            


            

        

        


            

                <div class="nav_main">
            

        

    

    


        


            


            

        

        


            

                <router-link to="/Ranking">排行</router-link>
            

        

    

    


        


            


            

        

        


            

                <router-link to="/Recommend">推荐</router-link>
            

        

    

    


        


            


            

        

        


            

                <router-link to="/SongList">歌单</router-link>
            

        

    

    


        


            


            

        

        


            

                </div>
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                <div style="1px solid red;">
            

        

    

    


        


            


            

        

        


            

                <router-view></router-view>
            

        

    

    


        


            


            

        

        


            

                </div>
            

        

    

    


        


            


            

        

        


            

                </div>
            

        

    

    


        


            


            

        

        


            

                </template>
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                <script>
            

        

    

    


        


            


            

        

        


            

                export default {
            

        

    

    


        


            


            

        

        


            

                name: 'find',
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                </script>
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                <style scoped>
            

        

    

    


        


            


            

        

        


            

                .nav_main {
            

        

    

    


        


            


            

        

        


            

                background-color: red;
            

        

    

    


        


            


            

        

        


            

                color: white;
            

        

    

    


        


            


            

        

        


            

                padding: 10px 0;
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                .nav_main a {
            

        

    

    


        


            


            

        

        


            

                text-align: center;
            

        

    

    


        


            


            

        

        


            

                text-decoration: none;
            

        

    

    


        


            


            

        

        


            

                color: white;
            

        

    

    


        


            


            

        

        


            

                font-size: 12px;
            

        

    

    


        


            


            

        

        


            

                margin: 7px 17px 0;
            

        

    

    


        


            


            

        

        


            

                padding: 0px 15px 2px 15px;
            

        

    

    


        


            


            

        

        


            

                height: 20px;
            

        

    

    


        


            


            

        

        


            

                display: inline-block;
            

        

    

    


        


            


            

        

        


            

                line-height: 20px;
            

        

    

    


        


            


            

        

        


            

                border-radius: 20px;
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                .nav_main a:hover {
            

        

    

    


        


            


            

        

        


            

                background-color: brown;
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                .nav_main .router-link-active{
            

        

    

    


        


            


            

        

        


            

                background-color: brown;
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                </style>
            

        

    




    

 3.2 my.vue

    


        


            


            

        

        


            

                <template>
            

        

    

    


        


            


            

        

        


            

                <div>
            

        

    

    


        


            


            

        

        


            

                <img src="../assets/my.png" alt="" width="100%">
            

        

    

    


        


            


            

        

        


            

                </div>
            

        

    

    


        


            


            

        

        


            

                </template>
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                <script>
            

        

    

    


        


            


            

        

        


            

                export default {
            

        

    

    


        


            


            

        

        


            

                name: 'my',
            

        

    

    


        


            


            

        

        


            

                };
            

        

    

    


        


            


            

        

        


            

                </script>
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                <style scoped>
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                </style>
            

        

    




    

3.3 friend.vue

    


        


            


            

        

        


            

                <template>
            

        

    

    


        


            


            

        

        


            

                <div>
            

        

    

    


        


            


            

        

        


            

                <ul>
            

        

    

    


        


            


            

        

        


            

                <li>这是当前页面 query 接收到的参数:
            

        

    

    


        


            


            

        

        


            

                <span>姓名：{{ $route.query.name }}</span> --
            

        

    

    


        


            


            

        

        


            

                <span>年龄：{{$route.query.age}}</span> 
            

        

    

    


        


            


            

        

        


            

                </li>
            

        

    

    


        


            


            

        

        


            

                <li>这是当前页面 params 接收到的参数:
            

        

    

    


        


            


            

        

        


            

                <!-- <span>姓名：{{ $route.params.name }}</span> -- 
            

        

    

    


        


            


            

        

        


            

                 <span>年龄：{{ $route.params.age }}</span>   -->
            

        

    

    


        


            


            

        

        


            

                </li>
            

        

    

    


        


            


            

        

        


            

                </ul>
            

        

    

    


        


            


            

        

        


            

                </div>
            

        

    

    


        


            


            

        

        


            

                </template>
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                <script>
            

        

    

    


        


            


            

        

        


            

                export default {
            

        

    

    


        


            


            

        

        


            

                name: 'friend',
            

        

    

    


        


            


            

        

        


            

                };
            

        

    

    


        


            


            

        

        


            

                </script>
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                <style scoped>
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                </style>
            

        

    




    

3.4 notfound.vue

    


        


            


            

        

        


            

                <template>
            

        

    

    


        


            


            

        

        


            

                <div class="box">
            

        

    

    


        


            


            

        

        


            

                <h1>这是一个 404 页面</h1>
            

        

    

    


        


            


            

        

        


            

                <img src="../assets/404.png" alt="">
            

        

    

    


        


            


            

        

        


            

                </div>
            

        

    

    


        


            


            

        

        


            

                </template>
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                <script>
            

        

    

    


        


            


            

        

        


            

                export default {
            

        

    

    


        


            


            

        

        


            

                name: 'notfound',
            

        

    

    


        


            


            

        

        


            

                data() {
            

        

    

    


        


            


            

        

        


            

                return {
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                };
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                };
            

        

    

    


        


            


            

        

        


            

                </script>
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                <style scoped>
            

        

    

    


        


            


            

        

        


            

                .box {
            

        

    

    


        


            


            

        

        


            

                display: flex;
            

        

    

    


        


            


            

        

        


            

                flex-direction: column;
            

        

    

    


        


            


            

        

        


            

                justify-content: center;
            

        

    

    


        


            


            

        

        


            

                align-items: center;
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                </style>
            

        

    




    

 4.准备图片素材（所有素材可私信博主获取）

 5.所有准备工作做完现在开始我们的文件配置

 1.下载与导入vue-router

• npm i vue-router@3.6.5

• 导入vue-router (在main.js中)

    


        


            


            

        

        


            

                //main.js中导入
            

        

    

    


        


            


            

        

        


            

                // 0.导入路由
            

        

    

    


        


            


            

        

        


            

                import VueRouter from 'vue-router'
            

        

    

    


        


            


            

        

        


            

                // 使用vue的插件，都需要调用Vue.use()
            

        

    

    


        


            


            

        

        


            

                Vue.use(VueRouter)
            

        

    

2.导入组件

@符号代表 /src 文件夹的绝对路径，在脚手架中文件比较多的时候，使用这个@符号会更加的方便

 在main.js中导入

    


        


            


            

        

        


            

                // 导入组件
            

        

    

    


        


            


            

        

        


            

                import find from '@/views/find.vue'
            

        

    

    


        


            


            

        

        


            

                import friend from '@/views/friend.vue'
            

        

    

    


        


            


            

        

        


            

                import my from '@/views/my.vue'
            

        

    

    


        


            


            

        

        


            

                import notfound from '@/views/notfound.vue'
            

        

    

3.创建路由规则

路由规则作用： 设置 url 和 组件 对应的规则

 在main.js中写入

    


        


            


            

        

        


            

                // 路由规则
            

        

    

    


        


            


            

        

        


            

                const routes = [
            

        

    

    


        


            


            

        

        


            

                { path: '/find', component: find },
            

        

    

    


        


            


            

        

        


            

                { path: '/friend', name: 'friend', component: friend },
            

        

    

    


        


            


            

        

        


            

                { path: '/my', component: my },
            

        

    

    


        


            


            

        

        


            

                { path: '/notfound', component: notfound },
            

        

    

    


        


            


            

        

        


            

                ]
            

        

    

4.创建路由对象

路由对象： 帮你管理这些路由规则

 在main.js中写入

    


        


            


            

        

        


            

                // 创建路由对象
            

        

    

    


        


            


            

        

        


            

                const router = new VueRouter({
            

        

    

    


        


            


            

        

        


            

                routes// (缩写) 相当于 routes: routes
            

        

    

    


        


            


            

        

        


            

                })
            

        

    

 5.挂载路由到根组件

挂载到根组件作用：让你的整个应用都有路由功能

 在main.js中写入

    


        


            


            

        

        


            

                // 挂载路由到根组件
            

        

    

    


        


            


            

        

        


            

                new Vue({
            

        

    

    


        


            


            

        

        


            

                router,
            

        

    

    


        


            


            

        

        


            

                render: h => h(App)
            

        

    

    


        


            


            

        

        


            

                }).$mount('#app')
            

        

    

6.在页面写路由导航router-link

作用与a标签一样实现跳转，好处：当点击链接的时候自带一个专属类名 

在App.vue中我们将传统的a标签进行替换：

替换a标签原因：便于我们做专属效果 

 我们选中点击的超链接做触发效果：

 7在页面写路由出口router-view

占位盒子，用于渲染路由匹配到的组件

（<router-view> : 是vue内置的一个组件,会自动替换成路由匹配的组件 ）

好了一个最最最基本的路由就被我们制作完成啦！下面我们来看看效果：

上述的操作有些许麻烦，下面我们来使用我们开发中常用的自动配置方法

②自动配置（推荐使用）

创建脚手架方式与手动配置类似，唯一不同是此处必须选择Router

对比手动模式：

 此刻：脚手架已经帮我们创建好了Router路由不需要我们下载与导入vue-router了

只需要写：

1. 导入组件
2. 配置路由规则
3. 路由导航
4. 路由出口

并且为了进一步的封装我们的配置信息，我们的配置代码将写在router/index.js下，不再是全部写在main.js下。

1.导入组件（index.js中）

    


        


            


            

        

        


            

                import find from '@/views/find.vue'
            

        

    

    


        


            


            

        

        


            

                import friend from '@/views/friend.vue'
            

        

    

    


        


            


            

        

        


            

                import my from '@/views/my.vue'
            

        

    

    


        


            


            

        

        


            

                import notfound from '@/views/notfound.vue'
            

        

    

2.配置路由规则（index.js中）

    


        


            


            

        

        


            

                { path: '/find', component: find },
            

        

    

    


        


            


            

        

        


            

                { path: '/friend', name: 'friend', component: friend },
            

        

    

    


        


            


            

        

        


            

                { path: '/my', component: my },
            

        

    

    


        


            


            

        

        


            

                { path: '/notfound', component: notfound }
            

        

    

 3.路由导航（直接cv我们之前的App.vue文件）

    


        


            


            

        

        


            

                      <router-link to="/find">发现音乐</router-link>
            

        

    

    


        


            


            

        

        


            

                      <router-link to="/my">我的音乐</router-link>
            

        

    

    


        


            


            

        

        


            

                      <router-link to="/friend">朋友</router-link>
            

        

    

 4.路由出口（App.vue中）

    


        


            


            

        

        


            

                <div class="top">
            

        

    

    


        


            


            

        

        


            

                <router-view></router-view>
            

        

    

    


        


            


            

        

        


            

                </div>
            

        

    

效果查看：

总结手动自动配置区别：

自动配置省去了一些固定不变的操作，我们不需要写繁琐且固定的代码，只需要写不同的代码。且代码书写的位置都给我们设置好了，我们直接遵守该规范书写代码即可

三、路由重定向与二级路由

1.路由重定向

路由重定向官方文档：重定向和别名 | Vue Router

• 重定向应用场景： 页面输入根路径/ , 自动跳转到首页

• 注意点 : 重定向只是修改路径， 还需要单独去设置路由匹配规则

重定向命令：

    


        


            


            

        

        


            

                {
            

        

    

    


        


            


            

        

        


            

                path: '/',
            

        

    

    


        


            


            

        

        


            

                /* 
            

        

    

    


        


            


            

        

        


            

                 (1)重定向只是修改页面路径。  输入 / 会重定向到 /路径
            

        

    

    


        


            


            

        

        


            

                 (2)只有component才会让vue去寻找路由匹配页面。所以设置了重定向，还需要单独设置匹配规则
            

        

    

    


        


            


            

        

        


            

                 */
            

        

    

    


        


            


            

        

        


            

                redirect: "路径"
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

1. 就拿我们刚才创建的举例：

 实现效果：当我在浏览器中打开的时候我没有输入任何路径，vue自动帮我们跳转到了 my.vue这个页面组件

 2.也可以利用重定向来设置当我们路径错误提示404页面：

实现效果：当我任意输入没有匹配的路径，自动帮我们跳转到了notfound.vue这个组件

2.二级路由

实现页面中存在第二级的跳转

写法(拿我们上述的案例实操，需要素材可私信博主喔)：

①在index.js中引入

    


        


            


            

        

        


            

                // 导入二级路由
            

        

    

    


        


            


            

        

        


            

                import Ranking from '@/views/second/Ranking.vue'
            

        

    

    


        


            


            

        

        


            

                import Recommend from '@/views/second/Recommend.vue'
            

        

    

    


        


            


            

        

        


            

                import SongList from '@/views/second/SongList.vue'
            

        

    

②在需要引用的组件中使用：

    


        


            


            

        

        


            

                //格式：
            

        

    

    


        


            


            

        

        


            

                {
            

        

    

    


        


            


            

        

        


            

                path: '路径', component: 组件名, children: [
            

        

    

    


        


            


            

        

        


            

                //此处填写二级路由的路径信息
            

        

    

    


        


            


            

        

        


            

                ]
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                {
            

        

    

    


        


            


            

        

        


            

                path: '/find', component: find, children: [
            

        

    

    


        


            


            

        

        


            

                {path:'/',redirect:'/SongList'},
            

        

    

    


        


            


            

        

        


            

                { path: '/Ranking', component: Ranking },
            

        

    

    


        


            


            

        

        


            

                { path: '/Recommend', component: Recommend },
            

        

    

    


        


            


            

        

        


            

                { path: '/SongList', component: SongList }
            

        

    

    


        


            


            

        

        


            

                ]
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

③写路由导航与出口

 查看效果：

 可以看到：当我们点击一级路由之后，我们还可以点击二级路由到我们的专属页面中

 四、路由跳转传参

有两种跳转传参方式：

• 声明式导航
• 编程式导航

1.声明式导航：

①query写法：

在路径中加参数信息即可

      <router-link to="/路径?参数名=参数值&参数名=参数值</router-link>

接收信息：

在触发的组件中书写{{ $route.query.属性名}}接收

 举个例子：

②params写法：

在index.jsx文件中写：参数名。在需要传递的路由路径中写参数值

接收信息：

在触发的组件中书写{{ $route.params.属性名}}接收

 实现效果：

2.编程式导航

①query写法:

结构：

    


        


            


            

        

        


            

                this.$router.push({
            

        

    

    


        


            


            

        

        


            

                path: '/路径',
            

        

    

    


        


            


            

        

        


            

                query: { 属性名: '属性值'}
            

        

    

    


        


            


            

        

        


            

                })
            

        

    

接收信息：

在触发的组件中书写{{ $route.query.属性名}}接收

举个例子：

 ②params写法

结构:

    


        


            


            

        

        


            

                this.$router.push({
            

        

    

    


        


            


            

        

        


            

                name: '我们注册路径的组件名',//写path获取不到值！！！
            

        

    

    


        


            


            

        

        


            

                query: { 属性名: '属性值'}
            

        

    

    


        


            


            

        

        


            

                })
            

        

    

 注意点:写path获取不到值，需要用name

接收信息：

在触发的组件中书写{{ $route.params.属性名}}接收

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

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

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

度咔是百度短视频生态首款面向泛知识创作者的视频剪辑工具，致力于降低泛知识类作者的创作门槛，助力生产优质的作品。

随着产品的功能迭代，体验的逐步更新，产品依势也需要打造更好的运营氛围和品牌印象来建立用户口碑、提升转化。对此，设计侧针对度咔产品进行了全面的思考和分析，通过重新定义度咔运营视觉语言，明确产品调性，帮助用户更新品牌认知。

一、品牌框架搭建

产品的运营视觉不只是单纯的画面展示，其背后都有更加明确的设计理念和手段，但运营视觉语言并不是千篇一律的，首先需要明确自身定位，突出产品独特性。

设计初期，我们针对同类型产品与用户类型进行了大量分析，在用户人群划分上度咔更具有针对性，目标用户是口播自媒体、知识类创作者。但不像专业剪辑软件门槛那么高，度咔更多的是通过特色产品功能帮助作者去降低剪辑门槛，业务主要通过征稿和教程的运营活动来提升用户认知，带动日活。

由此，我们梳理出度咔的品牌框架图。以度咔「专为口播自媒体打造的剪辑工具」产品定位作为切入点，依据其自身定位和度咔区别于同类产品的特色功能，我们提炼出“便捷”、“智能”、“专业”产品核心关键词。

二、定义度咔运营视觉语言

在前期创意阶段，我们通过大量的竞品调研、创意发散、概念嫁接等创意手段，找到时下大字为主导的版式创意。简洁明确的版式结构，适当的画面留白，使各元素在版面中形成具有条理清晰、富有节奏的视觉关系。这种逻辑方式，为运营视觉的高效、科学、严谨性提供了极大的便捷，同时也对应了度咔便捷、智能、专业的品牌感知。

对品牌定位、业务诉求、产品功能进行整合后，我们搭建以构成、配色、元素为主的视觉语言框架。

与时下大字为主导的版式创意相结合，建立以大字排版，强构成感为主的视觉语言基调。通过大量的风格测试不断完善视觉基调并投入到项目中，同时规范运营功能排版，搭建元素库，通过设计手法，达到专业与简洁的平衡，统一的视觉基调和品牌色强化用户对品牌认知。

1、重塑视觉基调：

1）统一风格

度咔以往的运营视觉趋于参差，导致整体视觉有较为强烈的割裂感，焕新后的视觉变得更加直率简约，以简洁的视觉风格保证内容传递的高效性。抛弃了诸多装饰元素，取而代之的是硬网格，保持视觉整体和谐统一感，同时也传递出度咔便捷、智能、专业的产品调性。

我们对运营页面进行了布局重构，采用白色底的背景突出文字信息，使得内容信息传达更加明确，突出核心内容。在各类场景中，我们通过品牌色彩、图形、符号的渗透，强化度咔品牌印记。

2）主题延展

根据业务诉求，保持主题性征稿活动的特色——在强化功能点的运营活动中采用3D元素和弥散渐变背景，如夏日主题将度咔符号与泳圈做3D创意结合，增添活动氛围感。

2、品牌色焕新：

1）建立度咔品牌色应用规范。增强品牌识别性和记忆点。

首先搜集符合产品调性的颜色情绪版，选取整体偏明亮，识别度高的新品牌蓝色。对比原来偏紫的品牌蓝，现在升级后的蓝色更显专业智能，且更具有电子意味。

在一个科学有效的色彩系统里，往往包含至少两种色彩：主色+辅助色，两者互相搭配组合成产品体系的整体色彩感受，减少用户在产品体验中对反复出现的主色的视觉疲劳。

我们将蓝色赋予了统一的品牌认知感受，并且将蓝色加入到橙色里，生成了度咔特有的蓝橙色系。橙色在度咔的色彩系统中起着至关重要的作用，为产品带来积极，活力的感受，同时深黑和灰色创造结构、表达边界、建立信息层次。

以基础征稿活动为主的页面使用度咔标准蓝；在需要强主题和活动氛围的页面加入轻量的弥散渐变色彩。

3、提升效率：

1）元素库搭建

建立度咔元素库，规范化运营活动主视觉图形原创性和创意性，沉淀设计资产。

由于后期运营活动多处用到3D元素，对3D的质感进行了规范统一。轻量化的3D风格更加注重极简主义理性美学。

考虑到运营页面的通用性，避免3D材质的喧宾夺主，材质风格以简单通用为主，颜色以品牌色为基础，采用光感通透的玻璃材质，加入环境光感。明朗，透传度咔的品牌气质。

四、总结

本次通过度咔运营视觉语言的搭建，无论从产品本身还是设计侧，在数据和效率上都有明显的提升。而设计作为和用户最近的一方，在平衡各方诉求后呈现给用户一个全新专业感十足的产品，进一步向用户传达品牌感知，助力创作者发现更多美好。

感谢阅读，以上内容均由百度MEUX团队原创设计，以及百度MEUX版权所有，转载请注明出处，违者必究，谢谢您的合作。申请转载授权后台回复【转载】。也欢迎加入MEUX,视觉/交互/运营设计师，可投简历至MEUX@BAIDU.COM (注明信息获取来源如：站酷）

关于我们：
MEUX,百度移动生态用户体验设计中心，负责百度移动生态体系的用户/商业产品的全链路体验设计。服务的产品包括百度APP、百度搜索、百度百科、百度贴吧、百度商业产品等。MEUX以「简单极致」为设计理念，创造极致用户体验的同时赋能商业，推动设计行业的价值和影响力，让生活因设计而更美好。

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

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

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

导语

近年三维表现已经越来越多的融入到各种商业设计当中，在电商、品牌、UI、影视等各个领域都有广泛的运用。其中一个关键因素是C4D这款软件的出现，大大降低了3D设计的学习门槛。

C4D相对于专业性更强、功能较为复杂的3DMax、Maya、ZBrush等软件，界面更加简洁友好，对于没有接触过3D的的小白，学习成本更低。配合Octane、Redshift等渲染器，可以很快做出强视觉表现力的效果。凭借这种操作友好、易出效果的特性，C4D很快成为了近年最流行的3D设计软件之一。

本文结合作者自身的经验整理了一波自学的思路和技巧，希望能在大家学习C4D的过程中有所帮助。

前言

相信很多没有三维设计基础的小白，刚接触到C4D时会有无从下手的感觉，面对各种形形色色的命令菜单和工具面板，内心是这样的：

其实大可不必担心，不同方向的设计师可以有不同的侧重点，只要掌握自身职业需要的模块，并不需要学会所有的功能。追求大而全反而难度大效率低，容易产生挫败感从而被劝退。

所以这里建议的C4D学习思路是：结合自身的职业方向，先明确要学习的侧重点，集中精力突破，然后再根据新的需要逐步学习更多即可。

学习过程则大体上分为入门、上手、实战三个阶段。

Part 1. 入门

1.1 明确学习方向

C4D大体可以分为建模、渲染、角色、动画、运动图形、动力学这几个模块，每个模块都可以看成是独立的知识体系，往下又有更具体的细分。真要全面仔细钻研的话，需要投入很多的时间精力，这也是让很多初学者无从下手甚至望而却步的原因。

所以除了建模和渲染是绕不开的基本模块，我们可以将另外几个看成是比较具有针对性的模块，具体需要着重学习哪一部分，则需要先明确最适合自己的学习方向：

比如你是电商设计师，平时的工作内容主要是制作各种产品高大上的渲染图以及推广视频，那除了基本的建模与渲染，还可以着重学习运动图形，做出各种酷炫的商业广告视频；

如果你是IP设计师，则需着重学习角色模块，在完成静态角色的建模渲染后，绑骨骼刷权重也是必须掌握的知识点，才能做出丰富的动作和表情，让角色生动起来；

总之，不同职业方向，甚至项目的不同时期，都有不同的学习侧重点，这里需要每个人自己去判断。

建模和渲染则是最常用的两个模块，无需有职业方向的针对性，都应该在前期优先学习，并且做到基本掌握甚至熟练运用。

常规的步骤是先学习建模，再学习渲染；不过建模比较枯燥，渲染则是最出效果也是最提升学习信心的环节，我认为根据个人喜好，先学渲染再学建模，反而是更推荐的学习顺序。

1.2 选择学习资源

选择学习资源方面，目前网络的免费教程十分丰富，依靠教程的学习足以让你初期快速的上手，新手在选择教程方面尽量以体系较为完整，演示时软件版本较好的原则，如英文水平较好建议去外网看看各路大神的教程，原汁原味的学习；另外考虑到外网资源的机翻和获取难度的原因，这里主要推荐一些国内网络能获取自学资源：

建模

建模方面在学习阶段主要注重C4D的工具使用和基础技巧，这里推荐几个免费教程。

1、https://www.bilibili.com/video/BV1Cb411T7Dc?p=1&vd_source=018f00780190d4b9c79b5abbdb3be276

2、https://www.bilibili.com/video/BV1PZ4y1s7vm?p=1&vd_source=018f00780190d4b9c79b5abbdb3be276 

渲染

渲染以OC渲染器为例，这是现网能找到比较完整的免费教程，学习后可以直接上手出图。

1、https://www.bilibili.com/video/BV1ur4y1T72V?p=39&vd_source=018f00780190d4b9c79b5abbdb3be276

2、https://www.bilibili.com/video/BV1f4411V7qh?p=1&vd_source=018f00780190d4b9c79b5abbdb3be276

动力学

动力学可以由浅入深，从基础的常用动态手法及运动原理开始入手，以小实例练习的方式慢慢转向大场景的动态设计学习。

1、https://www.bilibili.com/video/BV17f4y127uv/?spm_id_from=333.788.recommend_more_video.1&vd_source=018f00780190d4b9c79b5abbdb3be276

2、https://www.bilibili.com/video/BV1ZA411w7qC/?spm_id_from=333.337.search-card.all.click&vd_source=018f00780190d4b9c79b5abbdb3be276

更多综合性实战教程

各大网站都能找到不少实战案例的教程，根据需要可以找到更多。

1.https://www.bilibili.com/video/BV177411P7d1?p=1&vd_source=018f00780190d4b9c79b5abbdb3be276

2.https://www.bilibili.com/video/BV1AY4y1G7Nc?p=1&vd_source=018f00780190d4b9c79b5abbdb3be276

1.3 软硬件配置相关

打团下副本之前，还得先准备一下装备；这里简单对于萌新学习前的软硬件要求做一些说明和推荐。

渲染器选择

C4D目前可选主流的渲染器有octane、阿诺德、Redshift、vray、自带渲染器（不推荐）。主流渲染器各有优缺点，综合下来笔者推荐萌新选择OC渲染器，原因是学习资源多，学习难度低，渲染效果优、渲染速度快等优点。

以下是各渲染器的对比，萌新们可权衡自身的情况进行选择：

电脑配置

在PC电脑方面，以笔者正版OC4.0渲染器为例，显卡选择N卡，型号以20系列以上最好，显存4G以上（有经费的可以入手今年的40系列显卡）；其他配置看自己的经济情况而定，如CPU方面单核性能越强对于渲染效率和c4d默认渲染器的加速越快，内存推荐64G以上，另外在电源上如果已经配备了20系列以上的显卡建议选择900W以上的，除了显卡和CPU这两个核心硬件其他的配置主要看个人情况而定，对电脑不懂的优先看电商平台的整机方案，主要以显卡和cpu为参考依据，其他的配置可浮动选择。

在苹果电脑方面，笔者并不推荐以3d工作为主的设计师选择苹果电脑，主要原因是主流渲染器的选择较少，另外C4D插件各方面的支持也远不如PC方便和丰富（如有特殊原因，可以优先选择M1芯片的电脑或者配备N卡独显的苹果电脑）。

软件版本

C4D软件版本推荐使用最新版本或者R23以上版本，随着厂商的更新换代，有些以前只有插件能完成的功能慢慢完善在新版本上，新版本带来的便捷功能可提高萌新的出图效率并免去旧版本没有兼顾的功能导致的学习成本浪费问题。

另外在OC渲染器上的版本问题尽量以当前版本能兼容的最新OC为主，当然，需要你的显卡需要和OC版本是匹配的情况下。

1.4 好记性不如烂笔头

收藏和观看的教程多了，容易看了后面的忘记前面的，或者没有实际上手印象不深。这里我尝试过最好用的方法可以总结为一句话，就是俗话说的“好记性不如烂笔头”。

对于一些关键的知识点，或者很有用的上手练习案例，可以在自己学习或者练习后，将关键步骤以在线笔记的形式自己整理一遍。

这样做有两个好处，一是能大大加深你对知识点的印象，不易遗忘；二是即使真的隔了很长时间有所遗忘，只要调出对应的文字笔记，就能很快重新想起对应知识点，比起重新翻出视频教程，边拖进度条检索再看一遍，效率高得多。

比如我之前在学习渲染体积光效果（丁达尔效应）时，总是掌握的不扎实，学过就忘，下回再用到时，基本相当于又要翻出视频教程再看一遍，效率很低。但是将关键知识点整理成笔记后，不单对这个知识点记得很牢，甚至能在不重新翻看笔记和教程的条件下，熟练的以教程中提到的三种不同方式做出体积光。

笔记链接：https://note.youdao.com/s/Lwt42DsG

以下是我整理的部分笔记库，感觉在笔记库里的知识点才算是比较掌握了的。

1.5 多搜集优秀案例

除了掌握工具，多看优秀案例以提升自己的设计思维和审美也很重要，只有看的优秀案例够多够好，将自己的设计眼光、审美水平、思考方式向大神们的靠拢，才能做出好的作品。

这里推荐几个我觉得的很赞的3D类网站：

Artstation：http://www.artstation.com；

Sketchfab：https://sketchfab.com/feed；

Behance 3D：https://www.behance.net/galleries/3d-art；

Dribbble 3D：https://dribbble.com/search/3d；

Part 2. 上手

2.1 熟能生巧多练习

上手阶段，充分的动手练习是必不可少的。

这里的练习也分为两种，一种是跟随教程案例做出一样的效果，一种则是结合自己感兴趣的题材设定一个主题或场景，将学习的知识点融会贯通，在自己的命题作品里实际应用起来。两种练习的方式也是相辅相成，在积累足够多的教程案例练习后，更推荐按照自己的想法来创作。

比如我会将自己感兴趣的漫画题材，在C4D里作为一个场景练习，融合进平时学的一些知识点。

《头文字D》场景

《海贼王》场景

因为用的是自己感兴趣的内容练习，所以做起来也上手很快，知识点也记得很牢，推荐大家可以试试。

2.2 善用插件提效率

1.Forester-植物生成插件

轻松生成各种类型的植物和部分岩石，各项小参数的调整方便个性化的调整，另外有便捷的动力系统可以轻松制作风吹植物的效果，结合OC渲染器的克隆功能搭建大场景非常轻松，适合在做动态设计的时候快速生成搭建场景。

2.QuadRemesher-四边面重拓补

有时候我们工作中会遇到三角面模型，对于新手来说转换成四角面模型可以选择这款插件轻松转换成你想要的四角面而且还有便捷的参数可以调整。

3.PolyCircle-挖洞插件及Nitro4D NitroCap-封洞插件

在日常建模的工作中经常需要给模型开洞及封洞的操作，虽然靠布线调整也可以实现，但是插件的效率更便捷，所以推荐这两款插件分别对应的模型开洞及模型封洞的功能，另外注意在C4D软件R26之前都是必备的插件，但如果你软件版本是R26以上版本，那么自带整合了这样的工具，不需要额外安装插件了。

4.CodeVonc Proc3durale-镂空腐蚀溶洞效果插件

这是一款风格化的效果插件，可以配合噪波制造出独一无二的风化、镂空、分解动画、甚至是流体动画的效果，在产品设计及品牌动态视频中运用广泛。

（图来源于网络侵删）

5.TerraformFX-地形插件

这块地形插件，可以让你轻易搭建自然环境，制作次时代的虚幻场景，操作简单，可以在Cinema 4D 中生成、动画和逼真的地形。在几秒钟内创建非常详细的山脉、峡谷和沙漠。直观的非破坏性工作流程可以轻松创建和自定义地形。

（图来源于网络侵删）

Part 3. 实战

在入门的学习和上手的练习之后，相信很多人都会对C4D有了初步的掌握。这时更重要的当然是将这些学到的知识点运用到实际项目当中，这样的实战操作才能让你的知识体系更有针对性，并且实际项目命题固定、要求更高，完成后的提升才会更大。

这里分享几个在完成基础的学习与练习后，我们用C4D做的实际项目。

3.1 QQ小游戏-春节会场

小游戏会场是从QQ春节活动的主会场进入，通过限时抽奖以及游戏任务等形式，引导用户参与活动，从而提升业务增长和助力品牌传播。

在前期设计推导阶段，我提炼了三个设计关键词，并对应发散出一些相关元素：

一是游戏：这是凸显平台特色和趣味性的元素；

二是福利：这是强化用户参与活动的动机；

三是春节：春节活动不可少的是体现节日氛围的元素；

根据这些元素画了三个方向的概念草图，分别以游戏机、扭蛋机、街机作为主要载体。

最终我们选择了通过破窗的形式将Q猛虎结合进场景中的方向一，展示游戏和夺宝元素，让用户感知福利的同时，也体现小游戏平台的特色和趣味性。

创意上是参照超级玛丽这种经典的横版过关形式，也将中国传统建筑中的红墙金瓦、松树、福袋这些元素融入在了画面中。

游戏机场景及其他主要元素建模

场景白模及空间构成设定

角色及福袋动态的制作，这里主要用到了角色及动力学模块相关的一些知识点。

渲染完成后的主视觉，Q猛虎在游戏机上往前奔跑，不断获得福袋并蹦出金币、红包实际UI中的应用效果

实际UI中的应用效果

另外将主视觉中的“松树”，延展成了松、竹、梅、兰这四种具有传统中国风的植物，作为辅助元素运用到页面中，保持整体调性的统一。

部分主要页面总览

3.2 QQ红包-节日封皮

节日红包封皮是传递用户关怀的重要手段，作为QQ红包的一部分，我们希望让用户有更新颖的感知和更深刻的共鸣。

相对于常规的插画手绘风格，我们希望尝试用3D的方式做一些新的探索。

在构思中秋节的红包封皮时，首先围绕“中秋”进行关键词发散

再选取其中桂树、玉兔、明月等这几个适合构建场景的元素，构建成一个立体化的场景

将一些元素抽象化，结合3D手法，加入更有意境的表达

最终完成的效果，整体也是塑造一个比较有中国风和意境的场景

新年封皮也是用同样的方式完成，像刚才中秋的桂花树一样，这里也将锦鲤也做了一些抽象化的表达，比如鱼的眼睛是宝石质感，鱼的身体是黄金质感，传递一种新年好运、财运连连的感觉。

最终完成的效果，QQ和banyQ坐在锦鲤背上，手上拿着铜钱串在吊锦鲤，寓意新年大吉大利、锦鲤附体。

新版封皮的使用量对比旧版有了较大提升，可以看出用户对新版封皮的喜爱程度还是很高的，目前的节日封皮也是按照新风格持续延展中。

Part 4. 结语

以上就是本文的全部内容，希望能帮助大家在学习C4D的过程中有所帮助，总结下来就是多看多练多运用。对文中提到的插件感兴趣的朋友，也可以通过附上的链接去官网了解更多详细介绍。若是大家有更好的学习建议，也欢迎在评论区留言一起讨论。

作者：腾讯ISUX

链接：https://www.zcool.com.cn/article/ZMTUxNDU4MA==.html

来源：站酷