【這一年收到的書籍，感謝贈予！】一塊兒回顧 2020，展望 2021（JesksonUI-UniApp）

把你的前端拿捏得死死的，天天學習得爽爽的，關注這個不同的程序員。

感謝不負每一份熱愛前端的程序員，不論前端技能有多奇葩

這一年收到的書籍，感謝贈予！

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']),
}

登陸頁面展現：

首先效果以下

分類頁面效果以下

我的中心頁面

地址：https://ext.dcloud.net.cn/plu...

我是Jeskson(達達前端)，感謝各位人才的：點贊、收藏和評論，咱們下期見！

文章持續更新，本文 www.dadaqianduan.cn/#/ 已經收錄，歡迎Star。

SegmentFault 思否徵文「2020 總結」