302021-4

SSM框架實(shí)戰(zhàn)-搭建自己的個(gè)人博客1-基礎(chǔ)架構(gòu)搭建

前言

本系列文章主要通過(guò)從零開始搭建自己的個(gè)人博客，來(lái)加深對(duì)SSM框架的學(xué)習(xí)與使用，了解一個(gè)系統(tǒng)從提出到設(shè)計(jì)-到開發(fā)-到測(cè)試-部署運(yùn)行的過(guò)程，并記錄在搭建過(guò)程中的學(xué)習(xí)心得、遇見的錯(cuò)誤及解決方式。

個(gè)人博客的主要功能有：

博客列表展示：文章按照時(shí)間順序（時(shí)間倒序：最新最先展示）列表展示
博客文章詳情展示：展示文章全部?jī)?nèi)容，包含：作者、創(chuàng)建時(shí)間、所屬目錄、標(biāo)簽、文章標(biāo)題、內(nèi)容
用戶權(quán)限管理：游客只能瀏覽文章、管理員可以發(fā)布文章、文章下線處理
添加文章功能：支持富文本編輯。可以調(diào)整字體大小、樣式、鍵入代碼等功能

界面展示：

前臺(tái)博客列表界面

前臺(tái)博客列表頁(yè)面.png

博客詳情頁(yè)面

博客詳情頁(yè)面.png

后臺(tái)管理頁(yè)面

登錄頁(yè)面

后臺(tái)管理頁(yè)面.png

項(xiàng)目技術(shù)簡(jiǎn)介

系統(tǒng)實(shí)現(xiàn)的功能點(diǎn)

用戶權(quán)限管理：普通的用戶(游客)只能瀏覽文章、管理員用戶可以發(fā)布文章、文章管理
博客列表展示：文章按照發(fā)布時(shí)間順序(按照時(shí)間倒敘)展示：博客類別、標(biāo)簽、博客名稱、作者名、發(fā)布時(shí)間、閱讀數(shù)量、博客的內(nèi)容概括
博客詳情頁(yè)面：博客名稱、作者、時(shí)間、博客內(nèi)容、標(biāo)簽
博客后臺(tái)列表：博客檢索(類別、標(biāo)簽、博客名稱)、博客列表(博客id、博客類別、標(biāo)簽、時(shí)間)、博客操作
新增博客功能：支持富文本編輯：可以調(diào)整大小、樣式等

服務(wù)端技術(shù)

核心框架：Spring:5.2.8.RELEASE

web框架：SpringMVC：5.2.8.RELEASE

持久層框架：Mybatis 3.2.4

數(shù)據(jù)庫(kù)連接池：阿里druid：0.2.6

數(shù)據(jù)庫(kù)：MySQL5.XX

JSON數(shù)據(jù)處理：谷歌gson 2.3

前端技術(shù)

jsp

Ajax

前端框架:bootstrap

富文本編輯器:百度UEditor

數(shù)據(jù)庫(kù)的設(shè)計(jì)

用戶表：賬號(hào)id、賬號(hào)名稱、賬號(hào)密碼
博客表：博客id、博客名稱、博客內(nèi)容、發(fā)布時(shí)間、閱讀量、類別id、狀態(tài)
博客/標(biāo)簽對(duì)應(yīng)表：博客id、標(biāo)簽的id
標(biāo)簽表：標(biāo)簽id、標(biāo)簽名稱（博客和標(biāo)簽：一對(duì)多：一個(gè)博客可以對(duì)應(yīng)多個(gè)標(biāo)簽）
類別表：類別ID、類別名稱（博客和類別：一對(duì)一：一個(gè)博客對(duì)應(yīng)一個(gè)類別）

