新人必读！写给设计师的程序开发基本概念

对于设计师来说，了解一些程序开发的基本概念，有助于我们与开发同事沟通交互方案。

从计算机工作原理Get人机交互的底层逻辑

提到计算机工作原理，不得不提一个人，他就是冯·诺依曼。

冯·诺依曼（John von Neumann，1903~1957），20 世纪最重要的数学家之一，在现代计算机、博弈论、核武器和生化武器等诸多领域内有杰出建树的最伟大科学全才之一，被后人称为「计算机之父」和「博弈论之父」。

冯.诺依曼的三大原理：

• 计算机由控制器、运算器、存储器、输入设备、输出设备五大部分组成。
• 程序和数据以二进制代码形式不加区别地存放在存储器中，存放位置由地址确定。
• 控制器根据存放在存储器中的指令序列（程序）进行工作，并由一个程序计数器控制指令的执行。控制器具有判断能力，能根据计算结果选择不同的工作流程。根据冯诺依曼体系结构构成的计算机，必须具有如下功能：把需要的程序和数据送至计算机中。必须具有长期记忆程序、数据、中间结果及最终运算结果的能力。

计算机能够完成各种算术、逻辑运算和数据传送等数据加工处理的能力。能够根据需要控制程序走向，并能根据指令控制机器的各部件协调操作。能够按照要求将处理结果输出给用户。
为了完成上述的功能，计算机必须具备五大基本组成部件，包括：

• 输入数据和程序的输入设备；
• 记忆程序和数据的存储器；
• 完成数据加工处理的运算器；
• 控制程序执行的控制器；
• 输出处理结果的输出设备 。

笔者注：

是不是觉得不明觉厉？那就对了，反正我是看不懂。BUT，看完这个原理，我貌似 Get 到了人机交互的底层逻辑：任何形式的人机交互，都包含3个基本要素：输入、计算、输出。

前端、后端、移动端工程师，他们一样吗？

相信很多读者朋友所在的公司，会有前端工程师、后端工程师、移动端工程师，那这些角色到底有啥区别？要搞明白他们的区别，我们首先要理解两个概念：B/S 结构和 C/S 结构。

1. B/S结构

B/S就是「Browser/Server」的缩写，即「浏览器/服务器」模式。

B/S结构是随着互联网的发展，Web 出现后兴起的一种网络结构模式。这种模式统一了客户端，让核心的业务处理在服务端（差不多也可以叫「云端」）完成。

我们只要在自己电脑或手机上安装一个浏览器应用，就可以通过 Web Server 与数据库进行数据交互。比如，我们用电脑的浏览器访问微博、头条、爱奇艺、腾讯视频等网页，就是在访问 B/S 结构的程序。

笔者注：

B/S 结构维护和升级方式更简单，因为用户是用浏览器直接使用的。

所以，当我们发布一个产品或功能时，只需要维护升级服务器端就可以，用户那边可以继续使用浏览器，体验新功能。

2. C/S结构

C/S 就是「Client/Server」的缩写，即「客户端/服务器」模式。

C/S 结构是一种软件系统体系结构，也是生活中很常见的。比如我们电脑和手机系统中安装的微信、QQ、Office 等应用程序就是 C/S 结构。

笔者注：

C/S 结构是将需要处理的业务合理地分配到客户端和服务器端，这样可以大大降低通信成本，但是升级维护成本较高。

所以，当我们发布一个客户端产品或功能时，理论上是需要发布软件版本的，用户那边也需要主动升级，才能体验新产品和功能。（说明：对于客户端内的 H5 页面，一般不需要重新发布客户端版本）

3. 前端工程师

前端工程师的主要技术是：html5，css3，jquery，angularjs，bootstrap，reactjs，vuejs，webpack，less/sass，gulp，nodejs，Google V8 引擎，java 多线程，模块化，面向切面编程，设计模式，浏览器兼容性，性能优化等等。

前端关注的是：需求在前端页面的实现，速度，兼容性，用户体验等等。

4. 后端Java工程师

后端 Java 工程师的主要技术是：Java 基础，设计模式，jvm 原理，spring+springmvc 原理及源码，linux，mysql 事务隔离与锁机制，mongodb，http/tcp，多线程，分布式架构，弹性计算架构，微服务架构，Java 性能优化，以及相关的项目管理等等。

后端关注的是：高并发，高可用，高性能，安全，存储，业务等等。

笔者注：

下面我用 APP 下拉刷新的场景，帮你理解一下前端和后端的交互。

• STEP 1：下拉（用户手指与 APP 前端交互）
• STEP 2：松开（手指与 APP 前端交互后，APP 前端与后端交互）
• STEP 3：刷新成功，加载新数据（后端将新数据给 APP 前端）
• STEP 4：前端渲染展示新数据（APP 前端与用户交互）

Web前端的两个基本概念

对于设计师来说，知道 Web 前端技术里的两个概念就可以了：html 和 css。我举一个装修房子的例子，帮你理解这两个概念。

当我们设计一个间房子时，我们会根据需求去规划和设计房子里各个空间的位置和大小，客厅、厨房、卧室等等。这个布局、搭框架的过程就是 html 做的事情。

等到房子的空间大小布局搞定后，我们会刷油漆、装饰，做一些软装，这个软装的过程，我么可以理解成 css 做的事情。

所以，一个静态的 Web 前端页面，由 html 搭架子和布局，由 css 去装饰 html 的视觉效果。（说明：如果要实现业务交互，还需要 js、jQuery 等其他技术，这里不展开讲）

我们可以通过浏览器的开发者工具，随时查看前端工程师开发出来的页面，这个方法可以帮我们比较出：前端工程师做的页面效果和我们设计稿效果的具体差别。

Windows 按 F12，Mac 按 command+option+i

另外，像 Sketch 插件 sketch measure、蓝湖、iDoc 等工具，都可以生成 css，前端工程师可以参考使用。

△ 图片来自蓝湖官网

写在最后

我不懂具体的开发技术，前端开发知识也只是自学了 html 和 css。不过平时工作中和开发同事交流沟通多了，基本上也会逐渐了解一些技术知识和概念。所以，如果想对技术有进一步的了解，我觉得有两个方法：

• 报个前端开发基础课程；
• 多找开发同事交流问问题。当然要记得加鸡腿哦~~（推荐这个方法）

欢迎关注作者的微信公众号：「设计意志」