昨天产品经理训练营的课讲的也很棒，今天是讲营销，甚至比得红点奖的设计师讲座人还要来的多。营销大于设计，有广泛的受众。[呲牙]
我启发很大的一点是：凡事要从目标用户的角度去思考，定位要准确清晰，思考目标用户的需好需求，而非仅仅是自己的专业和能表达的东西。同学之间互为老师，同学们都很棒！把那些那古代的，最顶级的高人、牛人、圣人、伟人把它们挖掘出来，列在你的本子上，或者找出他们的画像，挂在墙上，挂在你的卧室里，挂在你随时看得见的地方。一有空你就研究他们说过什么话，他们最困难最低谷的时候是怎么度过的?他们看过什么书，他们学习过什么知识，他们年轻时候的榜样都有谁。不管他们离你几千年，还是离你几百年。你只要这么干了，你只要足够的诚心求教，放心好了，你就一定可以在跨时空的隧道里，让你感受到这个正向能量，让你充满力量，充满浩然之气，让你拥有源源不断的人生智慧，敬畏之心，感恩之心，知行合一，也要像礼物一样出现在他人的生命里。
今天是十月16号，周一，简直是被梦想叫醒的，六点多就起来了，五点多就想着公司的一些事情该怎么做才好呢？一件一件的在脑海里晃悠，那还是起床好了！昨天和同学聚会，收到一个同学的启发，他攒鸡毛凑掸子都要出书了，我平常也喜欢碎碎念的写一些东西，只是写的多在自己的自留地里面，关于生活，关于孩子，工作感悟种种。这次我准备写一个公司工作的方面的成长日记，把我们工作中遇到的方方面面的问题记录下来，作为一个回顾，给客户一个了解我们的途径。
我们公司成立已经是十二年了，中间也经历了许许多多的事情，我们也一步步的在长大，在成熟。要做小而精的公司，是一开始就想好的，就像我们公司的名字，兰亭妙微，取自兰亭序，群贤毕至，很开心的在一起做点事，妙在精微。
我们不追求公司的大，就顺其自然就好了。能够像尧舜禹禅让一样，做一个能够传承的公司，一代一代有接班人，有做事的道德良心，能够给客户好的价值，就这样平平常常就很好。
所以今天我就开始记录这些日常啦。
要做一个好的UI设计公司,不仅要在能力上设计能力一直（十几年几十年）保持优秀稳定的保持输出，以及心态的平和宽广。创始人对做公司要有信心，合伙人之间要同甘共苦，遵守规则，做好表率。
只要持之以恒做好这些，不断学习。创业其实也不难。
贪嗔痴慢疑，是人性，
善良信任利他尊重包容也是人性，
一个公司能几十年长盛不衰，那不仅仅只是设计能力好的问题。
我们在这个过程中也完成了对自己的修炼。
2.全流程设计包括有什么主要内容和步骤？
1）明确设计目标，聚焦设计要解决的核心问题
2）明确目标用户，要明确产品价值要解决的用户群体，描述用户画像，提炼用户场景，挖掘用户需求。
从产品应用的具体场景，来研究和理解所涉及到的产品体验问题。这些可能是产品中已经出现的体验问题，也可能还包括有未满足的用户需求问题。通过不同的用户研究手段，了解已有的用户行为和使用习惯，进行策略分析，改变原有业务逻辑不合理的操作路径，进而提出有针对性的交互设计和视觉设计解决方案。
3）明确资源配比，了解技术方案，进行设计预估
通过项目启动会了解产品的功能列表和产品规划，避免做出现有功能相冲突/重叠的设计，进行合理的设计预估
4）确定方案流程，确定设计方案
方案流程可以是流程图也可以是交互原型图。最终完成的是高保真的交互原型、可交付开发实现的UI demo。在以最终的结果进行专家评审，确认无误后，进行可用性测试。
5）数据对比分析
在有条件的情况下，需要对于设计前后的数据进行对比分析，对比前流程与现流程的差异，关注某流程的耗时和步骤。大部分B端产品的设计初衷就是为了某业务流程的降本增效。关键就看设计的产品，在上线后给公司的降低了多少的成本，提高了多少的效率。所以成本和效率也是设计的产品是否合格的关键因素所在。B端产品设计可以进行用户可用性测试，了解设计带来的实际收益和效果。依托数据合理改正方案。
前一段时间，有一个客户（甲方主管研发工作的副总）向我提出了这个问题：如何提高公司程序员工程师的UI审美？
他们公司UI设计师只设计其中很小的一部分页面，大部分页面要让程序员自己来做的，程序员开发出的页面看起来总是很丑，这是他觉得苦恼的地方。
在听到这个问题的时候，我很惊讶，觉得这个问题真的是个好问题。我以前关注的都是设计师如何提高自己的审美？没有想过让程序员提高自己的审美。
据我了解，他们公司的程序员非常忙，比我们UI设计公司的加班程度要多很多。我首先想到的是工作都这么辛苦了，能把功能任务完成就很不错了，也许能顾上提升UI设计审美的时间精力有限。
提高审美，不是短期内能够达到的事情，何况术业有专攻，工程师们有没有兴趣和精力做这件事情，也是另外的一个问题。
但是，这是一个很好的问题，在一个软件公司里工程师程序员是占大多数的，UI设计师相对人数比较少的。如果大量的工程师能够把审美提高易用性提高。确实，这个软件的整个UI水准就会提高。
如何提升整体软件的UI设计美的水准，让软件好用又统一？
我首先想到的是制定好的UI规范，做好全流程的交互设计原型。通过核心关键场景，关键页面的梳理，整理出一套设计语言，规定好UI规范。这份工作可以由设计师来做，把所有的字号颜色使用的元素组件都确定好，关键的场景和页面做一些模板，制定一份完善的UI规范，方便工程师按照这些去复用调用，降低难度。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
蓝蓝未来将会持续在平台上分享关于设计行业的文章。此外蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，添加vx蓝小助ben_lanlan，报下信息，蓝小助会请您入群。同时添加蓝小助我们将会为您提供优秀的设计案例和设计素材等，欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
大家好，蓝蓝设计今天和大家分享20款优秀的手机界面设计欣赏，共同学习成长！
我们有许多界面设计的案例，因为有保密协议不方便发出来。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢
希望得到建议咨询、商务合作，也请与我们联系01063334945。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司。
目录
确保我们在vue中实现页面跳转到我们所想的页面
可以看到当我们点击不同的组件的时候我们实现了路由的功能：在vue中实现页面的跳转
注意看，当我点击的时候上面地址栏中加载了不同的网页。下面我们来学习下路由的写法
路由书写写法：
在index.js中的router对象中书写
-
const router = new VueRouter({
-
mode: 'history',//默认是hash模式
-
})
hash模式：
history模式：
两种模式的区别：
起步 | Vue RouterVue Router3官网介绍： 起步 | Vue Router
- 下载与导入vue-router
- 导入组件
- 创建routes路由规则（路径和页面一一对应）
- 创建路由对象
- 把路由对象挂载到App.vue
- 在页面写路由导航router-link （生成a标签）
- 在页面写路由出口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了
只需要写：
- 导入组件
- 配置路由规则
- 路由导航
- 路由出口
并且为了进一步的封装我们的配置信息，我们的配置代码将写在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>
效果查看：
自动配置省去了一些固定不变的操作，我们不需要写繁琐且固定的代码，只需要写不同的代码。且代码书写的位置都给我们设置好了，我们直接遵守该规范书写代码即可
路由重定向官方文档：重定向和别名 | Vue Router
重定向应用场景： 页面输入根路径/ , 自动跳转到首页
注意点: 重定向只是修改路径， 还需要单独去设置路由匹配规则
重定向命令：
-
{
-
path: '/',
-
/*
-
(1)重定向只是修改页面路径。 输入 / 会重定向到 /路径
-
(2)只有component才会让vue去寻找路由匹配页面。所以设置了重定向，还需要单独设置匹配规则
-
*/
-
redirect: "路径"
-
},
1. 就拿我们刚才创建的举例：
实现效果：当我在浏览器中打开的时候我没有输入任何路径，vue自动帮我们跳转到了 my.vue这个页面组件
2.也可以利用重定向来设置当我们路径错误提示404页面：
实现效果：当我任意输入没有匹配的路径，自动帮我们跳转到了notfound.vue这个组件
实现页面中存在第二级的跳转
写法(拿我们上述的案例实操，需要素材可私信博主喔)：
①在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 }
-
]
-
}
③写路由导航与出口
查看效果：
可以看到：当我们点击一级路由之后，我们还可以点击二级路由到我们的专属页面中
有两种跳转传参方式：
- 声明式导航
- 编程式导航
①query写法：
在路径中加参数信息即可
<router-link to="/路径?参数名=参数值&参数名=参数值</router-link>
接收信息：
在触发的组件中书写{{ $route.query.属性名}}接收
举个例子：
②params写法：
在index.jsx文件中写：参数名。在需要传递的路由路径中写参数值
接收信息：
在触发的组件中书写{{ $route.params.属性名}}接收
实现效果：
①query写法:
结构：
-
this.$router.push({
-
path: '/路径',
-
query: { 属性名: '属性值'}
-
})
接收信息：
在触发的组件中书写{{ $route.query.属性名}}接收
举个例子：
②params写法
结构:
-
this.$router.push({
-
name: '我们注册路径的组件名',//写path获取不到值！！！
-
query: { 属性名: '属性值'}
-
})
注意点:写path获取不到值，需要用name
接收信息：
在触发的组件中书写{{ $route.params.属性名}}接收
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
元宇宙概念自被提出来之后，就引发了各行各业的关注，不少行业也开始与“元宇宙”应用结合，试图发掘行业前进的更多可能。那么，当医疗行业和元宇宙碰撞之后，可以产生哪些火花？在医疗元宇宙场景下，又可能出现哪些应用呢？
在我们之前的文章中，同理心思维，在工作和生活中有着怎样的应用？关于产品原创和服务设计都有提到“同理心”，今天想来系统地分享一下。它不仅应用在旅行的产品和服务上，还可以应用在每天生活的方方面面，提高我们生活和工作的效率。
蓝蓝设计的小编 http://www.lanlanwork.com