創(chuàng)建SQL語(yǔ)句：

 


    

        

            

            

        

        

            
                DROP TABLE IF EXISTS `t_article`;
            

        

    

    

        

            

            

        

        

            
                CREATE TABLE `t_article` (
            

        

    

    

        

            

            

        

        

            
                `id` int(11) NOT NULL AUTO_INCREMENT,
            

        

    

    

        

            

            

        

        

            
                `categoryId` int(11) NOT NULL COMMENT '分類Id',
            

        

    

    

        

            

            

        

        

            
                `title` varchar(40) NOT NULL COMMENT '標(biāo)題',
            

        

    

    

        

            

            

        

        

            
                `content` blob NOT NULL COMMENT '內(nèi)容',
            

        

    

    

        

            

            

        

        

            
                `description` varchar(500) NOT NULL COMMENT '文章簡(jiǎn)介  用于列表顯示',
            

        

    

    

        

            

            

        

        

            
                `statue` int(11) NOT NULL DEFAULT '0' COMMENT '狀態(tài) 0：正常  1：不可用',
            

        

    

    

        

            

            

        

        

            
                `author` varchar(15) DEFAULT 'tulun' COMMENT '作者',
            

        

    

    

        

            

            

        

        

            
                `createTime` datetime NOT NULL COMMENT '發(fā)表時(shí)間',
            

        

    

    

        

            

            

        

        

            
                `showCount` int(11) NOT NULL DEFAULT '0' COMMENT '瀏覽量',
            

        

    

    

        

            

            

        

        

            
                PRIMARY KEY (`id`)
            

        

    

    

        

            

            

        

        

            
                ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='文章表';
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                -- ---------------------------- 
            

        

    

    

        

            

            

        

        

            
                -- Table structure for t_article_image 
            

        

    

    

        

            

            

        

        

            
                -- ---------------------------- 
            

        

    

    

        

            

            

        

        

            
                DROP TABLE IF EXISTS `t_article_image`;
            

        

    

    

        

            

            

        

        

            
                CREATE TABLE `t_article_image` (
            

        

    

    

        

            

            

        

        

            
                `id` int(11) NOT NULL AUTO_INCREMENT,
            

        

    

    

        

            

            

        

        

            
                `imageUrl` varchar(100) NOT NULL COMMENT '圖片地址',
            

        

    

    

        

            

            

        

        

            
                `articleId` int(11) NOT NULL COMMENT '文章Id',
            

        

    

    

        

            

            

        

        

            
                PRIMARY KEY (`id`,`articleId`)
            

        

    

    

        

            

            

        

        

            
                ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='文章圖  主要用于列表瀏覽';
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                -- ---------------------------- 
            

        

    

    

        

            

            

        

        

            
                -- Table structure for t_tag 
            

        

    

    

        

            

            

        

        

            
                -- ---------------------------- 
            

        

    

    

        

            

            

        

        

            
                DROP TABLE IF EXISTS `t_tag`;
            

        

    

    

        

            

            

        

        

            
                CREATE TABLE `t_tag` (
            

        

    

    

        

            

            

        

        

            
                `id` int(11) NOT NULL AUTO_INCREMENT,
            

        

    

    

        

            

            

        

        

            
                `tagName` varchar(25) NOT NULL COMMENT '標(biāo)簽名稱  唯一',
            

        

    

    

        

            

            

        

        

            
                PRIMARY KEY (`id`),
            

        

    

    

        

            

            

        

        

            
                UNIQUE KEY `tagName_UNIQUE` (`tagName`)
            

        

    

    

        

            

            

        

        

            
                ) ENGINE=InnoDB AUTO_INCREMENT=23 DEFAULT CHARSET=utf8 COMMENT='標(biāo)簽表';
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                -- ---------------------------- 
            

        

    

    

        

            

            

        

        

            
                -- Table structure for t_article_tag 
            

        

    

    

        

            

            

        

        

            
                -- ---------------------------- 
            

        

    

    

        

            

            

        

        

            
                DROP TABLE IF EXISTS `t_article_tag`;
            

        

    

    

        

            

            

        

        

            
                CREATE TABLE `t_article_tag` (
            

        

    

    

        

            

            

        

        

            
                `articleId` int(11) NOT NULL COMMENT '文章Id',
            

        

    

    

        

            

            

        

        

            
                `tagId` int(11) NOT NULL COMMENT '標(biāo)簽Id',
            

        

    

    

        

            

            

        

        

            
                PRIMARY KEY (`articleId`,`tagId`)
            

        

    

    

        

            

            

        

        

            
                ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='文章標(biāo)簽中間表';
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                -- ---------------------------- 
            

        

    

    

        

            

            

        

        

            
                -- Table structure for t_category 
            

        

    

    

        

            

            

        

        

            
                -- ---------------------------- 
            

        

    

    

        

            

            

        

        

            
                DROP TABLE IF EXISTS `t_category`;
            

        

    

    

        

            

            

        

        

            
                CREATE TABLE `t_category` (
            

        

    

    

        

            

            

        

        

            
                `id` int(11) NOT NULL AUTO_INCREMENT,
            

        

    

    

        

            

            

        

        

            
                `categoryName` varchar(20) NOT NULL COMMENT '分類名稱  唯一',
            

        

    

    

        

            

            

        

        

            
                `iconClass` varchar(45) NOT NULL COMMENT '圖標(biāo)樣式',
            

        

    

    

        

            

            

        

        

            
                `aliasName` varchar(20) NOT NULL COMMENT '別名  唯一  比如新聞 就用News 代替  欄目Id不顯示在url中',
            

        

    

    

        

            

            

        

        

            
                `sort` int(11) NOT NULL DEFAULT '0' COMMENT '排序 （0-10）',
            

        

    

    

        

            

            

        

        

            
                PRIMARY KEY (`id`),
            

        

    

    

        

            

            

        

        

            
                UNIQUE KEY `aliasName_UNIQUE` (`aliasName`),
            

        

    

    

        

            

            

        

        

            
                UNIQUE KEY `categoryName_UNIQUE` (`categoryName`)
            

        

    

    

        

            

            

        

        

            
                ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='分類表  只支持一級(jí)分類  如果需要分多個(gè)層次 用標(biāo)簽來(lái)協(xié)助實(shí)現(xiàn)';
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                -- ---------------------------- 
            

        

    

    

        

            

            

        

        

            
                -- Table structure for t_manager 
            

        

    

    

        

            

            

        

        

            
                -- ---------------------------- 
            

        

    

    

        

            

            

        

        

            
                DROP TABLE IF EXISTS `t_manager`;
            

        

    

    

        

            

            

        

        

            
                CREATE TABLE `t_manager` (
            

        

    

    

        

            

            

        

        

            
                `id` int(11) NOT NULL AUTO_INCREMENT,
            

        

    

    

        

            

            

        

        

            
                `userName` varchar(25) NOT NULL COMMENT '用戶名',
            

        

    

    

        

            

            

        

        

            
                `password` varchar(45) NOT NULL,
            

        

    

    

        

            

            

        

        

            
                PRIMARY KEY (`id`)
            

        

    

    

        

            

            

        

        

            
                ) ENGINE=InnoDB DEFAULT CHARSET=utf8;

框架結(jié)構(gòu)搭建

SSM項(xiàng)目腳手架搭建

搭建如下框架結(jié)構(gòu)：

目錄說(shuō)明：

 


    

        

            

            

        

        

            
                目錄說(shuō)明：
            

        

    

    

        

            

            

        

        

            
                |-src
            

        

    

    

        

            

            

        

        

            
                |--mian 
            

        

    

    

        

            

            

        

        

            
                |---java    JAVA源代碼根目錄 
            

        

    

    

        

            

            

        

        

            
                |----com 
            

        

    

    

        

            

            

        

        

            
                |-----tulun 
            

        

    

    

        

            

            

        

        

            
                |------model   存放pogo類：基本基本的getter和setter方法 
            

        

    

    

        

            

            

        

        

            
                |------controller  展示層類包路徑：前端用戶請(qǐng)求映射到該包路徑下類的實(shí)現(xiàn) 
            

        

    

    

        

            

            

        

        

            
                |------service     業(yè)務(wù)邏輯層包路徑：業(yè)務(wù)邏輯實(shí)現(xiàn)，調(diào)用dao層服務(wù) 
            

        

    

    

        

            

            

        

        

            
                |------dao      數(shù)據(jù)庫(kù)操作層包路徑：提供對(duì)數(shù)據(jù)庫(kù)的操作類與方法 
            

        

    

    

        

            

            

        

        

            
                |------util     工具類包路徑 
            

        

    

    

        

            

            

        

        

            
                |---resource  配置文件根目錄 
            

        

    

    

        

            

            

        

        

            
                |----myatis   mybatis接口對(duì)應(yīng)配置文件目錄 
            

        

    

    

        

            

            

        

        

            
                |----spring-XXX.xml  SSM中mybatis、spring核心、springMVC的全局配置文件 
            

        

    

    

        

            

            

        

        

            
                |--webapp  前端頁(yè)面內(nèi)容根目錄 
            

        

    

    

        

            

            

        

        

            
                |---WEB-INF 
            

        

    

    

        

            

            

        

        

            
                |----web.xml  前端頁(yè)面必要配置文件 
            

        

    

    

        

            

            

        

        

            
                |-pom.xml    maven的配置文件

測(cè)試Demo

主要完成各個(gè)層之間的連接映射，完成從t_manager表中讀取數(shù)據(jù)并進(jìn)行回顯

POJO類

根據(jù)數(shù)據(jù)庫(kù)表t_manager，創(chuàng)建User類

 


    

        

            

            

        

        

            
                package com.tulun.model;
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                /** 
            

        

    

    

        

            

            

        

        

            
                 * Description : 
            

        

    

    

        

            

            

        

        

            
                 * Created by Resumebb 
            

        

    

    

        

            

            

        

        

            
                 * Date :2021/4/17 
            

        

    

    

        

            

            

        

        

            
                 */ 
            

        

    

    

        

            

            

        

        

            
                public class User {
            

        

    

    

        

            

            

        

        

            
                private Integer id;
            

        

    

    

        

            

            

        

        

            
                private String name;
            

        

    

    

        

            

            

        

        

            
                private String passwd;
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                public Integer getId() {
            

        

    

    

        

            

            

        

        

            
                return id;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                public void setId(Integer id) {
            

        

    

    

        

            

            

        

        

            
                this.id = id;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                public String getName() {
            

        

    

    

        

            

            

        

        

            
                return name;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                public void setName(String name) {
            

        

    

    

        

            

            

        

        

            
                this.name = name;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                public String getPasswd() {
            

        

    

    

        

            

            

        

        

            
                return passwd;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                public void setPasswd(String passwd) {
            

        

    

    

        

            

            

        

        

            
                this.passwd = passwd;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                }

Spring核心配置文件

這里用到了阿里巴巴的druid連接池

 


    

        

            

            

        

        

            
                <beans xmlns="http://www.springframework.org/schema/beans" 
            

        

    

    

        

            

            

        

        

            
                xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
            

        

    

    

        

            

            

        

        

            
                xmlns:context="http://www.springframework.org/schema/context" 
            

        

    

    

        

            

            

        

        

            
                xsi:schemaLocation="http://www.springframework.org/schema/beans 
            

        

    

    

        

            

            

        

        

            
                 http://www.springframework.org/schema/beans/spring-beans-3.0.xsd 
            

        

    

    

        

            

            

        

        

            
                 http://www.springframework.org/schema/context 
            

        

    

    

        

            

            

        

        

            
                 http://www.springframework.org/schema/context/spring-context-3.0.xsd">
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                <!--開啟注解--> 
            

        

    

    

        

            

            

        

        

            
                <context:component-scan base-package="com.tulun"/> 
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                <!--配置數(shù)據(jù)源：借助連接池druid--> 
            

        

    

    

        

            

            

        

        

            
                <bean id ="dataSource" class="com.alibaba.druid.pool.DruidDataSource"> 
            

        

    

    

        

            

            

        

        

            
                <!--注入屬性--> 
            

        

    

    

        

            

            

        

        

            
                <property name="url" value="jdbc:mysql://localhost:3306/test"/> 
            

        

    

    

        

            

            

        

        

            
                <property name="username" value="root"/> 
            

        

    

    

        

            

            

        

        

            
                <property name="password" value="123456"/> 
            

        

    

    

        

            

            

        

        

            
                </bean> 
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean"> 
            

        

    

    

        

            

            

        

        

            
                <property name="dataSource" ref="dataSource"/> 
            

        

    

    

        

            

            

        

        

            
                <!--注入mapper映射文件--> 
            

        

    

    

        

            

            

        

        

            
                <property name="configLocation" value="classpath:spring-mybatis.xml"></property> 
            

        

    

    

        

            

            

        

        

            
                <property name="mapperLocations" value="classpath:mapper/*.xml"/> 
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                </bean> 
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer"> 
            

        

    

    

        

            

            

        

        

            
                <property name="basePackage" value="com.tulun.dao"/> 
            

        

    

    

        

            

            

        

        

            
                <property name="sqlSessionFactoryBeanName" value="sqlSessionFactory"/> 
            

        

    

    

        

            

            

        

        

            
                </bean> 
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                </beans>

Spring-Mybatis配置文件

 


    

        

            

            

        

        

            
                <?xml version="1.0" encoding="UTF-8" ?> 
            

        

    

    

        

            

            

        

        

            
                <!DOCTYPE configuration 
            

        

    

    

        

            

            

        

        

            
                PUBLIC "-//mybatis.org//DTD Config 3.0//EN" 
            

        

    

    

        

            

            

        

        

            
                "http://mybatis.org/dtd/mybatis-3-config.dtd">
            

        

    

    

        

            

            

        

        

            
                <!--根標(biāo)簽--> 
            

        

    

    

        

            

            

        

        

            
                <configuration> 
            

        

    

    

        

            

            

        

        

            
                </configuration>

SpringMVC配置文件

 


    

        

            

            

        

        

            
                <?xml version="1.0" encoding="UTF-8"?> 
            

        

    

    

        

            

            

        

        

            
                <beans xmlns="http://www.springframework.org/schema/beans" 
            

        

    

    

        

            

            

        

        

            
                xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
            

        

    

    

        

            

            

        

        

            
                xmlns:context="http://www.springframework.org/schema/context" 
            

        

    

    

        

            

            

        

        

            
                xmlns:mvc="http://www.springframework.org/schema/mvc" 
            

        

    

    

        

            

            

        

        

            
                xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd 
            

        

    

    

        

            

            

        

        

            
                 http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.1.xsd 
            

        

    

    

        

            

            

        

        

            
                 http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.1.xsd">
            

        

    

    

        

            

            

        

        

            
                <!--掃描controller寫注解--> 
            

        

    

    

        

            

            

        

        

            
                <context:component-scan base-package="com.tulun.controller"/> 
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                <!--配置映射器--> 
            

        

    

    

        

            

            

        

        

            
                <mvc:annotation-driven/> 
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                <!--配置視圖解析器--> 
            

        

    

    

        

            

            

        

        

            
                <!--視圖解析器--> 
            

        

    

    

        

            

            

        

        

            
                <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"> 
            

        

    

    

        

            

            

        

        

            
                <!--jsp頁(yè)面前綴--> 
            

        

    

    

        

            

            

        

        

            
                <property name="prefix" value="/WEB-INF/jsp/"/> 
            

        

    

    

        

            

            

        

        

            
                <!--jsp后綴--> 
            

        

    

    

        

            

            

        

        

            
                <property name="suffix" value=".jsp"/> 
            

        

    

    

        

            

            

        

        

            
                <property name="viewClass" value="org.springframework.web.servlet.view.freemarker.FreeMarkerView"/> 
            

        

    

    

        

            

            

        

        

            
                </bean> 
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                </beans>

web配置文件

 


    

        

            

            

        

        

            
                <?xml version="1.0" encoding="UTF-8"?> 
            

        

    

    

        

            

            

        

        

            
                <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" 
            

        

    

    

        

            

            

        

        

            
                xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
            

        

    

    

        

            

            

        

        

            
                xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
            

        

    

    

        

            

            

        

        

            
                 http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                <context-param> 
            

        

    

    

        

            

            

        

        

            
                <param-name>contextConfigLocation</param-name> 
            

        

    

    

        

            

            

        

        

            
                <param-value>classpath:spring-core.xml</param-value> 
            

        

    

    

        

            

            

        

        

            
                </context-param> 
            

        

    

    

        

            

            

        

        

            
                <listener> 
            

        

    

    

        

            

            

        

        

            
                <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class> 
            

        

    

    

        

            

            

        

        

            
                </listener> 
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                <!--前端控制器--> 
            

        

    

    

        

            

            

        

        

            
                <servlet> 
            

        

    

    

        

            

            

        

        

            
                <servlet-name>myBolg</servlet-name> 
            

        

    

    

        

            

            

        

        

            
                <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> 
            

        

    

    

        

            

            

        

        

            
                <!--將springMVC的配置文件進(jìn)行配置--> 
            

        

    

    

        

            

            

        

        

            
                <init-param> 
            

        

    

    

        

            

            

        

        

            
                <param-name>contextConfigLocation</param-name> 
            

        

    

    

        

            

            

        

        

            
                <param-value>classpath:spring-mvc.xml</param-value> 
            

        

    

    

        

            

            

        

        

            
                </init-param> 
            

        

    

    

        

            

            

        

        

            
                </servlet> 
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                <servlet-mapping> 
            

        

    

    

        

            

            

        

        

            
                <servlet-name>myBolg</servlet-name> 
            

        

    

    

        

            

            

        

        

            
                <url-pattern>/</url-pattern> 
            

        

    

    

        

            

            

        

        

            
                </servlet-mapping> 
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                </web-app>

pom依賴

 


    

        

            

            

        

        

            
                <dependencies> 
            

        

    

    

        

            

            

        

        

            
                <dependency> 
            

        

    

    

        

            

            

        

        

            
                <groupId>junit</groupId> 
            

        

    

    

        

            

            

        

        

            
                <artifactId>junit</artifactId> 
            

        

    

    

        

            

            

        

        

            
                <version>4.11</version> 
            

        

    

    

        

            

            

        

        

            
                <scope>test</scope> 
            

        

    

    

        

            

            

        

        

            
                </dependency> 
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                <!--    spring依賴--> 
            

        

    

    

        

            

            

        

        

            
                <dependency> 
            

        

    

    

        

            

            

        

        

            
                <groupId>org.springframework</groupId> 
            

        

    

    

        

            

            

        

        

            
                <artifactId>spring-core</artifactId> 
            

        

    

    

        

            

            

        

        

            
                <version>5.2.8.RELEASE</version> 
            

        

    

    

        

            

            

        

        

            
                </dependency> 
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                <dependency> 
            

        

    

    

        

            

            

        

        

            
                <groupId>org.springframework</groupId> 
            

        

    

    

        

            

            

        

        

            
                <artifactId>spring-context</artifactId> 
            

        

    

    

        

            

            

        

        

            
                <version>5.2.8.RELEASE</version> 
            

        

    

    

        

            

            

        

        

            
                </dependency> 
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                <dependency> 
            

        

    

    

        

            

            

        

        

            
                <groupId>org.springframework</groupId> 
            

        

    

    

        

            

            

        

        

            
                <artifactId>spring-beans</artifactId> 
            

        

    

    

        

            

            

        

        

            
                <version>5.2.8.RELEASE</version> 
            

        

    

    

        

            

            

        

        

            
                </dependency> 
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                <dependency> 
            

        

    

    

        

            

            

        

        

            
                <groupId>org.springframework</groupId> 
            

        

    

    

        

            

            

        

        

            
                <artifactId>spring-expression</artifactId> 
            

        

    

    

        

            

            

        

        

            
                <version>5.2.8.RELEASE</version> 
            

        

    

    

        

            

            

        

        

            
                </dependency> 
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                <!--web依賴/spring mvc依賴--> 
            

        

    

    

        

            

            

        

        

            
                <dependency> 
            

        

    

    

        

            

            

        

        

            
                <groupId>org.springframework</groupId> 
            

        

    

    

        

            

            

        

        

            
                <artifactId>spring-webmvc</artifactId> 
            

        

    

    

        

            

            

        

        

            
                <version>5.2.8.RELEASE</version> 
            

        

    

    

        

            

            

        

        

            
                </dependency> 
            

        

    

    

        

            

            

        

        

            
                <dependency> 
            

        

    

    

        

            

            

        

        

            
                <groupId>org.springframework</groupId> 
            

        

    

    

        

            

            

        

        

            
                <artifactId>spring-web</artifactId> 
            

        

    

    

        

            

            

        

        

            
                <version>5.2.8.RELEASE</version> 
            

        

    

    

        

            

            

        

        

            
                </dependency> 
            

        

    

    

        

            

            

        

        

            
                <dependency> 
            

        

    

    

        

            

            

        

        

            
                <groupId>javax.servlet</groupId> 
            

        

    

    

        

            

            

        

        

            
                <artifactId>javax.servlet-api</artifactId> 
            

        

    

    

        

            

            

        

        

            
                <version>3.1.0</version> 
            

        

    

    

        

            

            

        

        

            
                </dependency> 
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                <!--tomcat servlet api --> 
            

        

    

    

        

            

            

        

        

            
                <dependency> 
            

        

    

    

        

            

            

        

        

            
                <groupId>jstl</groupId> 
            

        

    

    

        

            

            

        

        

            
                <artifactId>jstl</artifactId> 
            

        

    

    

        

            

            

        

        

            
                <version>1.2</version> 
            

        

    

    

        

            

            

        

        

            
                </dependency> 
            

        

    

    

        

            

            

        

        

            
                <dependency> 
            

        

    

    

        

            

            

        

        

            
                <groupId>taglibs</groupId> 
            

        

    

    

        

            

            

        

        

            
                <artifactId>standard</artifactId> 
            

        

    

    

        

            

            

        

        

            
                <version>1.1.2</version> 
            

        

    

    

        

            

            

        

        

            
                </dependency> 
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                <!--mybatis依賴--> 
            

        

    

    

        

            

            

        

        

            
                <dependency> 
            

        

    

    

        

            

            

        

        

            
                <groupId>org.mybatis</groupId> 
            

        

    

    

        

            

            

        

        

            
                <artifactId>mybatis</artifactId> 
            

        

    

    

        

            

            

        

        

            
                <version>3.4.1</version> 
            

        

    

    

        

            

            

        

        

            
                </dependency> 
            

        

    

    

        

            

            

        

        

            
                <dependency> 
            

        

    

    

        

            

            

        

        

            
                <groupId>mysql</groupId> 
            

        

    

    

        

            

            

        

        

            
                <artifactId>mysql-connector-java</artifactId> 
            

        

    

    

        

            

            

        

        

            
                <version>5.1.39</version> 
            

        

    

    

        

            

            

        

        

            
                </dependency> 
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                <!--    整合--> 
            

        

    

    

        

            

            

        

        

            
                <dependency> 
            

        

    

    

        

            

            

        

        

            
                <groupId>org.mybatis</groupId> 
            

        

    

    

        

            

            

        

        

            
                <artifactId>mybatis-spring</artifactId> 
            

        

    

    

        

            

            

        

        

            
                <version>1.3.0</version> 
            

        

    

    

        

            

            

        

        

            
                </dependency> 
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                <!--    連接池--> 
            

        

    

    

        

            

            

        

        

            
                <dependency> 
            

        

    

    

        

            

            

        

        

            
                <groupId>com.mchange</groupId> 
            

        

    

    

        

            

            

        

        

            
                <artifactId>c3p0</artifactId> 
            

        

    

    

        

            

            

        

        

            
                <version>0.9.5.2</version> 
            

        

    

    

        

            

            

        

        

            
                </dependency> 
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                <dependency> 
            

        

    

    

        

            

            

        

        

            
                <groupId>org.springframework</groupId> 
            

        

    

    

        

            

            

        

        

            
                <artifactId>spring-tx</artifactId> 
            

        

    

    

        

            

            

        

        

            
                <version>5.2.8.RELEASE</version> 
            

        

    

    

        

            

            

        

        

            
                </dependency> 
            

        

    

    

        

            

            

        

        

            
                <dependency> 
            

        

    

    

        

            

            

        

        

            
                <groupId>org.springframework</groupId> 
            

        

    

    

        

            

            

        

        

            
                <artifactId>spring-jdbc</artifactId> 
            

        

    

    

        

            

            

        

        

            
                <version>5.2.8.RELEASE</version> 
            

        

    

    

        

            

            

        

        

            
                </dependency> 
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                <dependency> 
            

        

    

    

        

            

            

        

        

            
                <groupId>javax.servlet.jsp.jstl</groupId> 
            

        

    

    

        

            

            

        

        

            
                <artifactId>jstl</artifactId> 
            

        

    

    

        

            

            

        

        

            
                <version>1.2</version> 
            

        

    

    

        

            

            

        

        

            
                </dependency> 
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                <dependency> 
            

        

    

    

        

            

            

        

        

            
                <groupId>javax.servlet</groupId> 
            

        

    

    

        

            

            

        

        

            
                <artifactId>servlet-api</artifactId> 
            

        

    

    

        

            

            

        

        

            
                <version>2.5</version> 
            

        

    

    

        

            

            

        

        

            
                </dependency> 
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                <dependency> 
            

        

    

    

        

            

            

        

        

            
                <groupId>com.google.code.gson</groupId> 
            

        

    

    

        

            

            

        

        

            
                <artifactId>gson</artifactId> 
            

        

    

    

        

            

            

        

        

            
                <version>2.3</version> 
            

        

    

    

        

            

            

        

        

            
                </dependency> 
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                <dependency> 
            

        

    

    

        

            

            

        

        

            
                <groupId>com.alibaba</groupId> 
            

        

    

    

        

            

            

        

        

            
                <artifactId>druid</artifactId> 
            

        

    

    

        

            

            

        

        

            
                <version>0.2.6</version> 
            

        

    

    

        

            

            

        

        

            
                </dependency> 
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                <dependency> 
            

        

    

    

        

            

            

        

        

            
                <groupId>commons-logging</groupId> 
            

        

    

    

        

            

            

        

        

            
                <artifactId>commons-logging</artifactId> 
            

        

    

    

        

            

            

        

        

            
                <version>1.1.1</version> 
            

        

    

    

        

            

            

        

        

            
                </dependency> 
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                <dependency> 
            

        

    

    

        

            

            

        

        

            
                <groupId>commons-configuration</groupId> 
            

        

    

    

        

            

            

        

        

            
                <artifactId>commons-configuration</artifactId> 
            

        

    

    

        

            

            

        

        

            
                <version>1.9</version> 
            

        

    

    

        

            

            

        

        

            
                </dependency> 
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                </dependencies>

UserMapper

 


    

        

            

            

        

        

            
                import com.tulun.model.User;
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                /** 
            

        

    

    

        

            

            

        

        

            
                 * Description : 
            

        

    

    

        

            

            

        

        

            
                 * Created by Resumebb 
            

        

    

    

        

            

            

        

        

            
                 * Date :2021/4/22 
            

        

    

    

        

            

            

        

        

            
                 */ 
            

        

    

    

        

            

            

        

        

            
                public interface UserMapper {
            

        

    

    

        

            

            

        

        

            
                public User getUserById(Integer id);
            

        

    

    

        

            

            

        

        

            
                }

UserService

 


    

        

            

            

        

        

            
                package com.tulun.service;
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                import com.tulun.model.User;
            

        

    

    

        

            

            

        

        

            
                import com.tulun.dao.UserMapper;
            

        

    

    

        

            

            

        

        

            
                import org.springframework.beans.factory.annotation.Autowired;
            

        

    

    

        

            

            

        

        

            
                import org.springframework.stereotype.Service;
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                /** 
            

        

    

    

        

            

            

        

        

            
                 * Description : 
            

        

    

    

        

            

            

        

        

            
                 * Created by Resumebb 
            

        

    

    

        

            

            

        

        

            
                 * Date :2021/4/19 
            

        

    

    

        

            

            

        

        

            
                 */ 
            

        

    

    

        

            

            

        

        

            
                @Service 
            

        

    

    

        

            

            

        

        

            
                public class UserService {
            

        

    

    

        

            

            

        

        

            
                @Autowired 
            

        

    

    

        

            

            

        

        

            
                private UserMapper userMapper;
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                public User getUserById(Integer id){
            

        

    

    

        

            

            

        

        

            
                if(id < 0)
            

        

    

    

        

            

            

        

        

            
                return new User();
            

        

    

    

        

            

            

        

        

            
                return userMapper.getUserById(id);
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                }

UserController

查詢t_manager中的id為1的數(shù)據(jù)進(jìn)行顯示

 


    

        

            

            

        

        

            
                package com.tulun.controller;
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                import com.tulun.model.User;
            

        

    

    

        

            

            

        

        

            
                import com.tulun.service.UserService;
            

        

    

    

        

            

            

        

        

            
                import org.springframework.beans.factory.annotation.Autowired;
            

        

    

    

        

            

            

        

        

            
                import org.springframework.stereotype.Controller;
            

        

    

    

        

            

            

        

        

            
                import org.springframework.web.bind.annotation.RequestMapping;
            

        

    

    

        

            

            

        

        

            
                import org.springframework.web.bind.annotation.ResponseBody;
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                /** 
            

        

    

    

        

            

            

        

        

            
                 * Description : 
            

        

    

    

        

            

            

        

        

            
                 * Created by Resumebb 
            

        

    

    

        

            

            

        

        

            
                 * Date :2021/4/22 
            

        

    

    

        

            

            

        

        

            
                 */ 
            

        

    

    

        

            

            

        

        

            
                @Controller 
            

        

    

    

        

            

            

        

        

            
                public class UserController {
            

        

    

    

        

            

            

        

        

            
                @Autowired 
            

        

    

    

        

            

            

        

        

            
                private UserService userService;
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                @RequestMapping("/testUser") 
            

        

    

    

        

            

            

        

        

            
                @ResponseBody 
            

        

    

    

        

            

            

        

        

            
                public User testUser(){
            

        

    

    

        

            

            

        

        

            
                User user = userService.getUserById(1);
            

        

    

    

        

            

            

        

        

            
                return user;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                }

UserMapper.xml

 


    

        

            

            

        

        

            
                <?xml version="1.0" encoding="UTF-8" ?> 
            

        

    

    

        

            

            

        

        

            
                <!DOCTYPE mapper 
            

        

    

    

        

            

            

        

        

            
                PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" 
            

        

    

    

        

            

            

        

        

            
                "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
            

        

    

    

        

            

            

        

        

            
                <mapper namespace="com.tulun.dao.UserMapper"> 
            

        

    

    

        

            

            

        

        

            
                <resultMap id="UserMap" type="com.tulun.model.User"> 
            

        

    

    

        

            

            

        

        

            
                <result property="id" column="id"></result> 
            

        

    

    

        

            

            

        

        

            
                <result property="name" column="userName"></result> 
            

        

    

    

        

            

            

        

        

            
                <result property="passwd" column="password"></result> 
            

        

    

    

        

            

            

        

        

            
                </resultMap> 
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                <select id="getUserById" parameterType="int" resultMap="UserMap"> 
            

        

    

    

        

            

            

        

        

            
                select * from t_manager where id=#{id}
            

        

    

    

        

            

            

        

        

            
                </select> 
            

        

    

    

        

            

            

        

        

            
                </mapper>

運(yùn)行結(jié)果

錯(cuò)誤記錄

運(yùn)行的界面顯示unkown the request

原因是因?yàn)槎丝诒徽加昧耍姆?wù)器的端口號(hào)就可以了。

出現(xiàn)這個(gè)錯(cuò)誤就要檢查SQL查詢語(yǔ)句，數(shù)據(jù)源的配置是否正確，經(jīng)檢查我報(bào)這個(gè)錯(cuò)是因?yàn)镾QL查詢語(yǔ)句manager寫成了manger，用戶名密碼不對(duì)也會(huì)報(bào)這個(gè)錯(cuò)。

類似這種錯(cuò)，一是檢查@Service有沒(méi)有加上，二是檢查映射文件有沒(méi)有頂行寫，第一行不能有空行。

轉(zhuǎn)自：csdn。作者：resumebb

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、包裝設(shè)計(jì) 、圖標(biāo)定制、用戶體驗(yàn) 、交互設(shè)計(jì)、網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

評(píng)論(0) 瀏覽(1760)

302021-4

centOS7殺死進(jìn)程命令

前端達(dá)人

查看當(dāng)前所有正在運(yùn)行的進(jìn)程，可以看到80端口被httpd占用了（80端口希望分配給nginx使用，而不是httpd）

netstat -tpnul

這里以殺死httpd進(jìn)程為例：

先查看 httpd 進(jìn)程

flaskApi) [root@67 flaskDemo]# ps aux |grep httpd  root      6732  0.0  0.0 230488  5252 ?        Ss   8月06   2:27 /usr/sbin/httpd -DFOREGROUND
apache 22570  0.0  0.0 232572  3888 ?        S    9月15   0:00 /usr/sbin/httpd -DFOREGROUND
apache 22571  0.0  0.0 232572  3888 ?        S    9月15   0:00 /usr/sbin/httpd -DFOREGROUND
apache 22572  0.0  0.0 232572  3904 ?        S    9月15   0:00 /usr/sbin/httpd -DFOREGROUND
apache 22573  0.0  0.0 232572  3904 ?        S    9月15   0:00 /usr/sbin/httpd -DFOREGROUND
apache 22574  0.0  0.0 232572  3900 ?        S    9月15   0:00 /usr/sbin/httpd -DFOREGROUND
apache 27544  0.0  0.0 232572  3896 ?        S    15:41   0:00 /usr/sbin/httpd -DFOREGROUND
apache 27546  0.0  0.0 232572  3900 ?        S    15:41   0:00 /usr/sbin/httpd -DFOREGROUND
apache 27548  0.0  0.0 232572  3172 ?        S    15:41   0:00 /usr/sbin/httpd -DFOREGROUND
apache 27550  0.0  0.0 232572  3172 ?        S    15:41   0:00 /usr/sbin/httpd -DFOREGROUND
apache 27552  0.0  0.0 232572  3172 ?        S    15:41   0:00 /usr/sbin/httpd -DFOREGROUND
root 27665  0.0  0.0 112728   988 pts/0    S+   15:43   0:00 grep --color=auto httpd

這個(gè)就是 apache 的所有進(jìn)程

我們可以用 kill -9 加進(jìn)程ID 如下

kill -9 6732 kill -9 22570 kill -9 22571 kill -9 22572 kill -9 22573 kill -9 22574 kill -9 27544 kill -9 27546 kill -9 27548 kill -9 27550 kill -9 27552 kill -9 27665

再次查看一下httpd正在運(yùn)行的進(jìn)程：

(flaskApi) [root@67 flaskDemo]# ps aux |grep httpd root     27835  0.0  0.0 112724   988 pts/0    S+   15:46   0:00 grep --color=auto httpd

全部殺完了... 殺死進(jìn)程方法有很多種...我這個(gè) 只是其中的一種

通過(guò)netstat確認(rèn)一下，httpd已經(jīng)不再占用80端口了

(flaskApi) [root@67 flaskDemo]# netstat -tpnul

另如果不想殺死進(jìn)程，而想修改端口號(hào)，

操作方法參照：centos7 ngxin啟動(dòng)失?。篔ob for nginx.service failed（80端口被占用的解決辦法）

參照文檔：

centos殺死進(jìn)程命令

轉(zhuǎn)載于:https://www.cnblogs.com/kaerxifa/p/11534539.html

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、包裝設(shè)計(jì) 、圖標(biāo)定制、用戶體驗(yàn) 、交互設(shè)計(jì)、網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

評(píng)論(0) 瀏覽(2039)

302021-4

MVP：七種深度洞察用戶需求的方法

資深UI設(shè)計(jì)者

不論是什么產(chǎn)品都需要考慮到用戶的需求，對(duì)于用戶需求進(jìn)行分析，確定可行性，最后進(jìn)行實(shí)現(xiàn)；重點(diǎn)要關(guān)注在產(chǎn)品中用戶需要的是什么，對(duì)用戶的想法進(jìn)行探索；本文作者分享了關(guān)于七種深度洞察用戶需求的方法，我們一起來(lái)了解一下。

需求分析是市場(chǎng)研究階段的重要活動(dòng)，也是新產(chǎn)品開發(fā)流程中的一個(gè)重要環(huán)節(jié)，是產(chǎn)品經(jīng)理經(jīng)過(guò)深入細(xì)致的調(diào)研和分析，準(zhǔn)確理解用戶對(duì)產(chǎn)品的功能、性能、可靠性等具體要求，將用戶非形式的需求表述轉(zhuǎn)化為完整的需求定義，從而確定產(chǎn)品必須做什么的過(guò)程；該階段是分析產(chǎn)品在功能上需要“實(shí)現(xiàn)什么”，而不是考慮如何去“實(shí)現(xiàn)”。

需求分析的目標(biāo)是把用戶對(duì)待開發(fā)產(chǎn)品提出的“要求”或“需要”進(jìn)行分析與整理，確認(rèn)后形成描述完整、清晰與規(guī)范的文檔，確定產(chǎn)品需要實(shí)現(xiàn)哪些功能，完成哪些工作；此外，產(chǎn)品的一些非功能性需求（如產(chǎn)品質(zhì)量、款式、特色、包裝、安裝、售后等）及約束條件也是需求分析的目標(biāo)。

“消費(fèi)者不知道他們想要什么?！?
“消費(fèi)者無(wú)法很好地表達(dá)他們的需求或喜好?！?
“消費(fèi)者對(duì)自己的具體需求很迷茫?！?

這些都是從客戶（產(chǎn)品開發(fā)或者市場(chǎng)部的同事）或者身邊一些人（需要更多反饋的感官專家或設(shè)計(jì)者）在一整天的訪談（包括焦點(diǎn)小組、一對(duì)一訪談）、開放式問(wèn)卷或者與消費(fèi)者接觸的過(guò)程中發(fā)現(xiàn)的問(wèn)題；這就需要我們根據(jù)調(diào)研的初步結(jié)果進(jìn)行深入的“需求分析”才能得到想要的結(jié)論和應(yīng)用價(jià)值。

一、馬斯洛需求層次理論

在組織行為學(xué)中，馬斯洛曾經(jīng)在1943年發(fā)表的論文中對(duì)人類需求做出了定義，在人類動(dòng)機(jī)理論中，馬斯洛提出了需求層次理論模型；這一理論可以有效地觀察人類最根本、最基礎(chǔ)的需求水平。

馬斯洛認(rèn)為，人類具有一些先天需求，人的需求越是低級(jí)的需求就越基本，越與動(dòng)物相似；越是高級(jí)的需求就越為人類所特有。同時(shí)這些需求都是按照先后順序出現(xiàn)的，當(dāng)一個(gè)人滿足了較低的需求之后，才能出現(xiàn)較高級(jí)的需求，即需求層次。

馬斯洛理論把需要分成生理需要、安全需要、社交需要、尊重和自我實(shí)現(xiàn)五類，依次由較低層次到較高層次排列，如圖所示。在自我需要實(shí)現(xiàn)之后，還有自我超越需要，但通常不作為馬斯洛需要層次理論中必要的層次，大多數(shù)會(huì)將自我超越合并至自我實(shí)現(xiàn)需求當(dāng)中。

圖馬斯洛需求層次理論圖譜

1. 第一層次：生理上的需要

如果這些需要（除性以外）任何一項(xiàng)得不到滿足，人類個(gè)人的生理機(jī)能就無(wú)法正常運(yùn)轉(zhuǎn)。

換而言之，人類的生命就會(huì)因此受到威脅。從這個(gè)意義上說(shuō)，生理需要是推動(dòng)人們行動(dòng)最首要的動(dòng)力。

馬斯洛認(rèn)為，只有這些最基本的需要滿足到維持生存所必需的程度后，其他的需要才能成為新的激勵(lì)因素，而到了此時(shí)，這些已相對(duì)滿足的需要也就不再成為激勵(lì)因素了。

2. 第二層次：安全上的需要

馬斯洛認(rèn)為，整個(gè)有機(jī)體是一個(gè)追求安全的機(jī)制，人的感受器官、效應(yīng)器官、智能和其他能量主要是尋求安全的工具，甚至可以把科學(xué)和人生觀都看成是滿足安全需要的一部分；當(dāng)這種需要一旦相對(duì)滿足后，也就不再成為激勵(lì)因素了。

3. 第三層次：情感和歸屬的需要

人人都希望得到相互的關(guān)心和照顧，感情上的需要比生理上的需要來(lái)的細(xì)致，它和一個(gè)人的生理特性、經(jīng)歷、教育、宗教信仰都有關(guān)系。

4. 第四層次：尊重的需要

人人都希望自己有穩(wěn)定的社會(huì)地位，要求個(gè)人的能力和成就得到社會(huì)的承認(rèn)。尊重的需要又可分為內(nèi)部尊重和外部尊重。內(nèi)部尊重是指一個(gè)人希望在各種不同情境中有實(shí)力、能勝任、充滿信心、能獨(dú)立自主。

總之，內(nèi)部尊重就是人的自尊。

外部尊重是指一個(gè)人希望有地位、有威信，受到別人的尊重、信賴和高度評(píng)價(jià)；馬斯洛認(rèn)為，尊重需要得到滿足，能使人對(duì)自己充滿信心，對(duì)社會(huì)滿腔熱情，體驗(yàn)到自己活著的用處價(jià)值。

5. 第五層次：自我實(shí)現(xiàn)的需要

這是最高層次的需要，它是指實(shí)現(xiàn)個(gè)人理想、抱負(fù)，發(fā)揮個(gè)人的能力到最大程度，達(dá)到自我實(shí)現(xiàn)境界的人，接受自己也接受他人，解決問(wèn)題能力增強(qiáng)，自覺性提高，善于獨(dú)立處事，要求不受打擾地獨(dú)處，完成與自己的能力相稱的一切事情的需要；也就是說(shuō)，人必須干稱職的工作，這樣才會(huì)使他們感到最大的快樂(lè)。

馬斯洛提出，為滿足自我實(shí)現(xiàn)需要所采取的途徑是因人而異的。自我實(shí)現(xiàn)的需要是在努力實(shí)現(xiàn)自己的潛力，使自己越來(lái)越成為自己所期望的人物。

馬斯洛理論把需要分成生理需要、安全需要、社交需要、尊重需要和自我實(shí)現(xiàn)需要五類，依次由較低層次到較高層次，從企業(yè)經(jīng)營(yíng)消費(fèi)者滿意（CS）戰(zhàn)略的角度來(lái)看，每一個(gè)需求層次上的消費(fèi)者對(duì)產(chǎn)品的要求都不一樣，即不同的產(chǎn)品滿足不同的需求層次。

根據(jù)五個(gè)需要層次，可以劃分出五個(gè)消費(fèi)者市場(chǎng)

生理需求：滿足最低需求層次的市場(chǎng)，消費(fèi)者只要求產(chǎn)品具有一般功能即可。
安全需求：滿足對(duì)“安全”有要求的市場(chǎng)，消費(fèi)者關(guān)注產(chǎn)品對(duì)身體的影響。
社交需求：滿足對(duì)“交際”有要求的市場(chǎng)，消費(fèi)者關(guān)注產(chǎn)品是否有助提高自己的交際形象。
尊重需求：滿足對(duì)產(chǎn)品有與眾不同要求的市場(chǎng)，消費(fèi)者關(guān)注產(chǎn)品的象征意義。
自我實(shí)現(xiàn)：滿足對(duì)產(chǎn)品有自己判斷標(biāo)準(zhǔn)的市場(chǎng)，消費(fèi)者擁有自己固定的品牌需求層次越高，消費(fèi)者就越不容易被滿足。

經(jīng)濟(jì)學(xué)上，“消費(fèi)者愿意支付的價(jià)格≌消費(fèi)者獲得的滿意度”，也就是說(shuō)，同樣的洗衣粉，滿足消費(fèi)者需求層次越高，消費(fèi)者能接受的產(chǎn)品定價(jià)也越高。

市場(chǎng)的競(jìng)爭(zhēng)，總是越低端越激烈，價(jià)格競(jìng)爭(zhēng)顯然是將“需求層次”降到最低，消費(fèi)者感覺不到其他層次的“滿意”，愿意支付的價(jià)格當(dāng)然也低。

二、KANO 模型

KANO模型是東京理工大學(xué)教授狩野紀(jì)昭(Noriaki Kano)發(fā)明的對(duì)用戶需求分類和優(yōu)先排序的有用工具，以分析用戶需求對(duì)用戶滿意的影響為基礎(chǔ)，體現(xiàn)了產(chǎn)品性能和用戶滿意之間的非線性關(guān)系，如圖所示。

根據(jù)不同類型的質(zhì)量特性與顧客滿意度之間的關(guān)系，狩野教授將產(chǎn)品服務(wù)的質(zhì)量特性分為5類。

KANO 模型（產(chǎn)品性能和用戶滿意之間的非線性關(guān)系）

1. 基本型需求

也稱為必備型需求、理所當(dāng)然需求，是顧客對(duì)企業(yè)提供的產(chǎn)品或服務(wù)因素的基本要求；是顧客認(rèn)為產(chǎn)品“必須有”的屬性或功能。當(dāng)其特性不充足（不滿足顧客需求）時(shí)，顧客很不滿意；當(dāng)其特性充足（滿足顧客需求）時(shí)，顧客也可能不會(huì)因而表現(xiàn)出滿意。

對(duì)于基本型需求，即使超過(guò)了顧客的期望，但顧客充其量達(dá)到滿意，不會(huì)對(duì)此表現(xiàn)出更多的好感；不過(guò)只要稍有一些疏忽，未達(dá)到顧客的期望，則顧客滿意將一落千丈。

對(duì)于顧客而言，這些需求是必須滿足的，理所當(dāng)然的；對(duì)于這類需求，企業(yè)的做法應(yīng)該是注重不要在這方面失分，需要企業(yè)不斷地調(diào)查和了解顧客需求，并通過(guò)合適的方法在產(chǎn)品中體現(xiàn)這些要求。

例如，夏天家庭使用空調(diào)，如果空調(diào)正常運(yùn)行，顧客不會(huì)為此而對(duì)空調(diào)質(zhì)量感到滿意；反之，一旦空調(diào)出現(xiàn)問(wèn)題，無(wú)法制冷，那么顧客對(duì)該品牌空調(diào)的滿意水平則會(huì)明顯下降，投訴、抱怨隨之而來(lái)。

再例如，智能手機(jī)的基本型需求有語(yǔ)音通話質(zhì)量、信號(hào)覆蓋、操作系統(tǒng)兼容、安全性、日常使用和性能：待機(jī)時(shí)間、速度等；試想一下，一個(gè)智能手機(jī)沒(méi)有信號(hào)，通話質(zhì)量差，操作系統(tǒng)不兼容，被感染病毒，待機(jī)時(shí)間10分鐘就沒(méi)電，如果手機(jī)運(yùn)行速度慢到接近崩潰，這些都會(huì)使用戶的不滿情緒增加；但是上述這些需求都滿足后，并不能帶來(lái)用戶滿意度的增加，因?yàn)橛脩粽J(rèn)為這些是必須要有的。

2. 期望型需求

也稱為意愿型需求，是指顧客的滿意狀況與需求的滿足程度成比例關(guān)系的需求，此類需求得到滿足或表現(xiàn)良好的話，客戶滿意度會(huì)顯著增加，企業(yè)提供的產(chǎn)品和服務(wù)水平超出顧客期望越多，顧客的滿意狀況越好；當(dāng)此類需求得不到滿足或表現(xiàn)不好的話，客戶的不滿也會(huì)顯著增加。

期望型需求沒(méi)有基本型需求那樣苛刻，要求提供的產(chǎn)品或服務(wù)比較優(yōu)秀，但并不是“必須”的產(chǎn)品屬性或服務(wù)行為有些期望型需求連顧客都不太清楚，但是是他們希望得到的，也叫用戶需求的癢處；這是處于成長(zhǎng)期的需求，客戶、競(jìng)爭(zhēng)對(duì)手和企業(yè)自身都關(guān)注的需求，也是體現(xiàn)競(jìng)爭(zhēng)能力的需求。對(duì)于這類需求，企業(yè)的做法應(yīng)該是注重提高這方面的質(zhì)量，要力爭(zhēng)超過(guò)競(jìng)爭(zhēng)對(duì)手。

在市場(chǎng)調(diào)查中，顧客談?wù)摰耐ǔＪ瞧谕托枨?；質(zhì)量投訴處理在我國(guó)的現(xiàn)狀始終不令人滿意，該服務(wù)也可以被視為期望型需求；如果企業(yè)對(duì)質(zhì)量投訴處理得越圓滿，那么顧客就越滿意。

3. 魅力型需求

又稱興奮型需求。指不會(huì)被顧客過(guò)分期望的需求。

對(duì)于魅力型需求，隨著滿足顧客期望程度的增加，顧客滿意度也會(huì)急劇上升，但一旦得到滿足，即使表現(xiàn)并不完善，顧客表現(xiàn)出的滿意狀況則也是非常高的；反之，即使在期望不滿足時(shí)，顧客也不會(huì)因而表現(xiàn)出明顯的不滿意。

當(dāng)顧客對(duì)一些產(chǎn)品或服務(wù)沒(méi)有表達(dá)出明確的需求時(shí)，求企業(yè)提供給顧客一些完全出乎意料的產(chǎn)品屬性或服務(wù)行為，使顧客產(chǎn)生驚喜，顧客就會(huì)表現(xiàn)出非常滿意，從而提高顧客的忠誠(chéng)度；這類需求往往是代表顧客的潛在需求，企業(yè)的做法就是去尋找發(fā)掘這樣的需求，領(lǐng)先對(duì)手。

例如，一些著名品牌的企業(yè)能夠定時(shí)進(jìn)行產(chǎn)品的質(zhì)量跟蹤和回訪，發(fā)布最新的產(chǎn)品信息和促銷內(nèi)容，并為顧客提供最便捷的購(gòu)物方式。對(duì)此，即使另一些企業(yè)未提供這些服務(wù)，顧客也不會(huì)由此表現(xiàn)出不滿意。

4. 無(wú)差異型需求

不論提供與否，對(duì)用戶體驗(yàn)無(wú)影響；是質(zhì)量中既不好也不壞的方面，它們不會(huì)導(dǎo)致顧客滿意或不滿意。例如：航空公司為乘客提供的沒(méi)有實(shí)用價(jià)值的贈(zèng)品。

5. 反向型需求

又稱逆向型需求，指引起強(qiáng)烈不滿的質(zhì)量特性和導(dǎo)致低水平滿意的質(zhì)量特性，因?yàn)椴⒎撬械南M(fèi)者都有相似的喜好。

許多用戶根本都沒(méi)有此需求，提供后用戶滿意度反而會(huì)下降，而且提供的程度與用戶滿意程度成反比；例如：一些顧客喜歡高科技產(chǎn)品而另一些人更喜歡普通產(chǎn)品，過(guò)多的額外功能會(huì)引起顧客不滿。

前三種需求根據(jù)績(jī)效指標(biāo)分類就是基本因素、績(jī)效因素和激勵(lì)因素。在實(shí)際操作中，企業(yè)首先要全力以赴地滿足顧客的基本型需求，保證顧客提出的問(wèn)題得到認(rèn)真的解決，重視顧客認(rèn)為企業(yè)有義務(wù)做到的事情，盡量為顧客提供方便，以實(shí)現(xiàn)顧客最基本的需求滿足。

然后，企業(yè)應(yīng)盡力去滿足顧客的期望型需求，這是質(zhì)量的競(jìng)爭(zhēng)性因素；提供顧客喜愛的額外服務(wù)或產(chǎn)品功能，使其產(chǎn)品和服務(wù)優(yōu)于競(jìng)爭(zhēng)對(duì)手并有所不同，引導(dǎo)顧客加強(qiáng)對(duì)本企業(yè)的良好印象，使顧客達(dá)到滿意。

最后爭(zhēng)取實(shí)現(xiàn)顧客的興奮型需求，為企業(yè)建立最忠實(shí)的客戶群。

三、因子分析

因子分析是指研究從變量群中提取共性因子的統(tǒng)計(jì)技術(shù)。

最早由英國(guó)心理學(xué)家C.E.斯皮爾曼提出。他發(fā)現(xiàn)學(xué)生的各科成績(jī)之間存在著一定的相關(guān)性，一科成績(jī)好的學(xué)生，往往其他各科成績(jī)也比較好，從而推想是否存在某些潛在的共性因子（某些一般智力條件）[張樂(lè)飛1] 影響著學(xué)生的學(xué)習(xí)成績(jī)。

因子分析可在許多變量中找出隱藏的具有代表性的因子，將相同本質(zhì)的變量歸入一個(gè)因子，可減少變量的數(shù)目，還可檢驗(yàn)變量間關(guān)系的假設(shè)。

因子分析是社會(huì)研究的一種有力工具，但不能肯定地說(shuō)一項(xiàng)研究中含有幾個(gè)因子，當(dāng)研究中選擇的變量變化時(shí)，因子的數(shù)量也要變化；此外對(duì)每個(gè)因子實(shí)際含意的解釋也不是絕對(duì)的。在市場(chǎng)調(diào)研中，研究人員關(guān)心的是一些研究指標(biāo)的集成或者組合，這些概念通常是通過(guò)等級(jí)評(píng)分問(wèn)題來(lái)測(cè)量的，如利用李克特量表取得的變量。

每一個(gè)指標(biāo)的集合（或一組相關(guān)聯(lián)的指標(biāo)）就是一個(gè)因子，指標(biāo)概念等級(jí)得分就是因子得分。

因子分析方法的主要應(yīng)用有兩種：其一，減少變量的數(shù)量；其二，找出變量之間的結(jié)構(gòu)關(guān)系。

在產(chǎn)品開發(fā)中，因子分析能夠用于關(guān)鍵變量的優(yōu)先級(jí)排序和分組，比如：產(chǎn)品屬性之間的關(guān)系和產(chǎn)品屬性對(duì)產(chǎn)品偏好的影響。在實(shí)際應(yīng)用中，通過(guò)因子得分可以得出不同因子的重要性指標(biāo)，而管理者則可根據(jù)這些指標(biāo)的重要性來(lái)決定首先要解決的市場(chǎng)問(wèn)題或產(chǎn)品問(wèn)題。

四、聚類分析

聚類分析是一種探索性的分析，在分類的過(guò)程中，人們不必事先給出一個(gè)分類的標(biāo)準(zhǔn)，聚類分析能夠從樣本數(shù)據(jù)出發(fā)，自動(dòng)進(jìn)行分類。

聚類分析所使用方法的不同，常常會(huì)得到不同的結(jié)論。不同研究者對(duì)于同一組數(shù)據(jù)進(jìn)行聚類分析，所得到的聚類數(shù)未必一致。

從實(shí)際應(yīng)用的角度看，聚類分析是數(shù)據(jù)挖掘的主要任務(wù)之一；而且聚類能夠作為一個(gè)獨(dú)立的工具獲得數(shù)據(jù)的分布狀況，觀察每一簇?cái)?shù)據(jù)的特征，集中對(duì)特定的聚簇集合作進(jìn)一步地分析。聚類分析還可以作為其他算法（如分類和定性歸納算法）的預(yù)處理步驟。

聚類分析的一個(gè)重要用途就是針對(duì)目標(biāo)群體進(jìn)行多指標(biāo)的群體劃分，類似這種目標(biāo)群體的分類就是精細(xì)化經(jīng)營(yíng)，個(gè)性化運(yùn)營(yíng)的基礎(chǔ)和核心，只有進(jìn)行了正確的分類，才可以有效進(jìn)行個(gè)性化和精細(xì)化的運(yùn)營(yíng)，服務(wù)及產(chǎn)品支持等。

常見業(yè)務(wù)應(yīng)用場(chǎng)景如下：

1. 目標(biāo)用戶的群體分類

通過(guò)對(duì)特定運(yùn)營(yíng)目的和商業(yè)目的所挑選出的指標(biāo)變量進(jìn)行聚類分析，把目標(biāo)群體劃分成幾個(gè)具有明顯特征區(qū)別的細(xì)分群體，從而可以在運(yùn)營(yíng)活動(dòng)中為這些細(xì)分群體采取精細(xì)化，個(gè)性化的運(yùn)營(yíng)和服務(wù)，最終提升運(yùn)營(yíng)的效率和商業(yè)效果（如把付費(fèi)用戶按照幾個(gè)特定維度，如利潤(rùn)貢獻(xiàn)，用戶年齡，續(xù)費(fèi)次數(shù)等聚類分析后得到不同特征的群體）。

2. 不同產(chǎn)品的價(jià)值組合

企業(yè)可以按照不同的商業(yè)目的，并依照特定的指標(biāo)標(biāo)量來(lái)為眾多的產(chǎn)品種類進(jìn)行聚類分析，把企業(yè)的產(chǎn)品體系進(jìn)一步細(xì)分成具有不同價(jià)值，不同目的的多維度的產(chǎn)品組合，并且在此基礎(chǔ)分別制定和相應(yīng)的開發(fā)計(jì)劃，運(yùn)營(yíng)計(jì)劃和服務(wù)規(guī)劃（如哪些產(chǎn)品是明星類產(chǎn)品，那些產(chǎn)品是瘦狗類產(chǎn)品）。

3. 數(shù)據(jù)挖掘、分析、應(yīng)用

聚類分析是挖掘電子商務(wù)網(wǎng)站數(shù)據(jù)價(jià)值的重要方法之一，通過(guò)分組聚類出具有相似瀏覽行為的客戶，并分析客戶的共同特征，可以更好的幫助電子商務(wù)的用戶了解自己的客戶，向客戶提供更合適的服務(wù)（如某B2C電商平臺(tái)上，根據(jù)用戶的搜索、瀏覽、購(gòu)買記錄通過(guò)大數(shù)據(jù)分析，通過(guò)第三方平臺(tái)向客戶精準(zhǔn)推送產(chǎn)品）。

聚類分析是細(xì)分市場(chǎng)的有效工具，同時(shí)也可用于研究消費(fèi)者行為，尋找新的潛在市場(chǎng)、選擇實(shí)驗(yàn)的市場(chǎng)，并作為多元分析的預(yù)處理。

五、多維度尺度法

多維尺度法是一種將多維空間的研究對(duì)象（樣本或變量）簡(jiǎn)化到低維空間進(jìn)行定位、分析和歸類，同時(shí)又保留對(duì)象間原始關(guān)系的數(shù)據(jù)分析方法；其特點(diǎn)是將消費(fèi)者對(duì)產(chǎn)品的感覺偏好，以點(diǎn)的形式反映在多維空間上；而對(duì)不同產(chǎn)品的感覺或偏好的差異程度，則是通過(guò)點(diǎn)與點(diǎn)間的距離體現(xiàn)的，我們稱這種產(chǎn)品或項(xiàng)目的空間定位點(diǎn)圖為空間圖，空間軸代表著消費(fèi)者得以形成對(duì)產(chǎn)品的感覺或偏好的各種因素或變量。

在分析消費(fèi)者對(duì)產(chǎn)品功能的需求度時(shí)，首選選擇研究對(duì)象，如列出某個(gè)產(chǎn)品的所有產(chǎn)品功能；然后從目標(biāo)市場(chǎng)中抽取一個(gè)樣本人群（通常30-50人），讓他們對(duì)產(chǎn)品功能的需求度打分；最后采用多維度分析獲得一張代表了產(chǎn)品功能需求度關(guān)系的可視化圖。

可視化圖中的維度代表了消費(fèi)者對(duì)產(chǎn)品功能需求依賴的關(guān)鍵要素，為方便起見通常選擇2-3個(gè)維度。投保人購(gòu)買保險(xiǎn)產(chǎn)品時(shí)所需的第三方互聯(lián)網(wǎng)工具產(chǎn)品功能在生命周期和需求頻率上的多維度分析如圖所示；通過(guò)多維尺度分析幫產(chǎn)品經(jīng)理區(qū)分功能優(yōu)先級(jí)，做出產(chǎn)品決策。

投保人互聯(lián)網(wǎng)工具產(chǎn)品應(yīng)用多維度分析

多維尺度分析優(yōu)點(diǎn)是很明顯的。研究者可以利用得到的位置結(jié)構(gòu)圖將研究對(duì)象進(jìn)行分類，還可以對(duì)隱藏在數(shù)據(jù)背后的空間維度做出相應(yīng)的判斷和解釋。

多維度分析通過(guò)把所研究對(duì)象的數(shù)量關(guān)系轉(zhuǎn)化為直觀圖形，達(dá)到直觀展現(xiàn)研究對(duì)象的目的；多維尺度分析的缺點(diǎn)是分析結(jié)果不是唯一的，結(jié)果可以在空間中旋轉(zhuǎn)和平移，這為分析者對(duì)結(jié)果的解釋制造了難度。

六、聯(lián)合分析

聯(lián)合分析法，又稱結(jié)合分析法，是對(duì)結(jié)合效應(yīng)的評(píng)價(jià)，從而有效地解決了傳統(tǒng)調(diào)查方法中需要調(diào)研對(duì)象獨(dú)立評(píng)價(jià)屬性的問(wèn)題。

聯(lián)合分析有三種主要形式，包括權(quán)衡矩陣法、兩兩比較法和全輪廓法，其中又以全輪廓法最為常用；該方法提供給研究的參與者一系列的產(chǎn)品描述，參與者被要求瀏覽所有的描述，做出一系列的評(píng)價(jià)，對(duì)調(diào)研結(jié)果進(jìn)行數(shù)學(xué)方法分析后，就可以導(dǎo)出該類產(chǎn)品的各屬性的效用值。

對(duì)于市場(chǎng)研究領(lǐng)域，在聯(lián)合分析之前的所有方法幾乎都會(huì)使用重要性比率尺度來(lái)度量產(chǎn)品屬性的重要性水平，即都會(huì)直接向消費(fèi)者提問(wèn)一個(gè)產(chǎn)品中他們最看重的屬性。

這種方法有幾個(gè)嚴(yán)重的缺點(diǎn)：首先，調(diào)研的經(jīng)驗(yàn)表明，如果不限制條件的話，消費(fèi)者傾向于認(rèn)為每個(gè)屬性幾乎都是同等重要的；其次，消費(fèi)決策很大程度上依賴的是整體的判斷。當(dāng)消費(fèi)者被要求分離各種屬性并且對(duì)各屬性進(jìn)行量化評(píng)價(jià)并且描述某個(gè)屬性水平的高低將驅(qū)使其購(gòu)買一個(gè)產(chǎn)品而不是另一個(gè)產(chǎn)品時(shí)，即使是最老練的消費(fèi)者也將感到無(wú)所適從。

在聯(lián)合分析中產(chǎn)品被描述成為輪廓，每一個(gè)輪廓由能夠描述產(chǎn)品重要特征的屬性和賦予每一屬性的不同水平的組合構(gòu)成。

消費(fèi)者在實(shí)際購(gòu)買時(shí)并不是基于產(chǎn)品某一屬性而是綜合考慮產(chǎn)品各個(gè)屬性及屬性水平從而做出購(gòu)買決策的。因此消費(fèi)者對(duì)某一產(chǎn)品輪廓的評(píng)價(jià)可以分解成構(gòu)成這個(gè)輪廓多個(gè)屬性水平的評(píng)價(jià)以及不同屬性在決策時(shí)所占的權(quán)重。

在聯(lián)合分析中用分值也叫做效用來(lái)描述消費(fèi)者對(duì)某一屬性水平的偏好，聯(lián)合分析能夠較好地模擬消費(fèi)者購(gòu)買的實(shí)際過(guò)程，從而客觀、真實(shí)地測(cè)量消費(fèi)者對(duì)某一產(chǎn)品的偏好及產(chǎn)品不同屬性在購(gòu)買過(guò)程中的重要性。

以QQ會(huì)員等級(jí)為例，如圖向用戶展示屬性組合以及用戶需求等級(jí)。在本例中，有8個(gè)不同屬性，每種屬性對(duì)應(yīng)9種不同的屬性水平，由此構(gòu)成的屬性組合可以滿足不同的QQ用戶的需求。

聯(lián)合分析（騰訊QQ群產(chǎn)品會(huì)員等級(jí)劃分）

聯(lián)合分析是對(duì)人們購(gòu)買決策的一種現(xiàn)實(shí)模擬。因?yàn)樵趯?shí)際的抉擇過(guò)程中，由于價(jià)格等原因，人們要對(duì)產(chǎn)品的多個(gè)特征進(jìn)行綜合考慮，往往要在滿足一些要求的前提下，犧牲部分其他特性，是一種對(duì)特征的權(quán)衡與折衷。

通過(guò)聯(lián)合分析，我們可以模擬出人們的抉擇行為，可以預(yù)測(cè)不同類型的人群抉擇的結(jié)果；因此，通過(guò)聯(lián)合分析，我們可以了解消費(fèi)者對(duì)產(chǎn)品各特征的重視程度，并利用這些信息開發(fā)出具有競(jìng)爭(zhēng)力的產(chǎn)品。

七、李克特量表

李克特量表是屬評(píng)分加總式量表最常用的一種，屬同一構(gòu)念的這些項(xiàng)目是用加總方式來(lái)計(jì)分，單獨(dú)或個(gè)別項(xiàng)目是無(wú)意義的，它是由美國(guó)社會(huì)心理學(xué)家李克特于1932年在原有的總加量表基礎(chǔ)上改進(jìn)而成的。

李克特量是目前調(diào)查研究中使用最廣泛的量表，當(dāng)受測(cè)者回答此類問(wèn)卷的項(xiàng)目時(shí)，他們具體的指出自己對(duì)該項(xiàng)陳述的認(rèn)同程度；該量表由一組陳述組成，每一陳述有“非常同意”、“同意”、“不一定”、“不同意”、“非常不同意”五種回答，分別記為5、4、3、2、1，每個(gè)被調(diào)查者的態(tài)度總分就是他對(duì)各道題的回答所得分?jǐn)?shù)的加總，這一總分可說(shuō)明他的態(tài)度強(qiáng)弱或他在這一量表上的不同狀態(tài)。

