Take your front end pinch to death, every day to learn cool cool, dada front programmer, wechat search [programmer Doraemon] pay attention to this different programmer.

Thank you for every programmer who loves the front end, no matter how strange the front end skills are, welcome to pay attention to add me to the group

Books received this year, thanks for the gift!

The last few days of 2020

In the last few days of 2020, shenzhen finally dropped in temperature. It was cold, and the wind was so bitter that it made my head ache. But at this moment, I realized that the year was coming to an end. Unfinished business will be left for next year. Missing people means rescheduling next year. Unfinished plans may have to be rescheduled.

Every year says it’s the same, but every year is different, and we know it.

Friends said, Kobe Bryant accident that day, just woke up and received a message from a friend to let me read the Weibo, after reading my whole person meng, I feel the faith is gone, especially very uncomfortable. Yes, I also feel the ruthlessness of this year.

Witness history: Americans began to stock up on guns, Australians began to stock up on paper; Luckin cheated 2.2 billion yuan, Wang Shi donated 5.3 billion yuan to Tsinghua University; American dairy farmers pour milk down sewers. Chinese businessmen pour face masks all over the world. The year 2020 has passed. Leave it to last year whether it is sweet, bitter or bitter. Welcome 2021 with confidence and hope.

A particularly difficult year

Fires in Australia raged for months

NBA star Kobe Bryant,

Died in a helicopter crash in the US at the age of 41.

Unexpressed love, unfinished tasks, and unfulfilled dreams, come to an end at the end of 2020.

Talk about the product – make it more popular

As a front-end development engineer, we need to know what kind of design can make users satisfied, and we need to understand the business process of our own projects. There is a continuous input and output relationship between users and products, and we need to make our projects as perfect as we can achieve.

At work you can’t knock the code is actually a chat only, not to the user and not stupid, they are more clever than you “, this sentence to make their own work is over, let oneself feel at ease, more attention to the user when using your product, the page is how to provide navigation, interactive, let users can immediately understand the services provided and the way of use.

UI design is to solve how to make the application page information and user cognition highly match, need to pay attention to whether the user can see things and their own cognition of the thing. The project should not bring inconvenience to users, cognitive confusion and psychological pressure to users.

We can evaluate your own projects in terms of cognition and emotion, or design them. Page design considerations: focus on appearance (instinctual level); Focus on pleasure and utility of use (behavioral level); Focus on self-image, personal satisfaction, etc. (reflective level).

Reasonable login page design: user name (icon, input field, eliminate input content), password (icon, input field, password hide encryption star)

How to score points for your product

How to give extra points to your products? Each company has its own brand that needs to be emphasized, its color base and slog, so that the brand can be linked with users. When users use products, a brand can be formed in their minds, which can make users remember a brand well and leave a deep impression on them.

In addition to some big companies invest a lot of money each year to its own brand name and concept allows users to impress, we, as the developer of this product is also can do it with his own ways, that is the UI in the design of the product, should be handed to the user through the visual brand information, from the overall design is outstanding brand, such as from copy, shape, colour fundamental key, etc.

We can start from the text name, some default pages, refresh scenes, graphics in the page to highlight the new icon, such as refresh effect, loading effect, transition effect when entering the page, popbox effect and so on. Some people say that a button with a red background gets a higher conversion rate than a button with a blue background, and yes, that’s sometimes necessary.

The formation of word of mouth of a product is affected by the speed of service and is not closely related to whether the UI design is beautiful or not and whether the experience is smooth. After a product enters the market, it needs to go through investment period, growth period, maturity period and decline period, which is called the “life cycle” of the product. For the same functional product, some people like to use this product, some people like another, what we need to do is to grasp the user’s psychology, some people like the whole page clean and comfortable, and some people like dynamic, textured page effect, users will form a product promoter for a long time.

Function guidance, such as user level, see high level, different ICONS, and cool, will let you have the desire to pursue. The principle of guiding user behavior is “goal approach effect”, and the psychological phenomenon is “when people are close to the goal, they are more motivated to complete the goal”.

Design purposefully

First, understand the characteristics of users, starting from the ability of the target audience, to provide clear guidance for the next operation of users.

Have you ever seen such a design, “damage service”, let the system to detect a user’s mobile phone number or mailing address, whether is pulled into the blacklist, when the user enters, prompt the user can not operate due to low reputation, provide “damage service” design scheme.

When designing the price of discounted goods in e-commerce projects, we will definitely add an “original price” crossed out by the deleted line to improve product functions and simplify the operation process, reduce the user’s threshold of use, support more use scenarios and meet more understanding needs, so that users can achieve their goals more easily.

Plan your navigation

Planned navigation is mainly used to tell users where they are and provide access to other functions.

Having said that, let’s write a template document for 2020.

JesksonUI-UniApp

Take a moment to write a simple template. Here’s a simple ✍ directory structure:

(Simulation box, card, high appearance level, component module, login, registration process, data statistics, wechat Pay, Alipay Payment, e-commerce project template)

First download the source code unzip, copy the root directory /colorui folder into your root directory, app.vue to introduce the key Css main.css icon.css

<style> @import "colorui/main.css"; @import "colorui/icon.css"; @import "app.css"; /* Your project CSS */.... </style>Copy the code

That’s how you import.

Pay attention to login, registration process

The login page effects are as follows:

In fact, for the convenience of users, rarely use the form of account and password to use login, general users are dependent on filling in the password, direct use of mobile phone number fast login way for direct login, format: enter mobile phone number, input SMS verification code (obtain verification code) and other forms for login page.

Jesksonui-uniapp recommends using this form for the login process.

justify-content: space-between;
align-items: center;
Copy the code

CSS the justify – content attribute

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

Context-content sets or retrieves the alignment of elastic box elements along the main axis (horizontal axis).

The CSS syntax

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

Initial sets this property to its default value.

Inherit inherits the property from the parent element.

CSS align – the items property

div
{
    display: flex;
    align-items:center;
}
Copy the code

The align-items property defines the alignment of flex child items along the lateral (vertical) direction of the current row in the Flex container.

How to change the font color after adding disabled=”disabled” to the input box

The solution

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

1.

import {mapMutations} from 'vuex'; . mapMutations(['login']),Copy the code
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; {}, the login (the state, the userName) state. The userName = userName | | 'new users'; 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') } } }Copy the code
import { mapState } from 'vuex' export default { computed: mapState({ count: State => state.count, // Pass string argument 'count' equal to 'state => state.count' countAlias: 'count', // To be able to get local state with 'this ', You must use the regular function countPlusLocalState (state) {return state.count + this.localcount}})} computed: { localComputed () { /* ... */}, // Use the object expansion operator to blend this object into an external object... MapState ({})} map this.count to store.state.count computed: mapState(['count']) // mapMutations and mapActions: methods: {... mapMutations(['test']), ... mapActions(['project']), }Copy the code

Login page display:

The first effect is as follows

The classification page looks like this

Personal Center Page

Address:Ext.dcloud.net.cn/plugin?id=3…

I’m Jeskson, thanks for your talent: likes, favorites and comments, and we’ll see you next time!

This article is constantly updated, you can search “Programmer Doraemon” on wechat for the first time to read, reply [information] I prepared the first line of large factory materials, this article www.dadaqianduan.cn/#/ has been included, welcome Star.

Denver annual essay | 2020 technical way with me The campaign is under way…