Web产品仪表盘设计案例，附作品地址

Posted 2023-04-06 ChuanYang Chen

Web仪表盘产品设计案例

前言

Web应用仪表盘是一种信息可视化工具，用于向用户呈现复杂数据的概览和摘要。它可以帮助用户了解关键数据的趋势、变化和异常情况，从而指导他们做出更好的商业决策。

以下是几个产品设计原则可以帮助您创建一个有效的Web应用仪表盘:

1. 易于使用：仪表板必须易于使用，让用户能够快速找到想要的信息，并且不会让他们感到迷惑或困惑。
2. 重点突出：仪表盘应该突出重点信息，以便用户可以快速获取关键见解和采取有意义的行动。
3. 可定制性：允许用户根据自己的需求自定义仪表板，包括添加、删除和重新排列组件。
4. 数据可视化：使用图表、图形和其他可视化元素来帮助用户更轻松地理解数据。
5. 简洁明了：保持简洁明了，避免过多的信息和混乱的排版。
6. 及时更新：确保数据及时更新，以反映最新的业务趋势和变化。
7. 良好的响应性：仪表盘应该良好的响应性，能够适应不同的设备和分辨率，并且能够在多种浏览器上正常工作。

这些原则可以帮助您设计一个易于使用、功能强大、灵活和易于定制的Web应用仪表盘，从而提供有意义的见解和价值。

案例

简洁，功能分明，有主次之分，左右结构上下结构分布均匀。但可以展示的模块偏少，只有6个，借鉴魔改需要看业务需求。

Web仪表盘模板_素材CNN

数据可视化！12款仪表盘网页设计 - 优优教程网 - 自学就上优优网 - UiiiUiii.com

样式偏国外风格，比如ClickUp这类应用。结构上看起来没有上一个那么简洁。就是这个广告位感觉还不错，摆放合理。有7个展示模块，一页模块数量设计的比较合理。

这一个适合展示关联性不高的数据，一共有11个展示模块，页面比较多模块可以放东西。布局也比较简约。适合国内的系统。很适合做教育类的应用。

这一个看起来就中规中矩，中间有个折线图可以展示一些比较关键的数据，但其他几个模块比较难看出数据的主次。但是布局上是符合国内系统主流的。一共有八个展示模块。

这种只适合做GitHub、大屏看板、科技感需要十足的情况。平日里基本用不了这种布局和设计的感觉。布局上有个非常显眼的折线图，但好像没有给出太多实质性的信息。下方两个模块用了两种不同的数据展示形式，看起来很舒服。右侧是一个和看板无关的模块。下方是升级广告，广告位这个位置感觉算是比较黄金位的。缺点也很明显，只适合数据少的看板，仅有3个数据展示模块。

这个就牛了，风格方面很适合国内的系统。但细究布局和功能，布局上其实有一些复杂，作业那一块数据一多肯定布局很混乱。不过整体风格是比较容易改造的。发现仪表盘折线图蛮重要，折线图效果也是蛮好的。左侧下载那一块没有关闭按钮看着碍眼。一共有8个数据展示模块。

作品地址

这个一共有六个模块，布局方面也是比较适合国内系统。条形图适合展示时间线上的工作记录等内容。

Dashboard

这个效果也是适合用到科技类产品上，但是整体风格比较概念性。仪表盘设计中，有一部分不要限死在一个板子里面会让人看起来布局松弛一些，不会那么僵硬的feel。不过这个页面麻雀虽小，五脏俱全，融合了9个模块，有折线图、条形图、进度条、圆环….等好几种样式，参考价值蛮大的，就是风格需要大改才能符合国内系统，这版设计比较概念化。

仪表盘后台

国内一款开源CRM仪表盘设计：

这款CRM的风格在CRM系统中算是非常漂亮了。简约大气，比较符合他们这个系统的独有风格，也是国内仪表盘比较好参考的一个案例。在仪表盘中下方，其左右结构并不是对称的。使用到的可视化组件有折线图、条形图、柱状图、仪表盘。顶部折线图是做到按钮里面。中下方模块可让用户自主排序，甚至在同一个模块内切换数据展示形式（可选折线图或柱状图）。这个设计适合需要摆放超级多数据的系统，页头浏览器可见区域有10个模块。

