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

从计算机工作原理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。不过平时工作中和开发同事交流沟通多了,基本上也会逐渐了解一些技术知识和概念。所以,如果想对技术有进一步的了解,我觉得有两个方法:

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

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

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

点赞 7
收藏 16
继续阅读相关文章

发表评论 已发布 11

还可以输入 800 个字
 
 
载入中....
11 收藏