把你的前端搞死，每天努力学习，关注这个不一样的程序员。感谢每一位热爱前端的程序员，无论前端技术多么牛逼，今年收到的书，谢谢你的馈赠！2020年的最后几天2020年的最后几天，深圳的气温终于降了下来。天气冷了很多，刺骨的寒风让人头疼，但这一刻也让我意识到今年即将结束。未完成的事情留到明年。没见过面的只能说明年再约，未完成的计划可能需要重新安排。年年说是一样，其实年年不一样，这点我们心知肚明。朋友说，科比出事那天，我刚起床就收到朋友发来的信息，让我看微博。是的，我也感受到了当年的无情。见证历史：美国人开始囤枪，澳大利亚人开始囤纸；瑞幸财务造假22亿，王石捐清华53亿；美国奶农把牛奶倒进下水道，中国商人把口罩倒满世界。2020年已经过去，无论是甜蜜还是苦难还是患得患失，都留到去年，满怀信心和希望迎接2021年。澳大利亚大火肆虐数月，未能扑灭NBA巨星科比·布莱恩特(KobeBryant)，他在美国的一次直升机失事中丧生，享年41岁，这对澳大利亚来说是特别艰难的一年。未表达的爱，未完成的事，未实现的梦想，让我们在2020年底画上句号吧。谈产品——让产品更受欢迎作为前端开发工程师，你要明白什么样的设计才能让用户满意。对于你做的项目，你必须了解他们的业务流程。用户和产品之间存在着持续的输入和输出关系，我们需要让我们的项目尽可能地接近完美。其实在工作中，不能敲完代码就聊天。你不能用“用户不傻，他们比你聪明得多”来结束你的工作，让自己安心。关注用户在使用你的产品时页面如何提供导航、交互等，让用户第一时间了解提供的服务以及如何使用。UI的设计就是要解决如何让应用页面信息高度符合用户的认知。需要注意用户是否能将所见所闻相匹配。自制项目不能给用户带来不便，给用户带来认知混乱和心理压力。我们可以从认知和情感两方面评估您自己的项目或设计。设计页面注意事项：注重外观（本能层面）；关注使用的乐趣和效用（行为层面）；关注自我形象、个人满意度等（反思水平）。合理的登录页面设计：用户名（图标，输入框，消除输入内容），密码（图标，输入框，密码隐藏加密星）如何给你的产品加分如何给你做的产品加分，每个公司都有是每个公司需要强调的品牌，公司的色调，公司的slog，这样才能把品牌和用户联系起来，这样用户在使用产品的时候，就会在用户心目中形成一个品牌，所以用户可以很好地记住某个品牌。留下了深刻的印象。除了一些大公司每年投入大量资金，用品牌和概念来打动用户，我们作为这个产品的开发者，也可以用自己的方式来做，就是在设计产品的UI的时候,可以通过视觉向用户传达品牌信息，从整体设计上突出品牌，比如文案、造型、色调等。我们可以从文案名称、一些默认页面、刷新场景、以及页面上的图形时刻强调新图标，比如刷新效果、加载效果、进入页面时的过渡效果、弹框效果等等。有人说用红色作为背景按钮的用户转化率比用蓝色高。是的，有时候需要这样使用。口碑的形成，产品的口碑受服务速度的影响，与UI设计是否美观、体验是否流畅无关。一个产品进入市场后，需要经历投资期、成长期、成熟期和衰退期，称为产品的“生命周期”。同样功能的产品，有的人喜欢用这种产品，有的人喜欢另一种。我们需要做的是把握用户的心理。有的人喜欢整个页面干净舒适，有的人喜欢动态有质感的页面效果。用户长期使用某种产品。产品将形成该产品的推广者。功能的引导，比如用户等级，看到高级的，图标不一样，很炫酷，会让你有追求的欲望。引导用户行为的原理是“目标趋近效应”，心理现象是“当人们接近目标时，完成目标的动力就更大”。有目的的设计，首先要了解用户的特点，从目标人群的使用能力出发，为用户下一步的操作提供明确的指导。你见过这样的设计吗，“受损服务”，让系统检测用户的手机号或收货地址是否被列入黑名单，当用户进入时，会提示用户因低信誉操作失败，提供一个“服务丢失”设计解决方案。在做电商项目的时候，在设计打折商品的价格时，会增加一个被删除线划掉的“原价”，在提升产品功能的同时简化操作流程，降低用户使用门槛，以及支持更多的使用场景，满足更易懂的需求，让用户更容易达成目标。规划一个好的导航规划一个好的导航的主要功能是告诉用户当前位置，并为用户提供访问其他功能的途径。说完产品，我们来写一个2020年的模板文档。JesksonUI-UniApp花点时间写了一个简单的模板，简单记下?目录结构：（模拟盒子、卡片、高值、组件模块、登录、注册流程、数据统计、微信支付、支付宝支付、e-commerceprojectTemplate）首先下载源码解压，将根目录下的/colorui文件夹复制到你的根目录下，App.vue导入关键cssmain.cssicon.css这足以导入。注意登录，一般注册过程的登录页面效果如下：其实为了方便用户，很少用到账号和密码的形式登录。一般用户需要填写密码，直接使用手机号快速登录的方式直接登录。格式：输入手机号码，输入短信验证码（获取验证码）等形式登录页面。JesksonUI-UniApp推荐在登录过程中使用这个表单。justify-content:space-between;align-items:center;CSSjustify-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从父元素继承属性。CSSalign-items属性div{display:flex;align-items:center;}align-items属性定义了flex项目在flex容器当前行的横轴（纵轴）方向上的对齐方式。输入框添加disabled="disabled"后字体颜色改变的解决方法。loginbutton[disabled]{color:#fff;}使用分析：import{mapMutations}from'vuex';...mapMutations(['login']),importVuefrom'vue'importVuexfrom'vuex'Vue.use(Vuex)conststore=newVuex.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;}}})exportdefaultstore//main.vueimport{mapState}from'vuex'exportdefault{computed:mapState(['forcedLogin','hasLogin','userName','test'])}//user.vueimport{mapState,mapMutations}from'vuex'exportdefault{computed:{...mapState(['hasLogin','forcedLogin'])},methods:{...mapMutations(['logout','test']),bindLogin(){this.test('helldadaqianduan.cn')}}}import{mapState}from'vuex'exportdefault{computed:mapState({count:state=>state.count,//传递字符串参数'count'等价于`state=>state.count`countAlias:'count',//for为了能够使用`this`获取本地状态，您必须使用常规函数countPlusLocalState(state){returnstate.count+this.localCount}})}computed:{localComputed(){/*...*/},//使用对象展开运算符将此对象混合到外部对象中...mapState({})}//将this.count映射到store.state.countcomputed:mapState(['count'])//mapMutationsandmapActions:methods:{...mapMutations(['test']),...mapActions(['project']),}登录页面展示：一、效果如下分类页面效果如下个人中心页地址：https://ext.dcloud.net.cn/plu...我是Jeskson（达达前端），谢谢你的才华：点赞，收藏和评论，我们下次见！文章持续更新中。本文www.dadaqianduan.cn/#/已被收录。欢迎来到StarSegmentFault随笔《2020总结》