李克特量表應(yīng)用步驟“

1）收集大量（50～100）與測(cè)量的概念相關(guān)的陳述語(yǔ)句。

2）有研究人員根據(jù)測(cè)量的概念將每個(gè)測(cè)量的項(xiàng)目劃分為“有利”或“不利”兩類，一般測(cè)量的項(xiàng)目中有利的或不利的項(xiàng)目都應(yīng)有一定的數(shù)量。

3）選擇部分受測(cè)者對(duì)全部項(xiàng)目進(jìn)行預(yù)先測(cè)試，要求受測(cè)者指出每個(gè)項(xiàng)目是有利的或不利的，并在下面的方向-強(qiáng)度描述語(yǔ)中進(jìn)行選擇，一般采用所謂“五點(diǎn)”量表：

非常同意
同意
無(wú)所謂（不確定）
不同意
非常不同意

4）對(duì)每個(gè)回答給一個(gè)分?jǐn)?shù)，如從非常同意到非常不同意的有利項(xiàng)目分別為5、4、3、2、1分，對(duì)不利項(xiàng)目的分?jǐn)?shù)就為1、2、3、4、5。

5）根據(jù)受測(cè)者的各個(gè)項(xiàng)目的分?jǐn)?shù)計(jì)算代數(shù)和，得到個(gè)人態(tài)度總得分，并依據(jù)總分多少將受測(cè)者劃分為高分組和低分組。