这个图看起来虽然不太像仪表盘，但是也有借鉴意义，就是当要摆放的数据非常多时，要如何设计仪表盘。这个仪表盘顶部用了一个Tabs标签页，如果一个标签页可以展示6项，4个标签页就可以展示24项。不建议在标签页中使用不同风格的展示形式，如第一个标签页用卡片、第二个标签页用折线，这样会让仪表盘交互起来非常不直观。失去了仪表盘本来就是要让数据直观展示的初衷。这个图也是比较符合国内系统风格的。

作品地址

写在最后

当然，并不是一个页面可展示的数据模块越多越好，设计中需要尊重希克定律和米勒定律，即可供选择的选项越多越复杂，就越难做出选择；我们的大脑在同一时间只能处理大约7±2个对象。模块的复杂程度需要看公司业务。

超详解百万PV网站架构案例部署（内附安装包）

网站架构概述

网站架构是根据客户需求分析的结果，准确定位网站目标群体，设定网站的整体架构，规划、设计网站栏目及其内容，制定网站开发流程的顺序，最大限度地进行高效资源分配与管理的设计。

网站架构分很多种，一般我们平常所说的是软件方面的架构，例如：

• 前端使用了什么代理服务器？
• web服务器用的是什么？
• 中间又使用了什么缓存服务器？
• 数据库服务器用的是什么？
• 代码又是基于什么框架开发的？
• 这个网站架构每天访问量有多少（通常所说的PV）？并发数为多少？

PV（page view 页面浏览量）即点击量，通常是衡量一个网络新闻频道或网站甚至一条网络新闻的主要指标。PV之于网站，就像收视率之于电视，从某种程度上已成为投资者衡量商业网站表现的最重要的尺度。
PV：一个访问者在24小时（0点--24点）内到底看了网站的几个页面，这里需要注意的是，同一个人浏览网站的同一个页面，不重复计算PV量，点100次也只算1次。
查询网站PV可以访问Alexa.cn，免费提供网站访问量查询，网站浏览量查询和排名变化趋势数据查询。
本次案例概述

采用四层模式实现，主要分为前端反向代理层、Web层、数据库缓存层和数据库层。前端反向代理层层采用主备模式，Web层采用群集模式，数据库缓存层采用主备模式，数据库层采用主从模式。

架构拓扑图：实线是正常情况数据流向，虚线是异常情况下的数据流向。

实验环境部署：

主机名	IP地址	用途	操作系统
master	192.168.195.140	前端nginx反向代理主机、redis缓存主机、mysql数据主库	CentOS7
backup	192.168.195.147	前端nginx反向代理备机、redis缓存备机、mysql数据备库	CentOS7
web1	192.168.195.162	tomcat搭建的web服务器	CentOS7
web2	192.168.195.163	tomcat搭建的web服务器	CentOS7

本实验仅作为学习验证，为了简便所以将nginx反向代理，mysql数据库与redis缓存数据代理整合到一起。
百度云盘提供实验需要的安装包：

apache-tomcat-8.5.23.tar.gz：https://pan.baidu.com/s/11dTUADKp8kRyxAaL8QugVw
jdk-8u144-linux-x64.tar.gz：https://pan.baidu.com/s/13G9qfPiVBD8IdLqsY0wVGw
SLSaleSystem.tar.gz：https://pan.baidu.com/s/1lhm402WvoQg-YI0YDaUEtw
slsaledb-2014-4-10.sql：https://pan.baidu.com/s/13wpxroqMah83DkoZJbUVZg

首先关闭所有实验主机的防火墙，selinux功能

systemctl stop firewalld.service
systemctl disable firewalld.service
setenforce 0

一，部署nginx反向代理，并使用keepalived实现双机热备。
1，在master，backup上面yum安装nginx，keepalived
由于CentOS7系统默认yum源没有提供nginx软件包，所以需要重新下载含nginx软件包的yum源

rpm -ivh http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0.el7.ngx.noarch.rpm
yum install keepalived nginx -y

2，修改keepalived配置文件，构建双机热备，并加入触发nginx启动脚本的配置项，关联nginx服务，实现keepalived服务与nginx服务能够同时启动与关闭。
master，backup主从都要设置，个别配置项的区别在下面有说明

vim /etc/keepalived/keepalived.conf
global_defs {
router_id NGINX_HA //主从相同，并删除后面4行配置
}

