302021-4

前言

本系列文章主要通过从零开始搭建自己的个人博客，来加深对SSM框架的学习与使用，了解一个系统从提出到设计-到开发-到测试-部署运行的过程，并记录在搭建过程中的学习心得、遇见的错误及解决方式。

个人博客的主要功能有：

博客列表展示：文章按照时间顺序（时间倒序：最新最先展示）列表展示
博客文章详情展示：展示文章全部内容，包含：作者、创建时间、所属目录、标签、文章标题、内容
用户权限管理：游客只能浏览文章、管理员可以发布文章、文章下线处理
添加文章功能：支持富文本编辑。可以调整字体大小、样式、键入代码等功能

界面展示：

前台博客列表界面

前台博客列表页面.png

博客详情页面

博客详情页面.png

后台管理页面

登录页面

后台管理页面.png

项目技术简介

系统实现的功能点

用户权限管理：普通的用户(游客)只能浏览文章、管理员用户可以发布文章、文章管理
博客列表展示：文章按照发布时间顺序(按照时间倒叙)展示：博客类别、标签、博客名称、作者名、发布时间、阅读数量、博客的内容概括
博客详情页面：博客名称、作者、时间、博客内容、标签
博客后台列表：博客检索(类别、标签、博客名称)、博客列表(博客id、博客类别、标签、时间)、博客操作
新增博客功能：支持富文本编辑：可以调整大小、样式等

服务端技术

核心框架：Spring:5.2.8.RELEASE

web框架：SpringMVC：5.2.8.RELEASE

持久层框架：Mybatis 3.2.4

数据库连接池：阿里druid：0.2.6

数据库：MySQL5.XX

JSON数据处理：谷歌gson 2.3

前端技术

jsp

Ajax

前端框架:bootstrap

富文本编辑器:百度UEditor

数据库的设计

用户表：账号id、账号名称、账号密码
博客表：博客id、博客名称、博客内容、发布时间、阅读量、类别id、状态
博客/标签对应表：博客id、标签的id
标签表：标签id、标签名称（博客和标签：一对多：一个博客可以对应多个标签）
类别表：类别ID、类别名称（博客和类别：一对一：一个博客对应一个类别）

创建SQL语句：

 


    

        

            

            

        

        

            
                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 '标题',
            

        

    

    

        

            

            

        

        

            
                `content` blob NOT NULL COMMENT '内容',
            

        

    

    

        

            

            

        

        

            
                `description` varchar(500) NOT NULL COMMENT '文章简介  用于列表显示',
            

        

    

    

        

            

            

        

        

            
                `statue` int(11) NOT NULL DEFAULT '0' COMMENT '状态 0：正常  1：不可用',
            

        

    

    

        

            

            

        

        

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

        

    

    

        

            

            

        

        

            
                `createTime` datetime NOT NULL COMMENT '发表时间',
            

        

    

    

        

            

            

        

        

            
                `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 '标签名称  唯一',
            

        

    

    

        

            

            

        

        

            
                PRIMARY KEY (`id`),
            

        

    

    

        

            

            

        

        

            
                UNIQUE KEY `tagName_UNIQUE` (`tagName`)
            

        

    

    

        

            

            

        

        

            
                ) ENGINE=InnoDB AUTO_INCREMENT=23 DEFAULT CHARSET=utf8 COMMENT='标签表';
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

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

        

    

    

        

            

            

        

        

            
                -- 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 '标签Id',
            

        

    

    

        

            

            

        

        

            
                PRIMARY KEY (`articleId`,`tagId`)
            

        

    

    

        

            

            

        

        

            
                ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='文章标签中间表';
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

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

        

    

    

        

            

            

        

        

            
                -- 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 '图标样式',
            

        

    

    

        

            

            

        

        

            
                `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='分类表  只支持一级分类  如果需要分多个层次 用标签来协助实现';
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

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

        

    

    

        

            

            

        

        

            
                -- 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;

框架结构搭建

SSM项目脚手架搭建

搭建如下框架结构：

目录说明：

 


    

        

            

            

        

        

            
                目录说明：
            

        

    

    

        

            

            

        

        

            
                |-src
            

        

    

    

        

            

            

        

        

            
                |--mian 
            

        

    

    

        

            

            

        

        

            
                |---java    JAVA源代码根目录 
            

        

    

    

        

            

            

        

        

            
                |----com 
            

        

    

    

        

            

            

        

        

            
                |-----tulun 
            

        

    

    

        

            

            

        

        

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

        

    

    

        

            

            

        

        

            
                |------controller  展示层类包路径：前端用户请求映射到该包路径下类的实现 
            

        

    

    

        

            

            

        

        

            
                |------service     业务逻辑层包路径：业务逻辑实现，调用dao层服务 
            

        

    

    

        

            

            

        

        

            
                |------dao      数据库操作层包路径：提供对数据库的操作类与方法 
            

        

    

    

        

            

            

        

        

            
                |------util     工具类包路径 
            

        

    

    

        

            

            

        

        

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

        

    

    

        

            

            

        

        

            
                |----myatis   mybatis接口对应配置文件目录 
            

        

    

    

        

            

            

        

        

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

        

    

    

        

            

            

        

        

            
                |--webapp  前端页面内容根目录 
            

        

    

    

        

            

            

        

        

            
                |---WEB-INF 
            

        

    

    

        

            

            

        

        

            
                |----web.xml  前端页面必要配置文件 
            

        

    

    

        

            

            

        

        

            
                |-pom.xml    maven的配置文件

测试Demo

主要完成各个层之间的连接映射，完成从t_manager表中读取数据并进行回显

POJO类

根据数据库表t_manager，创建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"/> 
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                <!--配置数据源：借助连接池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">
            

        

    

    

        

            

            

        

        

            
                <!--根标签--> 
            

        

    

    

        

            

            

        

        

            
                <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页面前缀--> 
            

        

    

    

        

            

            

        

        

            
                <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的配置文件进行配置--> 
            

        

    

    

        

            

            

        

        

            
                <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的数据进行显示

 


    

        

            

            

        

        

            
                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>

运行结果

错误记录

运行的界面显示unkown the request

原因是因为端口被占用了，更改服务器的端口号就可以了。

出现这个错误就要检查SQL查询语句，数据源的配置是否正确，经检查我报这个错是因为SQL查询语句manager写成了manger，用户名密码不对也会报这个错。

类似这种错，一是检查@Service有没有加上，二是检查映射文件有没有顶行写，第一行不能有空行。

转自：csdn。作者：resumebb

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

评论(0) 浏览(2309)

302021-4

centOS7杀死进程命令

前端达人

查看当前所有正在运行的进程，可以看到80端口被httpd占用了（80端口希望分配给nginx使用，而不是httpd）

netstat -tpnul

这里以杀死httpd进程为例：

先查看 httpd 进程

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

这个就是 apache 的所有进程

我们可以用 kill -9 加进程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正在运行的进程：