6）選出若干條在高分組和低分組之間有較大區(qū)分能力的項(xiàng)目，構(gòu)成一個(gè)李克特量表；如可以計(jì)算每個(gè)項(xiàng)目在高分組和低分組中的平均得分，選擇那些在高分組平均得分較高并且在低分組平均得分較低的項(xiàng)目。

我通常會(huì)在產(chǎn)品的早期創(chuàng)建一張范圍矩陣表，用來(lái)列出所有討論過(guò)功能和內(nèi)容。這樣一個(gè)范圍工具就出現(xiàn)了，它可以用來(lái)支持人們討論整體的優(yōu)先級(jí)別，以及每一個(gè)功能的工作量，然后決定哪些功能應(yīng)該納入范圍之內(nèi)，而哪些應(yīng)該排除在外。

在分析每一個(gè)功能的重要性的時(shí)候，把人物角色加入這個(gè)工具中，就能讓這些用戶始終停留在每一個(gè)人的腦海中，可以大大地幫助你在決定項(xiàng)目范圍時(shí)，把人物角色變成其中一個(gè)積極的部分，如圖所示。

李克特5點(diǎn)范圍矩陣量表（功能需求度轉(zhuǎn)化）

李克特量表的構(gòu)造比較簡(jiǎn)單而且易于操作，因此在市場(chǎng)研究實(shí)務(wù)中應(yīng)用非常廣泛。

