「2020总结文章」一起回顾 2020，展望 2021（JesksonUI-UniApp）

达达前端

发布于 2022-04-13 20:20:25

2530

发布于 2022-04-13 20:20:25

文章被收录于专栏：达达前端达达前端

把你的前端拿捏得死死的，每天学习得爽爽的，达达前端程序员，关注这个不一样的程序员。感谢不负每一份热爱前端的程序员，不论前端技能有多奇葩。

这一年收到的书籍，感谢赠予！

2020最后的那几天

2020年的最后那几天，深圳终于降温了，冷的一批，那寒风刺骨吹得让人头疼，但这一刻也让我意识到了这一年要结束了。没做完的事情要留到明年再做了，没有见到的人只能说明年再约了，没有完成的计划可能要重新安排了。

每一年都说年年过得一样，但是其实每一年都不太一样的，这一点我们心知肚明。

朋友说，科比出意外的那天，刚睡醒收到朋友发信息让我看微博，看完之后我整个人懵懵的，感觉信仰一下就没了，特别特别难受。是的，我也感受到了这一年的冷酷无情。

见证历史：美国人开始囤枪，澳洲人开始囤纸；瑞幸财务造假22亿，王石捐赠清华53亿；美国奶农往下水道里倒牛奶，中国商人往全世界倒口罩。2020年已经过去，无论是甜蜜还是苦难还是患得患失都留到去年，充满信心和希望迎接2021年。

特别难的一年

澳洲大火熊熊燃烧几个月无法扑灭

NBA巨星科比·布莱恩特，在美国一起直升机失事事故中丧生，享年41岁。

没有表达出口的爱，没有做完的事，以及没有实现的梦想，在2020的最后画个句号吧。

聊聊产品-让产品更受欢迎

作为一名前端开发工程师，需要了解什么样的设计才能让用户满意，自己做的项目要了解其业务流程，用户和产品之间是一种持续的输入和输出的关系，我们需要把自己的项目做到近乎自己所能达到的完美程度。

其实在工作中你不能敲完代码就一聊聊只了，不能以“用户又不笨，他们比你聪明多了”，这句话来让自己的工作就结束了，让自己心安理得，要多去关注用户使用你的产品时，页面是如何提供导航，交互等方式，让使用者能够立刻明白提供的服务和使用方式。

UI的设计是解决如何让应用页面信息与用户认知高度匹配，需要关注用户能否将所看到的东西和自己认知里的东西对应起来。自己做的项目不能给用户带来不便，给用户带来认知上的困惑和心理的压力。

我们可以从认知和情感方面对你自己做的项目进行评估，或者设计。设计页面考虑：关注外观（本能层面）；关注使用的愉悦感和效用（行为层面）；关注自我形象，个人满足等（反思层面）。

合理的登录页面设计：用户名（图标，输入框，消除输入内容），密码（图标，输入框，密码隐藏加密星）

如何给你的产品加分

如何给你做的产品加分，每个公司有每个公司需要强调的品牌，公司的颜色基调，公司的slog，让品牌与用户挂钩，让用户使用产品时，在用户心里形成一个品牌，能让用户能够很好的记住某个品牌，留下深刻的印象。

除了一些大公司每年投入大量的钱给自己的品牌名字和理念让用户留下深刻印象外，我们作为这个产品的开发者也是可以用自己的方法做到的，那就是在设计产品的UI时，可通过视觉向用户传递品牌的信息，从整体设计突出品牌，比如从文案，形状，色彩基调等。

我们是可以从文案名称，一些缺省页面，刷新场景，页面中的图形时刻强调图新图标，比如有刷新效果，加载效果，进入页面时的过渡效果，弹框效果等等。有人说用红色作为底色的按钮时带来的用户转化率比用蓝色的转化率高，是的，有时候必要的情况下，需要这样使用。

口碑的形成，产品的口碑受到服务快慢的影响，跟UI设计是否美观和体验是否流畅不太挂钩，一款产品进入市场后，需要经历投入期，成长期，成熟期和衰退期，称之为产品的“生命周期”。同样的功能产品，有人喜欢使用这种，有人喜欢另一种，我们需要做到的是抓住用户的心理，有人喜欢整个页面干净舒服，也有人喜欢动感，质感的页面效果，用户长期使用某产品会形成该产品的推广者。