(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

全部杀完了... 杀死进程方法有很多种...我这个只是其中的一种

通过netstat确认一下，httpd已经不再占用80端口了

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

另如果不想杀死进程，而想修改端口号，

操作方法参照：centos7 ngxin启动失败：Job for nginx.service failed（80端口被占用的解决办法）

参照文档：

centos杀死进程命令

转载于:https://www.cnblogs.com/kaerxifa/p/11534539.html

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

评论(0) 浏览(2665)

302021-4

MVP：七种深度洞察用户需求的方法

资深UI设计者

不论是什么产品都需要考虑到用户的需求，对于用户需求进行分析，确定可行性，最后进行实现；重点要关注在产品中用户需要的是什么，对用户的想法进行探索；本文作者分享了关于七种深度洞察用户需求的方法，我们一起来了解一下。

需求分析是市场研究阶段的重要活动，也是新产品开发流程中的一个重要环节，是产品经理经过深入细致的调研和分析，准确理解用户对产品的功能、性能、可靠性等具体要求，将用户非形式的需求表述转化为完整的需求定义，从而确定产品必须做什么的过程；该阶段是分析产品在功能上需要“实现什么”，而不是考虑如何去“实现”。

需求分析的目标是把用户对待开发产品提出的“要求”或“需要”进行分析与整理，确认后形成描述完整、清晰与规范的文档，确定产品需要实现哪些功能，完成哪些工作；此外，产品的一些非功能性需求（如产品质量、款式、特色、包装、安装、售后等）及约束条件也是需求分析的目标。

“消费者不知道他们想要什么。”
“消费者无法很好地表达他们的需求或喜好。”
“消费者对自己的具体需求很迷茫。”

这些都是从客户（产品开发或者市场部的同事）或者身边一些人（需要更多反馈的感官专家或设计者）在一整天的访谈（包括焦点小组、一对一访谈）、开放式问卷或者与消费者接触的过程中发现的问题；这就需要我们根据调研的初步结果进行深入的“需求分析”才能得到想要的结论和应用价值。

一、马斯洛需求层次理论

在组织行为学中，马斯洛曾经在1943年发表的论文中对人类需求做出了定义，在人类动机理论中，马斯洛提出了需求层次理论模型；这一理论可以有效地观察人类最根本、最基础的需求水平。

马斯洛认为，人类具有一些先天需求，人的需求越是低级的需求就越基本，越与动物相似；越是高级的需求就越为人类所特有。同时这些需求都是按照先后顺序出现的，当一个人满足了较低的需求之后，才能出现较高级的需求，即需求层次。

马斯洛理论把需要分成生理需要、安全需要、社交需要、尊重和自我实现五类，依次由较低层次到较高层次排列，如图所示。在自我需要实现之后，还有自我超越需要，但通常不作为马斯洛需要层次理论中必要的层次，大多数会将自我超越合并至自我实现需求当中。

图马斯洛需求层次理论图谱

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

如果这些需要（除性以外）任何一项得不到满足，人类个人的生理机能就无法正常运转。

换而言之，人类的生命就会因此受到威胁。从这个意义上说，生理需要是推动人们行动最首要的动力。

马斯洛认为，只有这些最基本的需要满足到维持生存所必需的程度后，其他的需要才能成为新的激励因素，而到了此时，这些已相对满足的需要也就不再成为激励因素了。

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

马斯洛认为，整个有机体是一个追求安全的机制，人的感受器官、效应器官、智能和其他能量主要是寻求安全的工具，甚至可以把科学和人生观都看成是满足安全需要的一部分；当这种需要一旦相对满足后，也就不再成为激励因素了。

3. 第三层次：情感和归属的需要

人人都希望得到相互的关心和照顾，感情上的需要比生理上的需要来的细致，它和一个人的生理特性、经历、教育、宗教信仰都有关系。

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

人人都希望自己有稳定的社会地位，要求个人的能力和成就得到社会的承认。尊重的需要又可分为内部尊重和外部尊重。内部尊重是指一个人希望在各种不同情境中有实力、能胜任、充满信心、能独立自主。

总之，内部尊重就是人的自尊。

外部尊重是指一个人希望有地位、有威信，受到别人的尊重、信赖和高度评价；马斯洛认为，尊重需要得到满足，能使人对自己充满信心，对社会满腔热情，体验到自己活着的用处价值。

5. 第五层次：自我实现的需要

这是最高层次的需要，它是指实现个人理想、抱负，发挥个人的能力到最大程度，达到自我实现境界的人，接受自己也接受他人，解决问题能力增强，自觉性提高，善于独立处事，要求不受打扰地独处，完成与自己的能力相称的一切事情的需要；也就是说，人必须干称职的工作，这样才会使他们感到最大的快乐。

马斯洛提出，为满足自我实现需要所采取的途径是因人而异的。自我实现的需要是在努力实现自己的潜力，使自己越来越成为自己所期望的人物。

马斯洛理论把需要分成生理需要、安全需要、社交需要、尊重需要和自我实现需要五类，依次由较低层次到较高层次，从企业经营消费者满意（CS）战略的角度来看，每一个需求层次上的消费者对产品的要求都不一样，即不同的产品满足不同的需求层次。

根据五个需要层次，可以划分出五个消费者市场

生理需求：满足最低需求层次的市场，消费者只要求产品具有一般功能即可。
安全需求：满足对“安全”有要求的市场，消费者关注产品对身体的影响。
社交需求：满足对“交际”有要求的市场，消费者关注产品是否有助提高自己的交际形象。
尊重需求：满足对产品有与众不同要求的市场，消费者关注产品的象征意义。
自我实现：满足对产品有自己判断标准的市场，消费者拥有自己固定的品牌需求层次越高，消费者就越不容易被满足。

经济学上，“消费者愿意支付的价格≌消费者获得的满意度”，也就是说，同样的洗衣粉，满足消费者需求层次越高，消费者能接受的产品定价也越高。

市场的竞争，总是越低端越激烈，价格竞争显然是将“需求层次”降到最低，消费者感觉不到其他层次的“满意”，愿意支付的价格当然也低。

二、KANO 模型

KANO模型是东京理工大学教授狩野纪昭(Noriaki Kano)发明的对用户需求分类和优先排序的有用工具，以分析用户需求对用户满意的影响为基础，体现了产品性能和用户满意之间的非线性关系，如图所示。

根据不同类型的质量特性与顾客满意度之间的关系，狩野教授将产品服务的质量特性分为5类。

KANO 模型（产品性能和用户满意之间的非线性关系）

1. 基本型需求

也称为必备型需求、理所当然需求，是顾客对企业提供的产品或服务因素的基本要求；是顾客认为产品“必须有”的属性或功能。当其特性不充足（不满足顾客需求）时，顾客很不满意；当其特性充足（满足顾客需求）时，顾客也可能不会因而表现出满意。

对于基本型需求，即使超过了顾客的期望，但顾客充其量达到满意，不会对此表现出更多的好感；不过只要稍有一些疏忽，未达到顾客的期望，则顾客满意将一落千丈。

对于顾客而言，这些需求是必须满足的，理所当然的；对于这类需求，企业的做法应该是注重不要在这方面失分，需要企业不断地调查和了解顾客需求，并通过合适的方法在产品中体现这些要求。

例如，夏天家庭使用空调，如果空调正常运行，顾客不会为此而对空调质量感到满意；反之，一旦空调出现问题，无法制冷，那么顾客对该品牌空调的满意水平则会明显下降，投诉、抱怨随之而来。

再例如，智能手机的基本型需求有语音通话质量、信号覆盖、操作系统兼容、安全性、日常使用和性能：待机时间、速度等；试想一下，一个智能手机没有信号，通话质量差，操作系统不兼容，被感染病毒，待机时间10分钟就没电，如果手机运行速度慢到接近崩溃，这些都会使用户的不满情绪增加；但是上述这些需求都满足后，并不能带来用户满意度的增加，因为用户认为这些是必须要有的。

2. 期望型需求

也称为意愿型需求，是指顾客的满意状况与需求的满足程度成比例关系的需求，此类需求得到满足或表现良好的话，客户满意度会显著增加，企业提供的产品和服务水平超出顾客期望越多，顾客的满意状况越好；当此类需求得不到满足或表现不好的话，客户的不满也会显著增加。

期望型需求没有基本型需求那样苛刻，要求提供的产品或服务比较优秀，但并不是“必须”的产品属性或服务行为有些期望型需求连顾客都不太清楚，但是是他们希望得到的，也叫用户需求的痒处；这是处于成长期的需求，客户、竞争对手和企业自身都关注的需求，也是体现竞争能力的需求。对于这类需求，企业的做法应该是注重提高这方面的质量，要力争超过竞争对手。

在市场调查中，顾客谈论的通常是期望型需求；质量投诉处理在我国的现状始终不令人满意，该服务也可以被视为期望型需求；如果企业对质量投诉处理得越圆满，那么顾客就越满意。

3. 魅力型需求

又称兴奋型需求。指不会被顾客过分期望的需求。

对于魅力型需求，随着满足顾客期望程度的增加，顾客满意度也会急剧上升，但一旦得到满足，即使表现并不完善，顾客表现出的满意状况则也是非常高的；反之，即使在期望不满足时，顾客也不会因而表现出明显的不满意。

当顾客对一些产品或服务没有表达出明确的需求时，求企业提供给顾客一些完全出乎意料的产品属性或服务行为，使顾客产生惊喜，顾客就会表现出非常满意，从而提高顾客的忠诚度；这类需求往往是代表顾客的潜在需求，企业的做法就是去寻找发掘这样的需求，领先对手。

例如，一些著名品牌的企业能够定时进行产品的质量跟踪和回访，发布最新的产品信息和促销内容，并为顾客提供最便捷的购物方式。对此，即使另一些企业未提供这些服务，顾客也不会由此表现出不满意。

4. 无差异型需求

不论提供与否，对用户体验无影响；是质量中既不好也不坏的方面，它们不会导致顾客满意或不满意。例如：航空公司为乘客提供的没有实用价值的赠品。

5. 反向型需求

又称逆向型需求，指引起强烈不满的质量特性和导致低水平满意的质量特性，因为并非所有的消费者都有相似的喜好。

许多用户根本都没有此需求，提供后用户满意度反而会下降，而且提供的程度与用户满意程度成反比；例如：一些顾客喜欢高科技产品而另一些人更喜欢普通产品，过多的额外功能会引起顾客不满。

前三种需求根据绩效指标分类就是基本因素、绩效因素和激励因素。在实际操作中，企业首先要全力以赴地满足顾客的基本型需求，保证顾客提出的问题得到认真的解决，重视顾客认为企业有义务做到的事情，尽量为顾客提供方便，以实现顾客最基本的需求满足。

然后，企业应尽力去满足顾客的期望型需求，这是质量的竞争性因素；提供顾客喜爱的额外服务或产品功能，使其产品和服务优于竞争对手并有所不同，引导顾客加强对本企业的良好印象，使顾客达到满意。

最后争取实现顾客的兴奋型需求，为企业建立最忠实的客户群。

三、因子分析

因子分析是指研究从变量群中提取共性因子的统计技术。

最早由英国心理学家C.E.斯皮尔曼提出。他发现学生的各科成绩之间存在着一定的相关性，一科成绩好的学生，往往其他各科成绩也比较好，从而推想是否存在某些潜在的共性因子（某些一般智力条件）[张乐飞1] 影响着学生的学习成绩。

因子分析可在许多变量中找出隐藏的具有代表性的因子，将相同本质的变量归入一个因子，可减少变量的数目，还可检验变量间关系的假设。

因子分析是社会研究的一种有力工具，但不能肯定地说一项研究中含有几个因子，当研究中选择的变量变化时，因子的数量也要变化；此外对每个因子实际含意的解释也不是绝对的。在市场调研中，研究人员关心的是一些研究指标的集成或者组合，这些概念通常是通过等级评分问题来测量的，如利用李克特量表取得的变量。

每一个指标的集合（或一组相关联的指标）就是一个因子，指标概念等级得分就是因子得分。

因子分析方法的主要应用有两种：其一，减少变量的数量；其二，找出变量之间的结构关系。

在产品开发中，因子分析能够用于关键变量的优先级排序和分组，比如：产品属性之间的关系和产品属性对产品偏好的影响。在实际应用中，通过因子得分可以得出不同因子的重要性指标，而管理者则可根据这些指标的重要性来决定首先要解决的市场问题或产品问题。

四、聚类分析

聚类分析是一种探索性的分析，在分类的过程中，人们不必事先给出一个分类的标准，聚类分析能够从样本数据出发，自动进行分类。

聚类分析所使用方法的不同，常常会得到不同的结论。不同研究者对于同一组数据进行聚类分析，所得到的聚类数未必一致。

从实际应用的角度看，聚类分析是数据挖掘的主要任务之一；而且聚类能够作为一个独立的工具获得数据的分布状况，观察每一簇数据的特征，集中对特定的聚簇集合作进一步地分析。聚类分析还可以作为其他算法（如分类和定性归纳算法）的预处理步骤。

聚类分析的一个重要用途就是针对目标群体进行多指标的群体划分，类似这种目标群体的分类就是精细化经营，个性化运营的基础和核心，只有进行了正确的分类，才可以有效进行个性化和精细化的运营，服务及产品支持等。

常见业务应用场景如下：

1. 目标用户的群体分类

通过对特定运营目的和商业目的所挑选出的指标变量进行聚类分析，把目标群体划分成几个具有明显特征区别的细分群体，从而可以在运营活动中为这些细分群体采取精细化，个性化的运营和服务，最终提升运营的效率和商业效果（如把付费用户按照几个特定维度，如利润贡献，用户年龄，续费次数等聚类分析后得到不同特征的群体）。

2. 不同产品的价值组合

企业可以按照不同的商业目的，并依照特定的指标标量来为众多的产品种类进行聚类分析，把企业的产品体系进一步细分成具有不同价值，不同目的的多维度的产品组合，并且在此基础分别制定和相应的开发计划，运营计划和服务规划（如哪些产品是明星类产品，那些产品是瘦狗类产品）。

3. 数据挖掘、分析、应用

聚类分析是挖掘电子商务网站数据价值的重要方法之一，通过分组聚类出具有相似浏览行为的客户，并分析客户的共同特征，可以更好的帮助电子商务的用户了解自己的客户，向客户提供更合适的服务（如某B2C电商平台上，根据用户的搜索、浏览、购买记录通过大数据分析，通过第三方平台向客户精准推送产品）。

聚类分析是细分市场的有效工具，同时也可用于研究消费者行为，寻找新的潜在市场、选择实验的市场，并作为多元分析的预处理。

五、多维度尺度法

多维尺度法是一种将多维空间的研究对象（样本或变量）简化到低维空间进行定位、分析和归类，同时又保留对象间原始关系的数据分析方法；其特点是将消费者对产品的感觉偏好，以点的形式反映在多维空间上；而对不同产品的感觉或偏好的差异程度，则是通过点与点间的距离体现的，我们称这种产品或项目的空间定位点图为空间图，空间轴代表着消费者得以形成对产品的感觉或偏好的各种因素或变量。

在分析消费者对产品功能的需求度时，首选选择研究对象，如列出某个产品的所有产品功能；然后从目标市场中抽取一个样本人群（通常30-50人），让他们对产品功能的需求度打分；最后采用多维度分析获得一张代表了产品功能需求度关系的可视化图。

可视化图中的维度代表了消费者对产品功能需求依赖的关键要素，为方便起见通常选择2-3个维度。投保人购买保险产品时所需的第三方互联网工具产品功能在生命周期和需求频率上的多维度分析如图所示；通过多维尺度分析帮产品经理区分功能优先级，做出产品决策。

投保人互联网工具产品应用多维度分析

多维尺度分析优点是很明显的。研究者可以利用得到的位置结构图将研究对象进行分类，还可以对隐藏在数据背后的空间维度做出相应的判断和解释。

多维度分析通过把所研究对象的数量关系转化为直观图形，达到直观展现研究对象的目的；多维尺度分析的缺点是分析结果不是唯一的，结果可以在空间中旋转和平移，这为分析者对结果的解释制造了难度。

六、联合分析

联合分析法，又称结合分析法，是对结合效应的评价，从而有效地解决了传统调查方法中需要调研对象独立评价属性的问题。

联合分析有三种主要形式，包括权衡矩阵法、两两比较法和全轮廓法，其中又以全轮廓法最为常用；该方法提供给研究的参与者一系列的产品描述，参与者被要求浏览所有的描述，做出一系列的评价，对调研结果进行数学方法分析后，就可以导出该类产品的各属性的效用值。

对于市场研究领域，在联合分析之前的所有方法几乎都会使用重要性比率尺度来度量产品属性的重要性水平，即都会直接向消费者提问一个产品中他们最看重的属性。

这种方法有几个严重的缺点：首先，调研的经验表明，如果不限制条件的话，消费者倾向于认为每个属性几乎都是同等重要的；其次，消费决策很大程度上依赖的是整体的判断。当消费者被要求分离各种属性并且对各属性进行量化评价并且描述某个属性水平的高低将驱使其购买一个产品而不是另一个产品时，即使是最老练的消费者也将感到无所适从。

在联合分析中产品被描述成为轮廓，每一个轮廓由能够描述产品重要特征的属性和赋予每一属性的不同水平的组合构成。

消费者在实际购买时并不是基于产品某一属性而是综合考虑产品各个属性及属性水平从而做出购买决策的。因此消费者对某一产品轮廓的评价可以分解成构成这个轮廓多个属性水平的评价以及不同属性在决策时所占的权重。

在联合分析中用分值也叫做效用来描述消费者对某一属性水平的偏好，联合分析能够较好地模拟消费者购买的实际过程，从而客观、真实地测量消费者对某一产品的偏好及产品不同属性在购买过程中的重要性。

以QQ会员等级为例，如图向用户展示属性组合以及用户需求等级。在本例中，有8个不同属性，每种属性对应9种不同的属性水平，由此构成的属性组合可以满足不同的QQ用户的需求。

联合分析（腾讯QQ群产品会员等级划分）

联合分析是对人们购买决策的一种现实模拟。因为在实际的抉择过程中，由于价格等原因，人们要对产品的多个特征进行综合考虑，往往要在满足一些要求的前提下，牺牲部分其他特性，是一种对特征的权衡与折衷。

通过联合分析，我们可以模拟出人们的抉择行为，可以预测不同类型的人群抉择的结果；因此，通过联合分析，我们可以了解消费者对产品各特征的重视程度，并利用这些信息开发出具有竞争力的产品。

七、李克特量表

李克特量表是属评分加总式量表最常用的一种，属同一构念的这些项目是用加总方式来计分，单独或个别项目是无意义的，它是由美国社会心理学家李克特于1932年在原有的总加量表基础上改进而成的。

李克特量是目前调查研究中使用最广泛的量表，当受测者回答此类问卷的项目时，他们具体的指出自己对该项陈述的认同程度；该量表由一组陈述组成，每一陈述有“非常同意”、“同意”、“不一定”、“不同意”、“非常不同意”五种回答，分别记为5、4、3、2、1，每个被调查者的态度总分就是他对各道题的回答所得分数的加总，这一总分可说明他的态度强弱或他在这一量表上的不同状态。

李克特量表应用步骤“

1）收集大量（50～100）与测量的概念相关的陈述语句。

2）有研究人员根据测量的概念将每个测量的项目划分为“有利”或“不利”两类，一般测量的项目中有利的或不利的项目都应有一定的数量。

3）选择部分受测者对全部项目进行预先测试，要求受测者指出每个项目是有利的或不利的，并在下面的方向-强度描述语中进行选择，一般采用所谓“五点”量表：

非常同意
同意
无所谓（不确定）
不同意
非常不同意

4）对每个回答给一个分数，如从非常同意到非常不同意的有利项目分别为5、4、3、2、1分，对不利项目的分数就为1、2、3、4、5。

5）根据受测者的各个项目的分数计算代数和，得到个人态度总得分，并依据总分多少将受测者划分为高分组和低分组。

6）选出若干条在高分组和低分组之间有较大区分能力的项目，构成一个李克特量表；如可以计算每个项目在高分组和低分组中的平均得分，选择那些在高分组平均得分较高并且在低分组平均得分较低的项目。

我通常会在产品的早期创建一张范围矩阵表，用来列出所有讨论过功能和内容。这样一个范围工具就出现了，它可以用来支持人们讨论整体的优先级别，以及每一个功能的工作量，然后决定哪些功能应该纳入范围之内，而哪些应该排除在外。

在分析每一个功能的重要性的时候，把人物角色加入这个工具中，就能让这些用户始终停留在每一个人的脑海中，可以大大地帮助你在决定项目范围时，把人物角色变成其中一个积极的部分，如图所示。

李克特5点范围矩阵量表（功能需求度转化）

李克特量表的构造比较简单而且易于操作，因此在市场研究实务中应用非常广泛。

在实地调查时，研究者通常给受测者一个“回答范围”卡，请他从中挑选一个答案；需要指出的是，目前在商业调查中很少按照上面给出的步骤来制作李克特量表，通常由产品经理和研究人员共同研究确定。

文章来源：人人都是产品经理作者：长乘

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

评论(0) 浏览(3233)

302021-4

登录页需要注意的设计细节和逻辑

资深UI设计者

确保用户成功且无压力的登录体验需要我们不断地思考。

大家好，我是Clippp。今天为大家分享的文章是「登录页」设计。几乎所有的登录页看起来都大同小异，通过输入账号和密码就能够进入，但仔细思考会发现，每个登录页都有差异化的点，而这些点正是产品无一物二的地方。

1、什么是登录体验？

登录体验是指用户通过入口进入应用、网站或服务，建立自己的身份。

登录流程通常由主登录流程和恢复流程组成，其中主登录流程包括填写用户名、手机号、密码等，恢复流程包括忘记密码、重置密码、其他登录方式等。登录体验的目标是确保用户成功登录帐户。

2、设计熟悉的登录流程

使用简洁、常用的页面布局和文字，有助于用户轻松执行熟悉的操作。保持设计简单也有助于将体验轻松扩展到不同设备和屏幕尺寸。

▲ Pinterest采用了居中对齐的重叠式登录页设计，用醒目的红色按钮来突出登录动作，还支持Google和Facebook作为其他登录方式。

登录页是强调品牌的首要接触点。登录操作最好于中心位置，页面上的其他元素应谨慎增加，避免注意力从登录任务上移开。

设计思考：

用户花在登录页上的时间越少越好，要让用户尽快发现产品中的优点和价值！

3、专注设计

登录(或恢复)操作应引起用户的全部注意力：

最好将登录页表单放在页面中心位置；
不需要复杂或冗长的文字解释，例如可以利用简单的“输入密码”来提示用户完成操作；
要求用户一次只做一件重要的事情，例如将找回密码这种复杂的流程分解为多个步骤进行。

▲ Facebook保留用户的登录信息，并将恢复流程分为几个逻辑步骤。

▲ 亚马逊将辅助恢复选项放在“更多帮助”中，这有助于使主要操作保持重点。

设计思考：

使用卡片式布局；

将操作分为主要动作和次要动作；

使用尺寸大而突出的登录按钮；

尽量减少次要操作的次数，以避免使页面出现混乱。

4、给出明确反馈并在操作失败时提供帮助

在登录过程的每个阶段，用户都可能会失败。输入错误的邮箱，忘记密码或网络问题等，所有这些问题都可能导致登录意图急剧下降。

因此清晰及时的反馈设计对用户来说很重要。

▲ 信息输入错误时会提示错误具体的原因。

▲ 密码输入有误时，Facebook会在下方增加“使用Google登录”选项。

设计思考：

鼓励用户尝试合适的替代方案；

登录失败后，将用户导航到单独页面并组织其他登录方法；

展示最有效的登录方法，并在发生问题时及时对用户做出反馈。

5、多种登录方式提供灵活性

除了输入账号密码这种登录方式，最好提供一种或两种附加的登录方式以便用户选择，同时防止忘记密码造成无法登录的情况。

添加过多的登录方式会使页面混乱，降低登录意图，附加选项应该限制为2或3种方式。

▲ Medium登录表单的设计尽管很清晰，但过多的登录方式会阻碍用户的选择和判断。

▲ Airbnb登录页能看到大量的辅助登录方式，过多的选项可能会导致用户的认知负荷。

设计思考：

当前无密码登录正在迅速普及。在很多移动App中，基于手机号的身份验证已成为常态，指纹和FaceID也出现在许多地方，从而实现了无缝和安全的身份验证流程。

找到产品最适合的登录方式，并将其作为主要选择能有效提升效率！

6、登录意味着信任

登录涉及用户输入敏感的个人数据，例如手机号、邮箱、密码等，用户愿意输入信息意味着他们信任这个平台或产品。

虽然减少与用户的摩擦很重要，但有时网站也会提供额外的身份验证来确保用户信息的安全。

▲ B站利用文字验证方式来增强用户帐户的安全性。

设计思考：

登录表单应该代表品牌的形象，任何视觉上的变化都必须慢慢进行，因为完全改变视觉设计可能会导致缺乏信任。

7、确定用户类型

登录意图是一种体验，在这种体验中用户角色和类型可以无所不包。

可以尝试以下方式来定义用户的范围以便更清楚的了解用户：

登录渠道：与PM合作找出在登录流程中用户交互和退出的关键阶段。

登录入口：用户是通过邮箱、搜索引擎还是通过应用跳转到登录页？

常用设备：手机、浏览器等设备可以为用户带来个性化的体验。

用户群组：利用年龄或地理位置等方式也能进行分离用户群主的划分。

8、登录页设计实例分析

通过分析具有代表性的登录页设计来展示登陆页的多种设计表达。

▲ Google采用多阶段的登录方式，邮箱和密码分两步进行输入。这种格式对谷歌来说有一些安全优势，也可以在下一步为用户提供个性化的选择。

▲ Uber的登录页采用简单的样式，注重使用体验，引导用户输入手机号来进行下一步。

▲ Facebook利用右对齐的登录表单很好地集中注意力，左边的空间被用来展示品牌的信息和形象。

▲ 亚马逊的登录页从视觉设计上看有些陈旧，但却是管理用户注意力的一个很好的例子。黄色的“继续”按钮和简洁的页面使登录看起来简单而快速。

▲ Figma的登录页位于画面中心，顶部首先展示的是以Google登录，这可能是Figma首选和推广的登录形式，页面整体的设计利用线框组成，非常简洁高效。

文章来源：展开作者：Clippp

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

评论(0) 浏览(2232)

292021-4

开篇

宽度单位我是用百分比还是px？还是rem？区别是什么？
什么是屏幕尺寸、屏幕分辨率、屏幕像素密度、设备像素、css像素？浏览器窗口大小和设备大小和分辨率大小区是什么区别？
什么是响应式网站，自适应又是什么？两者有何区别和联系？
百分比宽度布局和流式布局和前者的关系是什么？
既然响应式这么流行，为何淘宝、京东等没有去做，而是单独开发了一个移动端版？这里面有那些坑需要避开？

历史长廊

在早期，硬件设备落后，网页使用的是绝对静态布局为主，绝对固定宽度的布局被称为是静态布局（StaticLayout），也有叫固定布局（Fixed Layout）。

后随时代变迁，技术发展。因浏览器的增多，开发者们忙于兼容各种浏览器。在这个期间，实际已经有了针对各设备适配的解决方案，只是未成为主流，这种新布局方式叫自适应布局（Adaptive Web Design，简称AWD）。

在当时，大多指的就是宽度自适应布局。在这种新思想下，又出现了两派的具体解决方案：百分比宽度布局和流体式布局（Fluid Layout）。

在当时，大家都还没有响应式布局的概念，但此时出现了一个新的词--渐进增强。渐进增强出现后，另一个词优雅降级也随之出现了。这里只是举个典型的例子：gmail和qqmail。这两个都是百分比宽度布局，都属于自适应布局，但有区别。

qqmail就是css hack的完美体现，你用任何一个浏览器，几乎可以看到同一个样子的邮箱，为的是用户体验统一。gmail则使用了渐进增强，你的浏览器越新越强，你看到的效果就越好，为的是用户体验增强。再后来，Google发布了Android，移动互联网爆发，html5标准发布。

互联网大战从PC打到了手机。手机虽然屏幕变小了，但是却提供了更丰富的功能，用户要求不断提高，网站更加看重的是用户体验了，所以，谷歌式的渐进增强被广泛认可，结合自适应的思想，出现了响应式布局 (Responsive Web Design)的概念——2010年由Ethan Marcotte提出。

描述响应式界面最著名的一句话就是“Content is like water”——无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备。

现如今，为何需要考虑多设备的兼顾呢，依然是因为时代发展与生活方式的变迁：

即便是PC或Mac用户，有查显示只有一半的人会将浏览器全屏显示，而剩下的一般人使用多大的浏览器，很难预知；
台式机、投影、电视、笔记本、手机、平板、手表、VR……智能设备正在不断增加，“主流设备”的概念正在消失；
屏幕分辨率正飞速发展，同一张图片在不同设备上看起来，大小可能天差地别。

结合自身产品用户访问浏览器分辨率
鼠标、触屏、笔、摄像头手势……不可预期的操控方式正在不断出现。

因此我们需要在了解基本布局方式的特征下，选择适合自身产品的布局实现方式。

布局方式对比

静态式、自适应、流体式、响应式布局，A+R混合布局的特点对比如下

静态式布局：

窗口缩小后内容被遮挡时，拖动滚动条显示布局。不管在哪种设备，哪种浏览器上浏览都是一个样。移动设备上则显示太小或不全。

自适应布局：

用自适应技术(Adaptive)我们可以开发和提供不同的布局来为类似纯触屏或者混合触屏设备这样的一类具体场景提供最好的体验。

分别为不同的屏幕分辨率设备设计不同的样式布局，相当于多个静态布局组成的一个系列合集，每个静态布局对应一个屏幕分辨率范围，页面通过百分比自动适配设备屏幕分辨率和可视窗口大小，当可视窗口改变时，不会出现横向滚动条，UI，图片，文字会自动缩放，元素内容、布局、交互方式基本不变。

弹性布局：

以百分比作为页面的基本单位，可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度，并能完美利用有效空间展现最佳效果。

流体式布局：

属于自适应的一个子集，也是通过百分比自动适配设备屏幕分辨率和可视窗口大小，不同于百分比自适应的是随着窗口大小的改变，页面的布局会发生小的变化，可以进行适配调整，这个正好与自适应相补。

响应式布局：

如果从广义上讲，响应式布局实际上就是更好、更机智、更灵活的去实现自适应，他们都算是一种弹性布局。再通俗点讲响应式重在于「响应」它会随着设备属性（如宽高）的变化。

页面的设计和开发应当根据用户行为以及设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和删格、布局、图片、css media query的使用等。

狭义上讲，响应式网页设计指的是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。

A+R混合模型布局

R和A上的区别

当响应式设计在基于预定义断点之上用CSS或者JS调整布局和内容。调整方法提供基于用户代理和设备类型的预结构化模版。

他们之间主要的区别是DOM结构，当采用响应式思维开发时，HTML代码在各种情况下都会一样（除非你用JS移除某些DOM节点），而在自适应开发中我们可能会有不一样的代码结构和体验。

R采用流体＋断点，在断点之间，页面依然会随窗口大小自动缩放（通过fluid grid），直到遇到断点改变界面样式布局甚至内容。R一般来说需要在网页设计初期就开始（通常采用mobile first策略），所以旧的网站要做RWD很可能要完全重建。

A只在针对几种分辨率（如320，480，760，960，1200，1600px）进行优化，在断点之间的自动过渡比较少。而A则采用保留现有桌面网站（desktop version）而对于更小的分辨率做针对性的优化（适应），减小重构的成本。

两种设计思维都是有效的，需衡量在项目中有多少组件、复杂性如何以及是否存在一种体验是适合所有用户的。开发web应用时经常会用到响应式设计，例如通过自适应开发来构建定制化体验。

两种方法各有利弊，但是如果同时使用它们到底会得到什么呢？A+R模型结合了基于单个主要临界点的自适应和响应式方法。

混合式布局就是为不同终端设备的屏幕分辨率定义布局（适配各种尺寸的PC、手机、穿戴设备等等），在每个布局中，页面元素随着窗口调整而自动适配，混合了百分比、像素为基本单位的组合方式。可以把混合式布局看作是弹性布局、自适应布局的融合。

自适应布局、弹性布局、混合布局都是响应式布局方式的一种。其中自适应布局的实现成本最低，但拓展性比较差；而弹性布局与混合布局效果都是比较理想的响应式布局实现方式。

很多时候，单一方式的布局响应无法满足理想效果，需要结合多种组合方式，但原则上尽可能是保持简单轻巧，而且同一断点内（发生布局改变的临界点称之为断点，后面内容会讲到）保持统一逻辑。

否则页面实现太过复杂也会影响整体体验和页面性能。一般通栏、等分结构的布局适合采用弹性布局方式，非等分的多栏结构布局则需要采用混合布局的实现方式。

选型

如何考虑实践过程中的判断呢。一是看应用场景，二是看如何设计“响应式”方案。简单、轻量的页面直接用media query实现响应性就很好。比如blog、小型企业站之类。现在的CSS框架基本都具备响应性。

但请注意响应式不仅仅是响应式布局。对于大型站简单用media query是远远不够的。于是在同一个controller层上，识别UA，渲染不同版本的模板，组合相应的静态资源。这也算是响应式。开发及维护成本明显提高。

当各个版本间的差异很大时，维护成本很可能会大到无法接受。即便分开做，架构上也要调整，后端服务化，应用层app化。

根据不同公司的技术特点，调整的成本也难讲是否可行。对于大型站，分开做更清晰，同时用响应式组件解决复用、功能同步的问题。总之，根据场景响应式可以从各种层面，各种粒度上做。这是现代web开发的特点。

建议开发一套响应式电脑网站（过渡到平板端，不过渡到手机端）和开发一套响应式手机端网站（过渡到平板端以下的尺寸，不过渡到平板端）响应式布局有可能造成冗余的代码较多，对研发的要求也更高，比如如何更好地让图片，适配，UI动画自适应各种布局。

大站还是要考虑数据计算和承载的问题，会对桌面和移动端输出不同数据，减轻压力。

实践与技巧

首先，我们需要了解几种分辨率的差别。

ps：原生应用可查询横纵两个方向的像素密度，通常浏览器可查询1个系统像素对应多少物理像素。而设计角度通常需要参考的是所获取的系统分辨率

以一个SaaS类后台产品为例，对于基本流量来自Web端网页的产品而言，需要了解当下的浏览器分辨率现状 Web端不同屏幕分辨率占比情况，数据来源百度统计，如图所示：

如上所述，选择适配方式时，设计目标为：区分web与pad端可共享的设计布局大于手机端，且产品规划上web端为主流量来源，pad端属于短期兼顾。考虑技术维护成本与开发成本的平衡，于是判断需要选择A+R模式来完成产品的跨端设计。

自适应（A）方法能让我们在不同的设备上有不同的体验、内容甚至是功能。如将960px作为主要的自适应临界点，根据全局统计信息定义，我们会得到一些相似处：

左侧的可视区代表整个屏幕小于960px时的具体布局和内容
右侧的可视区代表整个屏幕大于等于960px时的另一种布局

在使用响应式（R）技术时，我们可以利用主要临界点创建两个互不相同的体验情景，每种体验里，我们都可以在可用空间内定义二级临界点去调整布局。

通过结合自适应和响应的方法，我们得到A+R模型。利用自适应技术，我们将致力于体验和功能，作出两种不同的情景设计。使用响应式组件，我们可以处理上下文内的UI组件和布局。

这种设计方法要求设计师真正了解他们想要提供的体验，以便于定义要遵循的模型。此模型非常适合那些在较少功能或结构完全不同的小型移动设备上运行的大型APP。就像你看到的，你的产品将具有很强的灵活性，但同时也很复杂。

因为你要处理不同的代码库和环境（非强制性）,Twitter、Facebook和Github将此模式应用在他们的移动网站上。如果你在移动设备上浏览这些网站，则可以根据移动用户的期望来检验它们是如何改变的用户体验的。

其他辅助手段

删格

栅格系统可以帮助我们设计，但却不能保证我们的设计。它有多种可能的用途，并且每个设计师都可以寻找适合其个人风格的解决方案。对于简化复杂的响应式布局规则而言，这是一项十分有效的辅助手段。

1. 列和槽（Columns and Gutters）列（Column）用于对齐内容。其中的槽（Gutter）是指相邻列之间的空间，把控页面留白,有助于分隔内容。

2. 页面边距（Side Margins）页边距是指内容和屏幕边缘之间的空间。将边距宽度定义为固定值，这些值决定了每个屏幕尺寸的最小呼吸空间。

3，用于组成栅格的列数称为列结构。8、12、16和20是响应式布局中最常见的几种列结构。而这取决于我们对产品的设计要求。12列结构是相对灵活的。它可以进一步细分，将内容排列在4-4-4或3-3-3-3大小的文本框中，也有部分设计系统采用来24列的形式，如Ant-D

4，断点是指屏幕尺寸的特定范围，列结构、列宽、槽宽和边距都取决于断点。在这个范围内，布局会根据可用的屏幕尺寸重新调整，以获得最佳的布局视图。

如果较小的屏幕有足够的可用空间容纳内容，则列将按比例缩小。如果一列的内容无法在较小屏幕上显示，该列将垂直放置图文内容。

5，网格规则，列跟槽的宽度是以网格作为基本单位来做增减，所以应该先定义好栅格的原子单位，“网红款”8点网格指的是设计页面时，也应该遵循8点规律。值得注意的是，列跟槽的值尽量取8的倍数，但不是非得是8的倍数。

产品中各类元素应该遵循这个倍数原则（图标、组件大小等），不同的设计系统根据自身需求，设定这个规则。例如在Material Design中使用的是2X网格。

6.流体栅格与混合删格

流体栅格有不同宽度的列，固定的槽和固定的边距。流体栅格有灵活的内容宽度，根据屏幕大小变化在流体栅格中，列可以增长或收缩以适应可用空间。

混合栅格既有不同的宽度，也有固定宽度。在现代布局中，一些元素超出了网格边缘，与屏幕边缘对齐。页眉、页脚、出血都是一些常见的例子。

如果内容宽度大于可用的屏幕尺寸，那么一个固定栅格就会转变成一个适应屏幕可用空间的流动栅格，以充分适应内容。

结语

设计需在技术方案前介入，根据你的产品特点，进行设计方案评估，可借助的手段有删格，网格规则等，设计断点规则时，需关注设备的常见系统分辨率。

移动和桌面设计的差别远不止是布局问题。只要有足够的编程量，这些差别是可以通过响应式设计来解决的。事实上，你可以认为如果一种设计不能兼顾两种平台的主要差别，就不能算是合格的响应式设计。

但是，如果确实想要处理好平台间的所有差异，我们就回到了原点：进行两种不同的设计或者使用A+R的模型，在寻求合适的过程中，关注技术的革新。

A与B不是硬币的正反面，它们为了解决同一个问题而生，是同一种思想的延伸。

文章来源：站酷作者：酷家乐

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

评论(0) 浏览(2189)

292021-4

node.js + mongodb 在云服务器上的部署

引言

因为自己学习了前端大部分知识，然后想自己做网站，于是学习了node.js，可不知道如何将项目发布到网上，所以花了很多天的时间，搜集了很多的资料，才将项目部署到服务器上，这里给大家分享一下我的部署过程，以免大家走弯路。

公众号：前端印象

不定时有送书活动，记得关注~

关注后回复对应文字领取：【面试题】、【前端必看电子书】、【数据结构与算法完整代码】、【前端技术交流群】

正文

一、购买服务器

这里我们就用腾讯云的服务器吧，因为优惠感觉还是比较大的，性价比也高。

先进入学生页面，购买优惠的服务器套餐，每个月才10元，学生服务器优惠套餐链接。也可以参与限时的秒杀活动，一年才99，用来学习再合适不过了，服务器显示秒杀链接。如果需求大的话，也可以直接买那些高配的服务器其他服务器链接
在这里插入图片描述
购买中，所有都默认选项。

购买完成后，进入控制台
在这里插入图片描述

然后重置一下密码，一定要记住

我们鼠标移到这看一下服务器的系统是不是CentOS，因为我们要用到这个版本

如果不是的话，就可以点击重装系统，自己选择一下CentOS这个系统即可，并且重装时设置的密码也一定要记住哦。
在这里插入图片描述

这样一台服务器也就购买成功了。

二、登录服务器

网上下载一个xshell5，用于我们登录我们的服务器
Xshell5下载地址
下载好以后，打开Xshell5，点击新建
去复制一下我们的公网ip
然后按以下提示输入

在这里插入图片描述
以下配置完成后直接点确定

三、给服务器安装宝塔面板

在下图输入框中，输入以下代码，并按回车

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


    
        1

在这里插入图片描述
遇到该命令，直接输入y 然后回车，就他自动安装吧，时间就点长，耐心等待一下

安装好后，会出现这个图示界面

Bt-Panel：是我们即将访问的网页地址
username：该网页的登录账号
password：该网页的登录密码

在这里插入图片描述
访问该页面，并输入相应的账号密码进行登录

登录了以后点击直接安装

这时候别闲着，去软件商店里，找到这两个软件安装一下

四、配置服务器、网站

先回到我们的腾讯云控制台
在这里插入图片描述

按下图输入，并点完成

接下来就可以将我们的项目放到压缩文件中，然后上传到宝塔面板中了
，上传好后直接点解压就可以了
找到我们的pm2，开始设置我们的项目

然后点击映射，将我们的公网ip 映射一下
在这里插入图片描述
如果这里的端口是3000，我们需要将入口文件中的端口号改一下，我这里是改为5000了

入口文件的端口号修改好后，我们需要放行一下我们项目网站的端口号，即做以下两个步骤

然后重启一下项目

这样一个node.js项目就部署完成啦，接下来就通过公网ip + 端口号的方式进行访问
在这里插入图片描述
可以看到访问成功了。

结束语

这是我查阅了大量资料，才部署上去的node.js 项目，因为我是做前端的，所以不太懂运维这些的，只能做这样一个简单的部署，不过对于新手学习已经完全足够了，希望这篇文章能帮助到你们。

转自:csdn 作者：「零一」

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

评论(0) 浏览(3197)

292021-4

接口测试之（在Linux上搭建Tomcat环境）

前端达人

接口测试：

接口：是传递数据的通道。接口测试主要用于检测外部系统与系统之间以及内部各个子系统之间的交互点。

测试的重点是要检测数据的交换，传递和控制管理过程，以及系统间的相互逻辑依赖关系等。

接口的分类：

外部接口：调用第三方平台的接口

内部接口：登陆和注册这种单独的内部接口

1、首先下载好tomcat软件包

2、通过Xftp软件传输到我们Linux虚拟机的 /opt目录下

3、通过Xshell我们可以在/opt目录下看到tomcat软件包（如下图红色框内）

4、我们解压tomcat是用：tar -xzvf apache-tomcat-8.0.30.tar.gz 命令进行解压，可以看到解压后的文件（如下图绿色框内）因为我已经解压过了，就不给大家示范了（这里要注意的是因为我在opt目录下的，所以用这个解压命令，如果你没在你要解压的目录下就要在后面加 -c 这个参数）

5、接下来我们下载JDK（注意JDK的位数和系统区别）：我是在64位Linux系统部署的

6、上传和解压和tomact一样都是tar.gz格式的，解压命令都一样，也是放在opt目录下

7、验证JDK是否安装好（java -version）

8、在其他目录下执行（java -version）是不成功的，所以要配置JDK环境变量，通过编辑 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命令，使环境变量生效，现在使用Java -version目录下验证JDK是否已经全局生效

10、在bin目录启动tomcat，查看tomcat环境是否能可以启动（ ./startup.sh 启动 ./startup.sh 关闭）

11、访问地址出现如下图证明tomcat环境搭建好了（你自己虚拟机的IP+tomcat的端口号）

12、修改tomcat的端口号，目录:在/opt/apache-tomcat-8.0.30/conf，用vi server.xml 修改端口号

13、注意:启动tomcat要关闭防火墙，最后养成打开日志文件习惯

转自：csdn 作者：寒門子弟

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

评论(0) 浏览(2674)

292021-4

如何将访客转化为潜在客户？这个8个网站优化策略了解下

seo达人

文章目录

你是否已经将自己的网站优化到最佳状态了呢?通过优化来产生潜在客户是转化网站已经获得的流量的最好方法之一。

然而，如果你认为在网站的主页上添加几个“点击这里”的CTA策略(站长之家注：CTA即Call-to-Action，行为召唤，指在网站、App中用于引导用户自发完成某种特定行动。)就能获取更多的潜在客户，很遗憾的说，这个想法大错特错。

在这篇文章中，将为大家介绍通过网站优化将访客转化为潜在客户的 8 关键策略。

实时聊天和聊天机器人

这是对任何网站的一个重要的补充。你可以与网站访客的人进行对话，以获得建议、指导、帮助，有时甚至是销售。实时聊天通常会出现在网页的底部，会出现一条自动消息，比如“我今天能帮你吗”，然后你就可以开始对话了。

你扮演数字客服的角色。重要的是，实时聊天不要出现在网站的每个页面，因为用户可能会觉得这样做相当烦人。

因此，建议在网站的主页和服务页面上开启在线聊天功能。因为主页是用户在点击网站时通常会看到的第一个页面，因此实时聊天弹出窗口应该充当问候消息。从服务层面来看，它可以为用户提供关于产品的建议或帮助。以京东首页为例，右侧就提供了“客服”服务，实时为客户答疑解惑。

聊天机器人是进一步开发实时聊天功能的工具。聊天机器人是一种软件，它提供自动的、预先确定的响应，这些响应被编程为像人类一样的行为。

聊天机器人可以提升网站体验，因为它们可以帮助你自动识别潜在客户和查询，从长远来看可以节省你的时间。一旦设置完成，你需要做的就是偶尔检查一下信息，以确保信息仍然适合你的目的，然后你就可以离开了!

提供可下载的内容

提供可下载的指南、博客和见解对于数据获取以及允许访问者直接与网站产生互动都非常有用。

可下载内容要从销售流程开始，如果内容已经被下载，这意味着潜在客户已经对你的产品或服务产生了兴趣。这样就避免了尴尬的对话，而销售人员就可以开始向潜在客户推送更进一步有用的内容。

通过简单地添加一个CTA，就可为自己节省了许多陌生对话。

可下载的内容也使网站更具互动性。您可以通过在用户下载内容之前添加要填写的表单来捕获关于用户的数据。然后将数据保存并放入CRM中。接着，您就可以创建工作流，用户将在其中接收其他内容块。

请记住，为了让人们下载网站的内容，提供的内容必须对他们有价值。否则，虽然网站登录页面点击量很高，但下载量却少得可怜。因为如果用户没有给出他们的联系方式，也意味着提供的内容没有价值。

所以，如果你花时间和资源去制作一份有真正价值的高质量内容，那么就会获得不错的投资回报率(ROI)。

提供动态、智能的CTA

仅仅增加一个“点击这里”或“了解更多”是不够的，CTA在最近几年变得流行起来，所以你网站的CTA一定要大胆、独特，并与网站、博客、指南等相关。

行动呼吁的作用不仅仅是一个带有命令的彩色按钮，在某些情况下，它们是一些细微的差别，可以产生巨大的影响。

有两种类型的CTA，主要的和次要的。

主要的CTA是你希望客户采取行动的地方，例如“立即购买”、“立即申请”。

次要的CTA的目的让用户了解某些主题或服务。例如，“了解更多”、“继续阅读”，目的是为客户提供进一步的信息和细节。

现在很多营销平台已经有直观的系统来帮助创建CTA。例如，HubSpot就建立“智能CTA”，这有助于优化访客的网站体验。

本质上，智能CTA使用动态内容在合适的时间向联系人显示合适的内容。CTA会根据访问它的用户而改变，你可以根据选择的标准为不同的用户提供不同的CTA，而不是死板的同一内容。

这有助于根据访问者不同的访问阶段，为他们提供个性化的品牌体验。

通过工作流程培养潜在客户

没有一个潜在客户就能保证成功销售，所以需要确保引导他们的方式是正确的，让他们通过你的销售渠道进入你销售周期的决策阶段。

一旦潜在客户下载了您的一部分内容，就可以将他们放入工作流程中。然后发送让他们感兴趣并且有价值的内容。

例如，如果潜在客户下载了“成功重新设计网站的 7 个步骤”资料，我们不会向他们发送关于SEO或潜在客户生成等主题的内容，而是继续围绕他们最初表示感兴趣的主题提供相关内容，并继续让他们参与我们的服务。

你的目标应该是通过销售漏斗推动销售，直到他们能够购买为止。热情、自动化(但仍然是个人)的电子邮件有助于加快销售进程。

根据国外数据报告显示，培养潜在客户的公司比不培育潜在客户的公司“潜在销售客户”多50%，而成本则低33%。

提供表格提交选项

提供可下载内容的表单是为企业获取数据的另一种方法。表单通常存储用户必要细节和信息，包括姓名、性别、业务、电子邮件和电话号码。

表格应该添加到的网站上吸引最多流量的页面。通过设置百度分析之类的统计工具，就可以看到有多少人在访问你的网站，有多少人实际上点击了表单。

表格也有助于建立电子邮件列表。如果你的标准包括在网站上填写表格时的电子邮件，就可以将它添加到你的邮件列表中。邮件列表中的潜在客户越多，就越有可能通过你的内容收到下载、咨询或回电。

展示正面评价案例

当你购买一个新产品的时候，是否会去看看别人的评论和建议呢?

可能90%的人都会。因此提供评论和证明，可以帮助用户作出最终的购买决定。

那么，为什么不利用那些顾客的积极的评价来帮助推销你的产品呢?

《心理科学》杂志发表的一项研究强调，当让人们在两种相似的产品中进行选择时，大多数人会选择评论最多的产品。

最近，TrustPilot（全球最大的在线评论社区）发现92%的消费者表示购买决定受到在线评论的影响。他们还发现：

72%的消费者会在阅读正面评论后采取行动
88%的消费者相信评论和个人推荐

虽然这些发现主要集中在B2C，但也有证据表明，评论和评价在B2B决策过程中变得越来越重要。

根据 2018 年一份关于评论对B2B买家和卖家的影响的报告显示，92%的买家更有可能在阅读了可信的评论后购买产品或服务。然而，目前只有43%的B2B企业将评论作为其营销策略的一部分。

这显示了B2C和B2B企业的巨大潜力，它们不仅可以为网站添加推荐信，还可以满足TrustPilot等平台的需求。

适当的弹窗设计

如果使用不当，弹窗可能让用户感到相当的恼怒。相反的，如果合适应用的话，则能起到非常有用的效果。关键是不要过早地在每一页上都应用到弹窗。任何人都不想要在刚登录一个网站页面就巨大的弹出广告。

您应该为弹窗设置一个触发器，例如，如果它们滚动到站点上的某个特定部分或某个特定页面上。一些弹出窗口非常有用，因为它们可以触发对话并立即吸引用户的注意力。

亚马逊有一个非常好的弹窗设置，它不是太大，并促进一个非常明确的信息。在“你的账户”旁边有一个弹出框，上面写着“新客户，登录吗?从这里开始”。

你可能没有捕捉到潜在客户的所有的细节，但比以前更接近目标了。

测试，测试，再测试

最重要的一项工作，它它并不是一个真正的功能，但它对任何网站来说都是至关重要的一步，也是大多数企业主不够重视的地方，那就是测试。

像A/B测试这样的方法是非常有效的，并且可以提高网站的点击率(CTR)。

A/B测试是使用一个变化元素来比较网页、电子邮件或其他营销资产的两个版本的过程。

在网站上测试一些简单的功能，比如CTA，登陆页面的布局，图片和不同类型的内容，都会对网站的成功产生巨大的影响。

反复测试，直到找到最有效的部分。

结论

越来越多网站不断的更新优化，作为企业主关键就是要积极主动拥抱变化。你需要依靠潜在客户发展自己的业务，那么使用上面的技巧，把你的网站访问者转化为潜在客户的挑战变得简单了一点。

注：文章编译自medium

文章来源：站长之家

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

评论(0) 浏览(2402)

292021-4

体验好的电商APP长啥样？这里总结了7种绝佳的UI设计原则

seo达人

最近，国外设计师Jennifer Jhang对一些顶级的电子商务APP如耐克、苹果、三星、Ebay、Banggood以及Best Buy等产品进行了研究，并总结了 7 种主要的用户界面模式。

1. 登录：多个选项

登录通常是第一个障碍，设置不当会导致用户花费很多精力在上面。为了减少用户登录的难度，可以增加登录的灵活性。

尝试“懒人”登录模式。这种情况下，应该设计可选择的登录选项，比如可以让用户直达购物车或者其他功能。比如允许用户在创建账户之前，可以用游客的身份试用APP并体验其价值。

另外，考虑通过将登录选项直接关联外部账户如Facebook、谷歌(国内的比如微博、微信等)就能注册新的账户登录。这让用户可以跳过填写注册表单，而只需单击 2 次即可登录。

在Banggood的账户界面，你可以清楚的看到，想要访问“已查看”、“优惠券”内容就需要登录，Banggood还在登录时提供关联外部账户选项。

2. 搜索：支持文本、图像、声音、条形码

Pinterest CEO说过：“我真的相信相机将成为下一个键盘。”

互联网开始于一个基于文本的搜索栏，但正在演变为可以采取其他多种方式进行搜索。比如采用一个文本和图片方式的组合，无疑可以增强搜索交互。

通过视觉人工智能，图像搜索开辟了一个新的搜索方式。你不仅可以通过视觉线索识别产品，图像搜索还可以让你基于图像上下文发现新想法。例如，如果你拍了一张西红柿的照片，搜索结果可能会提供西红柿炒蛋的食谱。

另外扫描条形码可以减少出错的可能性，并能让你直接找到产品。语音搜索增加了可访问性，并为忙于其它事务的用户提供了便利。

3. 浏览：产品类别

除了直接搜索，用户还参与浏览来查找商品。产品类别可以让用户更清晰有序的的方式浏览和发现产品。

产品类别通过以一种直观的方式将产品进行分组，从改善用户搜索查找产品的能力。这就像走进一家杂货店，一眼望过去就是的我们想找的商品商品摆放的大概位置。

很多应用程序有一个单独的产品分类屏幕。其他的包括在“主页”页面上的产品类别部分。为了能向用户提供更愉快的浏览体验，可以考虑将图像或图标与类别标签结合起来。

下面，你将看到每个应用程序处理产品类别显示的不同方式。

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

卡片是用户首先与APP交互的UI元素。卡片的多样性和一致性有助于为应用创造一个让人深刻的第一印象。

尝试为不同类型的信息创建不同类型的卡片。这在视觉上区分了信息，并帮助用户学习视觉语言。没有多样性，很难一眼就看出一张卡片代表了什么，因为它们看起来都一样。

另外，也要努力使卡片在每个屏幕上保持一致。如果你有一个特定信息的卡片类型，试着让它始终保持相同的设计风格和尺寸大小等等，这样它才容易识别。

苹果商店使用了多样性和一致性，创造了一个清晰的视觉词汇。

5. 不同用户阶段采用不同的CTA(行动呼吁)

本文开头提到的几个APP中采用的CTA按钮有几种常见模式。通常在用户不同浏览阶段会有不同的CTA按钮。

例如，Ebay有连续的“保存”、“添加到购物车”和“现在购买”按钮。当你想立即购买某一特定物品时，“立即购买”是很好的选择。然而，当用户等待打折或比较商品时，“省钱”按钮则是更好的选择。“添加到购物车”在用户一次购买少量物品时很有意义的。

而当用户还没有完全准备好购买时，页面只有一个“现在购买”按钮，那么无法解决他们的加购需求。这可能会阻碍用户的购物体验。

6. 特定产品页面的顶部标签

为了试图包含购买决策所需的所有细节，特定产品的详情页可能很长。

根据尼尔森的一项研究，以下是一个产品页面最受欢迎的功能列表：

必须拥有：产品名称，图像，价格，选项，可用性，添加到购物车，描述

值得拥有的：评级或评论，附加图片，视频，缩放/平移，相关推荐，愿望列表

在页面顶部放置标签是帮助用户快速找到感兴趣话题的一种方法。它们甚至在用户开始向下滚动之前就显示屏幕内容。

标签应该包含相同层级的相关内容，同时应该要可展开更多详情。在添加主题时，可以使用可滚动的固定标签。

在这里，Samsung Shop和Chewy使用固定标签，而Drop使用可滚动标签。

7.付款：渐进式展示

渐进式展示信息是指显示适量的信息。它通过多屏展示分解信息，同时仍然揭示主要主题，从而降低了复杂性。

如果没有做到这点，用户可能会觉得结账很乏味，甚至会放弃购物。面对一张填满信息的表格会让人看着难受，看到同样的表格被分成几个部分，感觉上就更容易处理。还要记住，你需要在页面的下半部分留出放置键盘的空间。

组织这种复杂性的一些方法是使用手风琴效果、列表或进度指示器。手风琴垂直展开，展开列表就会展示一个屏幕页面，显示更多信息。进度指示器显示用户在结账步骤中的的进程。

耐克似乎使用了手风琴效果、chewy和使用列表模式，而Drop在结帐时使用了进度指示器。

结论

通过研究当前的APP，你可以学到很多东西。观察产品设计决策背后的原因，我们可以找到新的见解。使用合适的UI模式创建一个从下载到结账的无缝体验的APP。

注：文章由站长之家编译自uxdesign

文章来源：站长之家

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

评论(0) 浏览(2757)

首页

前言

项目技术简介

系统实现的功能点

服务端技术

前端技术

数据库的设计

框架结构搭建

SSM项目脚手架搭建

测试Demo

POJO类

Spring核心配置文件

Spring-Mybatis配置文件

SpringMVC配置文件

pom依赖

UserMapper

UserService

UserController

UserMapper.xml

运行结果

错误记录

运行的界面显示unkown the request

一、马斯洛需求层次理论

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

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

3. 第三层次：情感和归属的需要

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

5. 第五层次：自我实现的需要

二、KANO 模型

1. 基本型需求

2. 期望型需求

3. 魅力型需求

4. 无差异型需求

5. 反向型需求

三、因子分析

四、聚类分析

1. 目标用户的群体分类

2. 不同产品的价值组合

3. 数据挖掘、分析、应用

五、多维度尺度法

六、联合分析

七、李克特量表

1、什么是登录体验？

2、设计熟悉的登录流程

3、专注设计

4、给出明确反馈并在操作失败时提供帮助

5、多种登录方式提供灵活性

6、登录意味着信任

7、确定用户类型

8、登录页设计实例分析

开篇

布局方式对比

A+R混合模型布局

其他辅助手段

结语

node.js + mongodb 在云服务器上的部署

引言

正文

一、购买服务器

二、登录服务器

三、给服务器安装宝塔面板

四、配置服务器、网站

结束语

实时聊天和聊天机器人

提供可下载的内容

提供动态、智能的CTA

通过工作流程培养潜在客户

提供表格提交选项

展示正面评价案例

适当的弹窗设计

测试，测试，再测试

分类

日历

链接

个人资料

存档