在實(shí)地調(diào)查時(shí)，研究者通常給受測(cè)者一個(gè)“回答范圍”卡，請(qǐng)他從中挑選一個(gè)答案；需要指出的是，目前在商業(yè)調(diào)查中很少按照上面給出的步驟來(lái)制作李克特量表，通常由產(chǎn)品經(jīng)理和研究人員共同研究確定。

文章來(lái)源：人人都是產(chǎn)品經(jīng)理作者：長(zhǎng)乘

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、包裝設(shè)計(jì) 、圖標(biāo)定制、用戶體驗(yàn) 、交互設(shè)計(jì)、網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

評(píng)論(0) 瀏覽(2715)

302021-4

登錄頁(yè)需要注意的設(shè)計(jì)細(xì)節(jié)和邏輯

資深UI設(shè)計(jì)者

確保用戶成功且無(wú)壓力的登錄體驗(yàn)需要我們不斷地思考。

大家好，我是Clippp。今天為大家分享的文章是「登錄頁(yè)」設(shè)計(jì)。幾乎所有的登錄頁(yè)看起來(lái)都大同小異，通過(guò)輸入賬號(hào)和密碼就能夠進(jìn)入，但仔細(xì)思考會(huì)發(fā)現(xiàn)，每個(gè)登錄頁(yè)都有差異化的點(diǎn)，而這些點(diǎn)正是產(chǎn)品無(wú)一物二的地方。

1、什么是登錄體驗(yàn)？

登錄體驗(yàn)是指用戶通過(guò)入口進(jìn)入應(yīng)用、網(wǎng)站或服務(wù)，建立自己的身份。

登錄流程通常由主登錄流程和恢復(fù)流程組成，其中主登錄流程包括填寫用戶名、手機(jī)號(hào)、密碼等，恢復(fù)流程包括忘記密碼、重置密碼、其他登錄方式等。登錄體驗(yàn)的目標(biāo)是確保用戶成功登錄帳戶。

2、設(shè)計(jì)熟悉的登錄流程

使用簡(jiǎn)潔、常用的頁(yè)面布局和文字，有助于用戶輕松執(zhí)行熟悉的操作。保持設(shè)計(jì)簡(jiǎn)單也有助于將體驗(yàn)輕松擴(kuò)展到不同設(shè)備和屏幕尺寸。

▲ Pinterest采用了居中對(duì)齊的重疊式登錄頁(yè)設(shè)計(jì)，用醒目的紅色按鈕來(lái)突出登錄動(dòng)作，還支持Google和Facebook作為其他登錄方式。

登錄頁(yè)是強(qiáng)調(diào)品牌的首要接觸點(diǎn)。登錄操作最好于中心位置，頁(yè)面上的其他元素應(yīng)謹(jǐn)慎增加，避免注意力從登錄任務(wù)上移開。

設(shè)計(jì)思考：

用戶花在登錄頁(yè)上的時(shí)間越少越好，要讓用戶盡快發(fā)現(xiàn)產(chǎn)品中的優(yōu)點(diǎn)和價(jià)值！

3、專注設(shè)計(jì)

登錄(或恢復(fù))操作應(yīng)引起用戶的全部注意力：

最好將登錄頁(yè)表單放在頁(yè)面中心位置；
不需要復(fù)雜或冗長(zhǎng)的文字解釋，例如可以利用簡(jiǎn)單的“輸入密碼”來(lái)提示用戶完成操作；
要求用戶一次只做一件重要的事情，例如將找回密碼這種復(fù)雜的流程分解為多個(gè)步驟進(jìn)行。

▲ Facebook保留用戶的登錄信息，并將恢復(fù)流程分為幾個(gè)邏輯步驟。

▲ 亞馬遜將輔助恢復(fù)選項(xiàng)放在“更多幫助”中，這有助于使主要操作保持重點(diǎn)。

設(shè)計(jì)思考：

使用卡片式布局；

將操作分為主要?jiǎng)幼骱痛我獎(jiǎng)幼鳎?

使用尺寸大而突出的登錄按鈕；

盡量減少次要操作的次數(shù)，以避免使頁(yè)面出現(xiàn)混亂。

4、給出明確反饋并在操作失敗時(shí)提供幫助

在登錄過(guò)程的每個(gè)階段，用戶都可能會(huì)失敗。輸入錯(cuò)誤的郵箱，忘記密碼或網(wǎng)絡(luò)問(wèn)題等，所有這些問(wèn)題都可能導(dǎo)致登錄意圖急劇下降。

因此清晰及時(shí)的反饋設(shè)計(jì)對(duì)用戶來(lái)說(shuō)很重要。

▲ 信息輸入錯(cuò)誤時(shí)會(huì)提示錯(cuò)誤具體的原因。

▲ 密碼輸入有誤時(shí)，F(xiàn)acebook會(huì)在下方增加“使用Google登錄”選項(xiàng)。

設(shè)計(jì)思考：

鼓勵(lì)用戶嘗試合適的替代方案；

登錄失敗后，將用戶導(dǎo)航到單獨(dú)頁(yè)面并組織其他登錄方法；

展示最有效的登錄方法，并在發(fā)生問(wèn)題時(shí)及時(shí)對(duì)用戶做出反饋。

5、多種登錄方式提供靈活性

除了輸入賬號(hào)密碼這種登錄方式，最好提供一種或兩種附加的登錄方式以便用戶選擇，同時(shí)防止忘記密碼造成無(wú)法登錄的情況。

添加過(guò)多的登錄方式會(huì)使頁(yè)面混亂，降低登錄意圖，附加選項(xiàng)應(yīng)該限制為2或3種方式。

▲ Medium登錄表單的設(shè)計(jì)盡管很清晰，但過(guò)多的登錄方式會(huì)阻礙用戶的選擇和判斷。

▲ Airbnb登錄頁(yè)能看到大量的輔助登錄方式，過(guò)多的選項(xiàng)可能會(huì)導(dǎo)致用戶的認(rèn)知負(fù)荷。

設(shè)計(jì)思考：

當(dāng)前無(wú)密碼登錄正在迅速普及。在很多移動(dòng)App中，基于手機(jī)號(hào)的身份驗(yàn)證已成為常態(tài)，指紋和FaceID也出現(xiàn)在許多地方，從而實(shí)現(xiàn)了無(wú)縫和安全的身份驗(yàn)證流程。

找到產(chǎn)品最適合的登錄方式，并將其作為主要選擇能有效提升效率！

6、登錄意味著信任

登錄涉及用戶輸入敏感的個(gè)人數(shù)據(jù)，例如手機(jī)號(hào)、郵箱、密碼等，用戶愿意輸入信息意味著他們信任這個(gè)平臺(tái)或產(chǎn)品。

雖然減少與用戶的摩擦很重要，但有時(shí)網(wǎng)站也會(huì)提供額外的身份驗(yàn)證來(lái)確保用戶信息的安全。

▲ B站利用文字驗(yàn)證方式來(lái)增強(qiáng)用戶帳戶的安全性。

設(shè)計(jì)思考：

登錄表單應(yīng)該代表品牌的形象，任何視覺上的變化都必須慢慢進(jìn)行，因?yàn)橥耆淖円曈X設(shè)計(jì)可能會(huì)導(dǎo)致缺乏信任。

7、確定用戶類型

登錄意圖是一種體驗(yàn)，在這種體驗(yàn)中用戶角色和類型可以無(wú)所不包。

可以嘗試以下方式來(lái)定義用戶的范圍以便更清楚的了解用戶：

登錄渠道：與PM合作找出在登錄流程中用戶交互和退出的關(guān)鍵階段。

登錄入口：用戶是通過(guò)郵箱、搜索引擎還是通過(guò)應(yīng)用跳轉(zhuǎn)到登錄頁(yè)？

常用設(shè)備：手機(jī)、瀏覽器等設(shè)備可以為用戶帶來(lái)個(gè)性化的體驗(yàn)。

用戶群組：利用年齡或地理位置等方式也能進(jìn)行分離用戶群主的劃分。

8、登錄頁(yè)設(shè)計(jì)實(shí)例分析

通過(guò)分析具有代表性的登錄頁(yè)設(shè)計(jì)來(lái)展示登陸頁(yè)的多種設(shè)計(jì)表達(dá)。

▲ Google采用多階段的登錄方式，郵箱和密碼分兩步進(jìn)行輸入。這種格式對(duì)谷歌來(lái)說(shuō)有一些安全優(yōu)勢(shì)，也可以在下一步為用戶提供個(gè)性化的選擇。

▲ Uber的登錄頁(yè)采用簡(jiǎn)單的樣式，注重使用體驗(yàn)，引導(dǎo)用戶輸入手機(jī)號(hào)來(lái)進(jìn)行下一步。

▲ Facebook利用右對(duì)齊的登錄表單很好地集中注意力，左邊的空間被用來(lái)展示品牌的信息和形象。

▲ 亞馬遜的登錄頁(yè)從視覺設(shè)計(jì)上看有些陳舊，但卻是管理用戶注意力的一個(gè)很好的例子。黃色的“繼續(xù)”按鈕和簡(jiǎn)潔的頁(yè)面使登錄看起來(lái)簡(jiǎn)單而快速。

▲ Figma的登錄頁(yè)位于畫面中心，頂部首先展示的是以Google登錄，這可能是Figma首選和推廣的登錄形式，頁(yè)面整體的設(shè)計(jì)利用線框組成，非常簡(jiǎn)潔高效。

文章來(lái)源：展開作者：Clippp

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、包裝設(shè)計(jì) 、圖標(biāo)定制、用戶體驗(yàn) 、交互設(shè)計(jì)、網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

評(píng)論(0) 瀏覽(1764)

292021-4

Web產(chǎn)品的適配設(shè)計(jì)選型

ui設(shè)計(jì)分享達(dá)人

開篇

寬度單位我是用百分比還是px？還是rem？區(qū)別是什么？
什么是屏幕尺寸、屏幕分辨率、屏幕像素密度、設(shè)備像素、css像素？瀏覽器窗口大小和設(shè)備大小和分辨率大小區(qū)是什么區(qū)別？
什么是響應(yīng)式網(wǎng)站，自適應(yīng)又是什么？?jī)烧哂泻螀^(qū)別和聯(lián)系？
百分比寬度布局和流式布局和前者的關(guān)系是什么？
既然響應(yīng)式這么流行，為何淘寶、京東等沒(méi)有去做，而是單獨(dú)開發(fā)了一個(gè)移動(dòng)端版？這里面有那些坑需要避開？

歷史長(zhǎng)廊

在早期，硬件設(shè)備落后，網(wǎng)頁(yè)使用的是絕對(duì)靜態(tài)布局為主，絕對(duì)固定寬度的布局被稱為是靜態(tài)布局（StaticLayout），也有叫固定布局（Fixed Layout）。

后隨時(shí)代變遷，技術(shù)發(fā)展。因?yàn)g覽器的增多，開發(fā)者們忙于兼容各種瀏覽器。在這個(gè)期間，實(shí)際已經(jīng)有了針對(duì)各設(shè)備適配的解決方案，只是未成為主流，這種新布局方式叫自適應(yīng)布局（Adaptive Web Design，簡(jiǎn)稱AWD）。

在當(dāng)時(shí)，大多指的就是寬度自適應(yīng)布局。在這種新思想下，又出現(xiàn)了兩派的具體解決方案：百分比寬度布局和流體式布局（Fluid Layout）。

在當(dāng)時(shí)，大家都還沒(méi)有響應(yīng)式布局的概念，但此時(shí)出現(xiàn)了一個(gè)新的詞--漸進(jìn)增強(qiáng)。漸進(jìn)增強(qiáng)出現(xiàn)后，另一個(gè)詞優(yōu)雅降級(jí)也隨之出現(xiàn)了。這里只是舉個(gè)典型的例子：gmail和qqmail。這兩個(gè)都是百分比寬度布局，都屬于自適應(yīng)布局，但有區(qū)別。

qqmail就是css hack的完美體現(xiàn)，你用任何一個(gè)瀏覽器，幾乎可以看到同一個(gè)樣子的郵箱，為的是用戶體驗(yàn)統(tǒng)一。gmail則使用了漸進(jìn)增強(qiáng)，你的瀏覽器越新越強(qiáng)，你看到的效果就越好，為的是用戶體驗(yàn)增強(qiáng)。再后來(lái)，Google發(fā)布了Android，移動(dòng)互聯(lián)網(wǎng)爆發(fā)，html5標(biāo)準(zhǔn)發(fā)布。

互聯(lián)網(wǎng)大戰(zhàn)從PC打到了手機(jī)。手機(jī)雖然屏幕變小了，但是卻提供了更豐富的功能，用戶要求不斷提高，網(wǎng)站更加看重的是用戶體驗(yàn)了，所以，谷歌式的漸進(jìn)增強(qiáng)被廣泛認(rèn)可，結(jié)合自適應(yīng)的思想，出現(xiàn)了響應(yīng)式布局 (Responsive Web Design)的概念——2010年由Ethan Marcotte提出。

描述響應(yīng)式界面最著名的一句話就是“Content is like water”——無(wú)論用戶正在使用筆記本還是iPad，我們的頁(yè)面都應(yīng)該能夠自動(dòng)切換分辨率、圖片尺寸及相關(guān)腳本功能等，以適應(yīng)不同設(shè)備。

現(xiàn)如今，為何需要考慮多設(shè)備的兼顧呢，依然是因?yàn)闀r(shí)代發(fā)展與生活方式的變遷：

即便是PC或Mac用戶，有查顯示只有一半的人會(huì)將瀏覽器全屏顯示，而剩下的一般人使用多大的瀏覽器，很難預(yù)知；
臺(tái)式機(jī)、投影、電視、筆記本、手機(jī)、平板、手表、VR……智能設(shè)備正在不斷增加，“主流設(shè)備”的概念正在消失；
屏幕分辨率正飛速發(fā)展，同一張圖片在不同設(shè)備上看起來(lái)，大小可能天差地別。

結(jié)合自身產(chǎn)品用戶訪問(wèn)瀏覽器分辨率
鼠標(biāo)、觸屏、筆、攝像頭手勢(shì)……不可預(yù)期的操控方式正在不斷出現(xiàn)。

因此我們需要在了解基本布局方式的特征下，選擇適合自身產(chǎn)品的布局實(shí)現(xiàn)方式。

布局方式對(duì)比

靜態(tài)式、自適應(yīng)、流體式、響應(yīng)式布局，A+R混合布局的特點(diǎn)對(duì)比如下

靜態(tài)式布局：