功能的引导，比如用户的等级，看到等级高的，图标不一样，又很炫酷，会让你产生追求的渴望。引导用户行为的作用，原理是“目标趋近效应”，心理学现象是“当人们接近目标时，越有动力去完成目标”。

有目的的做设计

首先了解用户特征，以目标受众的使用能力为出发点，为用户下一步操作提供明确的引导。

有没有看到过这样的设计，“有损服务”，让系统去检测某用户的手机号或收件地址，是否被拉入黑名单，当该用户进入时，提示用户由于信誉过低而不能操作，提供“有损服务”的设计方案。

在做电商项目的时候，会在设计打折商品价格时，一定会增加一个被删除线划掉的“原价”，提高产品功能的同时简化操作过程，降低用户的使用门槛，支持更多的使用场景和满足更懂的需求，让用户更容易达成目标。

规划好导航

规划好导航主要作用在：告诉用户当前所处的位置，为用户提供其他功能的入口。

说完产品，下面为2020写一个模板文档吧。

JesksonUI-UniApp

花一点时间写一个简单的模板，下面简单写一下✍目录结构：

(模拟框，卡片，高颜值，组件模块，登录，注册流程，数据统计，微信支付，支付宝支付，电商项目模板)

首先下载源码解压，复制根目录的 /colorui 文件夹到你的根目录，App.vue 引入关键Css main.css icon.css

<style>
    @import "colorui/main.css";
    @import "colorui/icon.css";
    @import "app.css"; /* 你的项目css */
    ....
</style>

这样导入就可以了。

关注登录，注册流程

一般登录页面效果以下几种：

其实为了用户方便，很少使用账号加密码的形式使用登录，一般用户都赖得填写密码，直接使用以手机号快捷登录得方式进行直接登录，格式：输入手机号，输入短信验证码（获取验证码）等形式进行登录页面。

而JesksonUI-UniApp就是建议使用这种形式进行登录流程。

justify-content: space-between;
align-items: center;

CSS justify-content 属性

div
{
    display: flex;
    justify-content: space-around;
}

justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。

CSS 语法

justify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit;

initial 设置该属性为它的默认值。

inherit 从父元素继承该属性。

CSS align-items 属性

div
{
    display: flex;
    align-items:center;
}

align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。

怎么解决input框中加入disabled="disabled"之后，改变字体的颜色

解决方案

.login button[disabled] {
	color: #fff;
}

用法解析：

import {mapMutations} from 'vuex';
...mapMutations(['login']),

import Vue from 'vue'
import Vuex from 'vuex'
 
Vue.use(Vuex)
 
const store = new Vuex.Store({
	state: {
		/**
		 * 是否需要强制登录
		 */
		forcedLogin: false,
		hasLogin: false,
		userName: "",
		test: "",
	},
	mutations: {
		test(state, test) {
			state.test = test;
		},
		login(state, userName) {
			state.userName = userName || '新用户';
			state.hasLogin = true;
		},
		logout(state) {
			state.userName = "";
			state.hasLogin = false;
		}
	}
})
 
export default store

// main.vue

import {mapState} from 'vuex'
export default {
	computed: mapState(['forcedLogin','hasLogin','userName','test'])
}

// user.vue
import {mapState,mapMutations} from 'vuex'
export default {
	computed: {
		...mapState(['hasLogin','forcedLogin'])
	},
	methods: {
		...mapMutations(['logout','test']),
		bindLogin(){
			this.test('hell dadaqianduan.cn')
		}
	}
}

import { mapState } from 'vuex'
 
export default {
  computed: mapState({
    count: state => state.count,
 
    // 传字符串参数 'count' 等同于 `state => state.count`
    countAlias: 'count',
 
    // 为了能够使用 `this` 获取局部状态，必须使用常规函数
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })
}

computed: {
  localComputed () { /* ... */ },

  // 使用对象展开运算符将此对象混入到外部对象中
  ...mapState({})
}

// 映射 this.count 为 store.state.count
computed: mapState(['count'])

// mapMutations和mapActions:

methods: {
	...mapMutations(['test']),
	...mapActions(['project']),
}

登录页面展示：