072023-2

一、回顾 Vue2 的全局引用方式

1. 简单项目的全局引用

如果只是简单几个页面的使用，无需太过复杂的配置就可以直接再 main.js 中进行挂载




    

        

            

            

        

        

            
                import Vue from "vue";
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                /* 第一步下载 axios 命令：npm i axios 或者yarn add axios 或者pnpm i axios */
            

        

    

    

        

            

            

        

        

            
                /* 第二步引入axios */
            

        

    

    

        

            

            

        

        

            
                import axios from 'axios'
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                // 挂载一个自定义属性$http
            

        

    

    

        

            

            

        

        

            
                Vue.prototype.$http = axios
            

        

    

    

        

            

            

        

        

            
                // 全局配置axios请求根路径(axios.默认配置.请求根路径)
            

        

    

    

        

            

            

        

        

            
                axios.defaults.baseURL = 'http://yufei.shop:3000'

页面使用




    

        

            

            

        

        

            
                methods:{
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                getData(){
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                this.$http.get('/barry').then(res=>{
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                console.log('res',res)
            

        

    

    

        

            

            

        

        

            
                )}
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                }

2. 复杂项目的三步封装

① 新建 util/request.js (配置全局的Axios，请求拦截、响应拦截等)

关于 VFrame 有疑问的同学可以移步前端不使用 il8n，如何优雅的实现多语言？




    

        

            

            

        

        

            
                import axios from "axios";
            

        

    

    

        

            

            

        

        

            
                import { Notification, MessageBox, Message } from "element-ui";
            

        

    

    

        

            

            

        

        

            
                import store from "@/store";
            

        

    

    

        

            

            

        

        

            
                import { getToken } from "@/utils/auth";
            

        

    

    

        

            

            

        

        

            
                import errorCode from "@/utils/errorCode";
            

        

    

    

        

            

            

        

        

            
                import Cookies from "js-cookie";
            

        

    

    

        

            

            

        

        

            
                import VFrame from "../framework/VFrame.js";
            

        

    

    

        

            

            

        

        

            
                import CONSTANT from '@/CONSTANT.js'
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                axios.defaults.headers["Content-Type"] = "application/json;charset=utf-8";
            

        

    

    

        

            

            

        

        

            
                // 创建axios实例
            

        

    

    

        

            

            

        

        

            
                const service = axios.create({
            

        

    

    

        

            

            

        

        

            
                // axios中请求配置有baseURL选项，表示请求URL公共部分
            

        

    

    

        

            

            

        

        

            
                baseURL: process.env.VUE_APP_BASE_API,
            

        

    

    

        

            

            

        

        

            
                // 超时
            

        

    

    

        

            

            

        

        

            
                timeout: 120000
            

        

    

    

        

            

            

        

        

            
                });
            

        

    

    

        

            

            

        

        

            
                // request拦截器
            

        

    

    

        

            

            

        

        

            
                service.interceptors.request.use(
            

        

    

    

        

            

            

        

        

            
                config => {
            

        

    

    

        

            

            

        

        

            
                // 是否需要设置 token
            

        

    

    

        

            

            

        

        

            
                const isToken = (config.headers || {}).isToken === false;
            

        

    

    

        

            

            

        

        

            
                if (getToken() && !isToken) {
            

        

    

    

        

            

            

        

        

            
                config.headers["Authorization"] = "Bearer " + getToken(); // 让每个请求携带自定义token 请根据实际情况自行修改
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                var cultureName = Cookies.get(CONSTANT.UX_LANGUAGE);
            

        

    

    

        

            

            

        

        

            
                if (cultureName) {
            

        

    

    

        

            

            

        

        

            
                config.headers[CONSTANT.UX_LANGUAGE] = cultureName; // 让每个请求携带自定义token 请根据实际情况自行修改
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                // get请求映射params参数
            

        

    

    

        

            

            

        

        

            
                if (config.method === "get" && config.params) {
            

        

    

    

        

            

            

        

        

            
                let url = config.url + "?";
            

        

    

    

        

            

            

        

        

            
                for (const propName of Object.keys(config.params)) {
            

        

    

    

        

            

            

        

        

            
                const value = config.params[propName];
            

        

    

    

        

            

            

        

        

            
                var part = encodeURIComponent(propName) + "=";
            

        

    

    

        

            

            

        

        

            
                if (value !== null && typeof value !== "undefined") {
            

        

    

    

        

            

            

        

        

            
                if (typeof value === "object") {
            

        

    

    

        

            

            

        

        

            
                for (const key of Object.keys(value)) {
            

        

    

    

        

            

            

        

        

            
                let params = propName + "[" + key + "]";
            

        

    

    

        

            

            

        

        

            
                var subPart = encodeURIComponent(params) + "=";
            

        

    

    

        

            

            

        

        

            
                url += subPart + encodeURIComponent(value[key]) + "&";
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                } else {
            

        

    

    

        

            

            

        

        

            
                url += part + encodeURIComponent(value) + "&";
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                url = url.slice(0, -1);
            

        

    

    

        

            

            

        

        

            
                config.params = {};
            

        

    

    

        

            

            

        

        

            
                config.url = url;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                return config;
            

        

    

    

        

            

            

        

        

            
                },
            

        

    

    

        

            

            

        

        

            
                error => {
            

        

    

    

        

            

            

        

        

            
                console.log(error);
            

        

    

    

        

            

            

        

        

            
                Promise.reject(error);
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                );
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                // 响应拦截器
            

        

    

    

        

            

            

        

        

            
                service.interceptors.response.use(
            

        

    

    

        

            

            

        

        

            
                res => {
            

        

    

    

        

            

            

        

        

            
                // 未设置状态码则默认成功状态
            

        

    

    

        

            

            

        

        

            
                const code = res.data.code || 200;
            

        

    

    

        

            

            

        

        

            
                // 获取错误信息
            

        

    

    

        

            

            

        

        

            
                const msg = errorCode[code] || res.data.msg || errorCode["default"];
            

        

    

    

        

            

            

        

        

            
                if (code === 401) {
            

        

    

    

        

            

            

        

        

            
                MessageBox.alert(
            

        

    

    

        

            

            

        

        

            
                VFrame.l("SessionExpired"),
            

        

    

    

        

            

            

        

        

            
                VFrame.l("SystemInfo"),
            

        

    

    

        

            

            

        

        

            
                {
            

        

    

    

        

            

            

        

        

            
                confirmButtonText: VFrame.l("Relogin"),
            

        

    

    

        

            

            

        

        

            
                type: "warning"
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                ).then(() => {
            

        

    

    

        

            

            

        

        

            
                store.dispatch("LogOut").then(() => {
            

        

    

    

        

            

            

        

        

            
                location.href = "/index";
            

        

    

    

        

            

            

        

        

            
                });
            

        

    

    

        

            

            

        

        

            
                });
            

        

    

    

        

            

            

        

        

            
                } else if (code === 500) {
            

        

    

    

        

            

            

        

        

            
                Message({
            

        

    

    

        

            

            

        

        

            
                message: msg,
            

        

    

    

        

            

            

        

        

            
                type: "error"
            

        

    

    

        

            

            

        

        

            
                });
            

        

    

    

        

            

            

        

        

            
                if (res.data.data) {
            

        

    

    

        

            

            

        

        

            
                console.error(res.data.data)
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                return Promise.reject(new Error(msg));
            

        

    

    

        

            

            

        

        

            
                } else if (code !== 200) {
            

        

    

    

        

            

            

        

        

            
                Notification.error({
            

        

    

    

        

            

            

        

        

            
                title: msg
            

        

    

    

        

            

            

        

        

            
                });
            

        

    

    

        

            

            

        

        

            
                return Promise.reject("error");
            

        

    

    

        

            

            

        

        

            
                } else {
            

        

    

    

        

            

            

        

        

            
                if (res.data.uxApi) {
            

        

    

    

        

            

            

        

        

            
                if (res.data.success) {
            

        

    

    

        

            

            

        

        

            
                return res.data.result;
            

        

    

    

        

            

            

        

        

            
                } else {
            

        

    

    

        

            

            

        

        

            
                Notification.error({ title: res.data.error });
            

        

    

    

        

            

            

        

        

            
                console.error(res);
            

        

    

    

        

            

            

        

        

            
                return Promise.reject(res.data.error);
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                } else {
            

        

    

    

        

            

            

        

        

            
                return res.data;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                },
            

        

    

    

        

            

            

        

        

            
                error => {
            

        

    

    

        

            

            

        

        

            
                console.log("err" + error);
            

        

    

    

        

            

            

        

        

            
                let { message } = error;
            

        

    

    

        

            

            

        

        

            
                if (message == "Network Error") {
            

        

    

    

        

            

            

        

        

            
                message = VFrame.l("TheBackEndPortConnectionIsAbnormal");
            

        

    

    

        

            

            

        

        

            
                } else if (message.includes("timeout")) {
            

        

    

    

        

            

            

        

        

            
                message = VFrame.l("TheSystemInterfaceRequestTimedOut");
            

        

    

    

        

            

            

        

        

            
                } else if (message.includes("Request failed with status code")) {
            

        

    

    

        

            

            

        

        

            
                message =
            

        

    

    

        

            

            

        

        

            
                VFrame.l("SystemInterface") +
            

        

    

    

        

            

            

        

        

            
                message.substr(message.length - 3) +
            

        

    

    

        

            

            

        

        

            
                VFrame.l("Abnormal");
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                Message({
            

        

    

    

        

            

            

        

        

            
                message: VFrame.l(message),
            

        

    

    

        

            

            

        

        

            
                type: "error",
            

        

    

    

        

            

            

        

        

            
                duration: 5 * 1000
            

        

    

    

        

            

            

        

        

            
                });
            

        

    

    

        

            

            

        

        

            
                return Promise.reject(error);
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                );
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                export default service;

② 新建 api/login.js (配置页面所需使用的 api)




    

        

            

            

        

        

            
                import request from '@/utils/request'
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                // 登录方法
            

        

    

    

        

            

            

        

        

            
                export function login(username, password,shopOrgId,counter, code, uuid) {
            

        

    

    

        

            

            

        

        

            
                const data = {
            

        

    

    

        

            

            

        

        

            
                username,
            

        

    

    

        

            

            

        

        

            
                password,
            

        

    

    

        

            

            

        

        

            
                shopOrgId,
            

        

    

    

        

            

            

        

        

            
                counter,
            

        

    

    

        

            

            

        

        

            
                uuid
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                return request({
            

        

    

    

        

            

            

        

        

            
                url: '/login',
            

        

    

    

        

            

            

        

        

            
                method: 'post',
            

        

    

    

        

            

            

        

        

            
                data: data
            

        

    

    

        

            

            

        

        

            
                })
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                // 获取用户详细信息
            

        

    

    

        

            

            

        

        

            
                export function getInfo() {
            

        

    

    

        

            

            

        

        

            
                return request({
            

        

    

    

        

            

            

        

        

            
                url: '/getInfo',
            

        

    

    

        

            

            

        

        

            
                method: 'get'
            

        

    

    

        

            

            

        

        

            
                })
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                // 退出方法
            

        

    

    

        

            

            

        

        

            
                export function logout() {
            

        

    

    

        

            

            

        

        

            
                return request({
            

        

    

    

        

            

            

        

        

            
                url: '/logout',
            

        

    

    

        

            

            

        

        

            
                method: 'post'
            

        

    

    

        

            

            

        

        

            
                })
            

        

    

    

        

            

            

        

        

            
                }

③ 页面使用引入




    

        

            

            

        

        

            
                import { login } from "@/api/login.js"
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                接下来不用多说，相信大家已经会使用了

二、Vue3 中的使用

上面回顾完 Vue2 中使用 axios 我们来一起看看 Vue3 中axios的使用( 简单Demo，前台使用Vue3，后台使用 node.js )，仅供学习！

1. provide/inject 方式

① main.js 中使用 provide 传入




    

        

            

            

        

        

            
                import {
            

        

    

    

        

            

            

        

        

            
                createApp
            

        

    

    

        

            

            

        

        

            
                } from 'vue'
            

        

    

    

        

            

            

        

        

            
                import App from './App.vue'
            

        

    

    

        

            

            

        

        

            
                import router from './router'
            

        

    

    

        

            

            

        

        

            
                import store from './store'
            

        

    

    

        

            

            

        

        

            
                import "lib-flexible/flexible.js"
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                import axios from "@/util/request.js"
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                const app = createApp(App);
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                app.provide('$axios', axios)
            

        

    

    

        

            

            

        

        

            
                app.use(store).use(router).mount('#app');

② 需要用到的页面使用 inject 接受




    

        

            

            

        

        

            
                import { ref, reactive, inject, onMounted} from "vue";
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                export default {
            

        

    

    

        

            

            

        

        

            
                setup() {
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                const $axios = inject("$axios");
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                const getData = async () => {
            

        

    

    

        

            

            

        

        

            
                data = await $axios({ url: "/one/data" });
            

        

    

    

        

            

            

        

        

            
                console.log("data", data);
            

        

    

    

        

            

            

        

        

            
                };
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                onMounted(() => {
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                getData()
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                })
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                return { getData }
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                }

这个就是借助 provide 做一个派发，和 Vue2 中的差距使用方法差距不大

2. getCurrentInstance 组合式API引入

① main.js 中挂载




    

        

            

            

        

        

            
                import {
            

        

    

    

        

            

            

        

        

            
                createApp
            

        

    

    

        

            

            

        

        

            
                } from 'vue'
            

        

    

    

        

            

            

        

        

            
                import App from './App.vue'
            

        

    

    

        

            

            

        

        

            
                import router from './router'
            

        

    

    

        

            

            

        

        

            
                import store from './store'
            

        

    

    

        

            

            

        

        

            
                import "lib-flexible/flexible.js"
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                import axios from "@/util/request.js"
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                const app = createApp(App);
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                /* 挂载全局对象 */
            

        

    

    

        

            

            

        

        

            
                app.config.globalProperties.$axios = axios;
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                app.use(store).use(router).mount('#app');

/* 挂载全局对象 */
app.config.globalProperties.$axios = axios;

重点就是上面这句

② 需要用的页面使用 Composition Api -- getCurrentInstance 拿到




    

        

            

            

        

        

            
                <script>
            

        

    

    

        

            

            

        

        

            
                import { reactive, onMounted, getCurrentInstance } from "vue";
            

        

    

    

        

            

            

        

        

            
                export default {
            

        

    

    

        

            

            

        

        

            
                setup() {
            

        

    

    

        

            

            

        

        

            
                let data = reactive([]);
            

        

    

    

        

            

            

        

        

            
                /**
            

        

    

    

        

            

            

        

        

            
                 * 1. 通过getCurrentInstance方法获取当前实例
            

        

    

    

        

            

            

        

        

            
                 * 再根据当前实例找到全局实例对象appContext，进而拿到全局实例的config.globalProperties。
            

        

    

    

        

            

            

        

        

            
                 */
            

        

    

    

        

            

            

        

        

            
                const currentInstance = getCurrentInstance();
            

        

    

    

        

            

            

        

        

            
                const { $axios } = currentInstance.appContext.config.globalProperties;
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                /**
            

        

    

    

        

            

            

        

        

            
                 * 2. 通过getCurrentInstance方法获取上下文，这里的proxy就相当于this。
            

        

    

    

        

            

            

        

        

            
                 */
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                const { proxy } = currentInstance;
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                const getData = async () => {
            

        

    

    

        

            

            

        

        

            
                data = await $axios({ url: "/one/data" });
            

        

    

    

        

            

            

        

        

            
                console.log("data", data);
            

        

    

    

        

            

            

        

        

            
                };
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                const getData2 = async () => {
            

        

    

    

        

            

            

        

        

            
                data = await proxy.$axios({ url: "/one/data" });
            

        

    

    

        

            

            

        

        

            
                console.log("data2", data);
            

        

    

    

        

            

            

        

        

            
                };
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                onMounted(() => {
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                getData()
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                });
            

        

    

    

        

            

            

        

        

            
                return { getData };
            

        

    

    

        

            

            

        

        

            
                },
            

        

    

    

        

            

            

        

        

            
                };
            

        

    

    

        

            

            

        

        

            
                </script>

下图可以看到我们确实调用了 2次 API

其实通过 Composition API 中的 getCurrentInstance 方法也是有两种方式的

1. 通过 getCurrentInstance 方法获取当前实例，再根据当前实例找到全局实例对象appContext，进而拿到全局实例的config.globalProperties。


    

        

            

                

                

            

            

                
                    const currentInstance = getCurrentInstance();
                

            

        

        

            

                

                

            

            

                

                

            

        

        

            

                

                

            

            

                
                    const { $axios } = currentInstance.appContext.config.globalProperties;

2. 通过getCurrentInstance方法获取上下文，这里的proxy就相当于this。


    

        

            

                

                

            

            

                
                    const currentInstance = getCurrentInstance();
                

            

        

        

            

                

                

            

            

                

                

            

        

        

            

                

                

            

            

                
                    const { proxy } = currentInstance;
                

            

        

        

            

                

                

            

            

                

                

            

        

        

            

                

                

            

            

                
                    const getData2 = async () => {
                

            

        

        

            

                

                

            

            

                
                    data = await proxy.$axios({ url: "/one/data" });
                

            

        

        

            

                

                

            

            

                
                    console.log("data2", data);
                

            

        

        

            

                

                

            

            

                
                    };

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

评论(0) 浏览(1881)

072023-2

用 JavaScript 检测浏览器在线/离线状态（JavaScript API — navigator.onLine）

前端达人

如今HTML5 移动应用或 Web app 中越来越普遍的使用了离线浏览技术，所以用 JavaScript 检测浏览器在线/离线状态非常常见。

无论浏览器是否在线，navigator.onLine 属性都会提供一个布尔值。如果浏览器在线，则设置为 true ，否则设置为 false 。

 if(navigator.onLine) { // true|false // ... }

online 和 offline 事件：

当浏览器脱机或上线时，浏览器还支持 online 和 offline 事件。

window.addEventListener('online', function(e){console.log('online')});
window.addEventListener('offline', function(e){console.log('offline');});

你可以使用几种熟悉的方式来注册事件：

在 window，document，或 document.body 上使用 addEventListener
将 document 或 document.body 的 ononline 或 onoffline 属性设置为一个 JavaScript Function 对象。(注意：由于兼容性原因，不能使用 window.ononline 或 window.onoffline。)
在 HTML 标记中的 body 标签上指定 οnοnline=”…” 或 οnοffline=”…” 特性。

注意事项：

IE8中需要给document.body绑定事件而不是window
在线离线的变化指的是物理上的网络链接变化，如果是在控制台将网络限制为 offline 则不会触发相应的事件。

实例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用 JavaScript 检测浏览器在线/离线状态（JavaScript API — navigator.onLine）</title>
    <style type="text/css"> #status {
            position: fixed;
            width: 100%;
            font: bold 1em sans-serif;
            color: #FFF;
            padding: 0.5em;
        }
        #log {
            padding: 2.5em 0.5em 0.5em;
            font: 1em sans-serif;
        }
        .online {
            background: green;
        }
        .offline {
            background: red;
        } </style>
</head>
<body>
<div id="status"></div>
<div id="log"></div>
<button type="button" id="test">检查状态</button>
<script> window.addEventListener('load', function () { var testBtn = document.getElementById("test"); var status = document.getElementById("status"); var log = document.getElementById("log");

    function updateOnlineStatus(event) { var condition = navigator.onLine ? "online" : "offline";
        status.className = condition;
        status.innerHTML = condition.toUpperCase();

        log.insertAdjacentHTML("beforeend", "Event: " + (event?event.type:"-") + "; Status: " + condition+ " | ");
    }

    window.addEventListener('online', updateOnlineStatus);
    window.addEventListener('offline', updateOnlineStatus);
    testBtn.addEventListener("click", updateOnlineStatus);
    updateOnlineStatus();
}); </script>
</body>
</html>

总结：

1、navigator.online属性提供浏览器是否在线的布尔值

2、浏览器脱机或上线还支持online和offline事件（IE8需要给document.body绑定事件而不是window）

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

评论(0) 浏览(1067)

062023-2

【小程序开发】uniapp引入iconfont图标及使用方式

前端达人

第一步：打开iconfont官网新建项目并添加自己所需要的图标

这里是iconfont的网址链接： iconfon官网

新建项目

$\textcolor{red} {不要勾选彩色，会导致在项目中无法修改字体颜色及样式，本人亲测，找了半天解决办法最终悔恨不已}$

App下原生导航栏的按钮如果使用字体图标，注意检查字体库的名字（font-family）是否使用了默认的 iconfont，这个名字是保留字，不能作为外部引入的字体库的名字，需要调整为自定义的名称，否则无法显示
按钮上显示的文字。使用字体图标时 unicode 字符表示必须 ‘\u’ 开头，如 “\ue123”（注意不能写成"\e123"）。

选择自己需要的图标加入购物车再添加到项目中

在这里插入图片描述

第二步：下载我们所需要的iconfont.css文件并引入到项目中

在这里插入图片描述

下载项目并解压

在这里插入图片描述

将iconfont.css文件复制放到我们的项目中去，一般放在static静态文件目录下

第三步：修改iconfont.css文件中的内容并全局引用

在这里插入图片描述

需要注意的是，当我们在项目中新添加了图标后，需要重新复制修改iconfont.css中的内容，要不然新添加的图标是找不到的

在这里插入图片描述

在移动端引用的时候要在App.vue文件中进行全局注册，而不是main.js中

第四步：使用iconfont图标进行开发

在开发中我们常用的有两种方式，这两种方式以及注意事项我在以下内容都有演示：

在页面文件中直接使用标签
使用APPplus原生的自定义导航栏iconfont右侧自定义图标

1.在页面文件中直接使用标签

在这里插入图片描述

两种方式代码的获取方式如下图所示：

使用uniCode码

Font Class 名称

在这里插入图片描述

2.使用APPplus原生的自定义导航栏iconfont右侧自定义图标

使用iconfont图标的文件内容（忽略css样式）：
在这里插入图片描述
需要配合static目录下的iconfont.tff文件，这个文件在我们下载到本地的时候那个目录中，与iconfont.css在一个目录中：

pages.json文件中配置iconfont图标：

这三步完成，我们配置自定义原生导航栏的自定义图标就完成啦！

五：需要注意的点写在这里：

iconfont官网创建项目的时候，不要勾选 $\textcolor{red} {彩色}$ 那个多选框，否则使用的时候不能更改颜色
如果项目重新添加了新的图标，需要重新生成在线链接，更新iconfont.css文件
自定义原生导航栏使用iconfont图标时，必须配合iconfont.ttf文件使用

作者：彩云sky
来源：人人都是产品经理
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

评论(0) 浏览(1326)

062023-2

web3:区块链常见的几大共识机制及优缺点

前端达人

什么是共识？

我们所说的共识，是指达成了广泛的一致。比如，一群人去吃晚饭，如果他们对于提议“吃某火锅”没有任何异议，那么就可以说共识达成了。如果存在异议，那么他们就必须通过某种方法决定吃什么。在极端情况下，这群人就会分开。

什么是共识机制？

区块链要成为一个难以攻破的、公开的、不可篡改数据记录的去中心化诚实可信系统，需要在尽可能短的时间内做到分布式数据记录的安全、明确及不可逆，提供一个最坚实且去中心化的系统。共识机制在区块链中成为了重要的因素之一。

区块链分布式记账的方式使得每个人手上都有一本完整的账本，全网共有。但是随着节点的不断增多，数据越多，账本也越安全，难以摧毁。除此之外，任意一个或者部分节点的账本被篡改，都不可能被全网认同，除非你能控制51%的节点，即51%攻击，但是这耗能巨大，几乎是不可能的。同时随着节点不断增加，谁来记账，如何选择合适的人来记账成为一个问题，而制定一个记账人的选择方式以及规定，让大家来遵守这个规定，达成共识，这就是区块链里面的共识机制。

共识机制是区块链节点就区块信息达成全网一致共识的机制，说得更直白一些就是要解决所谓去中心化的信任问题，因为每个节点之间默认是不认识且不可靠的，同时每个节点都不能知道其他节点是否宕机或者背叛的情况下，尽可能的保证记录信息的准确性以及安全性。同时节点越分散，效率越低，网络对于信息的满意度越高，越安全。

共识机制的目标

区块链作为一种按时间顺序存储数据的数据结构，可支持不同的共识机制。共识机制是区块链技术的重要组件。区块链共识机制的目标是使所有的诚实节点保存一致的区块链视图，同时满足两个性质：
1）一致性：所有诚实节点保存的区块链的前缀部分完全相同。
2）有效性：由某诚实节点发布的信息终将被其他所有诚实节点记录在自己的区块链中。

为什么需要共识机制?

在分布式系统中，各个不同的主机通过异步通信方式组成网络集群。为了保证每个主机达成一致的状态共识，就需要在主机之间进行状态复制。异步系统中，可能会出现各样的问题，例如主机出现故障无法通信，或者性能下降，而网络也可能发生拥堵延迟，类似的种种故障有可能会发生错误信息在系统内传播。因此需要在默认不可靠的异步网络中定义容错协议，以确保各主机达成安全可靠的状态共识。所以，利用区块链构造基于互联网的去中心化账本，需要解决的首要问题是如何实现不同账本节点上的账本数据的一致性和正确性。

这就需要借鉴已有的在分布式系统中实现状态共识的算法，确定网络中选择记账节点的机制，以及如何保障账本数据在全网中形成正确、一致的共识。

如何评价一个共识机制的优劣:

安全性:能否有效防止二次支付，私自挖矿
扩展性:当系统成员和待确认交易数量增加时，所带来的系统负载和网络通信量的变化，通常以网络吞吐量来衡量
性能效率:每秒可以处理的交易数量
资源消耗:达成共识过程中，所要消耗的CPU、内存等计算资源

共识机制分类

没有一种共识机制是完美无缺的，各共识机制都有其优缺点，有些共识机制是为解决一些特定的问题而生。

BTC作为区块链的第一个应用，它的共识机制PoW共识机制曾经一枝独秀，但是随着区块链技术的不断发展，各类不同的共识机制开始不断涌现，各有千秋，各有拥趸。

常见的共识就机制包括：POW（工作量证明机制）、POS（权益证明机制）、POW+POS（混合共识机制）、DPOS（股份授权证明）等等，另外还有Pool验证池、Ripple瑞波共识协议、PBFT（使用拜占庭容错算法）等等

PoW( Proof of Work)工作量证明：多劳多得

在这里插入图片描述

最早（也是第一个）被应用的共识机制，最先被BTC采用并且获取了巨大成功，它支撑了BTC系统长达 10 多年无重大故障使其平稳运行。而且 PoW 构想也符合创始人中本聪最初的设想：人人皆可挖矿、按劳分配、公平公正。

PoW 属于按劳分配，多劳多得，就如同大家在BTC系统中一起进行数学运算，最先运算出的才能获得奖励。是一种衡量计算机工作量的共识机制。BTC使用的就是工作量证明机制。

工作量证明主要通过哈希计算找出合理数据的步骤来完成：将区块头数据带入哈希函数计算公式，不断调整区块头数据中的随机数，直到计算出满足特定标准的哈希值，工作量证明就会完成。

简单来说就是多劳多得，谁的算力强，计算得就更快，获得记账权的概率就越高，算力竞争的胜者将获得相应区块记账权和BTC奖励。因此,矿机芯片的算力越高,挖矿的时间更长,就可以获得更多的数字货币。进行运算获得奖励的过程称之为挖矿，参与挖矿的人们称之为矿工。这种证明方式决定了其验证过程需要大量的数据计算，而其他节点却很容易验证计算结果是否正确，因此区块链系统无法被恶意节点所欺骗。但是这种证明方式需要消耗大量能源(电力及计算硬件损耗)，很不环保。并且在理论上，如果集合了全网51%的算力即可对区块链网络进行有效攻击，因此许多基于比特币代码产生的、市值较小的山寨币很容易遭受攻击。

代表token：BTC、BCH、LTC等。

优点

公平公正：去中心化程度高，人人都可以参与获得记账权；
安全系数高：全网算力越高，其安全程度也越高，如破坏该系统需要投入巨大成本；
算法简单，容易实现

缺点

资源浪费：因每一笔交易都需要通过多数矿工的确认，在这些矿工进行运算的过程中消耗大量的电力资源等。
效率低下：区块的确认时间难以缩短；容易产生分叉，需要等待多个确认。
算力集中：根据往年数据显示，在资本大量进入的情况下，过去一年矿池算力份额排名前五位的矿池占据了BTC总算力份额的 65%，马太效应逐渐显现，而算力过度集中还存在着 51% 攻击的风险。
永远没有最终性，需要检查点机制来弥补最终性。

PoS(Proof of Stake)股权证明算法：持有越多，获得越多

在这里插入图片描述

因 PoW 存在的问题，PoS 在主流算法一路畅通的“杀了出来”，成为了最具有挑战者。近几年，基于 PoS共识打造的区块链项目越来越多，如目前市值保持第二的ETH也加入了 PoS。“Staking经济”在 2019年成为了热门词语，同时也被交易所和钱包大力追捧。

POS机制采用类似股权证明与投票的机制，选出记帐人，由它来创建区块。持有股权愈多则有较大的特权，且需负担更多的责任来产生区块，同时也获得更多收益的权力。 POS 机制中一般用币龄来计算记账权，每个币持有一天算一个币龄,比如持有 100 个币,总共持有了 30 天,那么此时的币龄就为 3000。在 POS机制下,如果记账人发现一个 POS 区块, 他的币龄就会被清空为 0,每被清空 365 币龄,将会从区块中获得 0.05 个币的利息(可理解为年利率 5%)。

PoS权益证明同样需要通过计算找出合理的哈希值来完成。但不同的是权益证明机制通过节点持有加密货币的时间和数量来判断节点的权益大小。根据权益大小不同，用户之间看到的计算目标值也不同。权益大的节点，获得目标值更加简单，更容易获得下一个区块的记账权。这种方式不需要每个节点都进行大量的运算，节省了电力能源。同时全网51%的算力攻击在权益证明机制下是无效的，因为发起这种攻击反而会损害自身的利益。但是可能会出现币种持有数量大的节点权力过大，对区块链记账享有绝对支配权的情况，容易引发信任问题。

在 PoS 机制中，是不需要消耗电力来进行运算，而是通过抵押 token 来获得打包区块的权利。当一笔交易发生时，系统会对打包区块和验证区块的节点来进行奖励，奖励则是增发或者解锁的 token。

代表token：ADA、ONT、ATOM等。

优点

不浪费资源、效率高：因其不需要拼算力挖矿，同时缩短了共识达成的时间，转账效率提高了；
弱化了中心矿池规模经济的需求：算力集中垄断的情形也得到了缓解，个体竞争力差别相对减小；

缺点

被动形成中心化：因去中心化程度，容易出现强者恒强的情况，会导致富者越富，资源越来越集中的情况。
安全隐患：PoS机制实现较为复杂，容易产生安全漏洞。
无权益问题（Nothing at Stake）：用户在PoS中可以同时在两个分叉上面下注；无论哪一个分叉后面被公认为主链，该用户都可以获得奖励而没有机会成本的损失。这样也在事实上会干扰共识的形成。
还是需要挖矿，本质上没有解决商业应用的痛点。

DPOS(Delegated Proof-of-Stake)股份授权证明

在这里插入图片描述

DPoS 机制是在 PoS 的基础上进行了改良，举例来说就是大家公认的投出选票，选举出一定数量的代表，让这些代表进行验证和记账等，可以理解为PoS 的升级版。与PoS的主要区别在于持币者投出一定数量的节点，代理他们进行验证和记账。其合规监管、性能、资源消耗和容错性与PoS相似。

DPoS的工作原理为：每个股东按其持股比例拥有影响力，51%股东投票的结果将是不可逆且有约束力的。其挑战是通过及时而高效的方法达到51%批准。为达到这个目标，每个股东可以将其投票权授予一名代表。获票数最多的前100位代表按既定时间表轮流产生区块。每名代表分配到一个时间段来生产区块。所有的代表将收到等同于一个平均水平的区块所含交易费的10%作为报酬。如果一个平均水平的区块含有100股作为交易费，一名代表将获得1股作为报酬。DPoS的投票模式可以每30秒产生一个新区块。

简单点说：DPoS 委托权益证明通过由持币人投票选举出一定数量的代表来达成共识。每个持币人的投票所占的比重与他持有的币种数量有关，持有的越多，所占的比重越大。被选出的代表可拥有记账权，轮流进行记账;未能很好履行职责的代表还会被投票除名。这一任期结束后，新的代表会再次通过投票产生。

代表token：EOS、TRX等。

优点

比 PoS 机制拥有更高的效率和性能：相比于 PoS 机制，DPoS 大幅缩小了参与验证和记账的节点数量，可以达到秒级的共识验证。

缺点

整个共识机制还是依赖于token，很多商业应用是不需要代币存在的。
去中心化程度低：相比较于只能说是弱中心化；
安全问题严重：类 PoS 机制的通病，相信大家都看到过报道，如被黑客攻击等等。

PoC(Proof of Capacity)容量证明机制

在这里插入图片描述

PoC 机制早在 2014年存在了，但只是一直处于“落魄阶段”，简单说就是没火，无人问津。2019年随着POC一大公链Yottachain的崛起，越来越多的矿工加入了POC硬盘挖矿这个行业大军了。它是POW共识机制的一种，以硬盘作为共识参与者，它的特点是牺牲性能获得安全可信，相对POW减少了非常多的安全和信任成本，更低成本解决了全局信任和安全，几乎不耗电力资源，并且可共享和复用的信任生态。

PoC 机制是通过普通硬盘挖矿的共识机制。简单来说就是利用计算机硬盘中的闲置空间来进行存储进行挖矿获取收益，硬盘空间越大，存储的内容越多获得的收益就越大。它更多地关注内存而不是处理能力。从某种意义上说，这是对PoW的改进，即使在挖掘开始之前，容量证明也要求节点将预先计算的哈希值存储在其硬盘驱动器和其他内存单元上，这个过程称为绘图，绘图使容量证明成为比工作证明更快的机制。这种方法的另一个优点是它可以节省大量能源，这与工作量证明机制不同。更不用说，硬盘存储更多哈希值的任何技术改进也将为不在区块链中的人改进技术，这与许多制造商制造的专用芯片不同，后者除了采矿之外什么都不做。

IPFS 也类似，但不同的是 IPFS 衍生的区块链项目（激励层Filecoin）是一种去中心化存储服务的 Marketplace（撮合交易的市场），它的重点在于如何在系统参与者互不信任的条件下，实现存储和检索工作的量化；PoC 是一种底层共识机制，与 PoW、PoS一样都是去中心化网络达成一致性状态的算法。由此来看，两者是完全不同的概念，唯一的共同点就是都可以使用硬盘向网络贡献价值来换取收益。

代表token：BTT、BHD等。

优点

挖矿门槛较低：只要有硬盘就可以进行挖矿，大大降低了挖矿门槛；PoC的矿机耗电量低、噪音小、成本低，适合家庭挖矿和人人挖矿。
去中心化程度较高：抵押机制提高了算力集中化的门槛，即便有超级矿工出现，普通散户也可以继续获得收益。
能源消耗低，节能：相比于PoW，POC挖矿将算力替换成硬盘空间，在很大程度的杜绝了POW挖矿造成的资源浪费以及对环境不友好等问题，同时降低了挖矿成本，让矿工从挖矿中赚取更多的利润。
反垄断：用硬盘容量替代了算力，天然具有抗ASIC的属性

缺点

未来发展的局限性可能较大
可能会有政策性风险
PoC并没有实现真正的平等

DAG(Directed acyclic graph)有向无环图：无区块链概念

在这里插入图片描述

有向无环图是计算机科学中众所周知的数据结构。事实上，区块链也是DAG的一个例子，因为它有一个明确的方向，没有任何循环，并且是一个图。1OTA使用的Tangle也是DAG共识机制的一种形式。在这种机制中，每个块必须有两个父块。所以，为了通过DAG共识机制完成一笔交易，用户需要验证自己之前的两笔交易。这种机制的最大优势是它可以减少延迟和交易费用。然而，这种共识模型对提高可扩展性几乎没有任何作用，而且极易受到攻击，因为任何攻击只需要34%的哈希算力就可以破坏系统。

DAG最初出现就是为了解决区块链的效率问题。其通过改变区块的链式存储结构，通过DAG的拓扑结构来存储区块。在区块打包时间不变的情况下，网络中可以并行的打包N个区块，网络中的交易就可以容纳N倍。

之后DAG发展成为脱离区块链，提出了blockless无区块的概念。新交易发起时，只需要选择网络中已经存在的并且比较新的交易作为链接确认，这一做法解决了网络宽度问题，大大加快了交易速度。

代表token：IOTA、byteball等。
前段时间国内首个基于DAG的物联网区块链项目ITC万物链也取得了不小的涨幅。

优点

交易速度快;
无需挖矿;
极低的手续费

缺点

网络规模不大，导致极易成为中心化;
安全性低于PoW机制

PBFT(Practical Byzantine Fault Tolerance)实用拜占庭容错：分布式一致性算法

实用拜占庭容错在保证活性和安全性(liveness & safety)的前提下提供了(n-1)/3的容错性。
在分布式计算上，不同的计算机透过讯息交换，尝试达成共识;但有时候，系统上协调计算机(Coordinator / Commander)或成员计算机 (Member /Lieutanent)可能因系统错误并交换错的讯息，导致影响最终的系统一致性。拜占庭将军问题就根据错误计算机的数量，寻找可能的解决办法，这无法找到一个绝对的答案，但只可以用来验证一个机制的有效程度。而拜占庭问题的可能解决方法为：在 N ≥ 3F + 1 的情况下一致性是可能解决。其中，N为计算机总数，F为有问题计算机总数。信息在计算机间互相交换后，各计算机列出所有得到的信息，以大多数的结果作为解决办法。

优点

系统运转可以脱离币的存在，pbft算法共识各节点由业务的参与方或者监管方组成，安全性与稳定性由业务相关方保证。
共识的时延大约在2~5秒钟，基本达到商用实时处理的要求。
共识效率高，可满足高频交易量的需求。

缺点

当有1/3或以上记账人停止工作后，系统将无法提供服务；
当有1/3或以上记账人联合作恶，且其它所有的记账人被恰好分割为两个网络孤岛时，恶意记账人可以使系统出现分叉，但是会留下密码学证据

实用拜占庭容错主要应用于央行的数字货币以及布萌区块链。

dBFT(delegated BFT)授权拜占庭容错算法

小蚁采用的dBFT机制，是由权益来选出记账人，然后记账人之间通过拜占庭容错算法来达成共识。dBFT和PBFT的关系类似于PoS和DPoS的关系。

dBFT在PBFT基础上进行了以下改进：

将C/S架构的请求响应模式，改进为适合P2P网络的对等节点模式；
将静态的共识参与节点改进为可动态进入、退出的动态共识参与节点；
为共识参与节点的产生设计了一套基于持有权益比例的投票机制，通过投票决定共识参与节点（记账节点）；
在区块链中引入数字证书，解决了投票中对记账节点真实身份的认证问题。

优点

专业化的记账人；
可以容忍任何类型的错误；
记账由多人协同完成，每一个区块都有最终性，不会分叉；
算法的可靠性有严格的数学证明；

缺点

当有1/3或以上记账人停止工作后，系统将无法提供服务；
当有1/3或以上记账人联合作恶，且其它所有的记账人被恰好分割为两个网络孤岛时，恶意记账人可以使系统出现分叉，但是会留下密码学证据；

以上总结来说，dBFT机制最核心的一点，就是最大限度地确保系统的最终性，使区块链能够适用于真正的金融应用场景。

Pool验证池——私有链专用

基于传统的分布式一致性技术，加上数据验证机制;之前曾是行业链大范围在使用的共识机制，但是随着私有链项目的逐渐减少渐渐开始势微。

优点

不需要token也可以工作，在成熟的分布式一致性算法（Pasox、Raft）基础上，实现秒级共识验证。

缺点

去中心化程度不如bictoin；更适合多方参与的多中心商业模式。

参考

拜占庭将军问题

拜占庭将军问题是一个协议问题，拜占庭帝国军队的将军们必须全体一致的决定是否攻击某一支敌军。问题是这些将军在地理上是分隔开来的，并且将军中存在叛徒。叛徒可以任意行动以达到以下目标：欺骗某些将军采取进攻行动；促成一个不是所有将军都同意的决定，如当将军们不希望进攻时促成进攻行动；或者迷惑某些将军，使他们无法做出决定。如果叛徒达到了这些目的之一，则任何攻击行动的结果都是注定要失败的，只有完全达成一致的努力才能获得胜利。

这一问题是一种对现实世界的模型化，尤指网络当中由于软硬件错误、网络阻塞及恶意攻击导致的各种未知行为。
显然，在此处默认了将军们在达成一致的过程中正确的传递出了自己的决定，也就是说叛徒只存在于将军当中，不存在于传令兵当中。故要让拜占庭将军问题有解，必须要具备一个重要前提，即信道必须是安全可靠的。关于信道可靠问题，会引出两军问题。两军问题的结论是，在一个不可靠的通信链路上试图通过通信以达成一致是基本不可能或者十分困难的。

拜占庭容错

拜占庭将军问题提出后，有很多的算法被提出用于解决这个问题。这类算法统称拜占庭容错算法（BFT: Byzantine Fault Tolerance）。简略来说，拜占庭容错（BFT）不是某一个具体算法，而是能够抵抗拜占庭将军问题导致的一系列失利的系统特点。这意味着即使某些节点出现缺点或恶意行为，拜占庭容错系统也能够继续运转。本质上来说，拜占庭容错方案就是少数服从多数。

拜占庭将军问题的原始论文给出了一些解决思路，但其更注重理论上的可行性。算法效率不高，算法复杂度为指数级，且文中明确指出时间成本及消息传递数量很大。因此不具备太大的实用价值。

拜占庭容错系统需要达成如下两个指标：
● 安全性：任何已经完成的请求都不会被更改，它可以在以后请求看到。在区块链系统中，可以理解为，已经生成的账本不可篡改，并且可以被节点随时查看。
● 活性：可以接受并且执行非拜占庭客户端的请求，不会被任何因素影响而导致非拜占庭客户端的请求不能执行。在区块链系统中，可以理解为，系统需要持续生成区块，为用户记账，这主要靠挖矿的激励机制来保证。

拜占庭系统目前普遍采用的假设条件包括:
● 拜占庭节点的行为可以是任意的，拜占庭节点之间可以共谋；
● 节点之间的错误是不相关的；
● 节点之间通过异步网络连接，网络中的消息可能丢失、乱序、延时到达；
● 服务器之间传递的信息,第三方可以知晓 ,但是不能窜改、伪造信息的内容和验证信息的完整性；

科普 | 什么是共识机制？

详解区块链中常见的八大共识机制！

区块链的几大共识机制及优缺点

作者：彩云sky
来源：人人都是产品经理
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

评论(0) 浏览(1443)

062023-2

体验陷阱丨被你忽视的文章编辑器对用户体验的影响有多糟糕

资深UI设计者

我们都在研究好的设计，感叹优秀的产品带给我们的尖叫，但我们或许从未思考过，糟糕的用户体验设计也会给用户带来很大的伤害。这个产品体验栏目的灵感来自于乔纳森·沙利亚特的《设计的陷阱：用户体验设计案例透析》这本书。在本书的介绍里，有这么一句话——设计能杀人、使人愤怒、使人伤心。读到这句话的时候，让人惊愕，让人不可思议，但这就是事实，这就是糟糕的用户体验设计会导致的后果。「体验陷阱」的第一期，就让我们来看看那些被忽视的文章编辑器对用户体验的影响有多糟糕。

一、什么是文章编辑器？

文章编辑器是一个产品最基础的构成部分，不管是前台还是后台，编辑器都是一个非常基础的功能。比如一个产品需要发布新的资讯内容，在后台就一定需要有一个文章编辑器才能实现这个功能。
文章编辑器在各大网站、APP产品里都非常常见，特别对于以内容生产为主的社区、平台，比如像站酷网、人人都是产品经理、知乎、头条、网易这些平台，文章编辑器是一个非常基础又必不可少的功能。

二、我们理想中的文章编辑器？

1. 有用性
文章编辑器要能实现内容的发布，当用户从本地或在线文档（比如腾讯文档、飞书、石墨等）复制内容进去时候，可以轻松实现二次编辑，比如插入图片、调整标题样式等。
2. 易用性
编辑器的界面、功能，要能满足多数用户的期望，比如支持多张图片上传、第三方音频/视频链接，以及整个操作过程中使用起来愉悦、友好。
3. 容错性
当用户出现操作错误的时候，系统能够及时给用户提示，比如图片上传进度、图片尺寸大小限制、必填项勾选等等。容错性对用户体验的影响特别大，如果用户在使用过程中不清楚哪个地方犯错不能继续操作，用户对系统就会陷入焦虑。

三、实际产品设计中的编辑器

1. 站酷
站酷网是全国最大的设计师平台，吸引了国内众多优秀的设计师和设计知识创作者，但是他们的文章编辑器，体验下来却非常糟糕。接下来让我们来看看这个糟糕的文章编辑器，给用户带来了多大的体验伤害。
当我开开心心地把一篇在腾讯文档写好的内容复制到站酷编辑器的时候，在对标题进行格式调整的时候，全局样式竟然会同步更改，比如想把「标题」更改为「标题1」的样式，整篇文章就会一起更新，这让人摸不着头脑。不过我没放弃，经过多番尝试，才发现需要在标题上下各加一个Enter，这样才能设置成功（我是一个BUG解决天才）。

当文章篇幅撑过编辑器的默认高度以后，这个时候就会出现一个非常糟糕的体验，你找不到编辑器的工具栏。比如你想上传图片或者修改内容，你都不知道工具栏去哪里了，这个时候用户彻底迷失，变得异常焦躁。解决这个问题的唯一办法是——把编辑器全屏。

创过第一关以后，全屏的编辑器又出现一个非常糟糕的体验。那就是当你去调整某一段文字的时候，比如加一个换行，这个时候编辑器的光标就会像幽灵一样跑到底部，你只能重新找到刚才的原位置，你以为是眼花再试一次之后，光标再次出现在底部，简直让你怀疑人生。

当你从头部开始上传图片的时候，和调整字段一样，光标又会像幽灵一样跑到底部，这个时候，你还得去找之前的位置，才能继续上传。不过经过多番的尝试，我又破解了站酷编辑器的设计密码，原来可以从底部开始倒着传图片，那该死的光标，就不会跑到底部去了，这个秘诀让我提升了很高的效率，我真感慨自己的的智商：）

从站酷的编辑器可以看出，他们违反了尼尔森十大原则的系统性可见原则和防错原则。第一，在用户的内容高度超出编辑器默认高度以后，编辑器的工具栏消失不见，这其实是一个功能BUG，不但没有修复也没有提示用户使用全屏操作，用户彻底迷失；第二，在用户调整内容换行的时候，光标会像幽灵一样跳到底部，这也属于功能的BUG，没有修复也没有系统提示，最后导致用户在内容发布阶段就变得垂头丧气，最终浪费了无数宝贵的时间。
拓展阅读：
尼尔森十大可用性原则第一条，系统可见性原则，保持界面的状态可见，变化可见，内容可见。让用户知道发生了什么，在适当的时间内做出适当的反馈。
尼尔森十大可用性原则第五条，防错原则，比出现错误信息才提示更好的，是通过更用心的设计来防止这类问题发生。在用户选择动作发生之前，就要防止用户混淆或者错误选择。对产品进行不同的操作、重组或特别安排，防止用户出错。
2. UI中国
UI中国的文章编辑器，虽然不支持从腾讯文档、飞书文档直接复制过去的格式，但编辑器设计得非常清爽，给用户的第一印象非常好。但是，就在用户开开心心准备发布一篇精心准备的文章时候，噩梦来了。
UI中国的服务器非常不稳定，所以当用户上传图片的时候，图片的加载进度特别慢。其实慢一点也能接受，但是当进度条达到100%以后，图片始终还是无法载入，有时候需要等几秒，有时候等10几秒最后换回来的一串错误代码——Error during file upload。这个时候用户还有耐心，也许就是服务器偶然发生故障，于是再次重新上传，但收到的还是同样的结果。

为了解决这个问题，我以为是图片的尺寸或大小出现了问题，但经过查阅，并无任何问题，完全是官方的尺寸规范以内。最后通过数次的尝试，我总算摸到一点点规律，当一张图片反复上传出现乱码的时候，那就先去传其他的图片，最后再返回上传这张图片，运气好的时候就解决了，运气不好的话，你就休息一下再来上传。我只能感慨自己实在太聪明了。
从UI中国的编辑器可以看出，他们和站酷一样，违反了尼尔森十大原则的第五条原则，防错原则。在用户上传图片出现错误以后，并没有给用户及时的中文提示（99%的设计师看不懂Error during file upload这串英文代码，毫无意义），导致用户在使用过程中产生焦躁、愤怒的情绪，浪费了无数宝贵的时间。
3. 微信公众号
微信公众号是知识创作者最常用的工具了，但事实上对于新手来说，它的设计非常不友好。我还想起当我第一次操作公众号发布文章的时候，当我把内容都编辑好以后，我找不到「发布」的按钮。我很难理解「群发」的功能，特别是当我在下拉列表发现竟然还藏着一个「发布」按钮，我以为那就是发布。但当我开开心心准备分享我的推文时候，我在自己的公众号却怎么也找不到这篇文章。

最后我只能重新编辑一次，但问题还是没有解决。群发到底是什么意思？当我点击以后「群发」以后，又出现了群发、定时群发和分组群发的按钮，我实在难以理解这几个按钮有什么不同，我现在又应该选择什么。我犹豫不定，害怕犯错，又不知道如何解决，最后只能求助朋友。

微信公众号在「发布文章」这个环节的设计，完全违背了交互心理学上的席克定律，给用户太多、不清晰的选择，增加了用户的学习和消耗成本，对于公众号新手来说，简直就是一次噩梦。其次也违背了尼尔森十大原则的第十条，人性化帮助原则，没有给新手解释清楚「群发」和「发布」的区别，也没有对核心功能做出对应的文字解释，让用户在操作的过程中产生数次焦躁，最终只能求助于他人。
拓展阅读：
席克定律是指人的信息传递时间与刺激的平均信息量之间呈线性关系。简单一点我们可以理解为：人面临越多的选择，所要消耗的时间成本越高。
尼尔森十大原则第十条，人性化帮助原则，帮助性提示最好的方式是：①无需提示；②一次性提示；③常驻提示；④帮助文档。
4. 脉脉
脉脉作为拥有1.1亿用户的职场社交独角兽，为用户提供的专栏编辑器，用户体验差到让人绝望。
脉脉使用的编辑器，属于十年前最早一批的编辑器，不管是功能还是样式，都非常掉身价，和他们的品牌调性不匹配。它们不支持从腾讯文档、飞书复制过去的文章（Markdown格式），所以我每次都需要调整格式才能和源文档格式一致，极大增加了编辑成本。这也是我最后放弃脉脉更新的原因，他们流失了一个内容创作者。

在用户上传图片以后，他们没有做自适应配置，整个编辑器无法看到图片的完整内容，用户根本不知道自己上传的图片是否正确。更糟糕的是，当你想等比例调整图片的大小，图片就完全扭曲，让用户进一步崩溃。

点击上传图片以后，还需要用户点击「上传」，才能真正实现图片上传，增加了用户的操作步骤。其次已上传的图片不能取消选中，如果想要取消当前图片，只能再次上传一次图片。
最糟糕的是，文章竟然不支持自动或手动保存，想象一下当你花费了1个小时好不容易编辑好的文章，最后因为不小心关闭浏览器导致文章丢失了，这就是使人愤怒的设计，这几乎把用户使用的欲望彻底剿灭了，永远不会再回来。
脉脉的编辑器设计，严重违反了尼尔森十大原则中的多条原则，比如撤销重做原则、防错原则、容错原则等，可以说是非常糟糕的设计，这样的编辑器几乎可以毁灭任何一个内容创作者的心情。
拓展阅读：
尼尔森十大可用性原则第三条，撤销重做原则，给用户更多自主操作权，当用户在使用产品过程中产生错误的操作时，应提供更多的解决方案，例如撤销或重做等功能。
尼尔森十大可用性原则第九条，容错原则，帮助用户从错误中恢复，将损失降到最低。如果无法自动挽回，则提供详尽的说明文字和指导方向，而非代码如404等。
5. 135编辑器
135编辑器作为国内最大的编辑器头部产品，他们几乎把编辑器可能有的功能都设计了，比如导入文章、语音合成、模版、一键排版等等。但是这个功能如此丰富的编辑器给新用户的体验则留下糟糕的印象。
135编辑器的功能非常强大，这就像一个2003年半的Word办公软件，一眼望去，都是数不清的功能。这样的设计导致了新手不知道如何开始，他们的按钮权重几乎都一样，比如新建、关闭、导入、微信复制等等，没有重点突出核心功能。

人在操作软件时候的记忆属于短期记忆，一般只会保留5-7秒，这便是心理学上最出名的7±2效应。在新手首次使用该软件的时候，面对几十上百个的功能，根本不知道如何下手。用户需要学习的成本非常高，甚至当你编辑好文章以后，你都不知道如何把文章同步到微信公众号，因为「微信复制」这个按钮没有重点突出，从字面意思也无法获取真正的意思。这也违背了人类运动的预测模型费茨定律，如果你想小孩子也简单轻松的能关掉房屋的开关，那么你的开关就应该大一点，明显一点。

其次过度商业化把这款编辑器的用户体验毁灭了，几乎80%的功能都需要加入VIP会员，然后你需要反复关闭窗口，操作路径变得又长又繁琐。试问，一个新用户在使用一款陌生的编辑器的时候，需要关闭几十次广告，你觉得他还有耐心去使用吗？

拓展阅读：
7±2效应就是指人的短期记忆容量在7±2的数量之间浮动，也就是说，用户最多同时处理5～9个信息。
费茨定律是人类运动的预测模型，主要用于人机交互和人体工程学。该定律预测光标或手指从一个起始位置移动到最终目标所需的时间（T）由两个参数决定，即光标或手指到目标的距离（D）和目标的大小（W）。
6. 国内某知名CMS系统
这是一个国内非常出名的开源CMS系统，目前已停止更新维护，不过国内的企业网站估计有50%都是基于这个系统搭建。做过外包设计的朋友都知道，经常会听见客户说系统难用，那么为什么难用，我们先来看看这些商业项目中管理后台的编辑器有多糟糕。
点击添加内容后，直接跳转到一个新窗口，这个新窗口还把当前屏幕都遮住了，这不得不让用户需要把这个窗口缩小才能复制内容。这个设计最让人头疼的是当你的桌面应用打开过多时候，你根本不知道这个内容窗口在哪里，让人感到无比焦躁。

编辑器的的样式、功能就几乎可以忽略不计了，因为这毕竟是一款开源的系统，而且官方都已经停止更新了。如果你从腾讯、飞书文档直接复制内容进去，文本格式就是错乱的，这和脉脉一样，这几乎需要在编辑器里重新调整格式才行，这严重提升了用户的使用成本。这对于很多兼职为公司负责更新网站的用户来说，简直就是一场灾难。过去有太多次用户对编辑器的问题提出了很多次，包括不懂使用、增加功能等，总之，这些开源系统的编辑器，对很多用户来说就是一场噩梦。

四、思考总结

通过数款大厂产品的体验总结，我们发现，对于文章编辑器这个非常基础但又必不可少的功能，其实带给用户的体验非常糟糕。类似的糟糕体验，其实还数不胜数，我们这一期就不再展开。最后我们对此次的体验陷阱做一个简单的总结。
我认为，造成如此糟糕的编辑器体验的原因有两个，第一个，大部分的产品团队完全不重视编辑器这个功能。在很多产品、设计，包含程序工程师看来，这就是一个非常基础简单的功能，所以他们对编辑器非常轻视，也许开发出来的产品团队自己都没有亲身测试发布过，才会导致有如此多明显、让人愤怒的BUG。然而他们根本不知道这样的设计对用户的实际体验影响有多么糟糕。
第二个，产品团队完全没有遵循最基础的设计原则意识。国内大部分产品设计师对设计基础原则、理论都非常忽视，甚至觉得这些纯理论的指导原则毫无意义。这也是设计这门学科在国内发展的真实写照，但我们从这些体验陷阱可以看出，一个没有遵循设计基础原则的产品，体验下来，是多么的糟糕，多么的让人绝望。

作者：设计大侦探
来源：站酷
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

评论(0) 浏览(1612)

062023-2

3600字拆解微信键盘丨地主家的小儿子真是又帅又有才

资深UI设计者

微信键盘发布啦！拥有12亿用户的移动端巨无霸微信发布微信键盘了！就在本周一，预热近两年的微信键盘终于发布，这款微信之父张小龙口中的——不搜集任何隐私的输入法工具，总算揭开了他的神秘面纱。廖尔摩斯第一时间全面体验了微信键盘，通过三天的使用，我也成了微信键盘的脑残粉，这篇接近3600字的拆解，将会告诉你，这个地主家的小儿子，为什么又帅有才！

一、产品拆解

作为一款工具类产品，需要更注重产品的用户使用体验，所以此次产品拆解主要基于尼尔森十大可用性原则和常见的设计基础理论，比如格式塔原则、费茨定律等。我将会分为基础功能、个性化功能和个人隐私三个部分进行拆解。

1. 基础功能
1.1 键盘管理
键盘是输入法最基础的功能，根据每个用户不同的操作习惯，微信键盘为用户提供六种类型的键盘，分别是九宫格、全键盘、笔画键盘、手写键盘、五笔键盘和双拼键盘。在五笔键盘和双拼键盘中，还为用户提供了多种偏好设置，比如86五笔方案、98五笔方案等。

设计思考
相比行业头部老大哥搜狗输入法，微信键盘的类型相对还比较单薄，比如像搜狗输入法还支持生僻字键盘、拍照转文字等特色功能，不过作为一个V1.0.0版本，这也遵循了如今产品设计的主流设计模式，小步快跑，快速迭代。
1.2 键盘输入框
「输入框」是用户实际操作和使用的功能，这是最基础、最重要的功能。微信键盘的输入框界面风格非常简洁，和IOS默认键盘风格相近，目前仅有一款默认皮肤。

1.2.1 长按技巧
长按「拼音键」，可选择更多相关字符，比如数字、大小写等。其中长按「JKL」拼音键，可切换至「单手模式」；长按「中英文」键，可切换至「手写模式」，非常方便。

1.2.2 智能删除复原
这个小技巧使用起来特别方便，在我们删除一段文字的时候，经常会出现误删的情况，微信键盘设计了一个非常巧妙的功能，按住「删除键」左拉可以删除文字，往右则可以把删除的文字复原，提高了产品体验的容错性。

1.2.3 上滑输入数字符号
这个功能需要在系统设置开启，在键盘输入的时候，只需要上滑「拼音键」，就能直接把拼音键对应的数字拖到输入框，节省切换数字键盘的操作步骤。

1.2.4 特殊符号
「特殊符号」不仅包含了常见的10种类型，横排26键的设计更能让用户直观地找到自己需要的字符，使用起来体验非常友好。相比搜狗输入法超过20种的符号类型，微信键盘简洁的设计为用户提供了更高效的选择，带来了更友好的体验。

设计思考
少即是多。相比搜狗输入法的大而全，在特殊符号这个细节的设计，微信键盘让我爱不释手。首先应用了7±2效应，在用户的短期记忆里，降低记忆负荷。其次也应用了席克定律，减少用户的选择，降低消耗的时间成本，从而提升用户体验。
1.3 偏好设置
1.3.1 语音转文字
从识别语言观看，微信键盘支持普通话、粤语、英语、四川话和上海话，笔者亲自体验一番，发现识别准确率还挺高的（贵阳话，和四川话接近，超过80%准确率）。

1.3.2 声音和触感
「声音和触感」指的是用户使用键盘按键的声音和触感。这里有一个非常贴心的设计，当用户手机静音的时候，打开声音开关按钮会提醒用户当前处于静音模式，无法听到按键声音。这就是尼尔森十大原则的防错原则，在用户出现操作错误之前，通过设计提示提前避免，你可以想象如果没有这样的提示语，如果你的手机不小心静音了，你就会懊恼为啥键盘没有声音，这个软件是不是出问题了（笔者亲身经历）。

1.3.3 显示设置
微信键盘支持用户可设置键盘候选字的大小，这里也有一个非常贴心的设计，当用户调整字体大小以后，如果想要恢复默认大小，只需要把滑动组件拖动到已经标记的默认起点就可以了，这应用了尼尔森十大原则的易取原则，用户无需记住默认大小设置，如果想恢复，拖动标记的起点即可。

1.3.4 模糊拼音及其他
「模糊拼音」主要针对拼音基础欠缺的用户，提供模糊的拼音设置，从而提高输入效率。其次微信键盘还提供「首字母自动大小写」、「双击空格输入句号」和「智能添加空格」等偏好设置，用户可根据自己的操作习惯进行设置，获取更便捷的体验。

2. 个性化功能
个性化功能主要指微信键盘最特色的「拼写Plus」功能，这也是微信键盘发布以后给用户最大的惊喜。
2.1 智能推荐
「智能推荐」是微信结合自己强大的生态设计的一个功能，在用户输入文字的时候，系统会自动判断文字的类型，比如输入一本书的名字，系统就会提示是否需要向好友发送这本书籍。从内容类型看，包含了音乐、视频、读书、小程序、视频号和公众号。这个功能在用户的聊天场景中，实在太方便了，比如作者过去要给好友分享自己的公众号，还需要去公众号搜索、转发，如今只需要输入「设计大侦探」的名字，就可以向好友直接发送，减少了数步操作路径，极大提升了沟通效率。

2.2 表情推荐
表情是微信聊天场景中必不可少的一个元素，甚至有很多用户特别喜欢收藏表情，它可以用于各种聊天场景，活跃聊天的氛围。微信键盘的表情推荐，通过用户输入的词语，可以自动识别可能需要发送的表情，无需用户收藏，就可以为用户自动生成。这个功能非常赞，特别像笔者这样从不收藏表情的用户，当突然需要输入一个表情活跃一下气氛的时候，我只需要输入一个「大家好」，微信键盘就能为我提供数十种表情，满足我的需求。

2.3 智能拼写
「智能拼写」是指当用户输入某个词语时候，系统为用户精准匹配候选词，提高输入效率。笔者尝试了输入「梅西」，几乎可以根据智能匹配输入一段完整的文字。而微信生态更为恐怖的是，它会自动结合当前的话题标签，用户可直接跳转至话题的视频号动态，一键查看更多信息，让用户彻彻底底对微信生态的服务上瘾。

2.4 拼写检查
「拼写检查」是指系统会根据用户在输入文字的时候及时发现错别字，一键精准改错。这个功能设计得非常贴心，能让用户及时看到书写错误，降低因错别字带来的烦恼。

2.5 常用语
过去在微信聊天的时候，为了提高输入效率，我会把很多反复发送的文字复制到备忘录或微信收藏，这能提升我一定的沟通效率。但相比微信键盘的常用语功能，我以后就会直接放弃之前的两个形式了。这个功能实在太方便了，比如每一次粉丝添加我的时候，我都会需要介绍一下我们公众号的内容，现在我只需要输入前3个字，这段话就可以直接出来了，极大提升我的沟通效率。

2.6 单手模式
「单手模式」是指用户可根据自己的惯用手或场景设置输入模式，前面我有提到过，长按「JKL」拼音键，可切换至单手模式。

2.7 手写找字
「手写找字」是一个支持同时手写多字的输入模式，这个功能对于我们父辈一代的用户特别适用，他们多数人还未习惯用拼音拼写，更喜欢用手写的形式去输入，而支持写多字的模式可以极大提升拼写效率。

2.8 小结
什么是以场景为中心的设计，微信键盘的设计团队告诉我们，这就是以场景为中心的设计。过去设计者总是在思考如何去定义人们使用的系统和应用程序，而“以场景为中心”的概念，则强调要以人的需求为中心，系统和应用程序要去帮助人们满足他们的需求。看看微信键盘设计团队结合如此多真实场景的设计，可见设计师真的需要具备场景思维，才能设计出让用户尖叫的体验。
3. 个人隐私
3.1 清空个人词典
微信键盘提供了「清空个人词典」的功能，这有点不可思议。不过微信键盘的创立之初，微信之父张小龙就说过，微信将上线属于自己的专属输入法，其目的并不是为了抢夺输入法市场，而是为了更好的保护用户的隐私。不过该功能大家要谨慎使用，一旦清空，你所累积的个人词汇就会清空，将会影响你的输入体验。

3.2 帮助反馈
针对微信键盘使用的技巧和常见问题，微信键盘也设计了帮助反馈文档，为用户解决使用过程中的困惑。很多产品设计师或许觉得这样的模块可有可无，但这其实这就是尼尔森十大原则的人性化帮助原则，通过帮助文档为用户解决软件使用困惑。

3.3 隐私与权限
“我们非常重视你的隐私安全。我们谨遵最小、必要原则，仅依《微信键盘隐私政策》获取你使用微信键盘的功能所需的你的信息，不会额外获得你的其他信息”。这是隐私与权限页面的一句话，足以见得微信键盘的定位如上文所言，只做一款单纯的输入法软件，不侵犯用户的隐私。

二、设计总结

作为一个才上线发布V1.0.0版本的输入法产品，微信键盘真的给了我太大的惊喜。
从产品的易用性来看，无论是交互，还是界面，都严格遵循了尼尔森十大原则的标准。这个产品设计中最基础的设计理论模型，事实上，太多的工具类产品都没有遵循它的设计原则，我们常常说一款工具难用、不好用、设计不好，就是这些操作细节没有考虑进去。而微信键盘，在我目前的使用操作过程中，暂时没有，易用性非常高。
从产品的创新性来看，微信键盘不仅满足了一个键盘输入工具的基础功能，而且结合了自身强大的生态环境设计了「拼写Plus」这样非常创新的功能。它帮助我实实在在地提升沟通效率，比如一键推送我的公众号、和粉丝沟通的常用语等等，甚至破天荒的可以直接在聊天输入框分享我喜欢的歌曲、书籍、电影、视频号等，换做以前真的不敢想象原来这些功能可以通过一个输入法软件实现。
我已经彻底成为微信键盘的脑残粉了，即便某狗的输入法显示我已累计输入超过4百万字，但微信键盘给我使用的尖叫感，真的让我不可思议，就像那汹涌的潮水，一波又一波袭来，让我尖叫！

作者：设计大侦探作者：设计大侦探
来源：站酷
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

评论(0) 浏览(1420)

062023-2

1.1万字深度拆解丨樊登读书如何找到书中的黄金屋？

资深UI设计者

你有想过你的孩子一边喝六个核桃，一边听樊登读书吗？如果没有，这是因为你不知道樊登读书的销售场景有多丰富，他们和六个核桃就设计了一个联名套餐，售价429元。
你有想过你的办公场地可以加入一个读书角，让员工每天读书学习吗？如果没有，这是因为你不知道樊登读书有一个服务叫数字阅读空间，它可以让你的员工一键扫码即可阅读学习。
你有想过樊登读书2023年会解读什么书吗？如果你想知道，你可以购买他的「未来书单」，他都为你设计好了，不仅有52本实体书，还会给你一份未来书单专属认证的学员徽章。
如果不去拆解樊登读书，你根本不知道这个产品可以把读书这个原本枯燥乏味的学习形式变得这么有创意，绝对超出你的想象。
樊登，作为前央视的主持人，在2013年创办了樊登读书会以后，发展不到10年，APP会员数已经突破了6000万，年营收超过10亿，全国线下樊登读书运营中心超过2000家，成为了知识付费行业的一个独角兽。这样一个读书产品，到底有什么魅力，能让用户对它如此着迷，樊登又是如何找到他的书中黄金屋，本期设计大侦探，为大家带来樊登读书的产品拆解，让我们一看究竟。

一、导读

1. 内容结构
全文11158字，分为六个部分，分别是导读、产品画像、读书服务、内容服务、会员服务和设计总结，你可以通过下面的思维导图对本文内容结构有全面的了解。

2. 适合人群
第一类，UI/交互设计师，可以跳出执行层，去思考樊登读书的产品设计策略，提升产品分析能力；
第二类，产品经理/运营，通过全面的产品设计拆解、策略推导，获取产品设计参考；
第三类，知识付费行业从业者，通过对樊登读书的全面拆解，获取竞品设计参考。

3. 分析模型
我们主要运用三种模型对产品的功能、设计进行拆解，由于没有权威的官方数据，所以我们更多以推导的形式去思考樊登读书为什么这样设计。
第一个，增长模型。由戴夫·麦克卢尔提出，包含用户获取、用户激活、用户留存、获取收入、用户推荐，分别对应用户生命周期中的5个重要环节，主要用于分析产品的功能价值。
第二个，上瘾模型。由尼尔·法埃尔提出，通过对上千种习惯类产品的调研，总结出一款产品如果要让用户习惯、上瘾，可以按照触发、行动、多变的酬赏和投入四个步骤去设计，主要用于分析产品的功能价值和推导产品的策略设计。
第三个，社会心理学。主要结合西奥迪尼的社会心理学《影响力》六大说服力原则——互惠、承诺和一致、社会认同、喜好、权威和稀缺，去推导产品设计的用户心理设计，主要用于推导产品的策略设计。

二、产品画像
在本节，我们将会通过樊登读书官网、百度百科、易观千帆和七麦数据等资料网站，让大家对樊登读书有一个初步的了解。

1. 产品介绍
樊登读书成立于2013年，是前央视主持人樊登创办的知识付费品牌。樊登读书APP是一款为用户提供书籍精华解读（非电子书）、精品课程教授、社群学习等知识服务的软件，致力于为3亿国人养成阅读习惯。根据樊登读书2022年三季度的社会责任报告显示，樊登读书目前会员数突破6000万，音视频累计播放超45亿人次，用户收听总时长超8.1亿小时，是知识付费行业的头部品牌。

2. 商业模式
樊登读书以读书点亮生活为价值主张，旨在帮助3亿国人养成阅读习惯，目标用户群体有C端大众消费者以及B端企业客户。樊登读书作为一个知识付费平台，吸引了众多知识创作者加入，主要为用户提供内容生产、出版合作、线上电商和线下书店四块业务，其次通过线下加盟代理的模式，目前在全国已经建立超过2000家城市运营中心。樊登读书的盈利模式非常丰富，除了最基础的会员VIP服务，还有课程、训练营、听书和电商等增值服务，年营收在2021年就超过10个亿。

3. 用户画像
樊登读书的用户群体男女比例均衡，女性占比54.67%，男性占比45.33%；年龄以24-30岁居多，占比40.21%，其次为31-35岁，占比26.36%；樊登读书的用户消费能力较强，中等以上消费者占比71.09%；用户以三线城市最多占比23.20%，一线城市仅占8.93%，其中广东省最多，山东和河南省位居前三。

4. 信息结构
樊登读书的菜单栏主要分为「首页」、「樊登讲书」、「免费视频」和「我的」四个一级栏目。「首页」以TAB切换的形式向用户展示不同的子栏目内容，非常夯实；「樊登讲书」是范登读书的王牌栏目，可以收听樊登每年讲解的52本书；「免费视频」是一个短视频栏目，主要截取樊登讲书视频的精华内容，通过沉浸式的体验，提升用户使用产品时长；「我的」就是用户中心，主要储存用户的读书数据，可以查看历史读书记录、订单和购买历史等内容。

5. 重要迭代记录
樊登读书的首个APP版本发布于2015年2月16日，截止到10月28日，APP版本已经更新至V5.56.0版本，平均1年更新次数为33次。

版本迭代重要记录
2015年12月，发布V3.0.1版本，Slogan为「成功人士有声阅读神器」；
2017年8月，发布V3.9.0版本，Slogan升级为「帮助3亿国人养成阅读习惯的学习型社区」；
2018年4月，发布V3.9.16版本，品牌形象全新升级，加入知识课程等内容；
2018年7月，发布V3.9.22版本，樊登读书会更名为樊登读书；
2018年10月，发布V3.9.26版本，Slogan升级为「读书点亮生活」；
2020年5月，非凡精读馆公测上线，为用户带来更多专家解读书籍；
2021年7月，发布V5.18.0版本，上线李蕾慢读栏目；

6. 产品生命周期
根据易观千帆数据显示，截止到2022年7月，樊登读书月活跃用户人数115.94万，注册用户超过6000万，年营收早在2021年就超过10亿。明年即将年满十岁的樊登读书，目前处于产品生命周期的成熟期，当下聚焦于商业变现和用户增长。

7. 竞争图谱
和听书类APP相比，樊登读书月活跃用户人数排名第19，喜马拉雅1.3亿月活跃用户人数全网第一；和读书类APP相比，樊登读书排名第四，起点读书月活跃用户人数1762.70万全网第一。

三、读书服务
「读书服务」是樊登读书最核心的服务，是实现商业变现最重要的方式。从讲书人去拆分，樊登读书设计了樊登讲书（火车头）、李蕾讲经典（前央视主持人，自带流量和曝光度）和非凡精读（汇聚各行业精英大咖）三个版块。从知识学习的场景拆分，樊登读书设计了「课程」和「书城」两大版块，如今的樊登读书，已经成为一个非常丰富的知识付费学习平台，不仅有各种知识付费、职业培训课程，还有训练营、系统课，以及有声书和实体书销售等业务，内容非常夯实。从用户群体去拆分，樊登读书还设计了企业共读营、线下翻转课堂和数字阅读空间这些面向企业的读书服务，把读书赋能给企业，为他们提供提供综合性的读书解决方案，以建立学习型组织为目标。

1. 个人IP
樊登读书以「樊登」这个超级IP作为火车头，每年讲解52本书为底层服务内容，现在加入了「非凡精读」和「李蕾讲经典」两个内容栏目。这两个栏目，不仅可以丰富平台的内容，还可以弥补樊登一年只讲52本书的数量缺陷，从而满足更多用户的需求。

1.1 樊登讲书
「樊登讲书」是樊登读书的王牌栏目，是吸引用户收听和付费的主要内容。樊登以每年为用户讲解52本书和提炼45分钟书籍精华为卖点，帮助那些没有时间读书、读不懂书的人培养阅读习惯。从内容分类看，「樊登讲书」主要分为心灵、个人成长、亲子家庭、人文历史、商业财经、社科新知、健康生活和作者光临9个栏目。其中亲子家庭是最热门的内容之一，育儿的书籍是樊登最吸引用户的内容，樊登还拥有育儿专家的头衔。

1.1.1 讲书详情页
①「讲书」有三种传播形式，默认为音频，其次还有视频和文稿，非常丰富，用户可以在头部自由切换。每一本书就像一个产品、一个主题，除了收听讲书内容，还支持下载音频和思维导图，其次还加入了增值服务，比如实体书购买和训练营（根据这本书的主题设计）。

②讲书详情介绍分为解读时间轴、评论话题、荐语、你将获得、作者简介和精彩选段六个部分。这里的内容结构设计得非常好，「解读时间轴」是把讲书的内容拆分，让用户快速获取讲书的结构；「评论话题」是为了增加用户互动，以评论领礼品的形式提升用户活跃度；「荐语」和「你将获得」，是为了吸引用户阅读，让用户知道这本书对自己有什么帮助；「精彩选段」把这本书的一些名言警句以图片海报的形式设计出来，吸引用户分享传播。

③「文稿」的设计体验特别好，和其他音频产品相比，樊登读书的文稿像是参考了微信读书这样的阅读产品。用户可以划线，可以发表想法，划线最终会生成笔记储存在用户中心，还可以把划线的内容生成海报分享，为平台拉新引流。

1.2 李蕾讲经典
李蕾是前央视主持人，2021年加入樊登读书。围绕「李蕾」这个个人IP，樊登读书设计了「李蕾讲经典」栏目，每年为用户解读52部经典名著，包含世界名著、国风经典、名人传记和中国现代经典。在商业变现的设计形式方面，樊登读书把「李蕾讲经典」作为一个独立的栏目，用户需要单独购买VIP会员才能收听。

1.3 非凡精读
「非凡精读」是樊登携手80+各领域大咖为用户深度解读好书，樊登读书作为一个读书平台，链接了其他优质领域的大咖，为用户提供更丰富的内容。
非凡精读的栏目首页分为金刚区（镇馆之宝、听书指南、好书共读和全部书籍）、本周新书、最近在读、为你推荐、今日限免、精选书单、非凡主讲人和口碑好书八个部分，书籍类型包含个人成长、家庭经营、心灵疗愈、人文经典等内容，其次「非凡精读」的内容也需要用户单独购买VIP会员才能收听。

2. 课程
樊登读书充分利用知识付费的消费场景，吸引了众多知识付费KOL加入平台，为用户提供丰富的知识付费课程。根据官方数据统计，目前平台已经有198门课程，包含个人成长、亲子家庭、人文历史、商业财经、社科新知、声音剧、有声书、新父母和樊登专区9个栏目。
课程栏目首页的设计，主要包含金刚区、热销课程、课程合集、限免节目、最近在学和专属为你推荐六个内容。在销售方式上，课程是以单个付费的形式销售，定价在100-300元之间。

2.1 樊登课程
樊登不仅讲书，还设计了很多的课程，比如樊登讲《论语》、可复制的领导力这些以代表作设计出来的课程。樊登课程的栏目首页包含了精选好课、限免试听、热销周边和学习园地四个内容。

2.2 技能培训
樊登读书还吸引了众多职场知识创作者的加入，为用户提供职场技能培训课程，比如7天求职实战训练营、个人IP打造课、0基础抖音商业化实操课等，课程形式有录播课也有系统课，定价也不便宜。

2.3 训练营
相比课程和讲书，训练营是一个动态的系统课程服务，是解决用户学习的最后一公里。当用户听完书以后，事实上只是勾起了用户的学习兴趣，如果要想把知识吃透，还需要深入学习。「训练营」就是为了解决这样的痛点而设计的，不仅可以帮助用户解决学以致用的痛点还增加了新的变现形式。其次训练营的内容形式非常丰富，不仅包含常见的打卡返现活动，还有系统班、私教课，变现能力非常强。

2.3.1 打卡返现
「打卡返现」是训练营比较常见的一个活动形式，活动规则是用户需要缴纳保证金才能参与学习打卡，如果全勤，可以退回保证金，反之保证金将会被扣除。这个服务，对于用户的活跃度提升有很大的帮助，其次以全勤退还保证金为噱头，但事实上能拿回保证金的用户很少。

2.3.2 小课程
「小课程」是指培训时间在3-7天左右的训练营，比如7天《焦虑自救手册》行动营（199元）、3天《分享阅读》线上启动营（9.9元）。这类小课程是樊登读书训练营的核心内容，属于短频快的业务，商业变现能力极强。

2.3.3 系统课
「系统课」是指培训时间在15天以上的训练营，比如21天《爆款视频号》训练营（售价1980元）、家庭教育实战讲师认证营（售价8980元）这样的课程。系统课是属于高利润产品，定价均在1500元以上。

2.4 新父母
「新父母」是樊登读书联合「新教育研究院」共同发起的栏目，用户人群是30-45岁这个用户群体，旨在通过正确的教育理念帮助传统的父母找到全新的教育方法，和孩子建立和谐、健康的亲子关系。整个栏目首页主要分为入门必修、父母进阶和副业变现三个内容。「入门必修」为父母提供了新父母五门必修大课，售价590元；「父母进阶」是实战特训营，通过直播授课、小班实操教学，帮助父母快速掌握育儿难题，售价898元；「副业变现」是系统课，通过31天的系统学习，帮助有意向在亲子育儿领域发展副业的父母通过专业的培训成长为一名实战讲师，售价8980元。

2.5 知识副业
樊登读书提供7种形式的知识副业，分别是樊登小店、知识主播、知识顾问、翻转师、社群运营官、沟通力讲师和兼职客服。其中翻转师、社群运营官和沟通力讲师这三个需要付费报名学习的岗位，目标人群以自由讲师、教师、企业培训者为主，为樊登读书源源不断补充讲师资源。

2.5.1 樊登小店
樊登小店就是樊登读书入门级的分销商，用户可以零成本申请加入。每个用户都可以拥有自己的一个小书店，可以通过建立自己的社群或朋友圈进行书籍分享，用户下单后，出版社直接发货，店主赚取销售提成。

2.5.2 知识主播
知识主播就是负责樊登读书的电商直播，通过直播带货，实现副业收入。知识主播可以免费报名，分为兼职主播和全职主播。

2.5.3 知识顾问
知识顾问就是为用户解决知识困惑的咨询师，本质是樊登读书的销售。用户可免费报名，樊登读书提供系统的专业培训。

2.5.4 翻转师
翻转师是樊登读书·雨知教育的核心服务，课程体系分为六大板块，目标人群是自由讲师、教师、企业培训者等，最终帮助他们成为樊登读书的授课讲师、知识主播和知识顾问。翻转师是付费的系统培训，定价5686元。

2.5.5 社群运营官
社群运营官属于一个付费的系统培训，定价3980元。这个服务主要针对在校学生、全职宝妈、自由职业和朝九晚五的上班族，通过21天的系统培训学习，掌握社群运营的知识和技巧，其次也有机会成为樊登读书签约的樊登读书运营官。

2.5.6 沟通力讲师
沟通力讲师也是付费服务，价格没有公开。沟通力讲师主要是通过学习樊登的《可复制的沟通力》课程，最终有机会成为樊登读书沟通力团队的签约讲师机会。

2.5.7 兼职客服
兼职客服就是主要帮助樊登读书处理客服的工作，只要用户有时间，都可以报名申请参与。

3. 书城

3.1 有声书
「有声书」包含了樊登专区、情感家庭、心灵疗愈、小说文艺等内容，为用户提供更多的听书选择，不过相比喜马拉雅、微信听书这样以开通VIP会员付费收听的模式，樊登的有声书直接以单本书籍售价，而且单价不低，均价在19-39元之间。

3.2 心选商城
「心选商城」是樊登读书官方为用户提供的一个在线购买实体书和周边产品的平台，从书籍数量看，内容包含了儿童科普、儿童绘本、职场进阶、心灵治愈、人文社科等类型，非常夯实；从商品类型看，除了书籍，心选商城还支持各种周边、联名商品的购买。和传统的书城相比，心选商城的内容设计非常创新。

3.2.1 三本好书
「三本好书」的本质是一个组合套装，但是樊登读书用书单的形式来设计，不仅增加了销售量，还为用户设计了充足的购买理由。在「三本好书」的介绍里，文案是这样的描述——多读一本书，解决更多生活中的问题；多读一本书，收获更多的归属感、幸福感；多读一本书，更深度拓展和提升思维认知，可谓情怀满满，让用户产生了强烈的购买欲望。

3.2.2 樊登未来书单
「樊登未来书单」定价2199元，属于高利润产品，它主要有三个卖点，第一，每月会把当月樊登即将解读的4本书籍提前邮寄给用户，让用户可以抢先读；第二，赠送樊登专属证书、52本书的思维导图实体卡片、1本专属定制未来书单礼记和微信专属社群，不仅拥有精美的实物礼品，还能享受专属社群，突出尊贵感；第三，以选书、读书、用书和“写”书四个环节的服务帮助用户每周读透一本书、实现跨越式增长为卖点，为「未来书单」增加了「学习」属性，从而让用户感觉自己买的不是书单，而是成长。

4. 企业服务

4.1 企业读书
「企业读书」面对的是企业用户，以读书学习为切入点，帮助企业员工建立读书习惯，协助企业打造学习型组织。「企业读书」是一个综合性的读书解决方案，由内容、工具和服务构成。在内容端，为企业提供樊登读书超过800+优质内容，还可以为企业量身定制书单；在工具端，为企业员工提供一个满足多场景学习的高效工具，企业还可以通过PC管理端查看企业员工的读书数据，实现数字化管理；在服务端，为企业提供专家团队1V1支持服务，赋能企业组织线下活动，最终帮助企业员工建立阅读习惯。

4.1.1 企业共读营
「企业共读营」是通过优质书单和共读工具，让员工在21天社群的督促和专家指导下，一起共读，通过听、学、教、练和评五个步骤帮助员工学习读书，打造全流程的闭环训练场景，旨在帮助员工养成读书的习惯，为组织营造读书氛围。

4.1.2 线下翻转课堂
「线下翻转课堂」是由专业引导师带领学员共同解构一本书，帮助学员理清逻辑结构、重点知识，深化实际场景应用，在交流互动中营造良好的读书氛围。「线下翻转课堂」就像一次企业员工拓展活动，以读书沟通为主题，充分调动员工的学习热情，增强团队学习氛围，丰富企业员工生活。

4.1.3 数字阅读空间
「数字阅读空间」就是在企业办公场地可利用的空间里面，通过硬件设备作为载体，将图片、文字、音视频等内容置入，让员工扫码就可以收听，同时通过这样的设计，为企业打造阅读的氛围。

4.2 开放平台
樊登读书已经把读书做成了标准化的产品，支持接入网页、小程序、APP、车载等终端，打造了一个通过接入樊登读书API就可以实现合作的第三方开放平台。目前樊登读书有针对教育、银行、出行等行业设计了解决方案，创意惊人。

5. 总结
从读书服务我们可以看出，樊登读书是一个非常有创意和变现能力超强的产品。不管是面对C端大众消费者，还是面对B端企业用户，他都可以把「读书」赋能到到不同的场景和主题中。比如「新父母」这样的栏目，就是抓住了众多传统的父母对孩子教育没有正确方式的痛点，让用户看着就难受、看着就羞愧、看着就恨不得立马开通会员学习。
其次樊登的商业变现形式设计，非常有层次感。以「新父母」这个服务为例，首先为你推荐基础课程，如果用户的自律性不够或者无法理解，它又设计了训练营，二次变现。更厉害的是，它为读书赋予了“副业变现”这个属性，然后通过8980元的系统课，帮助那些全职或想做副业赚钱的妈妈用户群体进行系统培训，层层推进。这样的设计方式，甚至在企业端也复制了一套，变现能力惊人。

四、内容服务
「内容服务」是帮助产品实现用户留存和激活的关键方式。樊登读书如今已经把「免费视频」作为APP的一级栏目，通过1-2分钟的精华片段播放，可以有效提升新用户的激活率，最终成为付费用户；其次樊登读书还有精彩丰富的线下线下活动。

1. 免费视频
「免费视频」是一个短视频栏目，内容主要从樊登讲书的视频提炼出精华片段剪辑成1-2分钟的短视频。这个栏目设计得非常好，第一，把一个长达45分钟的读书视频拆分出来以后，不仅可以降低阅读成本，还增加了碎片化阅读的形式，降低用户读书的时间成本，可以极大提升用户的读书时间；第二，一个免费视频对新用户来说，就是一次免费试听，通过对精华内容的提炼，对用户的激活有非常大的帮助；第三，免费视频同时可以作为高质的短视频素材，分发到抖音、视频号、小红书和知乎等平台，帮助平台传播引流。

2. 活动
樊登读书的「活动』是用户运营的主要方式之一，活动分为线下活动和线上活动两种形式。樊登读书的活动主题非常丰富，不仅可以直接分享平台的热门书籍，比如《非暴力沟通》、《职场焦虑》、《陪孩子终身成长》等，还可以结合樊登自己创作的系列书籍为主题，比如《可复制的职场沟通力》等，内容的边际成本非常低，可不断复制。樊登读书在全国拥有2000多家城市运营中心，每一次活动，其实就是一次分享传播和新用户激活，另外樊登读书的活动不是免费参加，很多活动都需要付费报名参与，变现能力非常强。

2.1. 沐光公益
沐光公益是樊登读书创立的公益品牌，主要为落后的偏远山区孩子们建立爱心图书室，帮助孩子们建立阅读习惯。他的捐赠规则是当用户捐赠的光束足够多，樊登读书就会为欠发达地区捐赠一座“沐光书屋”。用户可以通过两种方式为山区的孩子们进行捐赠，第一种是在樊登读书APP每听完一本书就会产生一束光；第二种就是通过在樊登读书的直播间购买书籍，捐献一束光。这样的活动设计，结合了公益，更容易打动用户，重新让用户更愿意多读书，提升用户活跃度。

3. 眼界
「眼界」是由上海科创教育和樊登读书联合打造的一个内容栏目，从2022年9月15日到2023年1月31日，每周更新一期专题内容，目前已更新六期。从这个栏目可以看出，樊登读书不仅仅是一个听书产品，而是成为一个有深度的教育学习平台。未来类似这样高质量的栏目相信会越来越多，这会对品牌的宣传、公信力以及用户的留存起到非常大的帮助。

4. 发现
「发现」这个版块，藏得比较深，在「用户中心」的「常用工具」。但这个版块的内容非常夯实，它就是一个社区，有热点新闻、视频、文章、活动、书友等十余个栏目。从内容设计看，这个栏目有很多想象空间，比如目前内容的生产形式是以媒体号发布，用户还可以关注，未来樊登打造自己的读书社区吗？由于资料有限，并不知道未来这个栏目会怎样定位和规划。

5. 总结
从内容服务的拆解，我们可以看出樊登读书的未来发展空间非常大。首先短视频的设计会极大提升用户使用产品的时间，让产品有更多的可能性。其次通过「发现」这个版块的设计推导，也许未来樊登读书会朝着一个读书社区发展。

五、会员服务
「会员服务」是樊登读书实现用户留存和传播拉新的重要方式。樊登读书的会员服务非常丰富，而且有很多创新点。樊登读书设计了四种VIP会员卡，分别是樊登讲书、非凡精读、李蕾讲经典和心选黑卡，享受不同的会员权益服务；在用户运营方面，为用户提供专业完善的学习分析工具，记录用户的学习时长，其次还有每日签到、成长福利和小书童服务；在用户福利方面，还为用户设计了礼品卡、联合福利、听书卡和车主福利；最后为了吸引用户分享推广，还设计了邀请好友和组队读书两种方式。

1. VIP会员卡

1.1 樊登讲书
樊登讲书的VIP会员售价388元一年，拥有内容（可收听樊登讲书栏目所有内容）、功能（支持音频、视频和文稿）、服务（专属书童服务）、折扣（购买课程享受折扣）和亲友（1人购买多人免费听）五大特权。
其次樊登读书还设计了一个多听多送卡的会员升级服务，售价488元，鼓励已付费的会员进行会员升级。升级以后可赠送下一年的樊登讲书年卡，每周听1本书可赠送7天VIP时间，不限时间积累，赠满1年即可获得下一年VIP。

1.2 非凡精读
非凡精读会员定价388元一年，购买后可以畅听非凡精读800+本优质书籍资源，服务内容主要是每周更新3本好书、5张14天樊登讲书亲友卡和每月发放价值超300元的学习福袋。

1.3 李蕾读经典
李蕾讲经典定价也是388元一年，购买后可以畅听李蕾讲经典的所有内容，还拥有5张李蕾讲经典亲友卡以及400+分钟配套朗读节目。

1.4 心选黑卡
心选黑卡是心选商城的会员VIP，定价99元一年，购买后，可以享受最低9.2折的购物折扣，还拥有专属的黑卡月券和社群。

2. 用户运营

2.1 成长福利
樊登读书根据用户每天读书的时间记录详细的读书数据，包括累计学习天数、累计学习时长等，这里的交互体验设计得非常友好，用户可以直接滑动日历查看过去半年的读书时间，非常方便。

2.1.1 勋章
勋章分为五大类，分别是小试牛刀（门槛低，用户通过完善资料、评论和分享即可获得）、学无止境（门槛略高，根据学习时间来颁发勋章）、推荐达人（鼓励用户分享拉新）、读书小队（根据书单任务设计）和限量勋章（根据用户忠诚度设计，分为相伴1周年、2周年和3周年等），可以看出设计得非常用心。

2.2 学习历史
「学习历史」就是用户学习数据看板，樊登读书会把用户每周的学习数据都记录下来，包括当周学习时长，历史学习时长等，其次还提供测试、笔记、想法、下载记录和阅读记录等功能。

2.2.1 学习数据
「学习数据」的统计维度非常细，为用户生成今日、本周以及历史学习时长记录，根据用户的阅读习惯生成「听书偏好指数」。其次还设计了一个影响指数，也就是如果用户分享给好友以后，「学习数据」也会统计好友的读书时长，生成用户的影响听书时长，设计得特别有创意。

2.2.2 测试
当用户听完一本书，为了帮助用户更好的理解这本书的知识，樊登读书设计了一个测试答题的环节。用户答完题以后，不仅可以查看答案解析，还可以生成朋友圈海报分享，传播拉新。

2.3 每日签到
用户可以通过每日签到领取积分，以7天为一个周期，连续签到积分加倍，积分可以在商品购买时候进行抵扣。在任务中心，樊登读书设计了不同的小任务，以极低的行动成本鼓励用户进行分享、读书和评论从而赢取积分。

2.4 小书童
小书童的设计非常巧妙，它并不是一个智能AI客服，而是让用户添加企业微信客服，这其实是把用户留存和销售场景移植到微信上，从而实现用户激活和复购。

3. 用户福利

3.1 礼品卡
「礼品卡」是一种线上的虚拟VIP卡，用户可以购买赠送给好友，售价388元，其实就是樊登讲书的VIP。樊登读书把礼品卡设计成了一种裂变形式，官方会给用户赠送限时的礼品卡（一般为7天），好友领取以后，用户还可以获得3天的VIP时长，传播拉新能力非常强。

3.2 联合福利
「联合福利」就是樊登读书通过学习的场景链接了其他第三方品牌，以联名的形式向用户推出联合服务。可以说，樊登读书把读书学习和场景的链接，发挥到了极致，比如六个核桃×樊登读书联名套装，你可能想不到还有这样的套餐，一边喝六个核桃，一边听樊登读书。

3.3 领听书卡
「领听书卡」这个用户权益主要是回馈教师和医护这两个行业的用户群体。樊登读书设计得特别巧妙，如果你是这两类用户，你可以填入个人信息进行申请；如果你不是，你可以分享给你的老师或朋友（职业为教师和医护），这样的设计简直让用户很难有抵抗力，让用户主动为产品拉新。而且听书卡只有1个月的福利，免费试听结束后极大可能转化为付费会员。

3.4 车主福利
「车主福利」也是一个樊登读书和其他行业完美链接的活动形式，樊登读书通过和一些汽车品牌进行深度合作，直接以车载应用的形式载入到汽车设备，用户在驾车的时候可以直接收听樊登读书的内容，多场景提升用户黏度，让用户随时随地都能收听。

4. 用户推广

4.1 邀请好友
「邀请好友」的设计特别简单，但是海报的文案非常打动人，通过很多名言警句和热门书籍生成的海报，直接转发给好友或发布在朋友圈，有新用户注册付费以后，老用户则可以领取听书时长。

4.2 组队读书
「组队读书」的活动规则很简单，所有人都可以发起组队，三人成组开始听书，完成任务以后可以获取积分。这个活动对用户的拉新和提升活跃度有很大帮助，老用户为了获取更多的积分，邀请到越多的新用户，组队奖励就会翻倍。

5. 总结
从会员服务的拆解我们可以看出，樊登读书的用户运营和营销形式设计得非常丰富。为了增加用户的投入成本，他们设计了非常专业完善的学习统计工具，通过勋章、测试、每日签到形式鼓励用户每天听书、学习。其次还引导用户添加「小书童」，通过1V1、高频的链接，和用户建立关系，实现激活和复购。在营销形式方面，以领书卡为例，如果你是老师，你可以直接领取，而如果你不是老师，那你可以分享给你的老师，这样的拉新方式，非常值得学习。

六、设计总结

1. 极致的单点突破
樊登读书可谓是一个单点突破的典型案例。樊登在《讲好一本书》中分享过他的创业历程。最初用户就是不想读、没时间看、读不懂，他们愿意给樊登交钱让他读给他们听。所以樊登从成立樊登读书开始，就以每年52本经典好书为主要卖点，解决用户没时间读书、读不懂书这个痛点，单点突破，最终打造了樊登这个超级火车头，把讲书这件事，做到极致，才有了今天超过6000万会员的樊登读书会。

2. 天马行空的创意
樊登读书在内容层的设计可谓天马行空。它不仅把读书设计了一个标准化的产品，支持消费者随时收听、学习。而且升级成了一个块芯片，可以即插即用，比如读书开放平台，支持多设备、多场景的对接，让樊登读书和其他行业进行更深入的链接。甚至一个普通心选商城，樊登读书都能设计出三个书单、未来书单这样的创意服务。

3. 丰富的变现形式
樊登的商业变现形式实在太丰富了，就像齐天大圣的72变，在任何环节，都能让用户为知识掏腰包。你可能想象不到你的孩子可以一边喝六个黑桃一边听樊登读书，又或者你的全职太太正在通过樊登读书的系统训练营正在学习如何通过副业变现，甚至当你听完《焦虑自救手册》手足无措的时候，你发现原来还有王丹老师为你设计了一个走出焦虑的行动营。

作者：设计大侦探

来源：站酷

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

评论(0) 浏览(1671)

052023-2

19岁的贴吧，互动体验如何焕新颜？

资深UI设计者

// 前言

良好的互动氛围是社区产品的核心，贴吧作为一款近二十岁的社区产品，设计师秉承年轻包容的产品理念，始终在探索属于贴吧的特色互动形态，在这过程中，希望通过互动系统设计方法，升级贴吧互动体验，培养用户心智，形成良性互动链路，最终提升用户活跃。

一、探索互动系统的设计方法

较为简单的互动形态为作者生产内容，浏览者为喜欢的内容点赞、回复，甚至私信创作者，这些互动行为会激励创作者继续生产内容。

基于以上互动形态我们搭建了循环互动系统，创作者为浏览者供给内容后，我们需要在互动环节引导互动行为发生，在触达环节优化互动信息触达，在反馈环节引导参与互动反馈，从而形成正向循环。结合实际的项目经验我们发现互动系统运转离不开“信息更易懂”、“路径更顺畅”、“玩法有惊喜”这三个要素。

二、寻找贴吧互动设计机会点

贴吧的角色是由创作者—楼主、浏览者—吧友组成，良好的产品运转模式为：创作者向浏览者生产供给内容，浏览者对其互动激励。但贴吧多年来互动链路中断，导致从互动到供给无法形成正向循环。

1.特色场景洞察问题

贴吧的场景及形态广泛，与其他产品有所不同，具有内容形式多样、浏览场景独特、互动类型广泛、回复逻辑精细、互动玩法多元等特点，通过走查上述特色场景发现诸如链路中断、功能缺失、结构混乱、内容丢失等问题。

2.下探设计机会点

基于以上问题的共性，我们可以从中总结出核心体验断点：

a.看不懂：回复列表内容结构不合理、收藏后看不懂更新的楼层内容；

b.看不到：Push通路不稳定无法触达用户、大多用户关闭推送push；

c.没意思：赞、回复等互动方式老旧，刷贴、签到行为重复，没有特别的玩法。

下面会使用上述总结的互动系统设计方法，对贴吧现存问题进行体验升级，提高用户的互动积极性。

三、互动系统设计方法应用举例

1.信息更易懂

贴吧的回复场景多，逻辑复杂，创作者与浏览者在看到对方的回复后，内容展示需要易读易懂，彼此才会有意愿回复反馈。

a.查看列表—优化结构

查看评论列表的旧体验存在回复对象错乱、内容缺失的问题，新体验根据语境自由展现原贴、楼层、楼中楼三层结构，承接上下文关系，降低用户理解成本，并将其复用在查看点赞、查看@ 等场景中。

b.查看详情—精准定位

点击列表页后的精准定位也是易懂的关键，我们对内容被折叠、定位不准旧体验问题进行优化，新体验默认展开原贴及楼层内容，细化点击贴子、楼层、楼中楼后的定位逻辑，帮助用户精准看到想看到的内容。

c.继续消费—延长步长

用户从回复列表进入查看详情页后，旧体验只展示当前的评论楼层，看不到上下文内容。新体验在定位楼层前后增加楼层内容，同时通过“查看之前楼层”和“加载之后楼层”方式继续浏览，延长步长。

2.路径更顺畅

产品的推送Push向用户推送感兴趣的信息，需要稳定的触达用户且有意愿打开，才能达到召回用户目的。

a.打开推送开关—场景引导

旧体验引导开启push场景缺失，方式过于生硬，新体验选取贴吧高频互动场景，在用户签到后、回复后、发布后选择合适形态展现引导，提高推送通知打开率。

b.展示推送—有吸引力

旧体验互动push内容表述凌乱，新体验将push内容结构化，以“用户昵称+动作+互动对象”的结构展示推送内容，并强化互动用户的头像，适当展示互动详情，吸引用户点击。

3.玩法有惊喜

贴吧点赞、回复等互动方式存在多年，缺乏新颖性，用户互动心智疲软，急需通过轻量、有趣的创新玩法，刺激浏览者互动。

a.新增动态表情

结合贴吧元素，补充单击、长按、双击的递进互动点赞方式，给予用户感官刺激，提升点赞爽感。

结合时效性运营活动，增加高考、劳动节、618活动点赞，营造惊喜感。

首次私信提供贴吧IP表情，助力用户关系破冰。后续私信增加开香槟、丢炮竹以及丢炮竹炸滑稽双向互动玩法，持续提升用户互动意愿。

b.新增潮流表态

虚拟形式是近几年受用户喜爱的潮流表态玩法，探索虚拟形轻互动方式，互动后通过私信触达，并沉淀社交货币资产，进而引导双向互动。

// 小结

文本搭建的“信息更易懂”、“路径更顺畅”、“玩法有惊喜”互动系统设计方法，已将其运用在贴吧的特色互动体验升级中，并取得正向数据和用户反馈，希望该项目的设计方法及经验能为大家提供参考。

作者：百度MEUX
来源：站酷
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

。

评论(0) 浏览(1559)

052023-2

这篇导流条设计方法，让我打开了新思路

资深UI设计者

// 写在前面

端到端导流是指在产品矩阵体系内引导优质产品的用户使用另外一款产品，带来使用量的提升，从而实现用户规模提升的一种增长手段。随业务快速增长，有驾从百度汽车频道衍伸出了有驾小程序、M站、PC站以及APP等多纬度的产品矩阵，依托各端流量实现矩阵产品间的导流，逐步积累用户规模，是有驾目前获客渠道中占比最高的方式。本文将以有驾导流体验升级的项目为例，分享导流增长探索的设计思路与实践经验。

// 为什么要做导流

导流的目的

对于业务本身而言，随着移动互联网流量红利期的结束，获取新用户的成本越来越高，不管是新产品还是成熟型产品，都需要通过导流的手段来持续扩充新用户。其次，对于有驾产品生态而言，需要各端产品间的相互联动，协同发挥优势，实现流量价值最大化。

导流的优势

成本低，相较于投放、活动等渠道流量获取方式，矩阵导流成本低；
高意向，用户购车意向明确更容易实现商业转化；
可共享，用户数据及行为关联互通。

// 如何做好导流设计

1.问题分析

通过梳理核心场景的4种导流条，发现各个场景导流形式各异，用户缺乏统一认知，导流引导语单一内容吸引力弱。在用户在浏览页面时，点击功能入口或想要继续查看更多内容，需要下载APP才能继续阻碍用户浏览：

缺乏统一认知：视觉表达形式不成体系，用户感知不够；
内容吸引力弱：内容单一缺乏吸引力，用户没有点击欲望；
阻碍用户浏览：打断用户正常使用功能，影响用户体验。

从导流链路的用户行为来看，整个流程下载路径过长，发现用户流失较大的转化点：

从小程序落地页到下载页：在进入小程序浏览页面时，用户没有注意到导流条就滑走了；
点击导流条进入下载页：点击导流条会先调起导流弹窗，点击确认后再进入到下载页，用户未选择下载就退出了。

2.明确设计方向

针对导流现状缺乏统一认知，内容吸引力弱、阻碍用户浏览、下载路径过长的问题，我们搭建了一个完整的导流链路图，根据用户增长模型，把用户生命周期各节点的用户行为与产品触点一一罗列出来，找到增长路径的设计机会点。

通过以上的问题分析，如何建立用户和产品的链接，保障友好的体验，是本次导流升级要解决的问题。根据用户关键行为，我们可以将整个导流链路拆分为3个阶段来挖掘主要机会点：

下载前：兴趣激发导流吸引，建立用户稳定认知；
下载中：强化用户转化动机，刺激用户完成下载；
下载后：保障还原体验畅通，提升首次使用体验。

下面将分别介绍导流下载前阶段的设计落地实践，以及下载中、下载后阶段的延伸设计思考。

// 下载前

1.强化触点吸引

是否能成功引起用户注意，是转化开始的第一步，统一的视觉风格和满足用户诉求的内容，有利于增强导流条的吸引力。

1）收敛导流条类型

针对【阻碍用户浏览】打断用户正常使用功能、用户没有跳转预期的体验问题，下线了阻断式和截断式两种体验不友好的导流类型，将原来4种导流类型收敛为2种，仅保留通用导流条和功能延展导流条，基于这2种导流形态进行深入的设计探索。

2）建立通用视觉标准

针对【缺乏统一认知】视觉表达形式不成体系、用户感知不够的视觉问题，建立了通用导流条标准化规范。统一视觉形态，优化为页面内通栏嵌入式，同时融入品牌色强化用户感知，根据页面布局制定了不同的展示规则。

上线后，内嵌导流条在展现受限的情况下，导流转化数据与改版前基本持平，为了进一步提升导流的点击效果，开始探索场景化定制提转的设计方向。

3）定制场景化内容

针对【内容吸引力弱】内容单一缺乏吸引力、用户没有点击欲望的内容问题，在通用标准化形态的基础上，根据不同场景用户诉求点，丰富导流内容。分别从内容定制、按钮文案优化、以及氛围强化3个方向验证对转化的影响。

内容定制：丰富导流利益点、场景化内容更能激发用户兴趣，促进转化达成；
按钮文案：转化按钮文案导向性明确、内容与导流利益点匹配，可以助力按钮转化提升；
氛围强化：导流样式上适度弱化氛围、样式更倾向于原生功能，有助于提升导流条点击。

2.拓展场景扩量

复利通用标准导流条的成功经验，应用到功能延展类导流条中继续验证有效性，从产品价值点出发，挖掘高流量场景的机会点从而带来转化增量。

1）价值传递

根据小程序和APP两端各自的不同点，分别从功能差异及体验差异两个方向进行优化。

APP特有功能：APP完善的功能体验可以更好满足用户诉求，例如参配浏览场景下，引导用户体验搜索及横屏查看的高频功能，对于导流转化有正向帮助；
各端体验差异：小程序和APP两端体验存在差异，例如图片浏览场景下，APP清晰流畅的浏览体验及放大全屏查看图片的交互体验，能够刺激用户转化。

2）价值延续

当用户完成核心内容消费后，是否可以引导用户去APP继续浏览更多相关内容，进而引导用户下载呢？

服务透传：平台服务内容传递，例如在内容落地页文末增加品牌广告导流条，帮助用户建立品牌认知；
相关推荐：引导相关内容消费，例如在文章或视频页增加相关推荐导流条，引导用户浏览更多相似内容。

// 下载中

当用户通过导流条进入到下载流程时，还有哪些手段可以刺激用户激活减少流失呢？

强化下载动机：下载页前置APP落地页内容，例如将通用下载页优化为场景化下载页，给用户超前产品体验吸引转化；
减少用户流失：缩短链路简化流程，例如可在下载中间页完成应用下载，同时退出下载页时增加挽留。

// 下载后

当用户在应用商店下载完成后，我们还能做哪些提升首次启动APP的体验呢？

还原链路畅通：提升场景还原成功率，减少频繁提示信息干扰；
建立用户心智：引导新用户探索功能，根据用户兴趣推荐适合的内容。

以上内容是下载中和下载后阶段导流优化方向的一些延伸设计思考，为大家提供可以继续探索的方向。

// 写在最后

总结一下本篇文章关于导流的体验设计要点：

全链路洞察，对导流链路进行拆解，通过盘点导流链路的用户行为，明确每个节点的设计方向；
降低广告干扰性，减少用户浏览过程中的阻断感，适度弱化广告氛围；
用户的视角引导，让用户专注于产品本身传递的价值，引领用户完成对产品的探索从而完成下载激活。

作者：百度MEUX
来源：站酷
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

评论(0) 浏览(1521)

052023-2

垂类品牌年轻化重塑—有驾品牌升级

资深UI设计者

有驾是百度旗下汽车信息与服务平台，累计用户超5.3亿，为用户提供真实可靠的看选买车服务，为车企和经销商提供一站式营销方案。

什么是“有驾”

【有驾】是百度旗下的汽车信息与服务平台，累计用户超5.3亿，致力于为用户提供真实、可靠的看选买车服务，以及为车企和经销商提供从品牌到效果的一站式互联网营销解决方案。

现状分析

有驾品牌在孵化初期，重点是在用户词建立品牌感知。所以我们提取“有驾“的字形做为品牌符号，减少歧义，强化用户的感知。

但是随着品牌持续运营进入新的阶段，我们发现现有的设计无法满足后续的运营诉求了，主要体现在：

品牌logo：不能体现汽车的行业属性，缺乏成体系的品牌符号和VI体系，色彩上也不够符合时下潮流的年轻配色体系。

品牌活动：品牌关联度弱，活动维度单一。

项目概述

因此，我们重新梳理有驾的品牌定位与调性，借助本次品牌升级，打造有驾差异化风格，形成独有的视觉印记。

因为用户对于旧的logo已有一定的认知。所以此次改版的目标在保持固有用户认知，在原有基础上进行品牌标识的探索及应用，以强化品牌感知，提升品牌的竞争力，整合业务资源做心智触达。

前期分析

前期我们对汽车垂类的竞品进行了一轮调研，并且结合有驾的用户群里，寻找有驾品牌的差异点。

有驾用户群体年轻化为主，普遍具有高学历，集中在新一线二线城市。

通过以上在用户、行业及行业趋势等多唯独的信息搜集后，我们确定了有驾品牌设计的四个核心关键词：年轻、科技、未来、专业。

建立体系

在明确设计方向后，我们梳理了线上线下的所有品牌触点，结合前期的调研结论，汇总出了有驾设计系统的完整框架，以确保品牌设计的完整性和灵活适用性。

设计落地

基于前期分析洞察结论，我们在继承圆形和车形的基础上，对品牌符号与icon进行了大量的方案探索。从图形、质感等方面切入，简化图形形态，尝试不同的形态呈现的视觉感受和气质。最终确定了全新品牌logo方案。

相对于升级前，新版的logo加入汽车元素，解决升级前logo的行业属性不明确的问题，让产品app的行业属性更加直观。同时增加品牌符号做为底纹，辅以有驾的圆形符号成为品牌核心的一部分。强化有驾的品牌基因。

符号提炼

确定品牌logo后，为了确保品牌能够更好的拓展应用，进行了品牌符号的提炼。并为了延续之前的品牌调性。所以辅助图形延续了之前的圆环造型，造型偏向轮胎；在不破坏原有型的基础上，加入一些折角的质感的变化，使图形变化更加丰富，更有识别度。

设计语言

为了更好的触达到各业务场景，所以我们对视觉风格进行了探索和拓展。分别以浅色与深色作为主要探索方向，以适配不同的落地场景。结合有驾的年轻化，科技感的设计目标，探索出以下三种质感呈现：

符号拓展

在提取的形状基础上进行变形，增加折叠细节。在大事件活动，海报等场景使用，增加品牌关联度。

设计字体

结合全新的品牌定位，我们也优化了有驾的品牌字体，从细节出透出有驾的品牌感知。

品牌手册

新的品牌需要一套更全面的品牌系统来满足不同场景下的业务拓展需求。

目前我们也对现有的品牌手册进行拓展和完善，同步到业务方，以便更好的保证各业务场景触点下品牌的认知和统一，达到提质增效的目的。

品牌落地

除了对品牌对角度的塑造和升级，我们更积极的把品牌渗透到活动、栏目包装、大事件运营、品牌海报等各维度场景中，让有驾品牌形象更加立体多元。

结语

目前有驾品牌升级已经取得阶段性成果，沉淀出更加完善的品牌资产，不仅提升设计效率保证全链路的品牌曝光，也为业务规模化打下基础。之后我们也将不断完善和扩充品牌资产，将设计成果不断落地到业务中，细化业务目标并与设计目标紧密结合，多维度助力业务的高速发展。

作者：百度MEUX
来源：站酷
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加蓝小助，微信号:ben_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系01063334945。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

评论(0) 浏览(1506)

首页

一、回顾 Vue2 的全局引用方式

1. 简单项目的全局引用

2. 复杂项目的三步封装

二、Vue3 中的使用

1. provide/inject 方式

2. getCurrentInstance 组合式API引入

第一步：打开iconfont官网新建项目并添加自己所需要的图标

新建项目

第二步：下载我们所需要的iconfont.css文件并引入到项目中

第三步：修改iconfont.css文件中的内容并全局引用

第四步：使用iconfont图标进行开发

1.在页面文件中直接使用标签

2.使用APPplus原生的自定义导航栏iconfont右侧自定义图标

五：需要注意的点写在这里：

目录

什么是共识？

什么是共识机制？

共识机制的目标

为什么需要共识机制?

如何评价一个共识机制的优劣:

共识机制分类

PoW( Proof of Work)工作量证明：多劳多得

优点

缺点

PoS(Proof of Stake)股权证明算法：持有越多，获得越多

优点

缺点

DPOS(Delegated Proof-of-Stake)股份授权证明

优点

缺点

PoC(Proof of Capacity)容量证明机制

优点

缺点

DAG(Directed acyclic graph)有向无环图：无区块链概念

优点

缺点

PBFT(Practical Byzantine Fault Tolerance)实用拜占庭容错：分布式一致性算法

优点

缺点

dBFT(delegated BFT)授权拜占庭容错算法

优点

缺点

Pool验证池——私有链专用

优点

缺点

参考

拜占庭将军问题

拜占庭容错

一、什么是文章编辑器？

二、我们理想中的文章编辑器？

三、实际产品设计中的编辑器

四、思考总结

一、产品拆解

二、设计总结

分类

日历

链接

个人资料

存档