窗口縮小后內(nèi)容被遮擋時(shí)，拖動(dòng)滾動(dòng)條顯示布局。不管在哪種設(shè)備，哪種瀏覽器上瀏覽都是一個(gè)樣。移動(dòng)設(shè)備上則顯示太小或不全。

自適應(yīng)布局：

用自適應(yīng)技術(shù)(Adaptive)我們可以開發(fā)和提供不同的布局來(lái)為類似純觸屏或者混合觸屏設(shè)備這樣的一類具體場(chǎng)景提供最好的體驗(yàn)。

分別為不同的屏幕分辨率設(shè)備設(shè)計(jì)不同的樣式布局，相當(dāng)于多個(gè)靜態(tài)布局組成的一個(gè)系列合集，每個(gè)靜態(tài)布局對(duì)應(yīng)一個(gè)屏幕分辨率范圍，頁(yè)面通過(guò)百分比自動(dòng)適配設(shè)備屏幕分辨率和可視窗口大小，當(dāng)可視窗口改變時(shí)，不會(huì)出現(xiàn)橫向滾動(dòng)條，UI，圖片，文字會(huì)自動(dòng)縮放，元素內(nèi)容、布局、交互方式基本不變。

彈性布局：

以百分比作為頁(yè)面的基本單位，可以適應(yīng)一定范圍內(nèi)所有尺寸的設(shè)備屏幕及瀏覽器寬度，并能完美利用有效空間展現(xiàn)最佳效果。

流體式布局：

屬于自適應(yīng)的一個(gè)子集，也是通過(guò)百分比自動(dòng)適配設(shè)備屏幕分辨率和可視窗口大小，不同于百分比自適應(yīng)的是隨著窗口大小的改變，頁(yè)面的布局會(huì)發(fā)生小的變化，可以進(jìn)行適配調(diào)整，這個(gè)正好與自適應(yīng)相補(bǔ)。

響應(yīng)式布局：

如果從廣義上講，響應(yīng)式布局實(shí)際上就是更好、更機(jī)智、更靈活的去實(shí)現(xiàn)自適應(yīng)，他們都算是一種彈性布局。再通俗點(diǎn)講響應(yīng)式重在于「響應(yīng)」它會(huì)隨著設(shè)備屬性（如寬高）的變化。

頁(yè)面的設(shè)計(jì)和開發(fā)應(yīng)當(dāng)根據(jù)用戶行為以及設(shè)備環(huán)境（系統(tǒng)平臺(tái)、屏幕尺寸、屏幕定向等）進(jìn)行相應(yīng)的響應(yīng)和調(diào)整。具體的實(shí)踐方式由多方面組成，包括彈性網(wǎng)格和刪格、布局、圖片、css media query的使用等。

狹義上講，響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)指的是一個(gè)網(wǎng)站能夠兼容多個(gè)終端——而不是為每個(gè)終端做一個(gè)特定的版本。

A+R混合模型布局

R和A上的區(qū)別

當(dāng)響應(yīng)式設(shè)計(jì)在基于預(yù)定義斷點(diǎn)之上用CSS或者JS調(diào)整布局和內(nèi)容。調(diào)整方法提供基于用戶代理和設(shè)備類型的預(yù)結(jié)構(gòu)化模版。

他們之間主要的區(qū)別是DOM結(jié)構(gòu)，當(dāng)采用響應(yīng)式思維開發(fā)時(shí)，HTML代碼在各種情況下都會(huì)一樣（除非你用JS移除某些DOM節(jié)點(diǎn)），而在自適應(yīng)開發(fā)中我們可能會(huì)有不一樣的代碼結(jié)構(gòu)和體驗(yàn)。

R采用流體＋斷點(diǎn)，在斷點(diǎn)之間，頁(yè)面依然會(huì)隨窗口大小自動(dòng)縮放（通過(guò)fluid grid），直到遇到斷點(diǎn)改變界面樣式布局甚至內(nèi)容。R一般來(lái)說(shuō)需要在網(wǎng)頁(yè)設(shè)計(jì)初期就開始（通常采用mobile first策略），所以舊的網(wǎng)站要做RWD很可能要完全重建。

A只在針對(duì)幾種分辨率（如320，480，760，960，1200，1600px）進(jìn)行優(yōu)化，在斷點(diǎn)之間的自動(dòng)過(guò)渡比較少。而A則采用保留現(xiàn)有桌面網(wǎng)站（desktop version）而對(duì)于更小的分辨率做針對(duì)性的優(yōu)化（適應(yīng)），減小重構(gòu)的成本。

兩種設(shè)計(jì)思維都是有效的，需衡量在項(xiàng)目中有多少組件、復(fù)雜性如何以及是否存在一種體驗(yàn)是適合所有用戶的。開發(fā)web應(yīng)用時(shí)經(jīng)常會(huì)用到響應(yīng)式設(shè)計(jì)，例如通過(guò)自適應(yīng)開發(fā)來(lái)構(gòu)建定制化體驗(yàn)。

兩種方法各有利弊，但是如果同時(shí)使用它們到底會(huì)得到什么呢？A+R模型結(jié)合了基于單個(gè)主要臨界點(diǎn)的自適應(yīng)和響應(yīng)式方法。

混合式布局就是為不同終端設(shè)備的屏幕分辨率定義布局（適配各種尺寸的PC、手機(jī)、穿戴設(shè)備等等），在每個(gè)布局中，頁(yè)面元素隨著窗口調(diào)整而自動(dòng)適配，混合了百分比、像素為基本單位的組合方式。可以把混合式布局看作是彈性布局、自適應(yīng)布局的融合。

自適應(yīng)布局、彈性布局、混合布局都是響應(yīng)式布局方式的一種。其中自適應(yīng)布局的實(shí)現(xiàn)成本最低，但拓展性比較差；而彈性布局與混合布局效果都是比較理想的響應(yīng)式布局實(shí)現(xiàn)方式。

很多時(shí)候，單一方式的布局響應(yīng)無(wú)法滿足理想效果，需要結(jié)合多種組合方式，但原則上盡可能是保持簡(jiǎn)單輕巧，而且同一斷點(diǎn)內(nèi)（發(fā)生布局改變的臨界點(diǎn)稱之為斷點(diǎn)，后面內(nèi)容會(huì)講到）保持統(tǒng)一邏輯。

否則頁(yè)面實(shí)現(xiàn)太過(guò)復(fù)雜也會(huì)影響整體體驗(yàn)和頁(yè)面性能。一般通欄、等分結(jié)構(gòu)的布局適合采用彈性布局方式，非等分的多欄結(jié)構(gòu)布局則需要采用混合布局的實(shí)現(xiàn)方式。

選型

如何考慮實(shí)踐過(guò)程中的判斷呢。一是看應(yīng)用場(chǎng)景，二是看如何設(shè)計(jì)“響應(yīng)式”方案。簡(jiǎn)單、輕量的頁(yè)面直接用media query實(shí)現(xiàn)響應(yīng)性就很好。比如blog、小型企業(yè)站之類?，F(xiàn)在的CSS框架基本都具備響應(yīng)性。

但請(qǐng)注意響應(yīng)式不僅僅是響應(yīng)式布局。對(duì)于大型站簡(jiǎn)單用media query是遠(yuǎn)遠(yuǎn)不夠的。于是在同一個(gè)controller層上，識(shí)別UA，渲染不同版本的模板，組合相應(yīng)的靜態(tài)資源。這也算是響應(yīng)式。開發(fā)及維護(hù)成本明顯提高。

當(dāng)各個(gè)版本間的差異很大時(shí)，維護(hù)成本很可能會(huì)大到無(wú)法接受。即便分開做，架構(gòu)上也要調(diào)整，后端服務(wù)化，應(yīng)用層app化。

根據(jù)不同公司的技術(shù)特點(diǎn)，調(diào)整的成本也難講是否可行。對(duì)于大型站，分開做更清晰，同時(shí)用響應(yīng)式組件解決復(fù)用、功能同步的問(wèn)題。總之，根據(jù)場(chǎng)景響應(yīng)式可以從各種層面，各種粒度上做。這是現(xiàn)代web開發(fā)的特點(diǎn)。

建議開發(fā)一套響應(yīng)式電腦網(wǎng)站（過(guò)渡到平板端，不過(guò)渡到手機(jī)端）和開發(fā)一套響應(yīng)式手機(jī)端網(wǎng)站（過(guò)渡到平板端以下的尺寸，不過(guò)渡到平板端）響應(yīng)式布局有可能造成冗余的代碼較多，對(duì)研發(fā)的要求也更高，比如如何更好地讓圖片，適配，UI動(dòng)畫自適應(yīng)各種布局。

大站還是要考慮數(shù)據(jù)計(jì)算和承載的問(wèn)題，會(huì)對(duì)桌面和移動(dòng)端輸出不同數(shù)據(jù)，減輕壓力。

實(shí)踐與技巧

首先，我們需要了解幾種分辨率的差別。

ps：原生應(yīng)用可查詢橫縱兩個(gè)方向的像素密度，通常瀏覽器可查詢1個(gè)系統(tǒng)像素對(duì)應(yīng)多少物理像素。而設(shè)計(jì)角度通常需要參考的是所獲取的系統(tǒng)分辨率

以一個(gè)SaaS類后臺(tái)產(chǎn)品為例，對(duì)于基本流量來(lái)自Web端網(wǎng)頁(yè)的產(chǎn)品而言，需要了解當(dāng)下的瀏覽器分辨率現(xiàn)狀 Web端不同屏幕分辨率占比情況，數(shù)據(jù)來(lái)源百度統(tǒng)計(jì)，如圖所示：

如上所述，選擇適配方式時(shí)，設(shè)計(jì)目標(biāo)為：區(qū)分web與pad端可共享的設(shè)計(jì)布局大于手機(jī)端，且產(chǎn)品規(guī)劃上web端為主流量來(lái)源，pad端屬于短期兼顧?？紤]技術(shù)維護(hù)成本與開發(fā)成本的平衡，于是判斷需要選擇A+R模式來(lái)完成產(chǎn)品的跨端設(shè)計(jì)。

自適應(yīng)（A）方法能讓我們?cè)诓煌脑O(shè)備上有不同的體驗(yàn)、內(nèi)容甚至是功能。如將960px作為主要的自適應(yīng)臨界點(diǎn)，根據(jù)全局統(tǒng)計(jì)信息定義，我們會(huì)得到一些相似處：

左側(cè)的可視區(qū)代表整個(gè)屏幕小于960px時(shí)的具體布局和內(nèi)容
右側(cè)的可視區(qū)代表整個(gè)屏幕大于等于960px時(shí)的另一種布局

在使用響應(yīng)式（R）技術(shù)時(shí)，我們可以利用主要臨界點(diǎn)創(chuàng)建兩個(gè)互不相同的體驗(yàn)情景，每種體驗(yàn)里，我們都可以在可用空間內(nèi)定義二級(jí)臨界點(diǎn)去調(diào)整布局。

通過(guò)結(jié)合自適應(yīng)和響應(yīng)的方法，我們得到A+R模型。利用自適應(yīng)技術(shù)，我們將致力于體驗(yàn)和功能，作出兩種不同的情景設(shè)計(jì)。使用響應(yīng)式組件，我們可以處理上下文內(nèi)的UI組件和布局。

這種設(shè)計(jì)方法要求設(shè)計(jì)師真正了解他們想要提供的體驗(yàn)，以便于定義要遵循的模型。此模型非常適合那些在較少功能或結(jié)構(gòu)完全不同的小型移動(dòng)設(shè)備上運(yùn)行的大型APP。就像你看到的，你的產(chǎn)品將具有很強(qiáng)的靈活性，但同時(shí)也很復(fù)雜。

因?yàn)槟阋幚聿煌拇a庫(kù)和環(huán)境（非強(qiáng)制性）,Twitter、Facebook和Github將此模式應(yīng)用在他們的移動(dòng)網(wǎng)站上。如果你在移動(dòng)設(shè)備上瀏覽這些網(wǎng)站，則可以根據(jù)移動(dòng)用戶的期望來(lái)檢驗(yàn)它們是如何改變的用戶體驗(yàn)的。

其他輔助手段

刪格

柵格系統(tǒng)可以幫助我們?cè)O(shè)計(jì)，但卻不能保證我們的設(shè)計(jì)。它有多種可能的用途，并且每個(gè)設(shè)計(jì)師都可以尋找適合其個(gè)人風(fēng)格的解決方案。對(duì)于簡(jiǎn)化復(fù)雜的響應(yīng)式布局規(guī)則而言，這是一項(xiàng)十分有效的輔助手段。

1. 列和槽（Columns and Gutters）列（Column）用于對(duì)齊內(nèi)容。其中的槽（Gutter）是指相鄰列之間的空間，把控頁(yè)面留白,有助于分隔內(nèi)容。

2. 頁(yè)面邊距（Side Margins）頁(yè)邊距是指內(nèi)容和屏幕邊緣之間的空間。將邊距寬度定義為固定值，這些值決定了每個(gè)屏幕尺寸的最小呼吸空間。

3，用于組成柵格的列數(shù)稱為列結(jié)構(gòu)。8、12、16和20是響應(yīng)式布局中最常見的幾種列結(jié)構(gòu)。而這取決于我們對(duì)產(chǎn)品的設(shè)計(jì)要求。12列結(jié)構(gòu)是相對(duì)靈活的。它可以進(jìn)一步細(xì)分，將內(nèi)容排列在4-4-4或3-3-3-3大小的文本框中，也有部分設(shè)計(jì)系統(tǒng)采用來(lái)24列的形式，如Ant-D

4，斷點(diǎn)是指屏幕尺寸的特定范圍，列結(jié)構(gòu)、列寬、槽寬和邊距都取決于斷點(diǎn)。在這個(gè)范圍內(nèi)，布局會(huì)根據(jù)可用的屏幕尺寸重新調(diào)整，以獲得最佳的布局視圖。

如果較小的屏幕有足夠的可用空間容納內(nèi)容，則列將按比例縮小。如果一列的內(nèi)容無(wú)法在較小屏幕上顯示，該列將垂直放置圖文內(nèi)容。

5，網(wǎng)格規(guī)則，列跟槽的寬度是以網(wǎng)格作為基本單位來(lái)做增減，所以應(yīng)該先定義好柵格的原子單位，“網(wǎng)紅款”8點(diǎn)網(wǎng)格指的是設(shè)計(jì)頁(yè)面時(shí)，也應(yīng)該遵循8點(diǎn)規(guī)律。值得注意的是，列跟槽的值盡量取8的倍數(shù)，但不是非得是8的倍數(shù)。

產(chǎn)品中各類元素應(yīng)該遵循這個(gè)倍數(shù)原則（圖標(biāo)、組件大小等），不同的設(shè)計(jì)系統(tǒng)根據(jù)自身需求，設(shè)定這個(gè)規(guī)則。例如在Material Design中使用的是2X網(wǎng)格。

6.流體柵格與混合刪格

流體柵格有不同寬度的列，固定的槽和固定的邊距。流體柵格有靈活的內(nèi)容寬度，根據(jù)屏幕大小變化在流體柵格中，列可以增長(zhǎng)或收縮以適應(yīng)可用空間。

混合柵格既有不同的寬度，也有固定寬度。在現(xiàn)代布局中，一些元素超出了網(wǎng)格邊緣，與屏幕邊緣對(duì)齊。頁(yè)眉、頁(yè)腳、出血都是一些常見的例子。

如果內(nèi)容寬度大于可用的屏幕尺寸，那么一個(gè)固定柵格就會(huì)轉(zhuǎn)變成一個(gè)適應(yīng)屏幕可用空間的流動(dòng)?xùn)鸥?，以充分適應(yīng)內(nèi)容。

結(jié)語(yǔ)

設(shè)計(jì)需在技術(shù)方案前介入，根據(jù)你的產(chǎn)品特點(diǎn)，進(jìn)行設(shè)計(jì)方案評(píng)估，可借助的手段有刪格，網(wǎng)格規(guī)則等，設(shè)計(jì)斷點(diǎn)規(guī)則時(shí)，需關(guān)注設(shè)備的常見系統(tǒng)分辨率。

移動(dòng)和桌面設(shè)計(jì)的差別遠(yuǎn)不止是布局問(wèn)題。只要有足夠的編程量，這些差別是可以通過(guò)響應(yīng)式設(shè)計(jì)來(lái)解決的。事實(shí)上，你可以認(rèn)為如果一種設(shè)計(jì)不能兼顧兩種平臺(tái)的主要差別，就不能算是合格的響應(yīng)式設(shè)計(jì)。

但是，如果確實(shí)想要處理好平臺(tái)間的所有差異，我們就回到了原點(diǎn)：進(jìn)行兩種不同的設(shè)計(jì)或者使用A+R的模型，在尋求合適的過(guò)程中，關(guān)注技術(shù)的革新。

A與B不是硬幣的正反面，它們?yōu)榱私鉀Q同一個(gè)問(wèn)題而生，是同一種思想的延伸。

文章來(lái)源：站酷作者：酷家樂(lè)

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、包裝設(shè)計(jì) 、圖標(biāo)定制、用戶體驗(yàn) 、交互設(shè)計(jì)、網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

評(píng)論(0) 瀏覽(1702)

292021-4

超詳細(xì)教程教你們?nèi)绾螌ode項(xiàng)目部署在云服務(wù)器上

前端達(dá)人

引言

因?yàn)樽约簩W(xué)習(xí)了前端大部分知識(shí)，然后想自己做網(wǎng)站，于是學(xué)習(xí)了node.js，可不知道如何將項(xiàng)目發(fā)布到網(wǎng)上，所以花了很多天的時(shí)間，搜集了很多的資料，才將項(xiàng)目部署到服務(wù)器上，這里給大家分享一下我的部署過(guò)程，以免大家走彎路。