vrrp_script nginx { //加入触发脚本配置
script "/opt/shell/nginx.sh"
interval 2
}

vrrp_instance VI_1 {
state MASTER //主为MASTER，从为BACKUP
interface ens33 //网卡为ens33
virtual_router_id 51 //主从不能相同，从的设为52
priority 100 //主的优先级大于从的，从的设为90
advert_int 1
authentication {
auth_type PASS
auth_pass 1111
}
track_script { //调用前面的出发脚本配置
nginx
}
virtual_ipaddress {
192.168.195.188 //设置共同的虚拟IP，主从相同
}
} //以下其他配置项都删除

3，编写触发nginx启动的脚本，注意与keepalived配置文件里面的设定路径，文件名相同

mkdir /opt/shell
vim /opt/shell/nginx.sh
#!/bin/bash
k=ps -ef | grep keepalived | grep -v grep | wc -l
if [ $k -gt 0 ];then
/usr/bin/systemctl start nginx.service
else
/usr/bin/systemctl stop nginx.service
fi

chmod +x /opt/shell/nginx.sh

4，修改nginx配置文件，配置反向代理，主从配置内容相同

vim /etc/nginx/nginx.conf
upstream tomcat_pool {
server 192.168.195.162:8080; #指定web1地址与端口
server 192.168.195.163:8080; #指定web2地址与端口
ip_hash; #会话稳固功能，否则无法通过VIP地址登陆
}
server{
listen 80;
server_name 192.168.195.188; #虚拟IP
location /{
proxy_pass http://tomcat_pool;
proxy_set_header X-Real-IP $remote_addr;
}
}

nginx -t #检查配置文件语法
systemctl start keepalived.service
ps aux | grep keepalived

在master。backup上nginx反向代理服务搭建好了
二，接下来在web1，web2上搭建tomcat，提供web服务
1，解压事先准备好的安装包

tar zxvf apache-tomcat-8.5.23.tar.gz -C /usr/local
tar zxvf jdk-8u144-linux-x64.tar.gz -C /usr/local
cd /usr/local
mv apache-tomcat-8.5.23 tomcat8
mv jdk1.8.0_144 java

2，由于tomcat是由java开发的，所以需要配置JDK环境变量

vim /etc/profile
添加如下环境变量

export JAVA_HOME=/usr/local/java
export JRE_HOME=/usr/local/java/jre
export PATH=$PATH:/usr/local/java/bin
export CLASSPATH=./:/usr/local/java/lib:/usr/local/java/jre/lib

source /etc/profile

java -version //查看tomcat版本

3，将tomcat软件包中的启动脚本，关闭脚本生成链接文件，使linux系统能够识别，优化tomcat服务启动，关闭管理

ln -s /usr/local/tomcat8/bin/startup.sh /usr/bin/tomcatup
ln -s /usr/local/tomcat8/bin/shutdown.sh /usr/bin/tomcatdown

tomcatup //开启tomcat
tomcatdown //关闭tomcat

4，编写测试页面，为了实验效果编辑不同的测试网页

cd /usr/local/tomcat8/webapps/ROOT
mv index.jsp index.jsp.bak
vim index.jsp
<h1>this is server 162</h1> //编写测试页面，web1，web2内容不同

web1上面的操作

web2上面的操作

5，在浏览器测试页面，验证nginx反向代理功能
(1)首先使用各自的ip地址进行访问

（2）再使用虚拟IP访问测试反向代理，注意由于没有设置权重，需将其中一个web服务关闭，才能看到另外一个web服务的页面


三，在master，backup上面yum安装数据库mariadb

yum install -y mariadb-server mariadb
systemctl start mariadb.service
systemctl enable mariadb.service

netstat -antp | grep 3306

mysql_secure_installation //安全功能引导设置 因为是yum 安装的
设置密码后 最后一个出现tables时 Yy就好，其余为n

mysql -uroot -p //登陆mariadb

四，配置SL商城网站上线服务
1，在master，backup上把事先准备的SL商城网站项目导入mariadb数据库

mysql -uroot -pabc123 < slsaledb-2014-4-10.sql
mysql -uroot -pabc123 -e ‘show databases;‘

