浅谈B/S和C/S系统界面设计异同

什么是BS软件

B/S系统即（Browser浏览器/Server服务器结构），是C/S系统的一种变化或者改进的体系结构，在这种结构下，用户工作界面是通过浏览器实现的。BS软件界面乐意被理解为是建立在现有浏览器所能解释的Html，CSS，Scrip等基础之上的网页。它的组成结构是由Html语言+CSS样式表+Scrip的特效代码，组成的页面。BS软件等同于这种体系结构。

B/S系统

像常用的用浏览器访问登陆的邮箱或公司内部的办公系统，都是采用BS系统开发，用户只需打开办公电脑里安装好的浏览器（Browser），通过输入地址来访问Web服务器即可食用，这样用户不需要安装客户端就节省了不少的磁盘空间与内存。

BS软件的种类

1. 邮件类

2. 聊天类

3. 在线订火车票系统

4. OA自动化办公系统

5. 公司后台管理系统

如163邮件网页版、火车票预定系统、网上银行网页版：

163邮件网页版

火车票预定系统

它们的共同特点是都是通过浏览器的方式打开，之后需要进行登陆，输入对应的用户名和密码，和服务器建立有效的通信连接，才能进行进一步的操作。

什么是CS系统

C/S即由Client客户端/Server服务器这两种体系结构组成的一种软件系统的简称。

客户端就是用户端，用户需要在本地电脑或者其他终端上安装客户端才可进行业务上的管理操作。

服务器端主要提供数据管理、数据共享及系统维护和控制等功能。

它们俩需要建立特定的通信连接，来保证应用程序的正常运行。

CS系统

---

什么是CS软件

Client客户端其实就是CS软件，CS软件就是电脑客户端，即在电脑运行的常用软件。如PC端的杀毒软件或360软件都是属于CS系统架构下的桌面客户端软件。

实例：

360卫士pc端

360卫士手机端

这就是一个PC端的软件，将来我们设计这些界面，它是一款产品，和我们常见的手机端app有相同之处：需要在电脑或是手机运行里面下载安装，但是也有区别：操作系统不同，360卫士手机端主要运行ios和安卓两大系统下，而PC端是运行在微软的windows或苹果的mac下运行，系统的不同会对用户的操作习惯以及功能、界面、用色等方面产生差异。

---

CS软件的种类介绍

①　在线教育类

如在线学习。

②　聊天类

如微信或qq，都是有移动端或pc端。

③　杀毒类

360、瑞星、金山等。

④　医疗系统类

如医院的挂号系统、终端机。

⑤　公共交通类

地铁的自助买票。

⑥　金融股票类

如银行里面的排队系统。

如下面在线直播pc端的界面设计：

在线直播pc端

它由几个不同的界面组成，是属于一款产品，产品中有不同的交互流程，每一个流程有不同的页面承载内容。每一个流程、交互、过程都有不同的页面。

BS软件与CS软件的区别（以微信为例进行解析）

1. 使用人群的区别

考虑上班族使用网页版产品，上班族可以通过电脑和朋友沟通。网页版和PC端的区别，PC端常用的是一些忠实用户、固定用户，必须在本地电脑下载。（CS）

网页版更多是临时性的、应急性的的用户，通过浏览器实时打开，就可以登陆之后和服务器产生联系，但是它有弊端，如信息不能保存，好处就是可以在手机端看到。（BS）

2. 产品交互上的区别

①　BS：没有窗口设计的概念，没有相应的窗口控制按钮，都是通过浏览器控制。

②　CS：窗口设计鲜明，窗口有相应的放大、缩小等按钮。

3. 界面设计上的区别

①　BS界面