公眾號(hào)：前端印象

不定時(shí)有送書活動(dòng)，記得關(guān)注~

關(guān)注后回復(fù)對(duì)應(yīng)文字領(lǐng)?。骸久嬖囶}】、【前端必看電子書】、【數(shù)據(jù)結(jié)構(gòu)與算法完整代碼】、【前端技術(shù)交流群】

正文

一、購(gòu)買服務(wù)器

這里我們就用騰訊云的服務(wù)器吧，因?yàn)閮?yōu)惠感覺還是比較大的，性價(jià)比也高。

先進(jìn)入學(xué)生頁(yè)面，購(gòu)買優(yōu)惠的服務(wù)器套餐，每個(gè)月才10元，學(xué)生服務(wù)器優(yōu)惠套餐鏈接。也可以參與限時(shí)的秒殺活動(dòng)，一年才99，用來(lái)學(xué)習(xí)再合適不過(guò)了，服務(wù)器顯示秒殺鏈接。如果需求大的話，也可以直接買那些高配的服務(wù)器其他服務(wù)器鏈接
在這里插入圖片描述
購(gòu)買中，所有都默認(rèn)選項(xiàng)。

購(gòu)買完成后，進(jìn)入控制臺(tái)
在這里插入圖片描述

然后重置一下密碼，一定要記住

我們鼠標(biāo)移到這看一下服務(wù)器的系統(tǒng)是不是CentOS，因?yàn)槲覀円玫竭@個(gè)版本

如果不是的話，就可以點(diǎn)擊重裝系統(tǒng)，自己選擇一下CentOS這個(gè)系統(tǒng)即可，并且重裝時(shí)設(shè)置的密碼也一定要記住哦。
在這里插入圖片描述

這樣一臺(tái)服務(wù)器也就購(gòu)買成功了。

二、登錄服務(wù)器

網(wǎng)上下載一個(gè)xshell5，用于我們登錄我們的服務(wù)器
Xshell5下載地址
下載好以后，打開Xshell5，點(diǎn)擊新建
去復(fù)制一下我們的公網(wǎng)ip
然后按以下提示輸入

在這里插入圖片描述
以下配置完成后直接點(diǎn)確定

三、給服務(wù)器安裝寶塔面板

在下圖輸入框中，輸入以下代碼，并按回車

yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh 


    
        1

在這里插入圖片描述
遇到該命令，直接輸入y 然后回車，就他自動(dòng)安裝吧，時(shí)間就點(diǎn)長(zhǎng)，耐心等待一下

安裝好后，會(huì)出現(xiàn)這個(gè)圖示界面

Bt-Panel：是我們即將訪問(wèn)的網(wǎng)頁(yè)地址
username：該網(wǎng)頁(yè)的登錄賬號(hào)
password：該網(wǎng)頁(yè)的登錄密碼

在這里插入圖片描述
訪問(wèn)該頁(yè)面，并輸入相應(yīng)的賬號(hào)密碼進(jìn)行登錄

登錄了以后點(diǎn)擊直接安裝

這時(shí)候別閑著，去軟件商店里，找到這兩個(gè)軟件安裝一下

四、配置服務(wù)器、網(wǎng)站

先回到我們的騰訊云控制臺(tái)
在這里插入圖片描述

按下圖輸入，并點(diǎn)完成

接下來(lái)就可以將我們的項(xiàng)目放到壓縮文件中，然后上傳到寶塔面板中了
，上傳好后直接點(diǎn)解壓就可以了
找到我們的pm2，開始設(shè)置我們的項(xiàng)目
在這里插入圖片描述

然后點(diǎn)擊映射，將我們的公網(wǎng)ip 映射一下

如果這里的端口是3000，我們需要將入口文件中的端口號(hào)改一下，我這里是改為5000了

入口文件的端口號(hào)修改好后，我們需要放行一下我們項(xiàng)目網(wǎng)站的端口號(hào)，即做以下兩個(gè)步驟
在這里插入圖片描述

然后重啟一下項(xiàng)目

這樣一個(gè)node.js項(xiàng)目就部署完成啦，接下來(lái)就通過(guò)公網(wǎng)ip + 端口號(hào)的方式進(jìn)行訪問(wèn)

可以看到訪問(wèn)成功了。

結(jié)束語(yǔ)

這是我查閱了大量資料，才部署上去的node.js 項(xiàng)目，因?yàn)槲沂亲銮岸说?，所以不太懂運(yùn)維這些的，只能做這樣一個(gè)簡(jiǎn)單的部署，不過(guò)對(duì)于新手學(xué)習(xí)已經(jīng)完全足夠了，希望這篇文章能幫助到你們。

轉(zhuǎn)自:csdn 作者：「零一」

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、包裝設(shè)計(jì) 、圖標(biāo)定制、用戶體驗(yàn) 、交互設(shè)計(jì)、網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

評(píng)論(0) 瀏覽(2660)

292021-4

接口測(cè)試之（在Linux上搭建Tomcat環(huán)境）

前端達(dá)人

接口測(cè)試：

接口：是傳遞數(shù)據(jù)的通道。接口測(cè)試主要用于檢測(cè)外部系統(tǒng)與系統(tǒng)之間以及內(nèi)部各個(gè)子系統(tǒng)之間的交互點(diǎn)。

測(cè)試的重點(diǎn)是要檢測(cè)數(shù)據(jù)的交換，傳遞和控制管理過(guò)程，以及系統(tǒng)間的相互邏輯依賴關(guān)系等。

接口的分類：

外部接口：調(diào)用第三方平臺(tái)的接口

內(nèi)部接口：登陸和注冊(cè)這種單獨(dú)的內(nèi)部接口

1、首先下載好tomcat軟件包

2、通過(guò)Xftp軟件傳輸?shù)轿覀僉inux虛擬機(jī)的 /opt目錄下

3、通過(guò)Xshell我們可以在/opt目錄下看到tomcat軟件包（如下圖紅色框內(nèi)）

4、我們解壓tomcat是用：tar -xzvf apache-tomcat-8.0.30.tar.gz 命令進(jìn)行解壓，可以看到解壓后的文件（如下圖綠色框內(nèi)）因?yàn)槲乙呀?jīng)解壓過(guò)了，就不給大家示范了（這里要注意的是因?yàn)槲以趏pt目錄下的，所以用這個(gè)解壓命令，如果你沒(méi)在你要解壓的目錄下就要在后面加 -c 這個(gè)參數(shù)）

5、接下來(lái)我們下載JDK（注意JDK的位數(shù)和系統(tǒng)區(qū)別）：我是在64位Linux系統(tǒng)部署的

6、上傳和解壓和tomact一樣都是tar.gz格式的，解壓命令都一樣，也是放在opt目錄下

7、驗(yàn)證JDK是否安裝好（java -version）

8、在其他目錄下執(zhí)行（java -version）是不成功的，所以要配置JDK環(huán)境變量，通過(guò)編輯 vi etc/profile 在最后段加上

JAVA_HOME=/opt/jdk1.8.0_141 -----》改成自己的jdk路徑

JAVA_BIN=$JAVA_HOME/bin

JRE_HOME=$JAVA_HOME/jre

JRE_BIN=$JRE_HOME/bin

PATH=$JAVA_BIN:$JRE_BIN:$PATH

CLASSPATH=.:$JAVA_HOME/lib/dt.jar:$JAVA_HOME/lib/tools.jar:$JRE_HOME/lib

export JAVA_HOME JRE_HOME PATH CLASSPATH

9、然后輸入 source /etc/profile命令，使環(huán)境變量生效，現(xiàn)在使用Java -version目錄下驗(yàn)證JDK是否已經(jīng)全局生效

10、在bin目錄啟動(dòng)tomcat，查看tomcat環(huán)境是否能可以啟動(dòng)（ ./startup.sh 啟動(dòng) ./startup.sh 關(guān)閉）

11、訪問(wèn)地址出現(xiàn)如下圖證明tomcat環(huán)境搭建好了（你自己虛擬機(jī)的IP+tomcat的端口號(hào)）

12、修改tomcat的端口號(hào)，目錄:在/opt/apache-tomcat-8.0.30/conf，用vi server.xml 修改端口號(hào)

13、注意:啟動(dòng)tomcat要關(guān)閉防火墻，最后養(yǎng)成打開日志文件習(xí)慣

轉(zhuǎn)自：csdn 作者：寒門子弟

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、包裝設(shè)計(jì) 、圖標(biāo)定制、用戶體驗(yàn) 、交互設(shè)計(jì)、網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

評(píng)論(0) 瀏覽(2009)

292021-4

如何將訪客轉(zhuǎn)化為潛在客戶？這個(gè)8個(gè)網(wǎng)站優(yōu)化策略了解下

seo達(dá)人

文章目錄

實(shí)時(shí)聊天和聊天機(jī)器人
提供可下載的內(nèi)容
提供動(dòng)態(tài)、智能的CTA
通過(guò)工作流程培養(yǎng)潛在客戶
提供表格提交選項(xiàng)
展示正面評(píng)價(jià)案例
適當(dāng)?shù)膹棿霸O(shè)計(jì)
測(cè)試，測(cè)試，再測(cè)試

你是否已經(jīng)將自己的網(wǎng)站優(yōu)化到最佳狀態(tài)了呢?通過(guò)優(yōu)化來(lái)產(chǎn)生潛在客戶是轉(zhuǎn)化網(wǎng)站已經(jīng)獲得的流量的最好方法之一。

然而，如果你認(rèn)為在網(wǎng)站的主頁(yè)上添加幾個(gè)“點(diǎn)擊這里”的CTA策略(站長(zhǎng)之家注：CTA即Call-to-Action，行為召喚，指在網(wǎng)站、App中用于引導(dǎo)用戶自發(fā)完成某種特定行動(dòng)。)就能獲取更多的潛在客戶，很遺憾的說(shuō)，這個(gè)想法大錯(cuò)特錯(cuò)。

在這篇文章中，將為大家介紹通過(guò)網(wǎng)站優(yōu)化將訪客轉(zhuǎn)化為潛在客戶的 8 關(guān)鍵策略。

實(shí)時(shí)聊天和聊天機(jī)器人

這是對(duì)任何網(wǎng)站的一個(gè)重要的補(bǔ)充。你可以與網(wǎng)站訪客的人進(jìn)行對(duì)話，以獲得建議、指導(dǎo)、幫助，有時(shí)甚至是銷售。實(shí)時(shí)聊天通常會(huì)出現(xiàn)在網(wǎng)頁(yè)的底部，會(huì)出現(xiàn)一條自動(dòng)消息，比如“我今天能幫你嗎”，然后你就可以開始對(duì)話了。

你扮演數(shù)字客服的角色。重要的是，實(shí)時(shí)聊天不要出現(xiàn)在網(wǎng)站的每個(gè)頁(yè)面，因?yàn)橛脩艨赡軙?huì)覺得這樣做相當(dāng)煩人。

因此，建議在網(wǎng)站的主頁(yè)和服務(wù)頁(yè)面上開啟在線聊天功能。因?yàn)橹黜?yè)是用戶在點(diǎn)擊網(wǎng)站時(shí)通常會(huì)看到的第一個(gè)頁(yè)面，因此實(shí)時(shí)聊天彈出窗口應(yīng)該充當(dāng)問(wèn)候消息。從服務(wù)層面來(lái)看，它可以為用戶提供關(guān)于產(chǎn)品的建議或幫助。以京東首頁(yè)為例，右側(cè)就提供了“客服”服務(wù)，實(shí)時(shí)為客戶答疑解惑。

聊天機(jī)器人是進(jìn)一步開發(fā)實(shí)時(shí)聊天功能的工具。聊天機(jī)器人是一種軟件，它提供自動(dòng)的、預(yù)先確定的響應(yīng)，這些響應(yīng)被編程為像人類一樣的行為。

聊天機(jī)器人可以提升網(wǎng)站體驗(yàn)，因?yàn)樗鼈兛梢詭椭阕詣?dòng)識(shí)別潛在客戶和查詢，從長(zhǎng)遠(yuǎn)來(lái)看可以節(jié)省你的時(shí)間。一旦設(shè)置完成，你需要做的就是偶爾檢查一下信息，以確保信息仍然適合你的目的，然后你就可以離開了!

提供可下載的內(nèi)容

提供可下載的指南、博客和見解對(duì)于數(shù)據(jù)獲取以及允許訪問(wèn)者直接與網(wǎng)站產(chǎn)生互動(dòng)都非常有用。

可下載內(nèi)容要從銷售流程開始，如果內(nèi)容已經(jīng)被下載，這意味著潛在客戶已經(jīng)對(duì)你的產(chǎn)品或服務(wù)產(chǎn)生了興趣。這樣就避免了尷尬的對(duì)話，而銷售人員就可以開始向潛在客戶推送更進(jìn)一步有用的內(nèi)容。

通過(guò)簡(jiǎn)單地添加一個(gè)CTA，就可為自己節(jié)省了許多陌生對(duì)話。

可下載的內(nèi)容也使網(wǎng)站更具互動(dòng)性。您可以通過(guò)在用戶下載內(nèi)容之前添加要填寫的表單來(lái)捕獲關(guān)于用戶的數(shù)據(jù)。然后將數(shù)據(jù)保存并放入CRM中。接著，您就可以創(chuàng)建工作流，用戶將在其中接收其他內(nèi)容塊。

請(qǐng)記住，為了讓人們下載網(wǎng)站的內(nèi)容，提供的內(nèi)容必須對(duì)他們有價(jià)值。否則，雖然網(wǎng)站登錄頁(yè)面點(diǎn)擊量很高，但下載量卻少得可憐。因?yàn)槿绻脩魶](méi)有給出他們的聯(lián)系方式，也意味著提供的內(nèi)容沒(méi)有價(jià)值。

所以，如果你花時(shí)間和資源去制作一份有真正價(jià)值的高質(zhì)量?jī)?nèi)容，那么就會(huì)獲得不錯(cuò)的投資回報(bào)率(ROI)。

提供動(dòng)態(tài)、智能的CTA

僅僅增加一個(gè)“點(diǎn)擊這里”或“了解更多”是不夠的，CTA在最近幾年變得流行起來(lái)，所以你網(wǎng)站的CTA一定要大膽、獨(dú)特，并與網(wǎng)站、博客、指南等相關(guān)。

行動(dòng)呼吁的作用不僅僅是一個(gè)帶有命令的彩色按鈕，在某些情況下，它們是一些細(xì)微的差別，可以產(chǎn)生巨大的影響。

有兩種類型的CTA，主要的和次要的。

主要的CTA是你希望客戶采取行動(dòng)的地方，例如“立即購(gòu)買”、“立即申請(qǐng)”。

次要的CTA的目的讓用戶了解某些主題或服務(wù)。例如，“了解更多”、“繼續(xù)閱讀”，目的是為客戶提供進(jìn)一步的信息和細(xì)節(jié)。

現(xiàn)在很多營(yíng)銷平臺(tái)已經(jīng)有直觀的系統(tǒng)來(lái)幫助創(chuàng)建CTA。例如，HubSpot就建立“智能CTA”，這有助于優(yōu)化訪客的網(wǎng)站體驗(yàn)。

本質(zhì)上，智能CTA使用動(dòng)態(tài)內(nèi)容在合適的時(shí)間向聯(lián)系人顯示合適的內(nèi)容。CTA會(huì)根據(jù)訪問(wèn)它的用戶而改變，你可以根據(jù)選擇的標(biāo)準(zhǔn)為不同的用戶提供不同的CTA，而不是死板的同一內(nèi)容。

這有助于根據(jù)訪問(wèn)者不同的訪問(wèn)階段，為他們提供個(gè)性化的品牌體驗(yàn)。

通過(guò)工作流程培養(yǎng)潛在客戶

沒(méi)有一個(gè)潛在客戶就能保證成功銷售，所以需要確保引導(dǎo)他們的方式是正確的，讓他們通過(guò)你的銷售渠道進(jìn)入你銷售周期的決策階段。

一旦潛在客戶下載了您的一部分內(nèi)容，就可以將他們放入工作流程中。然后發(fā)送讓他們感興趣并且有價(jià)值的內(nèi)容。

例如，如果潛在客戶下載了“成功重新設(shè)計(jì)網(wǎng)站的 7 個(gè)步驟”資料，我們不會(huì)向他們發(fā)送關(guān)于SEO或潛在客戶生成等主題的內(nèi)容，而是繼續(xù)圍繞他們最初表示感興趣的主題提供相關(guān)內(nèi)容，并繼續(xù)讓他們參與我們的服務(wù)。

你的目標(biāo)應(yīng)該是通過(guò)銷售漏斗推動(dòng)銷售，直到他們能夠購(gòu)買為止。熱情、自動(dòng)化(但仍然是個(gè)人)的電子郵件有助于加快銷售進(jìn)程。

根據(jù)國(guó)外數(shù)據(jù)報(bào)告顯示，培養(yǎng)潛在客戶的公司比不培育潛在客戶的公司“潛在銷售客戶”多50%，而成本則低33%。

提供表格提交選項(xiàng)

提供可下載內(nèi)容的表單是為企業(yè)獲取數(shù)據(jù)的另一種方法。表單通常存儲(chǔ)用戶必要細(xì)節(jié)和信息，包括姓名、性別、業(yè)務(wù)、電子郵件和電話號(hào)碼。