mysql -uroot -pabc123
grant all on slsaledb.* to ‘root‘@‘%‘ identified by ‘123123‘; //授权
flush privileges;

2，在两台web服务器上添加SL商城服务项目，并进行相关配置

tar zxvf SLSaleSystem.tar.gz -C /usr/local/tomcat8/webapps
cd /usr/local/tomcat8/webapps/SLSaleSystem/WEB-INF/classes
vim jdbc.properties #修改数据库IP地址：是VIP.以及授权用户名root和密码123123

vim /usr/local/tomcat8/conf/server.xml
在148行添加如下：
<Context path="" docBase="SLSaleSystem" reloadable="true" ddebug="0"></Context> #添加需要上线服务的位置变量

重启tomcat

tomcatdown
tomcatup

网站测试
http://192.168.195.162:8080/ //默认的用户名admin 密码：123456
http://192.168.195.163:8080/ //默认的用户名admin 密码：123456
http://192.168.195.188 //输入虚拟地址测试登录



五，在master，backup上安装redis缓存，部署主从和群集

yum install -y epel-release //linux系统默认yum源没有redis软件包，需先安装epel源
yum install redis -y //使用yum命令安装redis
service redis start //开启redis服务

1，部署redis主从
（1）修改redis配置文件
redis主服务器上修改

vim /etc/redis.conf

bind 0.0.0.0 //任意地址

redis从服务器上修改

vim /etc/redis.conf

bind 0.0.0.0 //任意地址
265行下添加：slaveof 192.168.195.147 6379 //主redis 的IP与端口

（2）重启redis服务，redis默认端口为6379

service redis restart
netstat -antp | grep 6379

（3）验证redis主从同步
在master上设置name值为test，在backup上可以获取name的值，证明redis可以主从复制


2，在web服务器上配置商城项目中连接redis的参数

vim /usr/local/tomcat8/webapps/SLSaleSystem/WEB-INF/classes/applicationContext-mybatis.xml

38行 <!--redis 配置 开始-->
<constructor-arg value="192.168.195.188"/> #虚拟IP
<constructor-arg value="6379"/>

tomcatdown
tomcatup

测试缓存效果，在redis 上连接VIP

redis-cli -h 192.168.195.188 -p 6379

192.168.195.188:6379> info
keyspace_hits:1 或 keyspace_misses:1 //关注这个值，命中和未命中登陆商城，然后反复点击需要数据库参与的操作界面，再来回检查

命中发生变化，说明redis参与工作。

3，配置redis群集
在master主服务器操作

redis-cli -h 192.168.195.147 info Replication //获取当前服务器状态

vim /etc/redis-sentinel.conf
17 protected-mode no
69 sentinel monitor mymaster 192.168.195.147 6379 1 //1表示1台服务器
98 sentinel down-after-milliseconds mymaster 3000 //故障切换时间

systemctl start redis-sentinel //启动群集，从服务器backup也要开启群集
netstat -antp | grep 26379

redis-cli -h 192.168.195.147 -p 26379 info Sentinel //查看群集信息

验证主从切换
在主master上：

systemctl stop redis //停止redis
redis-cli -h 192.168.195.147 -p 26379 info Sentinel //再次查看

systemctl start redis.service //再次开启是不会主动回到master ，除非关闭从的redis

验证redis数据同步情况
在master上

在backup上

六，配置数据库mariadb主从复制

vim /etc/my.cnf

[mysqld]下
binlog-ignore-db=mysql,information_schema
character_set_server=utf8
log_bin=mysql_bin
server_id=1 //在从服务器backup的id需要修改
log_slave_updates=true
sync-binlog=1

systemctl restart mariadb.service

netstat -antp | grep 3306

在master上登录，给从backup进行授权

mysql -u root -p

grant replication slave on . to ‘rep‘@‘192.168.195.%‘ identified by ‘123123‘;

flush privileges;

show master status; //记录日志文件与偏移量

在backup上同步master的数据

mysql -u root -p
change master to master_host=‘192.168.195.147‘,master_user=‘rep‘,master_password=‘123123‘,master_log_file=‘mysql_bin.000001‘,master_log_pos=473;
start slave; //开启主从复制
show slave status\G; //查看状态
Slave_IO_Running: Yes //得到这两个为Yes的值
Slave_SQL_Running: Yes

到此项目架构部署完成。