表格應(yīng)該添加到的網(wǎng)站上吸引最多流量的頁(yè)面。通過(guò)設(shè)置百度分析之類的統(tǒng)計(jì)工具，就可以看到有多少人在訪問(wèn)你的網(wǎng)站，有多少人實(shí)際上點(diǎn)擊了表單。

表格也有助于建立電子郵件列表。如果你的標(biāo)準(zhǔn)包括在網(wǎng)站上填寫表格時(shí)的電子郵件，就可以將它添加到你的郵件列表中。郵件列表中的潛在客戶越多，就越有可能通過(guò)你的內(nèi)容收到下載、咨詢或回電。

展示正面評(píng)價(jià)案例

當(dāng)你購(gòu)買一個(gè)新產(chǎn)品的時(shí)候，是否會(huì)去看看別人的評(píng)論和建議呢?

可能90%的人都會(huì)。因此提供評(píng)論和證明，可以幫助用戶作出最終的購(gòu)買決定。

那么，為什么不利用那些顧客的積極的評(píng)價(jià)來(lái)幫助推銷你的產(chǎn)品呢?

《心理科學(xué)》雜志發(fā)表的一項(xiàng)研究強(qiáng)調(diào)，當(dāng)讓人們?cè)趦煞N相似的產(chǎn)品中進(jìn)行選擇時(shí)，大多數(shù)人會(huì)選擇評(píng)論最多的產(chǎn)品。

最近，TrustPilot（全球最大的在線評(píng)論社區(qū)）發(fā)現(xiàn)92%的消費(fèi)者表示購(gòu)買決定受到在線評(píng)論的影響。他們還發(fā)現(xiàn)：

72%的消費(fèi)者會(huì)在閱讀正面評(píng)論后采取行動(dòng)
88%的消費(fèi)者相信評(píng)論和個(gè)人推薦

雖然這些發(fā)現(xiàn)主要集中在B2C，但也有證據(jù)表明，評(píng)論和評(píng)價(jià)在B2B決策過(guò)程中變得越來(lái)越重要。

根據(jù) 2018 年一份關(guān)于評(píng)論對(duì)B2B買家和賣家的影響的報(bào)告顯示，92%的買家更有可能在閱讀了可信的評(píng)論后購(gòu)買產(chǎn)品或服務(wù)。然而，目前只有43%的B2B企業(yè)將評(píng)論作為其營(yíng)銷策略的一部分。

這顯示了B2C和B2B企業(yè)的巨大潛力，它們不僅可以為網(wǎng)站添加推薦信，還可以滿足TrustPilot等平臺(tái)的需求。

適當(dāng)?shù)膹棿霸O(shè)計(jì)

如果使用不當(dāng)，彈窗可能讓用戶感到相當(dāng)?shù)膼琅?。相反的，如果合適應(yīng)用的話，則能起到非常有用的效果。關(guān)鍵是不要過(guò)早地在每一頁(yè)上都應(yīng)用到彈窗。任何人都不想要在剛登錄一個(gè)網(wǎng)站頁(yè)面就巨大的彈出廣告。

您應(yīng)該為彈窗設(shè)置一個(gè)觸發(fā)器，例如，如果它們滾動(dòng)到站點(diǎn)上的某個(gè)特定部分或某個(gè)特定頁(yè)面上。一些彈出窗口非常有用，因?yàn)樗鼈兛梢杂|發(fā)對(duì)話并立即吸引用戶的注意力。

亞馬遜有一個(gè)非常好的彈窗設(shè)置，它不是太大，并促進(jìn)一個(gè)非常明確的信息。在“你的賬戶”旁邊有一個(gè)彈出框，上面寫著“新客戶，登錄嗎?從這里開始”。

你可能沒(méi)有捕捉到潛在客戶的所有的細(xì)節(jié)，但比以前更接近目標(biāo)了。

測(cè)試，測(cè)試，再測(cè)試

最重要的一項(xiàng)工作，它它并不是一個(gè)真正的功能，但它對(duì)任何網(wǎng)站來(lái)說(shuō)都是至關(guān)重要的一步，也是大多數(shù)企業(yè)主不夠重視的地方，那就是測(cè)試。

像A/B測(cè)試這樣的方法是非常有效的，并且可以提高網(wǎng)站的點(diǎn)擊率(CTR)。

A/B測(cè)試是使用一個(gè)變化元素來(lái)比較網(wǎng)頁(yè)、電子郵件或其他營(yíng)銷資產(chǎn)的兩個(gè)版本的過(guò)程。

在網(wǎng)站上測(cè)試一些簡(jiǎn)單的功能，比如CTA，登陸頁(yè)面的布局，圖片和不同類型的內(nèi)容，都會(huì)對(duì)網(wǎng)站的成功產(chǎn)生巨大的影響。

反復(fù)測(cè)試，直到找到最有效的部分。

結(jié)論

越來(lái)越多網(wǎng)站不斷的更新優(yōu)化，作為企業(yè)主關(guān)鍵就是要積極主動(dòng)擁抱變化。你需要依靠潛在客戶發(fā)展自己的業(yè)務(wù)，那么使用上面的技巧，把你的網(wǎng)站訪問(wèn)者轉(zhuǎn)化為潛在客戶的挑戰(zhàn)變得簡(jiǎn)單了一點(diǎn)。

注：文章編譯自medium

文章來(lái)源：站長(zhǎng)之家

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、包裝設(shè)計(jì) 、圖標(biāo)定制、用戶體驗(yàn) 、交互設(shè)計(jì)、網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

評(píng)論(0) 瀏覽(1867)

292021-4

體驗(yàn)好的電商APP長(zhǎng)啥樣？這里總結(jié)了7種絕佳的UI設(shè)計(jì)原則

seo達(dá)人

最近，國(guó)外設(shè)計(jì)師Jennifer Jhang對(duì)一些頂級(jí)的電子商務(wù)APP如耐克、蘋果、三星、Ebay、Banggood以及Best Buy等產(chǎn)品進(jìn)行了研究，并總結(jié)了 7 種主要的用戶界面模式。

1. 登錄：多個(gè)選項(xiàng)

登錄通常是第一個(gè)障礙，設(shè)置不當(dāng)會(huì)導(dǎo)致用戶花費(fèi)很多精力在上面。為了減少用戶登錄的難度，可以增加登錄的靈活性。

嘗試“懶人”登錄模式。這種情況下，應(yīng)該設(shè)計(jì)可選擇的登錄選項(xiàng)，比如可以讓用戶直達(dá)購(gòu)物車或者其他功能。比如允許用戶在創(chuàng)建賬戶之前，可以用游客的身份試用APP并體驗(yàn)其價(jià)值。

另外，考慮通過(guò)將登錄選項(xiàng)直接關(guān)聯(lián)外部賬戶如Facebook、谷歌(國(guó)內(nèi)的比如微博、微信等)就能注冊(cè)新的賬戶登錄。這讓用戶可以跳過(guò)填寫注冊(cè)表單，而只需單擊 2 次即可登錄。

在Banggood的賬戶界面，你可以清楚的看到，想要訪問(wèn)“已查看”、“優(yōu)惠券”內(nèi)容就需要登錄，Banggood還在登錄時(shí)提供關(guān)聯(lián)外部賬戶選項(xiàng)。

2. 搜索：支持文本、圖像、聲音、條形碼

Pinterest CEO說(shuō)過(guò)：“我真的相信相機(jī)將成為下一個(gè)鍵盤?！?

互聯(lián)網(wǎng)開始于一個(gè)基于文本的搜索欄，但正在演變?yōu)榭梢圆扇∑渌喾N方式進(jìn)行搜索。比如采用一個(gè)文本和圖片方式的組合，無(wú)疑可以增強(qiáng)搜索交互。

通過(guò)視覺人工智能，圖像搜索開辟了一個(gè)新的搜索方式。你不僅可以通過(guò)視覺線索識(shí)別產(chǎn)品，圖像搜索還可以讓你基于圖像上下文發(fā)現(xiàn)新想法。例如，如果你拍了一張西紅柿的照片，搜索結(jié)果可能會(huì)提供西紅柿炒蛋的食譜。

另外掃描條形碼可以減少出錯(cuò)的可能性，并能讓你直接找到產(chǎn)品。語(yǔ)音搜索增加了可訪問(wèn)性，并為忙于其它事務(wù)的用戶提供了便利。

3. 瀏覽：產(chǎn)品類別

除了直接搜索，用戶還參與瀏覽來(lái)查找商品。產(chǎn)品類別可以讓用戶更清晰有序的的方式瀏覽和發(fā)現(xiàn)產(chǎn)品。

產(chǎn)品類別通過(guò)以一種直觀的方式將產(chǎn)品進(jìn)行分組，從改善用戶搜索查找產(chǎn)品的能力。這就像走進(jìn)一家雜貨店，一眼望過(guò)去就是的我們想找的商品商品擺放的大概位置。

很多應(yīng)用程序有一個(gè)單獨(dú)的產(chǎn)品分類屏幕。其他的包括在“主頁(yè)”頁(yè)面上的產(chǎn)品類別部分。為了能向用戶提供更愉快的瀏覽體驗(yàn)，可以考慮將圖像或圖標(biāo)與類別標(biāo)簽結(jié)合起來(lái)。

下面，你將看到每個(gè)應(yīng)用程序處理產(chǎn)品類別顯示的不同方式。

4. 卡片的多樣性和一致性

卡片是用戶首先與APP交互的UI元素?？ㄆ亩鄻有院鸵恢滦杂兄跒閼?yīng)用創(chuàng)造一個(gè)讓人深刻的第一印象。

嘗試為不同類型的信息創(chuàng)建不同類型的卡片。這在視覺上區(qū)分了信息，并幫助用戶學(xué)習(xí)視覺語(yǔ)言。沒(méi)有多樣性，很難一眼就看出一張卡片代表了什么，因?yàn)樗鼈兛雌饋?lái)都一樣。

另外，也要努力使卡片在每個(gè)屏幕上保持一致。如果你有一個(gè)特定信息的卡片類型，試著讓它始終保持相同的設(shè)計(jì)風(fēng)格和尺寸大小等等，這樣它才容易識(shí)別。

蘋果商店使用了多樣性和一致性，創(chuàng)造了一個(gè)清晰的視覺詞匯。

5. 不同用戶階段采用不同的CTA(行動(dòng)呼吁)

本文開頭提到的幾個(gè)APP中采用的CTA按鈕有幾種常見模式。通常在用戶不同瀏覽階段會(huì)有不同的CTA按鈕。

例如，Ebay有連續(xù)的“保存”、“添加到購(gòu)物車”和“現(xiàn)在購(gòu)買”按鈕。當(dāng)你想立即購(gòu)買某一特定物品時(shí)，“立即購(gòu)買”是很好的選擇。然而，當(dāng)用戶等待打折或比較商品時(shí)，“省錢”按鈕則是更好的選擇?！疤砑拥劫?gòu)物車”在用戶一次購(gòu)買少量物品時(shí)很有意義的。

而當(dāng)用戶還沒(méi)有完全準(zhǔn)備好購(gòu)買時(shí)，頁(yè)面只有一個(gè)“現(xiàn)在購(gòu)買”按鈕，那么無(wú)法解決他們的加購(gòu)需求。這可能會(huì)阻礙用戶的購(gòu)物體驗(yàn)。

6. 特定產(chǎn)品頁(yè)面的頂部標(biāo)簽

為了試圖包含購(gòu)買決策所需的所有細(xì)節(jié)，特定產(chǎn)品的詳情頁(yè)可能很長(zhǎng)。

根據(jù)尼爾森的一項(xiàng)研究，以下是一個(gè)產(chǎn)品頁(yè)面最受歡迎的功能列表：

必須擁有：產(chǎn)品名稱，圖像，價(jià)格，選項(xiàng)，可用性，添加到購(gòu)物車，描述

值得擁有的：評(píng)級(jí)或評(píng)論，附加圖片，視頻，縮放/平移，相關(guān)推薦，愿望列表

在頁(yè)面頂部放置標(biāo)簽是幫助用戶快速找到感興趣話題的一種方法。它們甚至在用戶開始向下滾動(dòng)之前就顯示屏幕內(nèi)容。

標(biāo)簽應(yīng)該包含相同層級(jí)的相關(guān)內(nèi)容，同時(shí)應(yīng)該要可展開更多詳情。在添加主題時(shí)，可以使用可滾動(dòng)的固定標(biāo)簽。

在這里，Samsung Shop和Chewy使用固定標(biāo)簽，而Drop使用可滾動(dòng)標(biāo)簽。

7.付款：漸進(jìn)式展示

漸進(jìn)式展示信息是指顯示適量的信息。它通過(guò)多屏展示分解信息，同時(shí)仍然揭示主要主題，從而降低了復(fù)雜性。

如果沒(méi)有做到這點(diǎn)，用戶可能會(huì)覺得結(jié)賬很乏味，甚至?xí)艞壻?gòu)物。面對(duì)一張?zhí)顫M信息的表格會(huì)讓人看著難受，看到同樣的表格被分成幾個(gè)部分，感覺上就更容易處理。還要記住，你需要在頁(yè)面的下半部分留出放置鍵盤的空間。

組織這種復(fù)雜性的一些方法是使用手風(fēng)琴效果、列表或進(jìn)度指示器。手風(fēng)琴垂直展開，展開列表就會(huì)展示一個(gè)屏幕頁(yè)面，顯示更多信息。進(jìn)度指示器顯示用戶在結(jié)賬步驟中的的進(jìn)程。

耐克似乎使用了手風(fēng)琴效果、chewy和使用列表模式，而Drop在結(jié)帳時(shí)使用了進(jìn)度指示器。

結(jié)論

通過(guò)研究當(dāng)前的APP，你可以學(xué)到很多東西。觀察產(chǎn)品設(shè)計(jì)決策背后的原因，我們可以找到新的見解。使用合適的UI模式創(chuàng)建一個(gè)從下載到結(jié)賬的無(wú)縫體驗(yàn)的APP。

注：文章由站長(zhǎng)之家編譯自u(píng)xdesign

文章來(lái)源：站長(zhǎng)之家

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、包裝設(shè)計(jì) 、圖標(biāo)定制、用戶體驗(yàn) 、交互設(shè)計(jì)、網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

評(píng)論(0) 瀏覽(1994)

首頁(yè)

前言

項(xiàng)目技術(shù)簡(jiǎn)介

系統(tǒng)實(shí)現(xiàn)的功能點(diǎn)

服務(wù)端技術(shù)

前端技術(shù)

數(shù)據(jù)庫(kù)的設(shè)計(jì)

框架結(jié)構(gòu)搭建

SSM項(xiàng)目腳手架搭建

測(cè)試Demo

POJO類

Spring核心配置文件

Spring-Mybatis配置文件

SpringMVC配置文件

pom依賴

UserMapper

UserService

UserController

UserMapper.xml

運(yùn)行結(jié)果

錯(cuò)誤記錄

運(yùn)行的界面顯示unkown the request

一、馬斯洛需求層次理論

1. 第一層次：生理上的需要

2. 第二層次：安全上的需要

3. 第三層次：情感和歸屬的需要

4. 第四層次：尊重的需要

5. 第五層次：自我實(shí)現(xiàn)的需要

二、KANO 模型

1. 基本型需求

2. 期望型需求

3. 魅力型需求

4. 無(wú)差異型需求

5. 反向型需求

三、因子分析

四、聚類分析

1. 目標(biāo)用戶的群體分類

2. 不同產(chǎn)品的價(jià)值組合

3. 數(shù)據(jù)挖掘、分析、應(yīng)用

五、多維度尺度法

六、聯(lián)合分析

七、李克特量表

1、什么是登錄體驗(yàn)？

2、設(shè)計(jì)熟悉的登錄流程

3、專注設(shè)計(jì)

4、給出明確反饋并在操作失敗時(shí)提供幫助

5、多種登錄方式提供靈活性

6、登錄意味著信任

7、確定用戶類型

8、登錄頁(yè)設(shè)計(jì)實(shí)例分析

開篇

布局方式對(duì)比

A+R混合模型布局

其他輔助手段

結(jié)語(yǔ)

node.js + mongodb 在云服務(wù)器上的部署

引言

正文

一、購(gòu)買服務(wù)器

二、登錄服務(wù)器

三、給服務(wù)器安裝寶塔面板

四、配置服務(wù)器、網(wǎng)站

結(jié)束語(yǔ)

實(shí)時(shí)聊天和聊天機(jī)器人

提供可下載的內(nèi)容

提供動(dòng)態(tài)、智能的CTA

通過(guò)工作流程培養(yǎng)潛在客戶

提供表格提交選項(xiàng)

展示正面評(píng)價(jià)案例

適當(dāng)?shù)膹棿霸O(shè)計(jì)

測(cè)試，測(cè)試，再測(cè)試

分類

日歷

鏈接

個(gè)人資料

存檔

一、馬斯洛需求層次理論

二、KANO 模型

四、聚類分析

3. 數(shù)據(jù)挖掘、分析、應(yīng)用

七、李克特量表

1、什么是登錄體驗(yàn)？

2、設(shè)計(jì)熟悉的登錄流程

3、專注設(shè)計(jì)

5、多種登錄方式提供靈活性

8、登錄頁(yè)設(shè)計(jì)實(shí)例分析

一、購(gòu)買服務(wù)器

二、登錄服務(wù)器

三、給服務(wù)器安裝寶塔面板

四、配置服務(wù)器、網(wǎng)站

提供動(dòng)態(tài)、智能的CTA

測(cè)試，測(cè)試，再測(cè)試